fix: address CodeRabbit review — remove .or(body) fallback, use TestIds, stricter assertions

- Add 'cloud' Playwright project for testing DISTRIBUTION=cloud builds
- Add build:cloud npm script (DISTRIBUTION=cloud vite build)
- Cloud project uses grep: /@cloud/ to run cloud-only tests
- Default chromium project uses grepInvert to exclude @cloud tests
- Add 2 example cloud-only tests (subscribe button, bottom panel toggle)
- Runtime toggle investigation: NOT feasible (breaks tree-shaking)
  → separate build approach chosen

Convention:
  test('feature works @cloud', ...) — cloud-only
  test('feature works @oss', ...) — OSS-only
  test('feature works', ...) — runs in both

Part of: Test Coverage Q2 Overhaul (UTIL-07)

.env_example

@@ -45,3 +45,4 @@ ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579
 # SENTRY_AUTH_TOKEN=private-token # get from sentry
 # SENTRY_ORG=comfy-org
 # SENTRY_PROJECT=cloud-frontend-staging
+# SENTRY_PROJECT_PROD= # prod project slug for sourcemap uploads

.github/workflows/pr-backport.yaml

@@ -348,6 +348,8 @@ jobs:
               PR_NUM=$(echo "${PR_URL}" | grep -o '[0-9]*$')
 
               if [ -n "${PR_NUM}" ]; then
+                gh pr merge "${PR_NUM}" --auto --squash --repo "${{ github.repository }}" \
+                  || echo "::warning::Failed to enable auto-merge for PR #${PR_NUM}"
                 gh pr comment "${PR_NUMBER}" --body "@${PR_AUTHOR} Successfully backported to #${PR_NUM}"
               fi
             else

.github/workflows/pr-request-team-review.yaml

@@ -0,0 +1,24 @@
+# Request team review for PRs from external contributors.
+name: PR:Request Team Review
+
+on:
+  pull_request_target:
+    types: [opened, reopened]
+
+permissions:
+  pull-requests: write
+
+jobs:
+  request-review:
+    if: >-
+      !contains(fromJson('["OWNER","MEMBER","COLLABORATOR"]'),
+                github.event.pull_request.author_association)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Request team review
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          gh pr edit ${{ github.event.pull_request.number }} \
+            --repo ${{ github.repository }} \
+            --add-reviewer Comfy-org/comfy_frontend_devs

.github/workflows/release-biweekly-comfyui.yaml

@@ -162,9 +162,132 @@ jobs:
           echo "- Target version: ${{ needs.resolve-version.outputs.target_version }}" >> $GITHUB_STEP_SUMMARY
           echo "- [View workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)" >> $GITHUB_STEP_SUMMARY
 
+  publish-pypi:
+    needs: [resolve-version, trigger-release-if-needed]
+    if: >
+      always() &&
+      needs.resolve-version.result == 'success' &&
+      (needs.trigger-release-if-needed.result == 'success' ||
+       needs.trigger-release-if-needed.result == 'skipped')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Wait for release PR to be created and merged
+        if: needs.trigger-release-if-needed.result == 'success'
+        env:
+          GH_TOKEN: ${{ secrets.PR_GH_TOKEN }}
+        run: |
+          set -euo pipefail
+
+          TARGET_VERSION="${{ needs.resolve-version.outputs.target_version }}"
+          TARGET_BRANCH="${{ needs.resolve-version.outputs.target_branch }}"
+          echo "Waiting for version bump PR for v${TARGET_VERSION} on ${TARGET_BRANCH} to be merged..."
+
+          # Poll for up to 30 minutes (a human or automation needs to merge the version bump PR)
+          for i in $(seq 1 60); do
+            # Check if the tag exists (release-draft-create creates a tag on merge)
+            if gh api "repos/Comfy-Org/ComfyUI_frontend/git/ref/tags/v${TARGET_VERSION}" --silent 2>/dev/null; then
+              echo "✅ Tag v${TARGET_VERSION} found — release PR has been merged"
+              exit 0
+            fi
+            echo "Attempt $i/60: Tag v${TARGET_VERSION} not found yet, waiting 30s..."
+            sleep 30
+          done
+
+          echo "❌ Timed out waiting for tag v${TARGET_VERSION}"
+          exit 1
+
+      - name: Checkout code at target version
+        uses: actions/checkout@v6
+        with:
+          ref: v${{ needs.resolve-version.outputs.target_version }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Build project
+        env:
+          SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
+          ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
+          ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
+          ENABLE_MINIFY: 'true'
+          USE_PROD_CONFIG: 'true'
+        run: |
+          pnpm install --frozen-lockfile
+          pnpm build
+
+      - name: Set up Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: '3.x'
+
+      - name: Install build dependencies
+        run: python -m pip install build
+
+      - name: Build and publish PyPI package
+        run: |
+          set -euo pipefail
+          mkdir -p comfyui_frontend_package/comfyui_frontend_package/static/
+          cp -r dist/* comfyui_frontend_package/comfyui_frontend_package/static/
+
+      - name: Build pypi package
+        run: python -m build
+        working-directory: comfyui_frontend_package
+        env:
+          COMFYUI_FRONTEND_VERSION: ${{ needs.resolve-version.outputs.target_version }}
+
+      - name: Publish pypi package
+        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
+        with:
+          skip-existing: true
+          password: ${{ secrets.PYPI_TOKEN }}
+          packages-dir: comfyui_frontend_package/dist
+
+      - name: Wait for PyPI propagation
+        run: |
+          set -euo pipefail
+
+          TARGET_VERSION="${{ needs.resolve-version.outputs.target_version }}"
+          PACKAGE="comfyui-frontend-package"
+          echo "Waiting for ${PACKAGE}==${TARGET_VERSION} to be available on PyPI..."
+
+          # Wait up to 15 minutes (polling every 30 seconds)
+          for i in $(seq 1 30); do
+            HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" "https://pypi.org/pypi/${PACKAGE}/${TARGET_VERSION}/json")
+            if [ "$HTTP_CODE" = "200" ]; then
+              echo "✅ ${PACKAGE}==${TARGET_VERSION} is available on PyPI"
+              exit 0
+            fi
+            echo "Attempt $i/30: PyPI returned HTTP ${HTTP_CODE}, waiting 30s..."
+            sleep 30
+          done
+
+          echo "❌ Timed out waiting for ${PACKAGE}==${TARGET_VERSION} on PyPI"
+          exit 1
+
+      - name: Summary
+        run: |
+          echo "## PyPI Publishing" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "- Package: comfyui-frontend-package" >> $GITHUB_STEP_SUMMARY
+          echo "- Version: ${{ needs.resolve-version.outputs.target_version }}" >> $GITHUB_STEP_SUMMARY
+          echo "- Status: ✅ Published and confirmed available" >> $GITHUB_STEP_SUMMARY
+
   create-comfyui-pr:
-    needs: [check-release-week, resolve-version, trigger-release-if-needed]
-    if: always() && needs.resolve-version.result == 'success' && (needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch')
+    needs:
+      [
+        check-release-week,
+        resolve-version,
+        trigger-release-if-needed,
+        publish-pypi
+      ]
+    if: always() && needs.resolve-version.result == 'success' && needs.publish-pypi.result == 'success' && (needs.check-release-week.outputs.is_release_week == 'true' || github.event_name == 'workflow_dispatch')
     runs-on: ubuntu-latest
 
     steps:
@@ -236,11 +359,8 @@ jobs:
           EOF
           )
 
-          # Add release PR note if release was triggered
-          if [ "${{ needs.resolve-version.outputs.needs_release }}" = "true" ]; then
-            RELEASE_NOTE="⚠️ **Release PR must be merged first** - check [release workflow runs](https://github.com/Comfy-Org/ComfyUI_frontend/actions/workflows/release-version-bump.yaml)"
-            BODY=$''"${RELEASE_NOTE}"$'\n\n'"${BODY}"
-          fi
+          PYPI_NOTE="✅ **PyPI package confirmed available** — \`comfyui-frontend-package==${{ needs.resolve-version.outputs.target_version }}\` has been published and verified."
+          BODY=$''"${PYPI_NOTE}"$'\n\n'"${BODY}"
 
           # Save to file for later use
           printf '%s\n' "$BODY" > pr-body.txt
@@ -307,7 +427,11 @@ jobs:
             fi
 
             if [ -n "$EXISTING_PR" ] && [ "$EXISTING_PR" != "null" ]; then
-              echo "PR already exists (#${EXISTING_PR}), updating branch will update the PR"
+              echo "PR already exists (#${EXISTING_PR}), refreshing title/body"
+              gh pr edit "$EXISTING_PR" \
+                --repo Comfy-Org/ComfyUI \
+                --title "Bump comfyui-frontend-package to ${{ needs.resolve-version.outputs.target_version }}" \
+                --body-file ../pr-body.txt
             else
               echo "Failed to create PR and no existing PR found"
               exit 1

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

@@ -99,37 +99,6 @@ jobs:
             ${{ needs.build.outputs.is_prerelease == 'true' }}
           generate_release_notes: true
 
-  publish_pypi:
-    needs: build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-      - name: Download dist artifact
-        uses: actions/download-artifact@v7
-        with:
-          name: dist-files
-      - name: Set up Python
-        uses: actions/setup-python@v6
-        with:
-          python-version: '3.x'
-      - name: Install build dependencies
-        run: python -m pip install build
-      - name: Setup pypi package
-        run: |
-          mkdir -p comfyui_frontend_package/comfyui_frontend_package/static/
-          cp -r dist/* comfyui_frontend_package/comfyui_frontend_package/static/
-      - name: Build pypi package
-        run: python -m build
-        working-directory: comfyui_frontend_package
-        env:
-          COMFYUI_FRONTEND_VERSION: ${{ needs.build.outputs.version }}
-      - name: Publish pypi package
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
-        with:
-          password: ${{ secrets.PYPI_TOKEN }}
-          packages-dir: comfyui_frontend_package/dist
-
   publish_types:
     needs: build
     uses: ./.github/workflows/release-npm-types.yaml
@@ -142,7 +111,6 @@ jobs:
     name: Comment Release Summary
     needs:
       - draft_release
-      - publish_pypi
       - publish_types
     if: success()
     runs-on: ubuntu-latest

CODEOWNERS

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

browser_tests/fixtures/ComfyPage.ts

@@ -25,9 +25,11 @@ import {
 import { Topbar } from './components/Topbar'
 import { CanvasHelper } from './helpers/CanvasHelper'
 import { PerformanceHelper } from './helpers/PerformanceHelper'
+import { QueueHelper } from './helpers/QueueHelper'
 import { ClipboardHelper } from './helpers/ClipboardHelper'
 import { CommandHelper } from './helpers/CommandHelper'
 import { DragDropHelper } from './helpers/DragDropHelper'
+import { FeatureFlagHelper } from './helpers/FeatureFlagHelper'
 import { KeyboardHelper } from './helpers/KeyboardHelper'
 import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
 import { SettingsHelper } from './helpers/SettingsHelper'
@@ -184,9 +186,11 @@ export class ComfyPage {
   public readonly contextMenu: ContextMenu
   public readonly toast: ToastHelper
   public readonly dragDrop: DragDropHelper
+  public readonly featureFlags: FeatureFlagHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
   public readonly perf: PerformanceHelper
+  public readonly queue: QueueHelper
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -227,9 +231,11 @@ export class ComfyPage {
     this.contextMenu = new ContextMenu(page)
     this.toast = new ToastHelper(page)
     this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
+    this.featureFlags = new FeatureFlagHelper(page)
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
     this.perf = new PerformanceHelper(page)
+    this.queue = new QueueHelper(page)
   }
 
   get visibleToasts() {

browser_tests/fixtures/helpers/FeatureFlagHelper.ts

@@ -0,0 +1,73 @@
+import type { Page, Route } from '@playwright/test'
+
+export class FeatureFlagHelper {
+  private featuresRouteHandler: ((route: Route) => void) | null = null
+
+  constructor(private readonly page: Page) {}
+
+  /**
+   * Seed feature flags via `addInitScript` so they are available in
+   * localStorage before the app JS executes on first load.
+   * Must be called before `comfyPage.setup()` / `page.goto()`.
+   *
+   * Note: Playwright init scripts persist for the page lifetime and
+   * cannot be removed. Call this once per test, before navigation.
+   */
+  async seedFlags(flags: Record<string, unknown>): Promise<void> {
+    await this.page.addInitScript((flagMap: Record<string, unknown>) => {
+      for (const [key, value] of Object.entries(flagMap)) {
+        localStorage.setItem(`ff:${key}`, JSON.stringify(value))
+      }
+    }, flags)
+  }
+
+  /**
+   * Set feature flags at runtime via localStorage. Uses the `ff:` prefix
+   * that devFeatureFlagOverride.ts reads in dev mode.
+   * For flags needed before page init, use `seedFlags()` instead.
+   */
+  async setFlags(flags: Record<string, unknown>): Promise<void> {
+    await this.page.evaluate((flagMap: Record<string, unknown>) => {
+      for (const [key, value] of Object.entries(flagMap)) {
+        localStorage.setItem(`ff:${key}`, JSON.stringify(value))
+      }
+    }, flags)
+  }
+
+  async setFlag(name: string, value: unknown): Promise<void> {
+    await this.setFlags({ [name]: value })
+  }
+
+  async clearFlags(): Promise<void> {
+    await this.page.evaluate(() => {
+      const keysToRemove: string[] = []
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i)
+        if (key?.startsWith('ff:')) keysToRemove.push(key)
+      }
+      keysToRemove.forEach((k) => {
+        localStorage.removeItem(k)
+      })
+    })
+  }
+
+  /**
+   * Mock server feature flags via route interception on /api/features.
+   */
+  async mockServerFeatures(features: Record<string, unknown>): Promise<void> {
+    this.featuresRouteHandler = (route: Route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(features)
+      })
+    await this.page.route('**/api/features', this.featuresRouteHandler)
+  }
+
+  async clearMocks(): Promise<void> {
+    if (this.featuresRouteHandler) {
+      await this.page.unroute('**/api/features', this.featuresRouteHandler)
+      this.featuresRouteHandler = null
+    }
+  }
+}

browser_tests/fixtures/helpers/QueueHelper.ts

@@ -0,0 +1,79 @@
+import type { Page, Route } from '@playwright/test'
+
+export class QueueHelper {
+  private queueRouteHandler: ((route: Route) => void) | null = null
+  private historyRouteHandler: ((route: Route) => void) | null = null
+
+  constructor(private readonly page: Page) {}
+
+  /**
+   * Mock the /api/queue endpoint to return specific queue state.
+   */
+  async mockQueueState(
+    running: number = 0,
+    pending: number = 0
+  ): Promise<void> {
+    this.queueRouteHandler = (route: Route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          queue_running: Array.from({ length: running }, (_, i) => [
+            i,
+            `running-${i}`,
+            {},
+            {},
+            []
+          ]),
+          queue_pending: Array.from({ length: pending }, (_, i) => [
+            i,
+            `pending-${i}`,
+            {},
+            {},
+            []
+          ])
+        })
+      })
+    await this.page.route('**/api/queue', this.queueRouteHandler)
+  }
+
+  /**
+   * Mock the /api/history endpoint with completed/failed job entries.
+   */
+  async mockHistory(
+    jobs: Array<{ promptId: string; status: 'success' | 'error' }>
+  ): Promise<void> {
+    const history: Record<string, unknown> = {}
+    for (const job of jobs) {
+      history[job.promptId] = {
+        prompt: [0, job.promptId, {}, {}, []],
+        outputs: {},
+        status: {
+          status_str: job.status === 'success' ? 'success' : 'error',
+          completed: true
+        }
+      }
+    }
+    this.historyRouteHandler = (route: Route) =>
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(history)
+      })
+    await this.page.route('**/api/history**', this.historyRouteHandler)
+  }
+
+  /**
+   * Clear all route mocks set by this helper.
+   */
+  async clearMocks(): Promise<void> {
+    if (this.queueRouteHandler) {
+      await this.page.unroute('**/api/queue', this.queueRouteHandler)
+      this.queueRouteHandler = null
+    }
+    if (this.historyRouteHandler) {
+      await this.page.unroute('**/api/history**', this.historyRouteHandler)
+      this.historyRouteHandler = null
+    }
+  }
+}

browser_tests/fixtures/selectors.ts

@@ -5,69 +5,71 @@
 
 export const TestIds = {
   sidebar: {
-    toolbar: 'side-toolbar',
-    nodeLibrary: 'node-library-tree',
-    nodeLibrarySearch: 'node-library-search',
-    workflows: 'workflows-sidebar',
-    modeToggle: 'mode-toggle'
+    toolbar: "side-toolbar",
+    nodeLibrary: "node-library-tree",
+    nodeLibrarySearch: "node-library-search",
+    workflows: "workflows-sidebar",
+    modeToggle: "mode-toggle",
   },
   tree: {
-    folder: 'tree-folder',
-    leaf: 'tree-leaf',
-    node: 'tree-node'
+    folder: "tree-folder",
+    leaf: "tree-leaf",
+    node: "tree-node",
   },
   canvas: {
-    main: 'graph-canvas',
-    contextMenu: 'canvas-context-menu',
-    toggleMinimapButton: 'toggle-minimap-button',
-    toggleLinkVisibilityButton: 'toggle-link-visibility-button'
+    main: "graph-canvas",
+    contextMenu: "canvas-context-menu",
+    toggleMinimapButton: "toggle-minimap-button",
+    toggleLinkVisibilityButton: "toggle-link-visibility-button",
   },
   dialogs: {
-    settings: 'settings-dialog',
-    settingsContainer: 'settings-container',
-    settingsTabAbout: 'settings-tab-about',
-    confirm: 'confirm-dialog',
-    missingNodes: 'missing-nodes-warning',
-    about: 'about-panel',
-    whatsNewSection: 'whats-new-section'
+    settings: "settings-dialog",
+    settingsContainer: "settings-container",
+    settingsTabAbout: "settings-tab-about",
+    confirm: "confirm-dialog",
+    errorOverlay: "error-overlay",
+    missingNodeCard: "missing-node-card",
+    about: "about-panel",
+    whatsNewSection: "whats-new-section",
   },
   topbar: {
-    queueButton: 'queue-button',
-    queueModeMenuTrigger: 'queue-mode-menu-trigger',
-    saveButton: 'save-workflow-button'
+    queueButton: "queue-button",
+    queueModeMenuTrigger: "queue-mode-menu-trigger",
+    saveButton: "save-workflow-button",
+    subscribeButton: "topbar-subscribe-button",
   },
   nodeLibrary: {
-    bookmarksSection: 'node-library-bookmarks-section'
+    bookmarksSection: "node-library-bookmarks-section",
   },
   propertiesPanel: {
-    root: 'properties-panel'
+    root: "properties-panel",
   },
   node: {
-    titleInput: 'node-title-input'
+    titleInput: "node-title-input",
   },
   selectionToolbox: {
-    colorPickerButton: 'color-picker-button',
-    colorPickerCurrentColor: 'color-picker-current-color',
-    colorBlue: 'blue',
-    colorRed: 'red'
+    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'
+    decrement: "decrement",
+    increment: "increment",
+    domWidgetTextarea: "dom-widget-textarea",
+    subgraphEnterButton: "subgraph-enter-button",
   },
   breadcrumb: {
-    subgraph: 'subgraph-breadcrumb'
+    subgraph: "subgraph-breadcrumb",
   },
   templates: {
-    content: 'template-workflows-content',
-    workflowCard: (id: string) => `template-workflow-${id}`
+    content: "template-workflows-content",
+    workflowCard: (id: string) => `template-workflow-${id}`,
   },
   user: {
-    currentUserIndicator: 'current-user-indicator'
-  }
-} as const
+    currentUserIndicator: "current-user-indicator",
+  },
+} as const;
 
 /**
  * Helper type for accessing nested TestIds (excludes function values)
@@ -88,4 +90,4 @@ export type TestIdValue =
       (typeof TestIds.templates)[keyof typeof TestIds.templates],
       (id: string) => string
     >
-  | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.user)[keyof typeof TestIds.user];

browser_tests/tests/cloud.spec.ts

@@ -0,0 +1,28 @@
+import { expect } from "@playwright/test";
+
+import { comfyPageFixture as test } from "../fixtures/ComfyPage";
+import { TestIds } from "../fixtures/selectors";
+
+test.describe("Cloud distribution UI @cloud", () => {
+  test("subscribe button is visible for free-tier users @cloud", async ({
+    comfyPage,
+  }) => {
+    const subscribeButton = comfyPage.page.getByTestId(
+      TestIds.topbar.subscribeButton,
+    );
+    await expect(subscribeButton).toBeAttached();
+  });
+
+  test("bottom panel toggle is hidden in cloud mode @cloud", async ({
+    comfyPage,
+  }) => {
+    const sideToolbar = comfyPage.page.getByTestId(TestIds.sidebar.toolbar);
+    await expect(sideToolbar).toBeVisible();
+
+    // In cloud mode, the bottom panel toggle button should not be rendered
+    const bottomPanelToggle = sideToolbar.getByRole("button", {
+      name: /bottom panel|terminal/i,
+    });
+    await expect(bottomPanelToggle).toHaveCount(0);
+  });
+});

browser_tests/tests/dialog.spec.ts

@@ -9,63 +9,114 @@ test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
 })
 
-test.describe('Load workflow warning', { tag: '@ui' }, () => {
-  test('Should display a warning when loading a workflow with missing nodes', async ({
+test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+  })
+
+  test('Should show error overlay when loading a workflow with missing nodes', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
 
-    const missingNodesWarning = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodes
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
     )
-    await expect(missingNodesWarning).toBeVisible()
+    await expect(errorOverlay).toBeVisible()
+
+    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    await expect(missingNodesTitle).toBeVisible()
   })
 
-  test('Should display a warning when loading a workflow with missing nodes in subgraphs', async ({
+  test('Should show error overlay when loading a workflow with missing nodes in subgraphs', async ({
     comfyPage
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes_in_subgraph')
 
-    const missingNodesWarning = comfyPage.page.getByTestId(
-      TestIds.dialogs.missingNodes
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
     )
-    await expect(missingNodesWarning).toBeVisible()
+    await expect(errorOverlay).toBeVisible()
 
-    // Verify the missing node text includes subgraph context
-    const warningText = await missingNodesWarning.textContent()
-    expect(warningText).toContain('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    expect(warningText).toContain('in subgraph')
+    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    await expect(missingNodesTitle).toBeVisible()
+
+    // Click "See Errors" to open the errors tab and verify subgraph node content
+    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await expect(errorOverlay).not.toBeVisible()
+
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await expect(missingNodeCard).toBeVisible()
+
+    // Expand the pack group row to reveal node type names
+    await missingNodeCard
+      .getByRole('button', { name: /expand/i })
+      .first()
+      .click()
+    await expect(
+      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+    ).toBeVisible()
+  })
+
+  test('Should show MissingNodeCard in errors tab when clicking See Errors', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
+
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).toBeVisible()
+
+    // Click "See Errors" to open the right side panel errors tab
+    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await expect(errorOverlay).not.toBeVisible()
+
+    // Verify MissingNodeCard is rendered in the errors tab
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await expect(missingNodeCard).toBeVisible()
   })
 })
 
-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
+test('Does not resurface missing nodes on undo/redo', async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+  await comfyPage.settings.setSetting(
+    'Comfy.RightSidePanel.ShowErrorsTab',
+    true
   )
-
   await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-  await expect(missingNodesWarning).toBeVisible()
-  await comfyPage.page.keyboard.press('Escape')
-  await expect(missingNodesWarning).not.toBeVisible()
 
-  // Wait for any async operations to complete after dialog closes
+  const errorOverlay = comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+  await expect(errorOverlay).toBeVisible()
+
+  // Dismiss the error overlay
+  await errorOverlay.getByRole('button', { name: 'Dismiss' }).click()
+  await expect(errorOverlay).not.toBeVisible()
+
+  // Make a change to the graph by moving a node
+  await comfyPage.canvas.click()
+  await comfyPage.nextFrame()
+  await comfyPage.page.keyboard.press('Control+a')
+  await comfyPage.page.mouse.move(400, 300)
+  await comfyPage.page.mouse.down()
+  await comfyPage.page.mouse.move(450, 350, { steps: 5 })
+  await comfyPage.page.mouse.up()
   await comfyPage.nextFrame()
 
-  // Make a change to the graph
-  await comfyPage.canvasOps.doubleClick()
-  await comfyPage.searchBox.fillAndSelectFirstNode('KSampler')
-
-  // Undo and redo the change
+  // Undo and redo should not resurface the error overlay
   await comfyPage.keyboard.undo()
-  await expect(async () => {
-    await expect(missingNodesWarning).not.toBeVisible()
-  }).toPass({ timeout: 5000 })
+  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
 
   await comfyPage.keyboard.redo()
-  await expect(async () => {
-    await expect(missingNodesWarning).not.toBeVisible()
-  }).toPass({ timeout: 5000 })
+  await expect(errorOverlay).not.toBeVisible({ timeout: 5000 })
 })
 
 test.describe('Execution error', () => {
@@ -86,7 +137,9 @@ test.describe('Execution error', () => {
     await comfyPage.nextFrame()
 
     // Wait for the error overlay to be visible
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
   })
 })
@@ -110,7 +163,9 @@ test.describe('Missing models in Error Tab', () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
 
     const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
@@ -124,7 +179,9 @@ test.describe('Missing models in Error Tab', () => {
       'missing/missing_models_from_node_properties'
     )
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
 
     const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
@@ -141,7 +198,9 @@ test.describe('Missing models in Error Tab', () => {
     const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
     await expect(missingModelsTitle).not.toBeVisible()
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).not.toBeVisible()
   })
 
@@ -152,7 +211,9 @@ test.describe('Missing models in Error Tab', () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const errorOverlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
     await expect(errorOverlay).toBeVisible()
 
     const downloadAllButton = comfyPage.page.getByText('Download all')

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -60,6 +60,15 @@ test.describe('Graph Canvas Menu', { tag: ['@screenshot', '@canvas'] }, () => {
     await comfyPage.nextFrame()
   })
 
+  test('Fit view button is present and clickable', async ({ comfyPage }) => {
+    const fitViewButton = comfyPage.page
+      .locator('button')
+      .filter({ has: comfyPage.page.locator('.icon-\\[lucide--focus\\]') })
+    await expect(fitViewButton).toBeVisible()
+    await fitViewButton.click()
+    await comfyPage.nextFrame()
+  })
+
   test('Zoom controls popup opens and closes', async ({ comfyPage }) => {
     // Find the zoom button by its percentage text content
     const zoomButton = comfyPage.page.locator('button').filter({

browser_tests/tests/groupNode.spec.ts

@@ -5,6 +5,7 @@ import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/w
 import type { ComfyPage } from '../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeLibrarySidebarTab } from '../fixtures/components/SidebarTab'
+import { TestIds } from '../fixtures/selectors'
 import { DefaultGraphPositions } from '../fixtures/constants/defaultGraphPositions'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
@@ -224,7 +225,7 @@ test.describe('Group Node', { tag: '@node' }, () => {
     await comfyPage.workflow.loadWorkflow('groupnodes/legacy_group_node')
     expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
     await expect(
-      comfyPage.page.locator('.comfy-missing-nodes')
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     ).not.toBeVisible()
   })
 

browser_tests/tests/nodeDisplay.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
@@ -38,7 +39,7 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
     await comfyPage.workflow.loadWorkflow('inputs/only_optional_inputs')
     expect(await comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
     await expect(
-      comfyPage.page.locator('.comfy-missing-nodes')
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
     ).not.toBeVisible()
 
     // If the node's multiline text widget is visible, then it was loaded successfully
@@ -73,10 +74,6 @@ test.describe('Optional input', { tag: ['@screenshot', '@node'] }, () => {
     await expect(comfyPage.canvas).toHaveScreenshot('simple_slider.png')
   })
   test('unknown converted widget', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting(
-      'Comfy.Workflow.ShowMissingNodesWarning',
-      false
-    )
     await comfyPage.workflow.loadWorkflow(
       'missing/missing_nodes_converted_widget'
     )

browser_tests/tests/nodeLibraryEssentials.spec.ts

@@ -0,0 +1,110 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('Node Library Essentials Tab', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+    // Enable the essentials feature flag via the reactive serverFeatureFlags ref.
+    // In production, this flag comes via WebSocket or remoteConfig (cloud only).
+    // The localhost test server has neither, so we set it directly.
+    await comfyPage.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        node_library_essentials_enabled: true
+      }
+    })
+
+    // Register a mock essential node so the essentials tab has content.
+    await comfyPage.page.evaluate(() => {
+      return window.app!.registerNodeDef('TestEssentialNode', {
+        name: 'TestEssentialNode',
+        display_name: 'Test Essential Node',
+        category: 'essentials_test',
+        input: { required: {}, optional: {} },
+        output: ['IMAGE'],
+        output_name: ['image'],
+        output_is_list: [false],
+        output_node: false,
+        python_module: 'comfy_essentials.nodes',
+        description: 'Mock essential node for testing',
+        essentials_category: 'Image Generation'
+      })
+    })
+  })
+
+  test('Node library opens via sidebar', async ({ comfyPage }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const sidebarContent = comfyPage.page.locator(
+      '.comfy-vue-side-bar-container'
+    )
+    await expect(sidebarContent).toBeVisible()
+  })
+
+  test('Essentials tab is visible in node library', async ({ comfyPage }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const essentialsTab = comfyPage.page.getByRole('tab', {
+      name: /essentials/i
+    })
+    await expect(essentialsTab).toBeVisible()
+  })
+
+  test('Clicking essentials tab shows essential node cards', async ({
+    comfyPage
+  }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const essentialsTab = comfyPage.page.getByRole('tab', {
+      name: /essentials/i
+    })
+    await essentialsTab.click()
+
+    const essentialCards = comfyPage.page.locator('[data-node-name]')
+    await expect(essentialCards.first()).toBeVisible()
+  })
+
+  test('Essential node cards have node names', async ({ comfyPage }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const essentialsTab = comfyPage.page.getByRole('tab', {
+      name: /essentials/i
+    })
+    await essentialsTab.click()
+
+    const firstCard = comfyPage.page.locator('[data-node-name]').first()
+    await expect(firstCard).toBeVisible()
+
+    const nodeName = await firstCard.getAttribute('data-node-name')
+    expect(nodeName).toBeTruthy()
+    expect(nodeName!.length).toBeGreaterThan(0)
+  })
+
+  test('Node library can switch between all and essentials tabs', async ({
+    comfyPage
+  }) => {
+    const tabButton = comfyPage.page.locator('.node-library-tab-button')
+    await tabButton.click()
+
+    const essentialsTab = comfyPage.page.getByRole('tab', {
+      name: /essentials/i
+    })
+    const allNodesTab = comfyPage.page.getByRole('tab', { name: /^all$/i })
+
+    await essentialsTab.click()
+    await expect(essentialsTab).toHaveAttribute('aria-selected', 'true')
+    const essentialCards = comfyPage.page.locator('[data-node-name]')
+    await expect(essentialCards.first()).toBeVisible()
+
+    await allNodesTab.click()
+    await expect(allNodesTab).toHaveAttribute('aria-selected', 'true')
+    await expect(essentialsTab).toHaveAttribute('aria-selected', 'false')
+  })
+})

browser_tests/tests/pasteImageContextMenu.spec.ts

@@ -0,0 +1,54 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('Paste Image context menu option', { tag: ['@node'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+  })
+
+  test('shows Paste Image in LoadImage node context menu', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+
+    const loadImageNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    )[0]
+
+    const nodeEl = comfyPage.page.locator(
+      `[data-node-id="${loadImageNode.id}"]`
+    )
+    await nodeEl.click({ button: 'right' })
+    const menu = comfyPage.page.locator('.p-contextmenu')
+    await menu.waitFor({ state: 'visible' })
+    const menuLabels = await menu
+      .locator('[role="menuitem"] span.flex-1')
+      .allInnerTexts()
+
+    expect(menuLabels).toContain('Paste Image')
+  })
+
+  test('does not show Paste Image on output-only image nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('nodes/single_save_image_node')
+
+    const saveImageNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('SaveImage')
+    )[0]
+
+    const nodeEl = comfyPage.page.locator(
+      `[data-node-id="${saveImageNode.id}"]`
+    )
+    await nodeEl.click({ button: 'right' })
+    const menu = comfyPage.page.locator('.p-contextmenu')
+    await menu.waitFor({ state: 'visible' })
+    const menuLabels = await menu
+      .locator('[role="menuitem"] span.flex-1')
+      .allInnerTexts()
+
+    expect(menuLabels).not.toContain('Paste Image')
+    expect(menuLabels).not.toContain('Open Image')
+  })
+})

browser_tests/tests/primitiveNode.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { TestIds } from '../fixtures/selectors'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
@@ -61,11 +62,17 @@ test.describe('Primitive Node', { tag: ['@screenshot', '@node'] }, () => {
   test('Report missing nodes when connect to missing node', async ({
     comfyPage
   }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
     await comfyPage.workflow.loadWorkflow(
       'primitive/primitive_node_connect_missing_node'
     )
-    // 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()
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).toBeVisible()
   })
 })

browser_tests/tests/sidebar/workflows.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { TestIds } from '../../fixtures/selectors'
 
 test.describe('Workflows sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -234,23 +235,29 @@ test.describe('Workflows sidebar', () => {
   test('Does not report warning when switching between opened workflows', async ({
     comfyPage
   }) => {
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
     await comfyPage.workflow.loadWorkflow('missing/missing_nodes')
-    await comfyPage.page
-      .locator('.p-dialog')
-      .getByRole('button', { name: 'Close' })
-      .click({ force: true })
-    await comfyPage.page.locator('.p-dialog').waitFor({ state: 'hidden' })
+
+    const errorOverlay = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorOverlay
+    )
+    await expect(errorOverlay).toBeVisible()
+
+    // Dismiss the error overlay
+    await errorOverlay.getByRole('button', { name: 'Dismiss' }).click()
+    await expect(errorOverlay).not.toBeVisible()
 
     // Load blank workflow
     await comfyPage.menu.workflowsTab.open()
     await comfyPage.command.executeCommand('Comfy.NewBlankWorkflow')
 
-    // Switch back to the missing_nodes workflow
+    // Switch back to the missing_nodes workflow — overlay should not reappear
     await comfyPage.menu.workflowsTab.switchToWorkflow('missing_nodes')
 
-    await expect(
-      comfyPage.page.locator('.comfy-missing-nodes')
-    ).not.toBeVisible()
+    await expect(errorOverlay).not.toBeVisible()
   })
 
   test('Can close saved-workflows from the open workflows section', async ({

browser_tests/tests/widgetCopyButton.spec.ts

@@ -0,0 +1,45 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('Widget copy button', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+
+    // Add a PreviewAny node which has a read-only textarea with a copy button
+    await comfyPage.page.evaluate(() => {
+      const node = window.LiteGraph!.createNode('PreviewAny')
+      window.app!.graph.add(node)
+    })
+
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('Copy button has correct aria-label', async ({ comfyPage }) => {
+    const copyButton = comfyPage.page
+      .locator('[data-node-id] button[aria-label]')
+      .filter({ has: comfyPage.page.locator('.icon-\\[lucide--copy\\]') })
+      .first()
+    await expect(copyButton).toBeAttached()
+    await expect(copyButton).toHaveAttribute('aria-label', /copy/i)
+  })
+
+  test('Copy button exists within textarea widget group container', async ({
+    comfyPage
+  }) => {
+    const container = comfyPage.page
+      .locator('[data-node-id] div.group:has(textarea[readonly])')
+      .first()
+    await expect(container).toBeVisible()
+    await container.hover()
+    await comfyPage.nextFrame()
+
+    const copyButton = container.locator('button').filter({
+      has: comfyPage.page.locator('.icon-\\[lucide--copy\\]')
+    })
+    await expect(copyButton.first()).toBeAttached()
+  })
+})

docs/SETTINGS.md

@@ -6,13 +6,13 @@ ComfyUI frontend uses a comprehensive settings system for user preferences with
 
 ### Settings Architecture
 
-- Settings are defined as `SettingParams` in `src/constants/coreSettings.ts`
+- Settings are defined as `SettingParams` in `src/platform/settings/constants/coreSettings.ts`
 - Registered at app startup, loaded/saved via `useSettingStore` (Pinia)
 - Persisted per user via backend `/settings` endpoint
 - If a value hasn't been set by the user, the store returns the computed default
 
 ```typescript
-// From src/stores/settingStore.ts:105-122
+// From src/platform/settings/settingStore.ts:105-122
 function getDefaultValue<K extends keyof Settings>(
   key: K
 ): Settings[K] | undefined {
@@ -50,7 +50,7 @@ await newUserService().initializeIfNewUser(settingStore)
 You can compute defaults dynamically using function defaults that access runtime context:
 
 ```typescript
-// From src/constants/coreSettings.ts:94-101
+// From src/platform/settings/constants/coreSettings.ts:94-101
 {
   id: 'Comfy.Sidebar.Size',
   // Default to small if the window is less than 1536px(2xl) wide
@@ -59,7 +59,7 @@ You can compute defaults dynamically using function defaults that access runtime
 ```
 
 ```typescript
-// From src/constants/coreSettings.ts:306
+// From src/platform/settings/constants/coreSettings.ts:306
 {
   id: 'Comfy.Locale',
   defaultValue: () => navigator.language.split('-')[0] || 'en'
@@ -71,7 +71,7 @@ You can compute defaults dynamically using function defaults that access runtime
 You can vary defaults by installed frontend version using `defaultsByInstallVersion`:
 
 ```typescript
-// From src/stores/settingStore.ts:129-150
+// From src/platform/settings/settingStore.ts:129-150
 function getVersionedDefaultValue<
   K extends keyof Settings,
   TValue = Settings[K]
@@ -101,7 +101,7 @@ function getVersionedDefaultValue<
 Example versioned defaults from codebase:
 
 ```typescript
-// From src/constants/coreSettings.ts:38-40
+// From src/platform/settings/constants/coreSettings.ts:38-40
 {
   id: 'Comfy.Graph.LinkReleaseAction',
   defaultValue: LinkReleaseTriggerAction.CONTEXT_MENU,
@@ -168,7 +168,7 @@ Here are actual settings showing different patterns:
 The initial installed version is captured for new users to ensure versioned defaults remain stable:
 
 ```typescript
-// From src/services/newUserService.ts:49-53
+// From src/services/useNewUserService.ts
 await settingStore.set('Comfy.InstalledVersion', __COMFYUI_FRONTEND_VERSION__)
 ```
 
@@ -220,7 +220,7 @@ await settingStore.set('Comfy.InstalledVersion', __COMFYUI_FRONTEND_VERSION__)
 Values are stored per user via the backend. The store writes through API and falls back to defaults when not set:
 
 ```typescript
-// From src/stores/settingStore.ts:73-75
+// From src/platform/settings/settingStore.ts:73-75
 onChange(settingsById.value[key], newValue, oldValue)
 settingValues.value[key] = newValue
 await api.storeSetting(key, newValue)
@@ -245,7 +245,7 @@ await settingStore.set('Comfy.SomeSetting', newValue)
 Settings support migration from deprecated values:
 
 ```typescript
-// From src/stores/settingStore.ts:68-69, 172-175
+// From src/platform/settings/settingStore.ts:68-69, 172-175
 const newValue = tryMigrateDeprecatedValue(settingsById.value[key], clonedValue)
 
 // Migration happens during addSetting for existing values:
@@ -262,7 +262,7 @@ if (settingValues.value[setting.id] !== undefined) {
 Settings can define onChange callbacks that receive the setting definition, new value, and old value:
 
 ```typescript
-// From src/stores/settingStore.ts:73, 177
+// From src/platform/settings/settingStore.ts:73, 177
 onChange(settingsById.value[key], newValue, oldValue) // During set()
 onChange(setting, get(setting.id), undefined) // During addSetting()
 ```

docs/testing/unit-testing.md

@@ -95,7 +95,7 @@ Testing with ComfyUI workflow files:
 ```typescript
 // Example from: tests-ui/tests/comfyWorkflow.test.ts
 import { describe, expect, it } from 'vitest'
-import { validateComfyWorkflow } from '@/domains/workflow/validation/schemas/workflowSchema'
+import { validateComfyWorkflow } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { defaultGraph } from '@/scripts/defaultGraph'
 
 describe('workflow validation', () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.42.6",
+  "version": "1.43.1",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -8,6 +8,7 @@
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "type": "module",
   "scripts": {
+    "build:cloud": "cross-env DISTRIBUTION=cloud NODE_OPTIONS='--max-old-space-size=8192' nx build",
     "build:desktop": "nx build @comfyorg/desktop-ui",
     "build-storybook": "storybook build",
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",

playwright.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
       timeout: 15000,
-      grepInvert: /@mobile|@perf/ // Run all tests except those tagged with @mobile or @perf
+      grepInvert: /@mobile|@perf|@cloud/ // Run all tests except those tagged with @mobile, @perf, or @cloud
     },
 
     {
@@ -74,6 +74,14 @@ export default defineConfig({
     //   use: { ...devices['Desktop Safari'] },
     // },
 
+    {
+      name: 'cloud',
+      use: { ...devices['Desktop Chrome'] },
+      timeout: 15000,
+      grep: /@cloud/, // Run only tests tagged with @cloud
+      grepInvert: /@oss/ // Exclude tests tagged with @oss
+    },
+
     /* Test against mobile viewports. */
     {
       name: 'mobile-chrome',

src/components/builder/AppModeWidgetList.vue

@@ -201,7 +201,7 @@ function nodeToNodeData(node: LGraphNode) {
           :node-data
           :class="
             cn(
-              'gap-y-3 rounded-lg py-1 *:has-[textarea]:h-50 **:[.col-span-2]:grid-cols-1 not-md:**:[.h-7]:h-10',
+              'gap-y-3 rounded-lg py-1 [&_textarea]:resize-y **:[.col-span-2]:grid-cols-1 not-md:**:[.h-7]:h-10',
               nodeData.hasErrors && 'ring-2 ring-node-stroke-error ring-inset'
             )
           "

src/components/common/ComfyImage.vue

@@ -1,35 +1,40 @@
 <!-- A image with placeholder fallback on error -->
 <template>
-  <span
-    v-if="!imageBroken"
-    class="comfy-image-wrap"
-    :class="[{ contain: contain }]"
-  >
+  <span v-if="!error" :class="cn('contents', contain && 'relative')">
     <img
       v-if="contain"
       :src="src"
       :data-test="src"
-      class="comfy-image-blur"
+      class="absolute inset-0 object-cover"
       :style="{ 'background-image': `url(${src})` }"
       :alt="alt"
-      @error="handleImageError"
     />
     <img
       :src="src"
-      class="comfy-image-main"
-      :class="classProp"
+      :class="
+        cn(
+          'z-1 size-full object-cover object-center',
+          contain && 'absolute object-contain backdrop-blur-[10px]',
+          classProp
+        )
+      "
       :alt="alt"
-      @error="handleImageError"
     />
   </span>
-  <div v-if="imageBroken" class="broken-image-placeholder">
-    <i class="pi pi-image" />
+  <div
+    v-if="error"
+    class="m-8 flex size-full flex-col items-center justify-center"
+  >
+    <i class="pi pi-image mb-2 text-5xl" />
     <span>{{ $t('g.imageFailedToLoad') }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useImage } from '@vueuse/core'
+import { computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
 
 const {
   src,
@@ -46,58 +51,5 @@ const {
   alt?: string
 }>()
 
-const imageBroken = ref(false)
-const handleImageError = () => {
-  imageBroken.value = true
-}
+const { error } = useImage(computed(() => ({ src, alt })))
 </script>
-
-<style scoped>
-.comfy-image-wrap {
-  display: contents;
-}
-
-.comfy-image-blur {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.comfy-image-main {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  z-index: 1;
-}
-
-.contain .comfy-image-wrap {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.contain .comfy-image-main {
-  object-fit: contain;
-  backdrop-filter: blur(10px);
-  position: absolute;
-}
-
-.broken-image-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  margin: 2rem;
-}
-
-.broken-image-placeholder i {
-  font-size: 3rem;
-  margin-bottom: 0.5rem;
-}
-</style>

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

@@ -1,199 +0,0 @@
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import Message from 'primevue/message'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
-
-// Mock the stores
-vi.mock('@/stores/systemStatsStore', () => ({
-  useSystemStatsStore: vi.fn()
-}))
-
-const createMockNode = (type: string, version?: string): LGraphNode =>
-  // @ts-expect-error - Creating a partial mock of LGraphNode for testing purposes.
-  // We only need specific properties for our tests, not the full LGraphNode interface.
-  ({
-    type,
-    properties: { cnr_id: 'comfy-core', ver: version },
-    id: 1,
-    title: type,
-    pos: [0, 0],
-    size: [100, 100],
-    flags: {},
-    graph: null,
-    mode: 0,
-    inputs: [],
-    outputs: []
-  })
-
-describe('MissingCoreNodesMessage', () => {
-  const mockSystemStatsStore = {
-    systemStats: null as { system?: { comfyui_version?: string } } | null,
-    refetchSystemStats: vi.fn()
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    // Reset the mock store state
-    mockSystemStatsStore.systemStats = null
-    mockSystemStatsStore.refetchSystemStats = vi.fn()
-    // @ts-expect-error - Mocking the return value of useSystemStatsStore for testing.
-    // The actual store has more properties, but we only need these for our tests.
-    useSystemStatsStore.mockReturnValue(mockSystemStatsStore)
-  })
-
-  const mountComponent = (props = {}) => {
-    return mount(MissingCoreNodesMessage, {
-      global: {
-        plugins: [PrimeVue],
-        components: { Message },
-        mocks: {
-          $t: (key: string, params?: { version?: string }) => {
-            const translations: Record<string, string> = {
-              'loadWorkflowWarning.outdatedVersion': `Some nodes require a newer version of ComfyUI (current: ${params?.version}). Please update to use all nodes.`,
-              'loadWorkflowWarning.outdatedVersionGeneric':
-                'Some nodes require a newer version of ComfyUI. Please update to use all nodes.',
-              'loadWorkflowWarning.coreNodesFromVersion': `Requires ComfyUI ${params?.version}:`
-            }
-            return translations[key] || key
-          }
-        }
-      },
-      props: {
-        missingCoreNodes: {},
-        ...props
-      }
-    })
-  }
-
-  it('does not render when there are no missing core nodes', () => {
-    const wrapper = mountComponent()
-    expect(wrapper.findComponent(Message).exists()).toBe(false)
-  })
-
-  it('renders message when there are missing core nodes', async () => {
-    const missingCoreNodes = {
-      '1.2.0': [createMockNode('TestNode', '1.2.0')]
-    }
-
-    const wrapper = mountComponent({ missingCoreNodes })
-    await nextTick()
-
-    expect(wrapper.findComponent(Message).exists()).toBe(true)
-  })
-
-  it('displays current ComfyUI version when available', async () => {
-    // Set systemStats directly (store auto-fetches with useAsyncState)
-    mockSystemStatsStore.systemStats = {
-      system: { comfyui_version: '1.0.0' }
-    }
-
-    const missingCoreNodes = {
-      '1.2.0': [createMockNode('TestNode', '1.2.0')]
-    }
-
-    const wrapper = mountComponent({ missingCoreNodes })
-
-    // Wait for component to render
-    await nextTick()
-
-    // No need to check if fetchSystemStats was called since useAsyncState auto-fetches
-    expect(wrapper.text()).toContain(
-      'Some nodes require a newer version of ComfyUI (current: 1.0.0)'
-    )
-  })
-
-  it('displays generic message when version is unavailable', async () => {
-    // No systemStats set - version unavailable
-    mockSystemStatsStore.systemStats = null
-
-    const missingCoreNodes = {
-      '1.2.0': [createMockNode('TestNode', '1.2.0')]
-    }
-
-    const wrapper = mountComponent({ missingCoreNodes })
-
-    // Wait for the async operations to complete
-    await nextTick()
-    await new Promise((resolve) => setTimeout(resolve, 0))
-    await nextTick()
-
-    expect(wrapper.text()).toContain(
-      'Some nodes require a newer version of ComfyUI. Please update to use all nodes.'
-    )
-  })
-
-  it('groups nodes by version and displays them', async () => {
-    const missingCoreNodes = {
-      '1.2.0': [
-        createMockNode('NodeA', '1.2.0'),
-        createMockNode('NodeB', '1.2.0')
-      ],
-      '1.3.0': [createMockNode('NodeC', '1.3.0')]
-    }
-
-    const wrapper = mountComponent({ missingCoreNodes })
-    await nextTick()
-
-    const text = wrapper.text()
-    expect(text).toContain('Requires ComfyUI 1.3.0:')
-    expect(text).toContain('NodeC')
-    expect(text).toContain('Requires ComfyUI 1.2.0:')
-    expect(text).toContain('NodeA, NodeB')
-  })
-
-  it('sorts versions in descending order', async () => {
-    const missingCoreNodes = {
-      '1.1.0': [createMockNode('Node1', '1.1.0')],
-      '1.3.0': [createMockNode('Node3', '1.3.0')],
-      '1.2.0': [createMockNode('Node2', '1.2.0')]
-    }
-
-    const wrapper = mountComponent({ missingCoreNodes })
-    await nextTick()
-
-    const text = wrapper.text()
-    const version13Index = text.indexOf('1.3.0')
-    const version12Index = text.indexOf('1.2.0')
-    const version11Index = text.indexOf('1.1.0')
-
-    expect(version13Index).toBeLessThan(version12Index)
-    expect(version12Index).toBeLessThan(version11Index)
-  })
-
-  it('removes duplicate node names within the same version', async () => {
-    const missingCoreNodes = {
-      '1.2.0': [
-        createMockNode('DuplicateNode', '1.2.0'),
-        createMockNode('DuplicateNode', '1.2.0'),
-        createMockNode('UniqueNode', '1.2.0')
-      ]
-    }
-
-    const wrapper = mountComponent({ missingCoreNodes })
-    await nextTick()
-
-    const text = wrapper.text()
-    // Should only appear once in the sorted list
-    expect(text).toContain('DuplicateNode, UniqueNode')
-    // Count occurrences of 'DuplicateNode' - should be only 1
-    const matches = text.match(/DuplicateNode/g) || []
-    expect(matches.length).toBe(1)
-  })
-
-  it('handles nodes with missing version info', async () => {
-    const missingCoreNodes = {
-      '': [createMockNode('NoVersionNode')]
-    }
-
-    const wrapper = mountComponent({ missingCoreNodes })
-    await nextTick()
-
-    expect(wrapper.text()).toContain('Requires ComfyUI unknown:')
-    expect(wrapper.text()).toContain('NoVersionNode')
-  })
-})

src/components/dialog/content/MissingCoreNodesMessage.vue

@@ -1,83 +0,0 @@
-<template>
-  <Message
-    v-if="hasMissingCoreNodes"
-    severity="info"
-    icon="pi pi-info-circle"
-    class="m-2"
-    :pt="{
-      root: { class: 'flex-col' },
-      text: { class: 'flex-1' }
-    }"
-  >
-    <div class="flex flex-col gap-2">
-      <div>
-        {{
-          currentComfyUIVersion
-            ? $t('loadWorkflowWarning.outdatedVersion', {
-                version: currentComfyUIVersion
-              })
-            : $t('loadWorkflowWarning.outdatedVersionGeneric')
-        }}
-      </div>
-      <div
-        v-for="[version, nodes] in sortedMissingCoreNodes"
-        :key="version"
-        class="ml-4"
-      >
-        <div class="text-sm font-medium text-surface-600">
-          {{
-            $t('loadWorkflowWarning.coreNodesFromVersion', {
-              version: version || 'unknown'
-            })
-          }}
-        </div>
-        <div class="ml-4 text-sm text-surface-500">
-          {{ getUniqueNodeNames(nodes).join(', ') }}
-        </div>
-      </div>
-    </div>
-  </Message>
-</template>
-
-<script setup lang="ts">
-import Message from 'primevue/message'
-import { compare } from 'semver'
-import { computed } from 'vue'
-
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
-
-const { missingCoreNodes } = defineProps<{
-  missingCoreNodes: Record<string, LGraphNode[]>
-}>()
-
-const systemStatsStore = useSystemStatsStore()
-
-const hasMissingCoreNodes = computed(() => {
-  return Object.keys(missingCoreNodes).length > 0
-})
-
-// Use computed for reactive version tracking
-const currentComfyUIVersion = computed<string | null>(() => {
-  if (!hasMissingCoreNodes.value) return null
-  return systemStatsStore.systemStats?.system?.comfyui_version ?? null
-})
-
-const sortedMissingCoreNodes = computed(() => {
-  return Object.entries(missingCoreNodes).sort(([a], [b]) => {
-    // Sort by version in descending order (newest first)
-    return compare(b, a) // Reversed for descending order
-  })
-})
-
-const getUniqueNodeNames = (nodes: LGraphNode[]): string[] => {
-  return nodes
-    .reduce<string[]>((acc, node) => {
-      if (node.type && !acc.includes(node.type)) {
-        acc.push(node.type)
-      }
-      return acc
-    }, [])
-    .sort()
-}
-</script>

src/components/dialog/content/MissingNodesContent.vue

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

src/components/dialog/content/MissingNodesFooter.vue

@@ -1,199 +0,0 @@
-<template>
-  <div class="flex w-full flex-col gap-2 px-4 py-2">
-    <div class="flex flex-col gap-1 text-sm text-muted-foreground">
-      <div class="flex items-center gap-1">
-        <input
-          id="doNotAskAgainNodes"
-          v-model="doNotAskAgain"
-          type="checkbox"
-          class="size-4 cursor-pointer"
-        />
-        <label for="doNotAskAgainNodes">{{
-          $t('missingModelsDialog.doNotAskAgain')
-        }}</label>
-      </div>
-      <i18n-t
-        v-if="doNotAskAgain"
-        keypath="missingModelsDialog.reEnableInSettings"
-        tag="span"
-        class="ml-6 text-sm text-muted-foreground"
-      >
-        <template #link>
-          <Button
-            variant="textonly"
-            class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
-            @click="openShowMissingNodesSetting"
-          >
-            {{ $t('missingModelsDialog.reEnableInSettingsLink') }}
-          </Button>
-        </template>
-      </i18n-t>
-    </div>
-
-    <!-- All nodes replaceable: Skip button (cloud + OSS) -->
-    <div v-if="!hasNonReplaceableNodes" class="flex justify-end gap-1">
-      <Button variant="secondary" size="md" @click="handleGotItClick">
-        {{ $t('nodeReplacement.skipForNow') }}
-      </Button>
-    </div>
-
-    <!-- Cloud mode: Learn More + Got It buttons -->
-    <div
-      v-else-if="isCloud"
-      class="flex w-full items-center justify-between gap-2"
-    >
-      <Button
-        variant="textonly"
-        size="sm"
-        as="a"
-        href="https://www.comfy.org/cloud"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <i class="icon-[lucide--info]"></i>
-        <span>{{ $t('missingNodes.cloud.learnMore') }}</span>
-      </Button>
-      <Button variant="secondary" size="md" @click="handleGotItClick">{{
-        $t('missingNodes.cloud.gotIt')
-      }}</Button>
-    </div>
-
-    <!-- OSS mode: Manager buttons -->
-    <div v-else-if="showManagerButtons" class="flex justify-end gap-1">
-      <Button variant="textonly" @click="handleOpenManager">{{
-        $t('g.openManager')
-      }}</Button>
-      <PackInstallButton
-        v-if="showInstallAllButton"
-        type="secondary"
-        size="md"
-        :disabled="
-          isLoading || !!error || missingNodePacks.length === 0 || isInstalling
-        "
-        :is-loading="isLoading"
-        :node-packs="missingNodePacks"
-        :label="
-          isLoading
-            ? $t('manager.gettingInfo')
-            : $t('manager.installAllMissingNodes')
-        "
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { isCloud } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
-import { useDialogStore } from '@/stores/dialogStore'
-import type { MissingNodeType } from '@/types/comfy'
-import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
-import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
-import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
-import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
-import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
-
-const { missingNodeTypes } = defineProps<{
-  missingNodeTypes?: MissingNodeType[]
-}>()
-
-const dialogStore = useDialogStore()
-const { t } = useI18n()
-
-const doNotAskAgain = ref(false)
-
-watch(doNotAskAgain, (value) => {
-  void useSettingStore().set('Comfy.Workflow.ShowMissingNodesWarning', !value)
-})
-
-const handleGotItClick = () => {
-  dialogStore.closeDialog({ key: 'global-missing-nodes' })
-}
-
-function openShowMissingNodesSetting() {
-  dialogStore.closeDialog({ key: 'global-missing-nodes' })
-  useSettingsDialog().show(undefined, 'Comfy.Workflow.ShowMissingNodesWarning')
-}
-
-const { missingNodePacks, isLoading, error } = useMissingNodes()
-const comfyManagerStore = useComfyManagerStore()
-const managerState = useManagerState()
-function handleOpenManager() {
-  managerState.openManager({
-    initialTab: ManagerTab.Missing,
-    showToastOnLegacyError: true
-  })
-}
-
-// Check if any of the missing packs are currently being installed
-const isInstalling = computed(() => {
-  if (!missingNodePacks.value?.length) return false
-  return missingNodePacks.value.some((pack) =>
-    comfyManagerStore.isPackInstalling(pack.id)
-  )
-})
-
-// Show manager buttons unless manager is disabled
-const showManagerButtons = computed(() => {
-  return managerState.shouldShowManagerButtons.value
-})
-
-// Only show Install All button for NEW_UI (new manager with v4 support)
-const showInstallAllButton = computed(() => {
-  return managerState.shouldShowInstallButton.value
-})
-
-const hasNonReplaceableNodes = computed(
-  () =>
-    missingNodeTypes?.some(
-      (n) =>
-        typeof n === 'string' || (typeof n === 'object' && !n.isReplaceable)
-    ) ?? false
-)
-
-// Track whether missingNodePacks was ever non-empty (i.e. there were packs to install)
-const hadMissingPacks = ref(false)
-
-watch(
-  missingNodePacks,
-  (packs) => {
-    if (packs && packs.length > 0) hadMissingPacks.value = true
-  },
-  { immediate: true }
-)
-
-// Only consider "all installed" when packs transitioned from non-empty to empty
-// (actual installation happened). Replaceable-only case is handled by Content auto-close.
-const allMissingNodesInstalled = computed(() => {
-  if (!hadMissingPacks.value) return false
-  return (
-    !isLoading.value &&
-    !isInstalling.value &&
-    missingNodePacks.value?.length === 0
-  )
-})
-
-// Watch for completion and close dialog (OSS mode only)
-watch(allMissingNodesInstalled, async (allInstalled) => {
-  if (!isCloud && allInstalled && showInstallAllButton.value) {
-    // Use nextTick to ensure state updates are complete
-    await nextTick()
-
-    dialogStore.closeDialog({ key: 'global-missing-nodes' })
-
-    // Show success toast
-    useToastStore().add({
-      severity: 'success',
-      summary: t('g.success'),
-      detail: t('manager.allMissingNodesInstalled'),
-      life: 3000
-    })
-  }
-})
-</script>

src/components/dialog/content/MissingNodesHeader.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="flex w-full items-center justify-between p-4">
-    <div class="flex items-center gap-2">
-      <i class="icon-[lucide--triangle-alert] text-warning-background"></i>
-      <p class="m-0 text-sm">
-        {{
-          isCloud
-            ? $t('missingNodes.cloud.title')
-            : $t('missingNodes.oss.title')
-        }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { isCloud } from '@/platform/distribution/types'
-</script>

src/components/queue/job/JobAssetsList.test.ts

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
 
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 import type { JobListItem as ApiJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
@@ -7,6 +8,15 @@ import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 
 import JobAssetsList from './JobAssetsList.vue'
 
+const JobDetailsPopoverStub = defineComponent({
+  name: 'JobDetailsPopover',
+  props: {
+    jobId: { type: String, required: true },
+    workflowId: { type: String, default: undefined }
+  },
+  template: '<div class="job-details-popover-stub" />'
+})
+
 vi.mock('vue-i18n', () => {
   return {
     createI18n: () => ({
@@ -46,6 +56,7 @@ const createTaskRef = (preview?: ResultItemImpl): TaskItemImpl => {
     create_time: Date.now(),
     preview_output: null,
     outputs_count: preview ? 1 : 0,
+    workflow_id: 'workflow-1',
     priority: 0
   }
   const flatOutputs = preview ? [preview] : []
@@ -71,11 +82,21 @@ const mountJobAssetsList = (jobs: JobListItem[]) => {
   ]
 
   return mount(JobAssetsList, {
-    props: { displayedJobGroups }
+    props: { displayedJobGroups },
+    global: {
+      stubs: {
+        teleport: true,
+        JobDetailsPopover: JobDetailsPopoverStub
+      }
+    }
   })
 }
 
 describe('JobAssetsList', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   it('emits viewItem on preview-click for completed jobs with preview', async () => {
     const job = buildJob()
     const wrapper = mountJobAssetsList([job])
@@ -143,4 +164,143 @@ describe('JobAssetsList', () => {
 
     expect(wrapper.emitted('viewItem')).toBeUndefined()
   })
+
+  it('emits viewItem from the View button for completed jobs without preview output', async () => {
+    const job = buildJob({
+      iconImageUrl: undefined,
+      taskRef: createTaskRef()
+    })
+    const wrapper = mountJobAssetsList([job])
+    const jobRow = wrapper.find(`[data-job-id="${job.id}"]`)
+
+    await jobRow.trigger('mouseenter')
+    const viewButton = wrapper
+      .findAll('button')
+      .find((button) => button.text() === 'menuLabels.View')
+    expect(viewButton).toBeDefined()
+
+    await viewButton!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('viewItem')).toEqual([[job]])
+  })
+
+  it('shows and hides the job details popover with hover delays', async () => {
+    vi.useFakeTimers()
+    const job = buildJob()
+    const wrapper = mountJobAssetsList([job])
+    const jobRow = wrapper.find(`[data-job-id="${job.id}"]`)
+
+    await jobRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(199)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(false)
+
+    await vi.advanceTimersByTimeAsync(1)
+    await nextTick()
+
+    const popover = wrapper.findComponent(JobDetailsPopoverStub)
+    expect(popover.exists()).toBe(true)
+    expect(popover.props()).toMatchObject({
+      jobId: job.id,
+      workflowId: 'workflow-1'
+    })
+
+    await jobRow.trigger('mouseleave')
+    await vi.advanceTimersByTimeAsync(149)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(true)
+
+    await vi.advanceTimersByTimeAsync(1)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(false)
+  })
+
+  it('keeps the job details popover open while hovering the popover', async () => {
+    vi.useFakeTimers()
+    const job = buildJob()
+    const wrapper = mountJobAssetsList([job])
+    const jobRow = wrapper.find(`[data-job-id="${job.id}"]`)
+
+    await jobRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+
+    await jobRow.trigger('mouseleave')
+    await vi.advanceTimersByTimeAsync(100)
+    await nextTick()
+
+    const popover = wrapper.find('.job-details-popover')
+    expect(popover.exists()).toBe(true)
+
+    await popover.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(100)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(true)
+
+    await popover.trigger('mouseleave')
+    await vi.advanceTimersByTimeAsync(149)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(true)
+
+    await vi.advanceTimersByTimeAsync(1)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(false)
+  })
+
+  it('clears the previous popover when hovering a new row briefly and leaving the list', async () => {
+    vi.useFakeTimers()
+    const firstJob = buildJob({ id: 'job-1' })
+    const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
+    const wrapper = mountJobAssetsList([firstJob, secondJob])
+    const firstRow = wrapper.find('[data-job-id="job-1"]')
+    const secondRow = wrapper.find('[data-job-id="job-2"]')
+
+    await firstRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).props('jobId')).toBe(
+      'job-1'
+    )
+
+    await firstRow.trigger('mouseleave')
+    await secondRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(100)
+    await nextTick()
+    await secondRow.trigger('mouseleave')
+
+    await vi.advanceTimersByTimeAsync(150)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(false)
+  })
+
+  it('shows the new popover after the previous row hides while the next row stays hovered', async () => {
+    vi.useFakeTimers()
+    const firstJob = buildJob({ id: 'job-1' })
+    const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
+    const wrapper = mountJobAssetsList([firstJob, secondJob])
+    const firstRow = wrapper.find('[data-job-id="job-1"]')
+    const secondRow = wrapper.find('[data-job-id="job-2"]')
+
+    await firstRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).props('jobId')).toBe(
+      'job-1'
+    )
+
+    await firstRow.trigger('mouseleave')
+    await secondRow.trigger('mouseenter')
+
+    await vi.advanceTimersByTimeAsync(150)
+    await nextTick()
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(false)
+
+    await vi.advanceTimersByTimeAsync(50)
+    await nextTick()
+
+    const popover = wrapper.findComponent(JobDetailsPopoverStub)
+    expect(popover.exists()).toBe(true)
+    expect(popover.props('jobId')).toBe('job-2')
+  })
 })

src/components/queue/job/JobAssetsList.vue

@@ -8,78 +8,107 @@
       <div class="text-xs leading-none text-text-secondary">
         {{ group.label }}
       </div>
-      <AssetsListItem
+      <div
         v-for="job in group.items"
         :key="job.id"
-        class="w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover"
-        :preview-url="getJobPreviewUrl(job)"
-        :is-video-preview="isVideoPreviewJob(job)"
-        :preview-alt="job.title"
-        :icon-name="job.iconName ?? iconForJobState(job.state)"
-        :icon-class="getJobIconClass(job)"
-        :primary-text="job.title"
-        :secondary-text="job.meta"
-        :progress-total-percent="job.progressTotalPercent"
-        :progress-current-percent="job.progressCurrentPercent"
-        @mouseenter="hoveredJobId = job.id"
+        :data-job-id="job.id"
+        @mouseenter="onJobEnter(job, $event)"
         @mouseleave="onJobLeave(job.id)"
-        @contextmenu.prevent.stop="$emit('menu', job, $event)"
-        @dblclick.stop="emitViewItem(job)"
-        @preview-click="emitViewItem(job)"
-        @click.stop
       >
-        <template v-if="hoveredJobId === job.id" #actions>
-          <Button
-            v-if="isCancelable(job)"
-            variant="destructive"
-            size="icon"
-            :aria-label="t('g.cancel')"
-            @click.stop="$emit('cancelItem', job)"
-          >
-            <i class="icon-[lucide--x] size-4" />
-          </Button>
-          <Button
-            v-else-if="isFailedDeletable(job)"
-            variant="destructive"
-            size="icon"
-            :aria-label="t('g.delete')"
-            @click.stop="$emit('deleteItem', job)"
-          >
-            <i class="icon-[lucide--trash-2] size-4" />
-          </Button>
-          <Button
-            v-else-if="job.state === 'completed'"
-            variant="textonly"
-            size="sm"
-            @click.stop="$emit('viewItem', job)"
-          >
-            {{ t('menuLabels.View') }}
-          </Button>
-          <Button
-            variant="secondary"
-            size="icon"
-            :aria-label="t('g.more')"
-            @click.stop="$emit('menu', job, $event)"
-          >
-            <i class="icon-[lucide--ellipsis] size-4" />
-          </Button>
-        </template>
-      </AssetsListItem>
+        <AssetsListItem
+          :class="
+            cn(
+              'w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
+              job.state === 'running' && 'bg-secondary-background'
+            )
+          "
+          :preview-url="getJobPreviewUrl(job)"
+          :is-video-preview="isVideoPreviewJob(job)"
+          :preview-alt="job.title"
+          :icon-name="job.iconName ?? iconForJobState(job.state)"
+          :icon-class="getJobIconClass(job)"
+          :primary-text="job.title"
+          :secondary-text="job.meta"
+          :progress-total-percent="job.progressTotalPercent"
+          :progress-current-percent="job.progressCurrentPercent"
+          @contextmenu.prevent.stop="$emit('menu', job, $event)"
+          @dblclick.stop="emitViewItem(job)"
+          @preview-click="emitViewItem(job)"
+          @click.stop
+        >
+          <template v-if="hoveredJobId === job.id" #actions>
+            <Button
+              v-if="isCancelable(job)"
+              variant="destructive"
+              size="icon"
+              :aria-label="t('g.cancel')"
+              @click.stop="emitCancelItem(job)"
+            >
+              <i class="icon-[lucide--x] size-4" />
+            </Button>
+            <Button
+              v-else-if="isFailedDeletable(job)"
+              variant="destructive"
+              size="icon"
+              :aria-label="t('g.delete')"
+              @click.stop="emitDeleteItem(job)"
+            >
+              <i class="icon-[lucide--trash-2] size-4" />
+            </Button>
+            <Button
+              v-else-if="job.state === 'completed'"
+              variant="textonly"
+              size="sm"
+              @click.stop="emitCompletedViewItem(job)"
+            >
+              {{ t('menuLabels.View') }}
+            </Button>
+            <Button
+              variant="secondary"
+              size="icon"
+              :aria-label="t('g.more')"
+              @click.stop="$emit('menu', job, $event)"
+            >
+              <i class="icon-[lucide--ellipsis] size-4" />
+            </Button>
+          </template>
+        </AssetsListItem>
+      </div>
     </div>
   </div>
+
+  <Teleport to="body">
+    <div
+      v-if="activeDetails && popoverPosition"
+      class="job-details-popover fixed z-50"
+      :style="{
+        top: `${popoverPosition.top}px`,
+        right: `${popoverPosition.right}px`
+      }"
+      @mouseenter="onPopoverEnter"
+      @mouseleave="onPopoverLeave"
+    >
+      <JobDetailsPopover
+        :job-id="activeDetails.jobId"
+        :workflow-id="activeDetails.workflowId"
+      />
+    </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { ref } from 'vue'
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
+import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
+import { cn } from '@/utils/tailwindUtil'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { isActiveJobState } from '@/utils/queueUtil'
 
-defineProps<{ displayedJobGroups: JobGroup[] }>()
+const { displayedJobGroups } = defineProps<{ displayedJobGroups: JobGroup[] }>()
 
 const emit = defineEmits<{
   (e: 'cancelItem', item: JobListItem): void
@@ -90,11 +119,104 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const hoveredJobId = ref<string | null>(null)
+const activeDetails = ref<{ jobId: string; workflowId?: string } | null>(null)
+const activeRowElement = ref<HTMLElement | null>(null)
+const popoverPosition = ref<{ top: number; right: number } | null>(null)
+const hideTimer = ref<number | null>(null)
+const hideTimerJobId = ref<string | null>(null)
+const showTimer = ref<number | null>(null)
+
+const clearHideTimer = () => {
+  if (hideTimer.value !== null) {
+    clearTimeout(hideTimer.value)
+    hideTimer.value = null
+  }
+  hideTimerJobId.value = null
+}
+
+const clearShowTimer = () => {
+  if (showTimer.value !== null) {
+    clearTimeout(showTimer.value)
+    showTimer.value = null
+  }
+}
+
+const updatePopoverPosition = () => {
+  const rowElement = activeRowElement.value
+  if (!rowElement) return
+
+  const rect = rowElement.getBoundingClientRect()
+  const gap = 8
+  popoverPosition.value = {
+    top: rect.top,
+    right: window.innerWidth - rect.left + gap
+  }
+}
+
+const resetActiveDetails = () => {
+  clearHideTimer()
+  clearShowTimer()
+  activeDetails.value = null
+  activeRowElement.value = null
+  popoverPosition.value = null
+}
+
+const scheduleDetailsShow = (job: JobListItem, rowElement: HTMLElement) => {
+  clearShowTimer()
+  showTimer.value = window.setTimeout(() => {
+    activeRowElement.value = rowElement
+    activeDetails.value = {
+      jobId: job.id,
+      workflowId: job.taskRef?.workflowId
+    }
+    showTimer.value = null
+    void nextTick(updatePopoverPosition)
+  }, 200)
+}
+
+const scheduleDetailsHide = (jobId?: string) => {
+  if (!jobId) return
+
+  clearShowTimer()
+  if (hideTimerJobId.value && hideTimerJobId.value !== jobId) {
+    return
+  }
+
+  clearHideTimer()
+  hideTimerJobId.value = jobId
+  hideTimer.value = window.setTimeout(() => {
+    if (activeDetails.value?.jobId === jobId) {
+      activeDetails.value = null
+      activeRowElement.value = null
+      popoverPosition.value = null
+    }
+    hideTimer.value = null
+    hideTimerJobId.value = null
+  }, 150)
+}
 
 const onJobLeave = (jobId: string) => {
   if (hoveredJobId.value === jobId) {
     hoveredJobId.value = null
   }
+  scheduleDetailsHide(jobId)
+}
+
+const onJobEnter = (job: JobListItem, event: MouseEvent) => {
+  hoveredJobId.value = job.id
+
+  const rowElement = event.currentTarget
+  if (!(rowElement instanceof HTMLElement)) return
+
+  activeRowElement.value = rowElement
+  if (activeDetails.value?.jobId === job.id) {
+    clearHideTimer()
+    clearShowTimer()
+    void nextTick(updatePopoverPosition)
+    return
+  }
+
+  scheduleDetailsShow(job, rowElement)
 }
 
 const isCancelable = (job: JobListItem) =>
@@ -121,10 +243,35 @@ const isPreviewableCompletedJob = (job: JobListItem) =>
 
 const emitViewItem = (job: JobListItem) => {
   if (isPreviewableCompletedJob(job)) {
+    resetActiveDetails()
     emit('viewItem', job)
   }
 }
 
+const emitCompletedViewItem = (job: JobListItem) => {
+  resetActiveDetails()
+  emit('viewItem', job)
+}
+
+const emitCancelItem = (job: JobListItem) => {
+  resetActiveDetails()
+  emit('cancelItem', job)
+}
+
+const emitDeleteItem = (job: JobListItem) => {
+  resetActiveDetails()
+  emit('deleteItem', job)
+}
+
+const onPopoverEnter = () => {
+  clearHideTimer()
+  clearShowTimer()
+}
+
+const onPopoverLeave = () => {
+  scheduleDetailsHide(activeDetails.value?.jobId)
+}
+
 const getJobIconClass = (job: JobListItem): string | undefined => {
   const iconName = job.iconName ?? iconForJobState(job.state)
   if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
@@ -132,4 +279,22 @@ const getJobIconClass = (job: JobListItem): string | undefined => {
   }
   return undefined
 }
+
+watch(
+  () => displayedJobGroups,
+  (groups) => {
+    const activeJobId = activeDetails.value?.jobId
+    if (!activeJobId) return
+
+    const hasActiveJob = groups.some((group) =>
+      group.items.some((item) => item.id === activeJobId)
+    )
+
+    if (!hasActiveJob) {
+      resetActiveDetails()
+    }
+  }
+)
+
+onBeforeUnmount(resetActiveDetails)
 </script>

src/components/queue/job/JobContextMenu.test.ts

@@ -1,9 +1,54 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
 
 import JobContextMenu from '@/components/queue/job/JobContextMenu.vue'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
+const popoverStub = defineComponent({
+  name: 'Popover',
+  emits: ['show', 'hide'],
+  data() {
+    return {
+      visible: false,
+      container: null as HTMLElement | null,
+      eventTarget: null as EventTarget | null,
+      target: null as EventTarget | null
+    }
+  },
+  mounted() {
+    this.container = this.$refs.container as HTMLElement | null
+  },
+  updated() {
+    this.container = this.$refs.container as HTMLElement | null
+  },
+  methods: {
+    toggle(event: Event, target?: EventTarget | null) {
+      if (this.visible) {
+        this.hide()
+        return
+      }
+
+      this.show(event, target)
+    },
+    show(event: Event, target?: EventTarget | null) {
+      this.visible = true
+      this.eventTarget = event.currentTarget
+      this.target = target ?? event.currentTarget
+      this.$emit('show')
+    },
+    hide() {
+      this.visible = false
+      this.$emit('hide')
+    }
+  },
+  template: `
+    <div v-if="visible" ref="container" class="popover-stub">
+      <slot />
+    </div>
+  `
+})
+
 const buttonStub = {
   props: {
     disabled: {
@@ -37,31 +82,57 @@ const mountComponent = (entries: MenuEntry[]) =>
     props: { entries },
     global: {
       stubs: {
-        Popover: {
-          template: '<div class="popover-stub"><slot /></div>'
-        },
+        Popover: popoverStub,
         Button: buttonStub
       }
     }
   })
 
+const createTriggerEvent = (type: string, currentTarget: EventTarget) =>
+  ({
+    type,
+    currentTarget,
+    target: currentTarget
+  }) as Event
+
+const openMenu = async (
+  wrapper: ReturnType<typeof mountComponent>,
+  type: string = 'click'
+) => {
+  const trigger = document.createElement('button')
+  document.body.append(trigger)
+  await wrapper.vm.open(createTriggerEvent(type, trigger))
+  await nextTick()
+  return trigger
+}
+
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
 describe('JobContextMenu', () => {
-  it('passes disabled state to action buttons', () => {
+  it('passes disabled state to action buttons', async () => {
     const wrapper = mountComponent(createEntries())
+    await openMenu(wrapper)
 
     const buttons = wrapper.findAll('.button-stub')
     expect(buttons).toHaveLength(2)
     expect(buttons[0].attributes('data-disabled')).toBe('false')
     expect(buttons[1].attributes('data-disabled')).toBe('true')
+
+    wrapper.unmount()
   })
 
   it('emits action for enabled entries', async () => {
     const entries = createEntries()
     const wrapper = mountComponent(entries)
+    await openMenu(wrapper)
 
     await wrapper.findAll('.button-stub')[0].trigger('click')
 
     expect(wrapper.emitted('action')).toEqual([[entries[0]]])
+
+    wrapper.unmount()
   })
 
   it('does not emit action for disabled entries', async () => {
@@ -73,9 +144,52 @@ describe('JobContextMenu', () => {
         onClick: vi.fn()
       }
     ])
+    await openMenu(wrapper)
 
     await wrapper.get('.button-stub').trigger('click')
 
     expect(wrapper.emitted('action')).toBeUndefined()
+
+    wrapper.unmount()
+  })
+
+  it('hides on pointerdown outside the popover', async () => {
+    const wrapper = mountComponent(createEntries())
+    const trigger = document.createElement('button')
+    const outside = document.createElement('div')
+    document.body.append(trigger, outside)
+
+    await wrapper.vm.open(createTriggerEvent('contextmenu', trigger))
+    await nextTick()
+    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+
+    outside.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.popover-stub').exists()).toBe(false)
+
+    wrapper.unmount()
+  })
+
+  it('keeps the menu open through trigger pointerdown and closes on same trigger click', async () => {
+    const wrapper = mountComponent(createEntries())
+    const trigger = document.createElement('button')
+    document.body.append(trigger)
+
+    await wrapper.vm.open(createTriggerEvent('click', trigger))
+    await nextTick()
+    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+
+    trigger.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.popover-stub').exists()).toBe(true)
+
+    await wrapper.vm.open(createTriggerEvent('click', trigger))
+    await nextTick()
+
+    expect(wrapper.find('.popover-stub').exists()).toBe(false)
+
+    wrapper.unmount()
   })
 })

src/components/queue/job/JobContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <Popover
     ref="jobItemPopoverRef"
-    :dismissable="true"
+    :dismissable="false"
     :close-on-escape="true"
     unstyled
     :pt="{
@@ -12,8 +12,11 @@
         ]
       }
     }"
+    @show="isVisible = true"
+    @hide="onHide"
   >
     <div
+      ref="contentRef"
       class="flex min-w-56 flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
     >
       <template v-for="entry in entries" :key="entry.key">
@@ -45,9 +48,10 @@
 
 <script setup lang="ts">
 import Popover from 'primevue/popover'
-import { ref } from 'vue'
+import { nextTick, ref } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
 defineProps<{ entries: MenuEntry[] }>()
@@ -56,18 +60,55 @@ const emit = defineEmits<{
   (e: 'action', entry: MenuEntry): void
 }>()
 
-const jobItemPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
+type PopoverHandle = {
+  hide: () => void
+  show: (event: Event, target?: EventTarget | null) => void
+}
 
-function open(event: Event) {
-  if (jobItemPopoverRef.value) {
-    jobItemPopoverRef.value.toggle(event)
+const jobItemPopoverRef = ref<PopoverHandle | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const isVisible = ref(false)
+const openedByClick = ref(false)
+
+useDismissableOverlay({
+  isOpen: isVisible,
+  getOverlayEl: () => contentRef.value,
+  getTriggerEl: () => (openedByClick.value ? triggerRef.value : null),
+  onDismiss: hide
+})
+
+async function open(event: Event) {
+  const trigger =
+    event.currentTarget instanceof HTMLElement ? event.currentTarget : null
+  const isSameClickTrigger =
+    event.type === 'click' && trigger === triggerRef.value && isVisible.value
+
+  if (isSameClickTrigger) {
+    hide()
+    return
   }
+
+  openedByClick.value = event.type === 'click'
+  triggerRef.value = trigger
+
+  if (isVisible.value) {
+    hide()
+    await nextTick()
+  }
+
+  jobItemPopoverRef.value?.show(event, trigger)
 }
 
 function hide() {
   jobItemPopoverRef.value?.hide()
 }
 
+function onHide() {
+  isVisible.value = false
+  openedByClick.value = false
+}
+
 function onEntry(entry: MenuEntry) {
   if (entry.kind === 'divider' || entry.disabled) return
   emit('action', entry)

src/components/rightSidePanel/errors/MissingNodeCard.test.ts

@@ -7,13 +7,41 @@ import { createI18n } from 'vue-i18n'
 
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 
-const mockIsCloud = { value: false }
+const mockIsCloud = vi.hoisted(() => ({ value: false }))
 vi.mock('@/platform/distribution/types', () => ({
   get isCloud() {
     return mockIsCloud.value
   }
 }))
 
+const mockMissingCoreNodes = vi.hoisted(() => ({
+  value: {} as Record<string, { type: string }[]>
+}))
+const mockSystemStats = vi.hoisted(() => ({
+  value: null as { system?: { comfyui_version?: string } } | null
+}))
+
+vi.mock(
+  '@/workbench/extensions/manager/composables/nodePack/useMissingNodes',
+  () => ({
+    useMissingNodes: () => ({
+      missingCoreNodes: mockMissingCoreNodes,
+      missingNodePacks: { value: [] },
+      isLoading: { value: false },
+      error: { value: null },
+      hasMissingNodes: { value: false }
+    })
+  })
+)
+
+vi.mock('@/stores/systemStatsStore', () => ({
+  useSystemStatsStore: () => ({
+    get systemStats() {
+      return mockSystemStats.value
+    }
+  })
+}))
+
 const mockApplyChanges = vi.fn()
 const mockIsRestarting = ref(false)
 vi.mock('@/workbench/extensions/manager/composables/useApplyChanges', () => ({
@@ -61,6 +89,13 @@ const i18n = createI18n({
             'To install missing nodes, first run {pipCmd} in your Python environment to install Node Manager, then restart ComfyUI with the {flag} flag.',
           applyChanges: 'Apply Changes'
         }
+      },
+      loadWorkflowWarning: {
+        outdatedVersion:
+          'Some nodes require a newer version of ComfyUI (current: {version}).',
+        outdatedVersionGeneric:
+          'Some nodes require a newer version of ComfyUI.',
+        coreNodesFromVersion: 'Requires ComfyUI {version}:'
       }
     }
   },
@@ -109,6 +144,8 @@ describe('MissingNodeCard', () => {
     mockIsCloud.value = false
     mockShouldShowManagerButtons.value = false
     mockIsRestarting.value = false
+    mockMissingCoreNodes.value = {}
+    mockSystemStats.value = null
   })
 
   describe('Rendering & Props', () => {
@@ -234,4 +271,81 @@ describe('MissingNodeCard', () => {
       expect(wrapper.emitted('openManagerInfo')?.[0]).toEqual(['pack-0'])
     })
   })
+
+  describe('Core Node Version Warning', () => {
+    it('does not render warning when no missing core nodes', () => {
+      const wrapper = mountCard()
+      expect(wrapper.text()).not.toContain('newer version of ComfyUI')
+    })
+
+    it('renders warning with version when missing core nodes exist', () => {
+      mockMissingCoreNodes.value = {
+        '1.2.0': [{ type: 'TestNode' }]
+      }
+      mockSystemStats.value = { system: { comfyui_version: '1.0.0' } }
+      const wrapper = mountCard()
+      expect(wrapper.text()).toContain('(current: 1.0.0)')
+      expect(wrapper.text()).toContain('Requires ComfyUI 1.2.0:')
+      expect(wrapper.text()).toContain('TestNode')
+    })
+
+    it('renders generic message when version is unavailable', () => {
+      mockMissingCoreNodes.value = {
+        '1.2.0': [{ type: 'TestNode' }]
+      }
+      const wrapper = mountCard()
+      expect(wrapper.text()).toContain(
+        'Some nodes require a newer version of ComfyUI.'
+      )
+    })
+
+    it('does not render warning on Cloud', () => {
+      mockIsCloud.value = true
+      mockMissingCoreNodes.value = {
+        '1.2.0': [{ type: 'TestNode' }]
+      }
+      const wrapper = mountCard()
+      expect(wrapper.text()).not.toContain('newer version of ComfyUI')
+    })
+
+    it('deduplicates and sorts node names within a version', () => {
+      mockMissingCoreNodes.value = {
+        '1.2.0': [
+          { type: 'ZebraNode' },
+          { type: 'AlphaNode' },
+          { type: 'ZebraNode' }
+        ]
+      }
+      const wrapper = mountCard()
+      expect(wrapper.text()).toContain('AlphaNode, ZebraNode')
+      expect(wrapper.text().match(/ZebraNode/g)?.length).toBe(1)
+    })
+
+    it('sorts versions in descending order', () => {
+      mockMissingCoreNodes.value = {
+        '1.1.0': [{ type: 'Node1' }],
+        '1.3.0': [{ type: 'Node3' }],
+        '1.2.0': [{ type: 'Node2' }]
+      }
+      const wrapper = mountCard()
+      const text = wrapper.text()
+      const v13 = text.indexOf('1.3.0')
+      const v12 = text.indexOf('1.2.0')
+      const v11 = text.indexOf('1.1.0')
+      expect(v13).toBeLessThan(v12)
+      expect(v12).toBeLessThan(v11)
+    })
+
+    it('handles empty string version key without crashing', () => {
+      mockMissingCoreNodes.value = {
+        '': [{ type: 'NoVersionNode' }],
+        '1.2.0': [{ type: 'VersionedNode' }]
+      }
+      const wrapper = mountCard()
+      expect(wrapper.text()).toContain('Requires ComfyUI 1.2.0:')
+      expect(wrapper.text()).toContain('VersionedNode')
+      expect(wrapper.text()).toContain('unknown')
+      expect(wrapper.text()).toContain('NoVersionNode')
+    })
+  })
 })

src/components/rightSidePanel/errors/MissingNodeCard.vue

@@ -1,5 +1,42 @@
 <template>
-  <div class="px-4 pb-2">
+  <div data-testid="missing-node-card" class="px-4 pb-2">
+    <!-- Core node version warning (OSS only) -->
+    <div
+      v-if="!isCloud && hasMissingCoreNodes"
+      role="alert"
+      class="mb-3 flex gap-2.5 rounded-lg border border-warning-background/30 bg-warning-background/10 p-3"
+    >
+      <i
+        aria-hidden="true"
+        class="mt-0.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
+      />
+      <div class="flex flex-col gap-1.5 text-xs/relaxed text-muted-foreground">
+        <p class="m-0">
+          {{
+            currentComfyUIVersion
+              ? t('loadWorkflowWarning.outdatedVersion', {
+                  version: currentComfyUIVersion
+                })
+              : t('loadWorkflowWarning.outdatedVersionGeneric')
+          }}
+        </p>
+        <div
+          v-for="[version, nodes] in sortedMissingCoreNodes"
+          :key="version"
+          class="ml-2"
+        >
+          <span class="font-medium">
+            {{
+              t('loadWorkflowWarning.coreNodesFromVersion', {
+                version: version || t('loadWorkflowWarning.unknownVersion')
+              })
+            }}
+          </span>
+          <span class="ml-1">{{ getUniqueNodeNames(nodes).join(', ') }}</span>
+        </div>
+      </div>
+    </div>
+
     <!-- Sub-label: cloud or OSS message shown above all pack groups -->
     <p
       class="m-0 text-sm/relaxed text-muted-foreground"
@@ -53,7 +90,11 @@
       @click="applyChanges()"
     >
       <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
-      <i v-else class="icon-[lucide--refresh-cw] size-4 shrink-0" />
+      <i
+        v-else
+        aria-hidden="true"
+        class="icon-[lucide--refresh-cw] size-4 shrink-0"
+      />
       <span class="min-w-0 truncate">{{
         t('rightSidePanel.missingNodePacks.applyChanges')
       }}</span>
@@ -64,16 +105,20 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { compare, valid } from 'semver'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import { useApplyChanges } from '@/workbench/extensions/manager/composables/useApplyChanges'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { isCloud } from '@/platform/distribution/types'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 import MissingPackGroupRow from '@/components/rightSidePanel/errors/MissingPackGroupRow.vue'
 
-const props = defineProps<{
+const { showInfoButton, showNodeIdBadge, missingPackGroups } = defineProps<{
   showInfoButton: boolean
   showNodeIdBadge: boolean
   missingPackGroups: MissingPackGroup[]
@@ -86,6 +131,34 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 
+const { missingCoreNodes } = useMissingNodes()
+const systemStatsStore = useSystemStatsStore()
+
+const hasMissingCoreNodes = computed(
+  () => Object.keys(missingCoreNodes.value).length > 0
+)
+
+const currentComfyUIVersion = computed<string | null>(() => {
+  if (!hasMissingCoreNodes.value) return null
+  return systemStatsStore.systemStats?.system?.comfyui_version ?? null
+})
+
+const sortedMissingCoreNodes = computed(() =>
+  Object.entries(missingCoreNodes.value).sort(([a], [b]) => {
+    const aValid = valid(a)
+    const bValid = valid(b)
+    if (!aValid && !bValid) return 0
+    if (!aValid) return 1
+    if (!bValid) return -1
+    return compare(b, a)
+  })
+)
+
+function getUniqueNodeNames(nodes: LGraphNode[]): string[] {
+  const types = new Set(nodes.map((node) => node.type).filter(Boolean))
+  return [...types].sort()
+}
+
 const comfyManagerStore = useComfyManagerStore()
 const { isRestarting, applyChanges } = useApplyChanges()
 const { shouldShowManagerButtons } = useManagerState()
@@ -95,7 +168,7 @@ const { shouldShowManagerButtons } = useManagerState()
  * - Not on Cloud (OSS/local only)
  * - Manager is disabled (showInfoButton is false)
  */
-const showManagerHint = computed(() => !isCloud && !props.showInfoButton)
+const showManagerHint = computed(() => !isCloud && !showInfoButton)
 
 /**
  * Show Apply Changes when any pack from the error group is already installed
@@ -103,7 +176,7 @@ const showManagerHint = computed(() => !isCloud && !props.showInfoButton)
  * This is server-state based → persists across browser refreshes.
  */
 const hasInstalledPacksPendingRestart = computed(() =>
-  props.missingPackGroups.some(
+  missingPackGroups.some(
     (g) => g.packId !== null && comfyManagerStore.isPackInstalled(g.packId)
   )
 )

src/components/rightSidePanel/errors/MissingPackGroupRow.vue

@@ -193,7 +193,7 @@ import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTyp
 import type { MissingNodeType } from '@/types/comfy'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 
-const props = defineProps<{
+const { group, showInfoButton, showNodeIdBadge } = defineProps<{
   group: MissingPackGroup
   showInfoButton: boolean
   showNodeIdBadge: boolean
@@ -211,8 +211,8 @@ const comfyManagerStore = useComfyManagerStore()
 const { shouldShowManagerButtons, openManager } = useManagerState()
 
 const nodePack = computed(() => {
-  if (!props.group.packId) return null
-  return missingNodePacks.value.find((p) => p.id === props.group.packId) ?? null
+  if (!group.packId) return null
+  return missingNodePacks.value.find((p) => p.id === group.packId) ?? null
 })
 
 const { isInstalling, installAllPacks } = usePackInstall(() =>
@@ -220,8 +220,8 @@ const { isInstalling, installAllPacks } = usePackInstall(() =>
 )
 
 function handlePackInstallClick() {
-  if (!props.group.packId) return
-  if (!comfyManagerStore.isPackInstalled(props.group.packId)) {
+  if (!group.packId) return
+  if (!comfyManagerStore.isPackInstalled(group.packId)) {
     void installAllPacks()
   }
 }

src/components/sidebar/tabs/queue/ResultGallery.vue

@@ -32,7 +32,7 @@
         :src="item.url"
         :contain="false"
         :alt="item.filename"
-        class="galleria-image"
+        class="size-auto max-h-[90vh] max-w-[90vw] object-contain"
       />
       <ResultVideo v-else-if="item.isVideo" :result="item" />
       <ResultAudio v-else-if="item.isAudio" :result="item" />
@@ -136,12 +136,6 @@ onUnmounted(() => {
 <style>
 /* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we
 cannot use scoped style here. */
-img.galleria-image {
-  max-width: 100vw;
-  max-height: 100vh;
-  object-fit: contain;
-}
-
 .p-galleria-close-button {
   /* Set z-index so the close button doesn't get hidden behind the image when image is large */
   z-index: 1;

src/components/sidebar/tabs/queue/ResultVideo.vue

@@ -1,5 +1,5 @@
 <template>
-  <video controls width="100%" height="100%">
+  <video controls class="max-h-[90vh] max-w-[90vw]">
     <source :src="url" :type="htmlVideoType" />
     {{ $t('g.videoFailedToLoad') }}
   </video>

src/composables/graph/contextMenuConverter.ts

@@ -63,6 +63,7 @@ const CORE_MENU_ITEMS = new Set([
   // Built-in node operations (node-specific)
   'Open Image',
   'Copy Image',
+  'Paste Image',
   'Save Image',
   'Open in Mask Editor',
   'Edit Subgraph Widgets',
@@ -241,6 +242,7 @@ const MENU_ORDER: string[] = [
   'Open in Mask Editor',
   'Open Image',
   'Copy Image',
+  'Paste Image',
   'Save Image',
   'Copy (Clipspace)',
   'Paste (Clipspace)',

src/composables/graph/useImageMenuOptions.test.ts

@@ -0,0 +1,164 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { createMockLGraphNode } from '@/utils/__tests__/litegraphTestUtils'
+
+import { useImageMenuOptions } from './useImageMenuOptions'
+
+vi.mock('vue-i18n', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...(actual as object),
+    useI18n: () => ({
+      t: (key: string) => key.split('.').pop() ?? key
+    })
+  }
+})
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({ execute: vi.fn() })
+}))
+
+function mockClipboard(clipboard: Partial<Clipboard> | undefined) {
+  Object.defineProperty(navigator, 'clipboard', {
+    value: clipboard,
+    writable: true,
+    configurable: true
+  })
+}
+
+function createImageNode(
+  overrides: Partial<LGraphNode> | Record<string, unknown> = {}
+): LGraphNode {
+  const img = new Image()
+  img.src = 'http://localhost/test.png'
+  Object.defineProperty(img, 'naturalWidth', { value: 100 })
+  Object.defineProperty(img, 'naturalHeight', { value: 100 })
+
+  return createMockLGraphNode({
+    imgs: [img],
+    imageIndex: 0,
+    pasteFile: vi.fn(),
+    pasteFiles: vi.fn(),
+    ...overrides
+  })
+}
+
+describe('useImageMenuOptions', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  describe('getImageMenuOptions', () => {
+    it('includes Paste Image option when node supports paste', () => {
+      const node = createImageNode()
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const options = getImageMenuOptions(node)
+      const labels = options.map((o) => o.label)
+
+      expect(labels).toContain('Paste Image')
+    })
+
+    it('excludes Paste Image option when node does not support paste', () => {
+      const node = createImageNode({ pasteFiles: undefined })
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const options = getImageMenuOptions(node)
+      const labels = options.map((o) => o.label)
+
+      expect(labels).not.toContain('Paste Image')
+    })
+
+    it('returns empty array when node has no images and no pasteFiles', () => {
+      const node = createMockLGraphNode({ imgs: [] })
+      const { getImageMenuOptions } = useImageMenuOptions()
+
+      expect(getImageMenuOptions(node)).toEqual([])
+    })
+
+    it('returns only Paste Image when node has no images but supports paste', () => {
+      const node = createMockLGraphNode({
+        imgs: [],
+        pasteFile: vi.fn(),
+        pasteFiles: vi.fn()
+      })
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const options = getImageMenuOptions(node)
+      const labels = options.map((o) => o.label)
+
+      expect(labels).toEqual(['Paste Image'])
+    })
+
+    it('places Paste Image between Copy Image and Save Image', () => {
+      const node = createImageNode()
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const options = getImageMenuOptions(node)
+      const labels = options.map((o) => o.label)
+
+      const copyIdx = labels.indexOf('Copy Image')
+      const pasteIdx = labels.indexOf('Paste Image')
+      const saveIdx = labels.indexOf('Save Image')
+
+      expect(copyIdx).toBeLessThan(pasteIdx)
+      expect(pasteIdx).toBeLessThan(saveIdx)
+    })
+  })
+
+  describe('pasteImage action', () => {
+    it('reads clipboard and calls pasteFiles on the node', async () => {
+      const node = createImageNode()
+      const mockBlob = new Blob(['fake'], { type: 'image/png' })
+      const mockClipboardItem = {
+        types: ['image/png'],
+        getType: vi.fn().mockResolvedValue(mockBlob)
+      }
+
+      mockClipboard({
+        read: vi.fn().mockResolvedValue([mockClipboardItem])
+      } as unknown as Clipboard)
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const options = getImageMenuOptions(node)
+      const pasteOption = options.find((o) => o.label === 'Paste Image')
+
+      await pasteOption!.action!()
+
+      expect(navigator.clipboard.read).toHaveBeenCalled()
+      expect(node.pasteFile).toHaveBeenCalledWith(expect.any(File))
+      expect(node.pasteFiles).toHaveBeenCalledWith(
+        expect.arrayContaining([expect.any(File)])
+      )
+    })
+
+    it('handles missing clipboard API gracefully', async () => {
+      const node = createImageNode()
+      mockClipboard({ read: undefined } as unknown as Clipboard)
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const options = getImageMenuOptions(node)
+      const pasteOption = options.find((o) => o.label === 'Paste Image')
+
+      await expect(pasteOption!.action!()).resolves.toBeUndefined()
+      expect(node.pasteFiles).not.toHaveBeenCalled()
+    })
+
+    it('handles clipboard with no image data gracefully', async () => {
+      const node = createImageNode()
+      const mockClipboardItem = {
+        types: ['text/plain'],
+        getType: vi.fn()
+      }
+
+      mockClipboard({
+        read: vi.fn().mockResolvedValue([mockClipboardItem])
+      } as unknown as Clipboard)
+
+      const { getImageMenuOptions } = useImageMenuOptions()
+      const options = getImageMenuOptions(node)
+      const pasteOption = options.find((o) => o.label === 'Paste Image')
+
+      await pasteOption!.action!()
+
+      expect(node.pasteFiles).not.toHaveBeenCalled()
+    })
+  })
+})

src/composables/graph/useImageMenuOptions.ts

@@ -6,6 +6,36 @@ import { useCommandStore } from '@/stores/commandStore'
 
 import type { MenuOption } from './useMoreOptionsMenu'
 
+function canPasteImage(node?: LGraphNode): boolean {
+  return typeof node?.pasteFiles === 'function'
+}
+
+async function pasteClipboardImageToNode(node: LGraphNode): Promise<void> {
+  if (!navigator.clipboard?.read) {
+    console.warn('Clipboard API not available')
+    return
+  }
+
+  try {
+    const clipboardItems = await navigator.clipboard.read()
+    for (const item of clipboardItems) {
+      const imageType = item.types.find((type) => type.startsWith('image/'))
+      if (!imageType) continue
+
+      const blob = await item.getType(imageType)
+      const ext = imageType.split('/')[1] ?? 'png'
+      const file = new File([blob], `pasted-image.${ext}`, {
+        type: imageType
+      })
+      node.pasteFile?.(file)
+      node.pasteFiles?.([file])
+      return
+    }
+  } catch (error) {
+    console.error('Failed to paste image from clipboard:', error)
+  }
+}
+
 /**
  * Composable for image-related menu operations
  */
@@ -78,29 +108,48 @@ export function useImageMenuOptions() {
   }
 
   const getImageMenuOptions = (node: LGraphNode): MenuOption[] => {
-    if (!node?.imgs?.length) return []
+    const hasImages = !!node?.imgs?.length
+    const canPaste = canPasteImage(node)
+    if (!hasImages && !canPaste) return []
 
-    return [
-      {
-        label: t('contextMenu.Open in Mask Editor'),
-        action: () => openMaskEditor()
-      },
-      {
-        label: t('contextMenu.Open Image'),
-        icon: 'icon-[lucide--external-link]',
-        action: () => openImage(node)
-      },
-      {
-        label: t('contextMenu.Copy Image'),
-        icon: 'icon-[lucide--copy]',
-        action: () => copyImage(node)
-      },
-      {
+    const options: MenuOption[] = []
+
+    if (hasImages) {
+      options.push(
+        {
+          label: t('contextMenu.Open in Mask Editor'),
+          action: () => openMaskEditor()
+        },
+        {
+          label: t('contextMenu.Open Image'),
+          icon: 'icon-[lucide--external-link]',
+          action: () => openImage(node)
+        },
+        {
+          label: t('contextMenu.Copy Image'),
+          icon: 'icon-[lucide--copy]',
+          action: () => copyImage(node)
+        }
+      )
+    }
+
+    if (canPaste) {
+      options.push({
+        label: t('contextMenu.Paste Image'),
+        icon: 'icon-[lucide--clipboard-paste]',
+        action: () => pasteClipboardImageToNode(node)
+      })
+    }
+
+    if (hasImages) {
+      options.push({
         label: t('contextMenu.Save Image'),
         icon: 'icon-[lucide--download]',
         action: () => saveImage(node)
-      }
-    ]
+      })
+    }
+
+    return options
   }
 
   return {

src/composables/useDismissableOverlay.test.ts

@@ -0,0 +1,108 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { effectScope, ref } from 'vue'
+import type { EffectScope, Ref } from 'vue'
+
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
+
+describe('useDismissableOverlay', () => {
+  let scope: EffectScope | undefined
+  let isOpen: Ref<boolean>
+  let overlayEl: HTMLElement
+  let triggerEl: HTMLElement
+  let outsideEl: HTMLElement
+  let dismissCount: number
+
+  const mountComposable = ({
+    dismissOnScroll = false,
+    getTriggerEl
+  }: {
+    dismissOnScroll?: boolean
+    getTriggerEl?: () => HTMLElement | null
+  } = {}) => {
+    scope = effectScope()
+    scope.run(() =>
+      useDismissableOverlay({
+        isOpen,
+        getOverlayEl: () => overlayEl,
+        getTriggerEl,
+        onDismiss: () => {
+          dismissCount += 1
+        },
+        dismissOnScroll
+      })
+    )
+  }
+
+  beforeEach(() => {
+    isOpen = ref(true)
+    overlayEl = document.createElement('div')
+    triggerEl = document.createElement('button')
+    outsideEl = document.createElement('div')
+    dismissCount = 0
+    document.body.append(overlayEl, triggerEl, outsideEl)
+  })
+
+  afterEach(() => {
+    scope?.stop()
+    scope = undefined
+    document.body.innerHTML = ''
+  })
+
+  it('dismisses on outside pointerdown', () => {
+    mountComposable()
+
+    outsideEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+    expect(dismissCount).toBe(1)
+  })
+
+  it('ignores pointerdown inside the overlay', () => {
+    mountComposable()
+
+    overlayEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+    expect(dismissCount).toBe(0)
+  })
+
+  it('ignores pointerdown inside the trigger', () => {
+    mountComposable({
+      getTriggerEl: () => triggerEl
+    })
+
+    triggerEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+    expect(dismissCount).toBe(0)
+  })
+
+  it('dismisses on scroll when enabled', () => {
+    mountComposable({
+      dismissOnScroll: true
+    })
+
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(dismissCount).toBe(1)
+  })
+
+  it('ignores scroll inside the overlay', () => {
+    mountComposable({
+      dismissOnScroll: true
+    })
+
+    overlayEl.dispatchEvent(new Event('scroll'))
+
+    expect(dismissCount).toBe(0)
+  })
+
+  it('does not dismiss when closed', () => {
+    isOpen.value = false
+    mountComposable({
+      dismissOnScroll: true
+    })
+
+    outsideEl.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    window.dispatchEvent(new Event('scroll'))
+
+    expect(dismissCount).toBe(0)
+  })
+})

src/composables/useDismissableOverlay.ts

@@ -0,0 +1,60 @@
+import { useEventListener } from '@vueuse/core'
+
+import { toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface UseDismissableOverlayOptions {
+  isOpen: MaybeRefOrGetter<boolean>
+  getOverlayEl: () => HTMLElement | null
+  onDismiss: () => void
+  getTriggerEl?: () => HTMLElement | null
+  dismissOnScroll?: boolean
+}
+
+const isNode = (value: EventTarget | null | undefined): value is Node =>
+  value instanceof Node
+
+const isInside = (target: Node, element: HTMLElement | null | undefined) =>
+  !!element?.contains(target)
+
+export function useDismissableOverlay({
+  isOpen,
+  getOverlayEl,
+  onDismiss,
+  getTriggerEl,
+  dismissOnScroll = false
+}: UseDismissableOverlayOptions) {
+  const dismissIfOutside = (event: Event) => {
+    if (!toValue(isOpen)) {
+      return
+    }
+
+    const overlay = getOverlayEl()
+    if (!overlay) {
+      return
+    }
+
+    if (!isNode(event.target)) {
+      onDismiss()
+      return
+    }
+
+    if (
+      isInside(event.target, overlay) ||
+      isInside(event.target, getTriggerEl?.())
+    ) {
+      return
+    }
+
+    onDismiss()
+  }
+
+  useEventListener(window, 'pointerdown', dismissIfOutside, { capture: true })
+
+  if (dismissOnScroll) {
+    useEventListener(window, 'scroll', dismissIfOutside, {
+      capture: true,
+      passive: true
+    })
+  }
+}

src/composables/useLoad3d.test.ts

@@ -35,7 +35,8 @@ vi.mock('@/scripts/api', () => ({
   api: {
     apiURL: vi.fn(),
     addEventListener: vi.fn(),
-    removeEventListener: vi.fn()
+    removeEventListener: vi.fn(),
+    getServerFeature: vi.fn(() => false)
   }
 }))
 

src/composables/useLoad3d.ts

@@ -5,6 +5,7 @@ import { nextTick, ref, toRaw, watch } from 'vue'
 
 import Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
+import { persistThumbnail } from '@/platform/assets/utils/assetPreviewUtil'
 import type {
   AnimationItem,
   CameraConfig,
@@ -514,19 +515,21 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
       // Reset skeleton visibility when loading new model
       modelConfig.value.showSkeleton = false
 
-      if (load3d) {
+      if (load3d && api.getServerFeature('assets', false)) {
         const node = nodeRef.value
 
         const modelWidget = node?.widgets?.find(
           (w) => w.name === 'model_file' || w.name === 'image'
         )
         const value = modelWidget?.value
-        if (typeof value === 'string') {
-          void Load3dUtils.generateThumbnailIfNeeded(
-            load3d,
-            value,
-            isPreview.value ? 'output' : 'input'
-          )
+        if (typeof value === 'string' && value) {
+          const filename = value.trim().replace(/\s*\[output\]$/, '')
+          const modelName = Load3dUtils.splitFilePath(filename)[1]
+          load3d
+            .captureThumbnail(256, 256)
+            .then((dataUrl) => fetch(dataUrl).then((r) => r.blob()))
+            .then((blob) => persistThumbnail(modelName, blob))
+            .catch(() => {})
         }
       }
     },

src/composables/useMissingNodesDialog.ts

@@ -1,30 +0,0 @@
-import type { ComponentAttrs } from 'vue-component-type-helpers'
-
-import MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
-import MissingNodesFooter from '@/components/dialog/content/MissingNodesFooter.vue'
-import MissingNodesHeader from '@/components/dialog/content/MissingNodesHeader.vue'
-import { useDialogService } from '@/services/dialogService'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const DIALOG_KEY = 'global-missing-nodes'
-
-export function useMissingNodesDialog() {
-  const { showSmallLayoutDialog } = useDialogService()
-  const dialogStore = useDialogStore()
-
-  function hide() {
-    dialogStore.closeDialog({ key: DIALOG_KEY })
-  }
-
-  function show(props: ComponentAttrs<typeof MissingNodesContent>) {
-    showSmallLayoutDialog({
-      key: DIALOG_KEY,
-      headerComponent: MissingNodesHeader,
-      footerComponent: MissingNodesFooter,
-      component: MissingNodesContent,
-      props
-    })
-  }
-
-  return { show, hide }
-}

src/extensions/core/load3d/Load3d.ts

@@ -20,6 +20,25 @@ import {
   type UpDirection
 } from './interfaces'
 
+function positionThumbnailCamera(
+  camera: THREE.PerspectiveCamera,
+  model: THREE.Object3D
+) {
+  const box = new THREE.Box3().setFromObject(model)
+  const size = box.getSize(new THREE.Vector3())
+  const center = box.getCenter(new THREE.Vector3())
+  const maxDim = Math.max(size.x, size.y, size.z)
+  const distance = maxDim * 1.5
+
+  camera.position.set(
+    center.x + distance * 0.7,
+    center.y + distance * 0.5,
+    center.z + distance * 0.7
+  )
+  camera.lookAt(center)
+  camera.updateProjectionMatrix()
+}
+
 class Load3d {
   renderer: THREE.WebGLRenderer
   protected clock: THREE.Clock
@@ -781,25 +800,18 @@ class Load3d {
         this.cameraManager.toggleCamera('perspective')
       }
 
-      const box = new THREE.Box3().setFromObject(this.modelManager.currentModel)
-      const size = box.getSize(new THREE.Vector3())
-      const center = box.getCenter(new THREE.Vector3())
-
-      const maxDim = Math.max(size.x, size.y, size.z)
-      const distance = maxDim * 1.5
-
-      const cameraPosition = new THREE.Vector3(
-        center.x - distance * 0.8,
-        center.y + distance * 0.4,
-        center.z + distance * 0.3
+      positionThumbnailCamera(
+        this.cameraManager.perspectiveCamera,
+        this.modelManager.currentModel
       )
 
-      this.cameraManager.perspectiveCamera.position.copy(cameraPosition)
-      this.cameraManager.perspectiveCamera.lookAt(center)
-      this.cameraManager.perspectiveCamera.updateProjectionMatrix()
-
       if (this.controlsManager.controls) {
-        this.controlsManager.controls.target.copy(center)
+        const box = new THREE.Box3().setFromObject(
+          this.modelManager.currentModel
+        )
+        this.controlsManager.controls.target.copy(
+          box.getCenter(new THREE.Vector3())
+        )
         this.controlsManager.controls.update()
       }
 

src/extensions/core/load3d/Load3dUtils.ts

@@ -1,34 +1,9 @@
-import type Load3d from '@/extensions/core/load3d/Load3d'
 import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 
 class Load3dUtils {
-  static async generateThumbnailIfNeeded(
-    load3d: Load3d,
-    modelPath: string,
-    folderType: 'input' | 'output'
-  ): Promise<void> {
-    const [subfolder, filename] = this.splitFilePath(modelPath)
-    const thumbnailFilename = this.getThumbnailFilename(filename)
-
-    const exists = await this.fileExists(
-      subfolder,
-      thumbnailFilename,
-      folderType
-    )
-    if (exists) return
-
-    const imageData = await load3d.captureThumbnail(256, 256)
-    await this.uploadThumbnail(
-      imageData,
-      subfolder,
-      thumbnailFilename,
-      folderType
-    )
-  }
-
   static async uploadTempImage(
     imageData: string,
     prefix: string,
@@ -147,46 +122,6 @@ class Load3dUtils {
 
     await Promise.all(uploadPromises)
   }
-
-  static getThumbnailFilename(modelFilename: string): string {
-    return `${modelFilename}.png`
-  }
-
-  static async fileExists(
-    subfolder: string,
-    filename: string,
-    type: string = 'input'
-  ): Promise<boolean> {
-    try {
-      const url = api.apiURL(this.getResourceURL(subfolder, filename, type))
-      const response = await fetch(url, { method: 'HEAD' })
-      return response.ok
-    } catch {
-      return false
-    }
-  }
-
-  static async uploadThumbnail(
-    imageData: string,
-    subfolder: string,
-    filename: string,
-    type: string = 'input'
-  ): Promise<boolean> {
-    const blob = await fetch(imageData).then((r) => r.blob())
-    const file = new File([blob], filename, { type: 'image/png' })
-
-    const body = new FormData()
-    body.append('image', file)
-    body.append('subfolder', subfolder)
-    body.append('type', type)
-
-    const resp = await api.fetchApi('/upload/image', {
-      method: 'POST',
-      body
-    })
-
-    return resp.status === 200
-  }
 }
 
 export default Load3dUtils

src/extensions/core/saveMesh.ts

@@ -4,16 +4,17 @@ import Load3D from '@/components/load3d/Load3D.vue'
 import { useLoad3d } from '@/composables/useLoad3d'
 import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
-import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
 import type { NodeOutputWith, ResultItem } from '@/schemas/apiSchema'
+import { api } from '@/scripts/api'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 
 type SaveMeshOutput = NodeOutputWith<{
   '3d'?: ResultItem[]
 }>
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { persistThumbnail } from '@/platform/assets/utils/assetPreviewUtil'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
@@ -100,17 +101,20 @@ useExtensionService().registerExtension({
 
           const loadFolder = fileInfo.type as 'input' | 'output'
 
-          const onModelLoaded = () => {
-            load3d.removeEventListener('modelLoadingEnd', onModelLoaded)
-            void Load3dUtils.generateThumbnailIfNeeded(
-              load3d,
-              filePath,
-              loadFolder
-            )
-          }
-          load3d.addEventListener('modelLoadingEnd', onModelLoaded)
-
           config.configureForSaveMesh(loadFolder, filePath)
+
+          if (api.getServerFeature('assets', false)) {
+            const filename = fileInfo.filename ?? ''
+            const onModelLoaded = () => {
+              load3d.removeEventListener('modelLoadingEnd', onModelLoaded)
+              load3d
+                .captureThumbnail(256, 256)
+                .then((dataUrl) => fetch(dataUrl).then((r) => r.blob()))
+                .then((blob) => persistThumbnail(filename, blob))
+                .catch(() => {})
+            }
+            load3d.addEventListener('modelLoadingEnd', onModelLoaded)
+          }
         }
       })
     }

src/lib/litegraph/src/ContextMenu.ts

@@ -1,4 +1,4 @@
-import DOMPurify from 'dompurify'
+import dompurify from 'dompurify'
 
 import type {
   ContextMenuDivElement,
@@ -16,7 +16,7 @@ const ALLOWED_STYLE_PROPS = new Set([
   'border-left'
 ])
 
-DOMPurify.addHook('uponSanitizeAttribute', (_node, data) => {
+dompurify.addHook('uponSanitizeAttribute', (_node, data) => {
   if (data.attrName === 'style') {
     const sanitizedStyle = data.attrValue
       .split(';')
@@ -33,7 +33,7 @@ DOMPurify.addHook('uponSanitizeAttribute', (_node, data) => {
 })
 
 function sanitizeMenuHTML(html: string): string {
-  return DOMPurify.sanitize(html, {
+  return dompurify.sanitize(html, {
     ALLOWED_TAGS,
     ALLOWED_ATTR: ['style']
   })

src/lib/litegraph/src/subgraph/Subgraph.test.ts

@@ -206,7 +206,7 @@ describe.skip('Subgraph Serialization', () => {
 })
 
 describe.skip('Subgraph Known Issues', () => {
-  it.todo('should enforce MAX_NESTED_SUBGRAPHS limit', () => {
+  it.skip('should enforce MAX_NESTED_SUBGRAPHS limit', () => {
     // This test documents that MAX_NESTED_SUBGRAPHS = 1000 is defined
     // but not actually enforced anywhere in the code.
     //

src/lib/litegraph/src/subgraph/SubgraphEdgeCases.test.ts

@@ -48,7 +48,7 @@ describe.skip('SubgraphEdgeCases - Recursion Detection', () => {
     expect(firstLevel.isSubgraphNode()).toBe(true)
   })
 
-  it.todo('should use WeakSet for cycle detection', () => {
+  it.skip('should use WeakSet for cycle detection', () => {
     // TODO: This test is currently skipped because cycle detection has a bug
     // The fix is to pass 'visited' directly instead of 'new Set(visited)' in SubgraphNode.ts:299
     const subgraph = createTestSubgraph({ nodeCount: 1 })

src/locales/CONTRIBUTING.md

@@ -35,7 +35,7 @@ module.exports = defineConfig({
 })
 ```
 
-#### 1.2 Update `src/constants/coreSettings.ts`
+#### 1.2 Update `src/platform/settings/constants/coreSettings.ts`
 
 Add your language to the dropdown options:
 

src/locales/en/main.json

@@ -546,6 +546,7 @@
     "Open in Mask Editor": "Open in Mask Editor",
     "Open Image": "Open Image",
     "Copy Image": "Copy Image",
+    "Paste Image": "Paste Image",
     "Save Image": "Save Image",
     "Rename": "Rename",
     "RenameWidget": "Rename Widget",
@@ -1839,7 +1840,8 @@
   "loadWorkflowWarning": {
     "outdatedVersion": "This workflow was created with a newer version of ComfyUI ({version}). Some nodes may not work correctly.",
     "outdatedVersionGeneric": "This workflow was created with a newer version of ComfyUI. Some nodes may not work correctly.",
-    "coreNodesFromVersion": "Core nodes from version {version}:"
+    "coreNodesFromVersion": "Core nodes from version {version}:",
+    "unknownVersion": "unknown"
   },
   "errorDialog": {
     "defaultTitle": "An error occurred",

src/locales/en/settings.json

@@ -454,9 +454,6 @@
   "Comfy_Workflow_ShowMissingModelsWarning": {
     "name": "Show missing models warning"
   },
-  "Comfy_Workflow_ShowMissingNodesWarning": {
-    "name": "Show missing nodes warning"
-  },
   "Comfy_Workflow_SortNodeIdOnSave": {
     "name": "Sort node IDs when saving workflow"
   },

src/main.ts

@@ -12,6 +12,10 @@ import { createApp } from 'vue'
 import { VueFire, VueFireAuth } from 'vuefire'
 
 import { getFirebaseConfig } from '@/config/firebase'
+import {
+  configValueOrDefault,
+  remoteConfig
+} from '@/platform/remoteConfig/remoteConfig'
 import '@/lib/litegraph/public/css/litegraph.css'
 import router from '@/router'
 import { useBootstrapStore } from '@/stores/bootstrapStore'
@@ -48,9 +52,13 @@ const firebaseApp = initializeApp(getFirebaseConfig())
 const app = createApp(App)
 const pinia = createPinia()
 
+const sentryDsn = isCloud
+  ? configValueOrDefault(remoteConfig.value, 'sentry_dsn', __SENTRY_DSN__)
+  : __SENTRY_DSN__
+
 Sentry.init({
   app,
-  dsn: __SENTRY_DSN__,
+  dsn: sentryDsn,
   enabled: __SENTRY_ENABLED__,
   release: __COMFYUI_FRONTEND_VERSION__,
   normalizeDepth: 8,

src/platform/assets/components/Media3DTop.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="relative size-full overflow-hidden rounded-sm">
+  <div ref="containerRef" class="relative size-full overflow-hidden rounded-sm">
     <img
-      v-if="!thumbnailError"
+      v-if="thumbnailSrc"
       :src="thumbnailSrc"
       :alt="asset?.name"
       class="size-full object-contain transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
-      @error="thumbnailError = true"
     />
     <div
       v-else
@@ -20,16 +19,59 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { useIntersectionObserver } from '@vueuse/core'
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+import { api } from '@/scripts/api'
 
 import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import { findServerPreviewUrl } from '../utils/assetPreviewUtil'
 
 const { asset } = defineProps<{ asset: AssetMeta }>()
 
-const thumbnailError = ref(false)
+const containerRef = ref<HTMLElement>()
+const thumbnailSrc = ref<string | null>(null)
+const hasAttempted = ref(false)
 
-const thumbnailSrc = computed(() => {
-  if (!asset?.src) return ''
-  return asset.src.replace(/([?&]filename=)([^&]*)/, '$1$2.png')
+useIntersectionObserver(containerRef, ([entry]) => {
+  if (entry?.isIntersecting && !hasAttempted.value) {
+    hasAttempted.value = true
+    void loadThumbnail()
+  }
 })
+
+async function loadThumbnail() {
+  if (asset?.preview_id && asset?.preview_url) {
+    thumbnailSrc.value = asset.preview_url
+    return
+  }
+
+  if (!asset?.src) return
+
+  if (asset.name && api.getServerFeature('assets', false)) {
+    const serverPreviewUrl = await findServerPreviewUrl(asset.name)
+    if (serverPreviewUrl) {
+      thumbnailSrc.value = serverPreviewUrl
+    }
+  }
+}
+
+function revokeThumbnail() {
+  if (thumbnailSrc.value?.startsWith('blob:')) {
+    URL.revokeObjectURL(thumbnailSrc.value)
+  }
+  thumbnailSrc.value = null
+}
+
+watch(
+  () => asset?.src,
+  () => {
+    if (hasAttempted.value) {
+      hasAttempted.value = false
+      revokeThumbnail()
+    }
+  }
+)
+
+onBeforeUnmount(revokeThumbnail)
 </script>

src/platform/assets/components/MediaAssetCard.vue

@@ -150,6 +150,7 @@ import {
 import { cn } from '@/utils/tailwindUtil'
 
 import { getAssetType } from '../composables/media/assetMappers'
+import { getAssetUrl } from '../utils/assetUrlUtil'
 import { useMediaAssetActions } from '../composables/useMediaAssetActions'
 import type { AssetItem } from '../schemas/assetSchema'
 import { getAssetDisplayName } from '../utils/assetMetadataUtils'
@@ -237,7 +238,12 @@ const adaptedAsset = computed(() => {
     name: asset.name,
     display_name: asset.display_name,
     kind: fileKind.value,
-    src: asset.thumbnail_url || asset.preview_url || '',
+    src:
+      fileKind.value === '3D'
+        ? getAssetUrl(asset)
+        : asset.thumbnail_url || asset.preview_url || '',
+    preview_url: asset.preview_url,
+    preview_id: asset.preview_id,
     size: asset.size,
     tags: asset.tags || [],
     created_at: asset.created_at,

src/platform/assets/components/MediaAssetContextMenu.test.ts

@@ -0,0 +1,143 @@
+import { mount } from '@vue/test-utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+
+import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  })
+}))
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+vi.mock('@/platform/workflow/utils/workflowExtractionUtil', () => ({
+  supportsWorkflowMetadata: () => true
+}))
+
+vi.mock('@/utils/formatUtil', () => ({
+  isPreviewableMediaType: () => true
+}))
+
+vi.mock('@/utils/loaderNodeUtil', () => ({
+  detectNodeTypeFromFilename: () => ({ nodeType: 'LoadImage' })
+}))
+
+const mediaAssetActions = {
+  addWorkflow: vi.fn(),
+  downloadAsset: vi.fn(),
+  openWorkflow: vi.fn(),
+  exportWorkflow: vi.fn(),
+  copyJobId: vi.fn(),
+  deleteAssets: vi.fn().mockResolvedValue(false)
+}
+
+vi.mock('../composables/useMediaAssetActions', () => ({
+  useMediaAssetActions: () => mediaAssetActions
+}))
+
+const contextMenuStub = defineComponent({
+  name: 'ContextMenu',
+  props: {
+    pt: {
+      type: Object,
+      default: undefined
+    }
+  },
+  emits: ['hide'],
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    hide() {
+      this.visible = false
+      this.$emit('hide')
+    }
+  },
+  template: `
+    <div
+      v-if="visible"
+      class="context-menu-stub"
+      v-bind="pt?.root"
+    />
+  `
+})
+
+const asset: AssetItem = {
+  id: 'asset-1',
+  name: 'image.png',
+  tags: [],
+  user_metadata: {}
+}
+
+const buttonStub = {
+  template: '<div class="button-stub"><slot /></div>'
+}
+
+type MediaAssetContextMenuExposed = ComponentPublicInstance & {
+  show: (event: MouseEvent) => void
+}
+
+const mountComponent = () =>
+  mount(MediaAssetContextMenu, {
+    attachTo: document.body,
+    props: {
+      asset,
+      assetType: 'output',
+      fileKind: 'image'
+    },
+    global: {
+      stubs: {
+        ContextMenu: contextMenuStub,
+        Button: buttonStub
+      }
+    }
+  })
+
+async function showMenu(
+  wrapper: ReturnType<typeof mountComponent>
+): Promise<HTMLElement> {
+  const exposed = wrapper.vm as MediaAssetContextMenuExposed
+  const event = new MouseEvent('contextmenu', { bubbles: true })
+  exposed.show(event)
+  await nextTick()
+
+  return wrapper.get('.context-menu-stub').element as HTMLElement
+}
+
+afterEach(() => {
+  vi.clearAllMocks()
+  document.body.innerHTML = ''
+})
+
+describe('MediaAssetContextMenu', () => {
+  it('dismisses outside pointerdown using the rendered root id', async () => {
+    const wrapper = mountComponent()
+    const outside = document.createElement('div')
+    document.body.append(outside)
+
+    const menu = await showMenu(wrapper)
+    const menuId = menu.id
+
+    expect(menuId).not.toBe('')
+    expect(document.getElementById(menuId)).toBe(menu)
+
+    outside.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+    await nextTick()
+
+    expect(wrapper.find('.context-menu-stub').exists()).toBe(false)
+    expect(wrapper.emitted('hide')).toEqual([[]])
+
+    wrapper.unmount()
+  })
+})

src/platform/assets/components/MediaAssetContextMenu.vue

@@ -4,6 +4,7 @@
     :model="contextMenuItems"
     :pt="{
       root: {
+        id: contextMenuId,
         class: cn(
           'rounded-lg',
           'bg-secondary-background text-base-foreground',
@@ -29,14 +30,13 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
-import type { ComponentPublicInstance } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, ref, useId } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
+import { useDismissableOverlay } from '@/composables/useDismissableOverlay'
 import { isCloud } from '@/platform/distribution/types'
 import { supportsWorkflowMetadata } from '@/platform/workflow/utils/workflowExtractionUtil'
 import { isPreviewableMediaType } from '@/utils/formatUtil'
@@ -74,34 +74,22 @@ const emit = defineEmits<{
   'bulk-export-workflow': [assets: AssetItem[]]
 }>()
 
-type ContextMenuInstance = ComponentPublicInstance & {
+type ContextMenuHandle = {
   show: (event: MouseEvent) => void
   hide: () => void
-  container?: HTMLElement
-  $el?: HTMLElement
 }
 
-const contextMenu = ref<ContextMenuInstance | null>(null)
+const contextMenu = ref<ContextMenuHandle | null>(null)
+const contextMenuId = useId()
 const isVisible = ref(false)
 const actions = useMediaAssetActions()
 const { t } = useI18n()
 
-function getOverlayEl(): HTMLElement | null {
-  return contextMenu.value?.container ?? contextMenu.value?.$el ?? null
-}
-
-function dismissIfOutside(event: Event) {
-  if (!isVisible.value) return
-  const overlay = getOverlayEl()
-  if (!overlay) return
-  if (overlay.contains(event.target as Node)) return
-  hide()
-}
-
-useEventListener(window, 'pointerdown', dismissIfOutside, { capture: true })
-useEventListener(window, 'scroll', dismissIfOutside, {
-  capture: true,
-  passive: true
+useDismissableOverlay({
+  isOpen: isVisible,
+  getOverlayEl: () => document.getElementById(contextMenuId),
+  onDismiss: hide,
+  dismissOnScroll: true
 })
 
 const showAddToWorkflow = computed(() => {

src/platform/assets/schemas/assetSchema.ts

@@ -95,7 +95,7 @@ export type ModelFile = z.infer<typeof zModelFile>
 
 /** Payload for updating an asset via PUT /assets/:id */
 export type AssetUpdatePayload = Partial<
-  Pick<AssetItem, 'name' | 'tags' | 'user_metadata'>
+  Pick<AssetItem, 'name' | 'tags' | 'user_metadata' | 'preview_id'>
 >
 
 /** User-editable metadata fields for model assets */

src/platform/assets/utils/assetPreviewUtil.ts

@@ -0,0 +1,70 @@
+import { api } from '@/scripts/api'
+
+import { assetService } from '../services/assetService'
+
+interface AssetRecord {
+  id: string
+  name: string
+  preview_url?: string
+  preview_id?: string
+}
+
+async function fetchAssetsByName(name: string): Promise<AssetRecord[]> {
+  const params = new URLSearchParams({ name_contains: name })
+  const res = await api.fetchApi(`/assets?${params}`)
+  if (!res.ok) return []
+  const data = await res.json()
+  return data.assets ?? []
+}
+
+export async function findServerPreviewUrl(
+  name: string
+): Promise<string | null> {
+  try {
+    const assets = await fetchAssetsByName(name)
+
+    const modelAsset = assets.find((a) => a.name === name)
+    if (!modelAsset?.preview_id) return null
+
+    const previewAsset = assets.find((a) => a.id === modelAsset.preview_id)
+    if (!previewAsset?.preview_url) return null
+
+    return api.api_base + previewAsset.preview_url
+  } catch {
+    return null
+  }
+}
+
+export async function persistThumbnail(
+  modelName: string,
+  blob: Blob
+): Promise<void> {
+  try {
+    const assets = await fetchAssetsByName(modelName)
+    const modelAsset = assets.find((a) => a.name === modelName)
+    if (!modelAsset || modelAsset.preview_id) return
+
+    const previewFilename = `${modelName}_preview.png`
+    const uploaded = await assetService.uploadAssetFromBase64({
+      data: await blobToDataUrl(blob),
+      name: previewFilename,
+      tags: ['output'],
+      user_metadata: { filename: previewFilename }
+    })
+
+    await assetService.updateAsset(modelAsset.id, {
+      preview_id: uploaded.id
+    })
+  } catch {
+    // Non-critical — client still shows the rendered thumbnail
+  }
+}
+
+function blobToDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as string)
+    reader.onerror = reject
+    reader.readAsDataURL(blob)
+  })
+}

src/platform/remoteConfig/types.ts

@@ -54,4 +54,5 @@ export type RemoteConfig = {
   workflow_sharing_enabled?: boolean
   comfyhub_upload_enabled?: boolean
   comfyhub_profile_gate_enabled?: boolean
+  sentry_dsn?: string
 }

src/platform/settings/constants/coreSettings.ts

@@ -280,12 +280,6 @@ export const CORE_SETTINGS: SettingParams[] = [
       step: 0.01
     }
   },
-  {
-    id: 'Comfy.Workflow.ShowMissingNodesWarning',
-    name: 'Show missing nodes warning',
-    type: 'boolean',
-    defaultValue: true
-  },
   {
     id: 'Comfy.Workflow.ShowMissingModelsWarning',
     name: 'Show missing models warning',

src/platform/workflow/core/services/workflowService.test.ts

@@ -12,6 +12,7 @@ import { useToastStore } from '@/platform/updates/common/toastStore'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { app } from '@/scripts/app'
 import { useAppMode } from '@/composables/useAppMode'
 import type { AppMode } from '@/composables/useAppMode'
@@ -56,15 +57,10 @@ function makeWorkflowData(
   }
 }
 
-const { mockShowMissingNodes, mockConfirm } = vi.hoisted(() => ({
-  mockShowMissingNodes: vi.fn(),
+const { mockConfirm } = vi.hoisted(() => ({
   mockConfirm: vi.fn()
 }))
 
-vi.mock('@/composables/useMissingNodesDialog', () => ({
-  useMissingNodesDialog: () => ({ show: mockShowMissingNodes, hide: vi.fn() })
-}))
-
 vi.mock('@/services/dialogService', () => ({
   useDialogService: () => ({
     prompt: vi.fn(),
@@ -142,7 +138,6 @@ function createWorkflow(
 function enableWarningSettings() {
   vi.spyOn(useSettingStore(), 'get').mockImplementation(
     (key: string): boolean => {
-      if (key === 'Comfy.Workflow.ShowMissingNodesWarning') return true
       if (key === 'Comfy.Workflow.ShowMissingModelsWarning') return true
       return false
     }
@@ -164,22 +159,24 @@ describe('useWorkflowService', () => {
       const workflow = createWorkflow(null)
       useWorkflowService().showPendingWarnings(workflow)
 
-      expect(mockShowMissingNodes).not.toHaveBeenCalled()
+      expect(
+        useExecutionErrorStore().surfaceMissingNodes
+      ).not.toHaveBeenCalled()
     })
 
-    it('should show missing nodes dialog and clear warnings', () => {
+    it('should surface missing nodes and clear warnings', () => {
       const missingNodeTypes = ['CustomNode1', 'CustomNode2']
       const workflow = createWorkflow({ missingNodeTypes })
 
       useWorkflowService().showPendingWarnings(workflow)
 
-      expect(mockShowMissingNodes).toHaveBeenCalledWith({
+      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
         missingNodeTypes
-      })
+      )
       expect(workflow.pendingWarnings).toBeNull()
     })
 
-    it('should not show dialogs when settings are disabled', () => {
+    it('should always surface missing nodes regardless of settings', () => {
       vi.spyOn(useSettingStore(), 'get').mockReturnValue(false)
 
       const workflow = createWorkflow({
@@ -188,7 +185,9 @@ describe('useWorkflowService', () => {
 
       useWorkflowService().showPendingWarnings(workflow)
 
-      expect(mockShowMissingNodes).not.toHaveBeenCalled()
+      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
+        ['CustomNode1']
+      )
       expect(workflow.pendingWarnings).toBeNull()
     })
 
@@ -201,7 +200,9 @@ describe('useWorkflowService', () => {
       service.showPendingWarnings(workflow)
       service.showPendingWarnings(workflow)
 
-      expect(mockShowMissingNodes).toHaveBeenCalledTimes(1)
+      expect(
+        useExecutionErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -224,7 +225,9 @@ describe('useWorkflowService', () => {
         { loadable: true }
       )
 
-      expect(mockShowMissingNodes).not.toHaveBeenCalled()
+      expect(
+        useExecutionErrorStore().surfaceMissingNodes
+      ).not.toHaveBeenCalled()
 
       await useWorkflowService().openWorkflow(workflow)
 
@@ -235,9 +238,9 @@ describe('useWorkflowService', () => {
         workflow,
         expect.objectContaining({ deferWarnings: true })
       )
-      expect(mockShowMissingNodes).toHaveBeenCalledWith({
-        missingNodeTypes: ['CustomNode1']
-      })
+      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
+        ['CustomNode1']
+      )
       expect(workflow.pendingWarnings).toBeNull()
     })
 
@@ -254,18 +257,22 @@ describe('useWorkflowService', () => {
       const service = useWorkflowService()
 
       await service.openWorkflow(workflow1)
-      expect(mockShowMissingNodes).toHaveBeenCalledTimes(1)
-      expect(mockShowMissingNodes).toHaveBeenCalledWith({
-        missingNodeTypes: ['MissingNodeA']
-      })
+      expect(
+        useExecutionErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledTimes(1)
+      expect(useExecutionErrorStore().surfaceMissingNodes).toHaveBeenCalledWith(
+        ['MissingNodeA']
+      )
       expect(workflow1.pendingWarnings).toBeNull()
       expect(workflow2.pendingWarnings).not.toBeNull()
 
       await service.openWorkflow(workflow2)
-      expect(mockShowMissingNodes).toHaveBeenCalledTimes(2)
-      expect(mockShowMissingNodes).toHaveBeenLastCalledWith({
-        missingNodeTypes: ['MissingNodeB']
-      })
+      expect(
+        useExecutionErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledTimes(2)
+      expect(
+        useExecutionErrorStore().surfaceMissingNodes
+      ).toHaveBeenLastCalledWith(['MissingNodeB'])
       expect(workflow2.pendingWarnings).toBeNull()
     })
 
@@ -278,10 +285,14 @@ describe('useWorkflowService', () => {
       const service = useWorkflowService()
 
       await service.openWorkflow(workflow, { force: true })
-      expect(mockShowMissingNodes).toHaveBeenCalledTimes(1)
+      expect(
+        useExecutionErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledTimes(1)
 
       await service.openWorkflow(workflow, { force: true })
-      expect(mockShowMissingNodes).toHaveBeenCalledTimes(1)
+      expect(
+        useExecutionErrorStore().surfaceMissingNodes
+      ).toHaveBeenCalledTimes(1)
     })
   })
 

src/platform/workflow/core/services/workflowService.ts

@@ -16,7 +16,6 @@ import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/w
 import { useWorkflowThumbnail } from '@/renderer/core/thumbnail/useWorkflowThumbnail'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
-import { useMissingNodesDialog } from '@/composables/useMissingNodesDialog'
 import { useDialogService } from '@/services/dialogService'
 import { useAppMode } from '@/composables/useAppMode'
 import type { AppMode } from '@/composables/useAppMode'
@@ -39,7 +38,6 @@ export const useWorkflowService = () => {
   const workflowStore = useWorkflowStore()
   const toastStore = useToastStore()
   const dialogService = useDialogService()
-  const missingNodesDialog = useMissingNodesDialog()
   const workflowThumbnail = useWorkflowThumbnail()
   const domWidgetStore = useDomWidgetStore()
   const executionErrorStore = useExecutionErrorStore()
@@ -240,8 +238,8 @@ export const useWorkflowService = () => {
       /* restore_view=*/ true,
       workflow,
       {
-        showMissingModelsDialog: loadFromRemote,
-        showMissingNodesDialog: loadFromRemote,
+        showMissingModels: loadFromRemote,
+        showMissingNodes: true,
         checkForRerouteMigration: false,
         deferWarnings: true
       }
@@ -541,10 +539,6 @@ export const useWorkflowService = () => {
     wf.pendingWarnings = null
 
     if (missingNodeTypes?.length) {
-      // Remove modal once Node Replacement is implemented in TabErrors.
-      if (settingStore.get('Comfy.Workflow.ShowMissingNodesWarning')) {
-        missingNodesDialog.show({ missingNodeTypes })
-      }
       executionErrorStore.surfaceMissingNodes(missingNodeTypes)
     }
   }

src/platform/workflow/management/stores/comfyWorkflow.ts

@@ -5,10 +5,8 @@ import type { ChangeTracker } from '@/scripts/changeTracker'
 import type { AppMode } from '@/composables/useAppMode'
 import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import { UserFile } from '@/stores/userFileStore'
-import type {
-  ComfyWorkflowJSON,
-  ModelFile
-} from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { MissingModelCandidate } from '@/platform/missingModel/types'
 import type { MissingNodeType } from '@/types/comfy'
 
 export interface LinearData {
@@ -18,10 +16,9 @@ export interface LinearData {
 
 export interface PendingWarnings {
   missingNodeTypes?: MissingNodeType[]
-  missingModels?: {
-    missingModels: ModelFile[]
-    paths: Record<string, string[]>
-  }
+  // TODO: Currently unused — missing models are surfaced directly on every
+  // graph load. Reserved for future per-workflow missing model state management.
+  missingModelCandidates?: MissingModelCandidate[]
 }
 
 export class ComfyWorkflow extends UserFile {

src/renderer/extensions/linearMode/DropZone.vue

@@ -23,6 +23,27 @@ const {
 
 const dropZoneRef = ref<HTMLElement | null>(null)
 const canAcceptDrop = ref(false)
+const pointerStart = ref<{ x: number; y: number } | null>(null)
+
+function onPointerDown(e: PointerEvent) {
+  pointerStart.value = { x: e.clientX, y: e.clientY }
+}
+
+function onIndicatorClick(e: MouseEvent) {
+  if (e.detail !== 0) {
+    const start = pointerStart.value
+    if (start) {
+      const dx = e.clientX - start.x
+      const dy = e.clientY - start.y
+      if (dx * dx + dy * dy > 25) {
+        pointerStart.value = null
+        return
+      }
+    }
+  }
+  pointerStart.value = null
+  dropIndicator?.onClick?.(e)
+}
 
 const { isOverDropZone } = useDropZone(dropZoneRef, {
   onDrop: (_files, event) => {
@@ -70,16 +91,17 @@ const indicatorTag = computed(() => (dropIndicator?.onClick ? 'button' : 'div'))
       data-slot="drop-zone-indicator"
       :class="
         cn(
-          'm-3 block w-[calc(100%-1.5rem)] appearance-none overflow-hidden rounded-lg border border-node-component-border bg-transparent p-1 text-left text-component-node-foreground-secondary transition-colors',
+          'm-3 block h-42 min-h-32 w-[calc(100%-1.5rem)] resize-y appearance-none overflow-hidden rounded-lg border border-node-component-border bg-transparent p-1 text-left text-component-node-foreground-secondary transition-colors',
           dropIndicator?.onClick && 'cursor-pointer'
         )
       "
-      @click.prevent="dropIndicator?.onClick?.($event)"
+      @pointerdown="onPointerDown"
+      @click.prevent="onIndicatorClick"
     >
       <div
         :class="
           cn(
-            'flex min-h-23 w-full flex-col items-center justify-center gap-2 rounded-[7px] p-6 text-center text-sm/tight transition-colors',
+            'flex h-full max-w-full flex-col items-center justify-center gap-2 overflow-hidden rounded-[7px] p-3 text-center text-sm/tight transition-colors',
             isHovered &&
               !dropIndicator?.imageUrl &&
               'border border-dashed border-component-node-foreground-secondary bg-component-node-widget-background-hovered'
@@ -88,7 +110,7 @@ const indicatorTag = computed(() => (dropIndicator?.onClick ? 'button' : 'div'))
       >
         <img
           v-if="dropIndicator?.imageUrl"
-          class="max-h-23 rounded-md object-contain"
+          class="max-h-full max-w-full rounded-md object-contain"
           :alt="dropIndicator?.label ?? ''"
           :src="dropIndicator?.imageUrl"
         />

src/renderer/extensions/vueNodes/VideoPreview.vue

@@ -7,7 +7,7 @@
     <!-- Video Wrapper -->
     <div
       ref="videoWrapperEl"
-      class="relative flex flex-1 overflow-hidden rounded-[5px] bg-transparent"
+      class="relative flex flex-1 overflow-hidden rounded-[5px] bg-node-component-surface"
       tabindex="0"
       role="region"
       :aria-label="$t('g.videoPreview')"
@@ -203,6 +203,7 @@ const handleDownload = () => {
       severity: 'error',
       summary: 'Error',
       detail: t('g.failedToDownloadVideo'),
+      life: 3000,
       group: 'video-preview'
     })
   }

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -10,7 +10,7 @@
     :data-collapsed="isCollapsed || undefined"
     :class="
       cn(
-        'group/node lg-node absolute text-sm',
+        'group/node lg-node absolute isolate text-sm',
         'flex min-w-(--min-node-width) flex-col contain-layout contain-style',
         cursorClass,
         isSelected && 'outline-node-component-outline',

src/schemas/apiSchema.ts

@@ -299,7 +299,6 @@ const zSettings = z.object({
   'Comfy.ConfirmClear': z.boolean(),
   'Comfy.DevMode': z.boolean(),
   'Comfy.UI.TabBarLayout': z.enum(['Default', 'Legacy']),
-  'Comfy.Workflow.ShowMissingNodesWarning': z.boolean(),
   'Comfy.Workflow.ShowMissingModelsWarning': z.boolean(),
   'Comfy.Workflow.WarnBlueprintOverwrite': z.boolean(),
   'Comfy.DisableFloatRounding': z.boolean(),

src/scripts/app.ts

@@ -56,7 +56,6 @@ import {
   DOMWidgetImpl
 } from '@/scripts/domWidget'
 import { useDialogService } from '@/services/dialogService'
-import { useMissingNodesDialog } from '@/composables/useMissingNodesDialog'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useSubgraphService } from '@/services/subgraphService'
@@ -1104,13 +1103,7 @@ export class ComfyApp {
   }
 
   private showMissingNodesError(missingNodeTypes: MissingNodeType[]) {
-    // Remove modal once Node Replacement is implemented in TabErrors.
-    if (useSettingStore().get('Comfy.Workflow.ShowMissingNodesWarning')) {
-      useMissingNodesDialog().show({ missingNodeTypes })
-    }
-
-    const executionErrorStore = useExecutionErrorStore()
-    executionErrorStore.surfaceMissingNodes(missingNodeTypes)
+    useExecutionErrorStore().surfaceMissingNodes(missingNodeTypes)
   }
 
   async loadGraphData(
@@ -1119,16 +1112,16 @@ export class ComfyApp {
     restore_view: boolean = true,
     workflow: string | null | ComfyWorkflow = null,
     options: {
-      showMissingNodesDialog?: boolean
-      showMissingModelsDialog?: boolean
+      showMissingNodes?: boolean
+      showMissingModels?: boolean
       checkForRerouteMigration?: boolean
       openSource?: WorkflowOpenSource
       deferWarnings?: boolean
     } = {}
   ) {
     const {
-      showMissingNodesDialog = true,
-      showMissingModelsDialog = true,
+      showMissingNodes = true,
+      showMissingModels = true,
       checkForRerouteMigration = false,
       openSource,
       deferWarnings = false
@@ -1397,8 +1390,8 @@ export class ComfyApp {
       await this.runMissingModelPipeline(
         graphData,
         missingNodeTypes,
-        showMissingNodesDialog,
-        showMissingModelsDialog
+        showMissingNodes,
+        showMissingModels
       )
 
       if (!deferWarnings) {
@@ -1416,8 +1409,8 @@ export class ComfyApp {
   private async runMissingModelPipeline(
     graphData: ComfyWorkflowJSON,
     missingNodeTypes: MissingNodeType[],
-    showMissingNodesDialog: boolean,
-    showMissingModelsDialog: boolean
+    showMissingNodes: boolean,
+    showMissingModels: boolean
   ): Promise<{ missingModels: ModelFile[] }> {
     const missingModelStore = useMissingModelStore()
 
@@ -1461,21 +1454,27 @@ export class ComfyApp {
         hash_type: c.hashType
       }))
 
+    const confirmedCandidates = enrichedCandidates.filter(
+      (c) => c.isMissing === true
+    )
+
     const activeWf = useWorkspaceStore().workflow.activeWorkflow
     if (activeWf) {
       const warnings: PendingWarnings = {}
-      if (missingNodeTypes.length && showMissingNodesDialog) {
+      if (missingNodeTypes.length && showMissingNodes) {
         warnings.missingNodeTypes = missingNodeTypes
       }
-      if (missingModels.length && showMissingModelsDialog) {
-        const paths = await api.getFolderPaths()
-        warnings.missingModels = { missingModels, paths }
+      if (confirmedCandidates.length && showMissingModels) {
+        warnings.missingModelCandidates = confirmedCandidates
       }
-      if (warnings.missingNodeTypes || warnings.missingModels) {
+      if (warnings.missingNodeTypes || warnings.missingModelCandidates) {
         activeWf.pendingWarnings = warnings
       }
     }
 
+    // Intentionally runs on every graph load (including tab switches and
+    // undo/redo) because missing model state depends on external asset data
+    // that may change between workflow activations.
     if (enrichedCandidates.length) {
       if (isCloud) {
         const controller = missingModelStore.createVerificationAbortController()

src/scripts/changeTracker.ts

@@ -165,8 +165,8 @@ export class ChangeTracker {
       this._restoringState = true
       try {
         await app.loadGraphData(prevState, false, false, this.workflow, {
-          showMissingModelsDialog: false,
-          showMissingNodesDialog: false,
+          showMissingModels: false,
+          showMissingNodes: false,
           checkForRerouteMigration: false
         })
         this.activeState = prevState

src/stores/executionErrorStore.test.ts

@@ -12,9 +12,17 @@ vi.mock('@/platform/distribution/types', () => ({
   isCloud: false
 }))
 
+const mockShowErrorsTab = vi.hoisted(() => ({ value: false }))
+
 vi.mock('@/stores/settingStore', () => ({
   useSettingStore: vi.fn(() => ({
-    get: vi.fn(() => false)
+    get: vi.fn(() => mockShowErrorsTab.value)
+  }))
+}))
+
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: vi.fn(() => ({
+    get: vi.fn(() => mockShowErrorsTab.value)
   }))
 }))
 
@@ -103,6 +111,55 @@ describe('executionErrorStore — missing node operations', () => {
     })
   })
 
+  describe('surfaceMissingNodes', () => {
+    beforeEach(() => {
+      mockShowErrorsTab.value = false
+    })
+
+    it('stores missing node types when called', () => {
+      const store = useExecutionErrorStore()
+      const types: MissingNodeType[] = [
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ]
+      store.surfaceMissingNodes(types)
+
+      expect(store.missingNodesError).not.toBeNull()
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(1)
+      expect(store.hasMissingNodes).toBe(true)
+    })
+
+    it('opens error overlay when ShowErrorsTab setting is true', () => {
+      mockShowErrorsTab.value = true
+      const store = useExecutionErrorStore()
+      store.surfaceMissingNodes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ])
+
+      expect(store.isErrorOverlayOpen).toBe(true)
+    })
+
+    it('does not open error overlay when ShowErrorsTab setting is false', () => {
+      mockShowErrorsTab.value = false
+      const store = useExecutionErrorStore()
+      store.surfaceMissingNodes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false }
+      ])
+
+      expect(store.isErrorOverlayOpen).toBe(false)
+    })
+
+    it('deduplicates node types', () => {
+      const store = useExecutionErrorStore()
+      store.surfaceMissingNodes([
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeA', nodeId: '1', isReplaceable: false },
+        { type: 'NodeB', nodeId: '2', isReplaceable: false }
+      ])
+
+      expect(store.missingNodesError?.nodeTypes).toHaveLength(2)
+    })
+  })
+
   describe('removeMissingNodesByType', () => {
     it('removes matching types from the missing nodes list', () => {
       const store = useExecutionErrorStore()

src/stores/firebaseAuthStore.test.ts

@@ -98,6 +98,7 @@ vi.mock('@/stores/toastStore', () => ({
 
 // Mock useDialogService
 vi.mock('@/services/dialogService')
+vi.mock('@/platform/distribution/types', () => mockDistributionTypes)
 
 // Mock apiKeyAuthStore
 const mockApiKeyGetAuthHeader = vi.fn().mockReturnValue(null)
@@ -185,7 +186,6 @@ describe('useFirebaseAuthStore', () => {
   describe('token refresh events', () => {
     beforeEach(async () => {
       vi.resetModules()
-      vi.mock('@/platform/distribution/types', () => mockDistributionTypes)
 
       vi.mocked(firebaseAuth.onIdTokenChanged).mockImplementation(
         (_auth, callback) => {

vite.config.mts

@@ -424,8 +424,8 @@ export default defineConfig({
       : []),
 
     // Sentry sourcemap upload plugin
-    // Only runs during cloud production builds when all Sentry env vars are present
-    // Requires: SENTRY_AUTH_TOKEN, SENTRY_ORG, SENTRY_PROJECT env vars
+    // Uploads sourcemaps to both staging and prod Sentry projects so that
+    // error stack traces are readable in both environments.
     ...(DISTRIBUTION === 'cloud' &&
     process.env.SENTRY_AUTH_TOKEN &&
     process.env.SENTRY_ORG &&
@@ -437,10 +437,23 @@ export default defineConfig({
             project: process.env.SENTRY_PROJECT,
             authToken: process.env.SENTRY_AUTH_TOKEN,
             sourcemaps: {
-              // Delete source maps after upload to prevent public access
-              filesToDeleteAfterUpload: ['**/*.map']
+              filesToDeleteAfterUpload: process.env.SENTRY_PROJECT_PROD
+                ? []
+                : ['**/*.map']
             }
-          })
+          }),
+          ...(process.env.SENTRY_PROJECT_PROD
+            ? [
+                sentryVitePlugin({
+                  org: process.env.SENTRY_ORG,
+                  project: process.env.SENTRY_PROJECT_PROD,
+                  authToken: process.env.SENTRY_AUTH_TOKEN,
+                  sourcemaps: {
+                    filesToDeleteAfterUpload: ['**/*.map']
+                  }
+                })
+              ]
+            : [])
         ]
       : [])
   ],