fix: resolve lint errors and document describe naming convention

Amp-Thread-ID: https://ampcode.com/threads/T-019c4b83-5c21-714d-9c01-38e2e748c019
Co-authored-by: Amp <amp@ampcode.com>

.claude/skills/writing-playwright-tests/SKILL.md

@@ -0,0 +1,200 @@
+---
+name: writing-playwright-tests
+description: 'Writes Playwright e2e tests for ComfyUI_frontend. Use when creating, modifying, or debugging browser tests. Triggers on: playwright, e2e test, browser test, spec file.'
+---
+
+# Writing Playwright Tests for ComfyUI_frontend
+
+## Golden Rules
+
+1. **ALWAYS look at existing tests first.** Search `browser_tests/tests/` for similar patterns before writing new tests.
+
+2. **ALWAYS read the fixture code.** The APIs are in `browser_tests/fixtures/` - read them directly instead of guessing.
+
+3. **Use premade JSON workflow assets** instead of building workflows programmatically.
+   - Assets live in `browser_tests/assets/`
+   - Load with `await comfyPage.workflow.loadWorkflow('feature/my_workflow')`
+   - Create new assets by starting with `browser_tests/assets/default.json` and manually editing the JSON to match your desired graph state
+
+## Vue Nodes vs LiteGraph: Decision Guide
+
+Choose based on **what you're testing**, not personal preference:
+
+| Testing...                                     | Use                              | Why                                      |
+| ---------------------------------------------- | -------------------------------- | ---------------------------------------- |
+| Vue-rendered node UI, DOM widgets, CSS states  | `comfyPage.vueNodes.*`           | Nodes are DOM elements, use locators     |
+| Canvas interactions, connections, legacy nodes | `comfyPage.nodeOps.*`            | Canvas-based, use coordinates/references |
+| Both in same test                              | Pick primary, minimize switching | Avoid confusion                          |
+
+**Vue Nodes requires explicit opt-in:**
+
+```typescript
+await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+await comfyPage.vueNodes.waitForNodes()
+```
+
+**Vue Node state uses CSS classes:**
+
+```typescript
+const BYPASS_CLASS = /before:bg-bypass\/60/
+await expect(node).toHaveClass(BYPASS_CLASS)
+```
+
+## Common Issues
+
+These are frequent causes of flaky tests - check them first, but investigate if they don't apply:
+
+| Symptom                            | Common Cause              | Typical Fix                                                                            |
+| ---------------------------------- | ------------------------- | -------------------------------------------------------------------------------------- |
+| Test passes locally, fails in CI   | Missing nextFrame()       | Add `await comfyPage.nextFrame()` after canvas ops (not needed after `loadWorkflow()`) |
+| Keyboard shortcuts don't work      | Missing focus             | Add `await comfyPage.canvas.click()` first                                             |
+| Double-click doesn't trigger       | Timing too fast           | Add `{ delay: 5 }` option                                                              |
+| Elements end up in wrong position  | Drag animation incomplete | Use `{ steps: 10 }` not `{ steps: 1 }`                                                 |
+| Widget value wrong after drag-drop | Upload incomplete         | Add `{ waitForUpload: true }`                                                          |
+| Test fails when run with others    | Test pollution            | Add `afterEach` with `resetView()`                                                     |
+| Local screenshots don't match CI   | Platform differences      | Screenshots are Linux-only, use PR label                                               |
+
+## Test Tags
+
+Add appropriate tags to every test:
+
+| Tag           | When to Use                               |
+| ------------- | ----------------------------------------- |
+| `@smoke`      | Quick essential tests                     |
+| `@slow`       | Tests > 10 seconds                        |
+| `@screenshot` | Visual regression tests                   |
+| `@canvas`     | Canvas interactions                       |
+| `@node`       | Node-related                              |
+| `@widget`     | Widget-related                            |
+| `@mobile`     | Mobile viewport (runs on Pixel 5 project) |
+| `@2x`         | HiDPI tests (runs on 2x scale project)    |
+
+```typescript
+test.describe('Feature', { tag: ['@screenshot', '@canvas'] }, () => {
+```
+
+## Retry Patterns
+
+**Never use `waitForTimeout`** - it's always wrong.
+
+| Pattern                  | Use Case                                             |
+| ------------------------ | ---------------------------------------------------- |
+| Auto-retrying assertions | `toBeVisible()`, `toHaveText()`, etc. (prefer these) |
+| `expect.poll()`          | Single value polling                                 |
+| `expect().toPass()`      | Multiple assertions that must all pass               |
+
+```typescript
+// Prefer auto-retrying assertions when possible
+await expect(node).toBeVisible()
+
+// Single value polling
+await expect.poll(() => widget.getValue(), { timeout: 2000 }).toBe(100)
+
+// Multiple conditions
+await expect(async () => {
+  expect(await node1.getValue()).toBe('foo')
+  expect(await node2.getValue()).toBe('bar')
+}).toPass({ timeout: 2000 })
+```
+
+## Screenshot Baselines
+
+- **Screenshots are Linux-only.** Don't commit local screenshots.
+- **To update baselines:** Add PR label `New Browser Test Expectations`
+- **Mask dynamic content:**
+  ```typescript
+  await expect(comfyPage.canvas).toHaveScreenshot('page.png', {
+    mask: [page.locator('.timestamp')]
+  })
+  ```
+
+## CI Debugging
+
+1. Download artifacts from failed CI run
+2. Extract and view trace: `npx playwright show-trace trace.zip`
+3. CI deploys HTML report to Cloudflare Pages (link in PR comment)
+4. Reproduce CI: `CI=true pnpm test:browser`
+5. Local runs: `pnpm test:browser:local`
+
+## Anti-Patterns
+
+Avoid these common mistakes:
+
+1. **Arbitrary waits** - Use retrying assertions instead
+
+   ```typescript
+   // ❌ await page.waitForTimeout(500)
+   // ✅ await expect(element).toBeVisible()
+   ```
+
+2. **Implementation-tied selectors** - Use test IDs or semantic selectors
+
+   ```typescript
+   // ❌ page.locator('div.container > button.btn-primary')
+   // ✅ page.getByTestId('submit-button')
+   ```
+
+3. **Missing nextFrame after canvas ops** - Canvas needs sync time
+
+   ```typescript
+   await node.drag({ x: 50, y: 50 })
+   await comfyPage.nextFrame() // Required
+   ```
+
+4. **Shared state between tests** - Tests must be independent
+   ```typescript
+   // ❌ let sharedData  // Outside test
+   // ✅ Define state inside each test
+   ```
+
+## Quick Start Template
+
+```typescript
+// Path depends on test file location - adjust '../' segments accordingly
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+test.describe('FeatureName', { tag: ['@canvas'] }, () => {
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.canvasOps.resetView()
+  })
+
+  test('should do something', async ({ comfyPage }) => {
+    await comfyPage.workflow.loadWorkflow('myWorkflow')
+
+    const node = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    // ... test logic
+
+    await expect(comfyPage.canvas).toHaveScreenshot('expected.png')
+  })
+})
+```
+
+## Finding Patterns
+
+```bash
+# Find similar tests
+grep -r "KSampler" browser_tests/tests/
+
+# Find usage of a fixture method
+grep -r "loadWorkflow" browser_tests/tests/
+
+# Find tests with specific tag
+grep -r '@screenshot' browser_tests/tests/
+```
+
+## Key Files to Read
+
+| Purpose           | Path                                       |
+| ----------------- | ------------------------------------------ |
+| Main fixture      | `browser_tests/fixtures/ComfyPage.ts`      |
+| Helper classes    | `browser_tests/fixtures/helpers/`          |
+| Component objects | `browser_tests/fixtures/components/`       |
+| Test selectors    | `browser_tests/fixtures/selectors.ts`      |
+| Vue Node helpers  | `browser_tests/fixtures/VueNodeHelpers.ts` |
+| Test assets       | `browser_tests/assets/`                    |
+| Existing tests    | `browser_tests/tests/`                     |
+
+**Read the fixture code directly** - it's the source of truth for available methods.

.github/workflows/ci-dist-telemetry-scan.yaml

@@ -0,0 +1,52 @@
+name: 'CI: Dist Telemetry Scan'
+
+on:
+  pull_request:
+    branches-ignore: [wip/*, draft/*, temp/*]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  scan:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10
+
+      - name: Use Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version: 'lts/*'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build project
+        run: pnpm build
+
+      - name: Scan dist for telemetry references
+        run: |
+          set -euo pipefail
+          if rg --no-ignore -n \
+            -g '*.html' \
+            -g '*.js' \
+            -e 'Google Tag Manager' \
+            -e '(?i)\bgtm\.js\b' \
+            -e '(?i)googletagmanager\.com/gtm\.js\\?id=' \
+            -e '(?i)googletagmanager\.com/ns\.html\\?id=' \
+            dist; then
+            echo 'Telemetry references found in dist assets.'
+            exit 1
+          fi
+          echo 'No telemetry references found in dist assets.'

.gitignore

@@ -96,3 +96,5 @@ vitest.config.*.timestamp*
 
 # Weekly docs check output
 /output.txt
+
+.amp

.oxlintrc.json

@@ -21,6 +21,7 @@
     "eslint",
     "import",
     "oxc",
+    "promise",
     "typescript",
     "unicorn",
     "vitest",
@@ -28,6 +29,12 @@
   ],
   "rules": {
     "no-async-promise-executor": "off",
+    "no-else-return": [
+      "error",
+      {
+        "allowElseIf": false
+      }
+    ],
     "no-console": [
       "error",
       {
@@ -35,8 +42,29 @@
       }
     ],
     "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",
       {
@@ -60,24 +88,70 @@
           {
             "name": "primevue/sidebar",
             "message": "Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from 'primevue/drawer'"
-          },
-          {
-            "name": "@/i18n--to-enable",
-            "importNames": ["st", "t", "te", "d"],
-            "message": "Don't import `@/i18n` directly, prefer `useI18n()`"
           }
         ]
       }
     ],
+    "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",
@@ -87,11 +161,55 @@
     "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",
@@ -101,6 +219,12 @@
     "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",
     "vue/no-import-compiler-macros": "error",
     "vue/no-dupe-keys": "error"
   },
@@ -119,7 +243,8 @@
         "no-control-regex": "error",
         "no-useless-rename": "error",
         "no-unused-private-class-members": "error",
-        "unicorn/no-empty-file": "error"
+        "unicorn/no-empty-file": "error",
+        "vitest/consistent-test-filename": "off"
       }
     }
   ]

.storybook/main.ts

@@ -98,12 +98,10 @@ const config: StorybookConfig = {
       },
       build: {
         rolldownOptions: {
-          experimental: {
-            strictExecutionOrder: true
-          },
           treeshake: false,
           output: {
-            keepNames: true
+            keepNames: true,
+            strictExecutionOrder: true
           },
           onwarn: (warning, warn) => {
             // Suppress specific warnings

.stylelintrc.json

@@ -59,7 +59,7 @@
     "function-no-unknown": [
       true,
       {
-        "ignoreFunctions": ["theme", "v-bind"]
+        "ignoreFunctions": ["theme", "v-bind", "from-folder", "from-json"]
       }
     ]
   },

CODEOWNERS

@@ -2,57 +2,57 @@
 *                                                 @Comfy-org/comfy_frontend_devs
 
 # Desktop/Electron
-/apps/desktop-ui/                                 @benceruleanlu
-/src/stores/electronDownloadStore.ts              @benceruleanlu
-/src/extensions/core/electronAdapter.ts           @benceruleanlu
-/vite.electron.config.mts                         @benceruleanlu
+/apps/desktop-ui/                                 @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/stores/electronDownloadStore.ts              @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/extensions/core/electronAdapter.ts           @benceruleanlu @Comfy-org/comfy_frontend_devs
+/vite.electron.config.mts                         @benceruleanlu @Comfy-org/comfy_frontend_devs
 
 # Common UI Components
-/src/components/chip/                             @viva-jinyi
-/src/components/card/                             @viva-jinyi
-/src/components/button/                           @viva-jinyi
-/src/components/input/                            @viva-jinyi
+/src/components/chip/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/card/                             @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/button/                           @viva-jinyi @Comfy-org/comfy_frontend_devs
+/src/components/input/                            @viva-jinyi @Comfy-org/comfy_frontend_devs
 
 # Topbar
-/src/components/topbar/                           @pythongosssss
+/src/components/topbar/                           @pythongosssss @Comfy-org/comfy_frontend_devs
 
 # Thumbnail
-/src/renderer/core/thumbnail/                     @pythongosssss
+/src/renderer/core/thumbnail/                     @pythongosssss @Comfy-org/comfy_frontend_devs
 
 # Legacy UI
-/scripts/ui/                                      @pythongosssss
+/scripts/ui/                                      @pythongosssss @Comfy-org/comfy_frontend_devs
 
 # Link rendering
-/src/renderer/core/canvas/links/                  @benceruleanlu
+/src/renderer/core/canvas/links/                  @benceruleanlu @Comfy-org/comfy_frontend_devs
 
 # Partner Nodes
-/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88
+/src/composables/node/useNodePricing.ts           @jojodecayz @bigcat88 @Comfy-org/comfy_frontend_devs
 
 # Node help system
-/src/utils/nodeHelpUtil.ts                        @benceruleanlu
-/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu
-/src/services/nodeHelpService.ts                  @benceruleanlu
+/src/utils/nodeHelpUtil.ts                        @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/stores/workspace/nodeHelpStore.ts            @benceruleanlu @Comfy-org/comfy_frontend_devs
+/src/services/nodeHelpService.ts                  @benceruleanlu @Comfy-org/comfy_frontend_devs
 
 # Selection toolbox
-/src/components/graph/selectionToolbox/           @Myestery
+/src/components/graph/selectionToolbox/           @Myestery @Comfy-org/comfy_frontend_devs
 
 # Minimap
-/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery
+/src/renderer/extensions/minimap/                 @jtydhr88 @Myestery @Comfy-org/comfy_frontend_devs
 
 # Workflow Templates
-/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki
-/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki
+/src/platform/workflow/templates/                 @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
+/src/components/templates/                        @Myestery @christian-byrne @comfyui-wiki @Comfy-org/comfy_frontend_devs
 
 # Mask Editor
-/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp
-/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp
+/src/extensions/core/maskeditor.ts                @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
+/src/extensions/core/maskEditorLayerFilenames.ts  @trsommer @brucew4yn3rp @Comfy-org/comfy_frontend_devs
 
 # 3D
-/src/extensions/core/load3d.ts                    @jtydhr88
-/src/components/load3d/                           @jtydhr88
+/src/extensions/core/load3d.ts                    @jtydhr88 @Comfy-org/comfy_frontend_devs
+/src/components/load3d/                           @jtydhr88 @Comfy-org/comfy_frontend_devs
 
 # Manager
-/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata
+/src/workbench/extensions/manager/                @viva-jinyi @christian-byrne @ltdrdata @Comfy-org/comfy_frontend_devs
 
 # Translations
 /src/locales/                                     @Comfy-Org/comfy_maintainer @Comfy-org/comfy_frontend_devs

CONTRIBUTING.md

@@ -201,7 +201,7 @@ The project supports three types of icons, all with automatic imports (no manual
 2. **Iconify Icons** - 200,000+ icons from various libraries: `<i class="icon-[lucide--settings]" />`, `<i class="icon-[mdi--folder]" />`
 3. **Custom Icons** - Your own SVG icons: `<i-comfy:workflow />`
 
-Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Custom icons are stored in `packages/design-system/src/icons/` and processed by `packages/design-system/src/iconCollection.ts` with automatic validation.
+Icons are powered by the unplugin-icons system, which automatically discovers and imports icons as Vue components. Tailwind CSS icon classes (`icon-[comfy--template]`) are provided by `@iconify/tailwind4`, configured in `packages/design-system/src/css/style.css`. Custom icons are stored in `packages/design-system/src/icons/` and loaded via `from-folder` at build time.
 
 For detailed instructions and code examples, see [packages/design-system/src/icons/README.md](packages/design-system/src/icons/README.md).
 

browser_tests/AGENTS.md

@@ -4,11 +4,40 @@ See `@docs/guidance/playwright.md` for Playwright best practices (auto-loaded fo
 
 ## Directory Structure
 
-- `assets/` - Test data (JSON workflows, fixtures)
-- Tests use premade JSON workflows to load desired graph state
+```text
+browser_tests/
+├── assets/           - Test data (JSON workflows, images)
+├── fixtures/
+│   ├── ComfyPage.ts      - Main fixture (delegates to helpers)
+│   ├── ComfyMouse.ts     - Mouse interaction helper
+│   ├── VueNodeHelpers.ts - Vue Nodes 2.0 helpers
+│   ├── selectors.ts      - Centralized TestIds
+│   ├── components/       - Page object components
+│   │   ├── ContextMenu.ts
+│   │   ├── SettingDialog.ts
+│   │   ├── SidebarTab.ts
+│   │   └── Topbar.ts
+│   ├── helpers/          - Focused helper classes
+│   │   ├── CanvasHelper.ts
+│   │   ├── CommandHelper.ts
+│   │   ├── KeyboardHelper.ts
+│   │   ├── NodeOperationsHelper.ts
+│   │   ├── SettingsHelper.ts
+│   │   ├── WorkflowHelper.ts
+│   │   └── ...
+│   └── utils/            - Utility functions
+├── helpers/          - Test-specific utilities
+└── tests/            - Test files (*.spec.ts)
+```
 
 ## After Making Changes
 
 - Run `pnpm typecheck:browser` after modifying TypeScript files in this directory
 - Run `pnpm exec eslint browser_tests/path/to/file.ts` to lint specific files
 - Run `pnpm exec oxlint browser_tests/path/to/file.ts` to check with oxlint
+
+## Skill Documentation
+
+A Playwright test-writing skill exists at `.claude/skills/writing-playwright-tests/SKILL.md`.
+
+The skill documents **meta-level guidance only** (gotchas, anti-patterns, decision guides). It does **not** duplicate fixture APIs - agents should read the fixture code directly in `browser_tests/fixtures/`.

browser_tests/assets/subgraphs/subgraph-nested-duplicate-ids.json

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

browser_tests/tests/dialog.spec.ts

@@ -298,7 +298,10 @@ test.describe('Settings', () => {
     await input.press('Alt+n')
 
     const requestPromise = comfyPage.page.waitForRequest(
-      '**/api/settings/Comfy.Keybinding.NewBindings'
+      (req) =>
+        req.url().includes('/api/settings') &&
+        !req.url().includes('/api/settings/') &&
+        req.method() === 'POST'
     )
 
     // Save keybinding

browser_tests/tests/nodeGhostPlacement.spec.ts

@@ -0,0 +1,162 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+type ComfyPage = Parameters<Parameters<typeof test>[2]>[0]['comfyPage']
+
+async function setVueMode(comfyPage: ComfyPage, enabled: boolean) {
+  await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', enabled)
+  if (enabled) {
+    await comfyPage.vueNodes.waitForNodes()
+  }
+}
+
+async function addGhostAtCenter(comfyPage: ComfyPage) {
+  await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+  await comfyPage.nextFrame()
+
+  const viewport = comfyPage.page.viewportSize()!
+  const centerX = Math.round(viewport.width / 2)
+  const centerY = Math.round(viewport.height / 2)
+
+  await comfyPage.page.mouse.move(centerX, centerY)
+  await comfyPage.nextFrame()
+
+  const nodeId = await comfyPage.page.evaluate(
+    ([clientX, clientY]) => {
+      const node = window.LiteGraph!.createNode('VAEDecode')!
+      const event = new MouseEvent('click', { clientX, clientY })
+      window.app!.graph.add(node, { ghost: true, dragEvent: event })
+      return node.id
+    },
+    [centerX, centerY] as const
+  )
+  await comfyPage.nextFrame()
+
+  return { nodeId, centerX, centerY }
+}
+
+function getNodeById(comfyPage: ComfyPage, nodeId: number | string) {
+  return comfyPage.page.evaluate((id) => {
+    const node = window.app!.graph.getNodeById(id)
+    if (!node) return null
+    return { ghost: !!node.flags.ghost }
+  }, nodeId)
+}
+
+for (const mode of ['litegraph', 'vue'] as const) {
+  test.describe(`Ghost node placement (${mode} mode)`, () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await setVueMode(comfyPage, mode === 'vue')
+    })
+
+    test('positions ghost node at cursor', async ({ comfyPage }) => {
+      await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
+      await comfyPage.nextFrame()
+
+      const viewport = comfyPage.page.viewportSize()!
+      const centerX = Math.round(viewport.width / 2)
+      const centerY = Math.round(viewport.height / 2)
+
+      await comfyPage.page.mouse.move(centerX, centerY)
+      await comfyPage.nextFrame()
+
+      const result = await comfyPage.page.evaluate(
+        ([clientX, clientY]) => {
+          const node = window.LiteGraph!.createNode('VAEDecode')!
+          const event = new MouseEvent('click', { clientX, clientY })
+          window.app!.graph.add(node, { ghost: true, dragEvent: event })
+
+          const canvas = window.app!.canvas
+          const rect = canvas.canvas.getBoundingClientRect()
+          const cursorCanvasX =
+            (clientX - rect.left) / canvas.ds.scale - canvas.ds.offset[0]
+          const cursorCanvasY =
+            (clientY - rect.top) / canvas.ds.scale - canvas.ds.offset[1]
+
+          return {
+            diffX: node.pos[0] + node.size[0] / 2 - cursorCanvasX,
+            diffY: node.pos[1] - 10 - cursorCanvasY
+          }
+        },
+        [centerX, centerY] as const
+      )
+      await comfyPage.nextFrame()
+
+      expect(Math.abs(result.diffX)).toBeLessThan(5)
+      expect(Math.abs(result.diffY)).toBeLessThan(5)
+    })
+
+    test('left-click confirms ghost placement', async ({ comfyPage }) => {
+      const { nodeId, centerX, centerY } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.mouse.click(centerX, centerY)
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).not.toBeNull()
+      expect(after!.ghost).toBe(false)
+    })
+
+    test('Escape cancels ghost placement', async ({ comfyPage }) => {
+      const { nodeId } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).toBeNull()
+    })
+
+    test('Delete cancels ghost placement', async ({ comfyPage }) => {
+      const { nodeId } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.keyboard.press('Delete')
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).toBeNull()
+    })
+
+    test('Backspace cancels ghost placement', async ({ comfyPage }) => {
+      const { nodeId } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.keyboard.press('Backspace')
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).toBeNull()
+    })
+
+    test('right-click cancels ghost placement', async ({ comfyPage }) => {
+      const { nodeId, centerX, centerY } = await addGhostAtCenter(comfyPage)
+
+      const before = await getNodeById(comfyPage, nodeId)
+      expect(before).not.toBeNull()
+      expect(before!.ghost).toBe(true)
+
+      await comfyPage.page.mouse.click(centerX, centerY, { button: 'right' })
+      await comfyPage.nextFrame()
+
+      const after = await getNodeById(comfyPage, nodeId)
+      expect(after).toBeNull()
+    })
+  })
+}

browser_tests/tests/sidebar/workflows.spec.ts

@@ -123,17 +123,14 @@ test.describe('Workflows sidebar', () => {
   test('Can save workflow as', async ({ comfyPage }) => {
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
     await comfyPage.menu.topbar.saveWorkflowAs('workflow3.json')
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json',
-      'workflow3.json'
-    ])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow.json', 'workflow3.json'])
 
     await comfyPage.menu.topbar.saveWorkflowAs('workflow4.json')
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      '*Unsaved Workflow.json',
-      'workflow3.json',
-      'workflow4.json'
-    ])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['*Unsaved Workflow.json', 'workflow3.json', 'workflow4.json'])
   })
 
   test('Exported workflow does not contain localized slot names', async ({
@@ -220,24 +217,22 @@ test.describe('Workflows sidebar', () => {
     await topbar.saveWorkflow('workflow1.json')
     await topbar.saveWorkflowAs('workflow2.json')
     await comfyPage.nextFrame()
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow1.json',
-      'workflow2.json'
-    ])
-    expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
-      'workflow2.json'
-    )
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['workflow1.json', 'workflow2.json'])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
+      .toEqual('workflow2.json')
 
     await topbar.saveWorkflowAs('workflow1.json')
     await comfyPage.confirmDialog.click('overwrite')
     // The old workflow1.json should be deleted and the new one should be saved.
-    expect(await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()).toEqual([
-      'workflow2.json',
-      'workflow1.json'
-    ])
-    expect(await comfyPage.menu.workflowsTab.getActiveWorkflowName()).toEqual(
-      'workflow1.json'
-    )
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getOpenedWorkflowNames())
+      .toEqual(['workflow2.json', 'workflow1.json'])
+    await expect
+      .poll(() => comfyPage.menu.workflowsTab.getActiveWorkflowName())
+      .toEqual('workflow1.json')
   })
 
   test('Does not report warning when switching between opened workflows', async ({

browser_tests/tests/subgraph-duplicate-ids.spec.ts

@@ -0,0 +1,100 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
+  const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
+
+  test('All node IDs are globally unique after loading', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+    const result = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      // TODO: Extract allGraphs accessor (root + subgraphs) into LGraph
+      // TODO: Extract allNodeIds accessor into LGraph
+      const allGraphs = [graph, ...graph.subgraphs.values()]
+      const allIds = allGraphs
+        .flatMap((g) => g._nodes)
+        .map((n) => n.id)
+        .filter((id): id is number => typeof id === 'number')
+
+      return { allIds, uniqueCount: new Set(allIds).size }
+    })
+
+    expect(result.uniqueCount).toBe(result.allIds.length)
+    expect(result.allIds.length).toBeGreaterThanOrEqual(10)
+  })
+
+  test('Root graph node IDs are preserved as canonical', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+    const rootIds = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      return graph._nodes
+        .map((n) => n.id)
+        .filter((id): id is number => typeof id === 'number')
+        .sort((a, b) => a - b)
+    })
+
+    expect(rootIds).toEqual([1, 2, 5])
+  })
+
+  test('All links reference valid nodes in their graph', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+    const invalidLinks = await comfyPage.page.evaluate(() => {
+      const graph = window.app!.canvas.graph!
+      const labeledGraphs: [string, typeof graph][] = [
+        ['root', graph],
+        ...[...graph.subgraphs.entries()].map(
+          ([id, sg]) => [`subgraph:${id}`, sg] as [string, typeof graph]
+        )
+      ]
+
+      const isNonNegative = (id: number | string) =>
+        typeof id === 'number' && id >= 0
+
+      return labeledGraphs.flatMap(([label, g]) =>
+        [...g._links.values()].flatMap((link) =>
+          [
+            isNonNegative(link.origin_id) &&
+              !g._nodes_by_id[link.origin_id] &&
+              `${label}: origin_id ${link.origin_id} not found`,
+            isNonNegative(link.target_id) &&
+              !g._nodes_by_id[link.target_id] &&
+              `${label}: target_id ${link.target_id} not found`
+          ].filter(Boolean)
+        )
+      )
+    })
+
+    expect(invalidLinks).toEqual([])
+  })
+
+  test('Subgraph navigation works after ID remapping', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow(WORKFLOW)
+
+    const subgraphNode = await comfyPage.nodeOps.getNodeRefById('5')
+    await subgraphNode.navigateIntoSubgraph()
+
+    const isInSubgraph = () =>
+      comfyPage.page.evaluate(
+        () => window.app!.canvas.graph?.isRootGraph === false
+      )
+
+    expect(await isInSubgraph()).toBe(true)
+
+    await comfyPage.page.keyboard.press('Escape')
+    await comfyPage.nextFrame()
+
+    expect(await isInSubgraph()).toBe(false)
+  })
+})

browser_tests/tests/subgraph.spec.ts

@@ -61,7 +61,10 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await subgraphNode.navigateIntoSubgraph()
 
       const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      const vaeEncodeNode = await comfyPage.nodeOps.getNodeRefById('2')
+      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
+        'VAEEncode',
+        true
+      )
 
       await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()
@@ -77,7 +80,10 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await subgraphNode.navigateIntoSubgraph()
 
       const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      const vaeEncodeNode = await comfyPage.nodeOps.getNodeRefById('2')
+      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
+        'VAEEncode',
+        true
+      )
 
       await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()

browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts

@@ -31,7 +31,12 @@ test.describe('Vue Integer Widget', () => {
     await expect(seedWidget).toBeVisible()
 
     // Delete the node that is linked to the slot (freeing up the widget)
-    await comfyPage.vueNodes.getNodeByTitle('Int').click()
+    // Click on the header to select the node (clicking center may land on
+    // the widget area where pointerdown.stop prevents node selection)
+    await comfyPage.vueNodes
+      .getNodeByTitle('Int')
+      .locator('.lg-node-header')
+      .click()
     await comfyPage.vueNodes.deleteSelected()
 
     // Test widget works when unlinked

components.json

@@ -3,7 +3,6 @@
   "style": "new-york",
   "typescript": true,
   "tailwind": {
-    "config": "tailwind.config.ts",
     "css": "src/assets/css/style.css",
     "baseColor": "stone",
     "cssVariables": true,

docs/testing/component-testing.md

@@ -12,6 +12,18 @@ 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:
@@ -21,7 +33,7 @@ Basic approach to testing a component's rendering and structure:
 import { mount } from '@vue/test-utils'
 import SidebarIcon from './SidebarIcon.vue'
 
-describe('SidebarIcon', () => {
+describe(SidebarIcon.__name ?? 'SidebarIcon', () => {
   const exampleProps = {
     icon: 'pi pi-cog',
     selected: false

eslint.config.ts

@@ -138,6 +138,10 @@ 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)?:/'],
@@ -279,5 +283,46 @@ export default defineConfig([
       'import-x/no-duplicates': 'off',
       'import-x/consistent-type-specifier-style': 'off'
     }
+  },
+
+  // i18n import enforcement
+  // Vue components must use the useI18n() composable, not the global t/d/st/te
+  {
+    files: ['**/*.vue'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: '@/i18n',
+              importNames: ['t', 'd', 'te'],
+              message:
+                "In Vue components, use `const { t } = useI18n()` instead of importing from '@/i18n'."
+            }
+          ]
+        }
+      ]
+    }
+  },
+  // Non-composable .ts files must use the global t/d/te, not useI18n()
+  {
+    files: ['**/*.ts'],
+    ignores: ['**/use[A-Z]*.ts', '**/*.test.ts', 'src/i18n.ts'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'vue-i18n',
+              importNames: ['useI18n'],
+              message:
+                "useI18n() requires Vue setup context. Use `import { t } from '@/i18n'` instead."
+            }
+          ]
+        }
+      ]
+    }
   }
 ])

global.d.ts

@@ -5,8 +5,14 @@ declare const __ALGOLIA_APP_ID__: string
 declare const __ALGOLIA_API_KEY__: string
 declare const __USE_PROD_CONFIG__: boolean
 
+interface ImpactQueueFunction {
+  (...args: unknown[]): void
+  a?: unknown[][]
+}
+
 interface Window {
   __CONFIG__: {
+    gtm_container_id?: string
     mixpanel_token?: string
     require_whitelist?: boolean
     subscription_required?: boolean
@@ -30,6 +36,14 @@ interface Window {
       badge?: string
     }
   }
+  __ga_identity__?: {
+    client_id?: string
+    session_id?: string
+    session_number?: string
+  }
+  dataLayer?: Array<Record<string, unknown>>
+  ire_o?: string
+  ire?: ImpactQueueFunction
 }
 
 interface Navigator {

index.html

@@ -35,18 +35,6 @@
         background-size: cover;
         background-repeat: no-repeat;
       }
-      #vue-app:has(#loading-logo) {
-        display: contents;
-        color: var(--fg-color);
-        & #loading-logo {
-          place-self: center;
-          font-size: clamp(2px, 1vw, 6px);
-          line-height: 1;
-          overflow: hidden;
-          max-width: 100vw;
-          border-radius: 20ch;
-        }
-      }
       .visually-hidden {
         position: absolute;
         width: 1px;
@@ -65,36 +53,6 @@
   <body class="litegraph grid">
     <div id="vue-app">
       <span class="visually-hidden" role="status">Loading ComfyUI...</span>
-      <svg
-        width="520"
-        height="520"
-        viewBox="0 0 520 520"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        id="loading-logo"
-      >
-        <mask
-          id="mask0_227_285"
-          style="mask-type: alpha"
-          maskUnits="userSpaceOnUse"
-          x="0"
-          y="0"
-          width="520"
-          height="520"
-        >
-          <path
-            d="M0 184.335C0 119.812 0 87.5502 12.5571 62.9055C23.6026 41.2274 41.2274 23.6026 62.9055 12.5571C87.5502 0 119.812 0 184.335 0H335.665C400.188 0 432.45 0 457.094 12.5571C478.773 23.6026 496.397 41.2274 507.443 62.9055C520 87.5502 520 119.812 520 184.335V335.665C520 400.188 520 432.45 507.443 457.094C496.397 478.773 478.773 496.397 457.094 507.443C432.45 520 400.188 520 335.665 520H184.335C119.812 520 87.5502 520 62.9055 507.443C41.2274 496.397 23.6026 478.773 12.5571 457.094C0 432.45 0 400.188 0 335.665V184.335Z"
-            fill="#EEFF30"
-          />
-        </mask>
-        <g mask="url(#mask0_227_285)">
-          <rect y="0.751831" width="520" height="520" fill="#172DD7" />
-          <path
-            d="M176.484 428.831C168.649 428.831 162.327 425.919 158.204 420.412C153.966 414.755 152.861 406.857 155.171 398.749L164.447 366.178C165.187 363.585 164.672 360.794 163.059 358.636C161.446 356.483 158.921 355.216 156.241 355.216H129.571C121.731 355.216 115.409 352.308 111.289 346.802C107.051 341.14 105.946 333.242 108.258 325.134L140.124 213.748L143.642 201.51C148.371 184.904 165.62 171.407 182.097 171.407H214.009C217.817 171.407 221.167 168.868 222.215 165.183L232.769 128.135C237.494 111.545 254.742 98.048 271.219 98.048L339.468 97.9264L389.431 97.9221C397.268 97.9221 403.59 100.831 407.711 106.337C411.949 111.994 413.054 119.892 410.744 128L396.457 178.164C391.734 194.75 374.485 208.242 358.009 208.242L289.607 208.372H257.706C253.902 208.372 250.557 210.907 249.502 214.588L222.903 307.495C222.159 310.093 222.673 312.892 224.291 315.049C225.904 317.202 228.428 318.469 231.107 318.469C231.113 318.469 276.307 318.381 276.307 318.381H326.122C333.959 318.381 340.281 321.29 344.402 326.796C348.639 332.457 349.744 340.355 347.433 348.463L333.146 398.619C328.423 415.209 311.174 428.701 294.698 428.701L226.299 428.831H176.484Z"
-            fill="#F0FF41"
-          />
-        </g>
-      </svg>
     </div>
     <script type="module" src="src/main.ts"></script>
   </body>

knip.config.ts

@@ -20,10 +20,6 @@ const config: KnipConfig = {
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
-    'packages/design-system': {
-      entry: ['src/**/*.ts'],
-      project: ['src/**/*.{js,ts}', '*.{js,ts,mts}']
-    },
     'packages/registry-types': {
       project: ['src/**/*.{js,ts}']
     }
@@ -31,6 +27,7 @@ const config: KnipConfig = {
   ignoreBinaries: ['python3', 'gh'],
   ignoreDependencies: [
     // Weird importmap things
+    '@iconify-json/lucide',
     '@iconify/json',
     '@primeuix/forms',
     '@primeuix/styled',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.39.8",
+  "version": "1.40.0",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -18,7 +18,7 @@
     "collect-i18n": "pnpm exec playwright test --config=playwright.i18n.config.ts",
     "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' nx serve",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
-    "dev:electron": "nx serve --config vite.electron.config.mts",
+    "dev:electron": "cross-env DISTRIBUTION=desktop nx serve --config vite.electron.config.mts",
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
@@ -193,7 +193,7 @@
   },
   "pnpm": {
     "overrides": {
-      "vite": "^8.0.0-beta.8"
+      "vite": "catalog:"
     }
   }
 }

packages/design-system/package.json

@@ -4,7 +4,6 @@
   "description": "Shared design system for ComfyUI Frontend",
   "type": "module",
   "exports": {
-    "./tailwind-config": "./tailwind.config.ts",
     "./css/*": "./src/css/*"
   },
   "scripts": {
@@ -12,7 +11,7 @@
   },
   "dependencies": {
     "@iconify-json/lucide": "catalog:",
-    "@iconify/tailwind": "catalog:"
+    "@iconify/tailwind4": "catalog:"
   },
   "devDependencies": {
     "tailwindcss": "catalog:",

packages/design-system/src/css/style.css

@@ -7,11 +7,16 @@
 
 @plugin 'tailwindcss-primeui';
 
-@config '../../tailwind.config.ts';
+@plugin "@iconify/tailwind4" {
+  scale: 1.2;
+  icon-sets: from-folder(comfy, './packages/design-system/src/icons');
+}
 
 @custom-variant touch (@media (hover: none));
 
 @theme {
+  --shadow-interface: var(--interface-panel-box-shadow);
+
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 

packages/design-system/src/iconCollection.ts

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

packages/design-system/src/icons/README.md

@@ -251,26 +251,25 @@ Icons are automatically imported using `unplugin-icons` - no manual imports need
 
 The icon system has two layers:
 
-1. **Build-time Processing** (`packages/design-system/src/iconCollection.ts`):
-   - Scans `packages/design-system/src/icons/` for SVG files
-   - Validates SVG content and structure
-   - Creates Iconify collection for Tailwind CSS
-   - Provides error handling for malformed files
+1. **Tailwind CSS Plugin** (`@iconify/tailwind4`):
+   - Configured via `@plugin` directive in `packages/design-system/src/css/style.css`
+   - Uses `from-folder(comfy, ...)` to load SVGs from `packages/design-system/src/icons/`
+   - Auto-cleans and optimizes SVGs at build time
 
 2. **Vite Runtime** (`vite.config.mts`):
    - Enables direct SVG import as Vue components
    - Supports dynamic icon loading
 
-```typescript
-// Build script creates Iconify collection
-export const iconCollection: IconifyCollection = {
-  prefix: 'comfy',
-  icons: {
-    workflow: { body: '<svg>...</svg>' },
-    node: { body: '<svg>...</svg>' }
-  }
+```css
+/* CSS configuration for Tailwind icon classes */
+@plugin "@iconify/tailwind4" {
+  prefix: 'icon';
+  scale: 1.2;
+  icon-sets: from-folder(comfy, './packages/design-system/src/icons');
 }
+```
 
+```typescript
 // Vite configuration for component-based usage
 Icons({
   compiler: 'vue3',

packages/design-system/tailwind.config.ts

@@ -1,24 +0,0 @@
-import lucide from '@iconify-json/lucide/icons.json' with { type: 'json' }
-import { addDynamicIconSelectors } from '@iconify/tailwind'
-
-import { iconCollection } from './src/iconCollection'
-
-export default {
-  theme: {
-    extend: {
-      boxShadow: {
-        interface: 'var(--interface-panel-box-shadow)'
-      }
-    }
-  },
-  plugins: [
-    addDynamicIconSelectors({
-      iconSets: {
-        comfy: iconCollection,
-        lucide
-      },
-      scale: 1.2,
-      prefix: 'icon'
-    })
-  ]
-}

pnpm-workspace.yaml

@@ -8,7 +8,7 @@ catalog:
   '@eslint/js': ^9.39.1
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380
-  '@iconify/tailwind': ^1.1.3
+  '@iconify/tailwind4': ^1.2.0
   '@intlify/eslint-plugin-vue-i18n': ^4.1.0
   '@lobehub/i18n-cli': ^1.25.1
   '@nx/eslint': 22.2.6
@@ -69,9 +69,9 @@ catalog:
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
   nx: 22.2.6
-  oxfmt: ^0.26.0
-  oxlint: ^1.33.0
-  oxlint-tsgolint: ^0.9.1
+  oxfmt: ^0.31.0
+  oxlint: ^1.46.0
+  oxlint-tsgolint: ^0.11.5
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
@@ -92,7 +92,7 @@ catalog:
   unplugin-icons: ^22.5.0
   unplugin-typegpu: 0.8.0
   unplugin-vue-components: ^30.0.0
-  vite: ^8.0.0-beta.8
+  vite: 8.0.0-beta.13
   vite-plugin-dts: ^4.5.4
   vite-plugin-html: ^3.2.2
   vite-plugin-vue-devtools: ^8.0.0

scripts/cicd/check-json.sh

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

scripts/cicd/pr-playwright-deploy-and-comment.sh

@@ -283,34 +283,27 @@ else
     done
     unset IFS
     
-    # Determine overall status
+    # Determine overall status (flaky tests are treated as passing)
     if [ $total_failed -gt 0 ]; then
         status_icon="❌"
-        status_text="Failed"
-    elif [ $total_flaky -gt 0 ]; then
-        status_icon="⚠️"
-        status_text="Passed with flaky tests"
     elif [ $total_tests -gt 0 ]; then
         status_icon="✅"
-        status_text="Passed"
     else
         status_icon="🕵🏻"
-        status_text="No test results"
     fi
     
-    # Generate concise completion comment
-    comment="$COMMENT_MARKER
-## 🎭 Playwright Tests: $status_icon **$status_text**"
-
-    # Add summary counts if we have test data
-    if [ $total_tests -gt 0 ]; then
-        comment="$comment
-
-**Results:** $total_passed passed, $total_failed failed, $total_flaky flaky, $total_skipped skipped (Total: $total_tests)"
+    # Build flaky indicator if any (small subtext, no warning icon)
+    flaky_note=""
+    if [ $total_flaky -gt 0 ]; then
+        flaky_note=" · $total_flaky flaky"
     fi
+    
+    # Generate compact single-line comment
+    comment="$COMMENT_MARKER
+**Playwright:** $status_icon $total_passed passed, $total_failed failed$flaky_note"
 
-    # Extract and display failed tests from all browsers
-    if [ $total_failed -gt 0 ] || [ $total_flaky -gt 0 ]; then
+    # Extract and display failed tests from all browsers (flaky tests are treated as passing)
+    if [ $total_failed -gt 0 ]; then
         comment="$comment
 
 ### ❌ Failed Tests"

src/App.vue

@@ -16,11 +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, isElectron } from './utils/envUtil'
-import { app } from '@/scripts/app'
+import { electronAPI } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
 
 const workspaceStore = useWorkspaceStore()
 app.extensionManager = useWorkspaceStore()
@@ -42,7 +43,7 @@ const showContextMenu = (event: MouseEvent) => {
 onMounted(() => {
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
 
-  if (isElectron()) {
+  if (isDesktop) {
     document.addEventListener('contextmenu', showContextMenu)
   }
 

src/base/common/downloadUtil.test.ts

@@ -1,6 +1,9 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { downloadFile } from '@/base/common/downloadUtil'
+import {
+  downloadFile,
+  extractFilenameFromContentDisposition
+} from '@/base/common/downloadUtil'
 
 let mockIsCloud = false
 
@@ -46,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'
 
@@ -155,10 +158,14 @@ describe('downloadUtil', () => {
       const testUrl = 'https://storage.googleapis.com/bucket/file.bin'
       const blob = new Blob(['test'])
       const blobFn = vi.fn().mockResolvedValue(blob)
+      const headersMock = {
+        get: vi.fn().mockReturnValue(null)
+      }
       fetchMock.mockResolvedValue({
         ok: true,
         status: 200,
-        blob: blobFn
+        blob: blobFn,
+        headers: headersMock
       } as unknown as Response)
 
       downloadFile(testUrl)
@@ -195,5 +202,147 @@ describe('downloadUtil', () => {
       expect(createObjectURLSpy).not.toHaveBeenCalled()
       consoleSpy.mockRestore()
     })
+
+    it('uses filename from Content-Disposition header in cloud mode', async () => {
+      mockIsCloud = true
+      const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
+      const blob = new Blob(['test'])
+      const blobFn = vi.fn().mockResolvedValue(blob)
+      const headersMock = {
+        get: vi.fn().mockReturnValue('attachment; filename="user-friendly.png"')
+      }
+      fetchMock.mockResolvedValue({
+        ok: true,
+        status: 200,
+        blob: blobFn,
+        headers: headersMock
+      } as unknown as Response)
+
+      downloadFile(testUrl)
+
+      expect(fetchMock).toHaveBeenCalledWith(testUrl)
+      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
+      await fetchPromise
+      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
+      await blobPromise
+      await Promise.resolve()
+      expect(headersMock.get).toHaveBeenCalledWith('Content-Disposition')
+      expect(mockLink.download).toBe('user-friendly.png')
+    })
+
+    it('uses RFC 5987 filename from Content-Disposition header', async () => {
+      mockIsCloud = true
+      const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
+      const blob = new Blob(['test'])
+      const blobFn = vi.fn().mockResolvedValue(blob)
+      const headersMock = {
+        get: vi
+          .fn()
+          .mockReturnValue(
+            'attachment; filename="fallback.png"; filename*=UTF-8\'\'%E4%B8%AD%E6%96%87.png'
+          )
+      }
+      fetchMock.mockResolvedValue({
+        ok: true,
+        status: 200,
+        blob: blobFn,
+        headers: headersMock
+      } as unknown as Response)
+
+      downloadFile(testUrl)
+
+      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
+      await fetchPromise
+      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
+      await blobPromise
+      await Promise.resolve()
+      expect(mockLink.download).toBe('中文.png')
+    })
+
+    it('falls back to provided filename when Content-Disposition is missing', async () => {
+      mockIsCloud = true
+      const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
+      const blob = new Blob(['test'])
+      const blobFn = vi.fn().mockResolvedValue(blob)
+      const headersMock = {
+        get: vi.fn().mockReturnValue(null)
+      }
+      fetchMock.mockResolvedValue({
+        ok: true,
+        status: 200,
+        blob: blobFn,
+        headers: headersMock
+      } as unknown as Response)
+
+      downloadFile(testUrl, 'my-fallback.png')
+
+      const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
+      await fetchPromise
+      const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
+      await blobPromise
+      await Promise.resolve()
+      expect(mockLink.download).toBe('my-fallback.png')
+    })
+  })
+
+  describe(extractFilenameFromContentDisposition, () => {
+    it('returns null for null header', () => {
+      expect(extractFilenameFromContentDisposition(null)).toBeNull()
+    })
+
+    it('returns null for empty header', () => {
+      expect(extractFilenameFromContentDisposition('')).toBeNull()
+    })
+
+    it('extracts filename from simple quoted format', () => {
+      const header = 'attachment; filename="test-file.png"'
+      expect(extractFilenameFromContentDisposition(header)).toBe(
+        'test-file.png'
+      )
+    })
+
+    it('extracts filename from unquoted format', () => {
+      const header = 'attachment; filename=test-file.png'
+      expect(extractFilenameFromContentDisposition(header)).toBe(
+        'test-file.png'
+      )
+    })
+
+    it('extracts filename from RFC 5987 format', () => {
+      const header = "attachment; filename*=UTF-8''test%20file.png"
+      expect(extractFilenameFromContentDisposition(header)).toBe(
+        'test file.png'
+      )
+    })
+
+    it('prefers RFC 5987 format over simple format', () => {
+      const header =
+        'attachment; filename="fallback.png"; filename*=UTF-8\'\'preferred.png'
+      expect(extractFilenameFromContentDisposition(header)).toBe(
+        'preferred.png'
+      )
+    })
+
+    it('handles unicode characters in RFC 5987 format', () => {
+      const header =
+        "attachment; filename*=UTF-8''%E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6.png"
+      expect(extractFilenameFromContentDisposition(header)).toBe('中文文件.png')
+    })
+
+    it('falls back to simple format when RFC 5987 decoding fails', () => {
+      const header =
+        'attachment; filename="fallback.png"; filename*=UTF-8\'\'%invalid'
+      expect(extractFilenameFromContentDisposition(header)).toBe('fallback.png')
+    })
+
+    it('handles header with only attachment disposition', () => {
+      const header = 'attachment'
+      expect(extractFilenameFromContentDisposition(header)).toBeNull()
+    })
+
+    it('handles case-insensitive filename parameter', () => {
+      const header = 'attachment; FILENAME="test.png"'
+      expect(extractFilenameFromContentDisposition(header)).toBe('test.png')
+    })
   })
 })

src/base/common/downloadUtil.ts

@@ -75,14 +75,57 @@ const extractFilenameFromUrl = (url: string): string | null => {
   }
 }
 
+/**
+ * Extract filename from Content-Disposition header
+ * Handles both simple format: attachment; filename="name.png"
+ * And RFC 5987 format: attachment; filename="fallback.png"; filename*=UTF-8''encoded%20name.png
+ * @param header - The Content-Disposition header value
+ * @returns The extracted filename or null if not found
+ */
+export function extractFilenameFromContentDisposition(
+  header: string | null
+): string | null {
+  if (!header) return null
+
+  // Try RFC 5987 extended format first (filename*=UTF-8''...)
+  const extendedMatch = header.match(/filename\*=UTF-8''([^;]+)/i)
+  if (extendedMatch?.[1]) {
+    try {
+      return decodeURIComponent(extendedMatch[1])
+    } catch {
+      // Fall through to simple format
+    }
+  }
+
+  // Try simple quoted format: filename="..."
+  const quotedMatch = header.match(/filename="([^"]+)"/i)
+  if (quotedMatch?.[1]) {
+    return quotedMatch[1]
+  }
+
+  // Try unquoted format: filename=...
+  const unquotedMatch = header.match(/filename=([^;\s]+)/i)
+  if (unquotedMatch?.[1]) {
+    return unquotedMatch[1]
+  }
+
+  return null
+}
+
 const downloadViaBlobFetch = async (
   href: string,
-  filename: string
+  fallbackFilename: string
 ): Promise<void> => {
   const response = await fetch(href)
   if (!response.ok) {
     throw new Error(`Failed to fetch ${href}: ${response.status}`)
   }
+
+  // Try to get filename from Content-Disposition header (set by backend)
+  const contentDisposition = response.headers.get('Content-Disposition')
+  const headerFilename =
+    extractFilenameFromContentDisposition(contentDisposition)
+
   const blob = await response.blob()
-  downloadBlob(filename, blob)
+  downloadBlob(headerFilename ?? fallbackFilename, blob)
 }

src/components/LiteGraphCanvasSplitterOverlay.vue

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

src/components/TopMenuSection.test.ts

@@ -18,9 +18,8 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
-import { isElectron } from '@/utils/envUtil'
 
-const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
+const mockData = vi.hoisted(() => ({ isLoggedIn: false, isDesktop: false }))
 
 vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: () => {
@@ -30,7 +29,13 @@ vi.mock('@/composables/auth/useCurrentUser', () => ({
   }
 }))
 
-vi.mock('@/utils/envUtil')
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false,
+  isNightly: false,
+  get isDesktop() {
+    return mockData.isDesktop
+  }
+}))
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({
     currentUser: null,
@@ -103,10 +108,12 @@ function createTask(id: string, status: JobStatus): TaskItemImpl {
   return new TaskItemImpl(createJob(id, status))
 }
 
-describe('TopMenuSection', () => {
+describe(TopMenuSection.__name ?? 'TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
     localStorage.clear()
+    mockData.isDesktop = false
+    mockData.isLoggedIn = false
   })
 
   describe('authentication state', () => {
@@ -129,7 +136,7 @@ describe('TopMenuSection', () => {
 
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
-          vi.mocked(isElectron).mockReturnValue(true)
+          mockData.isDesktop = true
           const wrapper = createWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)
@@ -235,7 +242,7 @@ describe('TopMenuSection', () => {
       vi.mocked(settingStore.get).mockImplementation((key) => {
         if (key === 'Comfy.Queue.QPOV2') return qpoV2Enabled
         if (key === 'Comfy.UseNewMenu') return 'Top'
-        return undefined
+        return
       })
     }
 

src/components/TopMenuSection.vue

@@ -153,7 +153,7 @@ import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { isElectron } from '@/utils/envUtil'
+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'
@@ -163,7 +163,6 @@ const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
-const isDesktop = isElectron()
 const { t, n } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
@@ -288,9 +287,8 @@ const openCustomNodeManager = async () => {
   } catch (error) {
     try {
       toastErrorHandler(error)
-    } catch (toastError) {
+    } catch (error) {
       console.error(error)
-      console.error(toastError)
     }
   }
 }

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue

@@ -8,10 +8,10 @@
 import { computed } from 'vue'
 
 import ComfyQueueButton from '@/components/actionbar/ComfyRunButton/ComfyQueueButton.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
 import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 
-const { isActiveSubscription } = useSubscription()
+const { isActiveSubscription } = useBillingContext()
 
 const currentButton = computed(() =>
   isActiveSubscription.value ? ComfyQueueButton : SubscribeToRunButton

src/components/auth/WorkspaceAuthGate.test.ts

@@ -54,7 +54,7 @@ vi.mock('primevue/progressspinner', () => ({
   default: { template: '<div class="progress-spinner" />' }
 }))
 
-describe('WorkspaceAuthGate', () => {
+describe(WorkspaceAuthGate.__name ?? 'WorkspaceAuthGate', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockIsCloud.value = true

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

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

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

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

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

@@ -55,10 +55,17 @@ vi.mock('@/composables/bottomPanelTabs/useTerminal', () => ({
 }))
 
 vi.mock('@/utils/envUtil', () => ({
-  isElectron: vi.fn(() => false),
   electronAPI: vi.fn(() => null)
 }))
 
+const mockData = vi.hoisted(() => ({ isDesktop: false }))
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isDesktop() {
+    return mockData.isDesktop
+  }
+}))
+
 // Mock clipboard API
 Object.defineProperty(navigator, 'clipboard', {
   value: {
@@ -99,7 +106,7 @@ const mountBaseTerminal = () => {
   })
 }
 
-describe('BaseTerminal', () => {
+describe(BaseTerminal.__name ?? 'BaseTerminal', () => {
   let wrapper: VueWrapper<InstanceType<typeof BaseTerminal>> | undefined
 
   beforeEach(() => {

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

@@ -35,7 +35,8 @@ import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { electronAPI, isElectron } from '@/utils/envUtil'
+import { electronAPI } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
 import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
@@ -85,7 +86,7 @@ const showContextMenu = (event: MouseEvent) => {
   electronAPI()?.showContextMenu({ type: 'text' })
 }
 
-if (isElectron()) {
+if (isDesktop) {
   useEventListener(terminalEl, 'contextmenu', showContextMenu)
 }
 

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

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

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

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

src/components/common/ColorCustomizationSelector.test.ts

@@ -7,123 +7,128 @@ import { createApp, nextTick } from 'vue'
 
 import ColorCustomizationSelector from './ColorCustomizationSelector.vue'
 
-describe('ColorCustomizationSelector', () => {
-  const colorOptions = [
-    { name: 'Blue', value: '#0d6efd' },
-    { name: 'Green', value: '#28a745' }
-  ]
+describe(
+  ColorCustomizationSelector.__name ?? '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
-      }
+    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: ''
+      })
     })
   }
-
-  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 props = defineProps<{
+const { renderFunction } = defineProps<{
   renderFunction: () => HTMLElement
 }>()
 
@@ -14,12 +14,12 @@ const container = ref<HTMLElement | null>(null)
 function renderContent() {
   if (container.value) {
     container.value.innerHTML = ''
-    const element = props.renderFunction()
+    const element = renderFunction()
     container.value.appendChild(element)
   }
 }
 
 onMounted(renderContent)
 
-watch(() => props.renderFunction, renderContent)
+watch(() => renderFunction, renderContent)
 </script>

src/components/common/CustomizationDialog.vue

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

src/components/common/DeviceInfo.vue

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

src/components/common/EditableText.test.ts

@@ -6,7 +6,7 @@ import { createApp } from 'vue'
 
 import EditableText from './EditableText.vue'
 
-describe('EditableText', () => {
+describe(EditableText.__name ?? '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="hint">{{ label }}</span>
+          <span class="file-type" :title="displayHint">{{ displayLabel }}</span>
         </div>
-        <div v-if="props.error" class="file-error">
-          {{ props.error }}
+        <div v-if="error" class="file-error">
+          {{ error }}
         </div>
       </div>
 
@@ -18,14 +18,14 @@
           class="file-action-button"
           variant="secondary"
           size="sm"
-          :disabled="!!props.error"
+          :disabled="!!error"
           @click="triggerDownload"
         >
           <i class="pi pi-download" />
           {{ $t('g.downloadWithSize', { size: fileSize }) }}
         </Button>
         <Button
-          v-if="(status === null || status === 'error') && !!props.url"
+          v-if="(status === null || status === 'error') && !!url"
           variant="secondary"
           size="sm"
           @click="copyURL"
@@ -53,7 +53,7 @@
         class="file-action-button"
         variant="secondary"
         size="sm"
-        :disabled="!!props.error"
+        :disabled="!!error"
         @click="triggerPauseDownload"
       >
         <i class="pi pi-pause-circle" />
@@ -66,7 +66,7 @@
         variant="secondary"
         size="sm"
         :aria-label="t('electronFileDownload.resume')"
-        :disabled="!!props.error"
+        :disabled="!!error"
         @click="triggerResumeDownload"
       >
         <i class="pi pi-play-circle" />
@@ -78,7 +78,7 @@
         variant="destructive"
         size="sm"
         :aria-label="t('electronFileDownload.cancel')"
-        :disabled="!!props.error"
+        :disabled="!!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 props = defineProps<{
+const { url, hint, label, error } = defineProps<{
   url: string
   hint?: string
   label?: string
@@ -106,9 +106,9 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
-const label = computed(() => props.label || props.url.split('/').pop())
-const hint = computed(() => props.hint || props.url)
-const download = useDownload(props.url)
+const displayLabel = computed(() => label || url.split('/').pop())
+const displayHint = computed(() => hint || url)
+const download = useDownload(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] = props.label.split('/')
+const [savePath, filename] = label.split('/')
 
 electronDownloadStore.$subscribe((_, { downloads }) => {
-  const download = downloads.find((download) => props.url === download.url)
+  const download = downloads.find((download) => 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: props.url,
+    url,
     savePath: savePath.trim(),
     filename: filename.trim()
   })
 }
 
-const triggerCancelDownload = () => electronDownloadStore.cancel(props.url)
-const triggerPauseDownload = () => electronDownloadStore.pause(props.url)
-const triggerResumeDownload = () => electronDownloadStore.resume(props.url)
+const triggerCancelDownload = () => electronDownloadStore.cancel(url)
+const triggerPauseDownload = () => electronDownloadStore.pause(url)
+const triggerResumeDownload = () => electronDownloadStore.resume(url)
 
 const copyURL = async () => {
-  await copyToClipboard(props.url)
+  await copyToClipboard(url)
 }
 </script>

src/components/common/ExtensionSlot.vue

@@ -5,10 +5,7 @@
     :ref="
       (el) => {
         if (el)
-          mountCustomExtension(
-            props.extension as CustomExtension,
-            el as HTMLElement
-          )
+          mountCustomExtension(extension as CustomExtension, el as HTMLElement)
       }
     "
   />
@@ -19,17 +16,17 @@ import { onBeforeUnmount } from 'vue'
 
 import type { CustomExtension, VueExtension } from '@/types/extensionTypes'
 
-const props = defineProps<{
+const { extension } = defineProps<{
   extension: VueExtension | CustomExtension
 }>()
 
-const mountCustomExtension = (extension: CustomExtension, el: HTMLElement) => {
-  extension.render(el)
+const mountCustomExtension = (ext: CustomExtension, el: HTMLElement) => {
+  ext.render(el)
 }
 
 onBeforeUnmount(() => {
-  if (props.extension.type === 'custom' && props.extension.destroy) {
-    props.extension.destroy()
+  if (extension.type === 'custom' && extension.destroy) {
+    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="hint">{{ label }}</span>
+        <span :title="displayHint">{{ displayLabel }}</span>
       </div>
       <Message
-        v-if="props.error"
+        v-if="error"
         severity="error"
         icon="pi pi-exclamation-triangle"
         size="small"
         variant="outlined"
         class="my-2 h-min max-w-xs px-1"
-        :title="props.error"
+        :title="error"
         :pt="{
           text: { class: 'overflow-hidden text-ellipsis' }
         }"
       >
-        {{ props.error }}
+        {{ error }}
       </Message>
     </div>
     <div>
       <Button
         variant="secondary"
-        :disabled="!!props.error"
-        :title="props.url"
+        :disabled="!!error"
+        :title="url"
         @click="download.triggerBrowserDownload"
       >
         {{ $t('g.downloadWithSize', { size: fileSize }) }}
       </Button>
     </div>
     <div>
-      <Button variant="secondary" :disabled="!!props.error" @click="copyURL">
+      <Button variant="secondary" :disabled="!!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 props = defineProps<{
+const { url, hint, label, error } = defineProps<{
   url: string
   hint?: string
   label?: string
   error?: string
 }>()
 
-const label = computed(() => props.label || props.url.split('/').pop())
+const displayLabel = computed(() => label || url.split('/').pop())
 
-const hint = computed(() => props.hint || props.url)
-const download = useDownload(props.url)
+const displayHint = computed(() => hint || url)
+const download = useDownload(url)
 const fileSize = computed(() =>
   download.fileSize.value ? formatSize(download.fileSize.value) : '?'
 )
 const copyURL = async () => {
-  await copyToClipboard(props.url)
+  await copyToClipboard(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')
-defineProps<{
+const { label } = defineProps<{
   label?: string
 }>()
 

src/components/common/FormImageUpload.vue

@@ -45,7 +45,7 @@ import { ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 
-defineProps<{
+const { modelValue } = 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.onload = (e) => {
+    reader.addEventListener('load', (e) => {
       emit('update:modelValue', e.target?.result as string)
-    }
+    })
     reader.readAsDataURL(file)
   }
 }

src/components/common/FormItem.vue

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

src/components/common/FormRadioGroup.test.ts

@@ -5,239 +5,242 @@ import { beforeAll, describe, expect, it } from 'vitest'
 import { createApp } from 'vue'
 
 import type { SettingOption } from '@/platform/settings/types'
-
-import FormRadioGroup from './FormRadioGroup.vue'
 import type { ComponentProps } from 'vue-component-type-helpers'
 
-describe('FormRadioGroup', () => {
-  beforeAll(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
-  })
+import FormRadioGroup from './FormRadioGroup.vue'
 
-  type FormRadioGroupProps = ComponentProps<typeof FormRadioGroup>
-  const mountComponent = (props: FormRadioGroupProps, options = {}) => {
-    return mount(FormRadioGroup, {
-      global: {
-        plugins: [PrimeVue],
-        components: { RadioButton }
-      },
-      props,
-      ...options
+describe(
+  (FormRadioGroup as { __name?: string }).__name ?? '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'
+        )
+      })
     })
   }
-
-  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 props = defineProps<{
+const { modelValue, options, optionLabel, optionValue, id } = defineProps<{
   modelValue: T
   options?: (string | SettingOption | Record<string, string>)[]
   optionLabel?: string
@@ -39,9 +39,9 @@ defineEmits<{
 }>()
 
 const normalizedOptions = computed<SettingOption[]>(() => {
-  if (!props.options) return []
+  if (!options) return []
 
-  return props.options.map((option) => {
+  return 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[props.optionLabel || 'text'] || 'Unknown',
-      value: option[props.optionValue || 'value']
+      text: option[optionLabel || 'text'] || 'Unknown',
+      value: option[optionValue || 'value']
     }
   })
 })

src/components/common/InputKnob.vue

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

src/components/common/LoadingOverlay.vue

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

src/components/common/SearchBox.test.ts

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

src/components/common/SearchFilterChip.vue

@@ -18,7 +18,7 @@ export interface SearchFilter {
   id: string | number
 }
 
-defineProps<Omit<SearchFilter, 'id'>>()
+const { text, badge, badgeClass } = 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="props.stats.devices.length > 1">
+        <TabView v-if="stats.devices.length > 1">
           <TabPanel
-            v-for="device in props.stats.devices"
+            v-for="device in stats.devices"
             :key="device.index"
             :header="device.name"
             :value="device.index"
@@ -31,7 +31,7 @@
             <DeviceInfo :device="device" />
           </TabPanel>
         </TabView>
-        <DeviceInfo v-else :device="props.stats.devices[0]" />
+        <DeviceInfo v-else :device="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 props = defineProps<{
+const { stats } = defineProps<{
   stats: SystemStats
 }>()
 
 const systemInfo = computed(() => ({
-  ...props.stats.system,
-  argv: props.stats.system.argv.join(' ')
+  ...stats.system,
+  argv: stats.system.argv.join(' ')
 }))
 
-const hasDevices = computed(() => props.stats.devices.length > 0)
+const hasDevices = computed(() => 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="props.class"
+    :class="className"
     :value="renderedRoot.children"
     selection-mode="single"
     :pt="{
@@ -37,10 +37,6 @@
   <ContextMenu ref="menu" :model="menuItems" />
 </template>
 <script setup lang="ts">
-defineOptions({
-  inheritAttrs: false
-})
-
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import Tree from 'primevue/tree'
@@ -60,6 +56,10 @@ import type {
 } from '@/types/treeExplorerTypes'
 import { combineTrees, findNodeByKey } from '@/utils/treeUtil'
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const expandedKeys = defineModel<Record<string, boolean>>('expandedKeys', {
   required: true
 })
@@ -68,7 +68,7 @@ const selectionKeys = defineModel<Record<string, boolean>>('selectionKeys')
 // Tracks whether the caller has set the selectionKeys model.
 const storeSelectionKeys = selectionKeys.value !== undefined
 
-const props = defineProps<{
+const { root, class: className } = defineProps<{
   root: TreeExplorerNode
   class?: string
 }>()
@@ -90,7 +90,7 @@ const {
 )
 
 const renderedRoot = computed<RenderedTreeExplorerNode>(() => {
-  const renderedRoot = fillNodeInfo(props.root)
+  const renderedRoot = fillNodeInfo(root)
   return newFolderNode.value
     ? combineTrees(renderedRoot, newFolderNode.value)
     : renderedRoot

src/components/common/TreeExplorerTreeNode.test.ts

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

src/components/common/TreeExplorerTreeNode.vue

@@ -5,21 +5,21 @@
       'tree-node',
       {
         'can-drop': canDrop,
-        'tree-folder': !props.node.leaf,
-        'tree-leaf': props.node.leaf
+        'tree-folder': !node.leaf,
+        'tree-leaf': node.leaf
       }
     ]"
     :data-testid="`tree-node-${node.key}`"
   >
     <div class="node-content">
       <span class="node-label">
-        <slot name="before-label" :node="props.node" />
+        <slot name="before-label" :node="node" />
         <EditableText
           :model-value="node.label"
           :is-editing="isEditing"
           @edit="handleRename"
         />
-        <slot name="after-label" :node="props.node" />
+        <slot name="after-label" :node="node" />
       </span>
       <Badge
         v-if="showNodeBadgeText"
@@ -31,7 +31,7 @@
     <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="props.node" />
+      <slot name="actions" :node="node" />
     </div>
   </div>
 </template>
@@ -52,7 +52,7 @@ import type {
   TreeExplorerDragAndDropData
 } from '@/types/treeExplorerTypes'
 
-const props = defineProps<{
+const { node } = defineProps<{
   node: RenderedTreeExplorerNode
 }>()
 
@@ -67,20 +67,20 @@ const emit = defineEmits<{
 }>()
 
 const nodeBadgeText = computed<string>(() => {
-  if (props.node.leaf) {
+  if (node.leaf) {
     return ''
   }
-  if (props.node.badgeText !== undefined && props.node.badgeText !== null) {
-    return props.node.badgeText
+  if (node.badgeText !== undefined && node.badgeText !== null) {
+    return node.badgeText
   }
-  return props.node.totalLeaves.toString()
+  return node.totalLeaves.toString()
 })
 const showNodeBadgeText = computed<boolean>(() => nodeBadgeText.value !== '')
 
-const isEditing = computed<boolean>(() => props.node.isEditingLabel ?? false)
+const isEditing = computed<boolean>(() => node.isEditingLabel ?? false)
 const handleEditLabel = inject(InjectKeyHandleEditLabelFunction)
 const handleRename = (newName: string) => {
-  handleEditLabel?.(props.node, newName)
+  handleEditLabel?.(node, 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 (props.node.draggable) {
+if (node.draggable) {
   usePragmaticDraggable(treeNodeElementGetter, {
     getInitialData: () => {
       return {
         type: 'tree-explorer-node',
-        data: props.node
+        data: node
       }
     },
-    onDragStart: () => emit('dragStart', props.node),
-    onDrop: () => emit('dragEnd', props.node),
-    onGenerateDragPreview: props.node.renderDragPreview
+    onDragStart: () => emit('dragStart', node),
+    onDrop: () => emit('dragEnd', node),
+    onGenerateDragPreview: node.renderDragPreview
       ? ({ nativeSetDragImage }) => {
           setCustomNativeDragPreview({
             render: ({ container }) => {
-              return props.node.renderDragPreview?.(container)
+              return node.renderDragPreview?.(container)
             },
             nativeSetDragImage
           })
@@ -112,14 +112,14 @@ if (props.node.draggable) {
   })
 }
 
-if (props.node.droppable) {
+if (node.droppable) {
   usePragmaticDroppable(treeNodeElementGetter, {
     onDrop: async (event) => {
       const dndData = event.source.data as TreeExplorerDragAndDropData
       if (dndData.type === 'tree-explorer-node') {
-        await props.node.handleDrop?.(dndData)
+        await node.handleDrop?.(dndData)
         canDrop.value = false
-        emit('itemDropped', props.node, dndData.data)
+        emit('itemDropped', node, dndData.data)
       }
     },
     onDragEnter: (event) => {

src/components/common/UrlInput.test.ts

@@ -6,10 +6,11 @@ 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'
 
-describe('UrlInput', () => {
+import UrlInput from './UrlInput.vue'
+
+describe(UrlInput.__name ?? '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(props.modelValue)"
+      @click="validateUrl(model)"
     />
   </IconField>
 </template>
@@ -32,40 +32,34 @@ import { isValidUrl } from '@/utils/formatUtil'
 import { checkUrlReachable } from '@/utils/networkUtil'
 import { ValidationState } from '@/utils/validationUtil'
 
-const props = defineProps<{
-  modelValue: string
+const model = defineModel<string>({ required: true })
+
+const { validateUrlFn } = defineProps<{
   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.replace(/\s+/g, '') : ''
+  value ? value.replaceAll(/\s+/g, '') : ''
 
-// Add internal value state
-const internalValue = ref(cleanInput(props.modelValue))
+const internalValue = ref(cleanInput(model.value))
 
-// Watch for external modelValue changes
-watch(
-  () => props.modelValue,
-  async (newValue: string) => {
-    internalValue.value = cleanInput(newValue)
-    await validateUrl(newValue)
-  }
-)
+watch(model, async (newValue: string) => {
+  internalValue.value = cleanInput(newValue)
+  await validateUrl(newValue)
+})
 
 watch(validationState, (newState) => {
   emit('state-change', newState)
 })
 
-// Validate on mount
 onMounted(async () => {
-  await validateUrl(props.modelValue)
+  await validateUrl(model.value)
 })
 
 const handleInput = (value: string | undefined) => {
@@ -87,7 +81,7 @@ const handleBlur = async () => {
   }
 
   // Emit the update only on blur
-  emit('update:modelValue', normalizedUrl)
+  model.value = normalizedUrl
 }
 
 // Default validation implementation
@@ -113,7 +107,7 @@ const validateUrl = async (value: string) => {
 
   validationState.value = ValidationState.LOADING
   try {
-    const isValid = await (props.validateUrlFn ?? defaultValidateUrl)(url)
+    const isValid = await (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', () => {
+describe(UserAvatar.__name ?? 'UserAvatar', () => {
   beforeEach(() => {
     const app = createApp({})
     app.use(PrimeVue)

src/components/common/UserCredit.test.ts

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

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -422,8 +422,9 @@ import { createGridStyle } from '@/utils/gridUtil'
 
 const { t } = useI18n()
 
-const { onClose: originalOnClose } = defineProps<{
+const { onClose: originalOnClose, initialCategory = 'all' } = defineProps<{
   onClose: () => void
+  initialCategory?: string
 }>()
 
 // Track session time for telemetry
@@ -443,7 +444,6 @@ const distributions = computed(() => {
       return [TemplateIncludeOnDistributionEnum.Cloud]
     case 'localhost':
       return [TemplateIncludeOnDistributionEnum.Local]
-    case 'desktop':
     default:
       if (systemStatsStore.systemStats?.system.os === 'darwin') {
         return [
@@ -547,7 +547,7 @@ const allTemplates = computed(() => {
 })
 
 // Navigation
-const selectedNavItem = ref<string | null>('all')
+const selectedNavItem = ref<string | null>(initialCategory)
 
 // Filter templates based on selected navigation item
 const navigationFilteredTemplates = computed(() => {
@@ -594,12 +594,10 @@ 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') {
+  } else if (source === 'sort' && isPopularNav && !isPopularSort) {
     // When sort is changed away from 'Popular' while in the 'Popular' category,
     // reset the category to 'All Templates' to avoid a confusing state.
-    if (isPopularNav && !isPopularSort) {
-      selectedNavItem.value = 'all'
-    }
+    selectedNavItem.value = 'all'
   }
 }
 
@@ -680,37 +678,37 @@ const runsOnOptions = computed(() =>
 const modelFilterLabel = computed(() => {
   if (selectedModelObjects.value.length === 0) {
     return t('templateWorkflows.modelFilter', 'Model Filter')
-  } else if (selectedModelObjects.value.length === 1) {
-    return selectedModelObjects.value[0].name
-  } else {
-    return t('templateWorkflows.modelsSelected', {
-      count: selectedModelObjects.value.length
-    })
   }
+  if (selectedModelObjects.value.length === 1) {
+    return selectedModelObjects.value[0].name
+  }
+  return t('templateWorkflows.modelsSelected', {
+    count: selectedModelObjects.value.length
+  })
 })
 
 const useCaseFilterLabel = computed(() => {
   if (selectedUseCaseObjects.value.length === 0) {
     return t('templateWorkflows.useCaseFilter', 'Use Case')
-  } else if (selectedUseCaseObjects.value.length === 1) {
-    return selectedUseCaseObjects.value[0].name
-  } else {
-    return t('templateWorkflows.useCasesSelected', {
-      count: selectedUseCaseObjects.value.length
-    })
   }
+  if (selectedUseCaseObjects.value.length === 1) {
+    return selectedUseCaseObjects.value[0].name
+  }
+  return t('templateWorkflows.useCasesSelected', {
+    count: selectedUseCaseObjects.value.length
+  })
 })
 
 const runsOnFilterLabel = computed(() => {
   if (selectedRunsOnObjects.value.length === 0) {
     return t('templateWorkflows.runsOnFilter', 'Runs On')
-  } else if (selectedRunsOnObjects.value.length === 1) {
-    return selectedRunsOnObjects.value[0].name
-  } else {
-    return t('templateWorkflows.runsOnSelected', {
-      count: selectedRunsOnObjects.value.length
-    })
   }
+  if (selectedRunsOnObjects.value.length === 1) {
+    return selectedRunsOnObjects.value[0].name
+  }
+  return t('templateWorkflows.runsOnSelected', {
+    count: selectedRunsOnObjects.value.length
+  })
 })
 
 // Sort options

src/components/dialog/UnloadWindowConfirmDialog.vue

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