Merge branch 'main' into webcam-capture

- Create useWebcamCapture composable for camera/stream management
- Move camera initialization, capture, and upload logic to composable
- Reduce WidgetWebcam.vue size by separating concerns
- Add onCameraStart callback for widget setup after camera initializes

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

@@ -34,13 +34,10 @@ jobs:
 
       - name: Build project
         run: pnpm build
-        env:
-          DISTRIBUTION: localhost
 
-      - name: Scan dist for GTM telemetry references
+      - name: Scan dist for telemetry references
         run: |
           set -euo pipefail
-          echo '🔍 Scanning for Google Tag Manager references...'
           if rg --no-ignore -n \
             -g '*.html' \
             -g '*.js' \
@@ -49,33 +46,7 @@ jobs:
             -e '(?i)googletagmanager\.com/gtm\.js\\?id=' \
             -e '(?i)googletagmanager\.com/ns\.html\\?id=' \
             dist; then
-            echo '❌ ERROR: Google Tag Manager references found in dist assets!'
-            echo 'GTM must be properly tree-shaken from OSS builds.'
+            echo 'Telemetry references found in dist assets.'
             exit 1
           fi
-          echo '✅ No GTM references found'
-
-      - name: Scan dist for Mixpanel telemetry references
-        run: |
-          set -euo pipefail
-          echo '🔍 Scanning for Mixpanel references...'
-          if rg --no-ignore -n \
-            -g '*.html' \
-            -g '*.js' \
-            -e '(?i)mixpanel\.init' \
-            -e '(?i)mixpanel\.identify' \
-            -e 'MixpanelTelemetryProvider' \
-            -e 'mp\.comfy\.org' \
-            -e 'mixpanel-browser' \
-            -e '(?i)mixpanel\.track\(' \
-            dist; then
-            echo '❌ ERROR: Mixpanel references found in dist assets!'
-            echo 'Mixpanel must be properly tree-shaken from OSS builds.'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Use the TelemetryProvider pattern (see src/platform/telemetry/)'
-            echo '2. Call telemetry via useTelemetry() hook'
-            echo '3. Use conditional dynamic imports behind isCloud checks'
-            exit 1
-          fi
-          echo '✅ No Mixpanel references found'
+          echo 'No telemetry references found in dist assets.'

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

@@ -21,19 +21,11 @@ jobs:
         uses: actions/checkout@v6
         with:
           ref: ${{ !github.event.pull_request.head.repo.fork && github.head_ref || github.ref }}
-          token: ${{ !github.event.pull_request.head.repo.fork && secrets.PR_GH_TOKEN || github.token }}
+          token: ${{ secrets.PR_GH_TOKEN }}
 
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
-      - name: Detect browser_tests changes
-        id: changed-paths
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
-        with:
-          filters: |
-            browser_tests:
-              - 'browser_tests/**'
-
       - name: Run ESLint with auto-fix
         run: pnpm lint:fix
 
@@ -68,10 +60,6 @@ jobs:
           pnpm format:check
           pnpm knip
 
-      - name: Typecheck browser tests
-        if: steps.changed-paths.outputs.browser_tests == 'true'
-        run: pnpm typecheck:browser
-
       - name: Comment on PR about auto-fix
         if: steps.verify-changed-files.outputs.changed == 'true' && github.event.pull_request.head.repo.full_name == github.repository
         continue-on-error: true

.github/workflows/ci-oss-assets-validation.yaml

@@ -1,118 +0,0 @@
-name: 'CI: OSS Assets Validation'
-
-on:
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-  push:
-    branches: [main, dev*]
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  validate-fonts:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # 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
-        env:
-          DISTRIBUTION: localhost
-
-      - name: Check for proprietary fonts in dist
-        run: |
-          set -euo pipefail
-          echo '🔍 Checking dist for proprietary ABCROM fonts...'
-
-          if [ ! -d "dist" ] || [ -z "$(ls -A dist)" ]; then
-            echo '❌ ERROR: dist/ directory missing or empty!'
-            exit 1
-          fi
-
-          # Check for ABCROM font files
-          if find dist/ -type f -iname '*abcrom*' \
-            \( -name '*.woff' -o -name '*.woff2' -o -name '*.ttf' -o -name '*.otf' \) \
-            -print -quit | grep -q .; then
-            echo ''
-            echo '❌ ERROR: Found proprietary ABCROM font files in dist!'
-            echo ''
-            find dist/ -type f -iname '*abcrom*' \
-              \( -name '*.woff' -o -name '*.woff2' -o -name '*.ttf' -o -name '*.otf' \)
-            echo ''
-            echo 'ABCROM fonts are proprietary and should not ship to OSS builds.'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Use conditional font loading based on isCloud'
-            echo '2. Ensure fonts are dynamically imported, not bundled'
-            echo '3. Check vite config for font handling'
-            exit 1
-          fi
-
-          echo '✅ No proprietary fonts found in dist'
-
-  validate-licenses:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@9fd676a19091d4595eefd76e4bd31c97133911f1 # 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: Validate production dependency licenses
-        run: |
-          set -euo pipefail
-          echo '🔍 Checking production dependency licenses...'
-
-          # Use license-checker-rseidelsohn (actively maintained fork, handles monorepos)
-          # Exclude internal @comfyorg packages from license check
-          # Run in if condition to capture exit code
-          if npx license-checker-rseidelsohn@4 \
-            --production \
-            --summary \
-            --excludePackages '@comfyorg/comfyui-frontend;@comfyorg/design-system;@comfyorg/registry-types;@comfyorg/shared-frontend-utils;@comfyorg/tailwind-utils;@comfyorg/comfyui-electron-types' \
-            --onlyAllow 'MIT;MIT*;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;0BSD;BlueOak-1.0.0;Python-2.0;CC0-1.0;Unlicense;(MIT OR Apache-2.0);(MIT OR GPL-3.0);(Apache-2.0 OR MIT);(MPL-2.0 OR Apache-2.0);CC-BY-4.0;CC-BY-3.0;GPL-3.0-only'; then
-            echo ''
-            echo '✅ All production dependency licenses are approved!'
-          else
-            echo ''
-            echo '❌ ERROR: Found dependencies with non-approved licenses!'
-            echo ''
-            echo 'To fix this:'
-            echo '1. Check the license of the problematic package'
-            echo '2. Find an alternative package with an approved license'
-            echo '3. If the license is safe and OSI-approved, add it to the --onlyAllow list'
-            echo ''
-            echo 'For more info on OSI-approved licenses:'
-            echo 'https://opensource.org/licenses'
-            exit 1
-          fi

.github/workflows/ci-tests-e2e-forks.yaml

@@ -6,6 +6,9 @@ on:
     workflows: ['CI: Tests E2E']
     types: [requested, completed]
 
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -60,7 +63,8 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
 
       - name: Download and Deploy Reports
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'

.github/workflows/ci-tests-e2e.yaml

@@ -4,10 +4,8 @@ name: 'CI: Tests E2E'
 on:
   push:
     branches: [main, master, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
   workflow_dispatch:
 
 concurrency:
@@ -184,6 +182,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
+      - name: Get start time
+        id: start-time
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
+
       - name: Post starting comment
         env:
           GITHUB_TOKEN: ${{ github.token }}
@@ -192,7 +194,8 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting"
+            "starting" \
+            "${{ steps.start-time.outputs.time }}"
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:

.github/workflows/ci-tests-storybook-forks.yaml

@@ -6,6 +6,9 @@ on:
     workflows: ['CI: Tests Storybook']
     types: [requested, completed]
 
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -60,7 +63,8 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
 
       - name: Download and Deploy Storybook
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'

.github/workflows/ci-tests-storybook.yaml

@@ -24,7 +24,8 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting"
+            "starting" \
+            "$(date -u '+%m/%d/%Y, %I:%M:%S %p')"
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:

.github/workflows/ci-tests-unit.yaml

@@ -4,10 +4,8 @@ name: 'CI: Tests Unit'
 on:
   push:
     branches: [main, master, dev*, core/*, desktop/*]
-    paths-ignore: ['**/*.md']
   pull_request:
     branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/release-draft-create.yaml

@@ -53,13 +53,7 @@ jobs:
           IS_NIGHTLY: ${{  case(github.ref == 'refs/heads/main', 'true', 'false') }}
         run: |
           pnpm install --frozen-lockfile
-
-          # Desktop-specific release artifact with desktop distribution flags.
-          DISTRIBUTION=desktop pnpm build
-          pnpm zipdist ./dist ./dist-desktop.zip
-
-          # Default release artifact for core/PyPI.
-          NX_SKIP_NX_CACHE=true pnpm build
+          pnpm build
           pnpm zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v6
@@ -68,7 +62,6 @@ jobs:
           path: |
             dist/
             dist.zip
-            dist-desktop.zip
 
   draft_release:
     needs: build
@@ -86,7 +79,6 @@ jobs:
         with:
           files: |
             dist.zip
-            dist-desktop.zip
           tag_name: v${{ needs.build.outputs.version }}
           target_commitish: ${{ github.event.pull_request.base.ref }}
           make_latest: >-

.gitignore

@@ -64,7 +64,6 @@ browser_tests/local/
 dist.zip
 
 /temp/
-/tmp/
 
 # Generated JSON Schemas
 /schemas/

.oxlintrc.json

@@ -96,7 +96,6 @@
     "typescript/restrict-template-expressions": "off",
     "typescript/unbound-method": "off",
     "typescript/no-floating-promises": "error",
-    "typescript/no-explicit-any": "error",
     "vue/no-import-compiler-macros": "error",
     "vue/no-dupe-keys": "error"
   },

.storybook/main.ts

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

.storybook/preview.ts

@@ -90,6 +90,7 @@ const preview: Preview = {
           { value: 'light', icon: 'sun', title: 'Light' },
           { value: 'dark', icon: 'moon', title: 'Dark' }
         ],
+        showName: true,
         dynamicTitle: true
       }
     }

.stylelintrc.json

@@ -40,20 +40,19 @@
     "block-no-empty": true,
     "no-descending-specificity": null,
     "no-duplicate-at-import-rules": true,
-    "at-rule-disallowed-list": ["apply"],
     "at-rule-no-unknown": [
       true,
       {
         "ignoreAtRules": [
           "tailwind",
+          "apply",
           "layer",
           "config",
           "theme",
           "reference",
           "plugin",
           "custom-variant",
-          "utility",
-          "source"
+          "utility"
         ]
       }
     ],

AGENTS.md

@@ -37,10 +37,6 @@ See @docs/guidance/\*.md for file-type-specific conventions (auto-loaded by glob
 
 The project uses **Nx** for build orchestration and task management
 
-## Package Manager
-
-This project uses **pnpm**. Always prefer scripts defined in `package.json` (e.g., `pnpm test:unit`, `pnpm lint`). To run arbitrary packages not in scripts, use `pnpx` or `pnpm dlx` — never `npx`.
-
 ## Build, Test, and Development Commands
 
 - `pnpm dev`: Start Vite dev server.

apps/desktop-ui/package.json

@@ -61,7 +61,8 @@
           "^build"
         ],
         "options": {
-          "command": "vite build --config apps/desktop-ui/vite.config.mts"
+          "cwd": "apps/desktop-ui",
+          "command": "vite build --config vite.config.mts"
         },
         "outputs": [
           "{projectRoot}/dist"

apps/desktop-ui/src/assets/css/style.css

@@ -4,39 +4,3 @@
   position: absolute;
   inset: 0;
 }
-
-.p-button-secondary {
-  border: none;
-  background-color: var(--color-neutral-600);
-  color: var(--color-white);
-}
-
-.p-button-secondary:hover {
-  background-color: var(--color-neutral-550);
-}
-
-.p-button-secondary:active {
-  background-color: var(--color-neutral-500);
-}
-
-.p-button-danger {
-  background-color: var(--color-coral-red-600);
-}
-
-.p-button-danger:hover {
-  background-color: var(--color-coral-red-500);
-}
-
-.p-button-danger:active {
-  background-color: var(--color-coral-red-400);
-}
-
-.task-div .p-card {
-  transition: opacity var(--default-transition-duration);
-  --p-card-background: var(--p-button-secondary-background);
-  opacity: 0.9;
-}
-
-.task-div .p-card:hover {
-  opacity: 1;
-}

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -101,15 +101,13 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* xterm renders its internal DOM outside Vue templates, so :deep selectors are
- * required to style those generated nodes.
- */
+@reference '../../../../assets/css/style.css';
+
 :deep(.p-terminal) .xterm {
-  overflow: hidden;
+  @apply overflow-hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  overflow: hidden;
-  background-color: var(--color-neutral-900);
+  @apply bg-neutral-900 overflow-hidden;
 }
 </style>

apps/desktop-ui/src/components/common/LanguageSelector.vue

@@ -7,7 +7,7 @@
     option-value="value"
     :disabled="isSwitching"
     :pt="dropdownPt"
-    :size="size"
+    :size="props.size"
     class="language-selector"
     @change="onLocaleChange"
   >
@@ -36,10 +36,16 @@ import { i18n, loadLocale, st } from '@/i18n'
 type VariantKey = 'dark' | 'light'
 type SizeKey = 'small' | 'large'
 
-const { variant = 'dark', size = 'small' } = defineProps<{
-  variant?: VariantKey
-  size?: SizeKey
-}>()
+const props = withDefaults(
+  defineProps<{
+    variant?: VariantKey
+    size?: SizeKey
+  }>(),
+  {
+    variant: 'dark',
+    size: 'small'
+  }
+)
 
 const dropdownId = `language-select-${Math.random().toString(36).slice(2)}`
 
@@ -98,8 +104,10 @@ const VARIANT_PRESETS = {
 const selectedLocale = ref<string>(i18n.global.locale.value)
 const isSwitching = ref(false)
 
-const sizePreset = computed(() => SIZE_PRESETS[size])
-const variantPreset = computed(() => VARIANT_PRESETS[variant])
+const sizePreset = computed(() => SIZE_PRESETS[props.size as SizeKey])
+const variantPreset = computed(
+  () => VARIANT_PRESETS[props.variant as VariantKey]
+)
 
 const dropdownPt = computed(() => ({
   root: {
@@ -187,17 +195,13 @@ async function onLocaleChange(event: SelectChangeEvent) {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 :deep(.p-dropdown-panel .p-dropdown-item) {
-  transition-property: color, background-color, border-color;
-  transition-duration: var(--default-transition-duration);
+  @apply transition-colors;
 }
 
 :deep(.p-dropdown) {
-  &:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 2px var(--color-neutral-900),
-      0 0 0 4px color-mix(in srgb, var(--color-brand-yellow) 60%, transparent);
-  }
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2;
 }
 </style>

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -269,43 +269,26 @@ const onFocus = async () => {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 :deep(.location-picker-accordion) {
-  padding-inline: calc(var(--spacing) * 12);
+  @apply px-12;
 
   .p-accordionpanel {
-    border: 0;
-    background-color: transparent;
+    @apply border-0 bg-transparent;
   }
 
   .p-accordionheader {
-    margin-top: calc(var(--spacing) * 2);
-    border: 0;
-    border-radius: var(--radius-xl);
-    background-color: color-mix(
-      in srgb,
-      var(--color-neutral-800) 50%,
-      transparent
-    );
+    @apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
     transition:
       background-color 0.2s ease,
       border-radius 0.5s ease;
-
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--color-neutral-700) 50%,
-        transparent
-      );
-    }
   }
 
   /* When panel is expanded, adjust header border radius */
   .p-accordionpanel-active {
     .p-accordionheader {
-      border-top-left-radius: var(--radius-xl);
-      border-top-right-radius: var(--radius-xl);
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+      @apply rounded-t-xl rounded-b-none;
     }
 
     .p-accordionheader-toggle-icon {
@@ -316,24 +299,11 @@ const onFocus = async () => {
   }
 
   .p-accordioncontent {
-    border: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: var(--radius-xl);
-    border-bottom-left-radius: var(--radius-xl);
-    background-color: color-mix(
-      in srgb,
-      var(--color-neutral-800) 50%,
-      transparent
-    );
+    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
   }
 
   .p-accordioncontent-content {
-    background-color: transparent;
-    padding-top: calc(var(--spacing) * 3);
-    padding-right: calc(var(--spacing) * 5);
-    padding-bottom: calc(var(--spacing) * 5);
-    padding-left: calc(var(--spacing) * 5);
+    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
   }
 
   /* Override default chevron icons to use up/down */

apps/desktop-ui/src/components/maintenance/TaskCard.vue

@@ -1,20 +1,11 @@
 <template>
   <div
-    :class="
-      cn(
-        'task-div group/task-card relative grid min-h-52 max-w-48',
-        isLoading && 'opacity-75'
-      )
-    "
+    class="task-div relative grid min-h-52 max-w-48"
+    :class="{ 'opacity-75': isLoading }"
   >
     <Card
-      :class="
-        cn(
-          'relative h-full max-w-48 overflow-hidden',
-          runner.state !== 'error' && 'opacity-65'
-        )
-      "
-      :pt="cardPt"
+      class="relative h-full max-w-48 overflow-hidden"
+      :class="{ 'opacity-65': runner.state !== 'error' }"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
@@ -52,7 +43,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 col-span-full row-span-full z-10 text-[4rem] text-green-500 opacity-100 transition-opacity group-hover/task-card:opacity-20 [text-shadow:0.25rem_0_0.5rem_black]"
+      class="task-card-ok pi pi-check"
     />
   </div>
 </template>
@@ -64,7 +55,6 @@ import { computed } from 'vue'
 
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { cn } from '@/utils/tailwindUtil'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 const taskStore = useMaintenanceTaskStore()
@@ -93,9 +83,51 @@ const reactiveExecuting = computed(() => !!runner.value.executing)
 
 const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
 const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
-
-const cardPt = {
-  header: { class: 'z-0' },
-  body: { class: 'z-[1] grow justify-between' }
-}
 </script>
+
+<style scoped>
+@reference '../../assets/css/style.css';
+
+.task-card-ok {
+  @apply text-green-500 absolute -right-4 -bottom-4 opacity-100 row-span-full col-span-full transition-opacity;
+
+  font-size: 4rem;
+  text-shadow: 0.25rem 0 0.5rem black;
+  z-index: 10;
+}
+
+.p-card {
+  @apply transition-opacity;
+
+  --p-card-background: var(--p-button-secondary-background);
+  opacity: 0.9;
+
+  &.opacity-65 {
+    opacity: 0.4;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+:deep(.p-card-header) {
+  z-index: 0;
+}
+
+:deep(.p-card-body) {
+  z-index: 1;
+  flex-grow: 1;
+  justify-content: space-between;
+}
+
+.task-div {
+  > i {
+    pointer-events: none;
+  }
+
+  &:hover > i {
+    opacity: 0.2;
+  }
+}
+</style>

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
     <h1 class="font-inter font-semibold text-xl m-0 italic">
-      {{ $t(`desktopDialogs.${id}.title`, title) }}
+      {{ t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">
-      {{ $t(`desktopDialogs.${id}.message`, message) }}
+      {{ t(`desktopDialogs.${id}.message`, message) }}
     </p>
     <div class="flex w-full gap-2">
       <Button
@@ -12,7 +12,7 @@
         :key="button.label"
         class="rounded-lg first:mr-auto"
         :label="
-          $t(
+          t(
             `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
             button.label
           )
@@ -31,6 +31,7 @@ import { useRoute } from 'vue-router'
 
 import { getDialog } from '@/constants/desktopDialogs'
 import type { DialogAction } from '@/constants/desktopDialogs'
+import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 const route = useRoute()
@@ -40,3 +41,31 @@ const handleButtonClick = async (button: DialogAction) => {
   await electronAPI().Dialog.clickButton(button.returnValue)
 }
 </script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+.p-button-secondary {
+  @apply text-white border-none bg-neutral-600;
+}
+
+.p-button-secondary:hover {
+  @apply bg-neutral-550;
+}
+
+.p-button-secondary:active {
+  @apply bg-neutral-500;
+}
+
+.p-button-danger {
+  @apply bg-coral-red-600;
+}
+
+.p-button-danger:hover {
+  @apply bg-coral-red-500;
+}
+
+.p-button-danger:active {
+  @apply bg-coral-red-400;
+}
+</style>

apps/desktop-ui/src/views/DesktopUpdateView.vue

@@ -6,11 +6,11 @@
       <div class="relative m-8 text-center">
         <!-- Header -->
         <h1 class="download-bg pi-download text-4xl font-bold">
-          {{ $t('desktopUpdate.title') }}
+          {{ t('desktopUpdate.title') }}
         </h1>
 
         <div class="m-8">
-          <span>{{ $t('desktopUpdate.description') }}</span>
+          <span>{{ t('desktopUpdate.description') }}</span>
         </div>
 
         <ProgressSpinner class="m-8 w-48 h-48" />
@@ -19,7 +19,7 @@
         <Button
           style="transform: translateX(-50%)"
           class="fixed bottom-0 left-1/2 my-8"
-          :label="$t('maintenance.consoleLogs')"
+          :label="t('maintenance.consoleLogs')"
           icon="pi pi-desktop"
           icon-pos="left"
           severity="secondary"
@@ -28,8 +28,8 @@
 
         <TerminalOutputDrawer
           v-model="terminalVisible"
-          :header="$t('g.terminal')"
-          :default-message="$t('desktopUpdate.terminalDefaultMessage')"
+          :header="t('g.terminal')"
+          :default-message="t('desktopUpdate.terminalDefaultMessage')"
         />
       </div>
     </div>
@@ -44,6 +44,7 @@ import Toast from 'primevue/toast'
 import { onUnmounted, ref } from 'vue'
 
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
+import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 import BaseViewTemplate from './templates/BaseViewTemplate.vue'
@@ -60,10 +61,10 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .download-bg::before {
-  position: absolute;
-  margin: 0;
-  color: var(--muted-foreground);
+  @apply m-0 absolute text-muted;
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;

apps/desktop-ui/src/views/InstallView.vue

@@ -183,37 +183,33 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 :deep(.p-steppanel) {
-  margin-top: calc(var(--spacing) * 8);
-  display: flex;
-  justify-content: center;
-  background-color: transparent;
+  @apply mt-8 flex justify-center bg-transparent;
 }
 
 /* Remove default padding/margin from StepPanels to make scrollbar flush */
 :deep(.p-steppanels) {
-  margin: 0;
-  padding: 0;
+  @apply p-0 m-0;
 }
 
 /* Ensure StepPanel content container has no top/bottom padding */
 :deep(.p-steppanel-content) {
-  padding: 0;
+  @apply p-0;
 }
 
 /* Custom overlay scrollbar for WebKit browsers (Electron, Chrome) */
 :deep(.p-steppanels::-webkit-scrollbar) {
-  width: calc(var(--spacing) * 4);
+  @apply w-4;
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-track) {
-  background-color: transparent;
+  @apply bg-transparent;
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-thumb) {
-  border: 4px solid transparent;
-  border-radius: var(--radius-lg);
-  background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
+  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
   background-clip: content-box;
 }
 </style>

apps/desktop-ui/src/views/MaintenanceView.stories.ts

@@ -77,7 +77,7 @@ const createMockElectronAPI = () => {
 }
 
 const ensureElectronAPI = () => {
-  const globalWindow = window as { electronAPI?: unknown }
+  const globalWindow = window as unknown as { electronAPI?: unknown }
   if (!globalWindow.electronAPI) {
     globalWindow.electronAPI = createMockElectronAPI()
   }

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -114,12 +114,12 @@ import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import RefreshButton from '@/components/common/RefreshButton.vue'
 import StatusTag from '@/components/maintenance/StatusTag.vue'
 import TaskListPanel from '@/components/maintenance/TaskListPanel.vue'
 import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
+import { t } from '@/i18n'
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceFilter } from '@/types/desktop/maintenanceTypes'
 import { electronAPI } from '@/utils/envUtil'
@@ -129,7 +129,6 @@ import BaseViewTemplate from './templates/BaseViewTemplate.vue'
 
 const electron = electronAPI()
 const toast = useToast()
-const { t } = useI18n()
 const taskStore = useMaintenanceTaskStore()
 const { clearResolved, processUpdate, refreshDesktopTasks } = taskStore
 
@@ -221,14 +220,14 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 :deep(.p-tag) {
   --p-tag-gap: 0.375rem;
 }
 
 .backspan::before {
-  position: absolute;
-  margin: 0;
-  color: var(--muted-foreground);
+  @apply m-0 absolute text-muted;
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: -2rem;

apps/desktop-ui/src/views/NotSupportedView.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseViewTemplate>
-    <div class="sad-container grid items-center justify-evenly">
+    <div class="sad-container">
       <!-- Right side image -->
       <img
         class="sad-girl"
@@ -79,7 +79,10 @@ const continueToInstall = async () => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .sad-container {
+  @apply grid items-center justify-evenly;
   grid-template-columns: 25rem 1fr;
 
   & > * {

apps/desktop-ui/src/views/ServerStartView.vue

@@ -232,6 +232,8 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 /* Hide the xterm scrollbar completely */
 :deep(.p-terminal) .xterm-viewport {
   overflow: hidden !important;

browser_tests/assets/missing/deprecated_nodes_complex.json

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

browser_tests/assets/missing/deprecated_nodes_simple.json

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

browser_tests/assets/subgraphs/subgraph-duplicate-links.json

@@ -1,183 +0,0 @@
-{
-  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
-      "pos": [600, 400],
-      "size": [200, 100],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {},
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 2,
-          "lastLinkId": 5,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "Subgraph With Duplicate Links",
-        "inputNode": {
-          "id": -10,
-          "bounding": [200, 400, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [900, 400, 120, 60]
-        },
-        "inputs": [],
-        "outputs": [
-          {
-            "id": "out-latent-1",
-            "name": "LATENT",
-            "type": "LATENT",
-            "linkIds": [2],
-            "pos": [920, 420]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 1,
-            "type": "KSampler",
-            "pos": [400, 100],
-            "size": [270, 262],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "model",
-                "type": "MODEL",
-                "link": null
-              },
-              {
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": null
-              },
-              {
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": null
-              },
-              {
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": 1
-              }
-            ],
-            "outputs": [
-              {
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [2]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
-          },
-          {
-            "id": 2,
-            "type": "EmptyLatentImage",
-            "pos": [100, 200],
-            "size": [200, 106],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              {
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [1, 3, 4, 5]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "EmptyLatentImage"
-            },
-            "widgets_values": [512, 512, 1]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": 2,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 3,
-            "type": "LATENT"
-          },
-          {
-            "id": 2,
-            "origin_id": 1,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "LATENT"
-          },
-          {
-            "id": 3,
-            "origin_id": 2,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 3,
-            "type": "LATENT"
-          },
-          {
-            "id": 4,
-            "origin_id": 2,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 3,
-            "type": "LATENT"
-          },
-          {
-            "id": 5,
-            "origin_id": 2,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 3,
-            "type": "LATENT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [0, 0]
-    },
-    "frontendVersion": "1.38.14"
-  },
-  "version": 0.4
-}

browser_tests/assets/subgraphs/subgraph-with-multiple-promoted-previews.json

@@ -1,394 +0,0 @@
-{
-  "id": "43e9499c-2512-43b5-a5a1-2485eb65da32",
-  "revision": 0,
-  "last_node_id": 8,
-  "last_link_id": 10,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "LoadImage",
-      "pos": [170.55728894250745, 515.6401487466619],
-      "size": [282.8166809082031, 363.8333435058594],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": [7, 9]
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": ["example.png", "image"]
-    },
-    {
-      "id": 7,
-      "type": "21dea088-e1b4-47a4-a01f-3d1bf4504001",
-      "pos": [500.2639113468392, 519.9960755960157],
-      "size": [464.95001220703125, 615.8333129882812],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 7
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": [10]
-        }
-      ],
-      "properties": {
-        "proxyWidgets": [
-          ["2", "$$canvas-image-preview"],
-          ["4", "$$canvas-image-preview"]
-        ]
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 8,
-      "type": "a7a0350a-af99-4d26-9391-450b4f726206",
-      "pos": [1000.5293620197185, 499.9253405678786],
-      "size": [225, 359.8333435058594],
-      "flags": {},
-      "order": 2,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "image1",
-          "type": "IMAGE",
-          "link": 9
-        },
-        {
-          "name": "image2",
-          "type": "IMAGE",
-          "link": 10
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "proxyWidgets": [["6", "$$canvas-image-preview"]]
-      },
-      "widgets_values": []
-    }
-  ],
-  "links": [
-    [7, 1, 0, 7, 0, "IMAGE"],
-    [9, 1, 0, 8, 0, "IMAGE"],
-    [10, 7, 0, 8, 1, "IMAGE"]
-  ],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "21dea088-e1b4-47a4-a01f-3d1bf4504001",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 8,
-          "lastLinkId": 10,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [297.7833638107301, 502.6302057820892, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1052.8175480718996, 502.6302057820892, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "afc8dbc3-12e6-4b3c-9840-9b398d06e6bd",
-            "name": "images",
-            "type": "IMAGE",
-            "linkIds": [1, 2],
-            "localized_name": "images",
-            "pos": [397.7833638107301, 522.6302057820892]
-          }
-        ],
-        "outputs": [
-          {
-            "id": "d0a84974-5f4d-4f4b-b23a-2e7288a9689d",
-            "name": "IMAGE",
-            "type": "IMAGE",
-            "linkIds": [5],
-            "localized_name": "IMAGE",
-            "pos": [1072.8175480718996, 522.6302057820892]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 4,
-            "type": "PreviewImage",
-            "pos": [767.8225773415076, 602.8695134060456],
-            "size": [225, 303.8333435058594],
-            "flags": {},
-            "order": 2,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "images",
-                "name": "images",
-                "type": "IMAGE",
-                "link": 3
-              }
-            ],
-            "outputs": [],
-            "properties": {
-              "Node name for S&R": "PreviewImage"
-            },
-            "widgets_values": []
-          },
-          {
-            "id": 2,
-            "type": "PreviewImage",
-            "pos": [754.9358989867657, 188.55375831225257],
-            "size": [225, 303.8333435058594],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "images",
-                "name": "images",
-                "type": "IMAGE",
-                "link": 1
-              }
-            ],
-            "outputs": [],
-            "properties": {
-              "Node name for S&R": "PreviewImage"
-            },
-            "widgets_values": []
-          },
-          {
-            "id": 3,
-            "type": "ImageInvert",
-            "pos": [477.783932416778, 542.2440719627998],
-            "size": [225, 71.83333587646484],
-            "flags": {
-              "collapsed": false
-            },
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "image",
-                "name": "image",
-                "type": "IMAGE",
-                "link": 2
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "IMAGE",
-                "name": "IMAGE",
-                "type": "IMAGE",
-                "links": [3, 5]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "ImageInvert"
-            },
-            "widgets_values": []
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 3,
-            "origin_id": 3,
-            "origin_slot": 0,
-            "target_id": 4,
-            "target_slot": 0,
-            "type": "IMAGE"
-          },
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 2,
-            "target_slot": 0,
-            "type": "IMAGE"
-          },
-          {
-            "id": 2,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 3,
-            "target_slot": 0,
-            "type": "IMAGE"
-          },
-          {
-            "id": 5,
-            "origin_id": 3,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "IMAGE"
-          }
-        ],
-        "extra": {}
-      },
-      {
-        "id": "a7a0350a-af99-4d26-9391-450b4f726206",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 8,
-          "lastLinkId": 10,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [973.7423316105073, 561.9744246746379, 120, 80]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [1905.487372786412, 581.9744246746379, 120, 40]
-        },
-        "inputs": [
-          {
-            "id": "20ac4159-6814-4d40-a217-ea260152b689",
-            "name": "image1",
-            "type": "IMAGE",
-            "linkIds": [4],
-            "localized_name": "image1",
-            "pos": [1073.7423316105073, 581.9744246746379]
-          },
-          {
-            "id": "c3759a8c-914e-4450-bc41-ca683ffce96b",
-            "name": "image2",
-            "type": "IMAGE",
-            "linkIds": [8],
-            "localized_name": "image2",
-            "shape": 7,
-            "pos": [1073.7423316105073, 601.9744246746379]
-          }
-        ],
-        "outputs": [],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 5,
-            "type": "ImageStitch",
-            "pos": [1153.7423085222254, 396.2033931749105],
-            "size": [270, 225.1666717529297],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "image1",
-                "name": "image1",
-                "type": "IMAGE",
-                "link": 4
-              },
-              {
-                "localized_name": "image2",
-                "name": "image2",
-                "shape": 7,
-                "type": "IMAGE",
-                "link": 8
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "IMAGE",
-                "name": "IMAGE",
-                "type": "IMAGE",
-                "links": [6]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "ImageStitch"
-            },
-            "widgets_values": ["right", true, 0, "white"]
-          },
-          {
-            "id": 6,
-            "type": "PreviewImage",
-            "pos": [1620.4874189629757, 529.9122050216333],
-            "size": [225, 307.8333435058594],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "images",
-                "name": "images",
-                "type": "IMAGE",
-                "link": 6
-              }
-            ],
-            "outputs": [],
-            "properties": {
-              "Node name for S&R": "PreviewImage"
-            },
-            "widgets_values": []
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 6,
-            "origin_id": 5,
-            "origin_slot": 0,
-            "target_id": 6,
-            "target_slot": 0,
-            "type": "IMAGE"
-          },
-          {
-            "id": 4,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 5,
-            "target_slot": 0,
-            "type": "IMAGE"
-          },
-          {
-            "id": 8,
-            "origin_id": -10,
-            "origin_slot": 1,
-            "target_id": 5,
-            "target_slot": 1,
-            "type": "IMAGE"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 0.7269777827561446,
-      "offset": [-35.273237658266034, -55.17394203309256]
-    },
-    "frontendVersion": "1.40.8"
-  },
-  "version": 0.4
-}

browser_tests/assets/subgraphs/subgraph-with-preview-node.json

@@ -1,170 +0,0 @@
-{
-  "id": "preview-subgraph-test-001",
-  "revision": 0,
-  "last_node_id": 11,
-  "last_link_id": 2,
-  "nodes": [
-    {
-      "id": 5,
-      "type": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
-      "pos": [318.6320139868054, 212.9091015141833],
-      "size": [225, 368],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "images",
-          "type": "IMAGE",
-          "link": 2
-        }
-      ],
-      "outputs": [],
-      "properties": {
-        "proxyWidgets": [
-          ["10", "filename_prefix"],
-          ["10", "$$canvas-image-preview"]
-        ],
-        "cnr_id": "comfy-core",
-        "ver": "0.13.0",
-        "ue_properties": {
-          "widget_ue_connectable": {},
-          "version": "7.6.2",
-          "input_ue_unconnectable": {}
-        }
-      },
-      "widgets_values": []
-    },
-    {
-      "id": 11,
-      "type": "LoadImage",
-      "pos": [-0.5080003681592018, 211.3051121416672],
-      "size": [282.8333435058594, 364],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": [2]
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "ue_properties": {
-          "widget_ue_connectable": {},
-          "input_ue_unconnectable": {}
-        },
-        "cnr_id": "comfy-core",
-        "ver": "0.13.0",
-        "Node name for S&R": "LoadImage"
-      },
-      "widgets_values": ["example.png", "image"]
-    }
-  ],
-  "links": [[2, 11, 0, 5, 0, "IMAGE"]],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 11,
-          "lastLinkId": 2,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [300, 350, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [900, 350, 120, 40]
-        },
-        "inputs": [
-          {
-            "id": "img-slot-001",
-            "name": "images",
-            "type": "IMAGE",
-            "linkIds": [1],
-            "pos": [400, 370]
-          }
-        ],
-        "outputs": [],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 10,
-            "type": "SaveImage",
-            "pos": [500.0046924937855, 300.0146992076527],
-            "size": [315, 340],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "images",
-                "name": "images",
-                "type": "IMAGE",
-                "link": 1
-              }
-            ],
-            "outputs": [],
-            "properties": {
-              "cnr_id": "comfy-core",
-              "ver": "0.13.0",
-              "Node name for S&R": "SaveImage",
-              "ue_properties": {
-                "widget_ue_connectable": {},
-                "version": "7.6.2",
-                "input_ue_unconnectable": {}
-              }
-            },
-            "widgets_values": ["ComfyUI"]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 10,
-            "target_slot": 0,
-            "type": "IMAGE"
-          }
-        ],
-        "extra": {
-          "ue_links": [],
-          "links_added_by_ue": []
-        }
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1.1819400303977265,
-      "offset": [81.66005130613983, -19.028558221588725]
-    },
-    "frontendVersion": "1.40.3",
-    "ue_links": [],
-    "links_added_by_ue": [],
-    "VHS_latentpreview": false,
-    "VHS_latentpreviewrate": 0,
-    "VHS_MetadataImage": true,
-    "VHS_KeepIntermediate": true
-  },
-  "version": 0.4
-}

browser_tests/assets/widgets/save_image_and_animated_webp.json

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

browser_tests/fixtures/ComfyPage.ts

@@ -14,7 +14,6 @@ import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
 import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
-import { ComfyNodeSearchBoxV2 } from './components/ComfyNodeSearchBoxV2'
 import { ContextMenu } from './components/ContextMenu'
 import { SettingDialog } from './components/SettingDialog'
 import { BottomPanel } from './components/BottomPanel'
@@ -26,6 +25,7 @@ import { Topbar } from './components/Topbar'
 import { CanvasHelper } from './helpers/CanvasHelper'
 import { ClipboardHelper } from './helpers/ClipboardHelper'
 import { CommandHelper } from './helpers/CommandHelper'
+import { DebugHelper } from './helpers/DebugHelper'
 import { DragDropHelper } from './helpers/DragDropHelper'
 import { KeyboardHelper } from './helpers/KeyboardHelper'
 import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
@@ -166,13 +166,13 @@ export class ComfyPage {
 
   // Components
   public readonly searchBox: ComfyNodeSearchBox
-  public readonly searchBoxV2: ComfyNodeSearchBoxV2
   public readonly menu: ComfyMenu
   public readonly actionbar: ComfyActionbar
   public readonly templates: ComfyTemplates
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
   public readonly vueNodes: VueNodeHelpers
+  public readonly debug: DebugHelper
   public readonly subgraph: SubgraphHelper
   public readonly canvasOps: CanvasHelper
   public readonly nodeOps: NodeOperationsHelper
@@ -210,13 +210,13 @@ export class ComfyPage {
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
-    this.searchBoxV2 = new ComfyNodeSearchBoxV2(page)
     this.menu = new ComfyMenu(page)
     this.actionbar = new ComfyActionbar(page)
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
     this.vueNodes = new VueNodeHelpers(page)
+    this.debug = new DebugHelper(page, this.canvas)
     this.subgraph = new SubgraphHelper(this)
     this.canvasOps = new CanvasHelper(page, this.canvas, this.resetViewButton)
     this.nodeOps = new NodeOperationsHelper(this)

browser_tests/fixtures/components/ComfyNodeSearchBoxV2.ts

@@ -1,29 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-
-export class ComfyNodeSearchBoxV2 {
-  readonly dialog: Locator
-  readonly input: Locator
-  readonly results: Locator
-  readonly filterOptions: Locator
-
-  constructor(readonly page: Page) {
-    this.dialog = page.getByRole('search')
-    this.input = this.dialog.locator('input[type="text"]')
-    this.results = this.dialog.getByTestId('result-item')
-    this.filterOptions = this.dialog.getByTestId('filter-option')
-  }
-
-  categoryButton(categoryId: string): Locator {
-    return this.dialog.getByTestId(`category-${categoryId}`)
-  }
-
-  filterBarButton(name: string): Locator {
-    return this.dialog.getByRole('button', { name })
-  }
-
-  async reload(comfyPage: ComfyPage) {
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
-  }
-}

browser_tests/fixtures/components/SettingDialog.ts

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

browser_tests/fixtures/helpers/CommandHelper.ts

@@ -11,10 +11,7 @@ export class CommandHelper {
   ): Promise<void> {
     await this.page.evaluate(
       ({ commandId, metadata }) => {
-        const app = window.app
-        if (!app) throw new Error('window.app is not available')
-
-        return app.extensionManager.command.execute(commandId, {
+        return window['app'].extensionManager.command.execute(commandId, {
           metadata
         })
       },

browser_tests/fixtures/helpers/DebugHelper.ts

@@ -0,0 +1,167 @@
+import type { Locator, Page, TestInfo } from '@playwright/test'
+
+import type { Position } from '../types'
+
+export interface DebugScreenshotOptions {
+  fullPage?: boolean
+  element?: 'canvas' | 'page'
+  markers?: Array<{ position: Position; id?: string }>
+}
+
+export class DebugHelper {
+  constructor(
+    private page: Page,
+    private canvas: Locator
+  ) {}
+
+  async addMarker(
+    position: Position,
+    id: string = 'debug-marker'
+  ): Promise<void> {
+    await this.page.evaluate(
+      ([pos, markerId]) => {
+        const existing = document.getElementById(markerId)
+        if (existing) existing.remove()
+
+        const marker = document.createElement('div')
+        marker.id = markerId
+        marker.style.position = 'fixed'
+        marker.style.left = `${pos.x - 10}px`
+        marker.style.top = `${pos.y - 10}px`
+        marker.style.width = '20px'
+        marker.style.height = '20px'
+        marker.style.border = '2px solid red'
+        marker.style.borderRadius = '50%'
+        marker.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'
+        marker.style.pointerEvents = 'none'
+        marker.style.zIndex = '10000'
+        document.body.appendChild(marker)
+      },
+      [position, id] as const
+    )
+  }
+
+  async removeMarkers(): Promise<void> {
+    await this.page.evaluate(() => {
+      document
+        .querySelectorAll('[id^="debug-marker"]')
+        .forEach((el) => el.remove())
+    })
+  }
+
+  async attachScreenshot(
+    testInfo: TestInfo,
+    name: string,
+    options?: DebugScreenshotOptions
+  ): Promise<void> {
+    if (options?.markers) {
+      for (const marker of options.markers) {
+        await this.addMarker(marker.position, marker.id)
+      }
+    }
+
+    let screenshot: Buffer
+    const targetElement = options?.element || 'page'
+
+    if (targetElement === 'canvas') {
+      screenshot = await this.canvas.screenshot()
+    } else if (options?.fullPage) {
+      screenshot = await this.page.screenshot({ fullPage: true })
+    } else {
+      screenshot = await this.page.screenshot()
+    }
+
+    await testInfo.attach(name, {
+      body: screenshot,
+      contentType: 'image/png'
+    })
+
+    if (options?.markers) {
+      await this.removeMarkers()
+    }
+  }
+
+  async saveCanvasScreenshot(filename: string): Promise<void> {
+    await this.page.evaluate(async (filename) => {
+      const canvas = document.getElementById(
+        'graph-canvas'
+      ) as HTMLCanvasElement
+      if (!canvas) {
+        throw new Error('Canvas not found')
+      }
+
+      return new Promise<void>((resolve) => {
+        canvas.toBlob(async (blob) => {
+          if (!blob) {
+            throw new Error('Failed to create blob from canvas')
+          }
+
+          const url = URL.createObjectURL(blob)
+          const a = document.createElement('a')
+          a.href = url
+          a.download = filename
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+          URL.revokeObjectURL(url)
+          resolve()
+        }, 'image/png')
+      })
+    }, filename)
+  }
+
+  async getCanvasDataURL(): Promise<string> {
+    return await this.page.evaluate(() => {
+      const canvas = document.getElementById(
+        'graph-canvas'
+      ) as HTMLCanvasElement
+      if (!canvas) {
+        throw new Error('Canvas not found')
+      }
+      return canvas.toDataURL('image/png')
+    })
+  }
+
+  async showCanvasOverlay(): Promise<void> {
+    await this.page.evaluate(() => {
+      const canvas = document.getElementById(
+        'graph-canvas'
+      ) as HTMLCanvasElement
+      if (!canvas) {
+        throw new Error('Canvas not found')
+      }
+
+      const existingOverlay = document.getElementById('debug-canvas-overlay')
+      if (existingOverlay) {
+        existingOverlay.remove()
+      }
+
+      const overlay = document.createElement('div')
+      overlay.id = 'debug-canvas-overlay'
+      overlay.style.position = 'fixed'
+      overlay.style.top = '0'
+      overlay.style.left = '0'
+      overlay.style.zIndex = '9999'
+      overlay.style.backgroundColor = 'white'
+      overlay.style.padding = '10px'
+      overlay.style.border = '2px solid red'
+
+      const img = document.createElement('img')
+      img.src = canvas.toDataURL('image/png')
+      img.style.maxWidth = '800px'
+      img.style.maxHeight = '600px'
+      overlay.appendChild(img)
+
+      document.body.appendChild(overlay)
+    })
+  }
+
+  async hideCanvasOverlay(): Promise<void> {
+    await this.page.evaluate(() => {
+      const overlay = document.getElementById('debug-canvas-overlay')
+      if (overlay) {
+        overlay.remove()
+      }
+    })
+  }
+}

browser_tests/fixtures/helpers/DragDropHelper.ts

@@ -115,16 +115,6 @@ export class DragDropHelper {
       const dragOverEvent = new DragEvent('dragover', eventOptions)
       const dropEvent = new DragEvent('drop', eventOptions)
 
-      const graphCanvasElement = document.querySelector('#graph-canvas')
-
-      // Keep Litegraph's drag-over node tracking in sync when the drop target is a
-      // Vue node DOM overlay outside of the graph canvas element.
-      if (graphCanvasElement && !graphCanvasElement.contains(targetElement)) {
-        graphCanvasElement.dispatchEvent(
-          new DragEvent('dragover', eventOptions)
-        )
-      }
-
       Object.defineProperty(dropEvent, 'preventDefault', {
         value: () => {},
         writable: false

browser_tests/fixtures/helpers/NodeOperationsHelper.ts

@@ -33,10 +33,6 @@ export class NodeOperationsHelper {
     })
   }
 
-  async getNodeCount(): Promise<number> {
-    return await this.page.evaluate(() => window.app!.graph.nodes.length)
-  }
-
   async getNodes(): Promise<LGraphNode[]> {
     return await this.page.evaluate(() => {
       return window.app!.graph.nodes

browser_tests/fixtures/helpers/SubgraphHelper.ts

@@ -36,7 +36,7 @@ export class SubgraphHelper {
         const currentGraph = app.canvas!.graph!
 
         // Check if we're in a subgraph
-        if (!('inputNode' in currentGraph)) {
+        if (currentGraph.constructor.name !== 'Subgraph') {
           throw new Error(
             'Not in a subgraph - this method only works inside subgraphs'
           )
@@ -88,7 +88,7 @@ export class SubgraphHelper {
 
             if (node.onPointerDown) {
               node.onPointerDown(
-                event as Partial<CanvasPointerEvent> as CanvasPointerEvent,
+                event as unknown as CanvasPointerEvent,
                 app.canvas.pointer,
                 app.canvas.linkConnector
               )
@@ -121,7 +121,7 @@ export class SubgraphHelper {
 
           if (node.onPointerDown) {
             node.onPointerDown(
-              event as Partial<CanvasPointerEvent> as CanvasPointerEvent,
+              event as unknown as CanvasPointerEvent,
               app.canvas.pointer,
               app.canvas.linkConnector
             )
@@ -129,7 +129,7 @@ export class SubgraphHelper {
             // Trigger double-click
             if (app.canvas.pointer.onDoubleClick) {
               app.canvas.pointer.onDoubleClick(
-                event as Partial<CanvasPointerEvent> as CanvasPointerEvent
+                event as unknown as CanvasPointerEvent
               )
             }
           }

browser_tests/fixtures/selectors.ts

@@ -27,7 +27,6 @@ export const TestIds = {
     settingsContainer: 'settings-container',
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
-    missingNodes: 'missing-nodes-warning',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section'
   },
@@ -44,21 +43,11 @@ export const TestIds = {
   node: {
     titleInput: 'node-title-input'
   },
-  selectionToolbox: {
-    colorPickerButton: 'color-picker-button',
-    colorPickerCurrentColor: 'color-picker-current-color',
-    colorBlue: 'blue',
-    colorRed: 'red'
-  },
   widgets: {
     decrement: 'decrement',
     increment: 'increment',
-    domWidgetTextarea: 'dom-widget-textarea',
     subgraphEnterButton: 'subgraph-enter-button'
   },
-  breadcrumb: {
-    subgraph: 'subgraph-breadcrumb'
-  },
   templates: {
     content: 'template-workflows-content',
     workflowCard: (id: string) => `template-workflow-${id}`
@@ -80,9 +69,7 @@ export type TestIdValue =
   | (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
   | (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
   | (typeof TestIds.node)[keyof typeof TestIds.node]
-  | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
-  | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<
       (typeof TestIds.templates)[keyof typeof TestIds.templates],
       (id: string) => string

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -128,8 +128,7 @@ class NodeSlotReference {
             nodeSize: [node.size[0], node.size[1]],
             rawConnectionPos: [rawPos[0], rawPos[1]],
             convertedPos: [convertedPos[0], convertedPos[1]],
-            currentGraphType:
-              'inputNode' in window.app!.canvas.graph! ? 'Subgraph' : 'LGraph'
+            currentGraphType: window.app!.canvas.graph!.constructor.name
           }
         )
 
@@ -462,44 +461,18 @@ export class NodeReference {
     // Try multiple positions to avoid DOM widget interference
     const clickPositions = [
       { x: nodePos.x + nodeSize.width / 2, y: nodePos.y + titleHeight + 5 },
-      {
-        x: nodePos.x + nodeSize.width / 2,
-        y: nodePos.y + nodeSize.height / 2
-      },
+      { x: nodePos.x + nodeSize.width / 2, y: nodePos.y + nodeSize.height / 2 },
       { x: nodePos.x + 20, y: nodePos.y + titleHeight + 5 }
     ]
 
-    // Click the enter_subgraph title button (top-right of title bar).
-    // This is more reliable than dblclick on the node body because
-    // promoted DOM widgets can overlay the body and intercept events.
-    const subgraphButtonPos = {
-      x: nodePos.x + nodeSize.width - 15,
-      y: nodePos.y - titleHeight / 2
-    }
-
     const checkIsInSubgraph = async () => {
       return this.comfyPage.page.evaluate(() => {
         const graph = window.app!.canvas.graph
-        return !!graph && 'inputNode' in graph
+        return graph?.constructor?.name === 'Subgraph'
       })
     }
 
     await expect(async () => {
-      // Try just clicking the enter button first
-      await this.comfyPage.canvas.click({
-        position: { x: 250, y: 250 },
-        force: true
-      })
-      await this.comfyPage.nextFrame()
-
-      await this.comfyPage.canvas.click({
-        position: subgraphButtonPos,
-        force: true
-      })
-      await this.comfyPage.nextFrame()
-
-      if (await checkIsInSubgraph()) return
-
       for (const position of clickPositions) {
         // Clear any selection first
         await this.comfyPage.canvas.click({

browser_tests/fixtures/ws.ts

@@ -1,5 +1,9 @@
 import { test as base } from '@playwright/test'
 
+interface TestWindow extends Window {
+  __ws__?: Record<string, WebSocket>
+}
+
 export const webSocketFixture = base.extend<{
   ws: { trigger(data: unknown, url?: string): Promise<void> }
 }>({

browser_tests/helpers/promotedWidgets.ts

@@ -1,64 +0,0 @@
-import type { ComfyPage } from '../fixtures/ComfyPage'
-
-export type PromotedWidgetEntry = [string, string]
-
-export function isPromotedWidgetEntry(
-  entry: unknown
-): entry is PromotedWidgetEntry {
-  return (
-    Array.isArray(entry) &&
-    entry.length === 2 &&
-    typeof entry[0] === 'string' &&
-    typeof entry[1] === 'string'
-  )
-}
-
-export function normalizePromotedWidgets(
-  value: unknown
-): PromotedWidgetEntry[] {
-  if (!Array.isArray(value)) return []
-  return value.filter(isPromotedWidgetEntry)
-}
-
-export async function getPromotedWidgets(
-  comfyPage: ComfyPage,
-  nodeId: string
-): Promise<PromotedWidgetEntry[]> {
-  const raw = await comfyPage.page.evaluate((id) => {
-    const node = window.app!.canvas.graph!.getNodeById(id)
-    return node?.properties?.proxyWidgets ?? []
-  }, nodeId)
-
-  return normalizePromotedWidgets(raw)
-}
-
-export async function getPromotedWidgetNames(
-  comfyPage: ComfyPage,
-  nodeId: string
-): Promise<string[]> {
-  const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
-  return promotedWidgets.map(([, widgetName]) => widgetName)
-}
-
-export async function getPromotedWidgetCount(
-  comfyPage: ComfyPage,
-  nodeId: string
-): Promise<number> {
-  const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
-  return promotedWidgets.length
-}
-
-export async function getPromotedWidgetCountByName(
-  comfyPage: ComfyPage,
-  nodeId: string,
-  widgetName: string
-): Promise<number> {
-  return comfyPage.page.evaluate(
-    ([id, name]) => {
-      const node = window.app!.canvas.graph!.getNodeById(id)
-      const widgets = node?.widgets ?? []
-      return widgets.filter((widget) => widget.name === name).length
-    },
-    [nodeId, widgetName] as const
-  )
-}

browser_tests/tests/bottomPanelShortcuts.spec.ts

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

browser_tests/tests/browserTabTitle.spec.ts

@@ -14,9 +14,7 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
         return (window.app!.extensionManager as WorkspaceStore).workflow
           .activeWorkflow?.filename
       })
-      await expect
-        .poll(() => comfyPage.page.title())
-        .toBe(`*${workflowName} - ComfyUI`)
+      expect(await comfyPage.page.title()).toBe(`*${workflowName} - ComfyUI`)
     })
 
     // Failing on CI
@@ -53,7 +51,7 @@ test.describe('Browser tab title', { tag: '@smoke' }, () => {
     })
 
     test('Can display default title', async ({ comfyPage }) => {
-      await expect.poll(() => comfyPage.page.title()).toBe('ComfyUI')
+      expect(await comfyPage.page.title()).toBe('ComfyUI')
     })
   })
 })

browser_tests/tests/changeTracker.spec.ts

@@ -160,12 +160,12 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
     })
     // Click empty space to trigger a change detection.
     await comfyPage.canvasOps.clickEmptySpace()
-    await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(1)
+    expect(await comfyPage.workflow.getUndoQueueSize()).toBe(1)
   })
 
   test('Ignores changes in workflow.ds', async ({ comfyPage }) => {
     expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
     await comfyPage.canvasOps.pan({ x: 10, y: 10 })
-    await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
+    expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
   })
 })

browser_tests/tests/colorPalette.spec.ts

@@ -244,19 +244,24 @@ test.describe(
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.5)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
       await comfyPage.nextFrame()
-      const parsed = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.graph!
-        if (typeof graph.serialize !== 'function') {
-          throw new Error('app.graph.serialize is not available')
-        }
-        return graph.serialize() as {
-          nodes: Array<{ bgcolor?: string; color?: string }>
-        }
-      })
+      const parsed = await (
+        await comfyPage.page.waitForFunction(
+          () => {
+            const workflow = localStorage.getItem('workflow')
+            if (!workflow) return null
+            try {
+              const data = JSON.parse(workflow)
+              return Array.isArray(data?.nodes) ? data : null
+            } catch {
+              return null
+            }
+          },
+          { timeout: 3000 }
+        )
+      ).jsonValue()
       expect(parsed.nodes).toBeDefined()
       expect(Array.isArray(parsed.nodes)).toBe(true)
-      const nodes = parsed.nodes
-      for (const node of nodes) {
+      for (const node of parsed.nodes) {
         if (node.bgcolor) expect(node.bgcolor).not.toMatch(/hsla/)
         if (node.color) expect(node.color).not.toMatch(/hsla/)
       }

browser_tests/tests/confirmDialogTextWrap.spec.ts

@@ -1,32 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Confirm dialog text wrapping', { tag: ['@mobile'] }, () => {
-  test('@mobile confirm dialog buttons are visible with long unbreakable text', async ({
-    comfyPage
-  }) => {
-    const longFilename = 'workflow_checkpoint_' + 'a'.repeat(200) + '.json'
-
-    await comfyPage.page.evaluate((msg) => {
-      window
-        .app!.extensionManager.dialog.confirm({
-          title: 'Confirm',
-          type: 'default',
-          message: msg
-        })
-        .catch(() => {})
-    }, longFilename)
-
-    const dialog = comfyPage.page.getByRole('dialog')
-    await expect(dialog).toBeVisible()
-
-    const confirmButton = dialog.getByRole('button', { name: 'Confirm' })
-    await expect(confirmButton).toBeVisible()
-    await expect(confirmButton).toBeInViewport()
-
-    const cancelButton = dialog.getByRole('button', { name: 'Cancel' })
-    await expect(cancelButton).toBeVisible()
-    await expect(cancelButton).toBeInViewport()
-  })
-})

browser_tests/tests/dialog.spec.ts

@@ -4,7 +4,6 @@ import { expect } from '@playwright/test'
 import type { Keybinding } from '../../src/platform/keybindings/types'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
-import { TestIds } from '../fixtures/selectors'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -16,9 +15,8 @@ test.describe('Load workflow warning', { tag: '@ui' }, () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-    const missingNodesWarning = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodes
-    )
+    // Wait for the element with the .comfy-missing-nodes selector to be visible
+    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
     await expect(missingNodesWarning).toBeVisible()
   })
 
@@ -27,9 +25,8 @@ test.describe('Load workflow warning', { tag: '@ui' }, () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
 
-    const missingNodesWarning = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodes
-    )
+    // Wait for the element with the .comfy-missing-nodes selector to be visible
+    const missingNodesWarning = comfyPage.page.locator('.comfy-missing-nodes')
     await expect(missingNodesWarning).toBeVisible()
 
     // Verify the missing node text includes subgraph context
@@ -40,15 +37,14 @@ test.describe('Load workflow warning', { tag: '@ui' }, () => {
 })
 
 test('Does not report warning on undo/redo', async ({ comfyPage }) => {
-  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
-  const missingNodesWarning = comfyPage.page.getByTestId(
-    TestIds.dialogs.missingNodes
-  )
+  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
 
   await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-  await expect(missingNodesWarning).toBeVisible()
-  await comfyPage.page.keyboard.press('Escape')
-  await expect(missingNodesWarning).not.toBeVisible()
+  await comfyPage.page
+    .locator('.p-dialog')
+    .getByRole('button', { name: 'Close' })
+    .click({ force: true })
+  await comfyPage.page.locator('.p-dialog').waitFor({ state: 'hidden' })
 
   // Wait for any async operations to complete after dialog closes
   await comfyPage.nextFrame()
@@ -59,32 +55,22 @@ test('Does not report warning on undo/redo', async ({ comfyPage }) => {
 
   // Undo and redo the change
   await comfyPage.keyboard.undo()
-  await expect(async () => {
-    await expect(missingNodesWarning).not.toBeVisible()
-  }).toPass({ timeout: 5000 })
-
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
   await comfyPage.keyboard.redo()
-  await expect(async () => {
-    await expect(missingNodesWarning).not.toBeVisible()
-  }).toPass({ timeout: 5000 })
+  await expect(comfyPage.page.locator('.comfy-missing-nodes')).not.toBeVisible()
 })
 
 test.describe('Execution error', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
   test('Should display an error message when an execution error occurs', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('nodes/execution_error')
-    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+    await comfyPage.queueButton.click()
     await comfyPage.nextFrame()
 
-    // Wait for the error overlay to be visible
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
-    await expect(errorOverlay).toBeVisible()
+    // Wait for the element with the .comfy-execution-error selector to be visible
+    const executionError = comfyPage.page.locator('.comfy-error-report')
+    await expect(executionError).toBeVisible()
   })
 })
 
@@ -104,13 +90,15 @@ test.describe('Missing models warning', () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
 
-    const downloadAllButton = comfyPage.page.getByText('Download all')
-    await expect(downloadAllButton).toBeVisible()
+    const downloadButton = missingModelsWarning.getByText('Download')
+    await expect(downloadButton).toBeVisible()
+
+    // Check that the copy URL button is also visible for Desktop environment
+    const copyUrlButton = missingModelsWarning.getByText('Copy URL')
+    await expect(copyUrlButton).toBeVisible()
   })
 
   test('Should display a warning when missing models are found in node properties', async ({
@@ -121,13 +109,15 @@ test.describe('Missing models warning', () => {
       'missing/missing_models_from_node_properties'
     )
 
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
 
-    const downloadAllButton = comfyPage.page.getByText('Download all')
-    await expect(downloadAllButton).toBeVisible()
+    const downloadButton = missingModelsWarning.getByText('Download')
+    await expect(downloadButton).toBeVisible()
+
+    // Check that the copy URL button is also visible for Desktop environment
+    const copyUrlButton = missingModelsWarning.getByText('Copy URL')
+    await expect(copyUrlButton).toBeVisible()
   })
 
   test('Should not display a warning when no missing models are found', async ({
@@ -168,10 +158,8 @@ test.describe('Missing models warning', () => {
 
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).not.toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).not.toBeVisible()
   })
 
   test('Should not display warning when model metadata exists but widget values have changed', async ({
@@ -184,10 +172,8 @@ test.describe('Missing models warning', () => {
     )
 
     // The missing models warning should NOT appear
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).not.toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).not.toBeVisible()
   })
 
   // Flaky test after parallelization
@@ -199,15 +185,13 @@ test.describe('Missing models warning', () => {
     // https://github.com/Comfy-Org/ComfyUI_devtools/blob/main/__init__.py
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
 
-    const downloadAllButton = comfyPage.page.getByText('Download all')
-    await expect(downloadAllButton).toBeVisible()
+    const downloadButton = comfyPage.page.getByText('Download')
+    await expect(downloadButton).toBeVisible()
     const downloadPromise = comfyPage.page.waitForEvent('download')
-    await downloadAllButton.click()
+    await downloadButton.click()
 
     const download = await downloadPromise
     expect(download.suggestedFilename()).toBe('fake_model.safetensors')
@@ -231,13 +215,12 @@ test.describe('Missing models warning', () => {
     test('Should disable warning dialog when checkbox is checked', async ({
       comfyPage
     }) => {
+      await checkbox.click()
       const changeSettingPromise = comfyPage.page.waitForRequest(
         '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
       )
-      await checkbox.click()
-      await changeSettingPromise
-
       await closeButton.click()
+      await changeSettingPromise
 
       const settingValue = await comfyPage.settings.getSetting(
         'Comfy.Workflow.ShowMissingModelsWarning'
@@ -261,13 +244,9 @@ test.describe('Missing models warning', () => {
 test.describe('Settings', () => {
   test('@mobile Should be visible on mobile', async ({ comfyPage }) => {
     await comfyPage.page.keyboard.press('Control+,')
-    const settingsDialog = comfyPage.page.locator(
-      '[data-testid="settings-dialog"]'
-    )
-    await expect(settingsDialog).toBeVisible()
-    const contentArea = settingsDialog.locator('main')
-    await expect(contentArea).toBeVisible()
-    const isUsableHeight = await contentArea.evaluate(
+    const settingsContent = comfyPage.page.locator('.settings-content')
+    await expect(settingsContent).toBeVisible()
+    const isUsableHeight = await settingsContent.evaluate(
       (el) => el.clientHeight > 30
     )
     expect(isUsableHeight).toBeTruthy()
@@ -277,9 +256,7 @@ test.describe('Settings', () => {
     await comfyPage.page.keyboard.down('ControlOrMeta')
     await comfyPage.page.keyboard.press(',')
     await comfyPage.page.keyboard.up('ControlOrMeta')
-    const settingsLocator = comfyPage.page.locator(
-      '[data-testid="settings-dialog"]'
-    )
+    const settingsLocator = comfyPage.page.locator('.settings-container')
     await expect(settingsLocator).toBeVisible()
     await comfyPage.page.keyboard.press('Escape')
     await expect(settingsLocator).not.toBeVisible()
@@ -298,15 +275,10 @@ test.describe('Settings', () => {
   test('Should persist keybinding setting', async ({ comfyPage }) => {
     // Open the settings dialog
     await comfyPage.page.keyboard.press('Control+,')
-    await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]')
+    await comfyPage.page.waitForSelector('.settings-container')
 
     // Open the keybinding tab
-    const settingsDialog = comfyPage.page.locator(
-      '[data-testid="settings-dialog"]'
-    )
-    await settingsDialog
-      .locator('nav [role="button"]', { hasText: 'Keybinding' })
-      .click()
+    await comfyPage.page.getByLabel('Keybinding').click()
     await comfyPage.page.waitForSelector(
       '[placeholder="Search Keybindings..."]'
     )
@@ -357,23 +329,17 @@ test.describe('Support', () => {
     comfyPage
   }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-    // Prevent loading the external page
-    await comfyPage.page
-      .context()
-      .route('https://support.comfy.org/**', (route) =>
-        route.fulfill({ body: '<html></html>', contentType: 'text/html' })
-      )
-
-    const popupPromise = comfyPage.page.waitForEvent('popup')
+    const pagePromise = comfyPage.page.context().waitForEvent('page')
     await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Support'])
-    const popup = await popupPromise
+    const newPage = await pagePromise
 
-    const url = new URL(popup.url())
-    expect(url.hostname).toBe('support.comfy.org')
+    await newPage.waitForLoadState('networkidle')
+    await expect(newPage).toHaveURL(/.*support\.comfy\.org.*/)
+
+    const url = new URL(newPage.url())
     expect(url.searchParams.get('tf_42243568391700')).toBe('oss')
 
-    await popup.close()
+    await newPage.close()
   })
 })
 
@@ -413,7 +379,7 @@ test.describe('Signin dialog', () => {
   test('Paste content to signin dialog should not paste node on canvas', async ({
     comfyPage
   }) => {
-    const nodeNum = await comfyPage.nodeOps.getNodeCount()
+    const nodeNum = (await comfyPage.nodeOps.getNodes()).length
     await comfyPage.canvas.click({
       position: DefaultGraphPositions.emptyLatentWidgetClick
     })
@@ -436,6 +402,6 @@ test.describe('Signin dialog', () => {
     await input.press('Control+v')
     await expect(input).toHaveValue('test_password')
 
-    expect(await comfyPage.nodeOps.getNodeCount()).toBe(nodeNum)
+    expect(await comfyPage.nodeOps.getNodes()).toHaveLength(nodeNum)
   })
 })

browser_tests/tests/execution.spec.ts

@@ -7,29 +7,22 @@ test.beforeEach(async ({ comfyPage }) => {
 })
 
 test.describe('Execution', { tag: ['@smoke', '@workflow'] }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.setup()
-  })
-
   test(
     'Report error on unconnected slot',
     { tag: '@screenshot' },
     async ({ comfyPage }) => {
       await comfyPage.canvasOps.disconnectEdge()
-      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.canvasOps.clickEmptySpace()
 
       await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-      await expect(
-        comfyPage.page.locator('[data-testid="error-overlay"]')
-      ).toBeVisible()
+      await expect(comfyPage.page.locator('.comfy-error-report')).toBeVisible()
       await comfyPage.page
-        .locator('[data-testid="error-overlay"]')
-        .getByRole('button', { name: 'Dismiss' })
+        .locator('.p-dialog')
+        .getByRole('button', { name: 'Close' })
         .click()
-      await comfyPage.page
-        .locator('[data-testid="error-overlay"]')
-        .waitFor({ state: 'hidden' })
+      await comfyPage.page.locator('.comfy-error-report').waitFor({
+        state: 'hidden'
+      })
       await expect(comfyPage.canvas).toHaveScreenshot(
         'execution-error-unconnected-slot.png'
       )

browser_tests/tests/featureFlags.spec.ts

@@ -37,9 +37,12 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
 
       // Monitor for server feature flags
       const checkInterval = setInterval(() => {
-        const flags = window.app?.api?.serverFeatureFlags?.value
-        if (flags && Object.keys(flags).length > 0) {
-          window.__capturedMessages!.serverFeatureFlags = flags
+        if (
+          window.app?.api?.serverFeatureFlags &&
+          Object.keys(window.app.api.serverFeatureFlags).length > 0
+        ) {
+          window.__capturedMessages!.serverFeatureFlags =
+            window.app.api.serverFeatureFlags
           clearInterval(checkInterval)
         }
       }, 100)
@@ -93,7 +96,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
   }) => {
     // Get the actual server feature flags from the backend
     const serverFlags = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverFeatureFlags.value
+      return window.app!.api.serverFeatureFlags
     })
 
     // Verify we received real feature flags from the backend
@@ -126,8 +129,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     // Test that the method only returns true for boolean true values
     const testResults = await comfyPage.page.evaluate(() => {
       // Temporarily modify serverFeatureFlags to test behavior
-      const original = window.app!.api.serverFeatureFlags.value
-      window.app!.api.serverFeatureFlags.value = {
+      const original = window.app!.api.serverFeatureFlags
+      window.app!.api.serverFeatureFlags = {
         bool_true: true,
         bool_false: false,
         string_value: 'yes',
@@ -144,7 +147,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       }
 
       // Restore original
-      window.app!.api.serverFeatureFlags.value = original
+      window.app!.api.serverFeatureFlags = original
       return results
     })
 
@@ -279,8 +282,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       // Monitor when feature flags arrive by checking periodically
       const checkFeatureFlags = setInterval(() => {
         if (
-          window.app?.api?.serverFeatureFlags?.value
-            ?.supports_preview_metadata !== undefined
+          window.app?.api?.serverFeatureFlags?.supports_preview_metadata !==
+          undefined
         ) {
           window.__appReadiness!.featureFlagsReceived = true
           clearInterval(checkFeatureFlags)
@@ -317,8 +320,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     // Wait for feature flags to be received
     await newPage.waitForFunction(
       () =>
-        window.app?.api?.serverFeatureFlags?.value
-          ?.supports_preview_metadata !== undefined,
+        window.app?.api?.serverFeatureFlags?.supports_preview_metadata !==
+        undefined,
       {
         timeout: 10000
       }
@@ -328,7 +331,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     const readiness = await newPage.evaluate(() => {
       return {
         ...window.__appReadiness,
-        currentFlags: window.app!.api.serverFeatureFlags.value
+        currentFlags: window.app!.api.serverFeatureFlags
       }
     })
 

browser_tests/tests/groupNode.spec.ts

@@ -10,8 +10,6 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-  await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
-  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
 })
 
 test.describe('Group Node', { tag: '@node' }, () => {

browser_tests/tests/interaction.spec.ts

@@ -13,9 +13,6 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-  // Wait for the legacy menu to appear and canvas to settle after layout shift.
-  await comfyPage.page.locator('.comfy-menu').waitFor({ state: 'visible' })
-  await comfyPage.nextFrame()
 })
 
 test.describe('Item Interaction', { tag: ['@screenshot', '@node'] }, () => {
@@ -736,25 +733,6 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
     )
-    // Wait for V2 persistence debounce to save the modified workflow
-    const start = Date.now()
-    await comfyPage.page.waitForFunction((since) => {
-      for (let i = 0; i < window.localStorage.length; i++) {
-        const key = window.localStorage.key(i)
-        if (!key?.startsWith('Comfy.Workflow.DraftIndex.v2:')) continue
-        const json = window.localStorage.getItem(key)
-        if (!json) continue
-        try {
-          const index = JSON.parse(json)
-          if (typeof index.updatedAt === 'number' && index.updatedAt >= since) {
-            return true
-          }
-        } catch {
-          // ignore
-        }
-      }
-      return false
-    }, start)
     await comfyPage.setup({ clearStorage: false })
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
@@ -777,17 +755,10 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
       await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
       await comfyPage.menu.topbar.saveWorkflow(workflowB)
 
-      // Wait for sessionStorage to persist the workflow paths before reloading
-      // V2 persistence uses sessionStorage with client-scoped keys
-      await comfyPage.page.waitForFunction(() => {
-        for (let i = 0; i < window.sessionStorage.length; i++) {
-          const key = window.sessionStorage.key(i)
-          if (key?.startsWith('Comfy.Workflow.OpenPaths:')) {
-            return true
-          }
-        }
-        return false
-      })
+      // Wait for localStorage to persist the workflow paths before reloading
+      await comfyPage.page.waitForFunction(
+        () => !!window.localStorage.getItem('Comfy.OpenWorkflowsPaths')
+      )
       await comfyPage.setup({ clearStorage: false })
     })
 

browser_tests/tests/menu.spec.ts

@@ -203,19 +203,19 @@ test.describe('Menu', { tag: '@ui' }, () => {
       await topbar.switchTheme('light')
 
       // Verify menu stays open and Light theme shows as active
-      await expect(async () => {
-        await expect(menu).toBeVisible()
-        await expect(themeSubmenu).toBeVisible()
-        expect(await topbar.isMenuItemActive(lightThemeItem)).toBe(true)
-      }).toPass({ timeout: 5000 })
+      await expect(menu).toBeVisible()
+      await expect(themeSubmenu).toBeVisible()
+
+      // Check that Light theme is active
+      expect(await topbar.isMenuItemActive(lightThemeItem)).toBe(true)
 
       // Screenshot with light theme active
       await comfyPage.attachScreenshot('theme-menu-light-active')
 
       // Verify ColorPalette setting is set to "light"
-      await expect
-        .poll(() => comfyPage.settings.getSetting('Comfy.ColorPalette'))
-        .toBe('light')
+      expect(await comfyPage.settings.getSetting('Comfy.ColorPalette')).toBe(
+        'light'
+      )
 
       // Close menu to see theme change
       await topbar.closeTopbarMenu()
@@ -228,22 +228,20 @@ test.describe('Menu', { tag: '@ui' }, () => {
       await topbar.switchTheme('dark')
 
       // Verify menu stays open and Dark theme shows as active
-      await expect(async () => {
-        await expect(menu).toBeVisible()
-        await expect(themeItems2.submenu).toBeVisible()
-        expect(await topbar.isMenuItemActive(themeItems2.darkTheme)).toBe(true)
-        expect(await topbar.isMenuItemActive(themeItems2.lightTheme)).toBe(
-          false
-        )
-      }).toPass({ timeout: 5000 })
+      await expect(menu).toBeVisible()
+      await expect(themeItems2.submenu).toBeVisible()
+
+      // Check that Dark theme is active and Light theme is not
+      expect(await topbar.isMenuItemActive(themeItems2.darkTheme)).toBe(true)
+      expect(await topbar.isMenuItemActive(themeItems2.lightTheme)).toBe(false)
 
       // Screenshot with dark theme active
       await comfyPage.attachScreenshot('theme-menu-dark-active')
 
       // Verify ColorPalette setting is set to "dark"
-      await expect
-        .poll(() => comfyPage.settings.getSetting('Comfy.ColorPalette'))
-        .toBe('dark')
+      expect(await comfyPage.settings.getSetting('Comfy.ColorPalette')).toBe(
+        'dark'
+      )
 
       // Close menu
       await topbar.closeTopbarMenu()

browser_tests/tests/nodeHelp.spec.ts

@@ -27,7 +27,6 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setup()
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
   })
 
   test.describe('Selection Toolbox', () => {

browser_tests/tests/nodeSearchBox.spec.ts

@@ -18,10 +18,7 @@ test.describe('Node search box', { tag: '@node' }, () => {
       'Comfy.LinkRelease.ActionShift',
       'search box'
     )
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
   })
 
   test(`Can trigger on empty canvas double click`, async ({ comfyPage }) => {
@@ -48,10 +45,7 @@ test.describe('Node search box', { tag: '@node' }, () => {
     await comfyPage.setup({ clearStorage: true })
     // Simulate new user with 1.24.1+ installed version
     await comfyPage.settings.setSetting('Comfy.InstalledVersion', '1.24.1')
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
     // Don't set LinkRelease settings explicitly to test versioned defaults
 
     await comfyPage.canvasOps.disconnectEdge()
@@ -221,14 +215,6 @@ test.describe('Node search box', { tag: '@node' }, () => {
       await expectFilterChips(comfyPage, ['MODEL', 'CLIP'])
     })
 
-    test('Does not add duplicate filter with same type and value', async ({
-      comfyPage
-    }) => {
-      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
-      await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
-      await expectFilterChips(comfyPage, ['MODEL'])
-    })
-
     test('Can remove filter', async ({ comfyPage }) => {
       await comfyPage.searchBox.addFilter('MODEL', 'Input Type')
       await comfyPage.searchBox.removeFilter(0)
@@ -291,10 +277,7 @@ test.describe('Release context menu', { tag: '@node' }, () => {
       'Comfy.LinkRelease.ActionShift',
       'search box'
     )
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
   })
 
   test(
@@ -338,10 +321,7 @@ test.describe('Release context menu', { tag: '@node' }, () => {
     await comfyPage.setup({ clearStorage: true })
     // Simulate existing user with pre-1.24.1 version
     await comfyPage.settings.setSetting('Comfy.InstalledVersion', '1.23.0')
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
     // Don't set LinkRelease settings explicitly to test versioned defaults
 
     await comfyPage.canvasOps.disconnectEdge()
@@ -362,10 +342,7 @@ test.describe('Release context menu', { tag: '@node' }, () => {
       'Comfy.LinkRelease.Action',
       'context menu'
     )
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
 
     await comfyPage.canvasOps.disconnectEdge()
     // Context menu should appear due to explicit setting, not search box

browser_tests/tests/nodeSearchBoxV2.spec.ts

@@ -1,149 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../fixtures/ComfyPage'
-
-test.describe('Node search box V2', { tag: '@node' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
-    await comfyPage.settings.setSetting(
-      'Comfy.LinkRelease.Action',
-      'search box'
-    )
-    await comfyPage.settings.setSetting(
-      'Comfy.LinkRelease.ActionShift',
-      'search box'
-    )
-    await comfyPage.searchBoxV2.reload(comfyPage)
-  })
-
-  test('Can open search and add node', async ({ comfyPage }) => {
-    const { searchBoxV2 } = comfyPage
-    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-
-    await searchBoxV2.input.fill('KSampler')
-    await expect(searchBoxV2.results.first()).toBeVisible()
-
-    await comfyPage.page.keyboard.press('Enter')
-    await expect(searchBoxV2.input).not.toBeVisible()
-
-    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(newCount).toBe(initialCount + 1)
-  })
-
-  test('Can add first default result with Enter', async ({ comfyPage }) => {
-    const { searchBoxV2 } = comfyPage
-    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-
-    await comfyPage.canvasOps.doubleClick()
-    await expect(searchBoxV2.input).toBeVisible()
-
-    // Default results should be visible without typing
-    await expect(searchBoxV2.results.first()).toBeVisible()
-
-    // Enter should add the first (selected) result
-    await comfyPage.page.keyboard.press('Enter')
-    await expect(searchBoxV2.input).not.toBeVisible()
-
-    const newCount = await comfyPage.nodeOps.getGraphNodesCount()
-    expect(newCount).toBe(initialCount + 1)
-  })
-
-  test.describe('Category navigation', () => {
-    test('Favorites shows only bookmarked nodes', async ({ comfyPage }) => {
-      const { searchBoxV2 } = comfyPage
-      await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [
-        'KSampler'
-      ])
-      await searchBoxV2.reload(comfyPage)
-
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
-      await searchBoxV2.categoryButton('favorites').click()
-
-      await expect(searchBoxV2.results).toHaveCount(1)
-      await expect(searchBoxV2.results.first()).toContainText('KSampler')
-    })
-
-    test('Category filters results to matching nodes', async ({
-      comfyPage
-    }) => {
-      const { searchBoxV2 } = comfyPage
-
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
-      await searchBoxV2.categoryButton('sampling').click()
-
-      await expect(searchBoxV2.results.first()).toBeVisible()
-      const count = await searchBoxV2.results.count()
-      expect(count).toBeGreaterThan(0)
-    })
-  })
-
-  test.describe('Filter workflow', () => {
-    test('Can filter by input type via filter bar', async ({ comfyPage }) => {
-      const { searchBoxV2 } = comfyPage
-
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
-      // Click "Input" filter chip in the filter bar
-      await searchBoxV2.filterBarButton('Input').click()
-
-      // Filter options should appear
-      await expect(searchBoxV2.filterOptions.first()).toBeVisible()
-
-      // Type to narrow and select MODEL
-      await searchBoxV2.input.fill('MODEL')
-      await searchBoxV2.filterOptions
-        .filter({ hasText: 'MODEL' })
-        .first()
-        .click()
-
-      // Filter chip should appear and results should be filtered
-      await expect(
-        searchBoxV2.dialog.getByText('Input:', { exact: false }).locator('..')
-      ).toContainText('MODEL')
-      await expect(searchBoxV2.results.first()).toBeVisible()
-    })
-  })
-
-  test.describe('Keyboard navigation', () => {
-    test('Can navigate and select with keyboard', async ({ comfyPage }) => {
-      const { searchBoxV2 } = comfyPage
-      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-
-      await comfyPage.canvasOps.doubleClick()
-      await expect(searchBoxV2.input).toBeVisible()
-
-      await searchBoxV2.input.fill('KSampler')
-      const results = searchBoxV2.results
-      await expect(results.first()).toBeVisible()
-
-      // First result selected by default
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
-
-      // ArrowDown moves selection
-      await comfyPage.page.keyboard.press('ArrowDown')
-      await expect(results.nth(1)).toHaveAttribute('aria-selected', 'true')
-      await expect(results.first()).toHaveAttribute('aria-selected', 'false')
-
-      // ArrowUp moves back
-      await comfyPage.page.keyboard.press('ArrowUp')
-      await expect(results.first()).toHaveAttribute('aria-selected', 'true')
-
-      // Enter selects and adds node
-      await comfyPage.page.keyboard.press('Enter')
-      await expect(searchBoxV2.input).not.toBeVisible()
-
-      const newCount = await comfyPage.nodeOps.getGraphNodesCount()
-      expect(newCount).toBe(initialCount + 1)
-    })
-  })
-})

browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts

@@ -5,7 +5,6 @@ import { TestIds } from '../../fixtures/selectors'
 
 test.describe('Properties panel position', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     // Open a sidebar tab to ensure sidebar is visible
     await comfyPage.menu.nodeLibraryTab.open()
     await comfyPage.actionbar.propertiesButton.click()

browser_tests/tests/recordAudio.spec.ts

@@ -4,7 +4,6 @@ import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-  await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
 })
 
 test.describe('Record Audio Node', { tag: '@screenshot' }, () => {

browser_tests/tests/remoteWidgets.spec.ts

@@ -53,11 +53,6 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
   })
 
   test.describe('Loading options', () => {

browser_tests/tests/saveImageAndWebp.spec.ts

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

browser_tests/tests/selectionToolbox.spec.ts

@@ -1,8 +1,6 @@
 import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
 
 import { comfyPageFixture } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
 
 const test = comfyPageFixture
 
@@ -12,17 +10,6 @@ test.beforeEach(async ({ comfyPage }) => {
 const BLUE_COLOR = 'rgb(51, 51, 85)'
 const RED_COLOR = 'rgb(85, 51, 51)'
 
-const getColorPickerButton = (comfyPage: { page: Page }) =>
-  comfyPage.page.getByTestId(TestIds.selectionToolbox.colorPickerButton)
-
-const getColorPickerCurrentColor = (comfyPage: { page: Page }) =>
-  comfyPage.page.getByTestId(TestIds.selectionToolbox.colorPickerCurrentColor)
-
-const getColorPickerGroup = (comfyPage: { page: Page }) =>
-  comfyPage.page.getByRole('group').filter({
-    has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
-  })
-
 test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
@@ -145,24 +132,28 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Color picker button should be visible
-      const colorPickerButton = getColorPickerButton(comfyPage)
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
       await expect(colorPickerButton).toBeVisible()
 
       // Click color picker button
       await colorPickerButton.click()
 
       // Color picker dropdown should be visible
-      const colorPickerGroup = getColorPickerGroup(comfyPage)
-      await expect(colorPickerGroup).toBeVisible()
+      const colorPickerDropdown = comfyPage.page.locator(
+        '.color-picker-container'
+      )
+      await expect(colorPickerDropdown).toBeVisible()
 
       // Select a color (e.g., blue)
-      const blueColorOption = colorPickerGroup.getByTestId(
-        TestIds.selectionToolbox.colorBlue
+      const blueColorOption = colorPickerDropdown.locator(
+        'i[data-testid="blue"]'
       )
       await blueColorOption.click()
 
       // Dropdown should close after selection
-      await expect(colorPickerGroup).not.toBeVisible()
+      await expect(colorPickerDropdown).not.toBeVisible()
 
       // Node should have the selected color class/style
       // Note: Exact verification method depends on how color is applied to nodes
@@ -181,21 +172,22 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
         'CLIP Text Encode (Prompt)'
       ])
 
-      const colorPickerButton = getColorPickerButton(comfyPage)
-      const colorPickerCurrentColor = getColorPickerCurrentColor(comfyPage)
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
 
       // Initially should show default color
       await expect(colorPickerButton).not.toHaveAttribute('color')
 
       // Click color picker and select a color
       await colorPickerButton.click()
-      const redColorOption = getColorPickerGroup(comfyPage).getByTestId(
-        TestIds.selectionToolbox.colorRed
+      const redColorOption = comfyPage.page.locator(
+        '.color-picker-container i[data-testid="red"]'
       )
       await redColorOption.click()
 
       // Button should now show the selected color
-      await expect(colorPickerCurrentColor).toHaveCSS('color', RED_COLOR)
+      await expect(colorPickerButton).toHaveCSS('color', RED_COLOR)
     })
 
     test('color picker shows mixed state for differently colored selections', async ({
@@ -203,17 +195,17 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // Select first node and color it
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await getColorPickerButton(comfyPage).click()
-      await getColorPickerGroup(comfyPage)
-        .getByTestId(TestIds.selectionToolbox.colorBlue)
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
         .click()
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Select second node and color it differently
       await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
-      await getColorPickerButton(comfyPage).click()
-      await getColorPickerGroup(comfyPage)
-        .getByTestId(TestIds.selectionToolbox.colorRed)
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="red"]')
         .click()
 
       // Select both nodes
@@ -223,7 +215,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       ])
 
       // Color picker should show null/mixed state
-      const colorPickerButton = getColorPickerButton(comfyPage)
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
       await expect(colorPickerButton).not.toHaveAttribute('color')
     })
 
@@ -232,9 +226,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // First color a node
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await getColorPickerButton(comfyPage).click()
-      await getColorPickerGroup(comfyPage)
-        .getByTestId(TestIds.selectionToolbox.colorBlue)
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
         .click()
 
       // Clear selection
@@ -244,8 +238,10 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Color picker button should show the correct color
-      const colorPickerCurrentColor = getColorPickerCurrentColor(comfyPage)
-      await expect(colorPickerCurrentColor).toHaveCSS('color', BLUE_COLOR)
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
+      await expect(colorPickerButton).toHaveCSS('color', BLUE_COLOR)
     })
 
     test('colorization via color picker can be undone', async ({
@@ -253,9 +249,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // Select a node and color it
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await getColorPickerButton(comfyPage).click()
-      await getColorPickerGroup(comfyPage)
-        .getByTestId(TestIds.selectionToolbox.colorBlue)
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
         .click()
 
       // Undo the colorization

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -5,7 +5,6 @@ import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
 test.describe('Node library sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
     await comfyPage.settings.setSetting(
       'Comfy.NodeLibrary.BookmarksCustomization',

browser_tests/tests/sidebar/workflows.spec.ts

@@ -83,15 +83,17 @@ test.describe('Workflows sidebar', () => {
     const tab = comfyPage.menu.workflowsTab
     await tab.open()
     await comfyPage.command.executeCommand('Comfy.LoadDefaultWorkflow')
-    const originalNodeCount = await comfyPage.nodeOps.getNodeCount()
+    const originalNodeCount = (await comfyPage.nodeOps.getNodes()).length
 
     await tab.insertWorkflow(tab.getPersistedItem('workflow1.json'))
     await expect
-      .poll(() => comfyPage.nodeOps.getNodeCount())
+      .poll(() => comfyPage.nodeOps.getNodes().then((n) => n.length))
       .toEqual(originalNodeCount + 1)
 
     await tab.getPersistedItem('workflow1.json').click()
-    await expect.poll(() => comfyPage.nodeOps.getNodeCount()).toEqual(1)
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodes().then((n) => n.length))
+      .toEqual(1)
   })
 
   test('Can rename nested workflow from opened workflow item', async ({

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

@@ -5,6 +5,13 @@ import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 test.describe('Subgraph duplicate ID remapping', { tag: ['@subgraph'] }, () => {
   const WORKFLOW = 'subgraphs/subgraph-nested-duplicate-ids'
 
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.Graph.DeduplicateSubgraphNodeIds',
+      true
+    )
+  })
+
   test('All node IDs are globally unique after loading', async ({
     comfyPage
   }) => {

browser_tests/tests/subgraph.spec.ts

@@ -19,10 +19,6 @@ const SELECTORS = {
 test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
   })
 
   // Helper to get subgraph slot count
@@ -53,7 +49,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
   ): Promise<boolean> {
     return await comfyPage.page.evaluate(() => {
       const graph = window.app!.canvas.graph
-      return !!graph && 'inputNode' in graph
+      return graph?.constructor?.name === 'Subgraph'
     })
   }
 
@@ -65,10 +61,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await subgraphNode.navigateIntoSubgraph()
 
       const initialCount = await getSubgraphSlotCount(comfyPage, 'inputs')
-      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
-        'VAEEncode',
-        true
-      )
+      const vaeEncodeNode = await comfyPage.nodeOps.getNodeRefById('2')
 
       await comfyPage.subgraph.connectFromInput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()
@@ -84,10 +77,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
       await subgraphNode.navigateIntoSubgraph()
 
       const initialCount = await getSubgraphSlotCount(comfyPage, 'outputs')
-      const [vaeEncodeNode] = await comfyPage.nodeOps.getNodeRefsByType(
-        'VAEEncode',
-        true
-      )
+      const vaeEncodeNode = await comfyPage.nodeOps.getNodeRefById('2')
 
       await comfyPage.subgraph.connectToOutput(vaeEncodeNode, 0)
       await comfyPage.nextFrame()
@@ -375,45 +365,6 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
     })
   })
 
-  test.describe('Subgraph Unpacking', () => {
-    test('Unpacking subgraph with duplicate links does not create extra links', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-duplicate-links'
-      )
-
-      const result = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.graph!
-        const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
-        if (!subgraphNode || !subgraphNode.isSubgraphNode()) {
-          return { error: 'No subgraph node found' }
-        }
-
-        graph.unpackSubgraph(subgraphNode)
-
-        const linkCount = graph.links.size
-        const nodes = graph.nodes
-        const ksampler = nodes.find((n) => n.type === 'KSampler')
-        if (!ksampler) return { error: 'No KSampler found after unpack' }
-
-        const linkedInputCount = ksampler.inputs.filter(
-          (i) => i.link != null
-        ).length
-
-        return { linkCount, linkedInputCount, nodeCount: nodes.length }
-      })
-
-      expect(result).not.toHaveProperty('error')
-      // Should have exactly 1 link (EmptyLatentImage→KSampler)
-      // not 4 (with 3 duplicates). The KSampler→output link is dropped
-      // because the subgraph output has no downstream connection.
-      expect(result.linkCount).toBe(1)
-      // KSampler should have exactly 1 linked input (latent_image)
-      expect(result.linkedInputCount).toBe(1)
-    })
-  })
-
   test.describe('Subgraph Creation and Deletion', () => {
     test('Can create subgraph from selected nodes', async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('default')
@@ -869,7 +820,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
 
       // Open settings dialog using hotkey
       await comfyPage.page.keyboard.press('Control+,')
-      await comfyPage.page.waitForSelector('[data-testid="settings-dialog"]', {
+      await comfyPage.page.waitForSelector('.settings-container', {
         state: 'visible'
       })
 
@@ -879,7 +830,7 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
 
       // Dialog should be closed
       await expect(
-        comfyPage.page.locator('[data-testid="settings-dialog"]')
+        comfyPage.page.locator('.settings-container')
       ).not.toBeVisible()
 
       // Should still be in subgraph

browser_tests/tests/subgraphPromotion.spec.ts

@@ -1,622 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-import { fitToViewInstant } from '../helpers/fitToView'
-import {
-  getPromotedWidgetNames,
-  getPromotedWidgetCount,
-  getPromotedWidgets
-} from '../helpers/promotedWidgets'
-
-/**
- * Check whether we're currently in a subgraph.
- */
-async function isInSubgraph(comfyPage: ComfyPage): Promise<boolean> {
-  return comfyPage.page.evaluate(() => {
-    const graph = window.app!.canvas.graph
-    return !!graph && 'inputNode' in graph
-  })
-}
-
-async function exitSubgraphViaBreadcrumb(comfyPage: ComfyPage): Promise<void> {
-  const breadcrumb = comfyPage.page.getByTestId(TestIds.breadcrumb.subgraph)
-  await breadcrumb.waitFor({ state: 'visible', timeout: 5000 })
-
-  const parentLink = breadcrumb.getByRole('link').first()
-  await expect(parentLink).toBeVisible()
-  await parentLink.click()
-  await comfyPage.nextFrame()
-}
-
-test.describe(
-  'Subgraph Widget Promotion',
-  { tag: ['@subgraph', '@widget'] },
-  () => {
-    test.describe('Auto-promotion on Convert to Subgraph', () => {
-      test('Recommended widgets are auto-promoted when creating a subgraph', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('default')
-
-        // Select just the KSampler node (id 3) which has a "seed" widget
-        const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-        await ksampler.click('title')
-        const subgraphNode = await ksampler.convertToSubgraph()
-        await comfyPage.nextFrame()
-
-        // SubgraphNode should exist
-        expect(await subgraphNode.exists()).toBe(true)
-
-        // The KSampler has a "seed" widget which is in the recommended list.
-        // The promotion store should have at least the seed widget promoted.
-        const nodeId = String(subgraphNode.id)
-        const promotedNames = await getPromotedWidgetNames(comfyPage, nodeId)
-        expect(promotedNames).toContain('seed')
-
-        // SubgraphNode should have widgets (promoted views)
-        const widgetCount = await getPromotedWidgetCount(comfyPage, nodeId)
-        expect(widgetCount).toBeGreaterThan(0)
-      })
-
-      test('CLIPTextEncode text widget is auto-promoted', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('default')
-
-        // Select the positive CLIPTextEncode node (id 6)
-        const clipNode = await comfyPage.nodeOps.getNodeRefById('6')
-        await clipNode.click('title')
-        const subgraphNode = await clipNode.convertToSubgraph()
-        await comfyPage.nextFrame()
-
-        const nodeId = String(subgraphNode.id)
-        const promotedNames = await getPromotedWidgetNames(comfyPage, nodeId)
-        expect(promotedNames.length).toBeGreaterThan(0)
-
-        // CLIPTextEncode is in the recommendedNodes list, so its text widget
-        // should be promoted
-        expect(promotedNames).toContain('text')
-      })
-
-      test('SaveImage/PreviewImage nodes get pseudo-widget promoted', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('default')
-        await fitToViewInstant(comfyPage)
-
-        // Select the SaveImage node (id 9 in default workflow)
-        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        await saveNode.click('title')
-        const subgraphNode = await saveNode.convertToSubgraph()
-        await comfyPage.nextFrame()
-
-        const promotedNames = await getPromotedWidgetNames(
-          comfyPage,
-          String(subgraphNode.id)
-        )
-
-        // SaveImage is in the recommendedNodes list, so filename_prefix is promoted
-        expect(promotedNames).toContain('filename_prefix')
-      })
-    })
-
-    test.describe('Promoted Widget Visibility in LiteGraph Mode', () => {
-      test('Promoted text widget is visible on SubgraphNode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        // The subgraph node (id 11) should have a text widget promoted
-        const textarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(textarea).toBeVisible()
-        await expect(textarea).toHaveCount(1)
-      })
-
-      test('Multiple promoted widgets all render on SubgraphNode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-multiple-promoted-widgets'
-        )
-        await comfyPage.nextFrame()
-
-        const textareas = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(textareas.first()).toBeVisible()
-        const count = await textareas.count()
-        expect(count).toBeGreaterThan(1)
-      })
-    })
-
-    test.describe('Promoted Widget Visibility in Vue Mode', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      })
-
-      test('Promoted text widget renders on SubgraphNode in Vue mode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.vueNodes.waitForNodes()
-
-        // SubgraphNode (id 11) should render with its body
-        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('11')
-        await expect(subgraphVueNode).toBeVisible()
-
-        // It should have the Enter Subgraph button
-        const enterButton = subgraphVueNode.getByTestId('subgraph-enter-button')
-        await expect(enterButton).toBeVisible()
-
-        // The promoted text widget should render inside the node
-        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-11"]')
-        await expect(nodeBody).toBeVisible()
-
-        // Widgets section should exist and have at least one widget
-        const widgets = nodeBody.locator('.lg-node-widgets > div')
-        await expect(widgets.first()).toBeVisible()
-      })
-
-      test('Enter Subgraph button navigates into subgraph in Vue mode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.vueNodes.waitForNodes()
-
-        await comfyPage.vueNodes.enterSubgraph('11')
-        await comfyPage.nextFrame()
-
-        expect(await isInSubgraph(comfyPage)).toBe(true)
-      })
-
-      test('Multiple promoted widgets render on SubgraphNode in Vue mode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-multiple-promoted-widgets'
-        )
-        await comfyPage.vueNodes.waitForNodes()
-
-        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('11')
-        await expect(subgraphVueNode).toBeVisible()
-
-        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-11"]')
-        const widgets = nodeBody.locator('.lg-node-widgets > div')
-        const count = await widgets.count()
-        expect(count).toBeGreaterThan(1)
-      })
-    })
-
-    test.describe('Promoted Widget Reactivity', () => {
-      test('Value changes on promoted widget sync to interior widget', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const testContent = 'promoted-value-sync-test'
-
-        // Type into the promoted textarea on the SubgraphNode
-        const textarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await textarea.fill(testContent)
-        await comfyPage.nextFrame()
-
-        // Navigate into subgraph
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.navigateIntoSubgraph()
-
-        // Interior CLIPTextEncode textarea should have the same value
-        const interiorTextarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(interiorTextarea).toHaveValue(testContent)
-      })
-
-      test('Value changes on interior widget sync to promoted widget', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const testContent = 'interior-value-sync-test'
-
-        // Navigate into subgraph
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.navigateIntoSubgraph()
-
-        // Type into the interior CLIPTextEncode textarea
-        const interiorTextarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await interiorTextarea.fill(testContent)
-        await comfyPage.nextFrame()
-
-        // Navigate back to parent graph
-        await exitSubgraphViaBreadcrumb(comfyPage)
-
-        // Promoted textarea on SubgraphNode should have the same value
-        const promotedTextarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await expect(promotedTextarea).toHaveValue(testContent)
-      })
-
-      test('Value persists through repeated navigation', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const testContent = 'persistence-through-navigation'
-
-        // Set value on promoted widget
-        const textarea = comfyPage.page.getByTestId(
-          TestIds.widgets.domWidgetTextarea
-        )
-        await textarea.fill(testContent)
-
-        // Navigate in and out multiple times
-        for (let i = 0; i < 3; i++) {
-          const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-          await subgraphNode.navigateIntoSubgraph()
-          const interiorTextarea = comfyPage.page.getByTestId(
-            TestIds.widgets.domWidgetTextarea
-          )
-          await expect(interiorTextarea).toHaveValue(testContent)
-
-          await exitSubgraphViaBreadcrumb(comfyPage)
-
-          const promotedTextarea = comfyPage.page.getByTestId(
-            TestIds.widgets.domWidgetTextarea
-          )
-          await expect(promotedTextarea).toHaveValue(testContent)
-        }
-      })
-    })
-
-    test.describe('Manual Promote/Demote via Context Menu', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      })
-
-      test('Can promote a widget from inside a subgraph', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-        await subgraphNode.navigateIntoSubgraph()
-
-        // Get the KSampler node (id 1) inside the subgraph
-        const ksampler = await comfyPage.nodeOps.getNodeRefById('1')
-
-        // Right-click on the KSampler's "steps" widget (index 2) to promote it
-        const stepsWidget = await ksampler.getWidget(2)
-        const widgetPos = await stepsWidget.getPosition()
-        await comfyPage.canvas.click({
-          position: widgetPos,
-          button: 'right',
-          force: true
-        })
-        await comfyPage.nextFrame()
-
-        // Look for the Promote Widget menu entry
-        const promoteEntry = comfyPage.page
-          .locator('.litemenu-entry')
-          .filter({ hasText: /Promote Widget/ })
-
-        await expect(promoteEntry).toBeVisible()
-        await promoteEntry.click()
-        await comfyPage.nextFrame()
-
-        // Navigate back to parent
-        await exitSubgraphViaBreadcrumb(comfyPage)
-
-        // SubgraphNode should now have the promoted widget
-        const widgetCount = await getPromotedWidgetCount(comfyPage, '2')
-        expect(widgetCount).toBeGreaterThan(0)
-      })
-
-      test('Can un-promote a widget from inside a subgraph', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-
-        // First promote a canvas-rendered widget (KSampler "steps")
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('2')
-        await subgraphNode.navigateIntoSubgraph()
-
-        const ksampler = await comfyPage.nodeOps.getNodeRefById('1')
-        const stepsWidget = await ksampler.getWidget(2)
-        const widgetPos = await stepsWidget.getPosition()
-
-        await comfyPage.canvas.click({
-          position: widgetPos,
-          button: 'right',
-          force: true
-        })
-        await comfyPage.nextFrame()
-
-        const promoteEntry = comfyPage.page
-          .locator('.litemenu-entry')
-          .filter({ hasText: /Promote Widget/ })
-        await expect(promoteEntry).toBeVisible()
-        await promoteEntry.click()
-        await comfyPage.nextFrame()
-
-        // Navigate back and verify promotion took effect
-        await exitSubgraphViaBreadcrumb(comfyPage)
-        await fitToViewInstant(comfyPage)
-        await comfyPage.nextFrame()
-
-        const initialWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
-        expect(initialWidgetCount).toBeGreaterThan(0)
-
-        // Navigate back in and un-promote
-        const subgraphNode2 = await comfyPage.nodeOps.getNodeRefById('2')
-        await subgraphNode2.navigateIntoSubgraph()
-        const stepsWidget2 = await (
-          await comfyPage.nodeOps.getNodeRefById('1')
-        ).getWidget(2)
-        const widgetPos2 = await stepsWidget2.getPosition()
-
-        await comfyPage.canvas.click({
-          position: widgetPos2,
-          button: 'right',
-          force: true
-        })
-        await comfyPage.nextFrame()
-
-        const unpromoteEntry = comfyPage.page
-          .locator('.litemenu-entry')
-          .filter({ hasText: /Un-Promote Widget/ })
-
-        await expect(unpromoteEntry).toBeVisible()
-        await unpromoteEntry.click()
-        await comfyPage.nextFrame()
-
-        // Navigate back to parent
-        await exitSubgraphViaBreadcrumb(comfyPage)
-
-        // SubgraphNode should have fewer widgets
-        const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
-        expect(finalWidgetCount).toBeLessThan(initialWidgetCount)
-      })
-    })
-
-    test.describe('Pseudo-Widget Promotion', () => {
-      test('Promotion store tracks pseudo-widget entries for subgraph with preview node', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-preview-node'
-        )
-        await comfyPage.nextFrame()
-
-        // The SaveImage node is in the recommendedNodes list, so its
-        // filename_prefix widget should be auto-promoted
-        const promotedNames = await getPromotedWidgetNames(comfyPage, '5')
-        expect(promotedNames.length).toBeGreaterThan(0)
-        expect(promotedNames).toContain('filename_prefix')
-      })
-
-      test('Converting SaveImage to subgraph promotes its widgets', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow('default')
-        await fitToViewInstant(comfyPage)
-
-        // Select SaveImage (id 9)
-        const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
-        await saveNode.click('title')
-        const subgraphNode = await saveNode.convertToSubgraph()
-        await comfyPage.nextFrame()
-
-        // SaveImage is a recommended node, so filename_prefix should be promoted
-        const nodeId = String(subgraphNode.id)
-        const promotedNames = await getPromotedWidgetNames(comfyPage, nodeId)
-        expect(promotedNames.length).toBeGreaterThan(0)
-
-        const widgetCount = await getPromotedWidgetCount(comfyPage, nodeId)
-        expect(widgetCount).toBeGreaterThan(0)
-      })
-    })
-
-    test.describe('Legacy And Round-Trip Coverage', () => {
-      test('Legacy -1 proxyWidgets entries are hydrated to concrete interior node IDs', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-compressed-target-slot'
-        )
-        await comfyPage.nextFrame()
-
-        const promotedWidgets = await getPromotedWidgets(comfyPage, '2')
-        expect(promotedWidgets.length).toBeGreaterThan(0)
-        expect(
-          promotedWidgets.some(([interiorNodeId]) => interiorNodeId === '-1')
-        ).toBe(false)
-        expect(
-          promotedWidgets.some(
-            ([interiorNodeId, widgetName]) =>
-              interiorNodeId !== '-1' && widgetName === 'batch_size'
-          )
-        ).toBe(true)
-      })
-
-      test('Promoted widgets survive serialize -> loadGraphData round-trip', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const beforePromoted = await getPromotedWidgetNames(comfyPage, '11')
-        expect(beforePromoted).toContain('text')
-
-        const serialized = await comfyPage.page.evaluate(() => {
-          return window.app!.graph!.serialize()
-        })
-
-        await comfyPage.page.evaluate((workflow: ComfyWorkflowJSON) => {
-          return window.app!.loadGraphData(workflow)
-        }, serialized as ComfyWorkflowJSON)
-        await comfyPage.nextFrame()
-
-        const afterPromoted = await getPromotedWidgetNames(comfyPage, '11')
-        expect(afterPromoted).toContain('text')
-
-        const widgetCount = await getPromotedWidgetCount(comfyPage, '11')
-        expect(widgetCount).toBeGreaterThan(0)
-      })
-
-      test('Cloning a subgraph node keeps promoted widget entries on original and clone', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        const originalNode = await comfyPage.nodeOps.getNodeRefById('11')
-        const originalPos = await originalNode.getPosition()
-
-        await comfyPage.page.mouse.move(originalPos.x + 16, originalPos.y + 16)
-        await comfyPage.page.keyboard.down('Alt')
-        await comfyPage.page.mouse.down()
-        await comfyPage.nextFrame()
-        await comfyPage.page.mouse.move(originalPos.x + 72, originalPos.y + 72)
-        await comfyPage.page.mouse.up()
-        await comfyPage.page.keyboard.up('Alt')
-        await comfyPage.nextFrame()
-
-        const subgraphNodeIds = await comfyPage.page.evaluate(() => {
-          const graph = window.app!.canvas.graph!
-          return graph.nodes
-            .filter(
-              (n) =>
-                typeof n.isSubgraphNode === 'function' && n.isSubgraphNode()
-            )
-            .map((n) => String(n.id))
-        })
-
-        expect(subgraphNodeIds.length).toBeGreaterThan(1)
-        for (const nodeId of subgraphNodeIds) {
-          const promotedWidgets = await getPromotedWidgets(comfyPage, nodeId)
-          expect(promotedWidgets.length).toBeGreaterThan(0)
-          expect(
-            promotedWidgets.some(([, widgetName]) => widgetName === 'text')
-          ).toBe(true)
-        }
-      })
-    })
-
-    test.describe('Vue Mode - Promoted Preview Content', () => {
-      test.beforeEach(async ({ comfyPage }) => {
-        await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      })
-
-      test('SubgraphNode with preview node shows hasCustomContent area in Vue mode', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-preview-node'
-        )
-        await comfyPage.vueNodes.waitForNodes()
-
-        const subgraphVueNode = comfyPage.vueNodes.getNodeLocator('5')
-        await expect(subgraphVueNode).toBeVisible()
-
-        // The node body should exist
-        const nodeBody = subgraphVueNode.locator('[data-testid="node-body-5"]')
-        await expect(nodeBody).toBeVisible()
-      })
-    })
-
-    test.describe('Promotion Cleanup', () => {
-      test('Removing subgraph node clears promotion store entries', async ({
-        comfyPage
-      }) => {
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-        await comfyPage.nextFrame()
-
-        // Verify promotions exist
-        const namesBefore = await getPromotedWidgetNames(comfyPage, '11')
-        expect(namesBefore.length).toBeGreaterThan(0)
-
-        // Delete the subgraph node
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.click('title')
-        await comfyPage.page.keyboard.press('Delete')
-        await comfyPage.nextFrame()
-
-        // Node no longer exists, so promoted widgets should be gone
-        const nodeExists = await comfyPage.page.evaluate(() => {
-          return !!window.app!.canvas.graph!.getNodeById('11')
-        })
-        expect(nodeExists).toBe(false)
-      })
-
-      test('Removing I/O slot removes associated promoted widget', async ({
-        comfyPage
-      }) => {
-        await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-        await comfyPage.workflow.loadWorkflow(
-          'subgraphs/subgraph-with-promoted-text-widget'
-        )
-
-        const initialWidgetCount = await getPromotedWidgetCount(comfyPage, '11')
-        expect(initialWidgetCount).toBeGreaterThan(0)
-
-        // Navigate into subgraph
-        const subgraphNode = await comfyPage.nodeOps.getNodeRefById('11')
-        await subgraphNode.navigateIntoSubgraph()
-
-        // Remove the text input slot
-        await comfyPage.subgraph.rightClickInputSlot('text')
-        await comfyPage.contextMenu.clickLitegraphMenuItem('Remove Slot')
-        await comfyPage.nextFrame()
-
-        // Navigate back via breadcrumb
-        await comfyPage.page
-          .getByTestId(TestIds.breadcrumb.subgraph)
-          .waitFor({ state: 'visible', timeout: 5000 })
-        const homeBreadcrumb = comfyPage.page.getByRole('link', {
-          name: 'subgraph-with-promoted-text-widget'
-        })
-        await homeBreadcrumb.waitFor({ state: 'visible' })
-        await homeBreadcrumb.click()
-        await comfyPage.nextFrame()
-
-        // Widget count should be reduced
-        const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '11')
-        expect(finalWidgetCount).toBeLessThan(initialWidgetCount)
-      })
-    })
-  }
-)

browser_tests/tests/subgraphSearchAliases.spec.ts

@@ -54,10 +54,7 @@ async function searchAndExpectResult(
 test.describe('Subgraph Search Aliases', { tag: ['@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
+    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
   })
 
   test('Can set search aliases on subgraph and find via search', async ({

browser_tests/tests/templateFitView.spec.ts

@@ -1,56 +0,0 @@
-import { expect } from '@playwright/test'
-
-import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-/**
- * Tests that templates are automatically fitted to view when loaded.
- *
- * When openSource === 'template', fitView() is called to ensure
- * templates with saved off-screen viewport positions (extra.ds)
- * are always displayed correctly.
- */
-test.describe('Template Fit View', { tag: ['@canvas', '@workflow'] }, () => {
-  test('should automatically fit view when loading a template with off-screen saved position', async ({
-    comfyPage
-  }) => {
-    await comfyPage.settings.setSetting('Comfy.EnableWorkflowViewRestore', true)
-
-    // Serialize the current default graph, inject an extreme off-screen
-    // viewport position, then reload it as a template. Without the fix,
-    // the saved offset [-5000, -5000] would be restored and nodes would
-    // be invisible.
-    const viewportState = await comfyPage.page.evaluate(async () => {
-      const app = window.app!
-      const workflow = app.graph.serialize()
-
-      workflow.extra = {
-        ...workflow.extra,
-        ds: { scale: 1, offset: [-5000, -5000] }
-      }
-
-      await app.loadGraphData(workflow as ComfyWorkflowJSON, true, true, null, {
-        openSource: 'template'
-      })
-
-      return {
-        offsetX: app.canvas.ds.offset[0],
-        offsetY: app.canvas.ds.offset[1],
-        nodeCount: app.graph._nodes.length
-      }
-    })
-
-    expect(viewportState.nodeCount).toBeGreaterThan(0)
-
-    // fitView() should have overridden the saved [-5000, -5000] offset
-    expect(
-      viewportState.offsetX,
-      'Viewport X offset should not be the saved off-screen value'
-    ).not.toBe(-5000)
-    expect(
-      viewportState.offsetY,
-      'Viewport Y offset should not be the saved off-screen value'
-    ).not.toBe(-5000)
-  })
-})

browser_tests/tests/useSettingSearch.spec.ts

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

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -102,7 +102,6 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
     // await comfyPage.setup()
     await comfyPage.workflow.loadWorkflow('vueNodes/simple-triple')
     await comfyPage.vueNodes.waitForNodes()
@@ -929,10 +928,7 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
         'Comfy.LinkRelease.ActionShift',
         'context menu'
       )
-      await comfyPage.settings.setSetting(
-        'Comfy.NodeSearchBoxImpl',
-        'v1 (legacy)'
-      )
+      await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'default')
 
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -998,10 +994,6 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
         'Comfy.LinkRelease.ActionShift',
         'search box'
       )
-      await comfyPage.settings.setSetting(
-        'Comfy.NodeSearchBoxImpl',
-        'v1 (legacy)'
-      )
 
       const samplerNode = (
         await comfyPage.nodeOps.getNodeRefsByType('KSampler')
@@ -1056,11 +1048,6 @@ test.describe('Vue Node Link Interaction', { tag: '@screenshot' }, () => {
     comfyPage,
     comfyMouse
   }) => {
-    await comfyPage.settings.setSetting(
-      'Comfy.NodeSearchBoxImpl',
-      'v1 (legacy)'
-    )
-
     // Setup workflow with a KSampler node
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
     await comfyPage.nodeOps.waitForGraphNodes(0)