[automated] Apply ESLint and Oxfmt fixes

`formatJsonValue()` uses a loose regex `^\d{4}-\d{2}-\d{2}` to detect
date-like strings, which matches non-date strings like
`"2024-01-01-beta"`.

Changes:
- Require ISO 8601 `T` separator: `/^\d{4}-\d{2}-\d{2}T/`
- Validate parse result with `!Number.isNaN(date.getTime())`
- Use `d()` i18n formatter for consistency with `formatDate()` in the
same file

apps/website/.gitignore

@@ -0,0 +1,2 @@
+dist/
+.astro/

apps/website/astro.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'astro/config'
+import vue from '@astrojs/vue'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  site: 'https://comfy.org',
+  output: 'static',
+  integrations: [vue()],
+  vite: {
+    plugins: [tailwindcss()]
+  },
+  build: {
+    assetsPrefix: process.env.VERCEL_URL
+      ? `https://${process.env.VERCEL_URL}`
+      : undefined
+  },
+  i18n: {
+    locales: ['en', 'zh-CN'],
+    defaultLocale: 'en',
+    routing: {
+      prefixDefaultLocale: false
+    }
+  }
+})

apps/website/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@comfyorg/website",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@comfyorg/design-system": "workspace:*",
+    "@vercel/analytics": "catalog:",
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@astrojs/vue": "catalog:",
+    "@tailwindcss/vite": "catalog:",
+    "astro": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
+  },
+  "nx": {
+    "tags": [
+      "scope:website",
+      "type:app"
+    ],
+    "targets": {
+      "dev": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro dev"
+        }
+      },
+      "serve": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro dev"
+        }
+      },
+      "build": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro build"
+        },
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      },
+      "preview": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "dependsOn": [
+          "build"
+        ],
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro preview"
+        }
+      },
+      "typecheck": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/website",
+          "command": "astro check"
+        }
+      }
+    }
+  }
+}

apps/website/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

apps/website/src/styles/global.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@comfyorg/design-system/css/base.css';

apps/website/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*", "astro.config.mjs"]
+}

browser_tests/fixtures/helpers/CanvasHelper.ts

@@ -91,6 +91,12 @@ export class CanvasHelper {
     await this.page.mouse.move(10, 10)
   }
 
+  async isReadOnly(): Promise<boolean> {
+    return this.page.evaluate(() => {
+      return window.app!.canvas.state.readOnly
+    })
+  }
+
   async getScale(): Promise<number> {
     return this.page.evaluate(() => {
       return window.app!.canvas.ds.scale

browser_tests/fixtures/helpers/QueueHelper.ts

@@ -3,9 +3,6 @@ import type { Page, Route } from '@playwright/test'
 export class QueueHelper {
   private queueRouteHandler: ((route: Route) => void) | null = null
   private historyRouteHandler: ((route: Route) => void) | null = null
-  private jobsRouteHandler: ((route: Route) => void) | null = null
-  private queueJobs: Array<Record<string, unknown>> = []
-  private historyJobs: Array<Record<string, unknown>> = []
 
   constructor(private readonly page: Page) {}
 
@@ -16,26 +13,6 @@ export class QueueHelper {
     running: number = 0,
     pending: number = 0
   ): Promise<void> {
-    const baseTime = Date.now()
-    this.queueJobs = [
-      ...Array.from({ length: running }, (_, i) => ({
-        id: `running-${i}`,
-        status: 'in_progress',
-        create_time: baseTime - i * 1000,
-        execution_start_time: baseTime - 5000 - i * 1000,
-        execution_end_time: null,
-        priority: i + 1
-      })),
-      ...Array.from({ length: pending }, (_, i) => ({
-        id: `pending-${i}`,
-        status: 'pending',
-        create_time: baseTime - (running + i) * 1000,
-        execution_start_time: null,
-        execution_end_time: null,
-        priority: running + i + 1
-      }))
-    ]
-
     this.queueRouteHandler = (route: Route) =>
       route.fulfill({
         status: 200,
@@ -58,7 +35,6 @@ export class QueueHelper {
         })
       })
     await this.page.route('**/api/queue', this.queueRouteHandler)
-    await this.installJobsRoute()
   }
 
   /**
@@ -67,30 +43,6 @@ export class QueueHelper {
   async mockHistory(
     jobs: Array<{ promptId: string; status: 'success' | 'error' }>
   ): Promise<void> {
-    const baseTime = Date.now()
-    this.historyJobs = jobs.map((job, index) => {
-      const completed = job.status === 'success'
-
-      return {
-        id: job.promptId,
-        status: completed ? 'completed' : 'failed',
-        create_time: baseTime - index * 1000,
-        execution_start_time: baseTime - 5000 - index * 1000,
-        execution_end_time: baseTime - index * 1000,
-        outputs_count: completed ? 1 : 0,
-        workflow_id: `workflow-${job.promptId}`,
-        preview_output: completed
-          ? {
-              filename: `${job.promptId}.png`,
-              subfolder: '',
-              type: 'output',
-              nodeId: '1',
-              mediaType: 'images'
-            }
-          : null
-      }
-    })
-
     const history: Record<string, unknown> = {}
     for (const job of jobs) {
       history[job.promptId] = {
@@ -109,44 +61,6 @@ export class QueueHelper {
         body: JSON.stringify(history)
       })
     await this.page.route('**/api/history**', this.historyRouteHandler)
-    await this.installJobsRoute()
-  }
-
-  private async installJobsRoute() {
-    if (this.jobsRouteHandler) {
-      return
-    }
-
-    this.jobsRouteHandler = (route: Route) => {
-      const url = new URL(route.request().url())
-      const statuses =
-        url.searchParams
-          .get('status')
-          ?.split(',')
-          .filter((status) => status.length > 0) ?? []
-      const offset = Number(url.searchParams.get('offset') ?? 0)
-      const limit = Number(url.searchParams.get('limit') ?? 200)
-      const jobs = [...this.queueJobs, ...this.historyJobs].filter(
-        (job) => statuses.length === 0 || statuses.includes(String(job.status))
-      )
-      const paginatedJobs = jobs.slice(offset, offset + limit)
-
-      void route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          jobs: paginatedJobs,
-          pagination: {
-            offset,
-            limit,
-            total: jobs.length,
-            has_more: offset + paginatedJobs.length < jobs.length
-          }
-        })
-      })
-    }
-
-    await this.page.route('**/api/jobs**', this.jobsRouteHandler)
   }
 
   /**
@@ -161,9 +75,5 @@ export class QueueHelper {
       await this.page.unroute('**/api/history**', this.historyRouteHandler)
       this.historyRouteHandler = null
     }
-    if (this.jobsRouteHandler) {
-      await this.page.unroute('**/api/jobs**', this.jobsRouteHandler)
-      this.jobsRouteHandler = null
-    }
   }
 }

browser_tests/fixtures/selectors.ts

@@ -28,10 +28,15 @@ export const TestIds = {
     settingsTabAbout: 'settings-tab-about',
     confirm: 'confirm-dialog',
     errorOverlay: 'error-overlay',
+    errorOverlaySeeErrors: 'error-overlay-see-errors',
     runtimeErrorPanel: 'runtime-error-panel',
     missingNodeCard: 'missing-node-card',
+    errorCardFindOnGithub: 'error-card-find-on-github',
+    errorCardCopy: 'error-card-copy',
     about: 'about-panel',
-    whatsNewSection: 'whats-new-section'
+    whatsNewSection: 'whats-new-section',
+    missingNodePacksGroup: 'error-group-missing-node',
+    missingModelsGroup: 'error-group-missing-model'
   },
   keybindings: {
     presetMenu: 'keybinding-preset-menu'
@@ -76,6 +81,10 @@ export const TestIds = {
   },
   user: {
     currentUserIndicator: 'current-user-indicator'
+  },
+  errors: {
+    imageLoadError: 'error-loading-image',
+    videoLoadError: 'error-loading-video'
   }
 } as const
 
@@ -101,3 +110,4 @@ export type TestIdValue =
       (id: string) => string
     >
   | (typeof TestIds.user)[keyof typeof TestIds.user]
+  | (typeof TestIds.errors)[keyof typeof TestIds.errors]

browser_tests/tests/colorPalette.spec.ts

@@ -38,16 +38,13 @@ const customColorPalettes = {
         CLEAR_BACKGROUND_COLOR: '#222222',
         NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
         NODE_SELECTED_TITLE_COLOR: '#FFF',
-        NODE_TEXT_SIZE: 14,
         NODE_TEXT_COLOR: '#b8b8b8',
-        NODE_SUBTEXT_SIZE: 12,
         NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
         NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
         NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#236692',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
-        DEFAULT_GROUP_FONT: 24,
         WIDGET_BGCOLOR: '#242424',
         WIDGET_OUTLINE_COLOR: '#333',
         WIDGET_TEXT_COLOR: '#a3a3a8',
@@ -102,16 +99,13 @@ const customColorPalettes = {
         CLEAR_BACKGROUND_COLOR: '#000',
         NODE_TITLE_COLOR: 'rgba(255,255,255,.75)',
         NODE_SELECTED_TITLE_COLOR: '#FFF',
-        NODE_TEXT_SIZE: 14,
         NODE_TEXT_COLOR: '#b8b8b8',
-        NODE_SUBTEXT_SIZE: 12,
         NODE_DEFAULT_COLOR: 'rgba(0,0,0,.8)',
         NODE_DEFAULT_BGCOLOR: 'rgba(22,22,22,.8)',
         NODE_DEFAULT_BOXCOLOR: 'rgba(255,255,255,.75)',
         NODE_DEFAULT_SHAPE: 'box',
         NODE_BOX_OUTLINE_COLOR: '#236692',
         DEFAULT_SHADOW_COLOR: 'rgba(0,0,0,0)',
-        DEFAULT_GROUP_FONT: 24,
         WIDGET_BGCOLOR: '#242424',
         WIDGET_OUTLINE_COLOR: '#333',
         WIDGET_TEXT_COLOR: '#a3a3a8',

browser_tests/tests/defaultKeybindings.spec.ts

@@ -0,0 +1,318 @@
+import { expect } from '@playwright/test'
+
+import type { ComfyPage } from '../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+async function pressKeyAndExpectRequest(
+  comfyPage: ComfyPage,
+  key: string,
+  urlPattern: string,
+  method: string = 'POST'
+) {
+  const requestPromise = comfyPage.page.waitForRequest(
+    (req) => req.url().includes(urlPattern) && req.method() === method,
+    { timeout: 5000 }
+  )
+  await comfyPage.page.keyboard.press(key)
+  return requestPromise
+}
+
+test.describe('Default Keybindings', { tag: '@keyboard' }, () => {
+  test.describe('Sidebar Toggle Shortcuts', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
+      await comfyPage.nextFrame()
+    })
+
+    const sidebarTabs = [
+      { key: 'KeyW', tabId: 'workflows', label: 'workflows' },
+      { key: 'KeyN', tabId: 'node-library', label: 'node library' },
+      { key: 'KeyM', tabId: 'model-library', label: 'model library' },
+      { key: 'KeyA', tabId: 'assets', label: 'assets' }
+    ] as const
+
+    for (const { key, tabId, label } of sidebarTabs) {
+      test(`'${key}' toggles ${label} sidebar`, async ({ comfyPage }) => {
+        const selectedButton = comfyPage.page.locator(
+          `.${tabId}-tab-button.side-bar-button-selected`
+        )
+
+        await expect(selectedButton).not.toBeVisible()
+
+        await comfyPage.canvas.press(key)
+        await comfyPage.nextFrame()
+        await expect(selectedButton).toBeVisible()
+
+        await comfyPage.canvas.press(key)
+        await comfyPage.nextFrame()
+        await expect(selectedButton).not.toBeVisible()
+      })
+    }
+  })
+
+  test.describe('Canvas View Controls', () => {
+    test("'Alt+=' zooms in", async ({ comfyPage }) => {
+      const initialScale = await comfyPage.canvasOps.getScale()
+
+      await comfyPage.canvas.press('Alt+Equal')
+      await comfyPage.nextFrame()
+
+      const newScale = await comfyPage.canvasOps.getScale()
+      expect(newScale).toBeGreaterThan(initialScale)
+    })
+
+    test("'Alt+-' zooms out", async ({ comfyPage }) => {
+      const initialScale = await comfyPage.canvasOps.getScale()
+
+      await comfyPage.canvas.press('Alt+Minus')
+      await comfyPage.nextFrame()
+
+      const newScale = await comfyPage.canvasOps.getScale()
+      expect(newScale).toBeLessThan(initialScale)
+    })
+
+    test("'.' fits view to nodes", async ({ comfyPage }) => {
+      // Set scale very small so fit-view will zoom back to fit nodes
+      await comfyPage.canvasOps.setScale(0.1)
+      const scaleBefore = await comfyPage.canvasOps.getScale()
+      expect(scaleBefore).toBeCloseTo(0.1, 1)
+
+      // Click canvas to ensure focus is within graph-canvas-container
+      await comfyPage.canvas.click({ position: { x: 400, y: 400 } })
+      await comfyPage.nextFrame()
+
+      await comfyPage.canvas.press('Period')
+      await comfyPage.nextFrame()
+
+      const scaleAfter = await comfyPage.canvasOps.getScale()
+      expect(scaleAfter).toBeGreaterThan(scaleBefore)
+    })
+
+    test("'h' locks canvas", async ({ comfyPage }) => {
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+
+      await comfyPage.canvas.press('KeyH')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+    })
+
+    test("'v' unlocks canvas", async ({ comfyPage }) => {
+      // Lock first
+      await comfyPage.command.executeCommand('Comfy.Canvas.Lock')
+      await comfyPage.nextFrame()
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(true)
+
+      await comfyPage.canvas.press('KeyV')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.canvasOps.isReadOnly()).toBe(false)
+    })
+  })
+
+  test.describe('Node State Toggles', () => {
+    test("'Alt+c' collapses and expands selected nodes", async ({
+      comfyPage
+    }) => {
+      const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      expect(nodes.length).toBeGreaterThan(0)
+      const node = nodes[0]
+
+      await node.click('title')
+      await comfyPage.nextFrame()
+
+      expect(await node.isCollapsed()).toBe(false)
+
+      await comfyPage.canvas.press('Alt+KeyC')
+      await comfyPage.nextFrame()
+      expect(await node.isCollapsed()).toBe(true)
+
+      await comfyPage.canvas.press('Alt+KeyC')
+      await comfyPage.nextFrame()
+      expect(await node.isCollapsed()).toBe(false)
+    })
+
+    test("'Ctrl+m' mutes and unmutes selected nodes", async ({ comfyPage }) => {
+      const nodes = await comfyPage.nodeOps.getNodeRefsByType('CLIPTextEncode')
+      expect(nodes.length).toBeGreaterThan(0)
+      const node = nodes[0]
+
+      await node.click('title')
+      await comfyPage.nextFrame()
+
+      // Normal mode is ALWAYS (0)
+      const getMode = () =>
+        comfyPage.page.evaluate((nodeId) => {
+          return window.app!.canvas.graph!.getNodeById(nodeId)!.mode
+        }, node.id)
+
+      expect(await getMode()).toBe(0)
+
+      await comfyPage.canvas.press('Control+KeyM')
+      await comfyPage.nextFrame()
+      // NEVER (2) = muted
+      expect(await getMode()).toBe(2)
+
+      await comfyPage.canvas.press('Control+KeyM')
+      await comfyPage.nextFrame()
+      expect(await getMode()).toBe(0)
+    })
+  })
+
+  test.describe('Mode and Panel Toggles', () => {
+    test("'Alt+m' toggles app mode", async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      // Set up linearData so app mode has something to show
+      await comfyPage.appMode.enterAppModeWithInputs([])
+      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+
+      // Toggle off with Alt+m
+      await comfyPage.page.keyboard.press('Alt+KeyM')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.appMode.linearWidgets).not.toBeVisible()
+
+      // Toggle on again
+      await comfyPage.page.keyboard.press('Alt+KeyM')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.appMode.linearWidgets).toBeVisible()
+    })
+
+    test("'Alt+Shift+m' toggles minimap", async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+      await comfyPage.settings.setSetting('Comfy.Minimap.Visible', true)
+      await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
+      await comfyPage.workflow.loadWorkflow('default')
+
+      const minimap = comfyPage.page.locator('.litegraph-minimap')
+      await expect(minimap).toBeVisible()
+
+      await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
+      await comfyPage.nextFrame()
+      await expect(minimap).not.toBeVisible()
+
+      await comfyPage.page.keyboard.press('Alt+Shift+KeyM')
+      await comfyPage.nextFrame()
+      await expect(minimap).toBeVisible()
+    })
+
+    test("'Ctrl+`' toggles terminal/logs panel", async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
+
+      await comfyPage.page.keyboard.press('Control+Backquote')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.bottomPanel.root).toBeVisible()
+
+      await comfyPage.page.keyboard.press('Control+Backquote')
+      await comfyPage.nextFrame()
+      await expect(comfyPage.bottomPanel.root).not.toBeVisible()
+    })
+  })
+
+  test.describe('Queue and Execution', () => {
+    test("'Ctrl+Enter' queues prompt", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'Control+Enter',
+        '/prompt',
+        'POST'
+      )
+      expect(request.url()).toContain('/prompt')
+    })
+
+    test("'Ctrl+Shift+Enter' queues prompt to front", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'Control+Shift+Enter',
+        '/prompt',
+        'POST'
+      )
+      const body = request.postDataJSON()
+      expect(body.front).toBe(true)
+    })
+
+    test("'Ctrl+Alt+Enter' interrupts execution", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'Control+Alt+Enter',
+        '/interrupt',
+        'POST'
+      )
+      expect(request.url()).toContain('/interrupt')
+    })
+  })
+
+  test.describe('File Operations', () => {
+    test("'Ctrl+s' triggers save workflow", async ({ comfyPage }) => {
+      // On a new unsaved workflow, Ctrl+s triggers Save As dialog.
+      // The dialog appearing proves the keybinding was intercepted by the app.
+      await comfyPage.page.keyboard.press('Control+s')
+      await comfyPage.nextFrame()
+
+      // The Save As dialog should appear (p-dialog overlay)
+      const dialogOverlay = comfyPage.page.locator('.p-dialog-mask')
+      await expect(dialogOverlay).toBeVisible({ timeout: 3000 })
+
+      // Dismiss the dialog
+      await comfyPage.page.keyboard.press('Escape')
+      await comfyPage.nextFrame()
+    })
+
+    test("'Ctrl+o' triggers open workflow", async ({ comfyPage }) => {
+      // Ctrl+o calls app.ui.loadFile() which clicks a hidden file input.
+      // Detect the file input click via an event listener.
+      await comfyPage.page.evaluate(() => {
+        window.TestCommand = false
+        const fileInputs =
+          document.querySelectorAll<HTMLInputElement>('input[type="file"]')
+        for (const input of fileInputs) {
+          input.addEventListener('click', () => {
+            window.TestCommand = true
+          })
+        }
+      })
+
+      await comfyPage.page.keyboard.press('Control+o')
+      await comfyPage.nextFrame()
+
+      expect(await comfyPage.page.evaluate(() => window.TestCommand)).toBe(true)
+    })
+  })
+
+  test.describe('Graph Operations', () => {
+    test("'Ctrl+Shift+e' converts selection to subgraph", async ({
+      comfyPage
+    }) => {
+      const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
+      expect(initialCount).toBeGreaterThan(1)
+
+      // Select all nodes
+      await comfyPage.canvas.press('Control+a')
+      await comfyPage.nextFrame()
+
+      await comfyPage.page.keyboard.press('Control+Shift+KeyE')
+      await comfyPage.nextFrame()
+
+      // After conversion, node count should decrease
+      // (multiple nodes replaced by single subgraph node)
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), {
+          timeout: 5000
+        })
+        .toBeLessThan(initialCount)
+    })
+
+    test("'r' refreshes node definitions", async ({ comfyPage }) => {
+      const request = await pressKeyAndExpectRequest(
+        comfyPage,
+        'KeyR',
+        '/object_info',
+        'GET'
+      )
+      expect(request.url()).toContain('/object_info')
+    })
+  })
+})

browser_tests/tests/dialog.spec.ts

@@ -28,7 +28,7 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    const missingNodesTitle = errorOverlay.getByText(/Missing Node Packs/)
     await expect(missingNodesTitle).toBeVisible()
   })
 
@@ -42,11 +42,13 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingNodesTitle = comfyPage.page.getByText(/Missing Node Packs/)
+    const missingNodesTitle = errorOverlay.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 errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     const missingNodeCard = comfyPage.page.getByTestId(
@@ -75,7 +77,9 @@ test.describe('Missing nodes in Error Overlay', { tag: '@ui' }, () => {
     await expect(errorOverlay).toBeVisible()
 
     // Click "See Errors" to open the right side panel errors tab
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     // Verify MissingNodeCard is rendered in the errors tab
@@ -165,17 +169,19 @@ test.describe('Error actions in Errors Tab', { tag: '@ui' }, () => {
       TestIds.dialogs.errorOverlay
     )
     await expect(errorOverlay).toBeVisible()
-    await errorOverlay.getByRole('button', { name: 'See Errors' }).click()
+    await errorOverlay
+      .getByTestId(TestIds.dialogs.errorOverlaySeeErrors)
+      .click()
     await expect(errorOverlay).not.toBeVisible()
 
     // Verify Find on GitHub button is present in the error card
-    const findOnGithubButton = comfyPage.page.getByRole('button', {
-      name: 'Find on GitHub'
-    })
+    const findOnGithubButton = comfyPage.page.getByTestId(
+      TestIds.dialogs.errorCardFindOnGithub
+    )
     await expect(findOnGithubButton).toBeVisible()
 
     // Verify Copy button is present in the error card
-    const copyButton = comfyPage.page.getByRole('button', { name: 'Copy' })
+    const copyButton = comfyPage.page.getByTestId(TestIds.dialogs.errorCardCopy)
     await expect(copyButton).toBeVisible()
   })
 })
@@ -204,7 +210,7 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
     await expect(missingModelsTitle).toBeVisible()
   })
 
@@ -220,7 +226,7 @@ test.describe('Missing models in Error Tab', () => {
     )
     await expect(errorOverlay).toBeVisible()
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
+    const missingModelsTitle = errorOverlay.getByText(/Missing Models/)
     await expect(missingModelsTitle).toBeVisible()
   })
 
@@ -231,13 +237,10 @@ test.describe('Missing models in Error Tab', () => {
       'missing/model_metadata_widget_mismatch'
     )
 
-    const missingModelsTitle = comfyPage.page.getByText(/Missing Models/)
-    await expect(missingModelsTitle).not.toBeVisible()
-
-    const errorOverlay = comfyPage.page.getByTestId(
-      TestIds.dialogs.errorOverlay
-    )
-    await expect(errorOverlay).not.toBeVisible()
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.errorOverlay)
+    ).not.toBeVisible()
+    await expect(comfyPage.page.getByText(/Missing Models/)).not.toBeVisible()
   })
 
   // Flaky test after parallelization

browser_tests/tests/interaction.spec.ts

@@ -764,13 +764,13 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     )
   })
 
+  const generateUniqueFilename = (extension = '') =>
+    `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
+
   test.describe('Restore all open workflows on reload', () => {
     let workflowA: string
     let workflowB: string
 
-    const generateUniqueFilename = (extension = '') =>
-      `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
-
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
 
@@ -829,6 +829,82 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     })
   })
 
+  test.describe('Restore workflow tabs after browser restart', () => {
+    let workflowA: string
+    let workflowB: string
+
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+
+      workflowA = generateUniqueFilename()
+      await comfyPage.menu.topbar.saveWorkflow(workflowA)
+      workflowB = generateUniqueFilename()
+      await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
+      await comfyPage.menu.topbar.saveWorkflow(workflowB)
+
+      // Wait for localStorage fallback pointers to be written
+      await comfyPage.page.waitForFunction(() => {
+        for (let i = 0; i < window.localStorage.length; i++) {
+          const key = window.localStorage.key(i)
+          if (key?.startsWith('Comfy.Workflow.LastOpenPaths:')) {
+            return true
+          }
+        }
+        return false
+      })
+
+      // Simulate browser restart: clear sessionStorage (lost on close)
+      // but keep localStorage (survives browser restart)
+      await comfyPage.page.evaluate(() => {
+        sessionStorage.clear()
+      })
+      await comfyPage.setup({ clearStorage: false })
+    })
+
+    test('Restores topbar workflow tabs after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Topbar'
+      )
+      // Wait for both restored tabs to render (localStorage fallback is async)
+      await expect(
+        comfyPage.page.locator('.workflow-tabs .workflow-label', {
+          hasText: workflowA
+        })
+      ).toBeVisible()
+
+      const tabs = await comfyPage.menu.topbar.getTabNames()
+      const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
+
+      expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
+      expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+
+    test('Restores sidebar workflows after browser restart', async ({
+      comfyPage
+    }) => {
+      await comfyPage.settings.setSetting(
+        'Comfy.Workflow.WorkflowTabsPosition',
+        'Sidebar'
+      )
+      await comfyPage.menu.workflowsTab.open()
+      const openWorkflows =
+        await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
+      const activeWorkflowName =
+        await comfyPage.menu.workflowsTab.getActiveWorkflowName()
+      expect(openWorkflows).toEqual(
+        expect.arrayContaining([workflowA, workflowB])
+      )
+      expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
+        openWorkflows.indexOf(workflowB)
+      )
+      expect(activeWorkflowName).toEqual(workflowB)
+    })
+  })
+
   test('Auto fit view after loading workflow', async ({ comfyPage }) => {
     await comfyPage.settings.setSetting(
       'Comfy.EnableWorkflowViewRestore',

browser_tests/tests/sidebar/assetsSidebar.spec.ts

@@ -1,55 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../../fixtures/ComfyPage'
-
-test.describe('Assets Sidebar', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.queue.mockHistory([
-      { promptId: 'history-asset-1', status: 'success' }
-    ])
-    await comfyPage.setup({ clearStorage: false })
-
-    await comfyPage.page.getByRole('button', { name: /^Assets/ }).click()
-    await expect(
-      comfyPage.page.getByRole('button', {
-        name: /history-asset-1\.png/i
-      })
-    ).toBeVisible()
-  })
-
-  test('right-click menu can inspect an asset', async ({ comfyPage }) => {
-    const assetCard = comfyPage.page.getByRole('button', {
-      name: /history-asset-1\.png/i
-    })
-
-    await assetCard.click({ button: 'right' })
-
-    const menuPanel = comfyPage.page.locator('.media-asset-menu-panel')
-    await expect(menuPanel).toBeVisible()
-
-    await menuPanel.getByRole('menuitem', { name: /inspect asset/i }).click()
-
-    const dialog = comfyPage.page.getByRole('dialog')
-    await expect(dialog).toBeVisible()
-    await expect(dialog.getByLabel('Close')).toBeVisible()
-  })
-
-  test('actions menu closes on scroll', async ({ comfyPage }) => {
-    const assetCard = comfyPage.page.getByRole('button', {
-      name: /history-asset-1\.png/i
-    })
-
-    await assetCard.hover()
-    await assetCard.getByRole('button', { name: /more options/i }).click()
-
-    const menuPanel = comfyPage.page.locator('.media-asset-menu-panel')
-    await expect(menuPanel).toBeVisible()
-
-    await comfyPage.page.evaluate(() => {
-      window.dispatchEvent(new Event('scroll'))
-    })
-
-    await expect(menuPanel).toBeHidden()
-  })
-})

browser_tests/tests/sidebar/jobHistorySidebar.spec.ts

@@ -1,70 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../../fixtures/ComfyPage'
-
-test.describe('Job History Sidebar', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.queue.mockQueueState()
-    await comfyPage.queue.mockHistory([
-      { promptId: 'history-job-1', status: 'success' }
-    ])
-    await comfyPage.settings.setSetting('Comfy.Queue.QPOV2', true)
-    await comfyPage.setup({ clearStorage: false })
-
-    await comfyPage.page.getByTestId('queue-overlay-toggle').click()
-    await expect(
-      comfyPage.page.locator('[data-job-id="history-job-1"]')
-    ).toBeVisible()
-  })
-
-  test('right-click menu can inspect a completed job asset', async ({
-    comfyPage
-  }) => {
-    const jobRow = comfyPage.page.locator('[data-job-id="history-job-1"]')
-
-    await jobRow.click({ button: 'right' })
-
-    const menuPanel = comfyPage.page.locator('.job-menu-panel')
-    await expect(menuPanel).toBeVisible()
-
-    await menuPanel.getByRole('menuitem', { name: /inspect asset/i }).click()
-
-    const dialog = comfyPage.page.getByRole('dialog')
-    await expect(dialog).toBeVisible()
-    await expect(dialog.getByLabel('Close')).toBeVisible()
-  })
-
-  test('hover popover and actions menu stay clickable', async ({
-    comfyPage
-  }) => {
-    const jobRow = comfyPage.page.locator('[data-job-id="history-job-1"]')
-    await jobRow.hover()
-
-    const popover = comfyPage.page.locator('.job-details-popover')
-    await expect(popover).toBeVisible()
-    await popover.getByRole('button', { name: /^copy$/i }).click()
-
-    await jobRow.hover()
-    const moreButton = jobRow.locator('.job-actions-menu-trigger')
-    await expect(moreButton).toBeVisible()
-    await moreButton.click()
-
-    const menuPanel = comfyPage.page.locator('.job-menu-panel')
-    await expect(menuPanel).toBeVisible()
-
-    const box = await menuPanel.boundingBox()
-    if (!box) {
-      throw new Error('Job actions menu did not render a bounding box')
-    }
-
-    await comfyPage.page.mouse.move(
-      box.x + box.width / 2,
-      box.y + Math.min(box.height / 2, 24)
-    )
-    await expect(menuPanel).toBeVisible()
-
-    await menuPanel.getByRole('menuitem', { name: /copy job id/i }).click()
-    await expect(menuPanel).toBeHidden()
-  })
-})

browser_tests/tests/subgraphSlotAlignment.spec.ts

@@ -0,0 +1,132 @@
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+
+import { expect } from '@playwright/test'
+
+import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+
+interface SlotMeasurement {
+  key: string
+  offsetX: number
+  offsetY: number
+}
+
+interface NodeSlotData {
+  nodeId: string
+  isSubgraph: boolean
+  nodeW: number
+  nodeH: number
+  slots: SlotMeasurement[]
+}
+
+/**
+ * Regression test for link misalignment on SubgraphNodes when loading
+ * workflows with workflowRendererVersion: "LG".
+ *
+ * Root cause: ensureCorrectLayoutScale scales nodes by 1.2x for LG workflows,
+ * and fitView() updates lgCanvas.ds immediately. The Vue TransformPane's CSS
+ * transform lags by a frame, causing clientPosToCanvasPos to produce wrong
+ * slot offsets. The fix uses DOM-relative measurement instead.
+ */
+test.describe(
+  'Subgraph slot alignment after LG layout scale',
+  { tag: ['@subgraph', '@canvas'] },
+  () => {
+    test('slot positions stay within node bounds after loading LG workflow', async ({
+      comfyPage
+    }) => {
+      const SLOT_BOUNDS_MARGIN = 20
+      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+      const workflowPath = resolve(
+        import.meta.dirname,
+        '../assets/subgraphs/basic-subgraph.json'
+      )
+      const workflow = JSON.parse(
+        readFileSync(workflowPath, 'utf-8')
+      ) as ComfyWorkflowJSON
+      workflow.extra = {
+        ...workflow.extra,
+        workflowRendererVersion: 'LG'
+      }
+
+      await comfyPage.page.evaluate(
+        (wf) =>
+          window.app!.loadGraphData(wf as ComfyWorkflowJSON, true, true, null, {
+            openSource: 'template'
+          }),
+        workflow
+      )
+      await comfyPage.nextFrame()
+
+      // Wait for slot elements to appear in DOM
+      await comfyPage.page.locator('[data-slot-key]').first().waitFor()
+
+      const result: NodeSlotData[] = await comfyPage.page.evaluate(() => {
+        const nodes = window.app!.graph._nodes
+        const slotData: NodeSlotData[] = []
+
+        for (const node of nodes) {
+          const nodeId = String(node.id)
+          const nodeEl = document.querySelector(
+            `[data-node-id="${nodeId}"]`
+          ) as HTMLElement | null
+          if (!nodeEl) continue
+
+          const slotEls = nodeEl.querySelectorAll('[data-slot-key]')
+          if (slotEls.length === 0) continue
+
+          const slots: SlotMeasurement[] = []
+
+          const nodeRect = nodeEl.getBoundingClientRect()
+          for (const slotEl of slotEls) {
+            const slotRect = slotEl.getBoundingClientRect()
+            const slotKey = (slotEl as HTMLElement).dataset.slotKey ?? 'unknown'
+            slots.push({
+              key: slotKey,
+              offsetX: slotRect.left + slotRect.width / 2 - nodeRect.left,
+              offsetY: slotRect.top + slotRect.height / 2 - nodeRect.top
+            })
+          }
+
+          slotData.push({
+            nodeId,
+            isSubgraph: !!node.isSubgraphNode?.(),
+            nodeW: nodeRect.width,
+            nodeH: nodeRect.height,
+            slots
+          })
+        }
+
+        return slotData
+      })
+
+      const subgraphNodes = result.filter((n) => n.isSubgraph)
+      expect(subgraphNodes.length).toBeGreaterThan(0)
+
+      for (const node of subgraphNodes) {
+        for (const slot of node.slots) {
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetX,
+            `Slot ${slot.key} on node ${node.nodeId}: X offset ${slot.offsetX} outside node width ${node.nodeW}`
+          ).toBeLessThanOrEqual(node.nodeW + SLOT_BOUNDS_MARGIN)
+
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeGreaterThanOrEqual(-SLOT_BOUNDS_MARGIN)
+          expect(
+            slot.offsetY,
+            `Slot ${slot.key} on node ${node.nodeId}: Y offset ${slot.offsetY} outside node height ${node.nodeH}`
+          ).toBeLessThanOrEqual(node.nodeH + SLOT_BOUNDS_MARGIN)
+        }
+      }
+    })
+  }
+)

browser_tests/tests/templates.spec.ts

@@ -206,6 +206,31 @@ test.describe('Templates', { tag: ['@slow', '@workflow'] }, () => {
     await expect(nav).toBeVisible() // Nav should be visible at tablet size
   })
 
+  test(
+    'select components in filter bar render correctly',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.command.executeCommand('Comfy.BrowseTemplates')
+      await expect(comfyPage.templates.content).toBeVisible()
+
+      // Wait for filter bar select components to render
+      const dialog = comfyPage.page.getByRole('dialog')
+      const sortBySelect = dialog.getByRole('combobox', { name: /Sort/ })
+      await expect(sortBySelect).toBeVisible()
+
+      // Screenshot the filter bar containing MultiSelect and SingleSelect
+      const filterBar = sortBySelect.locator(
+        'xpath=ancestor::div[contains(@class, "justify-between")]'
+      )
+      await expect(filterBar).toHaveScreenshot(
+        'template-filter-bar-select-components.png',
+        {
+          mask: [comfyPage.page.locator('.p-toast')]
+        }
+      )
+    }
+  )
+
   test(
     'template cards descriptions adjust height dynamically',
     { tag: '@screenshot' },

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

@@ -47,6 +47,46 @@ test.describe('Vue Node Moving', () => {
     }
   )
 
+  test('should not move node when pointer moves less than drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move only 2px — below the 3px drag threshold in useNodePointerInteractions
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 2, headerPos.y + 1, {
+      steps: 5
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    expect(afterPos.x).toBeCloseTo(headerPos.x, 0)
+    expect(afterPos.y).toBeCloseTo(headerPos.y, 0)
+
+    // The small movement should have selected the node, not dragged it
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+  })
+
+  test('should move node when pointer moves beyond drag threshold', async ({
+    comfyPage
+  }) => {
+    const headerPos = await getLoadCheckpointHeaderPos(comfyPage)
+
+    // Move 50px — well beyond the 3px drag threshold
+    await comfyPage.page.mouse.move(headerPos.x, headerPos.y)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(headerPos.x + 50, headerPos.y + 50, {
+      steps: 20
+    })
+    await comfyPage.page.mouse.up()
+    await comfyPage.nextFrame()
+
+    const afterPos = await getLoadCheckpointHeaderPos(comfyPage)
+    await expectPosChanged(headerPos, afterPos)
+  })
+
   test(
     '@mobile should allow moving nodes by dragging on touch devices',
     { tag: '@screenshot' },

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

@@ -2,6 +2,7 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
+import { TestIds } from '../../../../fixtures/selectors'
 
 test.describe('Vue Upload Widgets', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -19,10 +20,14 @@ test.describe('Vue Upload Widgets', () => {
     ).not.toBeVisible()
 
     await expect
-      .poll(() => comfyPage.page.getByText('Error loading image').count())
+      .poll(() =>
+        comfyPage.page.getByTestId(TestIds.errors.imageLoadError).count()
+      )
       .toBeGreaterThan(0)
     await expect
-      .poll(() => comfyPage.page.getByText('Error loading video').count())
+      .poll(() =>
+        comfyPage.page.getByTestId(TestIds.errors.videoLoadError).count()
+      )
       .toBeGreaterThan(0)
   })
 })

browser_tests/tests/vueNodes/widgets/text/multilineStringWidget.spec.ts

@@ -46,4 +46,16 @@ test.describe('Vue Multiline String Widget', () => {
 
     await expect(textarea).toHaveValue('Keep me around')
   })
+  test('should use native context menu when focused', async ({ comfyPage }) => {
+    const textarea = getFirstMultilineStringWidget(comfyPage)
+    const vueContextMenu = comfyPage.page.locator('.p-contextmenu')
+
+    await textarea.focus()
+    await textarea.click({ button: 'right' })
+    await expect(vueContextMenu).not.toBeVisible()
+    await textarea.blur()
+
+    await textarea.click({ button: 'right' })
+    await expect(vueContextMenu).toBeVisible()
+  })
 })

knip.config.ts

@@ -27,6 +27,17 @@ const config: KnipConfig = {
     },
     'packages/ingest-types': {
       project: ['src/**/*.{js,ts}']
+    },
+    'apps/website': {
+      entry: [
+        'src/pages/**/*.astro',
+        'src/layouts/**/*.astro',
+        'src/components/**/*.vue',
+        'src/styles/global.css',
+        'astro.config.ts'
+      ],
+      project: ['src/**/*.{astro,vue,ts}', '*.{js,ts,mjs}'],
+      ignoreDependencies: ['@comfyorg/design-system', '@vercel/analytics']
     }
   },
   ignoreBinaries: ['python3'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.3",
+  "version": "1.43.4",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

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

@@ -0,0 +1,46 @@
+/*
+ * Design System Base — Brand tokens + fonts only.
+ * For marketing sites that don't use PrimeVue or the node editor.
+ * Import the full style.css instead for the desktop app.
+ */
+
+@import './fonts.css';
+
+@theme {
+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
+  /* Palette Colors */
+  --color-charcoal-100: #55565e;
+  --color-charcoal-200: #494a50;
+  --color-charcoal-300: #3c3d42;
+  --color-charcoal-400: #313235;
+  --color-charcoal-500: #2d2e32;
+  --color-charcoal-600: #262729;
+  --color-charcoal-700: #202121;
+  --color-charcoal-800: #171718;
+
+  --color-neutral-550: #636363;
+
+  --color-ash-300: #bbbbbb;
+  --color-ash-500: #828282;
+  --color-ash-800: #444444;
+
+  --color-smoke-100: #f3f3f3;
+  --color-smoke-200: #e9e9e9;
+  --color-smoke-300: #e1e1e1;
+  --color-smoke-400: #d9d9d9;
+  --color-smoke-500: #c5c5c5;
+  --color-smoke-600: #b4b4b4;
+  --color-smoke-700: #a0a0a0;
+  --color-smoke-800: #8a8a8a;
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Brand Colors */
+  --color-electric-400: #f0ff41;
+  --color-sapphire-700: #172dd7;
+  --color-brand-yellow: var(--color-electric-400);
+  --color-brand-blue: var(--color-sapphire-700);
+}

packages/ingest-types/src/index.ts

@@ -16,6 +16,7 @@ export type {
   AssetCreated,
   AssetCreatedWritable,
   AssetDownloadResponse,
+  AssetInfo,
   AssetMetadataResponse,
   AssetTagHistogramResponse,
   AssetUpdated,
@@ -38,6 +39,11 @@ export type {
   CheckAssetByHashError,
   CheckAssetByHashErrors,
   CheckAssetByHashResponses,
+  CheckHubUsernameData,
+  CheckHubUsernameError,
+  CheckHubUsernameErrors,
+  CheckHubUsernameResponse,
+  CheckHubUsernameResponses,
   ClaimInviteCodeData,
   ClaimInviteCodeError,
   ClaimInviteCodeErrors,
@@ -63,6 +69,17 @@ export type {
   CreateDeletionRequestError,
   CreateDeletionRequestErrors,
   CreateDeletionRequestResponses,
+  CreateHubAssetUploadUrlData,
+  CreateHubAssetUploadUrlError,
+  CreateHubAssetUploadUrlErrors,
+  CreateHubAssetUploadUrlResponse,
+  CreateHubAssetUploadUrlResponses,
+  CreateHubProfileData,
+  CreateHubProfileError,
+  CreateHubProfileErrors,
+  CreateHubProfileRequest,
+  CreateHubProfileResponse,
+  CreateHubProfileResponses,
   CreateInviteRequest,
   CreateSecretData,
   CreateSecretError,
@@ -111,6 +128,11 @@ export type {
   DeleteAssetErrors,
   DeleteAssetResponse,
   DeleteAssetResponses,
+  DeleteHubWorkflowData,
+  DeleteHubWorkflowError,
+  DeleteHubWorkflowErrors,
+  DeleteHubWorkflowResponse,
+  DeleteHubWorkflowResponses,
   DeleteSecretData,
   DeleteSecretError,
   DeleteSecretErrors,
@@ -212,6 +234,16 @@ export type {
   GetGlobalSubgraphsErrors,
   GetGlobalSubgraphsResponse,
   GetGlobalSubgraphsResponses,
+  GetHubProfileByUsernameData,
+  GetHubProfileByUsernameError,
+  GetHubProfileByUsernameErrors,
+  GetHubProfileByUsernameResponse,
+  GetHubProfileByUsernameResponses,
+  GetHubWorkflowData,
+  GetHubWorkflowError,
+  GetHubWorkflowErrors,
+  GetHubWorkflowResponse,
+  GetHubWorkflowResponses,
   GetInviteCodeStatusData,
   GetInviteCodeStatusError,
   GetInviteCodeStatusErrors,
@@ -250,11 +282,21 @@ export type {
   GetModelsInFolderErrors,
   GetModelsInFolderResponse,
   GetModelsInFolderResponses,
+  GetMyHubProfileData,
+  GetMyHubProfileError,
+  GetMyHubProfileErrors,
+  GetMyHubProfileResponse,
+  GetMyHubProfileResponses,
   GetPaymentPortalData,
   GetPaymentPortalError,
   GetPaymentPortalErrors,
   GetPaymentPortalResponse,
   GetPaymentPortalResponses,
+  GetPublishedWorkflowData,
+  GetPublishedWorkflowError,
+  GetPublishedWorkflowErrors,
+  GetPublishedWorkflowResponse,
+  GetPublishedWorkflowResponses,
   GetRawLogsData,
   GetRawLogsError,
   GetRawLogsErrors,
@@ -305,11 +347,30 @@ export type {
   GetWorkspaceResponses,
   GlobalSubgraphData,
   GlobalSubgraphInfo,
+  HubAssetUploadUrlRequest,
+  HubAssetUploadUrlResponse,
+  HubLabelInfo,
+  HubLabelListResponse,
+  HubProfile,
+  HubProfileSummary,
+  HubUsernameCheckResponse,
+  HubWorkflowDetail,
+  HubWorkflowListResponse,
+  HubWorkflowSummary,
+  HubWorkflowTemplateEntry,
+  ImportPublishedAssetsData,
+  ImportPublishedAssetsError,
+  ImportPublishedAssetsErrors,
+  ImportPublishedAssetsRequest,
+  ImportPublishedAssetsResponse,
+  ImportPublishedAssetsResponse2,
+  ImportPublishedAssetsResponses,
   InviteCodeClaimResponse,
   InviteCodeStatusResponse,
   JobStatusResponse,
   JwkKey,
   JwksResponse,
+  LabelRef,
   LeaveWorkspaceData,
   LeaveWorkspaceError,
   LeaveWorkspaceErrors,
@@ -322,6 +383,21 @@ export type {
   ListAssetsResponse2,
   ListAssetsResponses,
   ListAssetsResponseWritable,
+  ListHubLabelsData,
+  ListHubLabelsError,
+  ListHubLabelsErrors,
+  ListHubLabelsResponse,
+  ListHubLabelsResponses,
+  ListHubWorkflowIndexData,
+  ListHubWorkflowIndexError,
+  ListHubWorkflowIndexErrors,
+  ListHubWorkflowIndexResponse,
+  ListHubWorkflowIndexResponses,
+  ListHubWorkflowsData,
+  ListHubWorkflowsError,
+  ListHubWorkflowsErrors,
+  ListHubWorkflowsResponse,
+  ListHubWorkflowsResponses,
   ListInvitesResponse,
   ListMembersResponse,
   ListSecretsData,
@@ -376,6 +452,11 @@ export type {
   PlanAvailability,
   PlanAvailabilityReason,
   PlanSeatSummary,
+  PostAssetsFromWorkflowData,
+  PostAssetsFromWorkflowError,
+  PostAssetsFromWorkflowErrors,
+  PostAssetsFromWorkflowResponse,
+  PostAssetsFromWorkflowResponses,
   PreviewPlanInfo,
   PreviewSubscribeData,
   PreviewSubscribeError,
@@ -384,6 +465,13 @@ export type {
   PreviewSubscribeResponse,
   PreviewSubscribeResponse2,
   PreviewSubscribeResponses,
+  PublishedWorkflowDetail,
+  PublishHubWorkflowData,
+  PublishHubWorkflowError,
+  PublishHubWorkflowErrors,
+  PublishHubWorkflowRequest,
+  PublishHubWorkflowResponse,
+  PublishHubWorkflowResponses,
   RawLogsResponse,
   RemoveAssetTagsData,
   RemoveAssetTagsError,
@@ -455,6 +543,12 @@ export type {
   UpdateAssetTagsErrors,
   UpdateAssetTagsResponse,
   UpdateAssetTagsResponses,
+  UpdateHubProfileData,
+  UpdateHubProfileError,
+  UpdateHubProfileErrors,
+  UpdateHubProfileRequest,
+  UpdateHubProfileResponse,
+  UpdateHubProfileResponses,
   UpdateSecretData,
   UpdateSecretError,
   UpdateSecretErrors,
@@ -486,6 +580,8 @@ export type {
   UserResponse,
   ValidationError,
   ValidationResult,
+  WorkflowApiAssetsRequest,
+  WorkflowApiAssetsResponse,
   WorkflowForkedFrom,
   WorkflowListResponse,
   WorkflowResponse,

packages/ingest-types/src/zod.gen.ts

@@ -2,6 +2,207 @@
 
 import { z } from 'zod'
 
+export const zHubUsernameCheckResponse = z.object({
+  username: z.string(),
+  available: z.boolean(),
+  suggestions: z.array(z.string()).optional(),
+  validation_error: z.string().optional()
+})
+
+export const zHubAssetUploadUrlResponse = z.object({
+  upload_url: z.string(),
+  public_url: z.string(),
+  token: z.string()
+})
+
+export const zHubAssetUploadUrlRequest = z.object({
+  filename: z.string(),
+  content_type: z.string()
+})
+
+export const zPublishHubWorkflowRequest = z.object({
+  username: z.string(),
+  name: z.string(),
+  workflow_filename: z.string(),
+  asset_ids: z.array(z.string()),
+  description: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+  models: z.array(z.string()).optional(),
+  custom_nodes: z.array(z.string()).optional(),
+  tutorial_url: z.string().optional(),
+  metadata: z.record(z.unknown()).optional(),
+  thumbnail_type: z.enum(['image', 'video', 'image_comparison']).optional(),
+  thumbnail_token_or_url: z.string().optional(),
+  thumbnail_comparison_token_or_url: z.string().optional(),
+  sample_image_tokens_or_urls: z.array(z.string()).optional()
+})
+
+export const zAssetInfo = z.object({
+  id: z.string(),
+  name: z.string(),
+  preview_url: z.string(),
+  storage_url: z.string(),
+  model: z.boolean(),
+  public: z.boolean(),
+  in_library: z.boolean()
+})
+
+export const zHubProfileSummary = z.object({
+  username: z.string(),
+  display_name: z.string().optional(),
+  avatar_url: z.string().optional()
+})
+
+export const zLabelRef = z.object({
+  name: z.string(),
+  display_name: z.string()
+})
+
+export const zHubWorkflowDetail = z.object({
+  share_id: z.string(),
+  workflow_id: z.string(),
+  name: z.string(),
+  description: z.string().optional(),
+  tags: z.array(zLabelRef).optional(),
+  thumbnail_type: z.enum(['image', 'video', 'image_comparison']).optional(),
+  thumbnail_url: z.string().optional(),
+  thumbnail_comparison_url: z.string().optional(),
+  models: z.array(zLabelRef).optional(),
+  custom_nodes: z.array(zLabelRef).optional(),
+  tutorial_url: z.string().optional(),
+  metadata: z.record(z.unknown()).optional(),
+  sample_image_urls: z.array(z.string()).optional(),
+  publish_time: z.string().datetime().nullish(),
+  workflow_json: z.record(z.unknown()),
+  assets: z.array(zAssetInfo),
+  profile: zHubProfileSummary
+})
+
+export const zHubWorkflowSummary = z.object({
+  share_id: z.string(),
+  name: z.string(),
+  description: z.string().optional(),
+  tags: z.array(zLabelRef).optional(),
+  models: z.array(zLabelRef).optional(),
+  custom_nodes: z.array(zLabelRef).optional(),
+  thumbnail_type: z.enum(['image', 'video', 'image_comparison']).optional(),
+  thumbnail_url: z.string().optional(),
+  thumbnail_comparison_url: z.string().optional(),
+  publish_time: z.string().datetime().nullish(),
+  profile: zHubProfileSummary,
+  metadata: z.record(z.unknown()).optional(),
+  tutorial_url: z.string().optional(),
+  sample_image_urls: z.array(z.string()).optional()
+})
+
+export const zHubWorkflowListResponse = z.object({
+  workflows: z.array(z.union([zHubWorkflowSummary, zHubWorkflowDetail])),
+  next_cursor: z.string().optional()
+})
+
+export const zHubLabelInfo = z.object({
+  name: z.string(),
+  display_name: z.string(),
+  description: z.string().optional(),
+  type: z.enum(['tag', 'model', 'custom_node'])
+})
+
+export const zHubLabelListResponse = z.object({
+  labels: z.array(zHubLabelInfo)
+})
+
+export const zHubWorkflowTemplateEntry = z.object({
+  name: z.string(),
+  title: z.string(),
+  description: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+  models: z.array(z.string()).optional(),
+  requiresCustomNodes: z.array(z.string()).optional(),
+  thumbnailVariant: z.string().optional(),
+  mediaType: z.string().optional(),
+  mediaSubtype: z.string().optional(),
+  size: z.number().optional(),
+  vram: z.number().optional(),
+  openSource: z.boolean().optional(),
+  profile: zHubProfileSummary.optional(),
+  tutorialUrl: z.string().optional(),
+  logos: z.array(z.record(z.unknown())).optional(),
+  date: z.string().optional(),
+  io: z
+    .object({
+      inputs: z.array(z.record(z.unknown())).optional(),
+      outputs: z.array(z.record(z.unknown())).optional()
+    })
+    .optional(),
+  includeOnDistributions: z.array(z.string()).optional(),
+  thumbnailUrl: z.string().optional(),
+  thumbnailComparisonUrl: z.string().optional(),
+  shareId: z.string().optional(),
+  extendedDescription: z.string().optional(),
+  metaDescription: z.string().optional(),
+  howToUse: z.array(z.string()).optional(),
+  suggestedUseCases: z.array(z.string()).optional(),
+  faqItems: z
+    .array(
+      z.object({
+        question: z.string(),
+        answer: z.string()
+      })
+    )
+    .optional(),
+  contentTemplate: z.string().optional()
+})
+
+export const zUpdateHubProfileRequest = z.object({
+  display_name: z.string().optional(),
+  description: z.string().optional(),
+  avatar_token: z.string().nullish(),
+  website_urls: z.array(z.string()).optional()
+})
+
+export const zCreateHubProfileRequest = z.object({
+  workspace_id: z.string(),
+  username: z.string(),
+  display_name: z.string().optional(),
+  description: z.string().optional(),
+  avatar_token: z.string().optional(),
+  website_urls: z.array(z.string()).optional()
+})
+
+export const zHubProfile = z.object({
+  username: z.string(),
+  display_name: z.string().optional(),
+  description: z.string().optional(),
+  avatar_url: z.string().optional(),
+  website_urls: z.array(z.string()).optional()
+})
+
+export const zImportPublishedAssetsResponse = z.object({
+  assets: z.array(zAssetInfo)
+})
+
+export const zImportPublishedAssetsRequest = z.object({
+  published_asset_ids: z.array(z.string())
+})
+
+export const zPublishedWorkflowDetail = z.object({
+  share_id: z.string(),
+  workflow_id: z.string(),
+  name: z.string(),
+  listed: z.boolean(),
+  publish_time: z.string().datetime().nullish(),
+  workflow_json: z.record(z.unknown()),
+  assets: z.array(zAssetInfo)
+})
+
+export const zWorkflowApiAssetsResponse = z.object({
+  assets: z.array(zAssetInfo)
+})
+
+export const zWorkflowApiAssetsRequest = z.object({
+  workflow_api_json: z.record(z.unknown())
+})
+
 export const zForkWorkflowRequest = z.object({
   source_version: z.number().int(),
   name: z.string().optional()
@@ -992,7 +1193,9 @@ export const zListAssetsData = z.object({
         .enum(['name', 'created_at', 'updated_at', 'size', 'last_access_time'])
         .optional(),
       order: z.enum(['asc', 'desc']).optional(),
-      include_public: z.boolean().optional().default(true)
+      job_ids: z.array(z.string().uuid()).optional(),
+      include_public: z.boolean().optional().default(true),
+      asset_hash: z.string().optional()
     })
     .optional()
 })
@@ -1234,6 +1437,28 @@ export const zCheckAssetByHashData = z.object({
   query: z.never().optional()
 })
 
+export const zPostAssetsFromWorkflowData = z.object({
+  body: zWorkflowApiAssetsRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Success
+ */
+export const zPostAssetsFromWorkflowResponse = zWorkflowApiAssetsResponse
+
+export const zImportPublishedAssetsData = z.object({
+  body: zImportPublishedAssetsRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Successfully imported assets
+ */
+export const zImportPublishedAssetsResponse2 = zImportPublishedAssetsResponse
+
 export const zListSecretsData = z.object({
   body: z.never().optional(),
   path: z.never().optional(),
@@ -1928,3 +2153,171 @@ export const zForkWorkflowData = z.object({
  * Workflow forked successfully
  */
 export const zForkWorkflowResponse = zWorkflowResponse
+
+export const zCreateHubProfileData = z.object({
+  body: zCreateHubProfileRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Hub profile created
+ */
+export const zCreateHubProfileResponse = zHubProfile
+
+export const zGetMyHubProfileData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Hub profile
+ */
+export const zGetMyHubProfileResponse = zHubProfile
+
+export const zCheckHubUsernameData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.object({
+    username: z.string()
+  })
+})
+
+/**
+ * Username availability result
+ */
+export const zCheckHubUsernameResponse = zHubUsernameCheckResponse
+
+export const zGetHubProfileByUsernameData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    username: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Hub profile
+ */
+export const zGetHubProfileByUsernameResponse = zHubProfile
+
+export const zUpdateHubProfileData = z.object({
+  body: zUpdateHubProfileRequest,
+  path: z.object({
+    username: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Hub profile updated
+ */
+export const zUpdateHubProfileResponse = zHubProfile
+
+export const zCreateHubAssetUploadUrlData = z.object({
+  body: zHubAssetUploadUrlRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Presigned upload URL and token
+ */
+export const zCreateHubAssetUploadUrlResponse = zHubAssetUploadUrlResponse
+
+export const zListHubLabelsData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      type: z.enum(['tag', 'model', 'custom_node']).optional()
+    })
+    .optional()
+})
+
+/**
+ * List of labels
+ */
+export const zListHubLabelsResponse = zHubLabelListResponse
+
+export const zListHubWorkflowsData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z
+    .object({
+      cursor: z.string().optional(),
+      limit: z.number().int().gte(1).lte(100).optional().default(20),
+      search: z.string().optional(),
+      tag: z.string().optional(),
+      username: z.string().optional(),
+      detail: z.boolean().optional().default(false)
+    })
+    .optional()
+})
+
+/**
+ * Paginated list of hub workflows
+ */
+export const zListHubWorkflowsResponse = zHubWorkflowListResponse
+
+export const zPublishHubWorkflowData = z.object({
+  body: zPublishHubWorkflowRequest,
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * Workflow published to hub
+ */
+export const zPublishHubWorkflowResponse = zHubWorkflowDetail
+
+export const zListHubWorkflowIndexData = z.object({
+  body: z.never().optional(),
+  path: z.never().optional(),
+  query: z.never().optional()
+})
+
+/**
+ * List of hub workflow template entries
+ */
+export const zListHubWorkflowIndexResponse = z.array(zHubWorkflowTemplateEntry)
+
+export const zDeleteHubWorkflowData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    share_id: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Successfully unpublished
+ */
+export const zDeleteHubWorkflowResponse = z.void()
+
+export const zGetHubWorkflowData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    share_id: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Hub workflow detail
+ */
+export const zGetHubWorkflowResponse = zHubWorkflowDetail
+
+export const zGetPublishedWorkflowData = z.object({
+  body: z.never().optional(),
+  path: z.object({
+    share_id: z.string()
+  }),
+  query: z.never().optional()
+})
+
+/**
+ * Published workflow details with asset statuses
+ */
+export const zGetPublishedWorkflowResponse = zPublishedWorkflowDetail

pnpm-workspace.yaml

@@ -4,6 +4,7 @@ packages:
 
 catalog:
   '@alloc/quick-lru': ^5.2.0
+  '@astrojs/vue': ^5.0.0
   '@comfyorg/comfyui-electron-types': 0.6.2
   '@eslint/js': ^9.39.1
   '@formkit/auto-animate': ^0.9.0
@@ -50,6 +51,7 @@ catalog:
   '@types/node': ^24.1.0
   '@types/semver': ^7.7.0
   '@types/three': ^0.169.0
+  '@vercel/analytics': ^2.0.1
   '@vitejs/plugin-vue': ^6.0.0
   '@vitest/coverage-v8': ^4.0.16
   '@vitest/ui': ^4.0.16
@@ -58,6 +60,7 @@ catalog:
   '@vueuse/integrations': ^14.2.0
   '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
+  astro: ^5.10.0
   axios: ^1.13.5
   cross-env: ^10.1.0
   cva: 1.0.0-beta.4

src/App.vue

@@ -9,13 +9,10 @@ import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
 import { computed, onMounted, onUnmounted, watch } from 'vue'
 
-import { useI18n } from 'vue-i18n'
-
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useToastStore } from '@/platform/updates/common/toastStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI } from '@/utils/envUtil'
@@ -23,7 +20,6 @@ import { parsePreloadError } from '@/utils/preloadErrorUtil'
 import { useDialogService } from '@/services/dialogService'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
-const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 app.extensionManager = useWorkspaceStore()
 
@@ -98,12 +94,17 @@ onMounted(() => {
         }
       })
     }
-    useToastStore().add({
-      severity: 'error',
-      summary: t('g.preloadErrorTitle'),
-      detail: t('g.preloadError'),
-      life: 10000
-    })
+    // Disabled: Third-party custom node extensions frequently trigger this toast
+    // (e.g., bare "vue" imports, wrong relative paths to scripts/app.js, missing
+    // core dependencies). These are plugin bugs, not ComfyUI core failures, but
+    // the generic error message alarms users and offers no actionable guidance.
+    // The console.error above still logs the details for developers to debug.
+    // useToastStore().add({
+    //   severity: 'error',
+    //   summary: t('g.preloadErrorTitle'),
+    //   detail: t('g.preloadError'),
+    //   life: 10000
+    // })
   })
 
   // Capture resource load failures (CSS, scripts) in non-localhost distributions

src/assets/palettes/arc.json

@@ -34,9 +34,7 @@
       "CLEAR_BACKGROUND_COLOR": "#2b2f38",
       "NODE_TITLE_COLOR": "#b2b7bd",
       "NODE_SELECTED_TITLE_COLOR": "#FFF",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#AAA",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#2b2f38",
       "NODE_DEFAULT_BGCOLOR": "#242730",
       "NODE_DEFAULT_BOXCOLOR": "#6e7581",
@@ -45,7 +43,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 22,
       "WIDGET_BGCOLOR": "#2b2f38",
       "WIDGET_OUTLINE_COLOR": "#6e7581",
       "WIDGET_TEXT_COLOR": "#DDD",

src/assets/palettes/dark.json

@@ -25,10 +25,8 @@
       "CLEAR_BACKGROUND_COLOR": "#141414",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#FFF",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#AAA",
       "NODE_TEXT_HIGHLIGHT_COLOR": "#FFF",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#333",
       "NODE_DEFAULT_BGCOLOR": "#353535",
       "NODE_DEFAULT_BOXCOLOR": "#666",
@@ -37,7 +35,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#222",
       "WIDGET_OUTLINE_COLOR": "#666",
       "WIDGET_TEXT_COLOR": "#DDD",

src/assets/palettes/github.json

@@ -34,9 +34,7 @@
       "CLEAR_BACKGROUND_COLOR": "#040506",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#bcc2c8",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#161b22",
       "NODE_DEFAULT_BGCOLOR": "#13171d",
       "NODE_DEFAULT_BOXCOLOR": "#30363d",
@@ -45,7 +43,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#161b22",
       "WIDGET_OUTLINE_COLOR": "#30363d",
       "WIDGET_TEXT_COLOR": "#bcc2c8",

src/assets/palettes/light.json

@@ -26,10 +26,8 @@
       "CLEAR_BACKGROUND_COLOR": "lightgray",
       "NODE_TITLE_COLOR": "#222",
       "NODE_SELECTED_TITLE_COLOR": "#000",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#444",
       "NODE_TEXT_HIGHLIGHT_COLOR": "#1e293b",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#F7F7F7",
       "NODE_DEFAULT_BGCOLOR": "#F5F5F5",
       "NODE_DEFAULT_BOXCOLOR": "#CCC",
@@ -38,7 +36,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.1)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#D4D4D4",
       "WIDGET_OUTLINE_COLOR": "#999",
       "WIDGET_TEXT_COLOR": "#222",

src/assets/palettes/nord.json

@@ -34,9 +34,7 @@
       "CLEAR_BACKGROUND_COLOR": "#212732",
       "NODE_TITLE_COLOR": "#999",
       "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#bcc2c8",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#2e3440",
       "NODE_DEFAULT_BGCOLOR": "#161b22",
       "NODE_DEFAULT_BOXCOLOR": "#545d70",
@@ -45,7 +43,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#2e3440",
       "WIDGET_OUTLINE_COLOR": "#545d70",
       "WIDGET_TEXT_COLOR": "#bcc2c8",

src/assets/palettes/solarized.json

@@ -19,9 +19,7 @@
     "litegraph_base": {
       "NODE_TITLE_COLOR": "#fdf6e3",
       "NODE_SELECTED_TITLE_COLOR": "#A9D400",
-      "NODE_TEXT_SIZE": 14,
       "NODE_TEXT_COLOR": "#657b83",
-      "NODE_SUBTEXT_SIZE": 12,
       "NODE_DEFAULT_COLOR": "#094656",
       "NODE_DEFAULT_BGCOLOR": "#073642",
       "NODE_DEFAULT_BOXCOLOR": "#839496",
@@ -30,7 +28,6 @@
       "NODE_BYPASS_BGCOLOR": "#FF00FF",
       "NODE_ERROR_COLOUR": "#E00",
       "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
-      "DEFAULT_GROUP_FONT": 24,
       "WIDGET_BGCOLOR": "#002b36",
       "WIDGET_OUTLINE_COLOR": "#839496",
       "WIDGET_TEXT_COLOR": "#fdf6e3",

src/components/dialog/content/error/FindIssueButton.vue

@@ -19,10 +19,7 @@ const props = defineProps<{
 
 const queryString = computed(() => props.errorMessage + ' is:issue')
 
-/**
- * Open GitHub issues search and track telemetry.
- */
-const openGitHubIssues = () => {
+function openGitHubIssues() {
   useTelemetry()?.trackUiButtonClicked({
     button_id: 'error_dialog_find_existing_issues_clicked'
   })

src/components/error/ErrorOverlay.vue

@@ -49,7 +49,12 @@
           <Button variant="muted-textonly" size="unset" @click="dismiss">
             {{ t('g.dismiss') }}
           </Button>
-          <Button variant="secondary" size="lg" @click="seeErrors">
+          <Button
+            variant="secondary"
+            size="lg"
+            data-testid="error-overlay-see-errors"
+            @click="seeErrors"
+          >
             {{
               appMode ? t('linearMode.error.goto') : t('errorOverlay.seeErrors')
             }}

src/components/graph/TitleEditor.vue

@@ -84,7 +84,9 @@ watch(
         pos: group.pos,
         size: [group.size[0], group.titleHeight]
       })
-      inputFontStyle.value = { fontSize: `${group.font_size * scale}px` }
+      inputFontStyle.value = {
+        fontSize: `${LiteGraph.GROUP_TEXT_SIZE * scale}px`
+      }
     } else if (target instanceof LGraphNode) {
       const node = target
       const [x, y] = node.getBounding()

src/components/input/MultiSelect.test.ts

@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import MultiSelect from './MultiSelect.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: {
+        multiSelectDropdown: 'Multi-select dropdown',
+        noResultsFound: 'No results found',
+        search: 'Search',
+        clearAll: 'Clear all',
+        itemsSelected: 'Items selected'
+      }
+    }
+  }
+})
+
+describe('MultiSelect', () => {
+  function createWrapper() {
+    return mount(MultiSelect, {
+      attachTo: document.body,
+      global: {
+        plugins: [i18n]
+      },
+      props: {
+        modelValue: [],
+        label: 'Category',
+        options: [
+          { name: 'One', value: 'one' },
+          { name: 'Two', value: 'two' }
+        ]
+      }
+    })
+  }
+
+  it('keeps open-state border styling available while the dropdown is open', async () => {
+    const wrapper = createWrapper()
+
+    const trigger = wrapper.get('button[aria-haspopup="listbox"]')
+
+    expect(trigger.classes()).toContain(
+      'data-[state=open]:border-node-component-border'
+    )
+    expect(trigger.attributes('aria-expanded')).toBe('false')
+
+    await trigger.trigger('click')
+    await nextTick()
+
+    expect(trigger.attributes('aria-expanded')).toBe('true')
+    expect(trigger.attributes('data-state')).toBe('open')
+
+    wrapper.unmount()
+  })
+})

src/components/input/MultiSelect.vue

@@ -1,207 +1,215 @@
 <template>
-  <!--
-    Note: Unlike SingleSelect, we don't need an explicit options prop because:
-    1. Our value template only shows a static label (not dynamic based on selection)
-    2. We display a count badge instead of actual selected labels
-    3. All PrimeVue props (including options) are passed via v-bind="$attrs"
-    option-label="name" is required because our option template directly accesses option.name
-    max-selected-labels="0" is required to show count badge instead of selected item labels
-  -->
-  <MultiSelect
+  <ComboboxRoot
     v-model="selectedItems"
-    v-bind="{ ...$attrs, options: filteredOptions }"
-    option-label="name"
-    unstyled
-    :max-selected-labels="0"
-    :pt="{
-      root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
-        class: cn(
-          'relative inline-flex cursor-pointer select-none',
-          size === 'md' ? 'h-8' : 'h-10',
-          'rounded-lg bg-secondary-background text-base-foreground',
-          'transition-all duration-200 ease-in-out',
-          'hover:bg-secondary-background-hover',
-          'border-[2.5px] border-solid',
-          selectedCount > 0 ? 'border-base-foreground' : 'border-transparent',
-          'focus-within:border-base-foreground',
-          props.disabled &&
-            'cursor-default opacity-30 hover:bg-secondary-background'
-        )
-      }),
-      labelContainer: {
-        class: cn(
-          'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
-          size === 'md' ? 'pl-3' : 'pl-4'
-        )
-      },
-      label: {
-        class: 'p-0'
-      },
-      dropdown: {
-        class: 'flex shrink-0 cursor-pointer items-center justify-center px-3'
-      },
-      header: () => ({
-        class:
-          showSearchBox || showSelectedCount || showClearButton
-            ? 'block'
-            : 'hidden'
-      }),
-      // Overlay & list visuals unchanged
-      overlay: {
-        class: cn(
-          'mt-2 rounded-lg p-2',
-          'bg-base-background',
-          'text-base-foreground',
-          'border border-solid border-border-default'
-        )
-      },
-      listContainer: () => ({
-        style: { maxHeight: `min(${listMaxHeight}, 50vh)` },
-        class: 'scrollbar-custom'
-      }),
-      list: {
-        class: 'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-      },
-      // Option row hover and focus tone
-      option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
-        class: cn(
-          'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2',
-          'hover:bg-secondary-background-hover',
-          // Add focus/highlight state for keyboard navigation
-          context?.focused &&
-            'bg-secondary-background-selected hover:bg-secondary-background-selected'
-        )
-      }),
-      // Hide built-in checkboxes entirely via PT (no :deep)
-      pcHeaderCheckbox: {
-        root: { class: 'hidden' },
-        style: { display: 'none' }
-      },
-      pcOptionCheckbox: {
-        root: { class: 'hidden' },
-        style: { display: 'none' }
-      },
-      emptyMessage: {
-        class: 'px-3 pb-4 text-sm text-muted-foreground'
-      }
-    }"
-    :aria-label="label || t('g.multiSelectDropdown')"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
+    multiple
+    by="value"
+    :disabled
+    ignore-filter
+    :reset-search-term-on-select="false"
   >
-    <template
-      v-if="showSearchBox || showSelectedCount || showClearButton"
-      #header
-    >
-      <div class="flex flex-col px-2 pt-2 pb-0">
-        <SearchInput
-          v-if="showSearchBox"
-          v-model="searchQuery"
-          :class="showSelectedCount || showClearButton ? 'mb-2' : ''"
-          :placeholder="searchPlaceholder"
-          size="sm"
-        />
-        <div
-          v-if="showSelectedCount || showClearButton"
-          class="mt-2 flex items-center justify-between"
-        >
-          <span
-            v-if="showSelectedCount"
-            class="px-1 text-sm text-base-foreground"
-          >
-            {{
-              selectedCount > 0
-                ? $t('g.itemsSelected', { selectedCount })
-                : $t('g.itemSelected', { selectedCount })
-            }}
-          </span>
-          <Button
-            v-if="showClearButton"
-            variant="textonly"
-            size="md"
-            @click.stop="selectedItems = []"
-          >
-            {{ $t('g.clearAll') }}
-          </Button>
-        </div>
-        <div class="my-4 h-px bg-border-default"></div>
-      </div>
-    </template>
-
-    <!-- Trigger value (keep text scale identical) -->
-    <template #value>
-      <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
-        {{ label }}
-      </span>
-      <span
-        v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
-      >
-        {{ selectedCount }}
-      </span>
-    </template>
-
-    <!-- Chevron size identical to current -->
-    <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
-    </template>
-
-    <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->
-    <template #option="slotProps">
-      <div
-        role="button"
-        class="flex cursor-pointer items-center gap-2"
-        :style="popoverStyle"
+    <ComboboxAnchor as-child>
+      <ComboboxTrigger
+        v-bind="$attrs"
+        :aria-label="label || t('g.multiSelectDropdown')"
+        :class="
+          cn(
+            'relative inline-flex cursor-pointer items-center select-none',
+            size === 'md' ? 'h-8' : 'h-10',
+            'rounded-lg bg-secondary-background text-base-foreground',
+            'transition-all duration-200 ease-in-out',
+            'hover:bg-secondary-background-hover',
+            'border-[2.5px] border-solid border-transparent',
+            selectedCount > 0
+              ? 'border-base-foreground'
+              : 'focus-visible:border-node-component-border data-[state=open]:border-node-component-border',
+            disabled &&
+              'cursor-default opacity-30 hover:bg-secondary-background'
+          )
+        "
       >
         <div
-          class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
           :class="
-            slotProps.selected
-              ? 'bg-primary-background'
-              : 'bg-secondary-background'
+            cn(
+              'flex flex-1 items-center overflow-hidden py-2 whitespace-nowrap',
+              size === 'md' ? 'pl-3' : 'pl-4'
+            )
           "
         >
-          <i
-            v-if="slotProps.selected"
-            class="text-bold icon-[lucide--check] text-xs text-base-foreground"
-          />
+          <span :class="size === 'md' ? 'text-xs' : 'text-sm'">
+            {{ label }}
+          </span>
+          <span
+            v-if="selectedCount > 0"
+            class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-base-foreground text-xs font-semibold text-base-background"
+          >
+            {{ selectedCount }}
+          </span>
         </div>
-        <span>
-          {{ slotProps.option.name }}
-        </span>
-      </div>
-    </template>
-  </MultiSelect>
+        <div
+          class="flex shrink-0 cursor-pointer items-center justify-center px-3"
+        >
+          <i class="icon-[lucide--chevron-down] text-muted-foreground" />
+        </div>
+      </ComboboxTrigger>
+    </ComboboxAnchor>
+
+    <ComboboxPortal>
+      <ComboboxContent
+        position="popper"
+        :side-offset="8"
+        align="start"
+        :style="popoverStyle"
+        :class="
+          cn(
+            'z-3000 overflow-hidden',
+            'rounded-lg p-2',
+            'bg-base-background text-base-foreground',
+            'border border-solid border-border-default',
+            'shadow-md',
+            'data-[state=closed]:animate-out data-[state=open]:animate-in',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2'
+          )
+        "
+        @focus-outside="preventFocusDismiss"
+      >
+        <div
+          v-if="showSearchBox || showSelectedCount || showClearButton"
+          class="flex flex-col px-2 pt-2 pb-0"
+        >
+          <div
+            v-if="showSearchBox"
+            :class="
+              cn(
+                'flex items-center gap-2 rounded-lg border border-solid border-border-default px-3 py-1.5',
+                (showSelectedCount || showClearButton) && 'mb-2'
+              )
+            "
+          >
+            <i
+              class="icon-[lucide--search] shrink-0 text-sm text-muted-foreground"
+            />
+            <ComboboxInput
+              v-model="searchQuery"
+              :placeholder="searchPlaceholder ?? t('g.search')"
+              class="w-full border-none bg-transparent text-sm outline-none"
+            />
+          </div>
+          <div
+            v-if="showSelectedCount || showClearButton"
+            class="mt-2 flex items-center justify-between"
+          >
+            <span
+              v-if="showSelectedCount"
+              class="px-1 text-sm text-base-foreground"
+            >
+              {{ $t('g.itemsSelected', { count: selectedCount }) }}
+            </span>
+            <Button
+              v-if="showClearButton"
+              variant="textonly"
+              size="md"
+              @click.stop="selectedItems = []"
+            >
+              {{ $t('g.clearAll') }}
+            </Button>
+          </div>
+          <div class="my-4 h-px bg-border-default" />
+        </div>
+
+        <ComboboxViewport
+          :class="
+            cn(
+              'flex flex-col gap-0 p-0 text-sm',
+              'scrollbar-custom overflow-y-auto',
+              'min-w-(--reka-combobox-trigger-width)'
+            )
+          "
+          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
+        >
+          <ComboboxItem
+            v-for="opt in filteredOptions"
+            :key="opt.value"
+            :value="opt"
+            :class="
+              cn(
+                'group flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 outline-none',
+                'hover:bg-secondary-background-hover',
+                'data-highlighted:bg-secondary-background-selected data-highlighted:hover:bg-secondary-background-selected'
+              )
+            "
+          >
+            <div
+              class="flex size-4 shrink-0 items-center justify-center rounded-sm transition-all duration-200 group-data-[state=checked]:bg-primary-background group-data-[state=unchecked]:bg-secondary-background [&>span]:flex"
+            >
+              <ComboboxItemIndicator>
+                <i
+                  class="icon-[lucide--check] text-xs font-bold text-base-foreground"
+                />
+              </ComboboxItemIndicator>
+            </div>
+            <span>{{ opt.name }}</span>
+          </ComboboxItem>
+          <ComboboxEmpty class="px-3 pb-4 text-sm text-muted-foreground">
+            {{ $t('g.noResultsFound') }}
+          </ComboboxEmpty>
+        </ComboboxViewport>
+      </ComboboxContent>
+    </ComboboxPortal>
+  </ComboboxRoot>
 </template>
 
 <script setup lang="ts">
 import { useFuse } from '@vueuse/integrations/useFuse'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
-import MultiSelect from 'primevue/multiselect'
-import { computed, useAttrs } from 'vue'
+import type { FocusOutsideEvent } from 'reka-ui'
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxPortal,
+  ComboboxRoot,
+  ComboboxTrigger,
+  ComboboxViewport
+} from 'reka-ui'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import SearchInput from '@/components/ui/search-input/SearchInput.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import type { SelectOption } from './types'
 
-type Option = SelectOption
-
 defineOptions({
   inheritAttrs: false
 })
 
-interface Props {
+const {
+  label,
+  options = [],
+  size = 'lg',
+  disabled = false,
+  showSearchBox = false,
+  showSelectedCount = false,
+  showClearButton = false,
+  searchPlaceholder,
+  listMaxHeight = '28rem',
+  popoverMinWidth,
+  popoverMaxWidth
+} = defineProps<{
   /** Input label shown on the trigger button */
   label?: string
+  /** Available options */
+  options?: SelectOption[]
   /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
   size?: 'lg' | 'md'
+  /** Disable the select */
+  disabled?: boolean
   /** Show search box in the panel header */
   showSearchBox?: boolean
   /** Show selected count text in the panel header */
@@ -216,22 +224,9 @@ interface Props {
   popoverMinWidth?: string
   /** Maximum width of the popover (default: auto) */
   popoverMaxWidth?: string
-  // Note: options prop is intentionally omitted.
-  // It's passed via $attrs to maximize PrimeVue API compatibility
-}
-const {
-  label,
-  size = 'lg',
-  showSearchBox = false,
-  showSelectedCount = false,
-  showClearButton = false,
-  searchPlaceholder = 'Search...',
-  listMaxHeight = '28rem',
-  popoverMinWidth,
-  popoverMaxWidth
-} = defineProps<Props>()
+}>()
 
-const selectedItems = defineModel<Option[]>({
+const selectedItems = defineModel<SelectOption[]>({
   required: true
 })
 const searchQuery = defineModel<string>('searchQuery', { default: '' })
@@ -239,15 +234,16 @@ const searchQuery = defineModel<string>('searchQuery', { default: '' })
 const { t } = useI18n()
 const selectedCount = computed(() => selectedItems.value.length)
 
+function preventFocusDismiss(event: FocusOutsideEvent) {
+  event.preventDefault()
+}
+
 const popoverStyle = usePopoverSizing({
   minWidth: popoverMinWidth,
   maxWidth: popoverMaxWidth
 })
-const attrs = useAttrs()
-const originalOptions = computed(() => (attrs.options as Option[]) || [])
 
-// Use VueUse's useFuse for better reactivity and performance
-const fuseOptions: UseFuseOptions<Option> = {
+const fuseOptions: UseFuseOptions<SelectOption> = {
   fuseOptions: {
     keys: ['name', 'value'],
     threshold: 0.3,
@@ -256,23 +252,20 @@ const fuseOptions: UseFuseOptions<Option> = {
   matchAllWhenSearchEmpty: true
 }
 
-const { results } = useFuse(searchQuery, originalOptions, fuseOptions)
+const { results } = useFuse(searchQuery, () => options, fuseOptions)
 
-// Filter options based on search, but always include selected items
 const filteredOptions = computed(() => {
   if (!searchQuery.value || searchQuery.value.trim() === '') {
-    return originalOptions.value
+    return options
   }
 
-  // results.value already contains the search results from useFuse
   const searchResults = results.value.map(
-    (result: { item: Option }) => result.item
+    (result: { item: SelectOption }) => result.item
   )
 
-  // Include selected items that aren't in search results
   const selectedButNotInResults = selectedItems.value.filter(
     (item) =>
-      !searchResults.some((result: Option) => result.value === item.value)
+      !searchResults.some((result: SelectOption) => result.value === item.value)
   )
 
   return [...selectedButNotInResults, ...searchResults]

src/components/input/SingleSelect.vue

@@ -1,21 +1,12 @@
 <template>
-  <!--
-    Note: We explicitly pass options here (not just via $attrs) because:
-    1. Our custom value template needs options to look up labels from values
-    2. PrimeVue's value slot only provides 'value' and 'placeholder', not the selected item's label
-    3. We need to maintain the icon slot functionality in the value template
-    option-label="name" is required because our option template directly accesses option.name
-  -->
-  <Select
-    v-model="selectedItem"
-    v-bind="$attrs"
-    :options="options"
-    option-label="name"
-    option-value="value"
-    unstyled
-    :pt="{
-      root: ({ props }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: cn(
+  <SelectRoot v-model="selectedItem" :disabled>
+    <SelectTrigger
+      v-bind="$attrs"
+      :aria-label="label || t('g.singleSelectDropdown')"
+      :aria-busy="loading || undefined"
+      :aria-invalid="invalid || undefined"
+      :class="
+        cn(
           'relative inline-flex cursor-pointer items-center select-none',
           size === 'md' ? 'h-8' : 'h-10',
           'rounded-lg',
@@ -23,121 +14,107 @@
           'transition-all duration-200 ease-in-out',
           'hover:bg-secondary-background-hover',
           'border-[2.5px] border-solid',
-          invalid
-            ? 'border-destructive-background'
-            : 'border-transparent focus-within:border-node-component-border',
-          props.disabled &&
-            'cursor-default opacity-30 hover:bg-secondary-background'
+          invalid ? 'border-destructive-background' : 'border-transparent',
+          'focus:border-node-component-border focus:outline-none',
+          'disabled:cursor-default disabled:opacity-30 disabled:hover:bg-secondary-background'
         )
-      }),
-      label: {
-        class: cn(
-          'flex flex-1 items-center py-2 whitespace-nowrap outline-hidden',
-          size === 'md' ? 'pl-3' : 'pl-4'
-        )
-      },
-      dropdown: {
-        class:
-          // Right chevron touch area
-          'flex shrink-0 items-center justify-center px-3 py-2'
-      },
-      overlay: {
-        class: cn(
-          'mt-2 rounded-lg p-2',
-          'bg-base-background text-base-foreground',
-          'border border-solid border-border-default'
-        )
-      },
-      listContainer: () => ({
-        style: `max-height: min(${listMaxHeight}, 50vh)`,
-        class: 'scrollbar-custom'
-      }),
-      list: {
-        class:
-          // Same list tone/size as MultiSelect
-          'flex flex-col gap-0 p-0 m-0 list-none border-none text-sm'
-      },
-      option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
-        class: cn(
-          // Row layout
-          'flex items-center justify-between gap-3 rounded-sm px-2 py-3',
-          'hover:bg-secondary-background-hover',
-          // Add focus state for keyboard navigation
-          context.focused && 'bg-secondary-background-hover',
-          // Selected state + check icon
-          context.selected &&
-            'bg-secondary-background-selected hover:bg-secondary-background-selected'
-        )
-      }),
-      optionLabel: {
-        class: 'truncate'
-      },
-      optionGroupLabel: {
-        class: 'px-3 py-2 text-xs uppercase tracking-wide text-muted-foreground'
-      },
-      emptyMessage: {
-        class: 'px-3 py-2 text-sm text-muted-foreground'
-      }
-    }"
-    :aria-label="label || t('g.singleSelectDropdown')"
-    :aria-busy="loading || undefined"
-    :aria-invalid="invalid || undefined"
-    role="combobox"
-    :aria-expanded="false"
-    aria-haspopup="listbox"
-    :tabindex="0"
-  >
-    <!-- Trigger value -->
-    <template #value="slotProps">
+      "
+    >
       <div
         :class="
-          cn('flex items-center gap-2', size === 'md' ? 'text-xs' : 'text-sm')
+          cn(
+            'flex flex-1 items-center gap-2 overflow-hidden py-2',
+            size === 'md' ? 'pl-3 text-xs' : 'pl-4 text-sm'
+          )
         "
       >
         <i
           v-if="loading"
-          class="icon-[lucide--loader-circle] animate-spin text-muted-foreground"
+          class="icon-[lucide--loader-circle] shrink-0 animate-spin text-muted-foreground"
         />
         <slot v-else name="icon" />
-        <span
-          v-if="slotProps.value !== null && slotProps.value !== undefined"
-          class="text-base-foreground"
-        >
-          {{ getLabel(slotProps.value) }}
-        </span>
-        <span v-else class="text-base-foreground">
-          {{ label }}
-        </span>
+        <SelectValue :placeholder="label" class="truncate" />
       </div>
-    </template>
-
-    <!-- Trigger caret (hidden when loading) -->
-    <template #dropdownicon>
-      <i
-        v-if="!loading"
-        class="icon-[lucide--chevron-down] text-muted-foreground"
-      />
-    </template>
-
-    <!-- Option row -->
-    <template #option="{ option, selected }">
       <div
-        class="flex w-full items-center justify-between gap-3"
-        :style="optionStyle"
+        class="flex shrink-0 cursor-pointer items-center justify-center px-3"
       >
-        <span class="truncate">{{ option.name }}</span>
-        <i v-if="selected" class="icon-[lucide--check] text-base-foreground" />
+        <i class="icon-[lucide--chevron-down] text-muted-foreground" />
       </div>
-    </template>
-  </Select>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        position="popper"
+        :side-offset="8"
+        align="start"
+        :style="optionStyle"
+        :class="
+          cn(
+            'z-3000 overflow-hidden',
+            'rounded-lg p-2',
+            'bg-base-background text-base-foreground',
+            'border border-solid border-border-default',
+            'shadow-md',
+            'min-w-(--reka-select-trigger-width)',
+            'data-[state=closed]:animate-out data-[state=open]:animate-in',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2'
+          )
+        "
+      >
+        <SelectViewport
+          :style="{ maxHeight: `min(${listMaxHeight}, 50vh)` }"
+          class="scrollbar-custom w-full"
+        >
+          <SelectItem
+            v-for="opt in options"
+            :key="opt.value"
+            :value="opt.value"
+            :class="
+              cn(
+                'relative flex w-full cursor-pointer items-center justify-between select-none',
+                'gap-3 rounded-sm px-2 py-3 text-sm outline-none',
+                'hover:bg-secondary-background-hover',
+                'focus:bg-secondary-background-hover',
+                'data-[state=checked]:bg-secondary-background-selected',
+                'data-[state=checked]:hover:bg-secondary-background-selected'
+              )
+            "
+          >
+            <SelectItemText class="truncate">
+              {{ opt.name }}
+            </SelectItemText>
+            <SelectItemIndicator
+              class="flex shrink-0 items-center justify-center"
+            >
+              <i
+                class="icon-[lucide--check] text-base-foreground"
+                aria-hidden="true"
+              />
+            </SelectItemIndicator>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
 </template>
 
 <script setup lang="ts">
-import type { SelectPassThroughMethodOptions } from 'primevue/select'
-import Select from 'primevue/select'
-import { computed } from 'vue'
+import {
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport
+} from 'reka-ui'
 import { useI18n } from 'vue-i18n'
 
+import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import type { SelectOption } from './types'
@@ -152,16 +129,12 @@ const {
   size = 'lg',
   invalid = false,
   loading = false,
+  disabled = false,
   listMaxHeight = '28rem',
   popoverMinWidth,
   popoverMaxWidth
 } = defineProps<{
   label?: string
-  /**
-   * Required for displaying the selected item's label.
-   * Cannot rely on $attrs alone because we need to access options
-   * in getLabel() to map values to their display names.
-   */
   options?: SelectOption[]
   /** Trigger size: 'lg' (40px, Interface) or 'md' (32px, Node) */
   size?: 'lg' | 'md'
@@ -169,6 +142,8 @@ const {
   invalid?: boolean
   /** Show loading spinner instead of chevron */
   loading?: boolean
+  /** Disable the select */
+  disabled?: boolean
   /** Maximum height of the dropdown panel (default: 28rem) */
   listMaxHeight?: string
   /** Minimum width of the popover (default: auto) */
@@ -181,26 +156,8 @@ const selectedItem = defineModel<string | undefined>({ required: true })
 
 const { t } = useI18n()
 
-/**
- * Maps a value to its display label.
- * Necessary because PrimeVue's value slot doesn't provide the selected item's label,
- * only the raw value. We need this to show the correct text when an item is selected.
- */
-const getLabel = (val: string | null | undefined) => {
-  if (val == null) return label ?? ''
-  if (!options) return label ?? ''
-  const found = options.find((o) => o.value === val)
-  return found ? found.name : (label ?? '')
-}
-
-// Extract complex style logic from template
-const optionStyle = computed(() => {
-  if (!popoverMinWidth && !popoverMaxWidth) return undefined
-
-  const styles: string[] = []
-  if (popoverMinWidth) styles.push(`min-width: ${popoverMinWidth}`)
-  if (popoverMaxWidth) styles.push(`max-width: ${popoverMaxWidth}`)
-
-  return styles.join('; ')
+const optionStyle = usePopoverSizing({
+  minWidth: popoverMinWidth,
+  maxWidth: popoverMaxWidth
 })
 </script>

src/components/queue/QueueOverlayExpanded.test.ts

@@ -4,7 +4,7 @@ import { describe, expect, it, vi } from 'vitest'
 import type { JobListItem } from '@/composables/queue/useJobList'
 
 vi.mock('@/composables/queue/useJobMenu', () => ({
-  useJobMenu: () => ({ getJobMenuEntries: () => [] })
+  useJobMenu: () => ({ jobMenuEntries: [] })
 }))
 
 vi.mock('@/composables/useErrorHandling', () => ({
@@ -30,6 +30,10 @@ const JobAssetsListStub = {
   template: '<div class="job-assets-list-stub" />'
 }
 
+const JobContextMenuStub = {
+  template: '<div />'
+}
+
 const createJob = (): JobListItem => ({
   id: 'job-1',
   title: 'Job 1',
@@ -52,7 +56,8 @@ const mountComponent = () =>
       stubs: {
         QueueOverlayHeader: QueueOverlayHeaderStub,
         JobFiltersBar: JobFiltersBarStub,
-        JobAssetsList: JobAssetsListStub
+        JobAssetsList: JobAssetsListStub,
+        JobContextMenu: JobContextMenuStub
       }
     }
   })

src/components/queue/QueueOverlayExpanded.vue

@@ -23,28 +23,36 @@
     <div class="min-h-0 flex-1 overflow-y-auto">
       <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
-        :get-menu-entries="getJobMenuEntries"
         @cancel-item="onCancelItemEvent"
         @delete-item="onDeleteItemEvent"
-        @menu-action="onJobMenuAction"
         @view-item="$emit('viewItem', $event)"
+        @menu="onMenuItem"
       />
     </div>
+
+    <JobContextMenu
+      ref="jobContextMenuRef"
+      :entries="jobMenuEntries"
+      @action="onJobMenuAction"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import type {
   JobGroup,
   JobListItem,
   JobSortMode,
   JobTab
 } from '@/composables/queue/useJobList'
-import type { MenuActionEntry } from '@/types/menuTypes'
+import type { MenuEntry } from '@/composables/queue/useJobMenu'
 import { useJobMenu } from '@/composables/queue/useJobMenu'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
+import JobContextMenu from './job/JobContextMenu.vue'
 import JobAssetsList from './job/JobAssetsList.vue'
 import JobFiltersBar from './job/JobFiltersBar.vue'
 
@@ -70,9 +78,14 @@ const emit = defineEmits<{
   (e: 'viewItem', item: JobListItem): void
 }>()
 
+const currentMenuItem = ref<JobListItem | null>(null)
+const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
-const { getJobMenuEntries } = useJobMenu((item) => emit('viewItem', item))
+const { jobMenuEntries } = useJobMenu(
+  () => currentMenuItem.value,
+  (item) => emit('viewItem', item)
+)
 
 const onCancelItemEvent = (item: JobListItem) => {
   emit('cancelItem', item)
@@ -82,9 +95,14 @@ const onDeleteItemEvent = (item: JobListItem) => {
   emit('deleteItem', item)
 }
 
-const onJobMenuAction = wrapWithErrorHandlingAsync(
-  async (entry: MenuActionEntry) => {
-    if (entry.onClick) await entry.onClick()
-  }
-)
+const onMenuItem = (item: JobListItem, event: Event) => {
+  currentMenuItem.value = item
+  jobContextMenuRef.value?.open(event)
+}
+
+const onJobMenuAction = wrapWithErrorHandlingAsync(async (entry: MenuEntry) => {
+  if (entry.kind === 'divider') return
+  if (entry.onClick) await entry.onClick()
+  jobContextMenuRef.value?.hide()
+})
 </script>

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

@@ -3,20 +3,11 @@ 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'
+import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
 
 import JobAssetsList from './JobAssetsList.vue'
 
-type JobPreviewOutput = NonNullable<
-  NonNullable<JobListItem['taskRef']>['previewOutput']
->
-
-vi.mock('@/components/queue/job/JobDetailsPopover.vue', () => ({
-  default: {
-    name: 'JobDetailsPopover',
-    template: '<div class="job-details-popover-stub" />'
-  }
-}))
-
 const JobDetailsPopoverStub = defineComponent({
   name: 'JobDetailsPopover',
   props: {
@@ -41,32 +32,43 @@ vi.mock('vue-i18n', () => {
   }
 })
 
-const createPreviewOutput = (
+const createResultItem = (
   filename: string,
   mediaType: string = 'images'
-): JobPreviewOutput =>
-  ({
+): ResultItemImpl => {
+  const item = new ResultItemImpl({
     filename,
-    mediaType,
-    isImage: mediaType === 'images',
-    isVideo: mediaType === 'video',
-    isAudio: mediaType === 'audio',
-    is3D: mediaType === 'model',
-    url: `/api/view/${filename}`
-  }) as JobPreviewOutput
+    subfolder: '',
+    type: 'output',
+    nodeId: 'node-1',
+    mediaType
+  })
+  Object.defineProperty(item, 'url', {
+    get: () => `/api/view/${filename}`
+  })
+  return item
+}
 
-const createTaskRef = (preview?: JobPreviewOutput): JobListItem['taskRef'] =>
-  ({
-    workflowId: 'workflow-1',
-    previewOutput: preview
-  }) as JobListItem['taskRef']
+const createTaskRef = (preview?: ResultItemImpl): TaskItemImpl => {
+  const job: ApiJobListItem = {
+    id: `task-${Math.random().toString(36).slice(2)}`,
+    status: 'completed',
+    create_time: Date.now(),
+    preview_output: null,
+    outputs_count: preview ? 1 : 0,
+    workflow_id: 'workflow-1',
+    priority: 0
+  }
+  const flatOutputs = preview ? [preview] : []
+  return new TaskItemImpl(job, {}, flatOutputs)
+}
 
 const buildJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
   id: 'job-1',
   title: 'Job 1',
   meta: 'meta',
   state: 'completed',
-  taskRef: createTaskRef(createPreviewOutput('job-1.png')),
+  taskRef: createTaskRef(createResultItem('job-1.png')),
   ...overrides
 })
 
@@ -80,10 +82,7 @@ const mountJobAssetsList = (jobs: JobListItem[]) => {
   ]
 
   return mount(JobAssetsList, {
-    props: {
-      displayedJobGroups,
-      getMenuEntries: () => []
-    },
+    props: { displayedJobGroups },
     global: {
       stubs: {
         teleport: true,
@@ -148,7 +147,7 @@ describe('JobAssetsList', () => {
   it('emits viewItem on double-click for completed video jobs without icon image', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createPreviewOutput('job-1.webm', 'video'))
+      taskRef: createTaskRef(createResultItem('job-1.webm', 'video'))
     })
     const wrapper = mountJobAssetsList([job])
 
@@ -165,7 +164,7 @@ describe('JobAssetsList', () => {
   it('emits viewItem on icon click for completed 3D jobs without preview tile', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createPreviewOutput('job-1.glb', 'model'))
+      taskRef: createTaskRef(createResultItem('job-1.glb', 'model'))
     })
     const wrapper = mountJobAssetsList([job])
 
@@ -180,7 +179,7 @@ describe('JobAssetsList', () => {
   it('does not emit viewItem on double-click for non-completed jobs', async () => {
     const job = buildJob({
       state: 'running',
-      taskRef: createTaskRef(createPreviewOutput('job-1.png'))
+      taskRef: createTaskRef(createResultItem('job-1.png'))
     })
     const wrapper = mountJobAssetsList([job])
 

src/components/queue/job/JobAssetsList.vue

@@ -15,97 +15,64 @@
         @mouseenter="onJobEnter(job, $event)"
         @mouseleave="onJobLeave(job.id)"
       >
-        <ContextMenu :modal="false">
-          <ContextMenuTrigger as-child>
-            <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"
-              @dblclick.stop="emitViewItem(job)"
-              @preview-click="emitViewItem(job)"
-              @click.stop
+        <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)"
             >
-              <template v-if="shouldShowActionsMenu(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>
-                <DropdownMenu
-                  :open="openActionsJobId === job.id"
-                  @update:open="onActionsMenuOpenChange(job.id, $event)"
-                >
-                  <DropdownMenuTrigger as-child>
-                    <Button
-                      class="job-actions-menu-trigger"
-                      variant="secondary"
-                      size="icon"
-                      :aria-label="t('g.more')"
-                      @click.stop
-                    >
-                      <i class="icon-[lucide--ellipsis] size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    close-on-scroll
-                    class="z-1700 bg-transparent p-0 shadow-lg"
-                    :side-offset="4"
-                    :collision-padding="8"
-                  >
-                    <JobMenuItems
-                      :entries="getMenuEntries(job)"
-                      surface="dropdown"
-                      @action="onMenuAction($event)"
-                    />
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </template>
-            </AssetsListItem>
-          </ContextMenuTrigger>
-          <ContextMenuContent
-            close-on-scroll
-            class="z-1700 bg-transparent p-0 font-inter shadow-lg"
-          >
-            <JobMenuItems
-              :entries="getMenuEntries(job)"
-              surface="context"
-              @action="onMenuAction($event)"
-            />
-          </ContextMenuContent>
-        </ContextMenu>
+              <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>
@@ -113,7 +80,7 @@
   <Teleport to="body">
     <div
       v-if="activeDetails && popoverPosition"
-      class="job-details-popover fixed z-1700"
+      class="job-details-popover fixed z-50"
       :style="{
         top: `${popoverPosition.top}px`,
         left: `${popoverPosition.left}px`
@@ -136,36 +103,24 @@ import { nextTick, ref } from 'vue'
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
 import Button from '@/components/ui/button/Button.vue'
-import ContextMenu from '@/components/ui/context-menu/ContextMenu.vue'
-import ContextMenuContent from '@/components/ui/context-menu/ContextMenuContent.vue'
-import ContextMenuTrigger from '@/components/ui/context-menu/ContextMenuTrigger.vue'
-import DropdownMenu from '@/components/ui/dropdown-menu/DropdownMenu.vue'
-import DropdownMenuContent from '@/components/ui/dropdown-menu/DropdownMenuContent.vue'
-import DropdownMenuTrigger from '@/components/ui/dropdown-menu/DropdownMenuTrigger.vue'
-import type { MenuActionEntry, MenuEntry } from '@/types/menuTypes'
 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'
-import JobMenuItems from './JobMenuItems.vue'
 
-const { displayedJobGroups, getMenuEntries } = defineProps<{
-  displayedJobGroups: JobGroup[]
-  getMenuEntries: (item: JobListItem) => MenuEntry[]
-}>()
+const { displayedJobGroups } = defineProps<{ displayedJobGroups: JobGroup[] }>()
 
 const emit = defineEmits<{
   (e: 'cancelItem', item: JobListItem): void
   (e: 'deleteItem', item: JobListItem): void
-  (e: 'menu-action', entry: MenuActionEntry): void
+  (e: 'menu', item: JobListItem, ev: MouseEvent): void
   (e: 'viewItem', item: JobListItem): void
 }>()
 
 const { t } = useI18n()
 const hoveredJobId = ref<string | null>(null)
-const openActionsJobId = ref<string | null>(null)
 const activeRowElement = ref<HTMLElement | null>(null)
 const popoverPosition = ref<{ top: number; left: number } | null>(null)
 const {
@@ -197,7 +152,7 @@ function onJobLeave(jobId: string) {
   if (hoveredJobId.value === jobId) {
     hoveredJobId.value = null
   }
-  scheduleDetailsHide(jobId)
+  scheduleDetailsHide(jobId, clearPopoverAnchor)
 }
 
 function onJobEnter(job: JobListItem, event: MouseEvent) {
@@ -233,26 +188,6 @@ function isFailedDeletable(job: JobListItem) {
   return job.showClear !== false && job.state === 'failed'
 }
 
-function shouldShowActionsMenu(jobId: string) {
-  return hoveredJobId.value === jobId || openActionsJobId.value === jobId
-}
-
-function onActionsMenuOpenChange(jobId: string, isOpen: boolean) {
-  if (isOpen) {
-    openActionsJobId.value = jobId
-    return
-  }
-
-  if (openActionsJobId.value === jobId) {
-    openActionsJobId.value = null
-  }
-}
-
-function onMenuAction(entry: MenuActionEntry) {
-  resetActiveDetails()
-  emit('menu-action', entry)
-}
-
 function getPreviewOutput(job: JobListItem) {
   return job.taskRef?.previewOutput
 }
@@ -300,7 +235,7 @@ function onPopoverEnter() {
 }
 
 function onPopoverLeave() {
-  scheduleDetailsHide(activeDetails.value?.jobId)
+  scheduleDetailsHide(activeDetails.value?.jobId, clearPopoverAnchor)
 }
 
 function getJobIconClass(job: JobListItem): string | undefined {

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

@@ -0,0 +1,195 @@
+import { mount } from '@vue/test-utils'
+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: {
+      type: Boolean,
+      default: false
+    }
+  },
+  template: `
+    <div
+      class="button-stub"
+      :data-disabled="String(disabled)"
+    >
+      <slot />
+    </div>
+  `
+}
+
+const createEntries = (): MenuEntry[] => [
+  { key: 'enabled', label: 'Enabled action', onClick: vi.fn() },
+  {
+    key: 'disabled',
+    label: 'Disabled action',
+    disabled: true,
+    onClick: vi.fn()
+  },
+  { kind: 'divider', key: 'divider-1' }
+]
+
+const mountComponent = (entries: MenuEntry[]) =>
+  mount(JobContextMenu, {
+    props: { entries },
+    global: {
+      stubs: {
+        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', 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 () => {
+    const wrapper = mountComponent([
+      {
+        key: 'disabled',
+        label: 'Disabled action',
+        disabled: true,
+        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

@@ -0,0 +1,118 @@
+<template>
+  <Popover
+    ref="jobItemPopoverRef"
+    :dismissable="false"
+    :close-on-escape="true"
+    unstyled
+    :pt="{
+      root: { class: 'absolute z-50' },
+      content: {
+        class: [
+          'bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg font-inter'
+        ]
+      }
+    }"
+    @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">
+        <div v-if="entry.kind === 'divider'" class="px-2 py-1">
+          <div class="h-px bg-interface-stroke" />
+        </div>
+        <Button
+          v-else
+          class="w-full justify-start bg-transparent"
+          variant="textonly"
+          size="sm"
+          :aria-label="entry.label"
+          :disabled="entry.disabled"
+          @click="onEntry(entry)"
+        >
+          <i
+            v-if="entry.icon"
+            :class="[
+              entry.icon,
+              'block size-4 shrink-0 leading-none text-text-secondary'
+            ]"
+          />
+          <span>{{ entry.label }}</span>
+        </Button>
+      </template>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+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[] }>()
+
+const emit = defineEmits<{
+  (e: 'action', entry: MenuEntry): void
+}>()
+
+type PopoverHandle = {
+  hide: () => void
+  show: (event: Event, target?: EventTarget | null) => void
+}
+
+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)
+}
+
+defineExpose({ open, hide })
+</script>

src/components/queue/job/JobMenuItems.vue

@@ -1,88 +0,0 @@
-<script setup lang="ts">
-import type { MenuActionEntry, MenuEntry } from '@/types/menuTypes'
-
-import Button from '@/components/ui/button/Button.vue'
-import ContextMenuItem from '@/components/ui/context-menu/ContextMenuItem.vue'
-import ContextMenuSeparator from '@/components/ui/context-menu/ContextMenuSeparator.vue'
-import DropdownMenuItem from '@/components/ui/dropdown-menu/DropdownMenuItem.vue'
-import DropdownMenuSeparator from '@/components/ui/dropdown-menu/DropdownMenuSeparator.vue'
-import { cn } from '@/utils/tailwindUtil'
-
-const { entries, surface } = defineProps<{
-  entries: MenuEntry[]
-  surface: 'context' | 'dropdown'
-}>()
-
-const emit = defineEmits<{
-  action: [entry: MenuActionEntry]
-}>()
-
-function isActionEntry(entry: MenuEntry): entry is MenuActionEntry {
-  return entry.kind !== 'divider'
-}
-</script>
-
-<template>
-  <div
-    class="job-menu-panel 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">
-      <ContextMenuSeparator
-        v-if="surface === 'context' && entry.kind === 'divider'"
-        class="mx-2 my-1 h-px bg-interface-stroke"
-      />
-      <DropdownMenuSeparator
-        v-else-if="surface === 'dropdown' && entry.kind === 'divider'"
-        class="mx-2 my-1 h-px bg-interface-stroke"
-      />
-      <ContextMenuItem
-        v-else-if="surface === 'context' && isActionEntry(entry)"
-        as-child
-        :disabled="entry.disabled"
-        :text-value="entry.label"
-        @select="emit('action', entry)"
-      >
-        <Button
-          variant="textonly"
-          size="sm"
-          class="w-full justify-start bg-transparent data-highlighted:bg-secondary-background-hover"
-        >
-          <i
-            v-if="entry.icon"
-            :class="
-              cn(
-                entry.icon,
-                'block size-4 shrink-0 leading-none text-text-secondary'
-              )
-            "
-          />
-          <span>{{ entry.label }}</span>
-        </Button>
-      </ContextMenuItem>
-      <DropdownMenuItem
-        v-else-if="isActionEntry(entry)"
-        as-child
-        :disabled="entry.disabled"
-        :text-value="entry.label"
-        @select="emit('action', entry)"
-      >
-        <Button
-          variant="textonly"
-          size="sm"
-          class="w-full justify-start bg-transparent data-highlighted:bg-secondary-background-hover"
-        >
-          <i
-            v-if="entry.icon"
-            :class="
-              cn(
-                entry.icon,
-                'block size-4 shrink-0 leading-none text-text-secondary'
-              )
-            "
-          />
-          <span>{{ entry.label }}</span>
-        </Button>
-      </DropdownMenuItem>
-    </template>
-  </div>
-</template>

src/components/queue/job/QueueJobItem.vue

@@ -9,7 +9,7 @@
     <Teleport to="body">
       <div
         v-if="!isPreviewVisible && showDetails && popoverPosition"
-        class="fixed z-1700"
+        class="fixed z-50"
         :style="{
           top: `${popoverPosition.top}px`,
           left: `${popoverPosition.left}px`
@@ -23,7 +23,7 @@
     <Teleport to="body">
       <div
         v-if="isPreviewVisible && canShowPreview && popoverPosition"
-        class="fixed z-1700"
+        class="fixed z-50"
         :style="{
           top: `${popoverPosition.top}px`,
           left: `${popoverPosition.left}px`

src/components/rightSidePanel/RightSidePanel.vue

@@ -9,12 +9,15 @@ import TabList from '@/components/tab/TabList.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useGraphHierarchy } from '@/composables/graph/useGraphHierarchy'
 import { st } from '@/i18n'
+import { app } from '@/scripts/app'
+import { getActiveGraphNodeIds } from '@/utils/graphTraversalUtil'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
 import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
@@ -38,12 +41,21 @@ import TabErrors from './errors/TabErrors.vue'
 const canvasStore = useCanvasStore()
 const executionErrorStore = useExecutionErrorStore()
 const missingModelStore = useMissingModelStore()
+const missingNodesErrorStore = useMissingNodesErrorStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
-const { hasAnyError, allErrorExecutionIds, activeMissingNodeGraphIds } =
-  storeToRefs(executionErrorStore)
+const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionErrorStore)
+
+const activeMissingNodeGraphIds = computed<Set<string>>(() => {
+  if (!app.isGraphReady) return new Set()
+  return getActiveGraphNodeIds(
+    app.rootGraph,
+    canvasStore.currentGraph ?? app.rootGraph,
+    missingNodesErrorStore.missingAncestorExecutionIds
+  )
+})
 
 const { activeMissingModelGraphIds } = storeToRefs(missingModelStore)
 

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

@@ -237,6 +237,11 @@ describe('ErrorNodeCard.vue', () => {
 
     // Report is still generated with fallback log message
     expect(mockGenerateErrorReport).toHaveBeenCalledOnce()
+    expect(mockGenerateErrorReport).toHaveBeenCalledWith(
+      expect.objectContaining({
+        serverLogs: 'Failed to retrieve server logs'
+      })
+    )
     expect(wrapper.text()).toContain('ComfyUI Error Report')
   })
 

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -90,6 +90,7 @@
               variant="secondary"
               size="sm"
               class="h-8 w-2/3 justify-center gap-1 rounded-lg text-xs"
+              data-testid="error-card-find-on-github"
               @click="handleCheckGithub(error)"
             >
               {{ t('g.findOnGithub') }}
@@ -99,6 +100,7 @@
               variant="secondary"
               size="sm"
               class="h-8 w-1/3 justify-center gap-1 rounded-lg text-xs"
+              data-testid="error-card-copy"
               @click="handleCopyError(idx)"
             >
               {{ t('g.copy') }}
@@ -125,12 +127,10 @@
 import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useExternalLink } from '@/composables/useExternalLink'
-import { useTelemetry } from '@/platform/telemetry'
-import { useCommandStore } from '@/stores/commandStore'
 import { cn } from '@/utils/tailwindUtil'
 
 import type { ErrorCardData, ErrorItem } from './types'
+import { useErrorActions } from './useErrorActions'
 import { useErrorReport } from './useErrorReport'
 
 const {
@@ -154,10 +154,8 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const telemetry = useTelemetry()
-const { staticUrls } = useExternalLink()
-const commandStore = useCommandStore()
 const { displayedDetailsMap } = useErrorReport(() => card)
+const { findOnGitHub, contactSupport: handleGetHelp } = useErrorActions()
 
 function handleLocateNode() {
   if (card.nodeId) {
@@ -178,23 +176,6 @@ function handleCopyError(idx: number) {
 }
 
 function handleCheckGithub(error: ErrorItem) {
-  telemetry?.trackUiButtonClicked({
-    button_id: 'error_tab_find_existing_issues_clicked'
-  })
-  const query = encodeURIComponent(error.message + ' is:issue')
-  window.open(
-    `${staticUrls.githubIssues}?q=${query}`,
-    '_blank',
-    'noopener,noreferrer'
-  )
-}
-
-function handleGetHelp() {
-  telemetry?.trackHelpResourceClicked({
-    resource_type: 'help_feedback',
-    is_external: true,
-    source: 'error_dialog'
-  })
-  commandStore.execute('Comfy.ContactSupport')
+  findOnGitHub(error.message)
 }
 </script>

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

@@ -1,7 +1,5 @@
 import { mount } from '@vue/test-utils'
 import { createTestingPinia } from '@pinia/testing'
-import PrimeVue from 'primevue/config'
-import { ref } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
@@ -42,23 +40,25 @@ vi.mock('@/stores/systemStatsStore', () => ({
   })
 }))
 
-const mockApplyChanges = vi.fn()
-const mockIsRestarting = ref(false)
+const mockApplyChanges = vi.hoisted(() => vi.fn())
+const mockIsRestarting = vi.hoisted(() => ({ value: false }))
 vi.mock('@/workbench/extensions/manager/composables/useApplyChanges', () => ({
   useApplyChanges: () => ({
-    isRestarting: mockIsRestarting,
+    get isRestarting() {
+      return mockIsRestarting.value
+    },
     applyChanges: mockApplyChanges
   })
 }))
 
-const mockIsPackInstalled = vi.fn(() => false)
+const mockIsPackInstalled = vi.hoisted(() => vi.fn(() => false))
 vi.mock('@/workbench/extensions/manager/stores/comfyManagerStore', () => ({
   useComfyManagerStore: () => ({
     isPackInstalled: mockIsPackInstalled
   })
 }))
 
-const mockShouldShowManagerButtons = { value: false }
+const mockShouldShowManagerButtons = vi.hoisted(() => ({ value: false }))
 vi.mock('@/workbench/extensions/manager/composables/useManagerState', () => ({
   useManagerState: () => ({
     shouldShowManagerButtons: mockShouldShowManagerButtons
@@ -128,7 +128,7 @@ function mountCard(
       ...props
     },
     global: {
-      plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
+      plugins: [createTestingPinia({ createSpy: vi.fn }), i18n],
       stubs: {
         DotSpinner: { template: '<span role="status" aria-label="loading" />' }
       }

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

@@ -209,12 +209,9 @@ describe('TabErrors.vue', () => {
       }
     })
 
-    // Find the copy button by text (rendered inside ErrorNodeCard)
-    const copyButton = wrapper
-      .findAll('button')
-      .find((btn) => btn.text().includes('Copy'))
-    expect(copyButton).toBeTruthy()
-    await copyButton!.trigger('click')
+    const copyButton = wrapper.find('[data-testid="error-card-copy"]')
+    expect(copyButton.exists()).toBe(true)
+    await copyButton.trigger('click')
 
     expect(mockCopy).toHaveBeenCalledWith('Test message\n\nTest details')
   })
@@ -245,5 +242,9 @@ describe('TabErrors.vue', () => {
     // Should render in the dedicated runtime error panel, not inside accordion
     const runtimePanel = wrapper.find('[data-testid="runtime-error-panel"]')
     expect(runtimePanel.exists()).toBe(true)
+    // Verify the error message appears exactly once (not duplicated in accordion)
+    expect(
+      wrapper.text().match(/RuntimeError: Out of memory/g) ?? []
+    ).toHaveLength(1)
   })
 })

src/components/rightSidePanel/errors/TabErrors.vue

@@ -53,6 +53,7 @@
         <PropertiesAccordionItem
           v-for="group in filteredGroups"
           :key="group.title"
+          :data-testid="'error-group-' + group.type.replaceAll('_', '-')"
           :collapse="isSectionCollapsed(group.title) && !isSearching"
           class="border-b border-interface-stroke"
           :size="getGroupSize(group)"
@@ -209,12 +210,9 @@
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useCommandStore } from '@/stores/commandStore'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useFocusNode } from '@/composables/canvas/useFocusNode'
-import { useExternalLink } from '@/composables/useExternalLink'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useTelemetry } from '@/platform/telemetry'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
@@ -238,6 +236,7 @@ import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { useErrorActions } from './useErrorActions'
 import { useErrorGroups } from './useErrorGroups'
 import type { SwapNodeGroup } from './useErrorGroups'
 import type { ErrorGroup } from './types'
@@ -246,7 +245,7 @@ import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacemen
 const { t } = useI18n()
 const { copyToClipboard } = useCopyToClipboard()
 const { focusNode, enterSubgraph } = useFocusNode()
-const { staticUrls } = useExternalLink()
+const { openGitHubIssues, contactSupport } = useErrorActions()
 const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const { shouldShowManagerButtons, shouldShowInstallButton, openManager } =
@@ -372,13 +371,13 @@ watch(
     if (!graphNodeId) return
     const prefix = `${graphNodeId}:`
     for (const group of allErrorGroups.value) {
-      const hasMatch =
-        group.type === 'execution' &&
-        group.cards.some(
-          (card) =>
-            card.graphNodeId === graphNodeId ||
-            (card.nodeId?.startsWith(prefix) ?? false)
-        )
+      if (group.type !== 'execution') continue
+
+      const hasMatch = group.cards.some(
+        (card) =>
+          card.graphNodeId === graphNodeId ||
+          (card.nodeId?.startsWith(prefix) ?? false)
+      )
       setSectionCollapsed(group.title, !hasMatch)
     }
     rightSidePanelStore.focusedErrorNodeId = null
@@ -418,20 +417,4 @@ function handleReplaceAll() {
 function handleEnterSubgraph(nodeId: string) {
   enterSubgraph(nodeId, errorNodeCache.value)
 }
-
-function openGitHubIssues() {
-  useTelemetry()?.trackUiButtonClicked({
-    button_id: 'error_tab_github_issues_clicked'
-  })
-  window.open(staticUrls.githubIssues, '_blank', 'noopener,noreferrer')
-}
-
-async function contactSupport() {
-  useTelemetry()?.trackHelpResourceClicked({
-    resource_type: 'help_feedback',
-    is_external: true,
-    source: 'error_dialog'
-  })
-  useCommandStore().execute('Comfy.ContactSupport')
-}
 </script>

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

@@ -47,7 +47,7 @@ vi.mock('@/utils/executableGroupNodeDto', () => ({
   isGroupNode: vi.fn(() => false)
 }))
 
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useErrorGroups } from './useErrorGroups'
 
 function makeMissingNodeType(
@@ -80,8 +80,7 @@ describe('swapNodeGroups computed', () => {
   })
 
   function getSwapNodeGroups(nodeTypes: MissingNodeType[]) {
-    const store = useExecutionErrorStore()
-    store.surfaceMissingNodes(nodeTypes)
+    useMissingNodesErrorStore().surfaceMissingNodes(nodeTypes)
 
     const searchQuery = ref('')
     const t = (key: string) => key

src/components/rightSidePanel/errors/useErrorActions.ts

@@ -0,0 +1,39 @@
+import { useCommandStore } from '@/stores/commandStore'
+import { useExternalLink } from '@/composables/useExternalLink'
+import { useTelemetry } from '@/platform/telemetry'
+
+export function useErrorActions() {
+  const telemetry = useTelemetry()
+  const commandStore = useCommandStore()
+  const { staticUrls } = useExternalLink()
+
+  function openGitHubIssues() {
+    telemetry?.trackUiButtonClicked({
+      button_id: 'error_tab_github_issues_clicked'
+    })
+    window.open(staticUrls.githubIssues, '_blank', 'noopener,noreferrer')
+  }
+
+  function contactSupport() {
+    telemetry?.trackHelpResourceClicked({
+      resource_type: 'help_feedback',
+      is_external: true,
+      source: 'error_dialog'
+    })
+    void commandStore.execute('Comfy.ContactSupport')
+  }
+
+  function findOnGitHub(errorMessage: string) {
+    telemetry?.trackUiButtonClicked({
+      button_id: 'error_tab_find_existing_issues_clicked'
+    })
+    const query = encodeURIComponent(errorMessage + ' is:issue')
+    window.open(
+      `${staticUrls.githubIssues}?q=${query}`,
+      '_blank',
+      'noopener,noreferrer'
+    )
+  }
+
+  return { openGitHubIssues, contactSupport, findOnGitHub }
+}

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

@@ -58,6 +58,7 @@ vi.mock(
 )
 
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useErrorGroups } from './useErrorGroups'
 
 function makeMissingNodeType(
@@ -126,8 +127,9 @@ describe('useErrorGroups', () => {
     })
 
     it('groups non-replaceable nodes by cnrId', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeA', { cnrId: 'pack-1' }),
         makeMissingNodeType('NodeB', { cnrId: 'pack-1', nodeId: '2' }),
         makeMissingNodeType('NodeC', { cnrId: 'pack-2', nodeId: '3' })
@@ -146,8 +148,9 @@ describe('useErrorGroups', () => {
     })
 
     it('excludes replaceable nodes from missingPackGroups', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('OldNode', {
           isReplaceable: true,
           replacement: { new_node_id: 'NewNode' }
@@ -164,8 +167,9 @@ describe('useErrorGroups', () => {
     })
 
     it('groups nodes without cnrId under null packId', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('UnknownNode', { nodeId: '1' }),
         makeMissingNodeType('AnotherUnknown', { nodeId: '2' })
       ])
@@ -177,8 +181,9 @@ describe('useErrorGroups', () => {
     })
 
     it('sorts groups alphabetically with null packId last', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeA', { cnrId: 'zebra-pack' }),
         makeMissingNodeType('NodeB', { nodeId: '2' }),
         makeMissingNodeType('NodeC', { cnrId: 'alpha-pack', nodeId: '3' })
@@ -190,8 +195,9 @@ describe('useErrorGroups', () => {
     })
 
     it('sorts nodeTypes within each group alphabetically by type then nodeId', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeB', { cnrId: 'pack-1', nodeId: '2' }),
         makeMissingNodeType('NodeA', { cnrId: 'pack-1', nodeId: '3' }),
         makeMissingNodeType('NodeA', { cnrId: 'pack-1', nodeId: '1' })
@@ -206,8 +212,9 @@ describe('useErrorGroups', () => {
     })
 
     it('handles string nodeType entries', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         'StringGroupNode' as unknown as MissingNodeType
       ])
       await nextTick()
@@ -224,8 +231,9 @@ describe('useErrorGroups', () => {
     })
 
     it('includes missing_node group when missing nodes exist', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
       ])
       await nextTick()
@@ -237,8 +245,9 @@ describe('useErrorGroups', () => {
     })
 
     it('includes swap_nodes group when replaceable nodes exist', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('OldNode', {
           isReplaceable: true,
           replacement: { new_node_id: 'NewNode' }
@@ -253,8 +262,9 @@ describe('useErrorGroups', () => {
     })
 
     it('includes both swap_nodes and missing_node when both exist', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('OldNode', {
           isReplaceable: true,
           replacement: { new_node_id: 'NewNode' }
@@ -272,8 +282,9 @@ describe('useErrorGroups', () => {
     })
 
     it('swap_nodes has lower priority than missing_node', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('OldNode', {
           isReplaceable: true,
           replacement: { new_node_id: 'NewNode' }
@@ -533,13 +544,18 @@ describe('useErrorGroups', () => {
     })
 
     it('includes missing node group title as message', async () => {
-      const { store, groups } = createErrorGroups()
-      store.setMissingNodeTypes([
+      const { groups } = createErrorGroups()
+      const missingNodesStore = useMissingNodesErrorStore()
+      missingNodesStore.setMissingNodeTypes([
         makeMissingNodeType('NodeA', { cnrId: 'pack-1' })
       ])
       await nextTick()
 
-      expect(groups.groupedErrorMessages.value.length).toBeGreaterThan(0)
+      const missingGroup = groups.allErrorGroups.value.find(
+        (g) => g.type === 'missing_node'
+      )
+      expect(missingGroup).toBeDefined()
+      expect(groups.groupedErrorMessages.value).toContain(missingGroup!.title)
     })
   })
 

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -5,6 +5,7 @@ import type { IFuseOptions } from 'fuse.js'
 
 import { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
@@ -195,12 +196,8 @@ function searchErrorGroups(groups: ErrorGroup[], query: string) {
         cardIndex: ci,
         searchableNodeId: card.nodeId ?? '',
         searchableNodeTitle: card.nodeTitle ?? '',
-        searchableMessage: card.errors
-          .map((e: ErrorItem) => e.message)
-          .join(' '),
-        searchableDetails: card.errors
-          .map((e: ErrorItem) => e.details ?? '')
-          .join(' ')
+        searchableMessage: card.errors.map((e) => e.message).join(' '),
+        searchableDetails: card.errors.map((e) => e.details ?? '').join(' ')
       })
     }
   }
@@ -240,6 +237,7 @@ export function useErrorGroups(
   t: (key: string) => string
 ) {
   const executionErrorStore = useExecutionErrorStore()
+  const missingNodesStore = useMissingNodesErrorStore()
   const missingModelStore = useMissingModelStore()
   const canvasStore = useCanvasStore()
   const { inferPackFromNodeName } = useComfyRegistryStore()
@@ -285,7 +283,7 @@ export function useErrorGroups(
 
   const missingNodeCache = computed(() => {
     const map = new Map<string, LGraphNode>()
-    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const nodeTypes = missingNodesStore.missingNodesError?.nodeTypes ?? []
     for (const nodeType of nodeTypes) {
       if (typeof nodeType === 'string') continue
       if (nodeType.nodeId == null) continue
@@ -407,7 +405,7 @@ export function useErrorGroups(
   const asyncResolvedIds = ref<Map<string, string | null>>(new Map())
 
   const pendingTypes = computed(() =>
-    (executionErrorStore.missingNodesError?.nodeTypes ?? []).filter(
+    (missingNodesStore.missingNodesError?.nodeTypes ?? []).filter(
       (n): n is Exclude<MissingNodeType, string> =>
         typeof n !== 'string' && !n.cnrId
     )
@@ -448,6 +446,8 @@ export function useErrorGroups(
       for (const r of results) {
         if (r.status === 'fulfilled') {
           final.set(r.value.type, r.value.packId)
+        } else {
+          console.warn('Failed to resolve pack ID:', r.reason)
         }
       }
       // Clear any remaining RESOLVING markers for failed lookups
@@ -459,8 +459,18 @@ export function useErrorGroups(
     { immediate: true }
   )
 
+  // Evict stale entries when missing nodes are cleared
+  watch(
+    () => missingNodesStore.missingNodesError,
+    (error) => {
+      if (!error && asyncResolvedIds.value.size > 0) {
+        asyncResolvedIds.value = new Map()
+      }
+    }
+  )
+
   const missingPackGroups = computed<MissingPackGroup[]>(() => {
-    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const nodeTypes = missingNodesStore.missingNodesError?.nodeTypes ?? []
     const map = new Map<
       string | null,
       { nodeTypes: MissingNodeType[]; isResolving: boolean }
@@ -522,7 +532,7 @@ export function useErrorGroups(
   })
 
   const swapNodeGroups = computed<SwapNodeGroup[]>(() => {
-    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const nodeTypes = missingNodesStore.missingNodesError?.nodeTypes ?? []
     const map = new Map<string, SwapNodeGroup>()
 
     for (const nodeType of nodeTypes) {
@@ -546,7 +556,7 @@ export function useErrorGroups(
 
   /** Builds an ErrorGroup from missingNodesError. Returns [] when none present. */
   function buildMissingNodeGroups(): ErrorGroup[] {
-    const error = executionErrorStore.missingNodesError
+    const error = missingNodesStore.missingNodesError
     if (!error) return []
 
     const groups: ErrorGroup[] = []

src/components/rightSidePanel/errors/useErrorReport.ts

@@ -2,6 +2,8 @@ import { computed, onMounted, onUnmounted, reactive, toValue } from 'vue'
 
 import type { MaybeRefOrGetter } from 'vue'
 
+import { until } from '@vueuse/core'
+
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
@@ -40,24 +42,33 @@ export function useErrorReport(cardSource: MaybeRefOrGetter<ErrorCardData>) {
     if (runtimeErrors.length === 0) return
 
     if (!systemStatsStore.systemStats) {
-      try {
-        await systemStatsStore.refetchSystemStats()
-      } catch {
-        return
+      if (systemStatsStore.isLoading) {
+        await until(systemStatsStore.isLoading).toBe(false)
+      } else {
+        try {
+          await systemStatsStore.refetchSystemStats()
+        } catch (e) {
+          console.warn('Failed to fetch system stats for error report:', e)
+          return
+        }
       }
     }
-    if (cancelled || !systemStatsStore.systemStats) return
-
-    let logs: string
-    try {
-      logs = await api.getLogs()
-    } catch {
-      logs = 'Failed to retrieve server logs'
-    }
+    if (!systemStatsStore.systemStats || cancelled) return
 
+    const logs = await api
+      .getLogs()
+      .catch(() => 'Failed to retrieve server logs')
     if (cancelled) return
 
-    const workflow = app.rootGraph.serialize()
+    const workflow = (() => {
+      try {
+        return app.rootGraph.serialize()
+      } catch (e) {
+        console.warn('Failed to serialize workflow for error report:', e)
+        return null
+      }
+    })()
+    if (!workflow) return
 
     for (const { error, idx } of runtimeErrors) {
       try {
@@ -72,8 +83,8 @@ export function useErrorReport(cardSource: MaybeRefOrGetter<ErrorCardData>) {
           workflow
         })
         enrichedDetails[idx] = report
-      } catch {
-        // Fallback: keep original error.details
+      } catch (e) {
+        console.warn('Failed to generate error report:', e)
       }
     }
   })

src/components/sidebar/tabs/AssetsSidebarGridView.vue

@@ -9,56 +9,15 @@
     >
       <template #item="{ item }">
         <MediaAssetCard
-          v-if="assetsStore.isAssetDeleting(item.asset.id)"
           :asset="item.asset"
           :selected="isSelected(item.asset.id)"
           :show-output-count="showOutputCount(item.asset)"
           :output-count="getOutputCount(item.asset)"
-          :show-delete-button="showDeleteButton"
-          :selected-assets="selectedAssets"
-          :is-bulk-mode="isBulkMode"
           @click="emit('select-asset', item.asset)"
+          @context-menu="emit('context-menu', $event, item.asset)"
           @zoom="emit('zoom', item.asset)"
-          @asset-deleted="emit('asset-deleted')"
-          @bulk-download="emit('bulk-download', $event)"
-          @bulk-delete="emit('bulk-delete', $event)"
-          @bulk-add-to-workflow="emit('bulk-add-to-workflow', $event)"
-          @bulk-open-workflow="emit('bulk-open-workflow', $event)"
-          @bulk-export-workflow="emit('bulk-export-workflow', $event)"
           @output-count-click="emit('output-count-click', item.asset)"
         />
-        <ContextMenu v-else :modal="false">
-          <ContextMenuTrigger as-child>
-            <MediaAssetCard
-              :asset="item.asset"
-              :selected="isSelected(item.asset.id)"
-              :show-output-count="showOutputCount(item.asset)"
-              :output-count="getOutputCount(item.asset)"
-              :show-delete-button="showDeleteButton"
-              :selected-assets="selectedAssets"
-              :is-bulk-mode="isBulkMode"
-              @click="emit('select-asset', item.asset)"
-              @zoom="emit('zoom', item.asset)"
-              @asset-deleted="emit('asset-deleted')"
-              @bulk-download="emit('bulk-download', $event)"
-              @bulk-delete="emit('bulk-delete', $event)"
-              @bulk-add-to-workflow="emit('bulk-add-to-workflow', $event)"
-              @bulk-open-workflow="emit('bulk-open-workflow', $event)"
-              @bulk-export-workflow="emit('bulk-export-workflow', $event)"
-              @output-count-click="emit('output-count-click', item.asset)"
-            />
-          </ContextMenuTrigger>
-          <ContextMenuContent
-            close-on-scroll
-            class="z-1700 bg-transparent p-0 shadow-lg"
-          >
-            <MediaAssetMenuItems
-              :entries="getAssetMenuEntries(item.asset)"
-              surface="context"
-              @action="void onAssetMenuAction($event)"
-            />
-          </ContextMenuContent>
-        </ContextMenu>
       </template>
     </VirtualGrid>
   </div>
@@ -68,60 +27,24 @@
 import { computed } from 'vue'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
-import ContextMenu from '@/components/ui/context-menu/ContextMenu.vue'
-import ContextMenuContent from '@/components/ui/context-menu/ContextMenuContent.vue'
-import ContextMenuTrigger from '@/components/ui/context-menu/ContextMenuTrigger.vue'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
-import MediaAssetMenuItems from '@/platform/assets/components/MediaAssetMenuItems.vue'
-import { useMediaAssetMenu } from '@/platform/assets/composables/useMediaAssetMenu'
-import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { useAssetsStore } from '@/stores/assetsStore'
-import type { MenuActionEntry, MenuEntry } from '@/types/menuTypes'
-import { getMediaTypeFromFilename } from '@/utils/formatUtil'
 
-const {
-  assets,
-  isSelected,
-  showOutputCount,
-  getOutputCount,
-  showDeleteButton,
-  selectedAssets,
-  isBulkMode
-} = defineProps<{
+const { assets, isSelected, showOutputCount, getOutputCount } = defineProps<{
   assets: AssetItem[]
   isSelected: (assetId: string) => boolean
   showOutputCount: (asset: AssetItem) => boolean
   getOutputCount: (asset: AssetItem) => number
-  showDeleteButton?: boolean
-  selectedAssets?: AssetItem[]
-  isBulkMode?: boolean
 }>()
 
 const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem): void
+  (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
   (e: 'approach-end'): void
   (e: 'zoom', asset: AssetItem): void
-  (e: 'asset-deleted'): void
-  (e: 'bulk-download', assets: AssetItem[]): void
-  (e: 'bulk-delete', assets: AssetItem[]): void
-  (e: 'bulk-add-to-workflow', assets: AssetItem[]): void
-  (e: 'bulk-open-workflow', assets: AssetItem[]): void
-  (e: 'bulk-export-workflow', assets: AssetItem[]): void
   (e: 'output-count-click', asset: AssetItem): void
 }>()
 
-const assetsStore = useAssetsStore()
-const { getMenuEntries } = useMediaAssetMenu({
-  inspectAsset: (asset) => emit('zoom', asset),
-  assetDeleted: () => emit('asset-deleted'),
-  bulkDownload: (assets) => emit('bulk-download', assets),
-  bulkDelete: (assets) => emit('bulk-delete', assets),
-  bulkAddToWorkflow: (assets) => emit('bulk-add-to-workflow', assets),
-  bulkOpenWorkflow: (assets) => emit('bulk-open-workflow', assets),
-  bulkExportWorkflow: (assets) => emit('bulk-export-workflow', assets)
-})
-
 type AssetGridItem = { key: string; asset: AssetItem }
 
 const assetItems = computed<AssetGridItem[]>(() =>
@@ -131,21 +54,6 @@ const assetItems = computed<AssetGridItem[]>(() =>
   }))
 )
 
-function getAssetMenuEntries(asset: AssetItem): MenuEntry[] {
-  return getMenuEntries({
-    asset,
-    assetType: getAssetType(asset.tags),
-    fileKind: getMediaTypeFromFilename(asset.name),
-    showDeleteButton,
-    selectedAssets,
-    isBulkMode
-  })
-}
-
-async function onAssetMenuAction(entry: MenuActionEntry) {
-  await entry.onClick?.()
-}
-
 const gridStyle = {
   display: 'grid',
   gridTemplateColumns: 'repeat(auto-fill, minmax(min(200px, 30vw), 1fr))',

src/components/sidebar/tabs/AssetsSidebarListView.test.ts

@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import { createI18n } from 'vue-i18n'
+import { defineComponent } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
@@ -8,9 +7,9 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
 import AssetsSidebarListView from './AssetsSidebarListView.vue'
 
-vi.mock('@/platform/assets/composables/useMediaAssetMenu', () => ({
-  useMediaAssetMenu: () => ({
-    getMenuEntries: () => []
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
   })
 }))
 
@@ -20,18 +19,7 @@ vi.mock('@/stores/assetsStore', () => ({
   })
 }))
 
-const i18n = createI18n({
-  legacy: false,
-  locale: 'en',
-  fallbackLocale: 'en',
-  missingWarn: false,
-  fallbackWarn: false,
-  messages: {
-    en: {}
-  }
-})
-
-const VirtualGridStub = {
+const VirtualGridStub = defineComponent({
   name: 'VirtualGrid',
   props: {
     items: {
@@ -41,59 +29,7 @@ const VirtualGridStub = {
   },
   template:
     '<div><slot v-for="item in items" :key="item.key" name="item" :item="item" /></div>'
-}
-
-const AssetsListItemStub = {
-  name: 'AssetsListItem',
-  template:
-    '<div class="assets-list-item-stub"><slot /><slot name="actions" /></div>'
-}
-
-const ContextMenuStub = {
-  name: 'ContextMenu',
-  template: '<div class="context-menu-stub"><slot /></div>'
-}
-
-const ContextMenuTriggerStub = {
-  name: 'ContextMenuTrigger',
-  template: '<div class="context-menu-trigger-stub"><slot /></div>'
-}
-
-const ContextMenuContentStub = {
-  name: 'ContextMenuContent',
-  template: '<div class="context-menu-content-stub"><slot /></div>'
-}
-
-const DropdownMenuStub = {
-  name: 'DropdownMenu',
-  props: {
-    open: {
-      type: Boolean,
-      default: false
-    }
-  },
-  template: '<div class="dropdown-menu-stub"><slot /></div>'
-}
-
-const DropdownMenuTriggerStub = {
-  name: 'DropdownMenuTrigger',
-  template: '<div class="dropdown-menu-trigger-stub"><slot /></div>'
-}
-
-const DropdownMenuContentStub = {
-  name: 'DropdownMenuContent',
-  template: '<div class="dropdown-menu-content-stub"><slot /></div>'
-}
-
-const ButtonComponentStub = {
-  name: 'AppButton',
-  template: '<button class="button-stub" type="button"><slot /></button>'
-}
-
-const MediaAssetMenuItemsStub = {
-  name: 'MediaAssetMenuItems',
-  template: '<div class="media-asset-menu-items-stub" />'
-}
+})
 
 const buildAsset = (id: string, name: string): AssetItem =>
   ({
@@ -117,41 +53,7 @@ const mountListView = (assetItems: OutputStackListItem[] = []) =>
       toggleStack: async () => {}
     },
     global: {
-      plugins: [i18n],
       stubs: {
-        ContextMenu: ContextMenuStub,
-        ContextMenuTrigger: ContextMenuTriggerStub,
-        ContextMenuContent: ContextMenuContentStub,
-        DropdownMenu: DropdownMenuStub,
-        DropdownMenuTrigger: DropdownMenuTriggerStub,
-        DropdownMenuContent: DropdownMenuContentStub,
-        MediaAssetMenuItems: MediaAssetMenuItemsStub,
-        VirtualGrid: VirtualGridStub
-      }
-    }
-  })
-
-const mountInteractiveListView = (assetItems: OutputStackListItem[] = []) =>
-  mount(AssetsSidebarListView, {
-    props: {
-      assetItems,
-      selectableAssets: [],
-      isSelected: () => false,
-      isStackExpanded: () => false,
-      toggleStack: async () => {}
-    },
-    global: {
-      plugins: [i18n],
-      stubs: {
-        AssetsListItem: AssetsListItemStub,
-        Button: ButtonComponentStub,
-        ContextMenu: ContextMenuStub,
-        ContextMenuTrigger: ContextMenuTriggerStub,
-        ContextMenuContent: ContextMenuContentStub,
-        DropdownMenu: DropdownMenuStub,
-        DropdownMenuTrigger: DropdownMenuTriggerStub,
-        DropdownMenuContent: DropdownMenuContentStub,
-        MediaAssetMenuItems: MediaAssetMenuItemsStub,
         VirtualGrid: VirtualGridStub
       }
     }
@@ -229,46 +131,4 @@ describe('AssetsSidebarListView', () => {
 
     expect(wrapper.emitted('preview-asset')).toEqual([[imageAsset]])
   })
-
-  it('keeps the row actions menu available after the row loses hover', async () => {
-    const imageAsset = {
-      ...buildAsset('image-asset-open', 'image.png'),
-      user_metadata: {}
-    } satisfies AssetItem
-
-    const wrapper = mountInteractiveListView([buildOutputItem(imageAsset)])
-    const assetListItem = wrapper.find('.assets-list-item-stub')
-
-    await assetListItem.trigger('mouseenter')
-
-    const actionsMenu = wrapper.findComponent(DropdownMenuStub)
-    expect(actionsMenu.exists()).toBe(true)
-
-    actionsMenu.vm.$emit('update:open', true)
-    await nextTick()
-    await assetListItem.trigger('mouseleave')
-    await nextTick()
-
-    expect(wrapper.findComponent(DropdownMenuStub).exists()).toBe(true)
-
-    wrapper.findComponent(DropdownMenuStub).vm.$emit('update:open', false)
-    await nextTick()
-
-    expect(wrapper.findComponent(DropdownMenuStub).exists()).toBe(false)
-  })
-
-  it('does not select the row when clicking the actions trigger', async () => {
-    const imageAsset = {
-      ...buildAsset('image-asset-actions', 'image.png'),
-      user_metadata: {}
-    } satisfies AssetItem
-
-    const wrapper = mountInteractiveListView([buildOutputItem(imageAsset)])
-    const assetListItem = wrapper.find('.assets-list-item-stub')
-
-    await assetListItem.trigger('mouseenter')
-    await wrapper.find('.button-stub').trigger('click')
-
-    expect(wrapper.emitted('select-asset')).toBeUndefined()
-  })
 })

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -16,83 +16,49 @@
           >
             <i class="pi pi-trash text-xs" />
           </LoadingOverlay>
-          <ContextMenu :modal="false">
-            <ContextMenuTrigger as-child>
-              <AssetsListItem
-                role="button"
-                tabindex="0"
-                :aria-label="
-                  t('assetBrowser.ariaLabel.assetCard', {
-                    name: getAssetDisplayName(item.asset),
-                    type: getAssetMediaType(item.asset)
-                  })
-                "
-                :class="
-                  cn(
-                    getAssetCardClass(isSelected(item.asset.id)),
-                    item.isChild && 'pl-6'
-                  )
-                "
-                :preview-url="getAssetPreviewUrl(item.asset)"
-                :preview-alt="getAssetDisplayName(item.asset)"
-                :icon-name="iconForMediaType(getAssetMediaType(item.asset))"
-                :is-video-preview="isVideoAsset(item.asset)"
-                :primary-text="getAssetPrimaryText(item.asset)"
-                :secondary-text="getAssetSecondaryText(item.asset)"
-                :stack-count="getStackCount(item.asset)"
-                :stack-indicator-label="t('mediaAsset.actions.seeMoreOutputs')"
-                :stack-expanded="isStackExpanded(item.asset)"
-                @mouseenter="onAssetEnter(item.asset.id)"
-                @mouseleave="onAssetLeave(item.asset.id)"
-                @click.stop="emit('select-asset', item.asset, selectableAssets)"
-                @dblclick.stop="emit('preview-asset', item.asset)"
-                @preview-click="emit('preview-asset', item.asset)"
-                @stack-toggle="void toggleStack(item.asset)"
+          <AssetsListItem
+            role="button"
+            tabindex="0"
+            :aria-label="
+              t('assetBrowser.ariaLabel.assetCard', {
+                name: getAssetDisplayName(item.asset),
+                type: getAssetMediaType(item.asset)
+              })
+            "
+            :class="
+              cn(
+                getAssetCardClass(isSelected(item.asset.id)),
+                item.isChild && 'pl-6'
+              )
+            "
+            :preview-url="getAssetPreviewUrl(item.asset)"
+            :preview-alt="getAssetDisplayName(item.asset)"
+            :icon-name="iconForMediaType(getAssetMediaType(item.asset))"
+            :is-video-preview="isVideoAsset(item.asset)"
+            :primary-text="getAssetPrimaryText(item.asset)"
+            :secondary-text="getAssetSecondaryText(item.asset)"
+            :stack-count="getStackCount(item.asset)"
+            :stack-indicator-label="t('mediaAsset.actions.seeMoreOutputs')"
+            :stack-expanded="isStackExpanded(item.asset)"
+            @mouseenter="onAssetEnter(item.asset.id)"
+            @mouseleave="onAssetLeave(item.asset.id)"
+            @contextmenu.prevent.stop="emit('context-menu', $event, item.asset)"
+            @click.stop="emit('select-asset', item.asset, selectableAssets)"
+            @dblclick.stop="emit('preview-asset', item.asset)"
+            @preview-click="emit('preview-asset', item.asset)"
+            @stack-toggle="void toggleStack(item.asset)"
+          >
+            <template v-if="hoveredAssetId === item.asset.id" #actions>
+              <Button
+                variant="secondary"
+                size="icon"
+                :aria-label="t('mediaAsset.actions.moreOptions')"
+                @click.stop="emit('context-menu', $event, item.asset)"
               >
-                <template v-if="shouldShowActionsMenu(item.asset.id)" #actions>
-                  <DropdownMenu
-                    :open="openActionsAssetId === item.asset.id"
-                    @update:open="
-                      onActionsMenuOpenChange(item.asset.id, $event)
-                    "
-                  >
-                    <DropdownMenuTrigger as-child>
-                      <Button
-                        variant="secondary"
-                        size="icon"
-                        :aria-label="t('mediaAsset.actions.moreOptions')"
-                        @click.stop
-                      >
-                        <i class="icon-[lucide--ellipsis] size-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                      close-on-scroll
-                      class="z-1700 bg-transparent p-0 shadow-lg"
-                      :side-offset="4"
-                      :collision-padding="8"
-                    >
-                      <MediaAssetMenuItems
-                        :entries="getAssetMenuEntries(item.asset)"
-                        surface="dropdown"
-                        @action="void onAssetMenuAction($event)"
-                      />
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </template>
-              </AssetsListItem>
-            </ContextMenuTrigger>
-            <ContextMenuContent
-              close-on-scroll
-              class="z-1700 bg-transparent p-0 shadow-lg"
-            >
-              <MediaAssetMenuItems
-                :entries="getAssetMenuEntries(item.asset)"
-                surface="context"
-                @action="void onAssetMenuAction($event)"
-              />
-            </ContextMenuContent>
-          </ContextMenu>
+                <i class="icon-[lucide--ellipsis] size-4" />
+              </Button>
+            </template>
+          </AssetsListItem>
         </div>
       </template>
     </VirtualGrid>
@@ -106,23 +72,13 @@ import { useI18n } from 'vue-i18n'
 import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Button from '@/components/ui/button/Button.vue'
-import ContextMenu from '@/components/ui/context-menu/ContextMenu.vue'
-import ContextMenuContent from '@/components/ui/context-menu/ContextMenuContent.vue'
-import ContextMenuTrigger from '@/components/ui/context-menu/ContextMenuTrigger.vue'
-import DropdownMenu from '@/components/ui/dropdown-menu/DropdownMenu.vue'
-import DropdownMenuContent from '@/components/ui/dropdown-menu/DropdownMenuContent.vue'
-import DropdownMenuTrigger from '@/components/ui/dropdown-menu/DropdownMenuTrigger.vue'
-import { useMediaAssetMenu } from '@/platform/assets/composables/useMediaAssetMenu'
-import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
-import MediaAssetMenuItems from '@/platform/assets/components/MediaAssetMenuItems.vue'
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { getAssetDisplayName } from '@/platform/assets/utils/assetMetadataUtils'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
 import { useAssetsStore } from '@/stores/assetsStore'
-import type { MenuActionEntry, MenuEntry } from '@/types/menuTypes'
 import {
   formatDuration,
   formatSize,
@@ -136,19 +92,13 @@ const {
   selectableAssets,
   isSelected,
   isStackExpanded,
-  toggleStack,
-  showDeleteButton,
-  selectedAssets,
-  isBulkMode
+  toggleStack
 } = defineProps<{
   assetItems: OutputStackListItem[]
   selectableAssets: AssetItem[]
   isSelected: (assetId: string) => boolean
   isStackExpanded: (asset: AssetItem) => boolean
   toggleStack: (asset: AssetItem) => Promise<void>
-  showDeleteButton?: boolean
-  selectedAssets?: AssetItem[]
-  isBulkMode?: boolean
 }>()
 
 const assetsStore = useAssetsStore()
@@ -156,27 +106,12 @@ const assetsStore = useAssetsStore()
 const emit = defineEmits<{
   (e: 'select-asset', asset: AssetItem, assets?: AssetItem[]): void
   (e: 'preview-asset', asset: AssetItem): void
+  (e: 'context-menu', event: MouseEvent, asset: AssetItem): void
   (e: 'approach-end'): void
-  (e: 'asset-deleted'): void
-  (e: 'bulk-download', assets: AssetItem[]): void
-  (e: 'bulk-delete', assets: AssetItem[]): void
-  (e: 'bulk-add-to-workflow', assets: AssetItem[]): void
-  (e: 'bulk-open-workflow', assets: AssetItem[]): void
-  (e: 'bulk-export-workflow', assets: AssetItem[]): void
 }>()
 
 const { t } = useI18n()
 const hoveredAssetId = ref<string | null>(null)
-const openActionsAssetId = ref<string | null>(null)
-const { getMenuEntries } = useMediaAssetMenu({
-  inspectAsset: (asset) => emit('preview-asset', asset),
-  assetDeleted: () => emit('asset-deleted'),
-  bulkDownload: (assets) => emit('bulk-download', assets),
-  bulkDelete: (assets) => emit('bulk-delete', assets),
-  bulkAddToWorkflow: (assets) => emit('bulk-add-to-workflow', assets),
-  bulkOpenWorkflow: (assets) => emit('bulk-open-workflow', assets),
-  bulkExportWorkflow: (assets) => emit('bulk-export-workflow', assets)
-})
 
 const listGridStyle = {
   display: 'grid',
@@ -193,17 +128,6 @@ function getAssetMediaType(asset: AssetItem) {
   return getMediaTypeFromFilename(asset.name)
 }
 
-function getAssetMenuEntries(asset: AssetItem): MenuEntry[] {
-  return getMenuEntries({
-    asset,
-    assetType: getAssetType(asset.tags),
-    fileKind: getAssetMediaType(asset),
-    showDeleteButton,
-    selectedAssets,
-    isBulkMode
-  })
-}
-
 function isVideoAsset(asset: AssetItem): boolean {
   return getAssetMediaType(asset) === 'video'
 }
@@ -256,27 +180,6 @@ function getAssetCardClass(selected: boolean): string {
   )
 }
 
-function shouldShowActionsMenu(assetId: string): boolean {
-  return (
-    hoveredAssetId.value === assetId || openActionsAssetId.value === assetId
-  )
-}
-
-function onActionsMenuOpenChange(assetId: string, isOpen: boolean): void {
-  if (isOpen) {
-    openActionsAssetId.value = assetId
-    return
-  }
-
-  if (openActionsAssetId.value === assetId) {
-    openActionsAssetId.value = null
-  }
-}
-
-async function onAssetMenuAction(entry: MenuActionEntry) {
-  await entry.onClick?.()
-}
-
 function onAssetEnter(assetId: string) {
   hoveredAssetId.value = assetId
 }

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -94,18 +94,10 @@
           :is-selected="isSelected"
           :selectable-assets="listViewSelectableAssets"
           :is-stack-expanded="isListViewStackExpanded"
-          :show-delete-button="shouldShowDeleteButton"
-          :selected-assets="selectedAssets"
-          :is-bulk-mode="isBulkMode"
           :toggle-stack="toggleListViewStack"
-          @asset-deleted="refreshAssets"
-          @bulk-download="handleBulkDownload"
-          @bulk-delete="handleBulkDelete"
-          @bulk-add-to-workflow="handleBulkAddToWorkflow"
-          @bulk-open-workflow="handleBulkOpenWorkflow"
-          @bulk-export-workflow="handleBulkExportWorkflow"
           @select-asset="handleAssetSelect"
           @preview-asset="handleZoomClick"
+          @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
         />
         <AssetsSidebarGridView
@@ -114,16 +106,8 @@
           :is-selected="isSelected"
           :show-output-count="shouldShowOutputCount"
           :get-output-count="getOutputCount"
-          :show-delete-button="shouldShowDeleteButton"
-          :selected-assets="selectedAssets"
-          :is-bulk-mode="isBulkMode"
-          @asset-deleted="refreshAssets"
-          @bulk-download="handleBulkDownload"
-          @bulk-delete="handleBulkDelete"
-          @bulk-add-to-workflow="handleBulkAddToWorkflow"
-          @bulk-open-workflow="handleBulkOpenWorkflow"
-          @bulk-export-workflow="handleBulkExportWorkflow"
           @select-asset="handleAssetSelect"
+          @context-menu="handleAssetContextMenu"
           @approach-end="handleApproachEnd"
           @zoom="handleZoomClick"
           @output-count-click="enterFolderView"
@@ -190,6 +174,24 @@
     v-model:active-index="galleryActiveIndex"
     :all-gallery-items="galleryItems"
   />
+  <MediaAssetContextMenu
+    v-if="contextMenuAsset"
+    ref="contextMenuRef"
+    :asset="contextMenuAsset"
+    :asset-type="contextMenuAssetType"
+    :file-kind="contextMenuFileKind"
+    :show-delete-button="shouldShowDeleteButton"
+    :selected-assets="selectedAssets"
+    :is-bulk-mode="isBulkMode"
+    @zoom="handleZoomClick(contextMenuAsset)"
+    @hide="handleContextMenuHide"
+    @asset-deleted="refreshAssets"
+    @bulk-download="handleBulkDownload"
+    @bulk-delete="handleBulkDelete"
+    @bulk-add-to-workflow="handleBulkAddToWorkflow"
+    @bulk-open-workflow="handleBulkOpenWorkflow"
+    @bulk-export-workflow="handleBulkExportWorkflow"
+  />
 </template>
 
 <script setup lang="ts">
@@ -198,12 +200,14 @@ import {
   useDebounceFn,
   useElementHover,
   useResizeObserver,
-  useStorage
+  useStorage,
+  useTimeoutFn
 } from '@vueuse/core'
 import { useToast } from 'primevue/usetoast'
 import {
   computed,
   defineAsyncComponent,
+  nextTick,
   onMounted,
   onUnmounted,
   ref,
@@ -220,7 +224,9 @@ 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'
+import MediaAssetContextMenu from '@/platform/assets/components/MediaAssetContextMenu.vue'
 import MediaAssetFilterBar from '@/platform/assets/components/MediaAssetFilterBar.vue'
+import { getAssetType } from '@/platform/assets/composables/media/assetMappers'
 import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { useAssetSelection } from '@/platform/assets/composables/useAssetSelection'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
@@ -230,6 +236,7 @@ import type { OutputAssetMetadata } from '@/platform/assets/schemas/assetMetadat
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { getAssetDisplayName } from '@/platform/assets/utils/assetMetadataUtils'
+import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 import { isCloud } from '@/platform/distribution/types'
 import { useDialogStore } from '@/stores/dialogStore'
@@ -260,6 +267,9 @@ const viewMode = useStorage<'list' | 'grid'>(
 )
 const isListView = computed(() => viewMode.value === 'list')
 
+const contextMenuRef = ref<InstanceType<typeof MediaAssetContextMenu>>()
+const contextMenuAsset = ref<AssetItem | null>(null)
+
 // Determine if delete button should be shown
 // Hide delete button when in input tab and not in cloud (OSS mode - files are from local folders)
 const shouldShowDeleteButton = computed(() => {
@@ -267,6 +277,14 @@ const shouldShowDeleteButton = computed(() => {
   return true
 })
 
+const contextMenuAssetType = computed(() =>
+  contextMenuAsset.value ? getAssetType(contextMenuAsset.value.tags) : 'input'
+)
+
+const contextMenuFileKind = computed<MediaKind>(() =>
+  getMediaTypeFromFilename(contextMenuAsset.value?.name ?? '')
+)
+
 const shouldShowOutputCount = (item: AssetItem): boolean => {
   if (activeTab.value !== 'output' || isInFolderView.value) {
     return false
@@ -484,6 +502,26 @@ function handleAssetSelect(asset: AssetItem, assets?: AssetItem[]) {
   handleAssetClick(asset, index, assetList)
 }
 
+const { start: scheduleCleanup, stop: cancelCleanup } = useTimeoutFn(
+  () => {
+    contextMenuAsset.value = null
+  },
+  0,
+  { immediate: false }
+)
+
+function handleAssetContextMenu(event: MouseEvent, asset: AssetItem) {
+  cancelCleanup()
+  contextMenuAsset.value = asset
+  void nextTick(() => {
+    contextMenuRef.value?.show(event)
+  })
+}
+
+function handleContextMenuHide() {
+  scheduleCleanup()
+}
+
 const handleBulkDownload = (assets: AssetItem[]) => {
   downloadMultipleAssets(assets)
   clearSelection()

src/components/sidebar/tabs/JobHistorySidebarTab.test.ts

@@ -1,76 +1,78 @@
 import { mount } from '@vue/test-utils'
 import { createI18n } from 'vue-i18n'
-import { describe, expect, it, beforeEach, vi } from 'vitest'
-import { computed, defineComponent, ref } from 'vue'
-
-import type { JobListItem } from '@/composables/queue/useJobList'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
 
 import JobHistorySidebarTab from './JobHistorySidebarTab.vue'
 
-const testState = vi.hoisted(() => ({
-  groupedJobItems: [] as Array<{
-    key: string
-    label: string
-    items: JobListItem[]
-  }>,
-  filteredTasks: [] as JobListItem[],
-  getJobMenuEntries: vi.fn(() => []),
-  cancelJob: vi.fn(),
-  openResultGallery: vi.fn(),
-  showQueueClearHistoryDialog: vi.fn(),
-  commandExecute: vi.fn(),
-  showDialog: vi.fn(),
-  clearInitializationByJobIds: vi.fn(),
-  queueDelete: vi.fn()
-}))
-
-const JobAssetsListStub = defineComponent({
-  name: 'JobAssetsList',
+const JobDetailsPopoverStub = defineComponent({
+  name: 'JobDetailsPopover',
   props: {
-    displayedJobGroups: {
-      type: Array,
-      required: true
-    },
-    getMenuEntries: {
-      type: Function,
-      required: true
-    }
+    jobId: { type: String, required: true },
+    workflowId: { type: String, default: undefined }
   },
-  template: '<div class="job-assets-list-stub" />'
+  template: '<div class="job-details-popover-stub" />'
 })
 
-vi.mock('@/composables/queue/useJobList', () => ({
-  useJobList: () => ({
-    selectedJobTab: ref('All'),
-    selectedWorkflowFilter: ref('all'),
-    selectedSortMode: ref('mostRecent'),
-    searchQuery: ref(''),
-    hasFailedJobs: ref(false),
-    filteredTasks: computed(() => testState.filteredTasks),
-    groupedJobItems: computed(() => testState.groupedJobItems)
-  })
-}))
+vi.mock('@/composables/queue/useJobList', async () => {
+  const { ref } = await import('vue')
+  const jobHistoryItem = {
+    id: 'job-1',
+    title: 'Job 1',
+    meta: 'meta',
+    state: 'completed',
+    taskRef: {
+      workflowId: 'workflow-1',
+      previewOutput: {
+        isImage: true,
+        isVideo: false,
+        url: '/api/view/job-1.png'
+      }
+    }
+  }
+
+  return {
+    useJobList: () => ({
+      selectedJobTab: ref('All'),
+      selectedWorkflowFilter: ref('all'),
+      selectedSortMode: ref('mostRecent'),
+      searchQuery: ref(''),
+      hasFailedJobs: ref(false),
+      filteredTasks: ref([]),
+      groupedJobItems: ref([
+        {
+          key: 'group-1',
+          label: 'Group 1',
+          items: [jobHistoryItem]
+        }
+      ])
+    })
+  }
+})
 
 vi.mock('@/composables/queue/useJobMenu', () => ({
   useJobMenu: () => ({
-    getJobMenuEntries: testState.getJobMenuEntries,
-    cancelJob: testState.cancelJob
+    jobMenuEntries: [],
+    cancelJob: vi.fn()
   })
 }))
 
 vi.mock('@/composables/queue/useQueueClearHistoryDialog', () => ({
   useQueueClearHistoryDialog: () => ({
-    showQueueClearHistoryDialog: testState.showQueueClearHistoryDialog
+    showQueueClearHistoryDialog: vi.fn()
   })
 }))
 
-vi.mock('@/composables/queue/useResultGallery', () => ({
-  useResultGallery: () => ({
-    galleryActiveIndex: ref(-1),
-    galleryItems: ref([]),
-    onViewItem: testState.openResultGallery
-  })
-}))
+vi.mock('@/composables/queue/useResultGallery', async () => {
+  const { ref } = await import('vue')
+  return {
+    useResultGallery: () => ({
+      galleryActiveIndex: ref(-1),
+      galleryItems: ref([]),
+      onViewItem: vi.fn()
+    })
+  }
+})
 
 vi.mock('@/composables/useErrorHandling', () => ({
   useErrorHandling: () => ({
@@ -82,19 +84,19 @@ vi.mock('@/composables/useErrorHandling', () => ({
 
 vi.mock('@/stores/commandStore', () => ({
   useCommandStore: () => ({
-    execute: testState.commandExecute
+    execute: vi.fn()
   })
 }))
 
 vi.mock('@/stores/dialogStore', () => ({
   useDialogStore: () => ({
-    showDialog: testState.showDialog
+    showDialog: vi.fn()
   })
 }))
 
 vi.mock('@/stores/executionStore', () => ({
   useExecutionStore: () => ({
-    clearInitializationByJobIds: testState.clearInitializationByJobIds
+    clearInitializationByJobIds: vi.fn()
   })
 }))
 
@@ -102,7 +104,7 @@ vi.mock('@/stores/queueStore', () => ({
   useQueueStore: () => ({
     runningTasks: [],
     pendingTasks: [],
-    delete: testState.queueDelete
+    delete: vi.fn()
   })
 }))
 
@@ -112,33 +114,11 @@ const i18n = createI18n({
   messages: { en: {} }
 })
 
-const buildJob = (overrides: Partial<JobListItem> = {}): JobListItem =>
-  ({
-    id: 'job-1',
-    title: 'Job 1',
-    meta: 'meta',
-    state: 'completed',
-    taskRef: {
-      workflowId: 'workflow-1',
-      previewOutput: {
-        isImage: true,
-        isVideo: false,
-        is3D: false,
-        url: '/api/view/job-1.png'
-      }
-    },
-    ...overrides
-  }) as JobListItem
-
-const setDisplayedJobs = (items: JobListItem[]) => {
-  testState.filteredTasks = items
-  testState.groupedJobItems = [
-    {
-      key: 'group-1',
-      label: 'Group 1',
-      items
-    }
-  ]
+const SidebarTabTemplateStub = {
+  name: 'SidebarTabTemplate',
+  props: ['title'],
+  template:
+    '<div><slot name="alt-title" /><slot name="header" /><slot name="body" /></div>'
 }
 
 function mountComponent() {
@@ -146,106 +126,38 @@ function mountComponent() {
     global: {
       plugins: [i18n],
       stubs: {
-        SidebarTabTemplate: {
-          name: 'SidebarTabTemplate',
-          template:
-            '<div><slot name="alt-title" /><slot name="header" /><slot name="body" /></div>'
-        },
+        SidebarTabTemplate: SidebarTabTemplateStub,
         JobFilterTabs: true,
         JobFilterActions: true,
         JobHistoryActionsMenu: true,
-        MediaLightbox: true,
-        JobAssetsList: JobAssetsListStub,
-        teleport: true
+        JobContextMenu: true,
+        ResultGallery: true,
+        teleport: true,
+        JobDetailsPopover: JobDetailsPopoverStub
       }
     }
   })
 }
 
+afterEach(() => {
+  vi.useRealTimers()
+})
+
 describe('JobHistorySidebarTab', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    setDisplayedJobs([buildJob()])
-  })
-
-  it('passes grouped jobs and menu getter to JobAssetsList', () => {
+  it('shows the job details popover for jobs in the history panel', async () => {
+    vi.useFakeTimers()
     const wrapper = mountComponent()
-    const jobAssetsList = wrapper.findComponent(JobAssetsListStub)
+    const jobRow = wrapper.find('[data-job-id="job-1"]')
 
-    expect(jobAssetsList.props('displayedJobGroups')).toEqual(
-      testState.groupedJobItems
-    )
-    expect(jobAssetsList.props('getMenuEntries')).toBe(
-      testState.getJobMenuEntries
-    )
-  })
+    await jobRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
 
-  it('forwards regular view-item events to the result gallery', async () => {
-    const job = buildJob()
-    setDisplayedJobs([job])
-    const wrapper = mountComponent()
-
-    wrapper.findComponent(JobAssetsListStub).vm.$emit('view-item', job)
-
-    expect(testState.openResultGallery).toHaveBeenCalledWith(job)
-    expect(testState.showDialog).not.toHaveBeenCalled()
-  })
-
-  it('opens the 3D viewer dialog for 3D view-item events', async () => {
-    const job = buildJob({
-      taskRef: {
-        workflowId: 'workflow-1',
-        previewOutput: {
-          isImage: false,
-          isVideo: false,
-          is3D: true,
-          url: '/api/view/job-1.glb'
-        }
-      } as JobListItem['taskRef']
+    const popover = wrapper.findComponent(JobDetailsPopoverStub)
+    expect(popover.exists()).toBe(true)
+    expect(popover.props()).toMatchObject({
+      jobId: 'job-1',
+      workflowId: 'workflow-1'
     })
-    setDisplayedJobs([job])
-    const wrapper = mountComponent()
-
-    wrapper.findComponent(JobAssetsListStub).vm.$emit('view-item', job)
-
-    expect(testState.showDialog).toHaveBeenCalledWith(
-      expect.objectContaining({
-        key: 'asset-3d-viewer',
-        title: job.title,
-        props: { modelUrl: '/api/view/job-1.glb' }
-      })
-    )
-    expect(testState.openResultGallery).not.toHaveBeenCalled()
-  })
-
-  it('forwards cancel-item events to useJobMenu.cancelJob', async () => {
-    const job = buildJob({ state: 'running' })
-    setDisplayedJobs([job])
-    const wrapper = mountComponent()
-
-    wrapper.findComponent(JobAssetsListStub).vm.$emit('cancel-item', job)
-
-    expect(testState.cancelJob).toHaveBeenCalledWith(job)
-  })
-
-  it('forwards delete-item events to queueStore.delete', async () => {
-    const job = buildJob()
-    const taskRef = job.taskRef
-    const wrapper = mountComponent()
-
-    wrapper.findComponent(JobAssetsListStub).vm.$emit('delete-item', job)
-
-    expect(testState.queueDelete).toHaveBeenCalledWith(taskRef)
-  })
-
-  it('runs menu actions emitted by JobAssetsList', async () => {
-    const onClick = vi.fn()
-    const wrapper = mountComponent()
-
-    wrapper
-      .findComponent(JobAssetsListStub)
-      .vm.$emit('menu-action', { key: 'test', label: 'Test', onClick })
-
-    expect(onClick).toHaveBeenCalled()
   })
 })

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -48,11 +48,15 @@
     <template #body>
       <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
-        :get-menu-entries="getJobMenuEntries"
         @cancel-item="onCancelItem"
         @delete-item="onDeleteItem"
-        @menu-action="onJobMenuAction"
         @view-item="onViewItem"
+        @menu="onMenuItem"
+      />
+      <JobContextMenu
+        ref="jobContextMenuRef"
+        :entries="jobMenuEntries"
+        @action="onJobMenuAction"
       />
       <MediaLightbox
         v-model:active-index="galleryActiveIndex"
@@ -63,14 +67,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue'
+import { computed, defineAsyncComponent, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import JobFilterActions from '@/components/queue/job/JobFilterActions.vue'
 import JobFilterTabs from '@/components/queue/job/JobFilterTabs.vue'
 import JobAssetsList from '@/components/queue/job/JobAssetsList.vue'
+import JobContextMenu from '@/components/queue/job/JobContextMenu.vue'
 import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
-import type { MenuActionEntry } from '@/types/menuTypes'
+import type { MenuEntry } from '@/composables/queue/useJobMenu'
 import { useJobMenu } from '@/composables/queue/useJobMenu'
 import { useJobList } from '@/composables/queue/useJobList'
 import type { JobListItem } from '@/composables/queue/useJobList'
@@ -177,7 +182,13 @@ const onInspectAsset = (item: JobListItem) => {
   void onViewItem(item)
 }
 
-const { getJobMenuEntries, cancelJob } = useJobMenu(onInspectAsset)
+const currentMenuItem = ref<JobListItem | null>(null)
+const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
+
+const { jobMenuEntries, cancelJob } = useJobMenu(
+  () => currentMenuItem.value,
+  onInspectAsset
+)
 
 const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
   await cancelJob(item)
@@ -188,9 +199,14 @@ const onDeleteItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
   await queueStore.delete(item.taskRef)
 })
 
-const onJobMenuAction = wrapWithErrorHandlingAsync(
-  async (entry: MenuActionEntry) => {
-    if (entry.onClick) await entry.onClick()
-  }
-)
+const onMenuItem = (item: JobListItem, event: Event) => {
+  currentMenuItem.value = item
+  jobContextMenuRef.value?.open(event)
+}
+
+const onJobMenuAction = wrapWithErrorHandlingAsync(async (entry: MenuEntry) => {
+  if (entry.kind === 'divider') return
+  if (entry.onClick) await entry.onClick()
+  jobContextMenuRef.value?.hide()
+})
 </script>

src/components/ui/context-menu/ContextMenu.test.ts

@@ -1,57 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
-import { defineComponent, nextTick, ref } from 'vue'
-
-import ContextMenu from './ContextMenu.vue'
-import ContextMenuContent from './ContextMenuContent.vue'
-import ContextMenuItem from './ContextMenuItem.vue'
-import ContextMenuSeparator from './ContextMenuSeparator.vue'
-import ContextMenuTrigger from './ContextMenuTrigger.vue'
-
-const TestContextMenu = defineComponent({
-  components: {
-    ContextMenu,
-    ContextMenuTrigger,
-    ContextMenuContent,
-    ContextMenuItem,
-    ContextMenuSeparator
-  },
-  setup() {
-    const open = ref(false)
-
-    return { open }
-  },
-  template: `
-    <ContextMenu v-model:open="open" :modal="false">
-      <ContextMenuTrigger as-child>
-        <button type="button">Trigger</button>
-      </ContextMenuTrigger>
-      <ContextMenuContent close-on-scroll>
-        <ContextMenuItem text-value="First item">First item</ContextMenuItem>
-        <ContextMenuSeparator />
-      </ContextMenuContent>
-    </ContextMenu>
-  `
-})
-
-afterEach(() => {
-  document.body.innerHTML = ''
-})
-
-describe('ContextMenu', () => {
-  it('closes the content on scroll when close-on-scroll is enabled', async () => {
-    const wrapper = mount(TestContextMenu, {
-      attachTo: document.body
-    })
-
-    await wrapper.find('button').trigger('contextmenu')
-    await nextTick()
-
-    expect(wrapper.vm.open).toBe(true)
-
-    window.dispatchEvent(new Event('scroll'))
-    await nextTick()
-
-    expect(wrapper.vm.open).toBe(false)
-  })
-})

src/components/ui/context-menu/ContextMenu.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'
-import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<ContextMenuRootProps>()
-const emits = defineEmits<ContextMenuRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <ContextMenuRoot v-bind="forwarded">
-    <slot />
-  </ContextMenuRoot>
-</template>

src/components/ui/context-menu/ContextMenuContent.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import { reactiveOmit, useEventListener } from '@vueuse/core'
-import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui'
-import {
-  ContextMenuContent,
-  ContextMenuPortal,
-  injectContextMenuRootContext,
-  useForwardPropsEmits
-} from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const props = withDefaults(
-  defineProps<
-    ContextMenuContentProps & {
-      class?: HTMLAttributes['class']
-      closeOnScroll?: boolean
-    }
-  >(),
-  {
-    closeOnScroll: false
-  }
-)
-const emits = defineEmits<ContextMenuContentEmits>()
-
-const delegatedProps = reactiveOmit(props, 'class', 'closeOnScroll')
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-const rootContext = injectContextMenuRootContext()
-
-useEventListener(
-  window,
-  'scroll',
-  () => {
-    if (props.closeOnScroll) {
-      rootContext.onOpenChange(false)
-    }
-  },
-  { capture: true, passive: true }
-)
-</script>
-
-<template>
-  <ContextMenuPortal>
-    <ContextMenuContent
-      v-bind="forwarded"
-      :class="
-        cn(
-          'bg-popover text-popover-foreground z-1700 min-w-32 overflow-hidden rounded-md border p-1 shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-          props.class
-        )
-      "
-    >
-      <slot />
-    </ContextMenuContent>
-  </ContextMenuPortal>
-</template>

src/components/ui/context-menu/ContextMenuItem.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui'
-import { cn } from '@/utils/tailwindUtil'
-
-const props = defineProps<
-  ContextMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }
->()
-const emits = defineEmits<ContextMenuItemEmits>()
-
-const delegatedProps = reactiveOmit(props, 'class')
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <ContextMenuItem
-    v-bind="forwarded"
-    :class="
-      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50',
-        inset && 'pl-8',
-        props.class
-      )
-    "
-  >
-    <slot />
-  </ContextMenuItem>
-</template>

src/components/ui/context-menu/ContextMenuSeparator.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import type { ContextMenuSeparatorProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { ContextMenuSeparator } from 'reka-ui'
-import { cn } from '@/utils/tailwindUtil'
-
-const props = defineProps<
-  ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }
->()
-
-const delegatedProps = reactiveOmit(props, 'class')
-</script>
-
-<template>
-  <ContextMenuSeparator
-    v-bind="delegatedProps"
-    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
-  />
-</template>

src/components/ui/context-menu/ContextMenuTrigger.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import type { ContextMenuTriggerProps } from 'reka-ui'
-import { ContextMenuTrigger, useForwardProps } from 'reka-ui'
-
-const props = defineProps<ContextMenuTriggerProps>()
-
-const forwardedProps = useForwardProps(props)
-</script>
-
-<template>
-  <ContextMenuTrigger v-bind="forwardedProps">
-    <slot />
-  </ContextMenuTrigger>
-</template>

src/components/ui/dropdown-menu/DropdownMenu.test.ts

@@ -1,57 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
-import { defineComponent, nextTick, ref } from 'vue'
-
-import DropdownMenu from './DropdownMenu.vue'
-import DropdownMenuContent from './DropdownMenuContent.vue'
-import DropdownMenuItem from './DropdownMenuItem.vue'
-import DropdownMenuSeparator from './DropdownMenuSeparator.vue'
-import DropdownMenuTrigger from './DropdownMenuTrigger.vue'
-
-const TestDropdownMenu = defineComponent({
-  components: {
-    DropdownMenu,
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuSeparator
-  },
-  setup() {
-    const open = ref(false)
-
-    return { open }
-  },
-  template: `
-    <DropdownMenu v-model:open="open">
-      <DropdownMenuTrigger as-child>
-        <button type="button">Trigger</button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent close-on-scroll>
-        <DropdownMenuItem text-value="First item">First item</DropdownMenuItem>
-        <DropdownMenuSeparator />
-      </DropdownMenuContent>
-    </DropdownMenu>
-  `
-})
-
-afterEach(() => {
-  document.body.innerHTML = ''
-})
-
-describe('DropdownMenu', () => {
-  it('closes the content on scroll when close-on-scroll is enabled', async () => {
-    const wrapper = mount(TestDropdownMenu, {
-      attachTo: document.body
-    })
-
-    await wrapper.find('button').trigger('click')
-    await nextTick()
-
-    expect(wrapper.vm.open).toBe(true)
-
-    window.dispatchEvent(new Event('scroll'))
-    await nextTick()
-
-    expect(wrapper.vm.open).toBe(false)
-  })
-})

src/components/ui/dropdown-menu/DropdownMenu.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
-import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
-
-const props = defineProps<DropdownMenuRootProps>()
-const emits = defineEmits<DropdownMenuRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DropdownMenuRoot v-bind="forwarded">
-    <slot />
-  </DropdownMenuRoot>
-</template>

src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import { reactiveOmit, useEventListener } from '@vueuse/core'
-import type {
-  DropdownMenuContentEmits,
-  DropdownMenuContentProps
-} from 'reka-ui'
-import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  injectDropdownMenuRootContext,
-  useForwardPropsEmits
-} from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const props = withDefaults(
-  defineProps<
-    DropdownMenuContentProps & {
-      class?: HTMLAttributes['class']
-      closeOnScroll?: boolean
-    }
-  >(),
-  {
-    closeOnScroll: false,
-    sideOffset: 4
-  }
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
-
-const delegatedProps = reactiveOmit(props, 'class', 'closeOnScroll')
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-const rootContext = injectDropdownMenuRootContext()
-
-useEventListener(
-  window,
-  'scroll',
-  () => {
-    if (props.closeOnScroll) {
-      rootContext.onOpenChange(false)
-    }
-  },
-  { capture: true, passive: true }
-)
-</script>
-
-<template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      v-bind="forwarded"
-      :class="
-        cn(
-          'bg-popover text-popover-foreground z-1700 min-w-32 overflow-hidden rounded-md border p-1 shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-          props.class
-        )
-      "
-    >
-      <slot />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
-</template>

src/components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import type { DropdownMenuItemProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DropdownMenuItem, useForwardProps } from 'reka-ui'
-import { cn } from '@/utils/tailwindUtil'
-
-const props = defineProps<
-  DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }
->()
-
-const delegatedProps = reactiveOmit(props, 'class')
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DropdownMenuItem
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
-        inset && 'pl-8',
-        props.class
-      )
-    "
-  >
-    <slot />
-  </DropdownMenuItem>
-</template>

src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import type { DropdownMenuSeparatorProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
-import { DropdownMenuSeparator } from 'reka-ui'
-import { cn } from '@/utils/tailwindUtil'
-
-const props = defineProps<
-  DropdownMenuSeparatorProps & {
-    class?: HTMLAttributes['class']
-  }
->()
-
-const delegatedProps = reactiveOmit(props, 'class')
-</script>
-
-<template>
-  <DropdownMenuSeparator
-    v-bind="delegatedProps"
-    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
-  />
-</template>

src/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable vue/no-unused-properties */
-import type { DropdownMenuTriggerProps } from 'reka-ui'
-import { DropdownMenuTrigger, useForwardProps } from 'reka-ui'
-
-const props = defineProps<DropdownMenuTriggerProps>()
-
-const forwardedProps = useForwardProps(props)
-</script>
-
-<template>
-  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
-    <slot />
-  </DropdownMenuTrigger>
-</template>

src/composables/graph/useErrorClearingHooks.test.ts

@@ -315,6 +315,45 @@ describe('installErrorClearingHooks lifecycle', () => {
     cleanup()
     expect(graph.onNodeAdded).toBe(originalHook)
   })
+
+  it('restores original node callbacks when a node is removed', () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('test')
+    node.addInput('clip', 'CLIP')
+    node.addWidget('number', 'steps', 20, () => undefined, {})
+    const originalOnConnectionsChange = vi.fn()
+    const originalOnWidgetChanged = vi.fn()
+    node.onConnectionsChange = originalOnConnectionsChange
+    node.onWidgetChanged = originalOnWidgetChanged
+    graph.add(node)
+
+    installErrorClearingHooks(graph)
+
+    // Callbacks should be chained (not the originals)
+    expect(node.onConnectionsChange).not.toBe(originalOnConnectionsChange)
+    expect(node.onWidgetChanged).not.toBe(originalOnWidgetChanged)
+
+    // Simulate node removal via the graph hook
+    graph.onNodeRemoved!(node)
+
+    // Original callbacks should be restored
+    expect(node.onConnectionsChange).toBe(originalOnConnectionsChange)
+    expect(node.onWidgetChanged).toBe(originalOnWidgetChanged)
+  })
+
+  it('does not double-wrap callbacks when installErrorClearingHooks is called twice', () => {
+    const graph = new LGraph()
+    const node = new LGraphNode('test')
+    node.addInput('clip', 'CLIP')
+    graph.add(node)
+
+    installErrorClearingHooks(graph)
+    const chainedAfterFirst = node.onConnectionsChange
+
+    // Install again on the same graph — should be a no-op for existing nodes
+    installErrorClearingHooks(graph)
+    expect(node.onConnectionsChange).toBe(chainedAfterFirst)
+  })
 })
 
 describe('clearWidgetRelatedErrors parameter routing', () => {

src/composables/graph/useErrorClearingHooks.ts

@@ -35,10 +35,22 @@ function resolvePromotedExecId(
 
 const hookedNodes = new WeakSet<LGraphNode>()
 
+type OriginalCallbacks = {
+  onConnectionsChange: LGraphNode['onConnectionsChange']
+  onWidgetChanged: LGraphNode['onWidgetChanged']
+}
+
+const originalCallbacks = new WeakMap<LGraphNode, OriginalCallbacks>()
+
 function installNodeHooks(node: LGraphNode): void {
   if (hookedNodes.has(node)) return
   hookedNodes.add(node)
 
+  originalCallbacks.set(node, {
+    onConnectionsChange: node.onConnectionsChange,
+    onWidgetChanged: node.onWidgetChanged
+  })
+
   node.onConnectionsChange = useChainCallback(
     node.onConnectionsChange,
     function (type, slotIndex, isConnected) {
@@ -82,6 +94,15 @@ function installNodeHooks(node: LGraphNode): void {
   )
 }
 
+function restoreNodeHooks(node: LGraphNode): void {
+  const originals = originalCallbacks.get(node)
+  if (!originals) return
+  node.onConnectionsChange = originals.onConnectionsChange
+  node.onWidgetChanged = originals.onWidgetChanged
+  originalCallbacks.delete(node)
+  hookedNodes.delete(node)
+}
+
 function installNodeHooksRecursive(node: LGraphNode): void {
   installNodeHooks(node)
   if (node.isSubgraphNode?.()) {
@@ -91,6 +112,15 @@ function installNodeHooksRecursive(node: LGraphNode): void {
   }
 }
 
+function restoreNodeHooksRecursive(node: LGraphNode): void {
+  restoreNodeHooks(node)
+  if (node.isSubgraphNode?.()) {
+    for (const innerNode of node.subgraph._nodes ?? []) {
+      restoreNodeHooksRecursive(innerNode)
+    }
+  }
+}
+
 export function installErrorClearingHooks(graph: LGraph): () => void {
   for (const node of graph._nodes ?? []) {
     installNodeHooksRecursive(node)
@@ -102,7 +132,17 @@ export function installErrorClearingHooks(graph: LGraph): () => void {
     originalOnNodeAdded?.call(this, node)
   }
 
+  const originalOnNodeRemoved = graph.onNodeRemoved
+  graph.onNodeRemoved = function (node: LGraphNode) {
+    restoreNodeHooksRecursive(node)
+    originalOnNodeRemoved?.call(this, node)
+  }
+
   return () => {
+    for (const node of graph._nodes ?? []) {
+      restoreNodeHooksRecursive(node)
+    }
     graph.onNodeAdded = originalOnNodeAdded || undefined
+    graph.onNodeRemoved = originalOnNodeRemoved || undefined
   }
 }

src/composables/graph/useNodeErrorFlagSync.ts

@@ -0,0 +1,111 @@
+import type { Ref } from 'vue'
+import { computed, watch } from 'vue'
+
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { useMissingModelStore } from '@/platform/missingModel/missingModelStore'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { app } from '@/scripts/app'
+import type { NodeError } from '@/schemas/apiSchema'
+import { getParentExecutionIds } from '@/types/nodeIdentification'
+import { forEachNode, getNodeByExecutionId } from '@/utils/graphTraversalUtil'
+
+function setNodeHasErrors(node: LGraphNode, hasErrors: boolean): void {
+  if (node.has_errors === hasErrors) return
+  const oldValue = node.has_errors
+  node.has_errors = hasErrors
+  node.graph?.trigger('node:property:changed', {
+    type: 'node:property:changed',
+    nodeId: node.id,
+    property: 'has_errors',
+    oldValue,
+    newValue: hasErrors
+  })
+}
+
+/**
+ * Single-pass reconciliation of node error flags.
+ * Collects the set of nodes that should have errors, then walks all nodes
+ * once, setting each flag exactly once. This avoids the redundant
+ * true→false→true transition (and duplicate events) that a clear-then-apply
+ * approach would cause.
+ */
+function reconcileNodeErrorFlags(
+  rootGraph: LGraph,
+  nodeErrors: Record<string, NodeError> | null,
+  missingModelExecIds: Set<string>
+): void {
+  // Collect nodes and slot info that should be flagged
+  // Includes both error-owning nodes and their ancestor containers
+  const flaggedNodes = new Set<LGraphNode>()
+  const errorSlots = new Map<LGraphNode, Set<string>>()
+
+  if (nodeErrors) {
+    for (const [executionId, nodeError] of Object.entries(nodeErrors)) {
+      const node = getNodeByExecutionId(rootGraph, executionId)
+      if (!node) continue
+
+      flaggedNodes.add(node)
+      const slotNames = new Set<string>()
+      for (const error of nodeError.errors) {
+        const name = error.extra_info?.input_name
+        if (name) slotNames.add(name)
+      }
+      if (slotNames.size > 0) errorSlots.set(node, slotNames)
+
+      for (const parentId of getParentExecutionIds(executionId)) {
+        const parentNode = getNodeByExecutionId(rootGraph, parentId)
+        if (parentNode) flaggedNodes.add(parentNode)
+      }
+    }
+  }
+
+  for (const execId of missingModelExecIds) {
+    const node = getNodeByExecutionId(rootGraph, execId)
+    if (node) flaggedNodes.add(node)
+  }
+
+  forEachNode(rootGraph, (node) => {
+    setNodeHasErrors(node, flaggedNodes.has(node))
+
+    if (node.inputs) {
+      const nodeSlotNames = errorSlots.get(node)
+      for (const slot of node.inputs) {
+        slot.hasErrors = !!nodeSlotNames?.has(slot.name)
+      }
+    }
+  })
+}
+
+export function useNodeErrorFlagSync(
+  lastNodeErrors: Ref<Record<string, NodeError> | null>,
+  missingModelStore: ReturnType<typeof useMissingModelStore>
+): () => void {
+  const settingStore = useSettingStore()
+  const showErrorsTab = computed(() =>
+    settingStore.get('Comfy.RightSidePanel.ShowErrorsTab')
+  )
+
+  const stop = watch(
+    [
+      lastNodeErrors,
+      () => missingModelStore.missingModelNodeIds,
+      showErrorsTab
+    ],
+    () => {
+      if (!app.isGraphReady) return
+      // Legacy (LGraphNode) only: suppress missing-model error flags when
+      // the Errors tab is hidden, since legacy nodes lack the per-widget
+      // red highlight that Vue nodes use to indicate *why* a node has errors.
+      // Vue nodes compute hasAnyError independently and are unaffected.
+      reconcileNodeErrorFlags(
+        app.rootGraph,
+        lastNodeErrors.value,
+        showErrorsTab.value
+          ? missingModelStore.missingModelAncestorExecutionIds
+          : new Set()
+      )
+    },
+    { flush: 'post' }
+  )
+  return stop
+}

src/composables/queue/useJobDetailsHover.ts

@@ -65,7 +65,7 @@ export function useJobDetailsHover<TActive>({
     }, DETAILS_SHOW_DELAY_MS)
   }
 
-  function scheduleDetailsHide(jobId?: string) {
+  function scheduleDetailsHide(jobId?: string, onHide?: () => void) {
     if (!jobId) return
 
     clearShowTimer()
@@ -79,7 +79,7 @@ export function useJobDetailsHover<TActive>({
       const currentActive = activeDetails.value
       if (currentActive && getActiveId(currentActive) === jobId) {
         activeDetails.value = null
-        onReset?.()
+        onHide?.()
       }
       hideTimer.value = null
       hideTimerJobId.value = null

src/composables/queue/useJobMenu.test.ts

@@ -1,7 +1,9 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+import type { Ref } from 'vue'
 
 import type { JobListItem } from '@/composables/queue/useJobList'
-import type { MenuEntry } from '@/types/menuTypes'
+import type { MenuEntry } from '@/composables/queue/useJobMenu'
 
 vi.mock('@/platform/distribution/types', () => ({
   isCloud: false
@@ -170,13 +172,10 @@ const createJobItem = (
   computeHours: overrides.computeHours
 })
 
-const mountJobMenu = (onInspectAsset?: (item: JobListItem) => void) =>
-  useJobMenu(onInspectAsset)
+let currentItem: Ref<JobListItem | null>
 
-const getMenuEntries = (
-  item: JobListItem | null,
-  onInspectAsset?: (item: JobListItem) => void
-) => mountJobMenu(onInspectAsset).getJobMenuEntries(item)
+const mountJobMenu = (onInspectAsset?: (item: JobListItem) => void) =>
+  useJobMenu(() => currentItem.value, onInspectAsset)
 
 const findActionEntry = (entries: MenuEntry[], key: string) =>
   entries.find(
@@ -187,6 +186,7 @@ const findActionEntry = (entries: MenuEntry[], key: string) =>
 describe('useJobMenu', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    currentItem = ref<JobListItem | null>(null)
     settingStoreMock.get.mockReturnValue(false)
     dialogServiceMock.prompt.mockResolvedValue(undefined)
     litegraphServiceMock.getCanvasCenter.mockReturnValue([100, 200])
@@ -212,14 +212,18 @@ describe('useJobMenu', () => {
     getJobWorkflowMock.mockResolvedValue(undefined)
   })
 
+  const setCurrentItem = (item: JobListItem | null) => {
+    currentItem.value = item
+  }
+
   it('opens workflow when workflow data exists', async () => {
     const { openJobWorkflow } = mountJobMenu()
     const workflow = { nodes: [] }
     // Mock lazy loading via fetchJobDetail + extractWorkflow
     getJobWorkflowMock.mockResolvedValue(workflow)
-    const item = createJobItem({ id: '55' })
+    setCurrentItem(createJobItem({ id: '55' }))
 
-    await openJobWorkflow(item)
+    await openJobWorkflow()
 
     expect(getJobWorkflowMock).toHaveBeenCalledWith('55')
     expect(workflowStoreMock.createTemporary).toHaveBeenCalledWith(
@@ -234,9 +238,9 @@ describe('useJobMenu', () => {
 
   it('does nothing when workflow is missing', async () => {
     const { openJobWorkflow } = mountJobMenu()
-    const item = createJobItem({ taskRef: {} })
+    setCurrentItem(createJobItem({ taskRef: {} }))
 
-    await openJobWorkflow(item)
+    await openJobWorkflow()
 
     expect(workflowStoreMock.createTemporary).not.toHaveBeenCalled()
     expect(workflowServiceMock.openWorkflow).not.toHaveBeenCalled()
@@ -244,9 +248,9 @@ describe('useJobMenu', () => {
 
   it('copies job id to clipboard', async () => {
     const { copyJobId } = mountJobMenu()
-    const item = createJobItem({ id: 'job-99' })
+    setCurrentItem(createJobItem({ id: 'job-99' }))
 
-    await copyJobId(item)
+    await copyJobId()
 
     expect(copyToClipboardMock).toHaveBeenCalledWith('job-99')
   })
@@ -264,9 +268,9 @@ describe('useJobMenu', () => {
     ['initialization', interruptMock, deleteItemMock]
   ])('cancels %s job via interrupt', async (state) => {
     const { cancelJob } = mountJobMenu()
-    const item = createJobItem({ state: state as JobListItem['state'] })
+    setCurrentItem(createJobItem({ state: state as JobListItem['state'] }))
 
-    await cancelJob(item)
+    await cancelJob()
 
     expect(interruptMock).toHaveBeenCalledWith('job-1')
     expect(deleteItemMock).not.toHaveBeenCalled()
@@ -275,9 +279,9 @@ describe('useJobMenu', () => {
 
   it('cancels pending job via deleteItem', async () => {
     const { cancelJob } = mountJobMenu()
-    const item = createJobItem({ state: 'pending' })
+    setCurrentItem(createJobItem({ state: 'pending' }))
 
-    await cancelJob(item)
+    await cancelJob()
 
     expect(deleteItemMock).toHaveBeenCalledWith('queue', 'job-1')
     expect(queueStoreMock.update).toHaveBeenCalled()
@@ -285,9 +289,9 @@ describe('useJobMenu', () => {
 
   it('still updates queue for uncancellable states', async () => {
     const { cancelJob } = mountJobMenu()
-    const item = createJobItem({ state: 'completed' })
+    setCurrentItem(createJobItem({ state: 'completed' }))
 
-    await cancelJob(item)
+    await cancelJob()
 
     expect(interruptMock).not.toHaveBeenCalled()
     expect(deleteItemMock).not.toHaveBeenCalled()
@@ -295,7 +299,8 @@ describe('useJobMenu', () => {
   })
 
   it('copies error message from failed job entry', async () => {
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'failed',
         taskRef: {
@@ -304,7 +309,8 @@ describe('useJobMenu', () => {
       })
     )
 
-    const entry = findActionEntry(entries, 'copy-error')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'copy-error')
     await entry?.onClick?.()
 
     expect(copyToClipboardMock).toHaveBeenCalledWith('Something went wrong')
@@ -323,7 +329,8 @@ describe('useJobMenu', () => {
       current_inputs: {},
       current_outputs: {}
     }
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'failed',
         taskRef: {
@@ -334,7 +341,8 @@ describe('useJobMenu', () => {
       })
     )
 
-    const entry = findActionEntry(entries, 'report-error')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'report-error')
     await entry?.onClick?.()
 
     expect(dialogServiceMock.showExecutionErrorDialog).toHaveBeenCalledTimes(1)
@@ -345,7 +353,8 @@ describe('useJobMenu', () => {
   })
 
   it('falls back to simple error dialog when no execution_error', async () => {
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'failed',
         taskRef: {
@@ -354,7 +363,8 @@ describe('useJobMenu', () => {
       })
     )
 
-    const entry = findActionEntry(entries, 'report-error')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'report-error')
     await entry?.onClick?.()
 
     expect(dialogServiceMock.showExecutionErrorDialog).not.toHaveBeenCalled()
@@ -367,16 +377,18 @@ describe('useJobMenu', () => {
   })
 
   it('ignores error actions when message missing', async () => {
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'failed',
         taskRef: { errorMessage: undefined } as Partial<TaskItemImpl>
       })
     )
 
-    const copyEntry = findActionEntry(entries, 'copy-error')
+    await nextTick()
+    const copyEntry = findActionEntry(jobMenuEntries.value, 'copy-error')
     await copyEntry?.onClick?.()
-    const reportEntry = findActionEntry(entries, 'report-error')
+    const reportEntry = findActionEntry(jobMenuEntries.value, 'report-error')
     await reportEntry?.onClick?.()
 
     expect(copyToClipboardMock).not.toHaveBeenCalled()
@@ -414,6 +426,7 @@ describe('useJobMenu', () => {
         graph: { setDirtyCanvas: vi.fn() }
       }
       litegraphServiceMock.addNodeOnGraph.mockReturnValueOnce(node)
+      const { jobMenuEntries } = mountJobMenu()
       const preview = {
         filename: 'foo.png',
         subfolder: 'bar',
@@ -421,14 +434,15 @@ describe('useJobMenu', () => {
         url: 'http://asset',
         ...flags
       }
-      const entries = getMenuEntries(
+      setCurrentItem(
         createJobItem({
           state: 'completed',
           taskRef: { previewOutput: preview }
         })
       )
 
-      const entry = findActionEntry(entries, 'add-to-current')
+      await nextTick()
+      const entry = findActionEntry(jobMenuEntries.value, 'add-to-current')
       await entry?.onClick?.()
 
       expect(litegraphServiceMock.addNodeOnGraph).toHaveBeenCalledWith(
@@ -443,7 +457,8 @@ describe('useJobMenu', () => {
 
   it('skips adding node when no loader definition', async () => {
     delete nodeDefStoreMock.nodeDefsByName.LoadImage
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed',
         taskRef: {
@@ -457,14 +472,16 @@ describe('useJobMenu', () => {
       })
     )
 
-    const entry = findActionEntry(entries, 'add-to-current')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'add-to-current')
     await entry?.onClick?.()
 
     expect(litegraphServiceMock.addNodeOnGraph).not.toHaveBeenCalled()
   })
 
   it('skips adding node when preview output lacks media flags', async () => {
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed',
         taskRef: {
@@ -477,7 +494,8 @@ describe('useJobMenu', () => {
       })
     )
 
-    const entry = findActionEntry(entries, 'add-to-current')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'add-to-current')
     await entry?.onClick?.()
 
     expect(litegraphServiceMock.addNodeOnGraph).not.toHaveBeenCalled()
@@ -486,7 +504,8 @@ describe('useJobMenu', () => {
 
   it('skips annotating when litegraph node creation fails', async () => {
     litegraphServiceMock.addNodeOnGraph.mockReturnValueOnce(null)
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed',
         taskRef: {
@@ -500,7 +519,8 @@ describe('useJobMenu', () => {
       })
     )
 
-    const entry = findActionEntry(entries, 'add-to-current')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'add-to-current')
     await entry?.onClick?.()
 
     expect(litegraphServiceMock.addNodeOnGraph).toHaveBeenCalled()
@@ -508,21 +528,24 @@ describe('useJobMenu', () => {
   })
 
   it('ignores add-to-current entry when preview missing entirely', async () => {
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed',
         taskRef: {} as Partial<TaskItemImpl>
       })
     )
 
-    const entry = findActionEntry(entries, 'add-to-current')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'add-to-current')
     await entry?.onClick?.()
 
     expect(litegraphServiceMock.addNodeOnGraph).not.toHaveBeenCalled()
   })
 
   it('downloads preview asset when requested', async () => {
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed',
         taskRef: {
@@ -531,21 +554,24 @@ describe('useJobMenu', () => {
       })
     )
 
-    const entry = findActionEntry(entries, 'download')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'download')
     void entry?.onClick?.()
 
     expect(downloadFileMock).toHaveBeenCalledWith('https://asset')
   })
 
   it('ignores download request when preview missing', async () => {
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed',
         taskRef: {} as Partial<TaskItemImpl>
       })
     )
 
-    const entry = findActionEntry(entries, 'download')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'download')
     void entry?.onClick?.()
 
     expect(downloadFileMock).not.toHaveBeenCalled()
@@ -554,14 +580,16 @@ describe('useJobMenu', () => {
   it('exports workflow with default filename when prompting disabled', async () => {
     const workflow = { foo: 'bar' }
     getJobWorkflowMock.mockResolvedValue(workflow)
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         id: '7',
         state: 'completed'
       })
     )
 
-    const entry = findActionEntry(entries, 'export-workflow')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'export-workflow')
     await entry?.onClick?.()
 
     expect(dialogServiceMock.prompt).not.toHaveBeenCalled()
@@ -577,13 +605,15 @@ describe('useJobMenu', () => {
     settingStoreMock.get.mockReturnValue(true)
     dialogServiceMock.prompt.mockResolvedValue('custom-name')
     getJobWorkflowMock.mockResolvedValue({})
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed'
       })
     )
 
-    const entry = findActionEntry(entries, 'export-workflow')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'export-workflow')
     await entry?.onClick?.()
 
     expect(dialogServiceMock.prompt).toHaveBeenCalledWith({
@@ -599,14 +629,16 @@ describe('useJobMenu', () => {
     settingStoreMock.get.mockReturnValue(true)
     dialogServiceMock.prompt.mockResolvedValue('existing.json')
     getJobWorkflowMock.mockResolvedValue({ foo: 'bar' })
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         id: '42',
         state: 'completed'
       })
     )
 
-    const entry = findActionEntry(entries, 'export-workflow')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'export-workflow')
     await entry?.onClick?.()
 
     expect(appendJsonExtMock).toHaveBeenCalledWith('existing.json')
@@ -618,13 +650,15 @@ describe('useJobMenu', () => {
     settingStoreMock.get.mockReturnValue(true)
     dialogServiceMock.prompt.mockResolvedValue('')
     getJobWorkflowMock.mockResolvedValue({})
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed'
       })
     )
 
-    const entry = findActionEntry(entries, 'export-workflow')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'export-workflow')
     await entry?.onClick?.()
 
     expect(downloadBlobMock).not.toHaveBeenCalled()
@@ -632,13 +666,13 @@ describe('useJobMenu', () => {
 
   it('deletes preview asset when confirmed', async () => {
     mediaAssetActionsMock.deleteAssets.mockResolvedValue(true)
+    const { jobMenuEntries } = mountJobMenu()
     const preview = { filename: 'foo', subfolder: 'bar', type: 'output' }
     const taskRef = { previewOutput: preview }
-    const entries = getMenuEntries(
-      createJobItem({ state: 'completed', taskRef })
-    )
+    setCurrentItem(createJobItem({ state: 'completed', taskRef }))
 
-    const entry = findActionEntry(entries, 'delete')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'delete')
     await entry?.onClick?.()
 
     expect(mapTaskOutputToAssetItemMock).toHaveBeenCalledWith(taskRef, preview)
@@ -647,14 +681,16 @@ describe('useJobMenu', () => {
 
   it('does not refresh queue when delete cancelled', async () => {
     mediaAssetActionsMock.deleteAssets.mockResolvedValue(false)
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed',
         taskRef: { previewOutput: {} }
       })
     )
 
-    const entry = findActionEntry(entries, 'delete')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'delete')
     await entry?.onClick?.()
 
     expect(queueStoreMock.update).not.toHaveBeenCalled()
@@ -662,18 +698,22 @@ describe('useJobMenu', () => {
 
   it('removes failed job via menu entry', async () => {
     const taskRef = { id: 'task-1' }
-    const entries = getMenuEntries(createJobItem({ state: 'failed', taskRef }))
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(createJobItem({ state: 'failed', taskRef }))
 
-    const entry = findActionEntry(entries, 'delete')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'delete')
     await entry?.onClick?.()
 
     expect(queueStoreMock.delete).toHaveBeenCalledWith(taskRef)
   })
 
   it('ignores failed job delete when taskRef missing', async () => {
-    const entries = getMenuEntries(createJobItem({ state: 'failed' }))
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(createJobItem({ state: 'failed' }))
 
-    const entry = findActionEntry(entries, 'delete')
+    await nextTick()
+    const entry = findActionEntry(jobMenuEntries.value, 'delete')
     await entry?.onClick?.()
 
     expect(queueStoreMock.delete).not.toHaveBeenCalled()
@@ -681,13 +721,16 @@ describe('useJobMenu', () => {
 
   it('provides completed menu structure with delete option', async () => {
     const inspectSpy = vi.fn()
-    const item = createJobItem({
-      state: 'completed',
-      taskRef: { previewOutput: {} }
-    })
-    const entries = getMenuEntries(item, inspectSpy)
+    const { jobMenuEntries } = mountJobMenu(inspectSpy)
+    setCurrentItem(
+      createJobItem({
+        state: 'completed',
+        taskRef: { previewOutput: {} }
+      })
+    )
 
-    expect(entries.map((entry) => entry.key)).toEqual([
+    await nextTick()
+    expect(jobMenuEntries.value.map((entry) => entry.key)).toEqual([
       'inspect-asset',
       'add-to-current',
       'download',
@@ -700,48 +743,66 @@ describe('useJobMenu', () => {
       'delete'
     ])
 
-    expect(findActionEntry(entries, 'inspect-asset')?.disabled).toBe(false)
-    expect(findActionEntry(entries, 'add-to-current')?.disabled).toBe(false)
-    expect(findActionEntry(entries, 'download')?.disabled).toBe(false)
+    expect(
+      findActionEntry(jobMenuEntries.value, 'inspect-asset')?.disabled
+    ).toBe(false)
+    expect(
+      findActionEntry(jobMenuEntries.value, 'add-to-current')?.disabled
+    ).toBe(false)
+    expect(findActionEntry(jobMenuEntries.value, 'download')?.disabled).toBe(
+      false
+    )
 
-    const inspectEntry = findActionEntry(entries, 'inspect-asset')
+    const inspectEntry = findActionEntry(jobMenuEntries.value, 'inspect-asset')
     await inspectEntry?.onClick?.()
-    expect(inspectSpy).toHaveBeenCalledWith(item)
+    expect(inspectSpy).toHaveBeenCalledWith(currentItem.value)
   })
 
   it('omits inspect handler when callback missing', async () => {
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'completed',
         taskRef: { previewOutput: {} }
       })
     )
 
-    const inspectEntry = findActionEntry(entries, 'inspect-asset')
+    await nextTick()
+    const inspectEntry = findActionEntry(jobMenuEntries.value, 'inspect-asset')
     expect(inspectEntry?.onClick).toBeUndefined()
     expect(inspectEntry?.disabled).toBe(true)
   })
 
   it('omits delete asset entry when no preview exists', async () => {
-    const entries = getMenuEntries(
-      createJobItem({ state: 'completed', taskRef: {} })
-    )
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(createJobItem({ state: 'completed', taskRef: {} }))
 
-    expect(findActionEntry(entries, 'inspect-asset')?.disabled).toBe(true)
-    expect(findActionEntry(entries, 'add-to-current')?.disabled).toBe(true)
-    expect(findActionEntry(entries, 'download')?.disabled).toBe(true)
-    expect(entries.some((entry) => entry.key === 'delete')).toBe(false)
+    await nextTick()
+    expect(
+      findActionEntry(jobMenuEntries.value, 'inspect-asset')?.disabled
+    ).toBe(true)
+    expect(
+      findActionEntry(jobMenuEntries.value, 'add-to-current')?.disabled
+    ).toBe(true)
+    expect(findActionEntry(jobMenuEntries.value, 'download')?.disabled).toBe(
+      true
+    )
+    expect(jobMenuEntries.value.some((entry) => entry.key === 'delete')).toBe(
+      false
+    )
   })
 
   it('returns failed menu entries with error actions', async () => {
-    const entries = getMenuEntries(
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(
       createJobItem({
         state: 'failed',
         taskRef: { errorMessage: 'Some error' } as Partial<TaskItemImpl>
       })
     )
 
-    expect(entries.map((entry) => entry.key)).toEqual([
+    await nextTick()
+    expect(jobMenuEntries.value.map((entry) => entry.key)).toEqual([
       'open-workflow',
       'd1',
       'copy-id',
@@ -753,9 +814,11 @@ describe('useJobMenu', () => {
   })
 
   it('returns active job entries with cancel option', async () => {
-    const entries = getMenuEntries(createJobItem({ state: 'running' }))
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(createJobItem({ state: 'running' }))
 
-    expect(entries.map((entry) => entry.key)).toEqual([
+    await nextTick()
+    expect(jobMenuEntries.value.map((entry) => entry.key)).toEqual([
       'open-workflow',
       'd1',
       'copy-id',
@@ -765,16 +828,18 @@ describe('useJobMenu', () => {
   })
 
   it('provides pending job entries and triggers cancel action', async () => {
-    const entries = getMenuEntries(createJobItem({ state: 'pending' }))
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(createJobItem({ state: 'pending' }))
 
-    expect(entries.map((entry) => entry.key)).toEqual([
+    await nextTick()
+    expect(jobMenuEntries.value.map((entry) => entry.key)).toEqual([
       'open-workflow',
       'd1',
       'copy-id',
       'd2',
       'cancel-job'
     ])
-    const cancelEntry = findActionEntry(entries, 'cancel-job')
+    const cancelEntry = findActionEntry(jobMenuEntries.value, 'cancel-job')
     await cancelEntry?.onClick?.()
 
     expect(deleteItemMock).toHaveBeenCalledWith('queue', 'job-1')
@@ -782,6 +847,10 @@ describe('useJobMenu', () => {
   })
 
   it('returns empty menu when no job selected', async () => {
-    expect(getMenuEntries(null)).toEqual([])
+    const { jobMenuEntries } = mountJobMenu()
+    setCurrentItem(null)
+
+    await nextTick()
+    expect(jobMenuEntries.value).toEqual([])
   })
 })

src/composables/queue/useJobMenu.ts

@@ -20,16 +20,30 @@ import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useQueueStore } from '@/stores/queueStore'
 import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
-import type { MenuEntry } from '@/types/menuTypes'
 import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
 import { appendJsonExt } from '@/utils/formatUtil'
 
+export type MenuEntry =
+  | {
+      kind?: 'item'
+      key: string
+      label: string
+      icon?: string
+      disabled?: boolean
+      onClick?: () => void | Promise<void>
+    }
+  | { kind: 'divider'; key: string }
+
 /**
  * Provides job context menu entries and actions.
  *
+ * @param currentMenuItem Getter for the currently targeted job list item
  * @param onInspectAsset Callback to trigger when inspecting a completed job's asset
  */
-export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
+export function useJobMenu(
+  currentMenuItem: () => JobListItem | null = () => null,
+  onInspectAsset?: (item: JobListItem) => void
+) {
   const workflowStore = useWorkflowStore()
   const workflowService = useWorkflowService()
   const queueStore = useQueueStore()
@@ -39,8 +53,11 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
   const nodeDefStore = useNodeDefStore()
   const mediaAssetActions = useMediaAssetActions()
 
+  const resolveItem = (item?: JobListItem | null): JobListItem | null =>
+    item ?? currentMenuItem()
+
   const openJobWorkflow = async (item?: JobListItem | null) => {
-    const target = item
+    const target = resolveItem(item)
     if (!target) return
     const data = await getJobWorkflow(target.id)
     if (!data) return
@@ -50,13 +67,13 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
   }
 
   const copyJobId = async (item?: JobListItem | null) => {
-    const target = item
+    const target = resolveItem(item)
     if (!target) return
     await copyToClipboard(target.id)
   }
 
   const cancelJob = async (item?: JobListItem | null) => {
-    const target = item
+    const target = resolveItem(item)
     if (!target) return
     if (target.state === 'running' || target.state === 'initialization') {
       if (isCloud) {
@@ -72,13 +89,13 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
   }
 
   const copyErrorMessage = async (item?: JobListItem | null) => {
-    const target = item
+    const target = resolveItem(item)
     const message = target?.taskRef?.errorMessage
     if (message) await copyToClipboard(message)
   }
 
   const reportError = (item?: JobListItem | null) => {
-    const target = item
+    const target = resolveItem(item)
     if (!target) return
 
     // Use execution_error from list response if available
@@ -100,10 +117,10 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
 
   // This is very magical only because it matches the respective backend implementation
   // There is or will be a better way to do this
-  const addOutputLoaderNode = async (item?: JobListItem | null) => {
-    const target = item
-    if (!target) return
-    const result: ResultItemImpl | undefined = target.taskRef?.previewOutput
+  const addOutputLoaderNode = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
     if (!result) return
 
     let nodeType: 'LoadImage' | 'LoadVideo' | 'LoadAudio' | null = null
@@ -151,10 +168,10 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
   /**
    * Trigger a download of the job's previewable output asset.
    */
-  const downloadPreviewAsset = (item?: JobListItem | null) => {
-    const target = item
-    if (!target) return
-    const result: ResultItemImpl | undefined = target.taskRef?.previewOutput
+  const downloadPreviewAsset = () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
     if (!result) return
     downloadFile(result.url)
   }
@@ -162,14 +179,14 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
   /**
    * Export the workflow JSON attached to the job.
    */
-  const exportJobWorkflow = async (item?: JobListItem | null) => {
-    const target = item
-    if (!target) return
-    const data = await getJobWorkflow(target.id)
+  const exportJobWorkflow = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const data = await getJobWorkflow(item.id)
     if (!data) return
 
     const settingStore = useSettingStore()
-    let filename = `Job ${target.id}.json`
+    let filename = `Job ${item.id}.json`
 
     if (settingStore.get('Comfy.PromptFilename')) {
       const input = await useDialogService().prompt({
@@ -186,10 +203,10 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
     downloadBlob(filename, blob)
   }
 
-  const deleteJobAsset = async (item?: JobListItem | null) => {
-    const target = item
-    if (!target) return
-    const task = target.taskRef as TaskItemImpl | undefined
+  const deleteJobAsset = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const task = item.taskRef as TaskItemImpl | undefined
     const preview = task?.previewOutput
     if (!task || !preview) return
 
@@ -201,7 +218,8 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
   }
 
   const removeFailedJob = async (task?: TaskItemImpl | null) => {
-    const target = task
+    const target =
+      task ?? (currentMenuItem()?.taskRef as TaskItemImpl | undefined)
     if (!target) return
     await queueStore.delete(target)
   }
@@ -219,11 +237,11 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
     st('queue.jobMenu.cancelJob', 'Cancel job')
   )
 
-  const buildJobMenuEntries = (item?: JobListItem | null): MenuEntry[] => {
-    const target = item
-    const state = target?.state
+  const jobMenuEntries = computed<MenuEntry[]>(() => {
+    const item = currentMenuItem()
+    const state = item?.state
     if (!state) return []
-    const hasPreviewAsset = !!target?.taskRef?.previewOutput
+    const hasPreviewAsset = !!item?.taskRef?.previewOutput
     if (state === 'completed') {
       return [
         {
@@ -233,7 +251,8 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
           disabled: !hasPreviewAsset || !onInspectAsset,
           onClick: onInspectAsset
             ? () => {
-                if (target) onInspectAsset(target)
+                const item = currentMenuItem()
+                if (item) onInspectAsset(item)
               }
             : undefined
         },
@@ -245,34 +264,34 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
           ),
           icon: 'icon-[comfy--node]',
           disabled: !hasPreviewAsset,
-          onClick: () => addOutputLoaderNode(target)
+          onClick: addOutputLoaderNode
         },
         {
           key: 'download',
           label: st('queue.jobMenu.download', 'Download'),
           icon: 'icon-[lucide--download]',
           disabled: !hasPreviewAsset,
-          onClick: () => downloadPreviewAsset(target)
+          onClick: downloadPreviewAsset
         },
         { kind: 'divider', key: 'd1' },
         {
           key: 'open-workflow',
           label: jobMenuOpenWorkflowLabel.value,
           icon: 'icon-[comfy--workflow]',
-          onClick: () => openJobWorkflow(target)
+          onClick: openJobWorkflow
         },
         {
           key: 'export-workflow',
           label: st('queue.jobMenu.exportWorkflow', 'Export workflow'),
           icon: 'icon-[comfy--file-output]',
-          onClick: () => exportJobWorkflow(target)
+          onClick: exportJobWorkflow
         },
         { kind: 'divider', key: 'd2' },
         {
           key: 'copy-id',
           label: jobMenuCopyJobIdLabel.value,
           icon: 'icon-[lucide--copy]',
-          onClick: () => copyJobId(target)
+          onClick: copyJobId
         },
         { kind: 'divider', key: 'd3' },
         ...(hasPreviewAsset
@@ -281,7 +300,7 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
                 key: 'delete',
                 label: st('queue.jobMenu.deleteAsset', 'Delete asset'),
                 icon: 'icon-[lucide--trash-2]',
-                onClick: () => deleteJobAsset(target)
+                onClick: deleteJobAsset
               }
             ]
           : [])
@@ -293,33 +312,33 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
           key: 'open-workflow',
           label: jobMenuOpenWorkflowFailedLabel.value,
           icon: 'icon-[comfy--workflow]',
-          onClick: () => openJobWorkflow(target)
+          onClick: openJobWorkflow
         },
         { kind: 'divider', key: 'd1' },
         {
           key: 'copy-id',
           label: jobMenuCopyJobIdLabel.value,
           icon: 'icon-[lucide--copy]',
-          onClick: () => copyJobId(target)
+          onClick: copyJobId
         },
         {
           key: 'copy-error',
           label: st('queue.jobMenu.copyErrorMessage', 'Copy error message'),
           icon: 'icon-[lucide--copy]',
-          onClick: () => copyErrorMessage(target)
+          onClick: copyErrorMessage
         },
         {
           key: 'report-error',
           label: st('queue.jobMenu.reportError', 'Report error'),
           icon: 'icon-[lucide--message-circle-warning]',
-          onClick: () => reportError(target)
+          onClick: reportError
         },
         { kind: 'divider', key: 'd2' },
         {
           key: 'delete',
           label: st('queue.jobMenu.removeJob', 'Remove job'),
           icon: 'icon-[lucide--circle-minus]',
-          onClick: () => removeFailedJob(target?.taskRef)
+          onClick: removeFailedJob
         }
       ]
     }
@@ -328,27 +347,27 @@ export function useJobMenu(onInspectAsset?: (item: JobListItem) => void) {
         key: 'open-workflow',
         label: jobMenuOpenWorkflowLabel.value,
         icon: 'icon-[comfy--workflow]',
-        onClick: () => openJobWorkflow(target)
+        onClick: openJobWorkflow
       },
       { kind: 'divider', key: 'd1' },
       {
         key: 'copy-id',
         label: jobMenuCopyJobIdLabel.value,
         icon: 'icon-[lucide--copy]',
-        onClick: () => copyJobId(target)
+        onClick: copyJobId
       },
       { kind: 'divider', key: 'd2' },
       {
         key: 'cancel-job',
         label: jobMenuCancelLabel.value,
         icon: 'icon-[lucide--x]',
-        onClick: () => cancelJob(target)
+        onClick: cancelJob
       }
     ]
-  }
+  })
 
   return {
-    getJobMenuEntries: buildJobMenuEntries,
+    jobMenuEntries,
     openJobWorkflow,
     copyJobId,
     cancelJob,

src/composables/useClickDragGuard.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  exceedsClickThreshold,
+  useClickDragGuard
+} from '@/composables/useClickDragGuard'
+
+describe('exceedsClickThreshold', () => {
+  it('returns false when distance is within threshold', () => {
+    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 2, y: 2 }, 5)).toBe(false)
+  })
+
+  it('returns true when distance exceeds threshold', () => {
+    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 5 }, 5)).toBe(true)
+  })
+
+  it('returns false when distance exactly equals threshold', () => {
+    expect(exceedsClickThreshold({ x: 0, y: 0 }, { x: 3, y: 4 }, 5)).toBe(false)
+  })
+
+  it('handles negative deltas', () => {
+    expect(exceedsClickThreshold({ x: 10, y: 10 }, { x: 4, y: 2 }, 5)).toBe(
+      true
+    )
+  })
+})
+
+describe('useClickDragGuard', () => {
+  it('reports no drag when pointer has not moved', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
+  })
+
+  it('reports no drag when movement is within threshold', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    expect(guard.wasDragged({ clientX: 103, clientY: 204 })).toBe(false)
+  })
+
+  it('reports drag when movement exceeds threshold', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    expect(guard.wasDragged({ clientX: 106, clientY: 200 })).toBe(true)
+  })
+
+  it('returns false when no start has been recorded', () => {
+    const guard = useClickDragGuard(5)
+    expect(guard.wasDragged({ clientX: 100, clientY: 200 })).toBe(false)
+  })
+
+  it('returns false after reset', () => {
+    const guard = useClickDragGuard(5)
+    guard.recordStart({ clientX: 100, clientY: 200 })
+    guard.reset()
+    expect(guard.wasDragged({ clientX: 200, clientY: 300 })).toBe(false)
+  })
+
+  it('respects custom threshold', () => {
+    const guard = useClickDragGuard(3)
+    guard.recordStart({ clientX: 0, clientY: 0 })
+    expect(guard.wasDragged({ clientX: 3, clientY: 0 })).toBe(false)
+    expect(guard.wasDragged({ clientX: 4, clientY: 0 })).toBe(true)
+  })
+})

src/composables/useClickDragGuard.ts

@@ -0,0 +1,41 @@
+interface PointerPosition {
+  readonly x: number
+  readonly y: number
+}
+
+function squaredDistance(a: PointerPosition, b: PointerPosition): number {
+  const dx = a.x - b.x
+  const dy = a.y - b.y
+  return dx * dx + dy * dy
+}
+
+export function exceedsClickThreshold(
+  start: PointerPosition,
+  end: PointerPosition,
+  threshold: number
+): boolean {
+  return squaredDistance(start, end) > threshold * threshold
+}
+
+export function useClickDragGuard(threshold: number = 5) {
+  let start: PointerPosition | null = null
+
+  function recordStart(e: { clientX: number; clientY: number }) {
+    start = { x: e.clientX, y: e.clientY }
+  }
+
+  function wasDragged(e: { clientX: number; clientY: number }): boolean {
+    if (!start) return false
+    return exceedsClickThreshold(
+      start,
+      { x: e.clientX, y: e.clientY },
+      threshold
+    )
+  }
+
+  function reset() {
+    start = null
+  }
+
+  return { recordStart, wasDragged, reset }
+}

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