[backport core/1.40] fix: stabilize nested subgraph promoted widget resolution (#9282) (#9616)

Backport of #9282 to core/1.40. MUST — user-facing subgraph widget
resolution bug.

12 conflict files resolved:
- 8 modify/delete: new files introduced by the PR (kept as new)
- 1 add/add: resolveSubgraphInputTarget.ts (merged with existing from
#9542 backport)
- 3 content: accepted incoming changes

**Original PR:** https://github.com/Comfy-Org/ComfyUI_frontend/pull/9282
**Pipeline ticket:** 15e1f241-efaa-4fe5-88ca-4ccc7bfb3345

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: GitHub Action <action@github.com>

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

@@ -26,14 +26,6 @@ jobs:
       - 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 }}

.gitignore

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

.oxlintrc.json

@@ -35,7 +35,7 @@
       }
     ],
     "no-control-regex": "off",
-    "no-eval": "off",
+    "no-eval": "error",
     "no-redeclare": "error",
     "no-restricted-imports": [
       "error",

.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,12 +40,12 @@
     "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",

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/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

@@ -1,10 +1,7 @@
 <template>
-  <div
-    ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
-  >
-    <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
+  <div ref="rootEl" class="relative size-full overflow-hidden bg-neutral-900">
+    <div class="p-terminal size-full rounded-none p-2">
+      <div ref="terminalEl" class="terminal-host h-full" />
     </div>
     <Button
       v-tooltip.left="{
@@ -16,7 +13,7 @@
       size="small"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
-          'opacity-0 pointer-events-none select-none': !isHovered
+          'pointer-events-none opacity-0 select-none': !isHovered
         })
       "
       :aria-label="tooltipText"
@@ -101,15 +98,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

@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
+  <div class="mx-auto flex w-full max-w-3xl flex-col gap-8 select-none">
     <!-- Installation Path Section -->
-    <div class="grow flex flex-col gap-6 text-neutral-300">
-      <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+    <div class="flex grow flex-col gap-6 text-neutral-300">
+      <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
         {{ $t('install.locationPicker.title') }}
       </h2>
 
-      <p class="text-center text-neutral-400 px-12">
+      <p class="px-12 text-center text-neutral-400">
         {{ $t('install.locationPicker.subtitle') }}
       </p>
 
@@ -15,7 +15,7 @@
         <InputText
           v-model="installPath"
           :placeholder="$t('install.locationPicker.pathPlaceholder')"
-          class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
+          class="flex-1 border-neutral-700 bg-neutral-800/50 text-neutral-200 placeholder:text-neutral-500"
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validatePath"
           @focus="onFocus"
@@ -23,7 +23,7 @@
         <Button
           icon="pi pi-folder-open"
           severity="secondary"
-          class="bg-neutral-700 hover:bg-neutral-600 border-0"
+          class="border-0 bg-neutral-700 hover:bg-neutral-600"
           @click="browsePath"
         />
       </div>
@@ -33,7 +33,7 @@
         <Message
           v-if="pathError"
           severity="error"
-          class="whitespace-pre-line w-full"
+          class="w-full whitespace-pre-line"
         >
           {{ pathError }}
         </Message>
@@ -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>
@@ -26,7 +17,7 @@
         <img
           v-if="task.headerImg"
           :src="task.headerImg"
-          class="h-full w-full object-contain px-4 pt-4 opacity-25"
+          class="size-full object-contain px-4 pt-4 opacity-25"
         />
       </template>
       <template #title>
@@ -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="pi pi-check pointer-events-none absolute -right-4 -bottom-4 z-10 col-span-full row-span-full text-[4rem] text-green-500 opacity-100 transition-opacity [text-shadow:0.25rem_0_0.5rem_black] group-hover/task-card:opacity-20"
     />
   </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/components/maintenance/TaskListPanel.vue

@@ -4,7 +4,7 @@
     <template v-if="filter.tasks.length === 0">
       <!-- Empty filter -->
       <Divider />
-      <p class="text-neutral-400 w-full text-center">
+      <p class="w-full text-center text-neutral-400">
         {{ $t('maintenance.allOk') }}
       </p>
     </template>
@@ -25,7 +25,7 @@
 
       <!-- Display: Cards -->
       <template v-else>
-        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
+        <div class="pad-y my-4 flex flex-wrap justify-evenly gap-8">
           <TaskCard
             v-for="task in filter.tasks"
             :key="task.id"
@@ -45,7 +45,8 @@ import { useConfirm, useToast } from 'primevue'
 import ConfirmPopup from 'primevue/confirmpopup'
 import Divider from 'primevue/divider'
 
-import { t } from '@/i18n'
+import { useI18n } from 'vue-i18n'
+
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type {
   MaintenanceFilter,
@@ -55,6 +56,7 @@ import type {
 import TaskCard from './TaskCard.vue'
 import TaskListItem from './TaskListItem.vue'
 
+const { t } = useI18n()
 const toast = useToast()
 const confirm = useConfirm()
 const taskStore = useMaintenanceTaskStore()
@@ -80,8 +82,7 @@ const executeTask = async (task: MaintenanceTask) => {
   toast.add({
     severity: 'error',
     summary: t('maintenance.error.toastTitle'),
-    detail: message ?? t('maintenance.error.defaultDescription'),
-    life: 10_000
+    detail: message ?? t('maintenance.error.defaultDescription')
   })
 }
 

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">
+  <div class="flex size-full flex-col justify-between rounded-lg p-6">
+    <h1 class="m-0 font-inter text-xl font-semibold italic">
       {{ $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

@@ -1,25 +1,25 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="h-screen w-screen grid items-center justify-around overflow-y-auto"
+      class="grid h-screen w-screen items-center justify-around overflow-y-auto"
     >
       <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" />
+        <ProgressSpinner class="m-8 size-48" />
 
         <!-- Console button -->
         <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

@@ -1,10 +1,10 @@
 <template>
   <BaseViewTemplate dark>
     <!-- Fixed height container with flexbox layout for proper content management -->
-    <div class="w-full h-full flex flex-col">
+    <div class="flex size-full flex-col">
       <Stepper
         v-model:value="currentStep"
-        class="flex flex-col h-full"
+        class="flex h-full flex-col"
         @update:value="handleStepChange"
       >
         <!-- Main content area that grows to fill available space -->
@@ -37,7 +37,7 @@
 
         <!-- Install footer with navigation -->
         <InstallFooter
-          class="w-full max-w-2xl my-6 mx-auto"
+          class="mx-auto my-6 w-full max-w-2xl"
           :current-step
           :can-proceed
           :disable-location-step="noGpu"
@@ -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

@@ -1,21 +1,21 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
+      class="dark-theme grid h-screen min-h-full w-screen min-w-full justify-around overflow-y-auto bg-neutral-900 font-sans text-neutral-300"
     >
-      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
+      <div class="relative m-8 w-screen max-w-(--breakpoint-sm)">
         <!-- Header -->
         <h1 class="backspan pi-wrench text-4xl font-bold">
           {{ t('maintenance.title') }}
         </h1>
 
         <!-- Toolbar -->
-        <div class="w-full flex flex-wrap gap-4 items-center">
+        <div class="flex w-full flex-wrap items-center gap-4">
           <span class="grow">
             {{ t('maintenance.status') }}:
             <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
           </span>
-          <div class="flex gap-4 items-center">
+          <div class="flex items-center gap-4">
             <SelectButton
               v-model="displayAsList"
               :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
@@ -56,10 +56,10 @@
               :value="t('icon.exclamation-triangle')"
             />
             <span>
-              <strong class="block mb-1">
+              <strong class="mb-1 block">
                 {{ t('maintenance.unsafeMigration.title') }}
               </strong>
-              <span class="block mb-1">
+              <span class="mb-1 block">
                 {{ unsafeReasonText }}
               </span>
               <span class="block text-sm text-neutral-400">
@@ -71,13 +71,13 @@
 
         <!-- Tasks -->
         <TaskListPanel
-          class="border-neutral-700 border-solid border-x-0 border-y"
+          class="border-x-0 border-y border-solid border-neutral-700"
           :filter
           :display-as-list
         />
 
         <!-- Actions -->
-        <div class="flex justify-between gap-4 flex-row">
+        <div class="flex flex-row justify-between gap-4">
           <Button
             :label="t('maintenance.consoleLogs')"
             icon="pi pi-desktop"
@@ -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
 
@@ -189,8 +188,7 @@ const completeValidation = async () => {
     toast.add({
       severity: 'error',
       summary: t('g.error'),
-      detail: t('maintenance.error.cannotContinue'),
-      life: 5_000
+      detail: t('maintenance.error.cannotContinue')
     })
   }
 }
@@ -221,14 +219,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/MetricsConsentView.vue

@@ -1,8 +1,8 @@
 <template>
   <BaseViewTemplate dark hide-language-selector>
-    <div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
+    <div class="flex h-full flex-col items-center justify-center p-8 2xl:p-16">
       <div
-        class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
+        class="flex w-full max-w-[600px] flex-col gap-6 rounded-lg bg-neutral-800 p-6 shadow-lg"
       >
         <h2 class="text-3xl font-semibold text-neutral-100">
           {{ $t('install.helpImprove') }}
@@ -15,7 +15,7 @@
           <a
             href="https://comfy.org/privacy"
             target="_blank"
-            class="text-blue-400 hover:text-blue-300 underline"
+            class="text-blue-400 underline hover:text-blue-300"
           >
             {{ $t('install.privacyPolicy') }} </a
           >.
@@ -33,7 +33,7 @@
             }}
           </span>
         </div>
-        <div class="flex pt-6 justify-end">
+        <div class="flex justify-end pt-6">
           <Button
             :label="$t('g.ok')"
             icon="pi pi-check"
@@ -72,8 +72,7 @@ const updateConsent = async () => {
     toast.add({
       severity: 'error',
       summary: t('install.settings.errorUpdatingConsent'),
-      detail: t('install.settings.errorUpdatingConsentDetail'),
-      life: 3000
+      detail: t('install.settings.errorUpdatingConsentDetail')
     })
   } finally {
     isUpdating.value = false

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"
@@ -9,7 +9,7 @@
       />
 
       <div class="no-drag sad-text flex items-center">
-        <div class="flex flex-col gap-8 p-8 min-w-110">
+        <div class="flex min-w-110 flex-col gap-8 p-8">
           <!-- Header -->
           <h1 class="text-4xl font-bold text-red-500">
             {{ $t('notSupported.title') }}
@@ -20,7 +20,7 @@
             <p class="text-xl">
               {{ $t('notSupported.message') }}
             </p>
-            <ul class="list-disc list-inside space-y-1 text-neutral-800">
+            <ul class="list-inside list-disc space-y-1 text-neutral-800">
               <li>{{ $t('notSupported.supportedDevices.macos') }}</li>
               <li>{{ $t('notSupported.supportedDevices.windows') }}</li>
             </ul>
@@ -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

@@ -2,14 +2,14 @@
   <BaseViewTemplate dark>
     <div class="relative min-h-screen">
       <!-- Terminal Background Layer (always visible during loading) -->
-      <div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
-        <div class="h-full w-full">
+      <div v-if="!isError" class="fixed inset-0 z-0 overflow-hidden">
+        <div class="size-full">
           <BaseTerminal @created="terminalCreated" />
         </div>
       </div>
 
       <!-- Semi-transparent overlay -->
-      <div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
+      <div v-if="!isError" class="fixed inset-0 z-5 bg-neutral-900/80"></div>
 
       <!-- Smooth radial gradient overlay -->
       <div
@@ -45,9 +45,9 @@
         <!-- Error Section (positioned at bottom) -->
         <div
           v-if="isError"
-          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
+          class="absolute inset-x-0 bottom-20 flex flex-col items-center gap-4"
         >
-          <div class="flex gap-4 justify-center">
+          <div class="flex justify-center gap-4">
             <Button
               icon="pi pi-flag"
               :label="$t('serverStart.reportIssue')"
@@ -71,10 +71,10 @@
         <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
         <div
           v-if="terminalVisible && isError"
-          class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
+          class="absolute inset-x-4 bottom-4 z-10 mx-auto max-w-4xl"
         >
           <div
-            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
+            class="h-[300px] rounded-lg border border-neutral-700 bg-neutral-900/95 p-4"
           >
             <BaseTerminal @created="terminalCreated" />
           </div>
@@ -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/subgraphs/subgraph-nested-promotion.json

@@ -0,0 +1,760 @@
+{
+  "id": "9a37f747-e96b-4304-9212-7abcaad7bdac",
+  "revision": 0,
+  "last_node_id": 11,
+  "last_link_id": 18,
+  "nodes": [
+    {
+      "id": 2,
+      "type": "PreviewAny",
+      "pos": [1031, 434],
+      "size": [250, 178],
+      "flags": {},
+      "order": 2,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "source",
+          "type": "*",
+          "link": 5
+        }
+      ],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "PreviewAny"
+      },
+      "widgets_values": [null, null, null]
+    },
+    {
+      "id": 5,
+      "type": "1e38d8ea-45e1-48a5-aa20-966584201867",
+      "pos": [788, 433.5],
+      "size": [225, 380],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "string_a",
+          "type": "STRING",
+          "widget": {
+            "name": "string_a"
+          },
+          "link": 4
+        }
+      ],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [5]
+        }
+      ],
+      "properties": {
+        "proxyWidgets": [
+          ["3", "string_a"],
+          ["4", "value"],
+          ["6", "value"],
+          ["6", "value_1"]
+        ]
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 1,
+      "type": "PrimitiveStringMultiline",
+      "pos": [548, 451],
+      "size": [225, 142],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "STRING",
+          "type": "STRING",
+          "links": [4]
+        }
+      ],
+      "title": "Outer",
+      "properties": {
+        "Node name for S&R": "PrimitiveStringMultiline"
+      },
+      "widgets_values": ["Outer\n"]
+    }
+  ],
+  "links": [
+    [4, 1, 0, 5, 0, "STRING"],
+    [5, 5, 0, 2, 0, "STRING"]
+  ],
+  "groups": [],
+  "definitions": {
+    "subgraphs": [
+      {
+        "id": "1e38d8ea-45e1-48a5-aa20-966584201867",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 18,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Sub 0",
+        "inputNode": {
+          "id": -10,
+          "bounding": [351, 432.5, 120, 120]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1352, 294.5, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "7bf3e1d4-0521-4b5c-92f5-47ca598b7eb4",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [1],
+            "localized_name": "string_a",
+            "pos": [451, 452.5]
+          },
+          {
+            "id": "5fb3dcf7-9bfd-4b3c-a1b9-750b4f3edf19",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [13],
+            "pos": [451, 472.5]
+          },
+          {
+            "id": "55d24b8a-7c82-4b02-8e3d-ff31ffb8aa13",
+            "name": "value_1",
+            "type": "STRING",
+            "linkIds": [16],
+            "pos": [451, 492.5]
+          },
+          {
+            "id": "c1fe7cc3-547e-4fb0-b763-61888558d4bd",
+            "name": "value_1_1",
+            "type": "STRING",
+            "linkIds": [18],
+            "pos": [451, 512.5]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "fbe975ba-d7c2-471e-a99a-a1e2c6ab466d",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "STRING",
+            "pos": [1372, 314.5]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 4,
+            "type": "PrimitiveStringMultiline",
+            "pos": [504, 437],
+            "size": [210, 88],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 13
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [2]
+              }
+            ],
+            "title": "Inner 1",
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 1\n"]
+          },
+          {
+            "id": 3,
+            "type": "StringConcatenate",
+            "pos": [743, 325],
+            "size": [347, 231],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 1
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 2
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [7]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 6,
+            "type": "9be42452-056b-4c99-9f9f-7381d11c4454",
+            "pos": [1115, 301],
+            "size": [210, 196],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 7
+              },
+              {
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 16
+              },
+              {
+                "name": "value_1",
+                "type": "STRING",
+                "widget": {
+                  "name": "value_1"
+                },
+                "link": 18
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [9]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [
+                ["5", "string_a"],
+                ["11", "value"],
+                ["9", "value"],
+                ["10", "string_a"]
+              ]
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 2,
+            "origin_id": 4,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 1,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 3,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 7,
+            "origin_id": 3,
+            "origin_slot": 0,
+            "target_id": 6,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 6,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 9,
+            "origin_id": 6,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 13,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 4,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 16,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 6,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 18,
+            "origin_id": -10,
+            "origin_slot": 3,
+            "target_id": 6,
+            "target_slot": 2,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "9be42452-056b-4c99-9f9f-7381d11c4454",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 18,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Sub 1",
+        "inputNode": {
+          "id": -10,
+          "bounding": [180, 739, 120, 100]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1246, 612, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "01c05c51-86b5-4bad-b32f-9c911683a13d",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [4],
+            "localized_name": "string_a",
+            "pos": [280, 759]
+          },
+          {
+            "id": "d50f6a62-0185-43d4-a174-a8a94bd8f6e7",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [14],
+            "pos": [280, 779]
+          },
+          {
+            "id": "6b78450e-5986-49cd-b743-c933e5a34a69",
+            "name": "value_1",
+            "type": "STRING",
+            "linkIds": [17],
+            "pos": [280, 799]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "a8bcf3bf-a66a-4c71-8d92-17a2a4d03686",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [12],
+            "localized_name": "STRING",
+            "pos": [1266, 632]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 11,
+            "type": "PrimitiveStringMultiline",
+            "pos": [334, 742],
+            "size": [210, 88],
+            "flags": {},
+            "order": 2,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 14
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [7]
+              }
+            ],
+            "title": "Inner 2",
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 2\n"]
+          },
+          {
+            "id": 10,
+            "type": "StringConcatenate",
+            "pos": [581, 637],
+            "size": [400, 200],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 4
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 7
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [11]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          },
+          {
+            "id": 9,
+            "type": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+            "pos": [1004, 613],
+            "size": [210, 142],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 11
+              },
+              {
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 17
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [12]
+              }
+            ],
+            "properties": {
+              "proxyWidgets": [
+                ["7", "string_a"],
+                ["8", "value"]
+              ]
+            },
+            "widgets_values": []
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 4,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 7,
+            "origin_id": 11,
+            "origin_slot": 0,
+            "target_id": 10,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 11,
+            "origin_id": 10,
+            "origin_slot": 0,
+            "target_id": 9,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 10,
+            "origin_id": 9,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 12,
+            "origin_id": 9,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 14,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 11,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 17,
+            "origin_id": -10,
+            "origin_slot": 2,
+            "target_id": 9,
+            "target_slot": 1,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      },
+      {
+        "id": "7c2915a5-5eb8-4958-a8fd-4beb30f370ce",
+        "version": 1,
+        "state": {
+          "lastGroupId": 0,
+          "lastNodeId": 11,
+          "lastLinkId": 18,
+          "lastRerouteId": 0
+        },
+        "revision": 0,
+        "config": {},
+        "name": "Sub 2",
+        "inputNode": {
+          "id": -10,
+          "bounding": [262, 1222, 120, 80]
+        },
+        "outputNode": {
+          "id": -20,
+          "bounding": [1123.089999999999, 1125.1999999999998, 120, 60]
+        },
+        "inputs": [
+          {
+            "id": "934a8baa-d79c-428c-8ec9-814ad437d7c7",
+            "name": "string_a",
+            "type": "STRING",
+            "linkIds": [9],
+            "localized_name": "string_a",
+            "pos": [362, 1242]
+          },
+          {
+            "id": "3a545207-7202-42a9-a82f-3b62e1b0f459",
+            "name": "value",
+            "type": "STRING",
+            "linkIds": [15],
+            "pos": [362, 1262]
+          }
+        ],
+        "outputs": [
+          {
+            "id": "4c3d243b-9ff6-4dcd-9dbf-e4ec8e1fc879",
+            "name": "STRING",
+            "type": "STRING",
+            "linkIds": [10],
+            "localized_name": "STRING",
+            "pos": [1143.089999999999, 1145.1999999999998]
+          }
+        ],
+        "widgets": [],
+        "nodes": [
+          {
+            "id": 8,
+            "type": "PrimitiveStringMultiline",
+            "pos": [412.96000000000004, 1228.2399999999996],
+            "size": [210, 88],
+            "flags": {},
+            "order": 1,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "value",
+                "name": "value",
+                "type": "STRING",
+                "widget": {
+                  "name": "value"
+                },
+                "link": 15
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [8]
+              }
+            ],
+            "title": "Inner 3",
+            "properties": {
+              "Node name for S&R": "PrimitiveStringMultiline"
+            },
+            "widgets_values": ["Inner 3\n"]
+          },
+          {
+            "id": 7,
+            "type": "StringConcatenate",
+            "pos": [686.08, 1132.38],
+            "size": [400, 200],
+            "flags": {},
+            "order": 0,
+            "mode": 0,
+            "inputs": [
+              {
+                "localized_name": "string_a",
+                "name": "string_a",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_a"
+                },
+                "link": 9
+              },
+              {
+                "localized_name": "string_b",
+                "name": "string_b",
+                "type": "STRING",
+                "widget": {
+                  "name": "string_b"
+                },
+                "link": 8
+              }
+            ],
+            "outputs": [
+              {
+                "localized_name": "STRING",
+                "name": "STRING",
+                "type": "STRING",
+                "links": [10]
+              }
+            ],
+            "properties": {
+              "Node name for S&R": "StringConcatenate"
+            },
+            "widgets_values": ["", "", ""]
+          }
+        ],
+        "groups": [],
+        "links": [
+          {
+            "id": 8,
+            "origin_id": 8,
+            "origin_slot": 0,
+            "target_id": 7,
+            "target_slot": 1,
+            "type": "STRING"
+          },
+          {
+            "id": 9,
+            "origin_id": -10,
+            "origin_slot": 0,
+            "target_id": 7,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 10,
+            "origin_id": 7,
+            "origin_slot": 0,
+            "target_id": -20,
+            "target_slot": 0,
+            "type": "STRING"
+          },
+          {
+            "id": 15,
+            "origin_id": -10,
+            "origin_slot": 1,
+            "target_id": 8,
+            "target_slot": 0,
+            "type": "STRING"
+          }
+        ],
+        "extra": {}
+      }
+    ]
+  },
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 1,
+      "offset": [-412, 11]
+    },
+    "frontendVersion": "1.41.7"
+  },
+  "version": 0.4
+}

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/fixtures/ComfyPage.ts

@@ -26,6 +26,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'
@@ -173,6 +174,7 @@ export class ComfyPage {
   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
@@ -204,9 +206,7 @@ export class ComfyPage {
     this.widgetTextBox = page.getByPlaceholder('text').nth(1)
     this.resetViewButton = page.getByRole('button', { name: 'Reset View' })
     this.queueButton = page.getByRole('button', { name: 'Queue Prompt' })
-    this.runButton = page
-      .getByTestId(TestIds.topbar.queueButton)
-      .getByRole('button', { name: 'Run' })
+    this.runButton = page.getByTestId(TestIds.topbar.queueButton)
     this.workflowUploadInput = page.locator('#comfy-file-input')
 
     this.searchBox = new ComfyNodeSearchBox(page)
@@ -217,6 +217,7 @@ export class ComfyPage {
     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/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,12 +27,12 @@ export const TestIds = {
     settingsContainer: 'settings-container',
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
-    missingNodes: 'missing-nodes-warning',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section'
   },
   topbar: {
     queueButton: 'queue-button',
+    queueModeMenuTrigger: 'queue-mode-menu-trigger',
     saveButton: 'save-workflow-button'
   },
   nodeLibrary: {
@@ -44,21 +44,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 +70,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/actionbar.ts

@@ -29,8 +29,10 @@ class ComfyQueueButton {
   public readonly dropdownButton: Locator
   constructor(public readonly actionbar: ComfyActionbar) {
     this.root = actionbar.root.getByTestId(TestIds.topbar.queueButton)
-    this.primaryButton = this.root.locator('.p-splitbutton-button')
-    this.dropdownButton = this.root.locator('.p-splitbutton-dropdown')
+    this.primaryButton = this.root
+    this.dropdownButton = actionbar.root.getByTestId(
+      TestIds.topbar.queueModeMenuTrigger
+    )
   }
 
   public async toggleOptions() {

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/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

@@ -245,18 +245,11 @@ test.describe(
       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 }>
-        }
+        return window['app'].graph.serialize()
       })
       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/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
@@ -41,14 +38,13 @@ 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.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,14 +55,9 @@ 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', () => {
@@ -104,13 +95,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 +114,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 +163,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 +177,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 +190,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 +220,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'
@@ -413,7 +401,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 +424,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/interaction.spec.ts

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

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/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/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.spec.ts

@@ -53,7 +53,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'
     })
   }
 

browser_tests/tests/subgraphPromotion.spec.ts

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

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

@@ -1,27 +1,23 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../../../../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
-import {
-  getPromotedWidgetNames,
-  getPromotedWidgetCountByName
-} from '../../../../helpers/promotedWidgets'
 
 test.describe('Vue Nodes Image Preview', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.vueNodes.waitForNodes()
   })
 
-  async function loadImageOnNode(comfyPage: ComfyPage) {
-    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-    await comfyPage.vueNodes.waitForNodes()
-
-    const loadImageNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-    )[0]
+  async function loadImageOnNode(
+    comfyPage: Awaited<
+      ReturnType<(typeof test)['info']>
+    >['fixtures']['comfyPage']
+  ) {
+    const loadImageNode = (await comfyPage.getNodeRefsByType('LoadImage'))[0]
     const { x, y } = await loadImageNode.getPosition()
 
-    await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
+    await comfyPage.dragAndDropFile('image64x64.webp', {
       dropPosition: { x, y }
     })
 
@@ -30,31 +26,24 @@ test.describe('Vue Nodes Image Preview', () => {
     await expect(imagePreview.locator('img')).toBeVisible()
     await expect(imagePreview).toContainText('x')
 
-    return {
-      imagePreview,
-      nodeId: String(loadImageNode.id)
-    }
+    return imagePreview
   }
 
-  // TODO(#8143): Re-enable after image preview sync is working in CI
   test.fixme('opens mask editor from image preview button', async ({
     comfyPage
   }) => {
-    const { imagePreview } = await loadImageOnNode(comfyPage)
+    const imagePreview = await loadImageOnNode(comfyPage)
 
-    await imagePreview.locator('[role="img"]').focus()
+    await imagePreview.locator('[role="img"]').hover()
     await comfyPage.page.getByLabel('Edit or mask image').click()
 
     await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
   })
 
-  // TODO(#8143): Re-enable after image preview sync is working in CI
   test.fixme('shows image context menu options', async ({ comfyPage }) => {
-    const { nodeId } = await loadImageOnNode(comfyPage)
+    await loadImageOnNode(comfyPage)
 
-    const nodeHeader = comfyPage.vueNodes
-      .getNodeLocator(nodeId)
-      .locator('.lg-node-header')
+    const nodeHeader = comfyPage.vueNodes.getNodeByTitle('Load Image')
     await nodeHeader.click()
     await nodeHeader.click({ button: 'right' })
 
@@ -65,69 +54,4 @@ test.describe('Vue Nodes Image Preview', () => {
     await expect(contextMenu.getByText('Save Image')).toBeVisible()
     await expect(contextMenu.getByText('Open in Mask Editor')).toBeVisible()
   })
-
-  test(
-    'renders promoted image previews for each subgraph node',
-    { tag: '@screenshot' },
-    async ({ comfyPage }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-multiple-promoted-previews'
-      )
-      await comfyPage.vueNodes.waitForNodes()
-
-      const firstSubgraphNode = comfyPage.vueNodes.getNodeLocator('7')
-      const secondSubgraphNode = comfyPage.vueNodes.getNodeLocator('8')
-
-      await expect(firstSubgraphNode).toBeVisible()
-      await expect(secondSubgraphNode).toBeVisible()
-
-      const firstPromotedWidgets = await getPromotedWidgetNames(comfyPage, '7')
-      const secondPromotedWidgets = await getPromotedWidgetNames(comfyPage, '8')
-      expect(firstPromotedWidgets).toEqual([
-        '$$canvas-image-preview',
-        '$$canvas-image-preview'
-      ])
-      expect(secondPromotedWidgets).toEqual(['$$canvas-image-preview'])
-
-      expect(
-        await getPromotedWidgetCountByName(
-          comfyPage,
-          '7',
-          '$$canvas-image-preview'
-        )
-      ).toBe(2)
-      expect(
-        await getPromotedWidgetCountByName(
-          comfyPage,
-          '8',
-          '$$canvas-image-preview'
-        )
-      ).toBe(1)
-
-      await expect(
-        firstSubgraphNode.locator('.lg-node-widgets')
-      ).not.toContainText('$$canvas-image-preview')
-      await expect(
-        secondSubgraphNode.locator('.lg-node-widgets')
-      ).not.toContainText('$$canvas-image-preview')
-
-      await comfyPage.command.executeCommand('Comfy.Canvas.FitView')
-      await comfyPage.command.executeCommand('Comfy.QueuePrompt')
-
-      const firstPreviewImages = firstSubgraphNode.locator('.image-preview img')
-      const secondPreviewImages =
-        secondSubgraphNode.locator('.image-preview img')
-
-      await expect(firstPreviewImages).toHaveCount(2, { timeout: 30_000 })
-      await expect(secondPreviewImages).toHaveCount(1, { timeout: 30_000 })
-
-      await expect(firstPreviewImages.first()).toBeVisible({ timeout: 30_000 })
-      await expect(firstPreviewImages.nth(1)).toBeVisible({ timeout: 30_000 })
-      await expect(secondPreviewImages.first()).toBeVisible({ timeout: 30_000 })
-
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'vue-node-multiple-promoted-previews.png'
-      )
-    }
-  )
 })

browser_tests/tests/vueNodes/nodeStates/colors.spec.ts

@@ -2,7 +2,6 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
-import { TestIds } from '../../../fixtures/selectors'
 
 test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -20,16 +19,10 @@ test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
     })
     await loadCheckpointNode.getByText('Load Checkpoint').click()
 
-    const colorPickerButton = comfyPage.page.getByTestId(
-      TestIds.selectionToolbox.colorPickerButton
-    )
-    await colorPickerButton.click()
-
-    const colorPickerGroup = comfyPage.page.getByRole('group').filter({
-      has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
-    })
-    await colorPickerGroup
-      .getByTestId(TestIds.selectionToolbox.colorBlue)
+    await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+    await comfyPage.page
+      .locator('.color-picker-container')
+      .locator('i[data-testid="blue"]')
       .click()
 
     await expect(comfyPage.canvas).toHaveScreenshot(

browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts

@@ -9,20 +9,17 @@ test.describe('Vue Upload Widgets', () => {
     await comfyPage.vueNodes.waitForNodes()
   })
 
-  test('should hide canvas-only upload buttons', async ({ comfyPage }) => {
-    await comfyPage.setup()
-    await comfyPage.workflow.loadWorkflow('widgets/all_load_widgets')
-    await comfyPage.vueNodes.waitForNodes()
+  test(
+    'should hide canvas-only upload buttons',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.setup()
+      await comfyPage.workflow.loadWorkflow('widgets/all_load_widgets')
+      await comfyPage.vueNodes.waitForNodes()
 
-    await expect(
-      comfyPage.page.getByText('choose file to upload', { exact: true })
-    ).not.toBeVisible()
-
-    await expect
-      .poll(() => comfyPage.page.getByText('Error loading image').count())
-      .toBeGreaterThan(0)
-    await expect
-      .poll(() => comfyPage.page.getByText('Error loading video').count())
-      .toBeGreaterThan(0)
-  })
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-nodes-upload-widgets.png'
+      )
+    }
+  )
 })

docs/WIDGET_SERIALIZATION.md

@@ -1,58 +0,0 @@
-# Widget Serialization: `widget.serialize` vs `widget.options.serialize`
-
-Two properties named `serialize` exist at different levels of a widget object. They control different serialization layers and are checked by completely different code paths.
-
-**`widget.serialize`** — Controls **workflow persistence**. Checked by `LGraphNode.serialize()` and `configure()` when reading/writing `widgets_values` in the workflow JSON. When `false`, the widget is skipped in both serialization and deserialization. Used for UI-only widgets (image previews, progress text, audio players). Typed as `IBaseWidget.serialize` in `src/lib/litegraph/src/types/widgets.ts`.
-
-**`widget.options.serialize`** — Controls **prompt/API serialization**. Checked by `executionUtil.ts` when building the API payload sent to the backend. When `false`, the widget is excluded from prompt inputs. Used for client-side-only controls (`control_after_generate`, combo filter lists) that the server doesn't need. Typed as `IWidgetOptions.serialize` in `src/lib/litegraph/src/types/widgets.ts`.
-
-These correspond to the two data formats in `ComfyMetadata` embedded in output files (PNG, GLTF, WebM, AVIF, etc.): `widget.serialize` → `ComfyMetadataTags.WORKFLOW`, `widget.options.serialize` → `ComfyMetadataTags.PROMPT`.
-
-## Permutation table
-
-| `widget.serialize` | `widget.options.serialize` | In workflow? | In prompt? | Examples                                                             |
-| ------------------ | -------------------------- | ------------ | ---------- | -------------------------------------------------------------------- |
-| ✅ default         | ✅ default                 | Yes          | Yes        | seed, cfg, sampler_name                                              |
-| ✅ default         | ❌ false                   | Yes          | No         | control_after_generate, combo filter list                            |
-| ❌ false           | ✅ default                 | No           | Yes        | No current usage (would be a transient value computed at queue time) |
-| ❌ false           | ❌ false                   | No           | No         | Image/video previews, audio players, progress text                   |
-
-## Gotchas
-
-- `addWidget('combo', name, value, cb, { serialize: false })` puts `serialize` into `widget.options`, **not** onto `widget` directly. These are different properties consumed by different systems.
-- `LGraphNode.serialize()` checks `widget.serialize === false` (line 967). It does **not** check `widget.options.serialize`. A widget with `options.serialize = false` is still included in `widgets_values`.
-- `LGraphNode.serialize()` only writes `widgets_values` if `this.widgets` is truthy. Nodes that create widgets dynamically (like `PrimitiveNode`) will have no `widgets_values` in serialized output if serialized before widget creation — even if `this.widgets_values` exists on the instance from a prior `configure()` call.
-- `widget.options.serialize` is typed as `IWidgetOptions.serialize` — both properties share the name `serialize` but live at different levels of the widget object.
-
-## PrimitiveNode and copy/paste
-
-`PrimitiveNode` creates widgets dynamically on connection — it starts as an empty polymorphic node and morphs to match its target widget in `_onFirstConnection()`. This interacts badly with the copy/paste pipeline.
-
-### The clone→serialize gap
-
-`LGraphCanvas._serializeItems()` copies nodes via `item.clone()?.serialize()` (line 3911). For PrimitiveNode this fails:
-
-1. `clone()` calls `this.serialize()` on the **original** node (which has widgets, so `widgets_values` is captured correctly).
-2. `clone()` creates a **fresh** PrimitiveNode via `LiteGraph.createNode()` and calls `configure(data)` on it — this stores `widgets_values` on the instance.
-3. But the fresh PrimitiveNode has no `this.widgets` (widgets are created only on connection), so when `serialize()` is called on the clone, `LGraphNode.serialize()` skips the `widgets_values` block entirely (line 964: `if (widgets && this.serialize_widgets)`).
-
-Result: `widgets_values` is silently dropped from the clipboard data.
-
-### Why seed survives but control_after_generate doesn't
-
-When the pasted PrimitiveNode reconnects to the pasted target node, `_createWidget()` copies `theirWidget.value` from the target (line 254). This restores the **primary** widget value (e.g., `seed`).
-
-But `control_after_generate` is a **secondary** widget created by `addValueControlWidgets()`, which reads its initial value from `this.widgets_values?.[1]` (line 263). That value was lost during clone→serialize, so it falls back to `'fixed'` (line 265).
-
-See [ADR-0006](adr/0006-primitive-node-copy-paste-lifecycle.md) for proposed fixes and design tradeoffs.
-
-## Code references
-
-- `widget.serialize` checked: `src/lib/litegraph/src/LGraphNode.ts` serialize() and configure()
-- `widget.options.serialize` checked: `src/utils/executionUtil.ts`
-- `widget.options.serialize` set: `src/scripts/widgets.ts` addValueControlWidgets()
-- `widget.serialize` set: `src/composables/node/useNodeImage.ts`, `src/extensions/core/previewAny.ts`, etc.
-- Metadata types: `src/types/metadataTypes.ts`
-- PrimitiveNode: `src/extensions/core/widgetInputs.ts`
-- Copy/paste serialization: `src/lib/litegraph/src/LGraphCanvas.ts` `_serializeItems()`
-- Clone: `src/lib/litegraph/src/LGraphNode.ts` `clone()`

docs/adr/0006-primitive-node-copy-paste-lifecycle.md

@@ -1,45 +0,0 @@
-# 6. PrimitiveNode Copy/Paste Lifecycle
-
-Date: 2026-02-22
-
-## Status
-
-Proposed
-
-## Context
-
-PrimitiveNode creates widgets dynamically on connection. When copied, the clone has no `this.widgets`, so `LGraphNode.serialize()` drops `widgets_values` from the clipboard data. This causes secondary widget values (e.g., `control_after_generate`) to be lost on paste. See [WIDGET_SERIALIZATION.md](../WIDGET_SERIALIZATION.md#primitiveno-and-copypaste) for the full mechanism.
-
-Related: [#1757](https://github.com/Comfy-Org/ComfyUI_frontend/issues/1757), [#8938](https://github.com/Comfy-Org/ComfyUI_frontend/pull/8938)
-
-## Options
-
-### A. Minimal fix: override `serialize()` on PrimitiveNode
-
-Override `serialize()` to fall back to `this.widgets_values` (set during `configure()`) when the base implementation omits it due to missing `this.widgets`.
-
-- **Pro**: No change to connection lifecycle semantics. Lowest risk.
-- **Pro**: Doesn't affect workflow save/load (which already works via `onAfterGraphConfigured`).
-- **Con**: Doesn't address the deeper design issue — primitives are still empty on copy.
-
-### B. Clone-configured-instance lifecycle
-
-On copy, the primitive is a clone of the configured instance (with widgets intact). On disconnect or paste without connections, it returns to empty state.
-
-- **Pro**: Copy→serialize captures `widgets_values` correctly. Matches OOP expectations.
-- **Pro**: Secondary widget state survives round-trips without special-casing.
-- **Con**: `input.widget[CONFIG]` allows extensions to make PrimitiveNode create a _different_ widget than the target. Widget config is derived at connection time, not stored, so cloning the configured state may not be faithful.
-- **Con**: Deserialization ordering — `configure()` runs before links are restored. PrimitiveNode needs links to know what widgets to create. `onAfterGraphConfigured()` handles this for workflow load, but copy/paste uses a different code path.
-- **Con**: Higher risk of regressions in extension compatibility.
-
-### C. Projection model (like Subgraph widgets)
-
-Primitives act as a synchronization mechanism — no own state, just a projection of the target widget's resolved value.
-
-- **Pro**: Cleanest conceptual model. Eliminates state duplication.
-- **Con**: Primitives can connect to multiple targets. Projection with multiple targets is ambiguous.
-- **Con**: Major architectural change with broad impact.
-
-## Decision
-
-Pending. Option A is the most pragmatic first step. Option B can be revisited after Option A ships and stabilizes.

docs/guidance/playwright.md

@@ -57,7 +57,7 @@ settings: testData as any
 // Don't add test settings to src/schemas/apiSchema.ts
 
 // ❌ Don't chain through unknown to bypass types
-data as unknown as SomeType // Avoid; prefer `as Partial<SomeType> as SomeType` or explicit typings
+data as unknown as SomeType // Avoid; prefer explicit typings or helpers
 ```
 
 ### Accessing Internal State

docs/guidance/typescript.md

@@ -36,25 +36,6 @@ When you must handle uncertain types, prefer these approaches in order:
 - Don't expose internal implementation types (e.g., Pinia store internals)
 - Reactive refs (`ComputedRef<T>`) should be unwrapped before exposing
 
-## Avoiding Circular Dependencies
-
-Extract type guards and their associated interfaces into **leaf modules** — files with only `import type` statements. This keeps them safe to import from anywhere without pulling in heavy transitive dependencies.
-
-```typescript
-// ✅ myTypes.ts — leaf module (only type imports)
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-
-export interface MyView extends IBaseWidget {
-  /* ... */
-}
-export function isMyView(w: IBaseWidget): w is MyView {
-  return 'myProp' in w
-}
-
-// ❌ myView.ts — heavy module (runtime imports from stores, utils, etc.)
-//    Importing the type guard from here drags in the entire dependency tree.
-```
-
 ## Utility Libraries
 
 - Use `es-toolkit` for utility functions (not lodash)

docs/guidance/vue-components.md

@@ -39,10 +39,6 @@ Prefer Vue native options when available:
 - Use inline Tailwind CSS only (no `<style>` blocks)
 - Use `cn()` from `@/utils/tailwindUtil` for conditional classes
 - Refer to packages/design-system/src/css/style.css for design tokens and tailwind configuration
-- Exception: when third-party libraries render runtime DOM outside Vue templates
-  (for example xterm internals inside PrimeVue terminal wrappers), scoped
-  `:deep()` selectors are allowed. Add a brief inline comment explaining why the
-  exception is required.
 
 ## Best Practices
 

knip.config.ts

@@ -39,9 +39,7 @@ const config: KnipConfig = {
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
     'packages/registry-types/src/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts',
-    // Workflow files contain license names that knip misinterprets as binaries
-    '.github/workflows/ci-oss-assets-validation.yaml'
+    'src/scripts/ui/components/splitButton.ts'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

lint-staged.config.ts

@@ -4,40 +4,21 @@ export default {
   'tests-ui/**': () =>
     'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
 
-  './**/*.{css,vue}': (stagedFiles: string[]) => {
-    const joinedPaths = toJoinedRelativePaths(stagedFiles)
-    return [`pnpm exec stylelint --allow-empty-input ${joinedPaths}`]
-  },
-
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
-  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
-    const commands = [...formatAndEslint(stagedFiles), 'pnpm typecheck']
-
-    const hasBrowserTestsChanges = stagedFiles
-      .map((f) => path.relative(process.cwd(), f).replace(/\\/g, '/'))
-      .some((f) => f.startsWith('browser_tests/'))
-
-    if (hasBrowserTestsChanges) {
-      commands.push('pnpm typecheck:browser')
-    }
-
-    return commands
-  }
+  './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => [
+    ...formatAndEslint(stagedFiles),
+    'pnpm typecheck'
+  ]
 }
 
 function formatAndEslint(fileNames: string[]) {
-  const joinedPaths = toJoinedRelativePaths(fileNames)
+  // Convert absolute paths to relative paths for better ESLint resolution
+  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
+  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
   return [
     `pnpm exec oxfmt --write ${joinedPaths}`,
     `pnpm exec oxlint --fix ${joinedPaths}`,
     `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
   ]
 }
-
-function toJoinedRelativePaths(fileNames: string[]) {
-  const relativePaths = fileNames.map((f) =>
-    path.relative(process.cwd(), f).replace(/\\/g, '/')
-  )
-  return relativePaths.map((p) => `"${p}"`).join(' ')
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.5",
+  "version": "1.40.10",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -29,10 +29,10 @@
     "knip": "knip --cache",
     "lint:fix:no-cache": "oxlint src --type-aware --fix && eslint src --fix",
     "lint:fix": "oxlint src --type-aware --fix && eslint src --cache --fix",
-    "lint:no-cache": "pnpm exec stylelint '{apps,packages,src}/**/*.{css,vue}' && oxlint src --type-aware && eslint src",
+    "lint:no-cache": "oxlint src --type-aware && eslint src",
     "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
-    "lint": "pnpm stylelint && oxlint src --type-aware && eslint src --cache",
+    "lint": "oxlint src --type-aware && eslint src --cache",
     "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
     "locale": "lobe-i18n locale",
     "oxlint": "oxlint src --type-aware",
@@ -70,14 +70,13 @@
     "@primevue/themes": "catalog:",
     "@sentry/vue": "catalog:",
     "@sparkjsdev/spark": "catalog:",
-    "@tiptap/core": "catalog:",
-    "@tiptap/extension-link": "catalog:",
-    "@tiptap/extension-table": "catalog:",
-    "@tiptap/extension-table-cell": "catalog:",
-    "@tiptap/extension-table-header": "catalog:",
-    "@tiptap/extension-table-row": "catalog:",
-    "@tiptap/pm": "catalog:",
-    "@tiptap/starter-kit": "catalog:",
+    "@tiptap/core": "^2.10.4",
+    "@tiptap/extension-link": "^2.10.4",
+    "@tiptap/extension-table": "^2.10.4",
+    "@tiptap/extension-table-cell": "^2.10.4",
+    "@tiptap/extension-table-header": "^2.10.4",
+    "@tiptap/extension-table-row": "^2.10.4",
+    "@tiptap/starter-kit": "^2.10.4",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "@xterm/addon-fit": "^0.10.0",
@@ -94,9 +93,9 @@
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
-    "glob": "catalog:",
+    "glob": "^11.0.3",
     "jsonata": "catalog:",
-    "jsondiffpatch": "catalog:",
+    "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
     "pinia": "catalog:",

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

@@ -99,10 +99,6 @@
   --color-magenta-300: #ceaac9;
   --color-magenta-700: #6a246a;
 
-  --color-ocean-300: #badde8;
-  --color-ocean-600: #2f687a;
-  --color-ocean-900: #253236;
-
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
@@ -117,7 +113,6 @@
   --color-interface-panel-job-progress-secondary: var(
     --color-alpha-azure-600-30
   );
-  --color-interface-panel-job-progress-border: var(--base-foreground);
 
   --color-blue-selection: rgb(from var(--color-azure-600) r g b / 0.3);
   --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
@@ -156,11 +151,9 @@
 :root {
   --fg-color: #000;
   --bg-color: #fff;
-  --default-transition-duration: 0.1s;
   --comfy-menu-bg: #353535;
   --comfy-menu-secondary-bg: #292929;
   --comfy-topbar-height: 2.5rem;
-  --workflow-tabs-height: 2.375rem;
   --comfy-input-bg: #222;
   --input-text: #ddd;
   --descrip-text: #999;
@@ -225,10 +218,6 @@
   --interface-panel-surface: var(--color-white);
   --interface-stroke: var(--color-smoke-300);
 
-  --interface-builder-mode-background: var(--color-ocean-300);
-  --interface-builder-mode-button-background: var(--color-ocean-600);
-  --interface-builder-mode-button-foreground: var(--color-white);
-
   --nav-background: var(--color-white);
 
   --node-border: var(--color-smoke-300);
@@ -388,10 +377,6 @@
   --interface-panel-surface: var(--color-charcoal-800);
   --interface-stroke: var(--color-charcoal-400);
 
-  --interface-builder-mode-background: var(--color-ocean-900);
-  --interface-builder-mode-button-background: var(--color-ocean-600);
-  --interface-builder-mode-button-foreground: var(--color-white);
-
   --nav-background: var(--color-charcoal-800);
 
   --node-border: var(--color-charcoal-500);
@@ -427,7 +412,6 @@
   --color-interface-panel-job-progress-secondary: var(
     --color-alpha-azure-600-30
   );
-  --color-interface-panel-job-progress-border: var(--base-foreground);
 
   --text-secondary: var(--color-slate-100);
   --text-primary: var(--color-white);
@@ -526,15 +510,6 @@
   --color-comfy-menu-bg: var(--comfy-menu-bg);
   --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
 
-  --color-interface-builder-mode-background: var(
-    --interface-builder-mode-background
-  );
-  --color-interface-builder-mode-button-background: var(
-    --interface-builder-mode-button-background
-  );
-  --color-interface-builder-mode-button-foreground: var(
-    --interface-builder-mode-button-foreground
-  );
   --color-interface-stroke: var(--interface-stroke);
   --color-nav-background: var(--nav-background);
   --color-node-border: var(--node-border);
@@ -1902,22 +1877,3 @@ audio.comfy-audio.empty-audio-widget {
   margin-left: 15px;
 }
 /* ===================== End of Mask Editor Styles ===================== */
-
-/* ===================== Skeleton Shimmer ===================== */
-.skeleton-shimmer {
-  background:
-    linear-gradient(135deg, rgb(188 188 188 / 0.5) 0%, rgb(0 0 0 / 0.5) 100%) 0
-      0 / 200% 200%,
-    #000;
-  animation: skeleton-shimmer 2s ease-in-out infinite;
-}
-
-@keyframes skeleton-shimmer {
-  0%,
-  100% {
-    background-position: 100% 100%;
-  }
-  50% {
-    background-position: 0 0;
-  }
-}

packages/registry-types/src/comfyRegistryTypes.ts

@@ -3952,7 +3952,7 @@ export interface components {
          * @description The subscription tier level
          * @enum {string}
          */
-        SubscriptionTier: "FREE" | "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
+        SubscriptionTier: "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
         /**
          * @description The subscription billing duration
          * @enum {string}

pnpm-workspace.yaml

@@ -9,12 +9,12 @@ catalog:
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380
   '@iconify/tailwind4': ^1.2.0
-  '@intlify/eslint-plugin-vue-i18n': ^4.1.1
+  '@intlify/eslint-plugin-vue-i18n': ^4.1.0
   '@lobehub/i18n-cli': ^1.26.1
-  '@nx/eslint': 22.5.2
-  '@nx/playwright': 22.5.2
-  '@nx/storybook': 22.5.2
-  '@nx/vite': 22.5.2
+  '@nx/eslint': 22.2.6
+  '@nx/playwright': 22.2.6
+  '@nx/storybook': 22.2.4
+  '@nx/vite': 22.2.6
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.58.1
   '@primeuix/forms': 0.0.2
@@ -27,19 +27,11 @@ catalog:
   '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^10.32.1
   '@sparkjsdev/spark': ^0.1.10
-  '@storybook/addon-docs': ^10.2.10
+  '@storybook/addon-docs': ^10.1.9
   '@storybook/addon-mcp': 0.1.6
-  '@storybook/vue3': ^10.2.10
-  '@storybook/vue3-vite': ^10.2.10
-  '@tailwindcss/vite': ^4.2.0
-  '@tiptap/core': ^2.27.2
-  '@tiptap/extension-link': ^2.27.2
-  '@tiptap/extension-table': ^2.27.2
-  '@tiptap/extension-table-cell': ^2.27.2
-  '@tiptap/extension-table-header': ^2.27.2
-  '@tiptap/extension-table-row': ^2.27.2
-  '@tiptap/pm': 2.27.2
-  '@tiptap/starter-kit': ^2.27.2
+  '@storybook/vue3': ^10.1.9
+  '@storybook/vue3-vite': ^10.1.9
+  '@tailwindcss/vite': ^4.1.12
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^24.1.0
@@ -53,7 +45,7 @@ catalog:
   '@vueuse/integrations': ^14.2.0
   '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
-  axios: ^1.13.5
+  axios: ^1.8.2
   cross-env: ^10.1.0
   cva: 1.0.0-beta.4
   dompurify: ^3.3.1
@@ -63,26 +55,24 @@ catalog:
   eslint-import-resolver-typescript: ^4.4.4
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.25.0
-  eslint-plugin-storybook: ^10.2.10
+  eslint-plugin-storybook: ^10.1.9
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
   firebase: ^11.6.0
-  glob: ^13.0.6
   globals: ^16.5.0
   happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
   jsdom: ^27.4.0
   jsonata: ^2.1.0
-  jsondiffpatch: ^0.7.3
   knip: ^5.75.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
-  nx: 22.5.2
-  oxfmt: ^0.34.0
-  oxlint: ^1.49.0
-  oxlint-tsgolint: ^0.14.2
+  nx: 22.2.6
+  oxfmt: ^0.26.0
+  oxlint: ^1.33.0
+  oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
@@ -91,9 +81,9 @@ catalog:
   primevue: ^4.2.5
   reka-ui: ^2.5.0
   rollup-plugin-visualizer: ^6.0.4
-  storybook: ^10.2.10
+  storybook: ^10.1.9
   stylelint: ^16.26.1
-  tailwindcss: ^4.2.0
+  tailwindcss: ^4.1.12
   tailwindcss-primeui: ^0.6.1
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8
@@ -110,10 +100,10 @@ catalog:
   vitest: ^4.0.16
   vue: ^3.5.13
   vue-component-type-helpers: ^3.2.1
-  vue-eslint-parser: ^10.4.0
-  vue-i18n: ^9.14.5
+  vue-eslint-parser: ^10.2.0
+  vue-i18n: ^9.14.3
   vue-router: ^4.4.3
-  vue-tsc: ^3.2.5
+  vue-tsc: ^3.2.1
   vuefire: ^3.2.1
   wwobjloader2: ^6.2.1
   yjs: ^13.6.27
@@ -140,5 +130,4 @@ onlyBuiltDependencies:
   - oxc-resolver
 
 overrides:
-  '@tiptap/pm': 2.27.2
   '@types/eslint': '-'

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

@@ -2,7 +2,7 @@
 set -e
 
 # Deploy Playwright test reports to Cloudflare Pages and comment on PR
-# Usage: ./pr-playwright-deploy-and-comment.sh <pr_number> <branch_name> <status>
+# Usage: ./pr-playwright-deploy-and-comment.sh <pr_number> <branch_name> <status> [start_time]
 
 # Input validation
 # Validate PR number is numeric
@@ -31,6 +31,8 @@ case "$STATUS" in
         ;;
 esac
 
+START_TIME="${4:-$(date -u '+%m/%d/%Y, %I:%M:%S %p')}"
+
 # Required environment variables
 : "${GITHUB_TOKEN:?GITHUB_TOKEN is required}"
 : "${GITHUB_REPOSITORY:?GITHUB_REPOSITORY is required}"
@@ -133,8 +135,23 @@ post_comment() {
 # Main execution
 if [ "$STATUS" = "starting" ]; then
     # Post concise starting comment
-    comment="$COMMENT_MARKER
-## 🎭 Playwright: ⏳ Running..."
+    comment=$(cat <<EOF
+$COMMENT_MARKER
+## 🎭 Playwright Tests: ⏳ Running...
+
+Tests started at $START_TIME UTC
+
+<details>
+<summary>📊 Browser Tests</summary>
+
+- **chromium**: Running...
+- **chromium-0.5x**: Running...
+- **chromium-2x**: Running...
+- **mobile-chrome**: Running...
+
+</details>
+EOF
+)
     post_comment "$comment"
     
 else
@@ -283,7 +300,7 @@ else
     
     # Generate compact single-line comment
     comment="$COMMENT_MARKER
-## 🎭 Playwright: $status_icon $total_passed passed, $total_failed failed$flaky_note"
+**Playwright:** $status_icon $total_passed passed, $total_failed failed$flaky_note"
 
     # Extract and display failed tests from all browsers (flaky tests are treated as passing)
     if [ $total_failed -gt 0 ]; then

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

@@ -2,7 +2,7 @@
 set -e
 
 # Deploy Storybook to Cloudflare Pages and comment on PR
-# Usage: ./pr-storybook-deploy-and-comment.sh <pr_number> <branch_name> <status>
+# Usage: ./pr-storybook-deploy-and-comment.sh <pr_number> <branch_name> <status> [start_time]
 
 # Input validation
 # Validate PR number is numeric
@@ -31,6 +31,7 @@ case "$STATUS" in
         ;;
 esac
 
+START_TIME="${4:-$(date -u '+%m/%d/%Y, %I:%M:%S %p')}"
 
 # Required environment variables
 : "${GITHUB_TOKEN:?GITHUB_TOKEN is required}"
@@ -119,9 +120,50 @@ post_comment() {
 
 # Main execution
 if [ "$STATUS" = "starting" ]; then
-    # Post starting comment
-    comment="$COMMENT_MARKER
-## 🎨 Storybook: <img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> Building..."
+    # Check if this is a version-bump branch
+    IS_VERSION_BUMP="false"
+    if echo "$BRANCH_NAME" | grep -q "^version-bump-"; then
+        IS_VERSION_BUMP="true"
+    fi
+    
+    # Post starting comment with appropriate message
+    if [ "$IS_VERSION_BUMP" = "true" ]; then
+        comment=$(cat <<EOF
+$COMMENT_MARKER
+## 🎨 Storybook Build Status
+
+<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Build is starting...**
+
+⏰ Started at: $START_TIME UTC
+
+### 🚀 Building Storybook
+- 📦 Installing dependencies...
+- 🔧 Building Storybook components...
+- 🎨 Running Chromatic visual tests...
+
+---
+⏱️ Please wait while the Storybook build is in progress...
+EOF
+)
+    else
+        comment=$(cat <<EOF
+$COMMENT_MARKER
+## 🎨 Storybook Build Status
+
+<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Build is starting...**
+
+⏰ Started at: $START_TIME UTC
+
+### 🚀 Building Storybook
+- 📦 Installing dependencies...
+- 🔧 Building Storybook components...
+- 🌐 Preparing deployment to Cloudflare Pages...
+
+---
+⏱️ Please wait while the Storybook build is in progress...
+EOF
+)
+    fi
     post_comment "$comment"
     
 elif [ "$STATUS" = "completed" ]; then
@@ -150,57 +192,56 @@ elif [ "$STATUS" = "completed" ]; then
     WORKFLOW_CONCLUSION="${WORKFLOW_CONCLUSION:-success}"
     WORKFLOW_URL="${WORKFLOW_URL:-}"
     
-    # Generate compact header based on conclusion
+    # Generate completion comment based on conclusion
     if [ "$WORKFLOW_CONCLUSION" = "success" ]; then
         status_icon="✅"
-        status_text="Built"
+        status_text="Build completed successfully!"
+        footer_text="🎉 Your Storybook is ready for review!"
     elif [ "$WORKFLOW_CONCLUSION" = "skipped" ]; then
         status_icon="⏭️"
-        status_text="Skipped"
+        status_text="Build skipped."
+        footer_text="ℹ️ Chromatic was skipped for this PR."
     elif [ "$WORKFLOW_CONCLUSION" = "cancelled" ]; then
         status_icon="🚫"
-        status_text="Cancelled"
+        status_text="Build cancelled."
+        footer_text="ℹ️ The Chromatic run was cancelled."
     else
         status_icon="❌"
-        status_text="Failed"
+        status_text="Build failed!"
+        footer_text="⚠️ Please check the workflow logs for error details."
     fi
+    
+    comment="$COMMENT_MARKER
+## 🎨 Storybook Build Status
 
-    # Build compact header with optional storybook link
-    header="## 🎨 Storybook: $status_icon $status_text"
-    if [ "$deployment_url" != "Not deployed" ] && [ "$deployment_url" != "Deployment failed" ] && [ "$WORKFLOW_CONCLUSION" = "success" ]; then
-        header="$header — $deployment_url"
-    fi
-
-    # Build details section
-    details="<details>
-<summary>Details</summary>
+$status_icon **$status_text**
 
 ⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC
 
-**Links**
+### 🔗 Links
 - [📊 View Workflow Run]($WORKFLOW_URL)"
-
+    
+    # Add deployment status
     if [ "$deployment_url" != "Not deployed" ]; then
         if [ "$deployment_url" = "Deployment failed" ]; then
-            details="$details
+            comment="$comment
 - ❌ Storybook deployment failed"
-        elif [ "$WORKFLOW_CONCLUSION" != "success" ]; then
-            details="$details
-- ⚠️ Build failed — $deployment_url"
+        elif [ "$WORKFLOW_CONCLUSION" = "success" ]; then
+            comment="$comment
+- 🎨 $deployment_url"
+        else
+            comment="$comment
+- ⚠️ Build failed - $deployment_url"
         fi
     elif [ "$WORKFLOW_CONCLUSION" != "success" ]; then
-        details="$details
+        comment="$comment
 - ⏭️ Storybook deployment skipped (build did not succeed)"
     fi
+    
+    comment="$comment
 
-    details="$details
-
-</details>"
-
-    comment="$COMMENT_MARKER
-$header
-
-$details"
+---
+$footer_text"
     
     post_comment "$comment"
 fi

scripts/collect-i18n-general.ts

@@ -11,7 +11,7 @@ import {
 } from '../packages/shared-frontend-utils/src/formatUtil'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
 import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
-import type { SettingParams } from '../src/platform/settings/types'
+import type { FormItem, SettingParams } from '../src/platform/settings/types'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
 
 const localePath = './src/locales/en/main.json'
@@ -123,8 +123,8 @@ test('collect-i18n-general', async ({ comfyPage }) => {
     SERVER_CONFIG_ITEMS.map((config) => [
       normalizeI18nKey(config.id),
       {
-        name: config.name,
-        tooltip: config.tooltip
+        name: (config as unknown as FormItem).name,
+        tooltip: (config as unknown as FormItem).tooltip
       }
     ])
   )

src/base/common/downloadUtil.test.ts

@@ -202,7 +202,7 @@ describe('downloadUtil', () => {
         ok: false,
         status: 404,
         blob: vi.fn()
-      } as Partial<Response> as Response)
+      } as unknown as Response)
 
       downloadFile(testUrl)
 

src/components/TopMenuSection.test.ts

@@ -262,7 +262,7 @@ describe('TopMenuSection', () => {
     )
   })
 
-  it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
+  it('opens the job history sidebar tab when QPO V2 is enabled', async () => {
     const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
     const settingStore = useSettingStore(pinia)
     vi.mocked(settingStore.get).mockImplementation((key) =>
@@ -273,10 +273,10 @@ describe('TopMenuSection', () => {
 
     await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
 
-    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
   })
 
-  it('toggles the assets sidebar tab when QPO V2 is enabled', async () => {
+  it('toggles the job history sidebar tab when QPO V2 is enabled', async () => {
     const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
     const settingStore = useSettingStore(pinia)
     vi.mocked(settingStore.get).mockImplementation((key) =>
@@ -287,7 +287,7 @@ describe('TopMenuSection', () => {
     const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
 
     await toggleButton.trigger('click')
-    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
 
     await toggleButton.trigger('click')
     expect(sidebarTabStore.activeSidebarTabId).toBe(null)
@@ -296,11 +296,13 @@ describe('TopMenuSection', () => {
   describe('inline progress summary', () => {
     const configureSettings = (
       pinia: ReturnType<typeof createTestingPinia>,
-      qpoV2Enabled: boolean
+      qpoV2Enabled: boolean,
+      showRunProgressBar = true
     ) => {
       const settingStore = useSettingStore(pinia)
       vi.mocked(settingStore.get).mockImplementation((key) => {
         if (key === 'Comfy.Queue.QPOV2') return qpoV2Enabled
+        if (key === 'Comfy.Queue.ShowRunProgressBar') return showRunProgressBar
         if (key === 'Comfy.UseNewMenu') return 'Top'
         return undefined
       })
@@ -332,6 +334,19 @@ describe('TopMenuSection', () => {
       ).toBe(false)
     })
 
+    it('does not render inline progress summary when run progress bar is disabled', async () => {
+      const pinia = createTestingPinia({ createSpy: vi.fn })
+      configureSettings(pinia, true, false)
+
+      const wrapper = createWrapper({ pinia })
+
+      await nextTick()
+
+      expect(
+        wrapper.findComponent({ name: 'QueueInlineProgressSummary' }).exists()
+      ).toBe(false)
+    })
+
     it('teleports inline progress summary when actionbar is floating', async () => {
       localStorage.setItem('Comfy.MenuPosition.Docked', 'false')
       const actionbarTarget = document.createElement('div')

src/components/TopMenuSection.vue

@@ -56,43 +56,6 @@
               :queue-overlay-expanded="isQueueOverlayExpanded"
               @update:progress-target="updateProgressTarget"
             />
-            <Button
-              v-tooltip.bottom="queueHistoryTooltipConfig"
-              type="destructive"
-              size="md"
-              :aria-pressed="
-                isQueuePanelV2Enabled
-                  ? activeSidebarTabId === 'assets'
-                  : isQueueProgressOverlayEnabled
-                    ? isQueueOverlayExpanded
-                    : undefined
-              "
-              class="relative px-3"
-              data-testid="queue-overlay-toggle"
-              @click="toggleQueueOverlay"
-              @contextmenu.stop.prevent="showQueueContextMenu"
-            >
-              <span class="text-sm font-normal tabular-nums">
-                {{ activeJobsLabel }}
-              </span>
-              <StatusBadge
-                v-if="activeJobsCount > 0"
-                data-testid="active-jobs-indicator"
-                variant="dot"
-                class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
-              />
-              <span class="sr-only">
-                {{
-                  isQueuePanelV2Enabled
-                    ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
-                    : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-                }}
-              </span>
-            </Button>
-            <ContextMenu
-              ref="queueContextMenu"
-              :model="queueContextMenuItems"
-            />
             <CurrentUserButton
               v-if="isLoggedIn && !isIntegratedTabBar"
               class="shrink-0"
@@ -127,13 +90,15 @@
         <div
           class="pointer-events-none absolute left-0 right-0 top-full mt-1 flex justify-end pr-1"
         >
-          <QueueInlineProgressSummary :hidden="isQueueOverlayExpanded" />
+          <QueueInlineProgressSummary
+            :hidden="shouldHideInlineProgressSummary"
+          />
         </div>
       </Teleport>
       <QueueInlineProgressSummary
         v-else-if="shouldShowInlineProgressSummary && !isActionbarFloating"
         class="pr-1"
-        :hidden="isQueueOverlayExpanded"
+        :hidden="shouldHideInlineProgressSummary"
       />
       <QueueNotificationBannerHost
         v-if="shouldShowQueueNotificationBanners"
@@ -146,14 +111,11 @@
 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import ContextMenu from 'primevue/contextmenu'
-import type { MenuItem } from 'primevue/menuitem'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
-import StatusBadge from '@/components/common/StatusBadge.vue'
 import QueueInlineProgressSummary from '@/components/queue/QueueInlineProgressSummary.vue'
 import QueueNotificationBannerHost from '@/components/queue/QueueNotificationBannerHost.vue'
 import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
@@ -163,16 +125,14 @@ import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useQueueFeatureFlags } from '@/composables/queue/useQueueFeatureFlags'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
-import { useCommandStore } from '@/stores/commandStore'
-import { useExecutionStore } from '@/stores/executionStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
+import { useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isDesktop } from '@/platform/distribution/types'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
@@ -185,17 +145,11 @@ const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
-const { t, n } = useI18n()
+const { t } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
-const commandStore = useCommandStore()
-const queueStore = useQueueStore()
-const executionStore = useExecutionStore()
 const executionErrorStore = useExecutionErrorStore()
 const queueUIStore = useQueueUIStore()
-const sidebarTabStore = useSidebarTabStore()
-const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
-const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
   useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
@@ -208,25 +162,19 @@ const isActionbarEnabled = computed(
 const isActionbarFloating = computed(
   () => isActionbarEnabled.value && !isActionbarDocked.value
 )
-const activeJobsLabel = computed(() => {
-  const count = activeJobsCount.value
-  return t(
-    'sideToolbar.queueProgressOverlay.activeJobsShort',
-    { count: n(count) },
-    count
-  )
-})
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
+const { isQueuePanelV2Enabled, isRunProgressBarEnabled } =
+  useQueueFeatureFlags()
 const isQueueProgressOverlayEnabled = computed(
   () => !isQueuePanelV2Enabled.value
 )
 const shouldShowInlineProgressSummary = computed(
-  () => isQueuePanelV2Enabled.value && isActionbarEnabled.value
+  () =>
+    isQueuePanelV2Enabled.value &&
+    isActionbarEnabled.value &&
+    isRunProgressBarEnabled.value
 )
 const shouldShowQueueNotificationBanners = computed(
   () => isActionbarEnabled.value
@@ -241,24 +189,12 @@ const inlineProgressSummaryTarget = computed(() => {
   }
   return progressTarget.value
 })
-const queueHistoryTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
+const shouldHideInlineProgressSummary = computed(
+  () => isQueueProgressOverlayEnabled.value && isQueueOverlayExpanded.value
 )
 const customNodesManagerTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.manageExtensions'))
 )
-const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
-const queueContextMenuItems = computed<MenuItem[]>(() => [
-  {
-    label: t('sideToolbar.queueProgressOverlay.clearQueueTooltip'),
-    icon: 'icon-[lucide--list-x] text-destructive-background',
-    class: '*:text-destructive-background',
-    disabled: queueStore.pendingTasks.length === 0,
-    command: () => {
-      void handleClearQueue()
-    }
-  }
-])
 
 const shouldShowRedDot = computed((): boolean => {
   return shouldShowConflictRedDot.value
@@ -281,27 +217,6 @@ onMounted(() => {
   }
 })
 
-const toggleQueueOverlay = () => {
-  if (isQueuePanelV2Enabled.value) {
-    sidebarTabStore.toggleSidebarTab('assets')
-    return
-  }
-  commandStore.execute('Comfy.Queue.ToggleOverlay')
-}
-
-const showQueueContextMenu = (event: MouseEvent) => {
-  queueContextMenu.value?.show(event)
-}
-
-const handleClearQueue = async () => {
-  const pendingJobIds = queueStore.pendingTasks
-    .map((task) => task.jobId)
-    .filter((id): id is string => typeof id === 'string' && id.length > 0)
-
-  await commandStore.execute('Comfy.ClearPendingTasks')
-  executionStore.clearInitializationByJobIds(pendingJobIds)
-}
-
 const openCustomNodeManager = async () => {
   try {
     await managerState.openManager({