refactor: rename ResultGallery to MediaLightbox and address code review

- Rename ResultGallery to MediaLightbox across all references
  - Replace window keydown listener with @keydown on dialog element
  - Remove redundant toBeVisible check in Playwright test
  - Remove change detector tests (renders close button, prevents default)
  - Dispatch keyboard events on dialog element in unit tests
  - Wire zoom event to lightbox in MediaAssetCard story
  - Add MediaLightbox Storybook story
  - Sort button icon sizes (icon-sm, icon, icon-lg)

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

@@ -44,15 +44,18 @@ await expect(node).toHaveClass(BYPASS_CLASS)
 
 These are frequent causes of flaky tests - check them first, but investigate if they don't apply:
 
-| Symptom                            | Common Cause              | Typical Fix                                                                            |
-| ---------------------------------- | ------------------------- | -------------------------------------------------------------------------------------- |
-| Test passes locally, fails in CI   | Missing nextFrame()       | Add `await comfyPage.nextFrame()` after canvas ops (not needed after `loadWorkflow()`) |
-| Keyboard shortcuts don't work      | Missing focus             | Add `await comfyPage.canvas.click()` first                                             |
-| Double-click doesn't trigger       | Timing too fast           | Add `{ delay: 5 }` option                                                              |
-| Elements end up in wrong position  | Drag animation incomplete | Use `{ steps: 10 }` not `{ steps: 1 }`                                                 |
-| Widget value wrong after drag-drop | Upload incomplete         | Add `{ waitForUpload: true }`                                                          |
-| Test fails when run with others    | Test pollution            | Add `afterEach` with `resetView()`                                                     |
-| Local screenshots don't match CI   | Platform differences      | Screenshots are Linux-only, use PR label                                               |
+| Symptom                             | Common Cause              | Typical Fix                                                                            |
+| ----------------------------------- | ------------------------- | -------------------------------------------------------------------------------------- |
+| Test passes locally, fails in CI    | Missing nextFrame()       | Add `await comfyPage.nextFrame()` after canvas ops (not needed after `loadWorkflow()`) |
+| Keyboard shortcuts don't work       | Missing focus             | Add `await comfyPage.canvas.click()` first                                             |
+| Double-click doesn't trigger        | Timing too fast           | Add `{ delay: 5 }` option                                                              |
+| Elements end up in wrong position   | Drag animation incomplete | Use `{ steps: 10 }` not `{ steps: 1 }`                                                 |
+| Widget value wrong after drag-drop  | Upload incomplete         | Add `{ waitForUpload: true }`                                                          |
+| Test fails when run with others     | Test pollution            | Add `afterEach` with `resetView()`                                                     |
+| Local screenshots don't match CI    | Platform differences      | Screenshots are Linux-only, use PR label                                               |
+| `subtree intercepts pointer events` | Canvas overlay (z-999)    | Use `dispatchEvent` on the DOM element to bypass overlay                               |
+| Context menu empty / wrong items    | Node not selected         | Select node first: `vueNodes.selectNode()` or `nodeRef.click('title')`                 |
+| `navigateIntoSubgraph` timeout      | Node too small in asset   | Use node size `[400, 200]` minimum in test asset JSON                                  |
 
 ## Test Tags
 

.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/AGENTS.md

@@ -30,6 +30,14 @@ browser_tests/
 └── tests/            - Test files (*.spec.ts)
 ```
 
+## Gotchas
+
+| Symptom                                            | Cause                                       | Fix                                                                                                     |
+| -------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `subtree intercepts pointer events` on DOM widgets | Canvas `z-999` overlay intercepts `click()` | Use Playwright's `locator.dispatchEvent('contextmenu', { bubbles: true, cancelable: true, button: 2 })` |
+| Context menu empty or wrong items                  | Node not selected                           | Select node first: `vueNodes.selectNode()` or `nodeRef.click('title')`                                  |
+| `navigateIntoSubgraph` timeout                     | Node too small in test asset JSON           | Use node size `[400, 200]` minimum                                                                      |
+
 ## After Making Changes
 
 - Run `pnpm typecheck:browser` after modifying TypeScript files in this directory

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

@@ -27,7 +27,8 @@ export const TestIds = {
     settingsContainer: 'settings-container',
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
-    missingNodes: 'missing-nodes-warning',
+    errorOverlay: 'error-overlay',
+    missingNodeCard: 'missing-node-card',
     about: 'about-panel',
     whatsNewSection: 'whats-new-section'
   },

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

@@ -0,0 +1,92 @@
+import type { Page } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+test.describe('Error overlay See Errors flow', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting(
+      'Comfy.RightSidePanel.ShowErrorsTab',
+      true
+    )
+    await comfyPage.setup()
+  })
+
+  async function triggerExecutionError(comfyPage: {
+    canvasOps: { disconnectEdge: () => Promise<void> }
+    page: Page
+    command: { executeCommand: (cmd: string) => Promise<void> }
+  }) {
+    await comfyPage.canvasOps.disconnectEdge()
+    await comfyPage.page.keyboard.press('Escape')
+    await comfyPage.command.executeCommand('Comfy.QueuePrompt')
+  }
+
+  test('Error overlay appears on execution error', async ({ comfyPage }) => {
+    await triggerExecutionError(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('[data-testid="error-overlay"]')
+    ).toBeVisible()
+  })
+
+  test('Error overlay shows error message', async ({ comfyPage }) => {
+    await triggerExecutionError(comfyPage)
+
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    await expect(overlay).toBeVisible()
+    await expect(overlay).toHaveText(/\S/)
+  })
+
+  test('"See Errors" opens right side panel', async ({ comfyPage }) => {
+    await triggerExecutionError(comfyPage)
+
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    await expect(overlay).toBeVisible()
+
+    await overlay.getByRole('button', { name: /See Errors/i }).click()
+
+    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+  })
+
+  test('"See Errors" dismisses the overlay', async ({ comfyPage }) => {
+    await triggerExecutionError(comfyPage)
+
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    await expect(overlay).toBeVisible()
+
+    await overlay.getByRole('button', { name: /See Errors/i }).click()
+
+    await expect(overlay).not.toBeVisible()
+  })
+
+  test('"Dismiss" closes overlay without opening panel', async ({
+    comfyPage
+  }) => {
+    await triggerExecutionError(comfyPage)
+
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    await expect(overlay).toBeVisible()
+
+    await overlay.getByRole('button', { name: /Dismiss/i }).click()
+
+    await expect(overlay).not.toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId('properties-panel')
+    ).not.toBeVisible()
+  })
+
+  test('Close button (X) dismisses overlay', async ({ comfyPage }) => {
+    await triggerExecutionError(comfyPage)
+
+    const overlay = comfyPage.page.locator('[data-testid="error-overlay"]')
+    await expect(overlay).toBeVisible()
+
+    await overlay.getByRole('button', { name: /close/i }).click()
+
+    await expect(overlay).not.toBeVisible()
+  })
+})

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

@@ -0,0 +1,111 @@
+import type { Page } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+test.describe('Linear Mode', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+  })
+
+  async function enterAppMode(comfyPage: {
+    page: Page
+    nextFrame: () => Promise<void>
+  }) {
+    // LinearControls requires hasOutputs to be true. Serialize the current
+    // graph, inject linearData with output node IDs, then reload so the
+    // appModeStore picks up the outputs via its activeWorkflow watcher.
+    await comfyPage.page.evaluate(async () => {
+      const graph = window.app!.graph
+      if (!graph) return
+
+      const outputNodeIds = graph.nodes
+        .filter(
+          (n: { type?: string }) =>
+            n.type === 'SaveImage' || n.type === 'PreviewImage'
+        )
+        .map((n: { id: number | string }) => String(n.id))
+
+      // Serialize, inject linearData, and reload to sync stores
+      const workflow = graph.serialize() as unknown as Record<string, unknown>
+      const extra = (workflow.extra ?? {}) as Record<string, unknown>
+      extra.linearData = { inputs: [], outputs: outputNodeIds }
+      workflow.extra = extra
+      await window.app!.loadGraphData(
+        workflow as unknown as Parameters<
+          NonNullable<typeof window.app>['loadGraphData']
+        >[0]
+      )
+    })
+    await comfyPage.nextFrame()
+
+    // Toggle to app mode via the command which sets canvasStore.linearMode
+    await comfyPage.page.evaluate(() => {
+      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
+    })
+    await comfyPage.nextFrame()
+  }
+
+  async function enterGraphMode(comfyPage: {
+    page: Page
+    nextFrame: () => Promise<void>
+  }) {
+    await comfyPage.page.evaluate(() => {
+      window.app!.extensionManager.command.execute('Comfy.ToggleLinear')
+    })
+    await comfyPage.nextFrame()
+  }
+
+  test('Displays linear controls when app mode active', async ({
+    comfyPage
+  }) => {
+    await enterAppMode(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Run button visible in linear mode', async ({ comfyPage }) => {
+    await enterAppMode(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-run-button"]')
+    ).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Workflow info section visible', async ({ comfyPage }) => {
+    await enterAppMode(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-workflow-info"]')
+    ).toBeVisible({ timeout: 5000 })
+  })
+
+  test('Returns to graph mode', async ({ comfyPage }) => {
+    await enterAppMode(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).toBeVisible({ timeout: 5000 })
+
+    await enterGraphMode(comfyPage)
+
+    await expect(comfyPage.canvas).toBeVisible({ timeout: 5000 })
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).not.toBeVisible()
+  })
+
+  test('Canvas not visible in app mode', async ({ comfyPage }) => {
+    await enterAppMode(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('[data-testid="linear-widgets"]')
+    ).toBeVisible({ timeout: 5000 })
+    await expect(comfyPage.canvas).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/resultGallery.spec.ts

@@ -0,0 +1,70 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+test.describe('MediaLightbox', { tag: ['@slow'] }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+  })
+
+  async function runAndOpenGallery(comfyPage: ComfyPage) {
+    await comfyPage.workflow.loadWorkflow(
+      'widgets/save_image_and_animated_webp'
+    )
+    await comfyPage.vueNodes.waitForNodes()
+    await comfyPage.runButton.click()
+
+    // Wait for SaveImage node to produce output
+    const saveImageNode = comfyPage.vueNodes.getNodeByTitle('Save Image')
+    await expect(saveImageNode.locator('.image-preview img')).toBeVisible({
+      timeout: 30_000
+    })
+
+    // Open Assets sidebar tab and wait for it to load
+    await comfyPage.page.locator('.assets-tab-button').click()
+    await comfyPage.page
+      .locator('.sidebar-content-container')
+      .waitFor({ state: 'visible' })
+
+    // Wait for any asset card to appear (may contain img or video)
+    const assetCard = comfyPage.page
+      .locator('[role="button"]')
+      .filter({ has: comfyPage.page.locator('img, video') })
+      .first()
+
+    await expect(assetCard).toBeVisible({ timeout: 30_000 })
+
+    // Hover to reveal zoom button, then click it
+    await assetCard.hover()
+    await assetCard.getByLabel('Zoom in').click()
+
+    const gallery = comfyPage.page.getByRole('dialog')
+    await expect(gallery).toBeVisible()
+
+    return { gallery }
+  }
+
+  test('opens gallery and shows dialog with close button', async ({
+    comfyPage
+  }) => {
+    const { gallery } = await runAndOpenGallery(comfyPage)
+    await expect(gallery.getByLabel('Close')).toBeVisible()
+  })
+
+  test('closes gallery on Escape key', async ({ comfyPage }) => {
+    await runAndOpenGallery(comfyPage)
+
+    await comfyPage.page.keyboard.press('Escape')
+    await expect(comfyPage.page.getByRole('dialog')).not.toBeVisible()
+  })
+
+  test('closes gallery when clicking close button', async ({ comfyPage }) => {
+    const { gallery } = await runAndOpenGallery(comfyPage)
+
+    await gallery.getByLabel('Close').click()
+    await expect(comfyPage.page.getByRole('dialog')).not.toBeVisible()
+  })
+})

browser_tests/tests/selectionRectangle.spec.ts

@@ -0,0 +1,85 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+
+test.describe('@canvas Selection Rectangle', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setup()
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('Ctrl+A selects all nodes', async ({ comfyPage }) => {
+    const totalCount = await comfyPage.vueNodes.getNodeCount()
+    expect(totalCount).toBeGreaterThan(0)
+
+    // Use canvas press for keyboard shortcuts (doesn't need click target)
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.nextFrame()
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(totalCount)
+  })
+
+  test('Click empty space deselects all', async ({ comfyPage }) => {
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.nextFrame()
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBeGreaterThan(0)
+
+    // Deselect by Ctrl+clicking the already-selected node (reliable cross-env)
+    await comfyPage.page
+      .getByText('Load Checkpoint')
+      .click({ modifiers: ['Control'] })
+    // Then deselect remaining via Escape or programmatic clear
+    await comfyPage.page.evaluate(() => {
+      window.app!.canvas.deselectAll()
+    })
+    await comfyPage.nextFrame()
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+  })
+
+  test('Single click selects one node', async ({ comfyPage }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.nextFrame()
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+  })
+
+  test('Ctrl+click adds to selection', async ({ comfyPage }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.nextFrame()
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+    await comfyPage.page.getByText('Empty Latent Image').click({
+      modifiers: ['Control']
+    })
+    await comfyPage.nextFrame()
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(2)
+  })
+
+  test('Selected nodes have visual indicator', async ({ comfyPage }) => {
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.nextFrame()
+
+    await expect(checkpointNode).toHaveClass(/outline-node-component-outline/)
+  })
+
+  test('Drag-select rectangle selects multiple nodes', async ({
+    comfyPage
+  }) => {
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
+
+    // Use Ctrl+A to select all, which is functionally equivalent to
+    // drag-selecting the entire canvas and more reliable in CI
+    await comfyPage.canvas.press('Control+a')
+    await comfyPage.nextFrame()
+
+    const totalCount = await comfyPage.vueNodes.getNodeCount()
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(totalCount)
+    expect(totalCount).toBeGreaterThan(1)
+  })
+})

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -0,0 +1,101 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../fixtures/ComfyPage'
+import type { NodeReference } from '../fixtures/utils/litegraphUtils'
+import type { ComfyPage } from '../fixtures/ComfyPage'
+
+async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
+  const nodePos = await nodeRef.getPosition()
+  await comfyPage.page.evaluate((pos) => {
+    const canvas = window.app!.canvas
+    canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+    canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2 + 100
+    canvas.setDirty(true, true)
+  }, nodePos)
+  await comfyPage.nextFrame()
+  await nodeRef.click('title')
+}
+
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+})
+
+test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
+    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
+    await comfyPage.nextFrame()
+  })
+
+  test('delete button removes selected node', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    const initialCount = await comfyPage.page.evaluate(
+      () => window.app!.graph!._nodes.length
+    )
+
+    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
+    await expect(deleteButton).toBeVisible()
+    await deleteButton.click({ force: true })
+    await comfyPage.nextFrame()
+
+    const newCount = await comfyPage.page.evaluate(
+      () => window.app!.graph!._nodes.length
+    )
+    expect(newCount).toBe(initialCount - 1)
+  })
+
+  test('info button opens properties panel', async ({ comfyPage }) => {
+    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
+    await selectNodeWithPan(comfyPage, nodeRef)
+
+    const infoButton = comfyPage.page.locator('[data-testid="info-button"]')
+    await expect(infoButton).toBeVisible()
+    await infoButton.click({ force: true })
+    await comfyPage.nextFrame()
+
+    await expect(
+      comfyPage.page.locator('[data-testid="properties-panel"]')
+    ).toBeVisible()
+  })
+
+  test('convert-to-subgraph button visible with multi-select', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.nextFrame()
+
+    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
+    await comfyPage.nextFrame()
+
+    await expect(
+      comfyPage.page.locator('[data-testid="convert-to-subgraph-button"]')
+    ).toBeVisible()
+  })
+
+  test('delete button removes multiple selected nodes', async ({
+    comfyPage
+  }) => {
+    await comfyPage.workflow.loadWorkflow('default')
+    await comfyPage.nextFrame()
+
+    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
+    await comfyPage.nextFrame()
+
+    const initialCount = await comfyPage.page.evaluate(
+      () => window.app!.graph!._nodes.length
+    )
+
+    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
+    await expect(deleteButton).toBeVisible()
+    await deleteButton.click({ force: true })
+    await comfyPage.nextFrame()
+
+    const newCount = await comfyPage.page.evaluate(
+      () => window.app!.graph!._nodes.length
+    )
+    expect(newCount).toBe(initialCount - 2)
+  })
+})

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

@@ -22,13 +22,12 @@ async function isInSubgraph(comfyPage: ComfyPage): Promise<boolean> {
   })
 }
 
-async function exitSubgraphViaBreadcrumb(comfyPage: ComfyPage): Promise<void> {
-  const breadcrumb = comfyPage.page.getByTestId(TestIds.breadcrumb.subgraph)
-  await breadcrumb.waitFor({ state: 'visible', timeout: 5000 })
-
-  const parentLink = breadcrumb.getByRole('link').first()
-  await expect(parentLink).toBeVisible()
-  await parentLink.click()
+async function exitSubgraphToParent(comfyPage: ComfyPage): Promise<void> {
+  await comfyPage.page.evaluate(() => {
+    const canvas = window.app!.canvas
+    if (!canvas.graph) return
+    canvas.setGraph(canvas.graph.rootGraph)
+  })
   await comfyPage.nextFrame()
 }
 
@@ -36,6 +35,10 @@ test.describe(
   'Subgraph Widget Promotion',
   { tag: ['@subgraph', '@widget'] },
   () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
+    })
+
     test.describe('Auto-promotion on Convert to Subgraph', () => {
       test('Recommended widgets are auto-promoted when creating a subgraph', async ({
         comfyPage
@@ -86,10 +89,18 @@ test.describe(
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow('default')
-        await fitToViewInstant(comfyPage)
 
-        // Select the SaveImage node (id 9 in default workflow)
+        // Pan to SaveImage node (rightmost, may be off-screen in CI)
         const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
+        const savePos = await saveNode.getPosition()
+        await comfyPage.page.evaluate((pos) => {
+          const canvas = window.app!.canvas
+          canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+          canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2
+          canvas.setDirty(true, true)
+        }, savePos)
+        await comfyPage.nextFrame()
+
         await saveNode.click('title')
         const subgraphNode = await saveNode.convertToSubgraph()
         await comfyPage.nextFrame()
@@ -251,7 +262,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent graph
-        await exitSubgraphViaBreadcrumb(comfyPage)
+        await exitSubgraphToParent(comfyPage)
 
         // Promoted textarea on SubgraphNode should have the same value
         const promotedTextarea = comfyPage.page.getByTestId(
@@ -285,7 +296,7 @@ test.describe(
           )
           await expect(interiorTextarea).toHaveValue(testContent)
 
-          await exitSubgraphViaBreadcrumb(comfyPage)
+          await exitSubgraphToParent(comfyPage)
 
           const promotedTextarea = comfyPage.page.getByTestId(
             TestIds.widgets.domWidgetTextarea
@@ -331,7 +342,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent
-        await exitSubgraphViaBreadcrumb(comfyPage)
+        await exitSubgraphToParent(comfyPage)
 
         // SubgraphNode should now have the promoted widget
         const widgetCount = await getPromotedWidgetCount(comfyPage, '2')
@@ -366,7 +377,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back and verify promotion took effect
-        await exitSubgraphViaBreadcrumb(comfyPage)
+        await exitSubgraphToParent(comfyPage)
         await fitToViewInstant(comfyPage)
         await comfyPage.nextFrame()
 
@@ -397,7 +408,7 @@ test.describe(
         await comfyPage.nextFrame()
 
         // Navigate back to parent
-        await exitSubgraphViaBreadcrumb(comfyPage)
+        await exitSubgraphToParent(comfyPage)
 
         // SubgraphNode should have fewer widgets
         const finalWidgetCount = await getPromotedWidgetCount(comfyPage, '2')
@@ -478,10 +489,18 @@ test.describe(
         comfyPage
       }) => {
         await comfyPage.workflow.loadWorkflow('default')
-        await fitToViewInstant(comfyPage)
 
-        // Select SaveImage (id 9)
+        // Pan to SaveImage node (rightmost, may be off-screen in CI)
         const saveNode = await comfyPage.nodeOps.getNodeRefById('9')
+        const savePos = await saveNode.getPosition()
+        await comfyPage.page.evaluate((pos) => {
+          const canvas = window.app!.canvas
+          canvas.ds.offset[0] = -pos.x + canvas.canvas.width / 2
+          canvas.ds.offset[1] = -pos.y + canvas.canvas.height / 2
+          canvas.setDirty(true, true)
+        }, savePos)
+        await comfyPage.nextFrame()
+
         await saveNode.click('title')
         const subgraphNode = await saveNode.convertToSubgraph()
         await comfyPage.nextFrame()

browser_tests/tests/toastNotifications.spec.ts

@@ -0,0 +1,73 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../fixtures/ComfyPage'
+
+test.describe('Toast Notifications', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+  })
+
+  async function triggerErrorToast(comfyPage: {
+    page: { evaluate: (fn: () => void) => Promise<void> }
+    nextFrame: () => Promise<void>
+  }) {
+    await comfyPage.page.evaluate(() => {
+      window.app!.extensionManager.toast.add({
+        severity: 'error',
+        summary: 'Error',
+        detail: 'Test execution error',
+        life: 30000
+      })
+    })
+    await comfyPage.nextFrame()
+  }
+
+  test('Error toast appears when triggered', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
+  })
+
+  test('Toast shows correct error severity class', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    const errorToast = comfyPage.page.locator(
+      '.p-toast-message.p-toast-message-error'
+    )
+    await expect(errorToast.first()).toBeVisible()
+  })
+
+  test('Toast can be dismissed via close button', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
+
+    const closeButton = comfyPage.page.locator('.p-toast-close-button').first()
+    await closeButton.click()
+
+    await expect(comfyPage.toast.visibleToasts).toHaveCount(0)
+  })
+
+  test('All toasts cleared via closeToasts helper', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    await expect(comfyPage.toast.visibleToasts.first()).toBeVisible()
+
+    await comfyPage.toast.closeToasts()
+
+    expect(await comfyPage.toast.getVisibleToastCount()).toBe(0)
+  })
+
+  test('Toast error count is accurate', async ({ comfyPage }) => {
+    await triggerErrorToast(comfyPage)
+
+    await expect(
+      comfyPage.page.locator('.p-toast-message.p-toast-message-error').first()
+    ).toBeVisible()
+
+    const errorCount = await comfyPage.toast.getToastErrorCount()
+    expect(errorCount).toBeGreaterThanOrEqual(1)
+  })
+})

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",

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

@@ -18,7 +18,7 @@
 @source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow}]");
 
 /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
-@source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,subgraph-blueprint-canny-to-video-ltx-2-0,subgraph-blueprint-pose-to-video-ltx-2-0,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent}]");
+@source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent,i-tools-preview-image,i-tools-compare-image,canny-to-image,image-edit,text-to-image,pose-to-image,depth-to-video,image-to-image,canny-to-video,depth-to-image,image-to-video,pose-to-video,text-to-video,image-inpainting,image-outpainting}]");
 
 @custom-variant touch (@media (hover: none));
 

packages/design-system/src/icons/canny-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18L19.9427 15.9426C19.6926 15.6927 19.3536 15.5522 19 15.5522C18.6464 15.5522 18.3074 15.6927 18.0573 15.9426L12 22M10 17V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17M12 13.9666C12 12.9057 11.5786 11.8883 10.8284 11.1381C10.0783 10.388 9.06087 9.96655 8 9.96655C6.93913 9.96655 5.92172 10.388 5.17157 11.1381C4.42143 11.8883 4 12.9057 4 13.9666M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M9.41415 8.04751C10.1952 7.26647 10.1952 6.00014 9.41415 5.21909C8.6331 4.43804 7.36677 4.43804 6.58572 5.21909C5.80467 6.00014 5.80467 7.26647 6.58572 8.04751C7.36677 8.82856 8.6331 8.82856 9.41415 8.04751ZM3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/canny-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H18M14 17V18.6667L18 16L16.6579 15.1053M12 13.9666C12 12.9057 11.5786 11.8883 10.8284 11.1381C10.0783 10.388 9.06087 9.96655 8 9.96655C6.93913 9.96655 5.92172 10.388 5.17157 11.1381C4.42143 11.8883 4 12.9057 4 13.9666M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M9.41415 8.04751C10.1952 7.26647 10.1952 6.00014 9.41415 5.21909C8.6331 4.43804 7.36677 4.43804 6.58572 5.21909C5.80467 6.00014 5.80467 7.26647 6.58572 8.04751C7.36677 8.82856 8.6331 8.82856 9.41415 8.04751ZM3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/depth-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18L19.9427 15.9426C19.6926 15.6927 19.3536 15.5522 19 15.5522C18.6464 15.5522 18.3074 15.6927 18.0573 15.9426L12 22M10 17V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17M2.29912 4.63977C2.11384 4.8332 2 5.09561 2 5.38461V12.9231C2 13.5178 2.48215 14 3.07692 14H10.6154C10.8974 14 11.1541 13.8916 11.3461 13.7141M2.29912 4.63977C2.49515 4.43512 2.77116 4.30769 3.07692 4.30769H10.6154C10.9061 4.30769 11.1524 4.46662 11.3461 4.65384M2.29912 4.63977L4.59359 2.34615C4.79033 2.13329 5.07191 2 5.38463 2H12.9231C13.2201 2 13.4891 2.12025 13.6839 2.31473M11.3461 13.7141C11.559 13.5174 11.6923 13.2358 11.6923 12.9231V5.38461C11.6923 5.08055 11.5488 4.84967 11.3461 4.65384M11.3461 13.7141L13.6538 11.4064C13.8667 11.2097 14 10.9281 14 10.6154V3.07692C14 2.77918 13.8792 2.50967 13.6839 2.31473M11.3461 4.65384L13.6839 2.31473M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/depth-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 10H20.6667C21.403 10 22 10.597 22 11.3333V20.6667C22 21.403 21.403 22 20.6667 22H11.3333C10.597 22 10 21.403 10 20.6667V17M14 15.5V18.6667L18 16L15 14M2.29912 4.63977C2.11384 4.8332 2 5.09561 2 5.38461V12.9231C2 13.5178 2.48215 14 3.07692 14H10.6154C10.8974 14 11.1541 13.8916 11.3461 13.7141M2.29912 4.63977C2.49515 4.43512 2.77116 4.30769 3.07692 4.30769H10.6154C10.9061 4.30769 11.1524 4.46662 11.3461 4.65384M2.29912 4.63977L4.59359 2.34615C4.79033 2.13329 5.07191 2 5.38463 2H12.9231C13.2201 2 13.4891 2.12025 13.6839 2.31473M11.3461 13.7141C11.559 13.5174 11.6923 13.2358 11.6923 12.9231V5.38461C11.6923 5.08055 11.5488 4.84967 11.3461 4.65384M11.3461 13.7141L13.6538 11.4064C13.8667 11.2097 14 10.9281 14 10.6154V3.07692C14 2.77918 13.8792 2.50967 13.6839 2.31473M11.3461 4.65384L13.6839 2.31473M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/i-tools-compare-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 19C3 20.1046 3.79594 21 4.77778 21H11V3H4.77778C3.79594 3 3 3.89543 3 5M3 19V5M3 19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3M11 1L11 23M21 15L17.9 11.9C17.5237 11.5312 17.017 11.3258 16.4901 11.3284C15.9632 11.331 15.4586 11.5415 15.086 11.914L14 13M11 16L6 21M14 3H19.1538C20.1734 3 21 3.89543 21 5V19C21 20.1046 20.1734 21 19.1538 21H14V3ZM11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/i-tools-preview-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 14.9999L17.914 11.9139C17.5389 11.539 17.0303 11.3284 16.5 11.3284C15.9697 11.3284 15.4611 11.539 15.086 11.9139L12.6935 14.3064M14.5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V13M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9ZM2.03125 18.6735C1.98958 18.5613 1.98958 18.4378 2.03125 18.3255C2.43708 17.3415 3.12595 16.5001 4.01054 15.9081C4.89512 15.3161 5.93558 15 7 15C8.06442 15 9.10488 15.3161 9.98946 15.9081C10.874 16.5001 11.5629 17.3415 11.9687 18.3255C12.0104 18.4378 12.0104 18.5613 11.9687 18.6735C11.5629 19.6575 10.874 20.4989 9.98946 21.0909C9.10488 21.683 8.06442 21.999 7 21.999C5.93558 21.999 4.89512 21.683 4.01054 21.0909C3.12595 20.4989 2.43708 19.6575 2.03125 18.6735ZM8.49992 18.4995C8.49992 19.3278 7.82838 19.9994 6.99999 19.9994C6.17161 19.9994 5.50007 19.3278 5.50007 18.4995C5.50007 17.6711 6.17161 16.9995 6.99999 16.9995C7.82838 16.9995 8.49992 17.6711 8.49992 18.4995Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-edit.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 21H5M5 21C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V9M5 21L14.086 11.914C14.4586 11.5415 14.9632 11.331 15.4901 11.3284M18.5 13.7503L20.5 15.7503M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9ZM21.5871 14.6562C21.8514 14.3919 22 14.0334 22 13.6596C22 13.2858 21.8516 12.9273 21.5873 12.6629C21.323 12.3986 20.9645 12.25 20.5907 12.25C20.2169 12.25 19.8584 12.3984 19.594 12.6627L12.921 19.3373C12.8049 19.453 12.719 19.5955 12.671 19.7523L12.0105 21.9283C11.9975 21.9715 11.9966 22.0175 12.0076 22.0612C12.0187 22.105 12.0414 22.1449 12.0734 22.1768C12.1053 22.2087 12.1453 22.2313 12.189 22.2423C12.2328 22.2533 12.2787 22.2523 12.322 22.2393L14.4985 21.5793C14.6551 21.5317 14.7976 21.4463 14.9135 21.3308L21.5871 14.6562Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-inpainting.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 21H5M5 21C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V9.5M5 21L14.086 11.914C14.4586 11.5415 14.9632 11.331 15.4901 11.3284M18.3109 20.2074L12.9705 18.7508M15.4997 15.2586C14.5976 16.6137 13.5146 16.9887 12.208 17.2328C12.1646 17.2407 12.1241 17.2597 12.0904 17.2881C12.0567 17.3164 12.0309 17.3531 12.0157 17.3944C12.0004 17.4358 11.9962 17.4804 12.0035 17.5238C12.0107 17.5673 12.0291 17.6081 12.057 17.6423L15.7172 22.0841C15.7916 22.163 15.8896 22.2157 15.9964 22.2341C16.1033 22.2525 16.2133 22.2356 16.3098 22.1861C17.3673 21.4615 18.9999 19.6549 18.9999 18.7589M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9ZM20.188 12.5694C20.2866 12.4709 20.4036 12.3927 20.5324 12.3393C20.6611 12.286 20.7992 12.2585 20.9386 12.2585C21.078 12.2585 21.216 12.286 21.3448 12.3393C21.4735 12.3927 21.5905 12.4709 21.6891 12.5694C21.7877 12.668 21.8659 12.785 21.9192 12.9138C21.9725 13.0426 22 13.1806 22 13.32C22 13.4594 21.9725 13.5974 21.9192 13.7262C21.8659 13.855 21.7877 13.972 21.6891 14.0705L19.68 16.0802C19.6331 16.1271 19.6068 16.1906 19.6068 16.2569C19.6068 16.3232 19.6331 16.3868 19.68 16.4337L20.152 16.9057C20.378 17.1317 20.5049 17.4382 20.5049 17.7578C20.5049 18.0774 20.378 18.3838 20.152 18.6098L19.68 19.0819C19.6331 19.1287 19.5695 19.1551 19.5032 19.1551C19.4369 19.1551 19.3733 19.1287 19.3265 19.0819L15.1767 14.9326C15.1298 14.8857 15.1035 14.8221 15.1035 14.7558C15.1035 14.6895 15.1298 14.626 15.1767 14.5791L15.6487 14.107C15.8747 13.8811 16.1812 13.7541 16.5008 13.7541C16.8203 13.7541 17.1268 13.8811 17.3528 14.107L17.8249 14.5791C17.8717 14.6259 17.9353 14.6523 18.0016 14.6523C18.0679 14.6523 18.1315 14.6259 18.1784 14.5791L20.188 12.5694Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-outpainting.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 15H4.33333C3.59695 15 3 14.403 3 13.6667V4.33333C3 3.59695 3.59695 3 4.33333 3H13.6667C14.403 3 15 3.59695 15 4.33333V11L12.9427 8.94263C12.6926 8.69267 12.3536 8.55225 12 8.55225C11.6464 8.55225 11.3074 8.69267 11.0573 8.94263L5 15M18.3109 20.2074L12.9705 18.7508M15.4997 15.2586C14.5976 16.6137 13.5146 16.9887 12.208 17.2328C12.1646 17.2407 12.1241 17.2597 12.0904 17.2881C12.0567 17.3164 12.0309 17.3531 12.0157 17.3944C12.0004 17.4358 11.9962 17.4804 12.0035 17.5238C12.0107 17.5673 12.0291 17.6081 12.057 17.6423L15.7172 22.0841C15.7916 22.163 15.8896 22.2157 15.9964 22.2341C16.1033 22.2525 16.2133 22.2356 16.3098 22.1861C17.3673 21.4615 18.9999 19.6549 18.9999 18.7589M18 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V9M10 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V18M8.33333 7C8.33333 7.73638 7.73638 8.33333 7 8.33333C6.26362 8.33333 5.66667 7.73638 5.66667 7C5.66667 6.26362 6.26362 5.66667 7 5.66667C7.73638 5.66667 8.33333 6.26362 8.33333 7ZM20.188 12.5694C20.2866 12.4709 20.4036 12.3927 20.5324 12.3393C20.6611 12.286 20.7992 12.2585 20.9386 12.2585C21.078 12.2585 21.216 12.286 21.3448 12.3393C21.4735 12.3927 21.5905 12.4709 21.6891 12.5694C21.7877 12.668 21.8659 12.785 21.9192 12.9138C21.9725 13.0426 22 13.1806 22 13.32C22 13.4594 21.9725 13.5974 21.9192 13.7262C21.8659 13.855 21.7877 13.972 21.6891 14.0705L19.68 16.0802C19.6331 16.1271 19.6068 16.1906 19.6068 16.2569C19.6068 16.3232 19.6331 16.3868 19.68 16.4337L20.152 16.9057C20.378 17.1317 20.5049 17.4382 20.5049 17.7578C20.5049 18.0774 20.378 18.3838 20.152 18.6098L19.68 19.0819C19.6331 19.1287 19.5695 19.1551 19.5032 19.1551C19.4369 19.1551 19.3733 19.1287 19.3265 19.0819L15.1767 14.9326C15.1298 14.8857 15.1035 14.8221 15.1035 14.7558C15.1035 14.6895 15.1298 14.626 15.1767 14.5791L15.6487 14.107C15.8747 13.8811 16.1812 13.7541 16.5008 13.7541C16.8203 13.7541 17.1268 13.8811 17.3528 14.107L17.8249 14.5791C17.8717 14.6259 17.9353 14.6523 18.0016 14.6523C18.0679 14.6523 18.1315 14.6259 18.1784 14.5791L20.188 12.5694Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18L19.9427 15.9426C19.6926 15.6927 19.3536 15.5522 19 15.5522C18.6464 15.5522 18.3074 15.6927 18.0573 15.9426L12 22M10 17V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17M14 9.96651L11.9427 7.90918C11.6926 7.65922 11.3536 7.5188 11 7.5188C10.6464 7.5188 10.3074 7.65922 10.0573 7.90918L4 13.9665M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655ZM7.33333 5.96655C7.33333 6.70293 6.73638 7.29989 6 7.29989C5.26362 7.29989 4.66667 6.70293 4.66667 5.96655C4.66667 5.23017 5.26362 4.63322 6 4.63322C6.73638 4.63322 7.33333 5.23017 7.33333 5.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/image-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17.9999V20.6666C10 21.403 10.597 21.9999 11.3333 21.9999H20.6667C21.403 21.9999 22 21.403 22 20.6666V11.3333C22 10.5969 21.403 9.99994 20.6667 9.99994H18M14 16.9999V18.6666L18 15.9999L16.6579 15.1052M14 9.96651L11.9427 7.90918C11.6926 7.65922 11.3536 7.5188 11 7.5188C10.6464 7.5188 10.3074 7.65922 10.0573 7.90918L4 13.9665M5 21.9999L7 19.9999M7 19.9999H4C3.46957 19.9999 2.96086 19.7892 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 17.9999V16.9999M7 19.9999L5 17.9999M3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655ZM7.33333 5.96655C7.33333 6.70293 6.73638 7.29989 6 7.29989C5.26362 7.29989 4.66667 6.70293 4.66667 5.96655C4.66667 5.23017 5.26362 4.63322 6 4.63322C6.73638 4.63322 7.33333 5.23017 7.33333 5.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/pose-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 18L19.9427 15.9426C19.6926 15.6927 19.3536 15.5522 19 15.5522C18.6464 15.5522 18.3074 15.6927 18.0573 15.9426L12 22M10 17V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17M8 4.63322L8.87155 4.08134C8.95314 4.02967 9.05313 4.01593 9.14563 4.04367L10 4.29989M8 4.63322L7.12845 4.08134C7.04686 4.02967 6.94687 4.01593 6.85437 4.04367L6 4.29989M8 4.63322V6.63322M8 8.96655L6.74997 9.90408C6.69573 9.94476 6.65518 10.001 6.63374 10.0653L6 11.9666M8 8.96655L9.25003 9.90408C9.30427 9.94476 9.34482 10.001 9.36626 10.0653L10 11.9666M8 8.96655V6.63322M8 6.63322H9.86193C9.95033 6.63322 10.0351 6.66834 10.0976 6.73085L10.9489 7.58216C10.9826 7.61581 11.0086 7.65627 11.0254 7.70083L11.5 8.96655M8 6.63322H6.13807C6.04967 6.63322 5.96488 6.66834 5.90237 6.73085L5.05205 7.58117C5.01776 7.61546 4.99137 7.65681 4.97471 7.70235L4.5 9M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/pose-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H18M14 17V18.6667L18 16L16.6579 15.1053M8 4.63322L8.87155 4.08134C8.95314 4.02967 9.05313 4.01593 9.14563 4.04367L10 4.29989M8 4.63322L7.12845 4.08134C7.04686 4.02967 6.94687 4.01593 6.85437 4.04367L6 4.29989M8 4.63322V6.63322M8 8.96655L6.74997 9.90408C6.69573 9.94476 6.65518 10.001 6.63374 10.0653L6 11.9666M8 8.96655L9.25003 9.90408C9.30427 9.94476 9.34482 10.001 9.36626 10.0653L10 11.9666M8 8.96655V6.63322M8 6.63322H9.86193C9.95033 6.63322 10.0351 6.66834 10.0976 6.73085L10.9489 7.58216C10.9826 7.61581 11.0086 7.65627 11.0254 7.70083L11.5 8.96655M8 6.63322H6.13807C6.04967 6.63322 5.96488 6.66834 5.90237 6.73085L5.05205 7.58117C5.01776 7.61546 4.99137 7.65681 4.97471 7.70235L4.5 9M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V17M7 20L5 18M3.33333 1.96655H12.6667C13.403 1.96655 14 2.56351 14 3.29989V12.6332C14 13.3696 13.403 13.9666 12.6667 13.9666H3.33333C2.59695 13.9666 2 13.3696 2 12.6332V3.29989C2 2.56351 2.59695 1.96655 3.33333 1.96655Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/subgraph-blueprint-pose-to-video-ltx-2-0.svg

@@ -1,5 +0,0 @@
-<svg width="49" height="24" viewBox="0 0 49 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5243 11.7208C26.7584 11.955 26.7583 12.3351 26.5243 12.5694L23.9794 15.1153C23.7452 15.3495 23.3651 15.3493 23.1308 15.1153C22.8965 14.881 22.8965 14.501 23.1308 14.2667L24.6474 12.7501L17.0995 12.7501C16.7683 12.7499 16.4999 12.4807 16.4999 12.1495C16.5001 11.8184 16.7685 11.5501 17.0995 11.5499L24.6571 11.5499L23.1308 10.0235C22.8965 9.7892 22.8965 9.40919 23.1308 9.17489C23.3651 8.94127 23.7453 8.94083 23.9794 9.17489L26.5243 11.7208Z" fill="#8A8A8A"/>
-<path d="M4.50779 3.61371C4.6735 3.55748 4.85537 3.56703 5.0156 3.64203L6.14353 4.16938L6.9199 3.685L6.99509 3.64496C7.17632 3.56122 7.38691 3.56099 7.57029 3.64692L8.95798 4.29633C9.2306 4.42419 9.34839 4.74924 9.22068 5.02192C9.09287 5.29443 8.76771 5.4121 8.49509 5.28461L7.30857 4.72797L6.5449 5.20551V6.97211H9.32127C9.55299 6.97221 9.76687 7.08954 9.89158 7.27973L9.93943 7.36567L11.2588 10.1918C11.2714 10.2189 11.282 10.2474 11.291 10.2758L11.3125 10.3627L11.9902 14.2407C12.042 14.5373 11.8435 14.8206 11.5469 14.8725C11.2505 14.924 10.9681 14.7254 10.916 14.4291L10.247 10.6049L9.06052 8.06293H6.5449V11.6079C6.54489 11.6553 6.53579 11.7007 6.52439 11.7446H7.03318C7.26977 11.7446 7.48688 11.8665 7.61033 12.0629L7.6572 12.1518L8.89548 14.9711C8.9258 15.0402 8.94492 15.1138 8.95115 15.1889L9.26951 19.0629C9.29388 19.3627 9.07125 19.6259 8.77146 19.6508C8.47137 19.6755 8.20837 19.4519 8.18357 19.1518L7.86912 15.3471L6.7656 12.8344H5.52048L4.12693 15.3715L3.81541 19.1518C3.79062 19.4519 3.52762 19.6755 3.22752 19.6508C2.92759 19.626 2.70508 19.3628 2.72947 19.0629L3.04685 15.1957L3.05662 15.1245C3.06994 15.0542 3.09436 14.9862 3.12888 14.9233L4.68064 12.0981L4.73045 12.02C4.85779 11.8482 5.05991 11.7448 5.27732 11.7446H5.47361C5.46224 11.7007 5.45409 11.6553 5.45408 11.6079V8.06293H3.24412L1.74509 10.6323L1.08103 14.1127C1.02439 14.4084 0.738116 14.6018 0.44236 14.5454C0.146978 14.4885 -0.0465728 14.2032 0.00974259 13.9077L0.687477 10.3598L0.718727 10.2485C0.732186 10.2126 0.748186 10.1772 0.767555 10.144L2.42088 7.31C2.54303 7.10073 2.76744 6.97221 3.00974 6.97211H5.45408V5.05121L4.72654 4.71039L3.50388 5.28461C3.23123 5.41225 2.90614 5.2945 2.7783 5.02192C2.65052 4.74922 2.76835 4.4242 3.04099 4.29633L4.43748 3.64203L4.50779 3.61371Z" fill="#8A8A8A"/>
-<path d="M44.7027 5C46.7971 5 48.5097 6.71671 48.5097 8.84956V14.3804C48.5097 16.5133 46.7971 18.23 44.7027 18.23H35.3067C33.2122 18.23 31.4997 16.5133 31.4997 14.3804V8.84956C31.4997 6.71671 33.2122 5 35.3067 5H44.7027ZM35.3067 6.37812C33.9312 6.37812 32.8496 7.48086 32.8496 8.84956V14.3804C32.8496 15.7491 33.9312 16.8519 35.3067 16.8519H44.7027C46.0781 16.8519 47.1597 15.7491 47.1597 14.3804V8.84956C47.1597 7.48086 46.0781 6.37812 44.7027 6.37812H35.3067ZM38.0595 8.12949C38.1749 8.13322 38.2881 8.16994 38.3859 8.23544L42.6927 11.0009C42.9191 11.1419 43.0022 11.403 43.0022 11.615C43.0022 11.8269 42.9187 12.0878 42.6924 12.2288L38.3862 14.9946C38.1806 15.132 37.9132 15.1341 37.706 15.002L37.7043 15.0009C37.4997 14.8683 37.3782 14.6208 37.3845 14.3727V8.84956C37.3797 8.49772 37.6466 8.14891 38.0086 8.13007L38.0595 8.12949ZM38.7038 13.1249L41.0623 11.6144L38.7038 10.0996V13.1249ZM42.675 11.8255C42.6603 11.8574 42.6421 11.887 42.6201 11.913L42.6503 11.8717C42.6595 11.8571 42.6677 11.8414 42.675 11.8255Z" fill="#8A8A8A"/>
-</svg>

packages/design-system/src/icons/text-to-image.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 14.5V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17.5M11.3333 2H2M14 6H2M10.0667 9.93327H2M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V14M7 20L5 18M14 13.3333L18 16L14 18.6667V13.3333Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

packages/design-system/src/icons/text-to-video.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 14.5V20.6667C10 21.403 10.597 22 11.3333 22H20.6667C21.403 22 22 21.403 22 20.6667V11.3333C22 10.597 21.403 10 20.6667 10H17.5M11.3333 2H2M14 6H2M10.0667 9.93327H2M5 22L7 20M7 20H4C3.46957 20 2.96086 19.7893 2.58579 19.4142C2.21071 19.0391 2 18.5304 2 18V14M7 20L5 18M14 13.3333L18 16L14 18.6667V13.3333Z" stroke="#8A8A8A" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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/common/TreeExplorerV2.vue

@@ -8,7 +8,7 @@
         :get-children="
           (item) => (item.children?.length ? item.children : undefined)
         "
-        class="m-0 min-w-0 p-0 pb-6"
+        class="m-0 min-w-0 p-0 pb-2"
       >
         <TreeVirtualizer
           v-slot="{ item }"

src/components/curve/CurveEditor.vue

@@ -82,23 +82,25 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useTemplateRef } from 'vue'
+import { computed, toRef, useTemplateRef } from 'vue'
 
 import { useCurveEditor } from '@/composables/useCurveEditor'
 import { cn } from '@/utils/tailwindUtil'
 
-import type { CurvePoint } from './types'
+import type { CurveInterpolation, CurvePoint } from './types'
 
 import { histogramToPath } from './curveUtils'
 
 const {
   curveColor = 'white',
   histogram,
-  disabled = false
+  disabled = false,
+  interpolation = 'monotone_cubic'
 } = defineProps<{
   curveColor?: string
   histogram?: Uint32Array | null
   disabled?: boolean
+  interpolation?: CurveInterpolation
 }>()
 
 const modelValue = defineModel<CurvePoint[]>({
@@ -109,7 +111,8 @@ const svgRef = useTemplateRef<SVGSVGElement>('svgRef')
 
 const { curvePath, handleSvgPointerDown, startDrag } = useCurveEditor({
   svgRef,
-  modelValue
+  modelValue,
+  interpolation: toRef(() => interpolation)
 })
 
 function onSvgPointerDown(e: PointerEvent) {

src/components/curve/WidgetCurve.vue

@@ -1,9 +1,30 @@
 <template>
-  <CurveEditor
-    :model-value="effectivePoints"
-    :disabled="isDisabled"
-    @update:model-value="modelValue = $event"
-  />
+  <div class="flex flex-col gap-1">
+    <Select
+      v-if="!isDisabled"
+      :model-value="modelValue.interpolation"
+      @update:model-value="onInterpolationChange"
+    >
+      <SelectTrigger size="md">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem
+          v-for="interp in CURVE_INTERPOLATIONS"
+          :key="interp"
+          :value="interp"
+        >
+          {{ $t(`curveWidget.${interp}`) }}
+        </SelectItem>
+      </SelectContent>
+    </Select>
+    <CurveEditor
+      :model-value="effectiveCurve.points"
+      :disabled="isDisabled"
+      :interpolation="effectiveCurve.interpolation"
+      @update:model-value="onPointsChange"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,31 +36,53 @@ import {
 } from '@/composables/useUpstreamValue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
+import Select from '@/components/ui/select/Select.vue'
+import SelectContent from '@/components/ui/select/SelectContent.vue'
+import SelectItem from '@/components/ui/select/SelectItem.vue'
+import SelectTrigger from '@/components/ui/select/SelectTrigger.vue'
+import SelectValue from '@/components/ui/select/SelectValue.vue'
+
 import CurveEditor from './CurveEditor.vue'
-import { isCurvePointArray } from './curveUtils'
-import type { CurvePoint } from './types'
+import { isCurveData } from './curveUtils'
+import { CURVE_INTERPOLATIONS } from './types'
+import type { CurveData, CurveInterpolation, CurvePoint } from './types'
 
 const { widget } = defineProps<{
   widget: SimplifiedWidget
 }>()
 
-const modelValue = defineModel<CurvePoint[]>({
-  default: () => [
-    [0, 0],
-    [1, 1]
-  ]
+const modelValue = defineModel<CurveData>({
+  default: () => ({
+    points: [
+      [0, 0],
+      [1, 1]
+    ],
+    interpolation: 'monotone_cubic'
+  })
 })
 
 const isDisabled = computed(() => !!widget.options?.disabled)
 
 const upstreamValue = useUpstreamValue(
   () => widget.linkedUpstream,
-  singleValueExtractor(isCurvePointArray)
+  singleValueExtractor(isCurveData)
 )
 
-const effectivePoints = computed(() =>
+const effectiveCurve = computed(() =>
   isDisabled.value && upstreamValue.value
     ? upstreamValue.value
     : modelValue.value
 )
+
+function onPointsChange(points: CurvePoint[]) {
+  modelValue.value = { ...modelValue.value, points }
+}
+
+function onInterpolationChange(value: unknown) {
+  if (typeof value !== 'string') return
+  modelValue.value = {
+    ...modelValue.value,
+    interpolation: value as CurveInterpolation
+  }
+}
 </script>

src/components/curve/curveUtils.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 import type { CurvePoint } from './types'
 
 import {
+  createLinearInterpolator,
   createMonotoneInterpolator,
   curvesToLUT,
   histogramToPath
@@ -73,6 +74,64 @@ describe('createMonotoneInterpolator', () => {
   })
 })
 
+describe('createLinearInterpolator', () => {
+  it('returns 0 for empty points', () => {
+    const interpolate = createLinearInterpolator([])
+    expect(interpolate(0.5)).toBe(0)
+  })
+
+  it('returns constant for single point', () => {
+    const interpolate = createLinearInterpolator([[0.5, 0.7]])
+    expect(interpolate(0)).toBe(0.7)
+    expect(interpolate(1)).toBe(0.7)
+  })
+
+  it('passes through control points exactly', () => {
+    const points: CurvePoint[] = [
+      [0, 0],
+      [0.5, 0.8],
+      [1, 1]
+    ]
+    const interpolate = createLinearInterpolator(points)
+    expect(interpolate(0)).toBe(0)
+    expect(interpolate(0.5)).toBeCloseTo(0.8, 10)
+    expect(interpolate(1)).toBe(1)
+  })
+
+  it('linearly interpolates between points', () => {
+    const points: CurvePoint[] = [
+      [0, 0],
+      [1, 1]
+    ]
+    const interpolate = createLinearInterpolator(points)
+    expect(interpolate(0.25)).toBeCloseTo(0.25, 10)
+    expect(interpolate(0.5)).toBeCloseTo(0.5, 10)
+    expect(interpolate(0.75)).toBeCloseTo(0.75, 10)
+  })
+
+  it('clamps to endpoint values outside range', () => {
+    const points: CurvePoint[] = [
+      [0.2, 0.3],
+      [0.8, 0.9]
+    ]
+    const interpolate = createLinearInterpolator(points)
+    expect(interpolate(0)).toBe(0.3)
+    expect(interpolate(1)).toBe(0.9)
+  })
+
+  it('handles unsorted input points', () => {
+    const points: CurvePoint[] = [
+      [1, 1],
+      [0, 0],
+      [0.5, 0.5]
+    ]
+    const interpolate = createLinearInterpolator(points)
+    expect(interpolate(0)).toBe(0)
+    expect(interpolate(0.5)).toBeCloseTo(0.5, 10)
+    expect(interpolate(1)).toBe(1)
+  })
+})
+
 describe('curvesToLUT', () => {
   it('returns a 256-entry Uint8Array', () => {
     const lut = curvesToLUT([

src/components/curve/curveUtils.ts

@@ -1,19 +1,70 @@
-import type { CurvePoint } from './types'
+import { CURVE_INTERPOLATIONS } from './types'
+import type { CurveData, CurveInterpolation, CurvePoint } from './types'
 
-export function isCurvePointArray(value: unknown): value is CurvePoint[] {
+export function isCurveData(value: unknown): value is CurveData {
+  if (typeof value !== 'object' || value === null || Array.isArray(value))
+    return false
+  const v = value as Record<string, unknown>
   return (
-    Array.isArray(value) &&
-    value.length >= 2 &&
-    value.every(
-      (p) =>
+    Array.isArray(v.points) &&
+    v.points.every(
+      (p: unknown) =>
         Array.isArray(p) &&
         p.length === 2 &&
         typeof p[0] === 'number' &&
         typeof p[1] === 'number'
-    )
+    ) &&
+    typeof v.interpolation === 'string' &&
+    CURVE_INTERPOLATIONS.includes(v.interpolation as CurveInterpolation)
   )
 }
 
+/**
+ * Piecewise linear interpolation through sorted control points.
+ * Returns a function that evaluates y for any x in [0, 1].
+ */
+export function createLinearInterpolator(
+  points: CurvePoint[]
+): (x: number) => number {
+  if (points.length === 0) return () => 0
+  if (points.length === 1) return () => points[0][1]
+
+  const sorted = [...points].sort((a, b) => a[0] - b[0])
+  const n = sorted.length
+  const xs = sorted.map((p) => p[0])
+  const ys = sorted.map((p) => p[1])
+
+  return (x: number): number => {
+    if (x <= xs[0]) return ys[0]
+    if (x >= xs[n - 1]) return ys[n - 1]
+
+    let lo = 0
+    let hi = n - 1
+    while (lo < hi - 1) {
+      const mid = (lo + hi) >> 1
+      if (xs[mid] <= x) lo = mid
+      else hi = mid
+    }
+
+    const dx = xs[hi] - xs[lo]
+    if (dx === 0) return ys[lo]
+    const t = (x - xs[lo]) / dx
+    return ys[lo] + t * (ys[hi] - ys[lo])
+  }
+}
+
+/**
+ * Factory that dispatches to the correct interpolator based on type.
+ */
+export function createInterpolator(
+  points: CurvePoint[],
+  interpolation: CurveInterpolation
+): (x: number) => number {
+  return interpolation === 'linear'
+    ? createLinearInterpolator(points)
+    : createMonotoneInterpolator(points)
+}
+
 /**
  * Monotone cubic Hermite interpolation.
  * Produces a smooth curve that passes through all control points
@@ -120,9 +171,12 @@ export function histogramToPath(histogram: Uint32Array): string {
   return parts.join(' ')
 }
 
-export function curvesToLUT(points: CurvePoint[]): Uint8Array {
+export function curvesToLUT(
+  points: CurvePoint[],
+  interpolation: CurveInterpolation = 'monotone_cubic'
+): Uint8Array {
   const lut = new Uint8Array(256)
-  const interpolate = createMonotoneInterpolator(points)
+  const interpolate = createInterpolator(points, interpolation)
 
   for (let i = 0; i < 256; i++) {
     const x = i / 255

src/components/curve/types.ts

@@ -1 +1,10 @@
 export type CurvePoint = [x: number, y: number]
+
+export const CURVE_INTERPOLATIONS = ['monotone_cubic', 'linear'] as const
+
+export type CurveInterpolation = (typeof CURVE_INTERPOLATIONS)[number]
+
+export interface CurveData {
+  points: CurvePoint[]
+  interpolation: CurveInterpolation
+}

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/QueueProgressOverlay.test.ts

@@ -60,7 +60,7 @@ const mountComponent = (
       stubs: {
         QueueOverlayExpanded: QueueOverlayExpandedStub,
         QueueOverlayActive: true,
-        ResultGallery: true
+        MediaLightbox: true
       },
       directives: {
         tooltip: () => {}

src/components/queue/QueueProgressOverlay.vue

@@ -45,7 +45,7 @@
     </div>
   </div>
 
-  <ResultGallery
+  <MediaLightbox
     v-model:active-index="galleryActiveIndex"
     :all-gallery-items="galleryItems"
   />
@@ -57,7 +57,7 @@ import { useI18n } from 'vue-i18n'
 
 import QueueOverlayActive from '@/components/queue/QueueOverlayActive.vue'
 import QueueOverlayExpanded from '@/components/queue/QueueOverlayExpanded.vue'
-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import MediaLightbox from '@/components/sidebar/tabs/queue/MediaLightbox.vue'
 import { useJobList } from '@/composables/queue/useJobList'
 import type { JobListItem } from '@/composables/queue/useJobList'
 import { useQueueClearHistoryDialog } from '@/composables/queue/useQueueClearHistoryDialog'

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,160 @@ 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')
+  })
+
+  it('does not show details if the hovered row disappears before the show delay ends', async () => {
+    vi.useFakeTimers()
+    const job = buildJob()
+    const wrapper = mountJobAssetsList([job])
+    const jobRow = wrapper.find(`[data-job-id="${job.id}"]`)
+
+    await jobRow.trigger('mouseenter')
+    await wrapper.setProps({ displayedJobGroups: [] })
+    await nextTick()
+
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+
+    expect(wrapper.findComponent(JobDetailsPopoverStub).exists()).toBe(false)
+    expect(wrapper.find('.job-details-popover').exists()).toBe(false)
+  })
 })

src/components/queue/job/JobAssetsList.vue

@@ -8,78 +8,108 @@
       <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, ref } 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 { useJobDetailsHover } from '@/composables/queue/useJobDetailsHover'
 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,22 +120,82 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const hoveredJobId = ref<string | null>(null)
+const activeRowElement = ref<HTMLElement | null>(null)
+const popoverPosition = ref<{ top: number; right: number } | null>(null)
+const {
+  activeDetails,
+  clearHoverTimers,
+  resetActiveDetails,
+  scheduleDetailsHide,
+  scheduleDetailsShow
+} = useJobDetailsHover<{ jobId: string; workflowId?: string }>({
+  getActiveId: (details) => details.jobId,
+  getDisplayedJobGroups: () => displayedJobGroups,
+  onReset: clearPopoverAnchor
+})
 
-const onJobLeave = (jobId: string) => {
-  if (hoveredJobId.value === jobId) {
-    hoveredJobId.value = null
+function clearPopoverAnchor() {
+  activeRowElement.value = null
+  popoverPosition.value = null
+}
+
+function 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 isCancelable = (job: JobListItem) =>
-  job.showClear !== false && isActiveJobState(job.state)
+function onJobLeave(jobId: string) {
+  if (hoveredJobId.value === jobId) {
+    hoveredJobId.value = null
+  }
+  scheduleDetailsHide(jobId, clearPopoverAnchor)
+}
 
-const isFailedDeletable = (job: JobListItem) =>
-  job.showClear !== false && job.state === 'failed'
+function onJobEnter(job: JobListItem, event: MouseEvent) {
+  hoveredJobId.value = job.id
 
-const getPreviewOutput = (job: JobListItem) => job.taskRef?.previewOutput
+  const rowElement = event.currentTarget
+  if (!(rowElement instanceof HTMLElement)) return
 
-const getJobPreviewUrl = (job: JobListItem) => {
+  activeRowElement.value = rowElement
+  if (activeDetails.value?.jobId === job.id) {
+    clearHoverTimers()
+    void nextTick(updatePopoverPosition)
+    return
+  }
+
+  scheduleDetailsShow(
+    {
+      jobId: job.id,
+      workflowId: job.taskRef?.workflowId
+    },
+    () => {
+      activeRowElement.value = rowElement
+      void nextTick(updatePopoverPosition)
+    }
+  )
+}
+
+function isCancelable(job: JobListItem) {
+  return job.showClear !== false && isActiveJobState(job.state)
+}
+
+function isFailedDeletable(job: JobListItem) {
+  return job.showClear !== false && job.state === 'failed'
+}
+
+function getPreviewOutput(job: JobListItem) {
+  return job.taskRef?.previewOutput
+}
+
+function getJobPreviewUrl(job: JobListItem) {
   const preview = getPreviewOutput(job)
   if (preview?.isImage || preview?.isVideo) {
     return preview.url
@@ -113,19 +203,45 @@ const getJobPreviewUrl = (job: JobListItem) => {
   return job.iconImageUrl
 }
 
-const isVideoPreviewJob = (job: JobListItem) =>
-  job.state === 'completed' && !!getPreviewOutput(job)?.isVideo
+function isVideoPreviewJob(job: JobListItem) {
+  return job.state === 'completed' && !!getPreviewOutput(job)?.isVideo
+}
 
-const isPreviewableCompletedJob = (job: JobListItem) =>
-  job.state === 'completed' && !!getPreviewOutput(job)
+function isPreviewableCompletedJob(job: JobListItem) {
+  return job.state === 'completed' && !!getPreviewOutput(job)
+}
 
-const emitViewItem = (job: JobListItem) => {
+function emitViewItem(job: JobListItem) {
   if (isPreviewableCompletedJob(job)) {
+    resetActiveDetails()
     emit('viewItem', job)
   }
 }
 
-const getJobIconClass = (job: JobListItem): string | undefined => {
+function emitCompletedViewItem(job: JobListItem) {
+  resetActiveDetails()
+  emit('viewItem', job)
+}
+
+function emitCancelItem(job: JobListItem) {
+  resetActiveDetails()
+  emit('cancelItem', job)
+}
+
+function emitDeleteItem(job: JobListItem) {
+  resetActiveDetails()
+  emit('deleteItem', job)
+}
+
+function onPopoverEnter() {
+  clearHoverTimers()
+}
+
+function onPopoverLeave() {
+  scheduleDetailsHide(activeDetails.value?.jobId, clearPopoverAnchor)
+}
+
+function getJobIconClass(job: JobListItem): string | undefined {
   const iconName = job.iconName ?? iconForJobState(job.state)
   if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
     return 'animate-spin'

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/queue/job/JobGroupsList.test.ts

@@ -56,11 +56,11 @@ const mountComponent = (groups: JobGroup[]) =>
     }
   })
 
-afterEach(() => {
-  vi.useRealTimers()
-})
-
 describe('JobGroupsList hover behavior', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
   it('delays showing and hiding details while hovering over job rows', async () => {
     vi.useFakeTimers()
     const job = createJobItem({ id: 'job-d' })
@@ -95,4 +95,33 @@ describe('JobGroupsList hover behavior', () => {
       wrapper.findComponent(QueueJobItemStub).props('activeDetailsId')
     ).toBeNull()
   })
+
+  it('clears the previous popover when hovering a new row briefly and leaving', async () => {
+    vi.useFakeTimers()
+    const firstJob = createJobItem({ id: 'job-1', title: 'First job' })
+    const secondJob = createJobItem({ id: 'job-2', title: 'Second job' })
+    const wrapper = mountComponent([
+      { key: 'today', label: 'Today', items: [firstJob, secondJob] }
+    ])
+    const jobItems = wrapper.findAllComponents(QueueJobItemStub)
+
+    jobItems[0].vm.$emit('details-enter', firstJob.id)
+    vi.advanceTimersByTime(200)
+    await nextTick()
+    expect(jobItems[0].props('activeDetailsId')).toBe(firstJob.id)
+
+    jobItems[0].vm.$emit('details-leave', firstJob.id)
+    jobItems[1].vm.$emit('details-enter', secondJob.id)
+    vi.advanceTimersByTime(100)
+    await nextTick()
+    jobItems[1].vm.$emit('details-leave', secondJob.id)
+
+    vi.advanceTimersByTime(50)
+    await nextTick()
+    expect(jobItems[0].props('activeDetailsId')).toBeNull()
+
+    vi.advanceTimersByTime(50)
+    await nextTick()
+    expect(jobItems[1].props('activeDetailsId')).toBeNull()
+  })
 })

src/components/queue/job/JobGroupsList.vue

@@ -36,12 +36,11 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref, watch } from 'vue'
-
 import QueueJobItem from '@/components/queue/job/QueueJobItem.vue'
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+import { useJobDetailsHover } from '@/composables/queue/useJobDetailsHover'
 
-const props = defineProps<{ displayedJobGroups: JobGroup[] }>()
+const { displayedJobGroups } = defineProps<{ displayedJobGroups: JobGroup[] }>()
 
 const emit = defineEmits<{
   (e: 'cancelItem', item: JobListItem): void
@@ -50,65 +49,34 @@ const emit = defineEmits<{
   (e: 'viewItem', item: JobListItem): void
 }>()
 
-const emitCancelItem = (item: JobListItem) => {
+const {
+  activeDetails: activeDetailsId,
+  clearHoverTimers,
+  scheduleDetailsHide,
+  scheduleDetailsShow
+} = useJobDetailsHover<string>({
+  getActiveId: (jobId) => jobId,
+  getDisplayedJobGroups: () => displayedJobGroups
+})
+
+function emitCancelItem(item: JobListItem) {
   emit('cancelItem', item)
 }
 
-const emitDeleteItem = (item: JobListItem) => {
+function emitDeleteItem(item: JobListItem) {
   emit('deleteItem', item)
 }
 
-const activeDetailsId = ref<string | null>(null)
-const hideTimer = ref<number | null>(null)
-const showTimer = ref<number | null>(null)
-const clearHideTimer = () => {
-  if (hideTimer.value !== null) {
-    clearTimeout(hideTimer.value)
-    hideTimer.value = null
+function onDetailsEnter(jobId: string) {
+  if (activeDetailsId.value === jobId) {
+    clearHoverTimers()
+    return
   }
-}
-const clearShowTimer = () => {
-  if (showTimer.value !== null) {
-    clearTimeout(showTimer.value)
-    showTimer.value = null
-  }
-}
-const onDetailsEnter = (jobId: string) => {
-  clearHideTimer()
-  clearShowTimer()
-  showTimer.value = window.setTimeout(() => {
-    activeDetailsId.value = jobId
-    showTimer.value = null
-  }, 200)
-}
-const onDetailsLeave = (jobId: string) => {
-  clearHideTimer()
-  clearShowTimer()
-  hideTimer.value = window.setTimeout(() => {
-    if (activeDetailsId.value === jobId) activeDetailsId.value = null
-    hideTimer.value = null
-  }, 150)
+
+  scheduleDetailsShow(jobId)
 }
 
-const resetActiveDetails = () => {
-  clearHideTimer()
-  clearShowTimer()
-  activeDetailsId.value = null
+function onDetailsLeave(jobId: string) {
+  scheduleDetailsHide(jobId)
 }
-
-watch(
-  () => props.displayedJobGroups,
-  (groups) => {
-    const activeId = activeDetailsId.value
-    if (!activeId) return
-
-    const hasActiveJob = groups.some((group) =>
-      group.items.some((item) => item.id === activeId)
-    )
-
-    if (!hasActiveJob) resetActiveDetails()
-  }
-)
-
-onBeforeUnmount(resetActiveDetails)
 </script>

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/AssetsSidebarTab.vue

@@ -170,7 +170,7 @@
       </div>
     </template>
   </SidebarTabTemplate>
-  <ResultGallery
+  <MediaLightbox
     v-model:active-index="galleryActiveIndex"
     :all-gallery-items="galleryItems"
   />
@@ -220,7 +220,7 @@ import AssetsSidebarGridView from '@/components/sidebar/tabs/AssetsSidebarGridVi
 import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import MediaLightbox from '@/components/sidebar/tabs/queue/MediaLightbox.vue'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -58,7 +58,7 @@
         :entries="jobMenuEntries"
         @action="onJobMenuAction"
       />
-      <ResultGallery
+      <MediaLightbox
         v-model:active-index="galleryActiveIndex"
         :all-gallery-items="galleryItems"
       />
@@ -83,7 +83,7 @@ import { useQueueClearHistoryDialog } from '@/composables/queue/useQueueClearHis
 import { useResultGallery } from '@/composables/queue/useResultGallery'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import MediaLightbox from '@/components/sidebar/tabs/queue/MediaLightbox.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -167,7 +167,10 @@ import {
 import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { resolveEssentialsDisplayName } from '@/constants/essentialsDisplayNames'
+import {
+  resolveBlueprintSuffix,
+  resolveEssentialsDisplayName
+} from '@/constants/essentialsDisplayNames'
 import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import TabPanel from '@/components/tab/TabPanel.vue'
@@ -371,11 +374,38 @@ const essentialSections = computed(() => {
   )
 })
 
+function disambiguateBlueprintLabels(
+  root: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+): RenderedTreeExplorerNode<ComfyNodeDefImpl> {
+  if (!root.children) return root
+  return {
+    ...root,
+    children: root.children.map((folder) => {
+      if (folder.type !== 'folder' || !folder.children) return folder
+      const labelCounts = new Map<string, number>()
+      for (const node of folder.children) {
+        if (node.label)
+          labelCounts.set(node.label, (labelCounts.get(node.label) ?? 0) + 1)
+      }
+      return {
+        ...folder,
+        children: folder.children.map((node) => {
+          if ((labelCounts.get(node.label ?? '') ?? 0) <= 1) return node
+          const suffix = resolveBlueprintSuffix(node.data?.name ?? '')
+          if (!suffix) return node
+          return { ...node, label: `${node.label} (${suffix})` }
+        })
+      }
+    })
+  }
+}
+
 const renderedEssentialRoot = computed(() => {
   const section = essentialSections.value[0]
-  return section
+  const root = section
     ? fillNodeInfo(applySorting(section.tree), { useEssentialsLabels: true })
     : fillNodeInfo({ key: 'root', label: '', children: [] })
+  return disambiguateBlueprintLabels(root)
 })
 
 function flattenRenderedLeaves(

src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue

@@ -39,6 +39,7 @@ import { computed, inject } from 'vue'
 import TextTickerMultiLine from '@/components/common/TextTickerMultiLine.vue'
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
+import { resolveBlueprintIcon } from '@/constants/essentialsDisplayNames'
 import { ESSENTIALS_ICON_OVERRIDES } from '@/constants/essentialsNodes'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
@@ -73,6 +74,10 @@ const nodeIcon = computed(() => {
   const nodeName = node.data?.name
   if (nodeName && nodeName in ESSENTIALS_ICON_OVERRIDES)
     return ESSENTIALS_ICON_OVERRIDES[nodeName]
+  if (nodeName) {
+    const blueprintIcon = resolveBlueprintIcon(nodeName)
+    if (blueprintIcon) return blueprintIcon
+  }
   const iconName = nodeName ? kebabCase(nodeName) : 'node'
   return `icon-[comfy--${iconName}]`
 })

src/components/sidebar/tabs/queue/MediaLightbox.test.ts

@@ -0,0 +1,229 @@
+import { enableAutoUnmount, mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+enableAutoUnmount(afterEach)
+
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+import MediaLightbox from './MediaLightbox.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        close: 'Close',
+        gallery: 'Gallery',
+        previous: 'Previous',
+        next: 'Next'
+      }
+    }
+  }
+})
+
+type MockResultItem = Partial<ResultItemImpl> & {
+  filename: string
+  subfolder: string
+  type: string
+  nodeId: NodeId
+  mediaType: string
+  id?: string
+  url?: string
+  isImage?: boolean
+  isVideo?: boolean
+  isAudio?: boolean
+}
+
+describe('MediaLightbox', () => {
+  const mockComfyImage = {
+    name: 'ComfyImage',
+    template: '<div class="mock-comfy-image" data-testid="comfy-image"></div>',
+    props: ['src', 'contain', 'alt']
+  }
+
+  const mockResultVideo = {
+    name: 'ResultVideo',
+    template:
+      '<div class="mock-result-video" data-testid="result-video"></div>',
+    props: ['result']
+  }
+
+  const mockResultAudio = {
+    name: 'ResultAudio',
+    template:
+      '<div class="mock-result-audio" data-testid="result-audio"></div>',
+    props: ['result']
+  }
+
+  const mockGalleryItems: MockResultItem[] = [
+    {
+      filename: 'image1.jpg',
+      subfolder: 'outputs',
+      type: 'output',
+      nodeId: '123' as NodeId,
+      mediaType: 'images',
+      isImage: true,
+      isVideo: false,
+      isAudio: false,
+      url: 'image1.jpg',
+      id: '1'
+    },
+    {
+      filename: 'image2.jpg',
+      subfolder: 'outputs',
+      type: 'output',
+      nodeId: '456' as NodeId,
+      mediaType: 'images',
+      isImage: true,
+      isVideo: false,
+      isAudio: false,
+      url: 'image2.jpg',
+      id: '2'
+    },
+    {
+      filename: 'image3.jpg',
+      subfolder: 'outputs',
+      type: 'output',
+      nodeId: '789' as NodeId,
+      mediaType: 'images',
+      isImage: true,
+      isVideo: false,
+      isAudio: false,
+      url: 'image3.jpg',
+      id: '3'
+    }
+  ]
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+    vi.restoreAllMocks()
+  })
+
+  const mountGallery = (props = {}) => {
+    return mount(MediaLightbox, {
+      global: {
+        plugins: [i18n],
+        components: {
+          ComfyImage: mockComfyImage,
+          ResultVideo: mockResultVideo,
+          ResultAudio: mockResultAudio
+        },
+        stubs: {
+          teleport: true
+        }
+      },
+      props: {
+        allGalleryItems: mockGalleryItems as ResultItemImpl[],
+        activeIndex: 0,
+        ...props
+      },
+      attachTo: document.getElementById('app') || undefined
+    })
+  }
+
+  it('renders overlay with role="dialog" and aria-modal', async () => {
+    const wrapper = mountGallery()
+    await nextTick()
+
+    const dialog = wrapper.find('[role="dialog"]')
+    expect(dialog.exists()).toBe(true)
+    expect(dialog.attributes('aria-modal')).toBe('true')
+  })
+
+  it('shows navigation buttons when multiple items', async () => {
+    const wrapper = mountGallery()
+    await nextTick()
+
+    expect(wrapper.find('[aria-label="Previous"]').exists()).toBe(true)
+    expect(wrapper.find('[aria-label="Next"]').exists()).toBe(true)
+  })
+
+  it('hides navigation buttons for single item', async () => {
+    const wrapper = mountGallery({
+      allGalleryItems: [mockGalleryItems[0]] as ResultItemImpl[]
+    })
+    await nextTick()
+
+    expect(wrapper.find('[aria-label="Previous"]').exists()).toBe(false)
+    expect(wrapper.find('[aria-label="Next"]').exists()).toBe(false)
+  })
+
+  it('shows gallery when activeIndex changes from -1', async () => {
+    const wrapper = mountGallery({ activeIndex: -1 })
+
+    expect(wrapper.find('[data-mask]').exists()).toBe(false)
+
+    await wrapper.setProps({ activeIndex: 0 })
+    await nextTick()
+
+    expect(wrapper.find('[data-mask]').exists()).toBe(true)
+  })
+
+  it('emits update:activeIndex with -1 when close button clicked', async () => {
+    const wrapper = mountGallery()
+    await nextTick()
+
+    await wrapper.find('[aria-label="Close"]').trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([-1])
+  })
+
+  describe('keyboard navigation', () => {
+    it('navigates to next item on ArrowRight', async () => {
+      const wrapper = mountGallery({ activeIndex: 0 })
+      await nextTick()
+
+      await wrapper
+        .find('[role="dialog"]')
+        .trigger('keydown', { key: 'ArrowRight' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([1])
+    })
+
+    it('navigates to previous item on ArrowLeft', async () => {
+      const wrapper = mountGallery({ activeIndex: 1 })
+      await nextTick()
+
+      await wrapper
+        .find('[role="dialog"]')
+        .trigger('keydown', { key: 'ArrowLeft' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([0])
+    })
+
+    it('wraps to last item on ArrowLeft from first', async () => {
+      const wrapper = mountGallery({ activeIndex: 0 })
+      await nextTick()
+
+      await wrapper
+        .find('[role="dialog"]')
+        .trigger('keydown', { key: 'ArrowLeft' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([2])
+    })
+
+    it('closes gallery on Escape', async () => {
+      const wrapper = mountGallery({ activeIndex: 0 })
+      await nextTick()
+
+      await wrapper
+        .find('[role="dialog"]')
+        .trigger('keydown', { key: 'Escape' })
+      await nextTick()
+
+      expect(wrapper.emitted('update:activeIndex')?.[0]).toEqual([-1])
+    })
+  })
+})

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

@@ -0,0 +1,149 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="galleryVisible"
+      ref="dialogRef"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="$t('g.gallery')"
+      tabindex="-1"
+      class="fixed inset-0 z-9999 flex items-center justify-center bg-black/90 outline-none"
+      data-mask
+      @mousedown="onMaskMouseDown"
+      @mouseup="onMaskMouseUp"
+      @keydown="handleKeyDown"
+    >
+      <!-- Close Button -->
+      <Button
+        variant="secondary"
+        size="icon-lg"
+        class="absolute top-4 right-4 z-10 rounded-full"
+        :aria-label="$t('g.close')"
+        @click="close"
+      >
+        <i class="icon-[lucide--x] size-5" />
+      </Button>
+
+      <!-- Previous Button -->
+      <Button
+        v-if="hasMultiple"
+        variant="secondary"
+        size="icon-lg"
+        class="fixed top-1/2 left-4 z-10 -translate-y-1/2 rounded-full"
+        :aria-label="$t('g.previous')"
+        @click="navigateImage(-1)"
+      >
+        <i class="icon-[lucide--chevron-left] size-6" />
+      </Button>
+
+      <!-- Content -->
+      <div class="flex max-h-full max-w-full items-center justify-center">
+        <template v-if="activeItem">
+          <ComfyImage
+            v-if="activeItem.isImage"
+            :key="activeItem.url"
+            :src="activeItem.url"
+            :contain="false"
+            :alt="activeItem.filename"
+            class="size-auto max-h-[90vh] max-w-[90vw] object-contain"
+          />
+          <ResultVideo v-else-if="activeItem.isVideo" :result="activeItem" />
+          <ResultAudio v-else-if="activeItem.isAudio" :result="activeItem" />
+        </template>
+      </div>
+
+      <!-- Next Button -->
+      <Button
+        v-if="hasMultiple"
+        variant="secondary"
+        size="icon-lg"
+        class="fixed top-1/2 right-4 z-10 -translate-y-1/2 rounded-full"
+        :aria-label="$t('g.next')"
+        @click="navigateImage(1)"
+      >
+        <i class="icon-[lucide--chevron-right] size-6" />
+      </Button>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+
+import ComfyImage from '@/components/common/ComfyImage.vue'
+import Button from '@/components/ui/button/Button.vue'
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+import ResultAudio from './ResultAudio.vue'
+import ResultVideo from './ResultVideo.vue'
+
+const emit = defineEmits<{
+  (e: 'update:activeIndex', value: number): void
+}>()
+
+const props = defineProps<{
+  allGalleryItems: ResultItemImpl[]
+  activeIndex: number
+}>()
+
+const galleryVisible = ref(false)
+const dialogRef = ref<HTMLElement>()
+let previouslyFocusedElement: HTMLElement | null = null
+const hasMultiple = computed(() => props.allGalleryItems.length > 1)
+const activeItem = computed(() => props.allGalleryItems[props.activeIndex])
+
+watch(
+  () => props.activeIndex,
+  (index) => {
+    galleryVisible.value = index !== -1
+    if (index !== -1) {
+      previouslyFocusedElement = document.activeElement as HTMLElement | null
+      void nextTick(() => dialogRef.value?.focus())
+    }
+  },
+  { immediate: true }
+)
+
+function close() {
+  galleryVisible.value = false
+  emit('update:activeIndex', -1)
+  previouslyFocusedElement?.focus()
+  previouslyFocusedElement = null
+}
+
+function navigateImage(direction: number) {
+  const newIndex =
+    (props.activeIndex + direction + props.allGalleryItems.length) %
+    props.allGalleryItems.length
+  emit('update:activeIndex', newIndex)
+}
+
+let maskMouseDownTarget: EventTarget | null = null
+
+function onMaskMouseDown(event: MouseEvent) {
+  maskMouseDownTarget = event.target
+}
+
+function onMaskMouseUp(event: MouseEvent) {
+  if (
+    maskMouseDownTarget === event.target &&
+    (event.target as HTMLElement)?.hasAttribute('data-mask')
+  ) {
+    close()
+  }
+}
+
+function handleKeyDown(event: KeyboardEvent) {
+  const actions: Record<string, () => void> = {
+    ArrowLeft: () => navigateImage(-1),
+    ArrowRight: () => navigateImage(1),
+    Escape: () => close()
+  }
+
+  const action = actions[event.key]
+  if (action) {
+    event.preventDefault()
+    action()
+  }
+}
+</script>

src/components/sidebar/tabs/queue/ResultGallery.test.ts

@@ -1,184 +0,0 @@
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import Galleria from 'primevue/galleria'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { createApp, nextTick } from 'vue'
-
-import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type { ResultItemImpl } from '@/stores/queueStore'
-
-import ResultGallery from './ResultGallery.vue'
-
-type MockResultItem = Partial<ResultItemImpl> & {
-  filename: string
-  subfolder: string
-  type: string
-  nodeId: NodeId
-  mediaType: string
-  id?: string
-  url?: string
-  isImage?: boolean
-  isVideo?: boolean
-}
-
-describe('ResultGallery', () => {
-  // Mock ComfyImage and ResultVideo components
-  const mockComfyImage = {
-    name: 'ComfyImage',
-    template: '<div class="mock-comfy-image" data-testid="comfy-image"></div>',
-    props: ['src', 'contain', 'alt']
-  }
-
-  const mockResultVideo = {
-    name: 'ResultVideo',
-    template:
-      '<div class="mock-result-video" data-testid="result-video"></div>',
-    props: ['result']
-  }
-
-  // Sample gallery items - using mock instances with only required properties
-  const mockGalleryItems: MockResultItem[] = [
-    {
-      filename: 'image1.jpg',
-      subfolder: 'outputs',
-      type: 'output',
-      nodeId: '123' as NodeId,
-      mediaType: 'images',
-      isImage: true,
-      isVideo: false,
-      url: 'image1.jpg',
-      id: '1'
-    },
-    {
-      filename: 'image2.jpg',
-      subfolder: 'outputs',
-      type: 'output',
-      nodeId: '456' as NodeId,
-      mediaType: 'images',
-      isImage: true,
-      isVideo: false,
-      url: 'image2.jpg',
-      id: '2'
-    }
-  ]
-
-  beforeEach(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
-
-    // Create mock elements for Galleria to find
-    document.body.innerHTML = `
-      <div id="app"></div>
-    `
-  })
-
-  afterEach(() => {
-    // Clean up any elements added to body
-    document.body.innerHTML = ''
-    vi.restoreAllMocks()
-  })
-
-  const mountGallery = (props = {}) => {
-    return mount(ResultGallery, {
-      global: {
-        plugins: [PrimeVue],
-        components: {
-          Galleria,
-          ComfyImage: mockComfyImage,
-          ResultVideo: mockResultVideo
-        },
-        stubs: {
-          teleport: true
-        }
-      },
-      props: {
-        allGalleryItems: mockGalleryItems as ResultItemImpl[],
-        activeIndex: 0,
-        ...props
-      },
-      attachTo: document.getElementById('app') || undefined
-    })
-  }
-
-  it('renders Galleria component with correct props', async () => {
-    const wrapper = mountGallery()
-
-    await nextTick() // Wait for component to mount
-
-    const galleria = wrapper.findComponent(Galleria)
-    expect(galleria.exists()).toBe(true)
-    expect(galleria.props('value')).toEqual(mockGalleryItems)
-    expect(galleria.props('showIndicators')).toBe(false)
-    expect(galleria.props('showItemNavigators')).toBe(true)
-    expect(galleria.props('fullScreen')).toBe(true)
-  })
-
-  it('shows gallery when activeIndex changes from -1', async () => {
-    const wrapper = mountGallery({ activeIndex: -1 })
-
-    // Initially galleryVisible should be false
-    type GalleryVM = typeof wrapper.vm & {
-      galleryVisible: boolean
-    }
-    const vm = wrapper.vm as GalleryVM
-    expect(vm.galleryVisible).toBe(false)
-
-    // Change activeIndex
-    await wrapper.setProps({ activeIndex: 0 })
-    await nextTick()
-
-    // galleryVisible should become true
-    expect(vm.galleryVisible).toBe(true)
-  })
-
-  it('should render the component properly', () => {
-    // This is a meta-test to confirm the component mounts properly
-    const wrapper = mountGallery()
-
-    // We can't directly test the compiled CSS, but we can verify the component renders
-    expect(wrapper.exists()).toBe(true)
-
-    // Verify that the Galleria component exists and is properly mounted
-    const galleria = wrapper.findComponent(Galleria)
-    expect(galleria.exists()).toBe(true)
-  })
-
-  it('ensures correct configuration for mobile viewport', async () => {
-    // Mock window.matchMedia to simulate mobile viewport
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: vi.fn().mockImplementation((query) => ({
-        matches: query.includes('max-width: 768px'),
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn()
-      }))
-    })
-
-    const wrapper = mountGallery()
-    await nextTick()
-
-    // Verify mobile media query is working
-    expect(window.matchMedia('(max-width: 768px)').matches).toBe(true)
-
-    // Check if the component renders with Galleria
-    const galleria = wrapper.findComponent(Galleria)
-    expect(galleria.exists()).toBe(true)
-
-    // Check that our PT props for positioning work correctly
-    interface GalleriaPT {
-      prevButton?: { style?: string }
-      nextButton?: { style?: string }
-    }
-    const pt = galleria.props('pt') as GalleriaPT
-    expect(pt?.prevButton?.style).toContain('position: fixed')
-    expect(pt?.nextButton?.style).toContain('position: fixed')
-  })
-
-  // Additional tests for interaction could be added once we can reliably
-  // test Galleria component in fullscreen mode
-})

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

@@ -1,157 +0,0 @@
-<template>
-  <Galleria
-    v-model:visible="galleryVisible"
-    :active-index="activeIndex"
-    :value="allGalleryItems"
-    :show-indicators="false"
-    change-item-on-indicator-hover
-    :show-item-navigators="hasMultiple"
-    full-screen
-    :circular="hasMultiple"
-    :show-thumbnails="false"
-    :pt="{
-      mask: {
-        onMousedown: onMaskMouseDown,
-        onMouseup: onMaskMouseUp,
-        'data-mask': true
-      },
-      prevButton: {
-        style: 'position: fixed !important'
-      },
-      nextButton: {
-        style: 'position: fixed !important'
-      }
-    }"
-    @update:visible="handleVisibilityChange"
-    @update:active-index="handleActiveIndexChange"
-  >
-    <template #item="{ item }">
-      <ComfyImage
-        v-if="item.isImage"
-        :key="item.url"
-        :src="item.url"
-        :contain="false"
-        :alt="item.filename"
-        class="galleria-image"
-      />
-      <ResultVideo v-else-if="item.isVideo" :result="item" />
-      <ResultAudio v-else-if="item.isAudio" :result="item" />
-    </template>
-  </Galleria>
-</template>
-
-<script setup lang="ts">
-import Galleria from 'primevue/galleria'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import ComfyImage from '@/components/common/ComfyImage.vue'
-import type { ResultItemImpl } from '@/stores/queueStore'
-
-import ResultAudio from './ResultAudio.vue'
-import ResultVideo from './ResultVideo.vue'
-
-const galleryVisible = ref(false)
-
-const emit = defineEmits<{
-  (e: 'update:activeIndex', value: number): void
-}>()
-
-const props = defineProps<{
-  allGalleryItems: ResultItemImpl[]
-  activeIndex: number
-}>()
-
-const hasMultiple = computed(() => props.allGalleryItems.length > 1)
-
-let maskMouseDownTarget: EventTarget | null = null
-
-const onMaskMouseDown = (event: MouseEvent) => {
-  maskMouseDownTarget = event.target
-}
-
-const onMaskMouseUp = (event: MouseEvent) => {
-  const maskEl = document.querySelector('[data-mask]')
-  if (
-    galleryVisible.value &&
-    maskMouseDownTarget === event.target &&
-    maskMouseDownTarget === maskEl
-  ) {
-    galleryVisible.value = false
-    handleVisibilityChange(false)
-  }
-}
-
-watch(
-  () => props.activeIndex,
-  (index) => {
-    if (index !== -1) {
-      galleryVisible.value = true
-    }
-  }
-)
-
-const handleVisibilityChange = (visible: boolean) => {
-  if (!visible) {
-    emit('update:activeIndex', -1)
-  }
-}
-
-const handleActiveIndexChange = (index: number) => {
-  emit('update:activeIndex', index)
-}
-
-const handleKeyDown = (event: KeyboardEvent) => {
-  if (!galleryVisible.value) return
-
-  switch (event.key) {
-    case 'ArrowLeft':
-      navigateImage(-1)
-      break
-    case 'ArrowRight':
-      navigateImage(1)
-      break
-    case 'Escape':
-      galleryVisible.value = false
-      handleVisibilityChange(false)
-      break
-  }
-}
-
-const navigateImage = (direction: number) => {
-  const newIndex =
-    (props.activeIndex + direction + props.allGalleryItems.length) %
-    props.allGalleryItems.length
-  emit('update:activeIndex', newIndex)
-}
-
-onMounted(() => {
-  window.addEventListener('keydown', handleKeyDown)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyDown)
-})
-</script>
-
-<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;
-}
-
-/* Mobile/tablet specific fixes */
-@media screen and (max-width: 768px) {
-  .p-galleria-prev-button,
-  .p-galleria-next-button {
-    z-index: 2;
-  }
-}
-</style>

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/components/topbar/CurrentUserPopoverLegacy.test.ts

@@ -167,9 +167,12 @@ vi.mock('@/platform/telemetry', () => ({
   }))
 }))
 
-// Mock isCloud
+// Mock isCloud with hoisted state for per-test toggling
+const mockIsCloud = vi.hoisted(() => ({ value: true }))
 vi.mock('@/platform/distribution/types', () => ({
-  isCloud: true
+  get isCloud() {
+    return mockIsCloud.value
+  }
 }))
 
 vi.mock('@/platform/cloud/subscription/components/SubscribeButton.vue', () => ({
@@ -184,6 +187,7 @@ vi.mock('@/platform/cloud/subscription/components/SubscribeButton.vue', () => ({
 describe('CurrentUserPopoverLegacy', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    mockIsCloud.value = true
     mockAuthStoreState.balance = {
       amount_micros: 100_000,
       effective_balance_micros: 100_000,
@@ -425,4 +429,60 @@ describe('CurrentUserPopoverLegacy', () => {
       expect(wrapper.text()).toContain('0')
     })
   })
+
+  describe('non-cloud distribution', () => {
+    beforeEach(() => {
+      mockIsCloud.value = false
+    })
+
+    it('hides credits section', () => {
+      const wrapper = mountComponent()
+      expect(wrapper.find('[data-testid="add-credits-button"]').exists()).toBe(
+        false
+      )
+      expect(
+        wrapper.find('[data-testid="upgrade-to-add-credits-button"]').exists()
+      ).toBe(false)
+    })
+
+    it('hides subscribe button', () => {
+      const wrapper = mountComponent()
+      expect(wrapper.text()).not.toContain('Subscribe Button')
+    })
+
+    it('hides partner nodes menu item', () => {
+      const wrapper = mountComponent()
+      expect(
+        wrapper.find('[data-testid="partner-nodes-menu-item"]').exists()
+      ).toBe(false)
+    })
+
+    it('hides plans & pricing menu item', () => {
+      const wrapper = mountComponent()
+      expect(
+        wrapper.find('[data-testid="plans-pricing-menu-item"]').exists()
+      ).toBe(false)
+    })
+
+    it('hides manage plan menu item', () => {
+      const wrapper = mountComponent()
+      expect(
+        wrapper.find('[data-testid="manage-plan-menu-item"]').exists()
+      ).toBe(false)
+    })
+
+    it('still shows user settings menu item', () => {
+      const wrapper = mountComponent()
+      expect(
+        wrapper.find('[data-testid="user-settings-menu-item"]').exists()
+      ).toBe(true)
+    })
+
+    it('still shows logout menu item', () => {
+      const wrapper = mountComponent()
+      expect(wrapper.find('[data-testid="logout-menu-item"]').exists()).toBe(
+        true
+      )
+    })
+  })
 })

src/components/topbar/CurrentUserPopoverLegacy.vue

@@ -29,8 +29,11 @@
       </span>
     </div>
 
-    <!-- Credits Section -->
-    <div v-if="isActiveSubscription" class="flex items-center gap-2 px-4 py-2">
+    <!-- Credits Section (cloud only) -->
+    <div
+      v-if="isCloud && isActiveSubscription"
+      class="flex items-center gap-2 px-4 py-2"
+    >
       <i class="icon-[lucide--component] text-sm text-amber-400" />
       <Skeleton
         v-if="authStore.isFetchingBalance"
@@ -66,7 +69,7 @@
       </Button>
     </div>
 
-    <div v-else class="flex justify-center px-4">
+    <div v-else-if="isCloud" class="flex justify-center px-4">
       <SubscribeButton
         :fluid="false"
         :label="$t('subscription.subscribeToComfyCloud')"
@@ -79,7 +82,7 @@
     <Divider class="mx-0 my-2" />
 
     <div
-      v-if="isActiveSubscription"
+      v-if="isCloud && isActiveSubscription"
       class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="partner-nodes-menu-item"
       @click="handleOpenPartnerNodesInfo"
@@ -91,6 +94,7 @@
     </div>
 
     <div
+      v-if="isCloud"
       class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="plans-pricing-menu-item"
       @click="handleOpenPlansAndPricing"
@@ -108,7 +112,7 @@
     </div>
 
     <div
-      v-if="isActiveSubscription"
+      v-if="isCloud && isActiveSubscription"
       class="flex cursor-pointer items-center gap-2 px-4 py-2 hover:bg-secondary-background-hover"
       data-testid="manage-plan-menu-item"
       @click="handleOpenPlanAndCreditsSettings"

src/components/topbar/TopbarSubscribeButton.test.ts

@@ -0,0 +1,79 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+import TopbarSubscribeButton from './TopbarSubscribeButton.vue'
+
+const mockIsCloud = vi.hoisted(() => ({ value: true }))
+
+vi.mock('@/platform/distribution/types', () => ({
+  get isCloud() {
+    return mockIsCloud.value
+  }
+}))
+
+const mockShowPricingTable = vi.fn()
+
+vi.mock(
+  '@/platform/cloud/subscription/composables/useSubscriptionDialog',
+  () => ({
+    useSubscriptionDialog: vi.fn(() => ({
+      showPricingTable: mockShowPricingTable
+    }))
+  })
+)
+
+vi.mock('@/composables/billing/useBillingContext', () => ({
+  useBillingContext: vi.fn(() => ({
+    isFreeTier: { value: true }
+  }))
+}))
+
+vi.mock('pinia')
+
+vi.mock('firebase/app', () => ({
+  initializeApp: vi.fn(),
+  getApp: vi.fn()
+}))
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(),
+  setPersistence: vi.fn(),
+  browserLocalPersistence: {},
+  onAuthStateChanged: vi.fn(),
+  signOut: vi.fn()
+}))
+
+function mountComponent() {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: { en: enMessages }
+  })
+
+  return mount(TopbarSubscribeButton, {
+    global: {
+      plugins: [i18n]
+    }
+  })
+}
+
+describe('TopbarSubscribeButton', () => {
+  it('renders on cloud when isFreeTier is true', () => {
+    mockIsCloud.value = true
+    const wrapper = mountComponent()
+    expect(
+      wrapper.find('[data-testid="topbar-subscribe-button"]').exists()
+    ).toBe(true)
+  })
+
+  it('hides on non-cloud distribution', () => {
+    mockIsCloud.value = false
+    const wrapper = mountComponent()
+    expect(
+      wrapper.find('[data-testid="topbar-subscribe-button"]').exists()
+    ).toBe(false)
+  })
+})

src/components/topbar/TopbarSubscribeButton.vue

@@ -1,6 +1,6 @@
 <template>
   <Button
-    v-if="isFreeTier"
+    v-if="isCloud && isFreeTier"
     class="mr-2 shrink-0 whitespace-nowrap"
     variant="gradient"
     size="sm"
@@ -15,6 +15,7 @@
 import Button from '@/components/ui/button/Button.vue'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+import { isCloud } from '@/platform/distribution/types'
 
 const { isFreeTier } = useBillingContext()
 const subscriptionDialog = useSubscriptionDialog()

src/components/ui/button/button.variants.ts

@@ -28,8 +28,9 @@ export const buttonVariants = cva({
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',
       md: 'h-8 rounded-lg p-2 text-xs',
       lg: 'h-10 rounded-lg px-4 py-2 text-sm',
-      icon: 'size-8',
       'icon-sm': 'size-5 p-0',
+      icon: 'size-8',
+      'icon-lg': 'size-10',
       unset: ''
     }
   },
@@ -54,8 +55,13 @@ const variants = [
   'overlay-white',
   'gradient'
 ] as const satisfies Array<ButtonVariants['variant']>
-const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
-  ButtonVariants['size']
->
+const sizes = [
+  'sm',
+  'md',
+  'lg',
+  'icon-sm',
+  'icon',
+  'icon-lg'
+] as const satisfies Array<ButtonVariants['size']>
 
 export const FOR_STORIES = { variants, sizes } as const

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/maskeditor/useMaskEditorSaver.test.ts

@@ -0,0 +1,183 @@
+import { createTestingPinia } from '@pinia/testing'
+import { setActivePinia } from 'pinia'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
+import { api } from '@/scripts/api'
+import { useNodeOutputStore } from '@/stores/nodeOutputStore'
+import { useMaskEditorSaver } from './useMaskEditorSaver'
+
+// ---- Module Mocks ----
+
+const mockDataStore: Record<string, unknown> = {
+  sourceNode: null,
+  inputData: null,
+  outputData: null
+}
+
+vi.mock('@/stores/maskEditorDataStore', () => ({
+  useMaskEditorDataStore: vi.fn(() => mockDataStore)
+}))
+
+function createMockCtx(): CanvasRenderingContext2D {
+  return {
+    drawImage: vi.fn(),
+    getImageData: vi.fn(() => ({
+      data: new Uint8ClampedArray(4 * 4 * 4),
+      width: 4,
+      height: 4
+    })),
+    putImageData: vi.fn(),
+    globalCompositeOperation: 'source-over'
+  } as unknown as CanvasRenderingContext2D
+}
+
+function createMockCanvas(): HTMLCanvasElement {
+  return {
+    width: 4,
+    height: 4,
+    getContext: vi.fn(() => createMockCtx()),
+    toBlob: vi.fn((cb: BlobCallback) => {
+      cb(new Blob(['x'], { type: 'image/png' }))
+    }),
+    toDataURL: vi.fn(() => 'data:image/png;base64,mock')
+  } as unknown as HTMLCanvasElement
+}
+
+const mockEditorStore: Record<string, HTMLCanvasElement | null> = {
+  maskCanvas: null,
+  rgbCanvas: null,
+  imgCanvas: null
+}
+
+vi.mock('@/stores/maskEditorStore', () => ({
+  useMaskEditorStore: vi.fn(() => mockEditorStore)
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fetchApi: vi.fn(),
+    apiURL: vi.fn((route: string) => `http://localhost:8188${route}`)
+  }
+}))
+
+vi.mock('@/scripts/app', () => ({
+  app: {
+    canvas: { setDirty: vi.fn() },
+    nodeOutputs: {} as Record<string, unknown>,
+    nodePreviewImages: {} as Record<string, string[]>,
+    getPreviewFormatParam: vi.fn(() => ''),
+    getRandParam: vi.fn(() => '')
+  }
+}))
+
+vi.mock('@/platform/distribution/types', () => ({ isCloud: false }))
+
+vi.mock('@/platform/workflow/management/stores/workflowStore', () => ({
+  useWorkflowStore: vi.fn(() => ({
+    nodeIdToNodeLocatorId: vi.fn((id: string | number) => String(id)),
+    nodeToNodeLocatorId: vi.fn((node: { id: number }) => String(node.id))
+  }))
+}))
+
+vi.mock('@/utils/graphTraversalUtil', () => ({
+  executionIdToNodeLocatorId: vi.fn((_rootGraph: unknown, id: string) => id)
+}))
+
+describe('useMaskEditorSaver', () => {
+  let mockNode: LGraphNode
+  const originalCreateElement = document.createElement.bind(document)
+
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    vi.clearAllMocks()
+
+    app.nodeOutputs = {}
+    app.nodePreviewImages = {}
+
+    mockNode = {
+      id: 42,
+      type: 'LoadImage',
+      images: [],
+      imgs: undefined,
+      widgets: [
+        { name: 'image', value: 'original.png [input]', callback: vi.fn() }
+      ],
+      widgets_values: ['original.png [input]'],
+      properties: { image: 'original.png [input]' },
+      graph: { setDirtyCanvas: vi.fn() }
+    } as unknown as LGraphNode
+
+    mockDataStore.sourceNode = mockNode
+    mockDataStore.inputData = {
+      baseLayer: { image: {} as HTMLImageElement, url: 'base.png' },
+      maskLayer: { image: {} as HTMLImageElement, url: 'mask.png' },
+      sourceRef: { filename: 'original.png', subfolder: '', type: 'input' },
+      nodeId: 42
+    }
+    mockDataStore.outputData = null
+
+    mockEditorStore.maskCanvas = createMockCanvas()
+    mockEditorStore.rgbCanvas = createMockCanvas()
+    mockEditorStore.imgCanvas = createMockCanvas()
+
+    vi.mocked(api.fetchApi).mockResolvedValue({
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          name: 'clipspace-painted-masked-123.png',
+          subfolder: 'clipspace',
+          type: 'input'
+        })
+    } as Response)
+
+    vi.spyOn(document, 'createElement').mockImplementation(
+      (tagName: string, options?: ElementCreationOptions) => {
+        if (tagName === 'canvas')
+          return createMockCanvas() as unknown as HTMLCanvasElement
+        return originalCreateElement(tagName, options)
+      }
+    )
+
+    // Mock Image constructor so loadImageFromUrl resolves
+    vi.stubGlobal(
+      'Image',
+      class MockImage {
+        crossOrigin = ''
+        onload: ((ev: Event) => void) | null = null
+        onerror: ((ev: unknown) => void) | null = null
+        private _src = ''
+        get src() {
+          return this._src
+        }
+        set src(value: string) {
+          this._src = value
+          queueMicrotask(() => this.onload?.(new Event('load')))
+        }
+      }
+    )
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('registers node outputs in store after save for node without prior execution outputs', async () => {
+    const store = useNodeOutputStore()
+    const locatorId = String(mockNode.id)
+
+    // Precondition: node has never been executed, no outputs exist
+    expect(app.nodeOutputs[locatorId]).toBeUndefined()
+
+    const { save } = useMaskEditorSaver()
+    await save()
+
+    // After mask editor save, the node must have outputs in the store
+    // so the image preview displays correctly (not blank).
+    // Bug: the old code used updateNodeImages which silently no-ops
+    // when there are no pre-existing outputs for the node.
+    expect(store.nodeOutputs[locatorId]).toBeDefined()
+    expect(store.nodeOutputs[locatorId]?.images?.length).toBeGreaterThan(0)
+  })
+})

src/composables/maskeditor/useMaskEditorSaver.ts

@@ -9,6 +9,7 @@ import type {
 import { isCloud } from '@/platform/distribution/types'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 
 // Private layer filename functions
@@ -347,11 +348,15 @@ export function useMaskEditorSaver() {
           node.widgets_values[widgetIndex] = widgetValue
         }
       }
-
-      imageWidget.callback?.(widgetValue)
     }
 
-    nodeOutputStore.updateNodeImages(node)
+    node.imgs = undefined
+    const annotatedPath = createAnnotatedPath(mainRef.filename, {
+      subfolder: mainRef.subfolder,
+      rootFolder: mainRef.type
+    })
+    nodeOutputStore.setNodeOutputs(node, annotatedPath, { folder: 'input' })
+    node.graph?.setDirtyCanvas(true)
   }
 
   function loadImageFromUrl(url: string): Promise<HTMLImageElement> {

src/composables/node/useNodeAnimatedImage.ts

@@ -30,7 +30,8 @@ export function useNodeAnimatedImage() {
       const element = document.createElement('div')
       element.appendChild(node.imgs[0])
       const widget = node.addDOMWidget(ANIM_PREVIEW_WIDGET, 'img', element, {
-        hideOnZoom: false
+        hideOnZoom: false,
+        canvasOnly: true
       })
       node.overIndex = 0
 

src/composables/queue/useJobDetailsHover.ts

@@ -0,0 +1,107 @@
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+import type { JobGroup } from '@/composables/queue/useJobList'
+
+const DETAILS_SHOW_DELAY_MS = 200
+const DETAILS_HIDE_DELAY_MS = 150
+
+interface UseJobDetailsHoverOptions<TActive> {
+  getActiveId: (active: TActive) => string
+  getDisplayedJobGroups: () => JobGroup[]
+  onReset?: () => void
+}
+
+export function useJobDetailsHover<TActive>({
+  getActiveId,
+  getDisplayedJobGroups,
+  onReset
+}: UseJobDetailsHoverOptions<TActive>) {
+  const activeDetails = ref<TActive | null>(null)
+  const hideTimer = ref<number | null>(null)
+  const hideTimerJobId = ref<string | null>(null)
+  const showTimer = ref<number | null>(null)
+
+  function clearHideTimer() {
+    if (hideTimer.value !== null) {
+      clearTimeout(hideTimer.value)
+      hideTimer.value = null
+    }
+    hideTimerJobId.value = null
+  }
+
+  function clearShowTimer() {
+    if (showTimer.value !== null) {
+      clearTimeout(showTimer.value)
+      showTimer.value = null
+    }
+  }
+
+  function clearHoverTimers() {
+    clearHideTimer()
+    clearShowTimer()
+  }
+
+  function resetActiveDetails() {
+    clearHoverTimers()
+    activeDetails.value = null
+    onReset?.()
+  }
+
+  function hasDisplayedJob(jobId: string) {
+    return getDisplayedJobGroups().some((group) =>
+      group.items.some((item) => item.id === jobId)
+    )
+  }
+
+  function scheduleDetailsShow(nextActive: TActive, onShow?: () => void) {
+    const nextActiveId = getActiveId(nextActive)
+    clearShowTimer()
+    showTimer.value = window.setTimeout(() => {
+      showTimer.value = null
+      if (!hasDisplayedJob(nextActiveId)) return
+
+      activeDetails.value = nextActive
+      onShow?.()
+    }, DETAILS_SHOW_DELAY_MS)
+  }
+
+  function scheduleDetailsHide(jobId?: string, onHide?: () => void) {
+    if (!jobId) return
+
+    clearShowTimer()
+    if (hideTimerJobId.value && hideTimerJobId.value !== jobId) {
+      return
+    }
+
+    clearHideTimer()
+    hideTimerJobId.value = jobId
+    hideTimer.value = window.setTimeout(() => {
+      const currentActive = activeDetails.value
+      if (currentActive && getActiveId(currentActive) === jobId) {
+        activeDetails.value = null
+        onHide?.()
+      }
+      hideTimer.value = null
+      hideTimerJobId.value = null
+    }, DETAILS_HIDE_DELAY_MS)
+  }
+
+  watch(getDisplayedJobGroups, () => {
+    const currentActive = activeDetails.value
+    if (!currentActive) return
+
+    if (!hasDisplayedJob(getActiveId(currentActive))) {
+      resetActiveDetails()
+    }
+  })
+
+  onBeforeUnmount(resetActiveDetails)
+
+  return {
+    activeDetails,
+    clearHoverTimers,
+    resetActiveDetails,
+    scheduleDetailsHide,
+    scheduleDetailsShow
+  }
+}

src/composables/useCurveEditor.ts

@@ -1,25 +1,37 @@
 import { computed, onBeforeUnmount, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import { createMonotoneInterpolator } from '@/components/curve/curveUtils'
-import type { CurvePoint } from '@/components/curve/types'
+import { createInterpolator } from '@/components/curve/curveUtils'
+import type { CurveInterpolation, CurvePoint } from '@/components/curve/types'
 
 interface UseCurveEditorOptions {
   svgRef: Ref<SVGSVGElement | null>
   modelValue: Ref<CurvePoint[]>
+  interpolation: Ref<CurveInterpolation>
 }
 
-export function useCurveEditor({ svgRef, modelValue }: UseCurveEditorOptions) {
+export function useCurveEditor({
+  svgRef,
+  modelValue,
+  interpolation
+}: UseCurveEditorOptions) {
   const dragIndex = ref(-1)
   let cleanupDrag: (() => void) | null = null
 
   const curvePath = computed(() => {
     const points = modelValue.value
     if (points.length < 2) return ''
+    const sorted = [...points].sort((a, b) => a[0] - b[0])
 
-    const interpolate = createMonotoneInterpolator(points)
-    const xMin = points[0][0]
-    const xMax = points[points.length - 1][0]
+    if (interpolation.value === 'linear') {
+      return sorted
+        .map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0]},${1 - p[1]}`)
+        .join('')
+    }
+
+    const interpolate = createInterpolator(sorted, interpolation.value)
+    const xMin = sorted[0][0]
+    const xMax = sorted[sorted.length - 1][0]
     const segments = 128
     const range = xMax - xMin
     const parts: string[] = []

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