1.32.10 (#7073)

Patch version increment to 1.32.10

**Base branch:** `core/1.32`

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7073-1-32-10-2bc6d73d365081f39f61d1afe31d39ff)
by [Unito](https://www.unito.io)

Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>

.github/workflows/release-version-bump.yaml

@@ -59,7 +59,6 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
-          cache: 'pnpm'
 
       - name: Bump version
         id: bump-version

apps/desktop-ui/package.json

@@ -91,7 +91,7 @@
     "build-storybook": "storybook build -o dist/storybook"
   },
   "dependencies": {
-    "@comfyorg/comfyui-electron-types": "0.4.73-0",
+    "@comfyorg/comfyui-electron-types": "catalog:",
     "@comfyorg/shared-frontend-utils": "workspace:*",
     "@primevue/core": "catalog:",
     "@primevue/themes": "catalog:",

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

@@ -115,19 +115,18 @@ import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
-import { type ModelRef, computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import type { ModelRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import MigrationPicker from '@/components/install/MigrationPicker.vue'
-import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
-import {
-  PYPI_MIRROR,
-  PYTHON_MIRROR,
-  type UVMirror
-} from '@/constants/uvMirrors'
+import { PYPI_MIRROR, PYTHON_MIRROR } from '@/constants/uvMirrors'
+import type { UVMirror } from '@/constants/uvMirrors'
 import { electronAPI } from '@/utils/envUtil'
 import { ValidationState } from '@/utils/validationUtil'
 
+import MigrationPicker from './MigrationPicker.vue'
+import MirrorItem from './mirror/MirrorItem.vue'
+
 const { t } = useI18n()
 
 const installPath = defineModel<string>('installPath', { required: true })
@@ -229,6 +228,10 @@ const validatePath = async (path: string | undefined) => {
       }
       if (validation.parentMissing) errors.push(t('install.parentMissing'))
       if (validation.isOneDrive) errors.push(t('install.isOneDrive'))
+      if (validation.isInsideAppInstallDir)
+        errors.push(t('install.insideAppInstallDir'))
+      if (validation.isInsideUpdaterCache)
+        errors.push(t('install.insideUpdaterCache'))
 
       if (validation.error)
         errors.push(`${t('install.unhandledError')}: ${validation.error}`)

apps/desktop-ui/src/constants/desktopMaintenanceTasks.ts

@@ -16,7 +16,8 @@ export const DESKTOP_MAINTENANCE_TASKS: Readonly<MaintenanceTask>[] = [
     execute: async () => await electron.setBasePath(),
     name: 'Base path',
     shortDescription: 'Change the application base path.',
-    errorDescription: 'Unable to open the base path.  Please select a new one.',
+    errorDescription:
+      'The current base path is invalid or unsafe. Please select a new location.',
     description:
       'The base path is the default location where ComfyUI stores data. It is the location for the python environment, and may also contain models, custom nodes, and other extensions.',
     isInstallationFix: true,

apps/desktop-ui/src/stores/maintenanceTaskStore.ts

@@ -85,6 +85,7 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
   const electron = electronAPI()
 
   // Reactive state
+  const lastUpdate = ref<InstallValidation | null>(null)
   const isRefreshing = ref(false)
   const isRunningTerminalCommand = computed(() =>
     tasks.value
@@ -97,6 +98,13 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
       .some((task) => getRunner(task)?.executing)
   )
 
+  const unsafeBasePath = computed(
+    () => lastUpdate.value?.unsafeBasePath === true
+  )
+  const unsafeBasePathReason = computed(
+    () => lastUpdate.value?.unsafeBasePathReason
+  )
+
   // Task list
   const tasks = ref(DESKTOP_MAINTENANCE_TASKS)
 
@@ -123,6 +131,7 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
    * @param validationUpdate Update details passed in by electron
    */
   const processUpdate = (validationUpdate: InstallValidation) => {
+    lastUpdate.value = validationUpdate
     const update = validationUpdate as IndexedUpdate
     isRefreshing.value = true
 
@@ -155,7 +164,11 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
   }
 
   const execute = async (task: MaintenanceTask) => {
-    return getRunner(task).execute(task)
+    const success = await getRunner(task).execute(task)
+    if (success && task.isInstallationFix) {
+      await refreshDesktopTasks()
+    }
+    return success
   }
 
   return {
@@ -163,6 +176,8 @@ export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
     isRefreshing,
     isRunningTerminalCommand,
     isRunningInstallationFix,
+    unsafeBasePath,
+    unsafeBasePathReason,
     execute,
     getRunner,
     processUpdate,

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

@@ -0,0 +1,159 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { defineAsyncComponent } from 'vue'
+
+type UnsafeReason = 'appInstallDir' | 'updaterCache' | 'oneDrive' | null
+type ValidationIssueState = 'OK' | 'warning' | 'error' | 'skipped'
+
+type ValidationState = {
+  inProgress: boolean
+  installState: string
+  basePath?: ValidationIssueState
+  unsafeBasePath: boolean
+  unsafeBasePathReason: UnsafeReason
+  venvDirectory?: ValidationIssueState
+  pythonInterpreter?: ValidationIssueState
+  pythonPackages?: ValidationIssueState
+  uv?: ValidationIssueState
+  git?: ValidationIssueState
+  vcRedist?: ValidationIssueState
+  upgradePackages?: ValidationIssueState
+}
+
+const validationState: ValidationState = {
+  inProgress: false,
+  installState: 'installed',
+  basePath: 'OK',
+  unsafeBasePath: false,
+  unsafeBasePathReason: null,
+  venvDirectory: 'OK',
+  pythonInterpreter: 'OK',
+  pythonPackages: 'OK',
+  uv: 'OK',
+  git: 'OK',
+  vcRedist: 'OK',
+  upgradePackages: 'OK'
+}
+
+const createMockElectronAPI = () => {
+  const logListeners: Array<(message: string) => void> = []
+
+  const getValidationUpdate = () => ({
+    ...validationState
+  })
+
+  return {
+    getPlatform: () => 'darwin',
+    changeTheme: (_theme: unknown) => {},
+    onLogMessage: (listener: (message: string) => void) => {
+      logListeners.push(listener)
+    },
+    showContextMenu: (_options: unknown) => {},
+    Events: {
+      trackEvent: (_eventName: string, _data?: unknown) => {}
+    },
+    Validation: {
+      onUpdate: (_callback: (update: unknown) => void) => {},
+      async getStatus() {
+        return getValidationUpdate()
+      },
+      async validateInstallation(callback: (update: unknown) => void) {
+        callback(getValidationUpdate())
+      },
+      async complete() {
+        // Only allow completion when the base path is safe
+        return !validationState.unsafeBasePath
+      },
+      dispose: () => {}
+    },
+    setBasePath: () => Promise.resolve(true),
+    reinstall: () => Promise.resolve(),
+    uv: {
+      installRequirements: () => Promise.resolve(),
+      clearCache: () => Promise.resolve(),
+      resetVenv: () => Promise.resolve()
+    }
+  }
+}
+
+const ensureElectronAPI = () => {
+  const globalWindow = window as unknown as { electronAPI?: unknown }
+  if (!globalWindow.electronAPI) {
+    globalWindow.electronAPI = createMockElectronAPI()
+  }
+
+  return globalWindow.electronAPI
+}
+
+const MaintenanceView = defineAsyncComponent(async () => {
+  ensureElectronAPI()
+  const module = await import('./MaintenanceView.vue')
+  return module.default
+})
+
+const meta: Meta<typeof MaintenanceView> = {
+  title: 'Desktop/Views/MaintenanceView',
+  component: MaintenanceView,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  name: 'All tasks OK',
+  render: () => ({
+    components: { MaintenanceView },
+    setup() {
+      validationState.inProgress = false
+      validationState.installState = 'installed'
+      validationState.basePath = 'OK'
+      validationState.unsafeBasePath = false
+      validationState.unsafeBasePathReason = null
+      validationState.venvDirectory = 'OK'
+      validationState.pythonInterpreter = 'OK'
+      validationState.pythonPackages = 'OK'
+      validationState.uv = 'OK'
+      validationState.git = 'OK'
+      validationState.vcRedist = 'OK'
+      validationState.upgradePackages = 'OK'
+      ensureElectronAPI()
+      return {}
+    },
+    template: '<MaintenanceView />'
+  })
+}
+
+export const UnsafeBasePathOneDrive: Story = {
+  name: 'Unsafe base path (OneDrive)',
+  render: () => ({
+    components: { MaintenanceView },
+    setup() {
+      validationState.inProgress = false
+      validationState.installState = 'installed'
+      validationState.basePath = 'error'
+      validationState.unsafeBasePath = true
+      validationState.unsafeBasePathReason = 'oneDrive'
+      validationState.venvDirectory = 'OK'
+      validationState.pythonInterpreter = 'OK'
+      validationState.pythonPackages = 'OK'
+      validationState.uv = 'OK'
+      validationState.git = 'OK'
+      validationState.vcRedist = 'OK'
+      validationState.upgradePackages = 'OK'
+      ensureElectronAPI()
+      return {}
+    },
+    template: '<MaintenanceView />'
+  })
+}

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

@@ -47,6 +47,28 @@
           </div>
         </div>
 
+        <!-- Unsafe migration warning -->
+        <div v-if="taskStore.unsafeBasePath" class="my-4">
+          <p class="flex items-start gap-3 text-neutral-300">
+            <Tag
+              icon="pi pi-exclamation-triangle"
+              severity="warn"
+              :value="t('icon.exclamation-triangle')"
+            />
+            <span>
+              <strong class="block mb-1">
+                {{ t('maintenance.unsafeMigration.title') }}
+              </strong>
+              <span class="block mb-1">
+                {{ unsafeReasonText }}
+              </span>
+              <span class="block text-sm text-neutral-400">
+                {{ t('maintenance.unsafeMigration.action') }}
+              </span>
+            </span>
+          </p>
+        </div>
+
         <!-- Tasks -->
         <TaskListPanel
           class="border-neutral-700 border-solid border-x-0 border-y"
@@ -89,10 +111,10 @@
 import { PrimeIcons } from '@primevue/core/api'
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
+import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-import { watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import RefreshButton from '@/components/common/RefreshButton.vue'
 import StatusTag from '@/components/maintenance/StatusTag.vue'
@@ -139,6 +161,27 @@ const filterOptions = ref([
 /** Filter binding; can be set to show all tasks, or only errors. */
 const filter = ref<MaintenanceFilter>(filterOptions.value[0])
 
+const unsafeReasonText = computed(() => {
+  const reason = taskStore.unsafeBasePathReason
+  if (!reason) {
+    return t('maintenance.unsafeMigration.generic')
+  }
+
+  if (reason === 'appInstallDir') {
+    return t('maintenance.unsafeMigration.appInstallDir')
+  }
+
+  if (reason === 'updaterCache') {
+    return t('maintenance.unsafeMigration.updaterCache')
+  }
+
+  if (reason === 'oneDrive') {
+    return t('maintenance.unsafeMigration.oneDrive')
+  }
+
+  return t('maintenance.unsafeMigration.generic')
+})
+
 /** If valid, leave the validation window. */
 const completeValidation = async () => {
   const isValid = await electron.Validation.complete()

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

@@ -85,11 +85,10 @@
 </template>
 
 <script setup lang="ts">
-import {
-  InstallStage,
-  type InstallStageInfo,
-  type InstallStageName,
-  ProgressStatus
+import { InstallStage, ProgressStatus } from '@comfyorg/comfyui-electron-types'
+import type {
+  InstallStageInfo,
+  InstallStageName
 } from '@comfyorg/comfyui-electron-types'
 import type { Terminal } from '@xterm/xterm'
 import Button from 'primevue/button'

browser_tests/fixtures/ComfyPage.ts

@@ -564,7 +564,7 @@ export class ComfyPage {
   async dragAndDrop(source: Position, target: Position) {
     await this.page.mouse.move(source.x, source.y)
     await this.page.mouse.down()
-    await this.page.mouse.move(target.x, target.y)
+    await this.page.mouse.move(target.x, target.y, { steps: 100 })
     await this.page.mouse.up()
     await this.nextFrame()
   }

browser_tests/fixtures/VueNodeHelpers.ts

@@ -65,7 +65,9 @@ export class VueNodeHelpers {
    * Select a specific Vue node by ID
    */
   async selectNode(nodeId: string): Promise<void> {
-    await this.page.locator(`[data-node-id="${nodeId}"]`).click()
+    await this.page
+      .locator(`[data-node-id="${nodeId}"] .lg-node-header`)
+      .click()
   }
 
   /**
@@ -77,11 +79,13 @@ export class VueNodeHelpers {
     // Select first node normally
     await this.selectNode(nodeIds[0])
 
-    // Add additional nodes with Ctrl+click
+    // Add additional nodes with Ctrl+click on header
     for (let i = 1; i < nodeIds.length; i++) {
-      await this.page.locator(`[data-node-id="${nodeIds[i]}"]`).click({
-        modifiers: ['Control']
-      })
+      await this.page
+        .locator(`[data-node-id="${nodeIds[i]}"] .lg-node-header`)
+        .click({
+          modifiers: ['Control']
+        })
     }
   }
 

browser_tests/globalSetup.ts

@@ -1,20 +1,17 @@
 import type { FullConfig } from '@playwright/test'
-import { config as loadEnv } from 'dotenv'
+import dotenv from 'dotenv'
 
 import { backupPath } from './utils/backupUtils'
-import { syncDevtools } from './utils/devtoolsSync'
 
-loadEnv()
+dotenv.config()
 
-export default function globalSetup(_: FullConfig) {
+export default function globalSetup(config: FullConfig) {
   if (!process.env.CI) {
     if (process.env.TEST_COMFYUI_DIR) {
       backupPath([process.env.TEST_COMFYUI_DIR, 'user'])
       backupPath([process.env.TEST_COMFYUI_DIR, 'models'], {
         renameAndReplaceWithScaffolding: true
       })
-
-      syncDevtools(process.env.TEST_COMFYUI_DIR)
     } else {
       console.warn(
         'Set TEST_COMFYUI_DIR in .env to prevent user data (settings, workflows, etc.) from being overwritten'

browser_tests/tests/nodeHelp.spec.ts

@@ -2,6 +2,7 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
+import { fitToViewInstant } from '../helpers/fitToView'
 
 // TODO: there might be a better solution for this
 // Helper function to pan canvas and select node
@@ -516,6 +517,7 @@ This is English documentation.
       )
 
       await comfyPage.loadWorkflow('default')
+      await fitToViewInstant(comfyPage)
 
       // Select KSampler first
       const ksamplerNodes = await comfyPage.getNodeRefsByType('KSampler')

browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts

@@ -6,6 +6,7 @@ import {
 test.describe('Vue Nodes Zoom', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
     await comfyPage.vueNodes.waitForNodes()
   })
 

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

@@ -0,0 +1,54 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../../fixtures/ComfyPage'
+
+test.describe('Vue Node Resizing', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should resize node without position drift after selecting', async ({
+    comfyPage
+  }) => {
+    // Get a Vue node fixture
+    const node = await comfyPage.vueNodes.getFixtureByTitle('Load Checkpoint')
+    const initialBox = await node.boundingBox()
+    if (!initialBox) throw new Error('Node bounding box not found')
+
+    // Select the node first (this was causing the bug)
+    await node.header.click()
+    await comfyPage.page.waitForTimeout(100) // Brief pause after selection
+
+    // Get position after selection
+    const selectedBox = await node.boundingBox()
+    if (!selectedBox)
+      throw new Error('Node bounding box not found after select')
+
+    // Verify position unchanged after selection
+    expect(selectedBox.x).toBeCloseTo(initialBox.x, 1)
+    expect(selectedBox.y).toBeCloseTo(initialBox.y, 1)
+
+    // Now resize from bottom-right corner
+    const resizeStartX = selectedBox.x + selectedBox.width - 5
+    const resizeStartY = selectedBox.y + selectedBox.height - 5
+
+    await comfyPage.page.mouse.move(resizeStartX, resizeStartY)
+    await comfyPage.page.mouse.down()
+    await comfyPage.page.mouse.move(resizeStartX + 50, resizeStartY + 30)
+    await comfyPage.page.mouse.up()
+
+    // Get final position and size
+    const finalBox = await node.boundingBox()
+    if (!finalBox) throw new Error('Node bounding box not found after resize')
+
+    // Position should NOT have changed (the bug was position drift)
+    expect(finalBox.x).toBeCloseTo(initialBox.x, 1)
+    expect(finalBox.y).toBeCloseTo(initialBox.y, 1)
+
+    // Size should have increased
+    expect(finalBox.width).toBeGreaterThan(initialBox.width)
+    expect(finalBox.height).toBeGreaterThan(initialBox.height)
+  })
+})

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

@@ -1,48 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../../fixtures/ComfyPage'
-
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
-})
-
-test.describe('Vue Nodes - LOD', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setup()
-    await comfyPage.loadWorkflow('default')
-  })
-
-  test('should toggle LOD based on zoom threshold', async ({ comfyPage }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialNodeCount).toBeGreaterThan(0)
-
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-default.png')
-
-    const vueNodesContainer = comfyPage.vueNodes.nodes
-    const textboxesInNodes = vueNodesContainer.getByRole('textbox')
-    const comboboxesInNodes = vueNodesContainer.getByRole('combobox')
-
-    await expect(textboxesInNodes.first()).toBeVisible()
-    await expect(comboboxesInNodes.first()).toBeVisible()
-
-    await comfyPage.zoom(120, 10)
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.canvas).toHaveScreenshot('vue-nodes-lod-active.png')
-
-    await expect(textboxesInNodes.first()).toBeHidden()
-    await expect(comboboxesInNodes.first()).toBeHidden()
-
-    await comfyPage.zoom(-120, 10)
-    await comfyPage.nextFrame()
-
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'vue-nodes-lod-inactive.png'
-    )
-    await expect(textboxesInNodes.first()).toBeVisible()
-    await expect(comboboxesInNodes.first()).toBeVisible()
-  })
-})

browser_tests/utils/devtoolsSync.ts

@@ -1,52 +0,0 @@
-import fs from 'fs-extra'
-import path from 'path'
-import { fileURLToPath } from 'url'
-
-export function syncDevtools(targetComfyDir: string): boolean {
-  if (!targetComfyDir) {
-    console.warn('syncDevtools skipped: TEST_COMFYUI_DIR not set')
-    return false
-  }
-
-  // Validate and sanitize the target directory path
-  const resolvedTargetDir = path.resolve(targetComfyDir)
-
-  // Basic path validation to prevent directory traversal
-  if (resolvedTargetDir.includes('..') || !path.isAbsolute(resolvedTargetDir)) {
-    console.error('syncDevtools failed: Invalid target directory path')
-    return false
-  }
-
-  const moduleDir =
-    typeof __dirname !== 'undefined'
-      ? __dirname
-      : path.dirname(fileURLToPath(import.meta.url))
-
-  const devtoolsSrc = path.resolve(moduleDir, '..', '..', 'tools', 'devtools')
-
-  if (!fs.pathExistsSync(devtoolsSrc)) {
-    console.warn(
-      `syncDevtools skipped: source directory not found at ${devtoolsSrc}`
-    )
-    return false
-  }
-
-  const devtoolsDest = path.resolve(
-    resolvedTargetDir,
-    'custom_nodes',
-    'ComfyUI_devtools'
-  )
-
-  console.warn(`syncDevtools: copying ${devtoolsSrc} -> ${devtoolsDest}`)
-
-  try {
-    fs.removeSync(devtoolsDest)
-    fs.ensureDirSync(devtoolsDest)
-    fs.copySync(devtoolsSrc, devtoolsDest, { overwrite: true })
-    console.warn('syncDevtools: copy complete')
-    return true
-  } catch (error) {
-    console.error(`Failed to sync DevTools to ${devtoolsDest}:`, error)
-    return false
-  }
-}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.32.5",
+  "version": "1.32.10",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -128,7 +128,7 @@
   "dependencies": {
     "@alloc/quick-lru": "catalog:",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "0.4.73-0",
+    "@comfyorg/comfyui-electron-types": "catalog:",
     "@comfyorg/design-system": "workspace:*",
     "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/shared-frontend-utils": "workspace:*",

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

@@ -98,6 +98,9 @@
 
   --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
 
+  --color-interface-panel-job-progress-primary: var(--color-azure-300);
+  --color-interface-panel-job-progress-secondary: var(--color-alpha-azure-600-30);
+
   --color-blue-selection: rgb(from var(--color-azure-600) r g b / 0.3);
   --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
@@ -265,12 +268,13 @@
    --palette-interface-button-hover-surface:  color-mix(in srgb, var(--interface-panel-surface) 82%, var(--contrast-mix-color));
 
    --modal-card-background: var(--secondary-background);
+   --modal-card-background-hovered: var(--secondary-background-hover);
+   --modal-card-border-highlighted: var(--secondary-background-selected);
    --modal-card-button-surface: var(--color-smoke-300);
    --modal-card-placeholder-background: var(--color-smoke-600);
-   --modal-card-tag-background: var(--color-smoke-200);
+   --modal-card-tag-background: var(--color-smoke-400);
    --modal-card-tag-foreground: var(--base-foreground);
    --modal-panel-background: var(--color-white);
-
 }
 
 .dark-theme {
@@ -330,6 +334,12 @@
   --node-stroke-error: var(--color-error);
   --node-stroke-executing: var(--color-azure-600);
 
+  /* Queue progress (dark theme) */
+  --color-interface-panel-job-progress-primary: var(--color-cobalt-800);
+  --color-interface-panel-job-progress-secondary: var(
+    --color-alpha-azure-600-30
+  );
+
   --text-secondary: var(--color-slate-100);
   --text-primary: var(--color-white);
 
@@ -368,9 +378,11 @@
   --component-node-widget-background-highlighted: var(--color-graphite-400);
 
   --modal-card-background: var(--secondary-background);
+  --modal-card-background-hovered: var(--secondary-background-hover);
+  --modal-card-border-highlighted: var(--color-ash-400);
   --modal-card-button-surface: var(--color-charcoal-300);
   --modal-card-placeholder-background: var(--secondary-background);
-  --modal-card-tag-background: var(--color-charcoal-200);
+  --modal-card-tag-background: var(--color-ash-800);
   --modal-card-tag-foreground: var(--base-foreground);
   --modal-panel-background: var(--color-charcoal-600);
 
@@ -386,12 +398,14 @@
   --color-subscription-button-gradient: var(--subscription-button-gradient);
 
   --color-modal-card-background: var(--modal-card-background);
+  --color-modal-card-background-hovered: var(--modal-card-background-hovered);
+  --color-modal-card-border-highlighted: var(--modal-card-border-highlighted);
   --color-modal-card-button-surface: var(--modal-card-button-surface);
   --color-modal-card-placeholder-background: var(--modal-card-placeholder-background);
   --color-modal-card-tag-background: var(--modal-card-tag-background);
   --color-modal-card-tag-foreground: var(--modal-card-tag-foreground);
   --color-modal-panel-background: var(--modal-panel-background);
-  
+
   --color-dialog-surface: var(--dialog-surface);
   --color-interface-menu-component-surface-hovered: var(
     --interface-menu-component-surface-hovered
@@ -1315,57 +1329,6 @@ audio.comfy-audio.empty-audio-widget {
   will-change: transform;
 }
 
-/* START LOD specific styles */
-/* LOD styles - Custom CSS avoids 100+ Tailwind selectors that would slow style recalculation when .isLOD toggles */
-
-.isLOD .lg-node {
-  box-shadow: none;
-  filter: none;
-  backdrop-filter: none;
-  text-shadow: none;
-  mask-image: none;
-  clip-path: none;
-  background-image: none;
-  text-rendering: optimizeSpeed;
-  border-radius: 0;
-  contain: layout style;
-  transition: none;
-}
-
-.isLOD .lg-node-header {
-  border-radius: 0;
-  pointer-events: none;
-}
-
-.isLOD .lg-node-widgets {
-  pointer-events: none;
-}
-
-.lod-toggle {
-  visibility: visible;
-}
-
-.isLOD .lod-toggle {
-  visibility: hidden;
-}
-
-.lod-fallback {
-  display: none;
-}
-
-.isLOD .lod-fallback {
-  display: block;
-}
-
-.isLOD .image-preview img {
-  image-rendering: pixelated;
-}
-
-.isLOD .slot-dot {
-  border-radius: 0;
-}
-/* END LOD specific styles */
-
 /* ===================== Mask Editor Styles ===================== */
 /* To be migrated to Tailwind later */
   #maskEditor_brush {
@@ -1827,4 +1790,4 @@ audio.comfy-audio.empty-audio-widget {
   .maskEditor_sidePanelLayerCheckbox {
     margin-left: 15px;
   }
-/* ===================== End of Mask Editor Styles ===================== */
+/* ===================== End of Mask Editor Styles ===================== */

packages/design-system/src/icons/file-output.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33398 1.33337V4.00004C9.33398 4.35366 9.47446 4.6928 9.72451 4.94285C9.97456 5.1929 10.3137 5.33337 10.6673 5.33337H13.334M2.66732 4.66671V2.66671C2.66732 2.31309 2.80779 1.97395 3.05784 1.7239C3.30789 1.47385 3.64703 1.33337 4.00065 1.33337H10.0006L13.334 4.66671V13.3334C13.334 13.687 13.1935 14.0261 12.9435 14.2762C12.6934 14.5262 12.3543 14.6667 12.0006 14.6667L4.04264 14.666C3.77927 14.7004 3.51166 14.6552 3.2741 14.5365C3.03655 14.4177 2.83988 14.2307 2.70931 13.9994M3.33398 7.33337L1.33398 9.33337M1.33398 9.33337L3.33398 11.3334M1.33398 9.33337H8.00065" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

pnpm-lock.yaml

@@ -9,6 +9,9 @@ catalogs:
     '@alloc/quick-lru':
       specifier: ^5.2.0
       version: 5.2.0
+    '@comfyorg/comfyui-electron-types':
+      specifier: 0.5.5
+      version: 0.5.5
     '@eslint/js':
       specifier: ^9.35.0
       version: 9.35.0
@@ -318,8 +321,8 @@ importers:
         specifier: ^1.3.1
         version: 1.3.1
       '@comfyorg/comfyui-electron-types':
-        specifier: 0.4.73-0
-        version: 0.4.73-0
+        specifier: 'catalog:'
+        version: 0.5.5
       '@comfyorg/design-system':
         specifier: workspace:*
         version: link:packages/design-system
@@ -709,8 +712,8 @@ importers:
   apps/desktop-ui:
     dependencies:
       '@comfyorg/comfyui-electron-types':
-        specifier: 0.4.73-0
-        version: 0.4.73-0
+        specifier: 'catalog:'
+        version: 0.5.5
       '@comfyorg/shared-frontend-utils':
         specifier: workspace:*
         version: link:../../packages/shared-frontend-utils
@@ -1453,8 +1456,8 @@ packages:
   '@cacheable/utils@2.0.3':
     resolution: {integrity: sha512-m7Rce68cMHlAUjvWBy9Ru1Nmw5gU0SjGGtQDdhpe6E0xnbcvrIY0Epy//JU1VYYBUTzrG9jvgmTauULGKzOkWA==}
 
-  '@comfyorg/comfyui-electron-types@0.4.73-0':
-    resolution: {integrity: sha512-WlItGJQx9ZWShNG9wypx3kq+19pSig/U+s5sD2SAeEcMph4u8A/TS+lnRgdKhT58VT1uD7cMcj2SJpfdBPNWvw==}
+  '@comfyorg/comfyui-electron-types@0.5.5':
+    resolution: {integrity: sha512-f3XOXpMsALIwHakz7FekVPm4/Fh2pvJPEi8tRe8jYGBt8edsd4Mkkq31Yjs2Weem3BP7yNwbdNuSiQdP/pxJyg==}
 
   '@csstools/color-helpers@5.1.0':
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
@@ -4413,6 +4416,9 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -7000,6 +7006,11 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
   restore-cursor@3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
@@ -7095,6 +7106,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -7815,8 +7831,8 @@ packages:
   vue-component-type-helpers@3.1.1:
     resolution: {integrity: sha512-B0kHv7qX6E7+kdc5nsaqjdGZ1KwNKSUQDWGy7XkTYT7wFsOpkEyaJ1Vq79TjwrrtuLRgizrTV7PPuC4rRQo+vw==}
 
-  vue-component-type-helpers@3.1.3:
-    resolution: {integrity: sha512-V1dOD8XYfstOKCnXbWyEJIrhTBMwSyNjv271L1Jlx9ExpNlCSuqOs3OdWrGJ0V544zXufKbcYabi/o+gK8lyfQ==}
+  vue-component-type-helpers@3.1.4:
+    resolution: {integrity: sha512-Uws7Ew1OzTTqHW8ZVl/qLl/HB+jf08M0NdFONbVWAx0N4gMLK8yfZDgeB77hDnBmaigWWEn5qP8T9BG59jIeyQ==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -8992,7 +9008,7 @@ snapshots:
 
   '@cacheable/utils@2.0.3': {}
 
-  '@comfyorg/comfyui-electron-types@0.4.73-0': {}
+  '@comfyorg/comfyui-electron-types@0.5.5': {}
 
   '@csstools/color-helpers@5.1.0': {}
 
@@ -10617,7 +10633,7 @@ snapshots:
       storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.1.3
+      vue-component-type-helpers: 3.1.4
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -10989,7 +11005,7 @@ snapshots:
 
   '@types/react@19.1.9':
     dependencies:
-      csstype: 3.1.3
+      csstype: 3.2.3
 
   '@types/semver@7.7.0': {}
 
@@ -12168,6 +12184,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  csstype@3.2.3: {}
+
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
@@ -12594,7 +12612,7 @@ snapshots:
     dependencies:
       debug: 3.2.7
       is-core-module: 2.16.1
-      resolve: 1.22.10
+      resolve: 1.22.11
     transitivePeerDependencies:
       - supports-color
     optional: true
@@ -13740,7 +13758,7 @@ snapshots:
       acorn: 8.15.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      semver: 7.7.2
+      semver: 7.7.3
 
   jsonc-parser@3.2.0: {}
 
@@ -15345,6 +15363,13 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  resolve@1.22.11:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    optional: true
+
   restore-cursor@3.1.0:
     dependencies:
       onetime: 5.1.2
@@ -15449,6 +15474,8 @@ snapshots:
 
   semver@7.7.2: {}
 
+  semver@7.7.3: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -16343,7 +16370,7 @@ snapshots:
 
   vue-component-type-helpers@3.1.1: {}
 
-  vue-component-type-helpers@3.1.3: {}
+  vue-component-type-helpers@3.1.4: {}
 
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
     dependencies:

pnpm-workspace.yaml

@@ -4,6 +4,7 @@ packages:
 
 catalog:
   '@alloc/quick-lru': ^5.2.0
+  '@comfyorg/comfyui-electron-types': 0.5.5
   '@eslint/js': ^9.35.0
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380

src/components/TopMenuSection.vue

@@ -4,38 +4,80 @@
       <SubgraphBreadcrumb />
     </div>
 
-    <div
-      class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-[var(--interface-stroke)] px-2 shadow-interface"
-    >
-      <ActionBarButtons />
-      <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
+    <div class="mx-1 flex flex-col items-end gap-1">
       <div
-        ref="legacyCommandsContainerRef"
-        class="[&:not(:has(*>*:not(:empty)))]:hidden"
-      ></div>
-      <ComfyActionbar />
-      <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
-      <LoginButton v-else-if="isDesktop" />
+        class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-interface-stroke px-2 shadow-interface"
+      >
+        <ActionBarButtons />
+        <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
+        <div
+          ref="legacyCommandsContainerRef"
+          class="[&:not(:has(*>*:not(:empty)))]:hidden"
+        ></div>
+        <ComfyActionbar />
+        <IconButton
+          v-tooltip.bottom="queueHistoryTooltipConfig"
+          type="transparent"
+          size="sm"
+          class="queue-history-toggle relative mr-2 transition-colors duration-200 ease-in-out hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
+          :class="queueHistoryButtonBackgroundClass"
+          :aria-pressed="isQueueOverlayExpanded"
+          :aria-label="
+            t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+          "
+          @click="toggleQueueOverlay"
+        >
+          <i
+            class="icon-[lucide--history] block size-4 text-muted-foreground"
+          />
+          <span
+            v-if="queuedCount > 0"
+            class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-white"
+          >
+            {{ queuedCount }}
+          </span>
+        </IconButton>
+        <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
+        <LoginButton v-else-if="isDesktop" />
+      </div>
+      <QueueProgressOverlay v-model:expanded="isQueueOverlayExpanded" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
+import IconButton from '@/components/button/IconButton.vue'
+import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
 import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { app } from '@/scripts/app'
+import { useQueueStore } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isElectron } from '@/utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
+const { t } = useI18n()
+const isQueueOverlayExpanded = ref(false)
+const queueStore = useQueueStore()
+const queuedCount = computed(() => queueStore.pendingTasks.length)
+const queueHistoryTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
+)
+const queueHistoryButtonBackgroundClass = computed(() =>
+  isQueueOverlayExpanded.value
+    ? 'bg-secondary-background-selected'
+    : 'bg-secondary-background'
+)
 
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
@@ -45,6 +87,10 @@ onMounted(() => {
     legacyCommandsContainerRef.value.appendChild(app.menu.element)
   }
 })
+
+const toggleQueueOverlay = () => {
+  isQueueOverlayExpanded.value = !isQueueOverlayExpanded.value
+}
 </script>
 
 <style scoped>

src/components/actionbar/ComfyActionbar.vue

@@ -10,7 +10,7 @@
     </div>
 
     <Panel
-      class="pointer-events-auto z-1000"
+      class="pointer-events-auto z-1010"
       :style="style"
       :class="panelClass"
       :pt="{
@@ -260,6 +260,7 @@ const actionbarClass = computed(() =>
     'w-[265px] border-dashed border-blue-500 opacity-80',
     'm-1.5 flex items-center justify-center self-stretch',
     'rounded-md before:w-50 before:-ml-50 before:h-full',
+    'pointer-events-auto',
     isMouseOverDropZone.value &&
       'border-[3px] opacity-100 scale-105 shadow-[0_0_20px] shadow-blue-500'
   )

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -2,9 +2,7 @@
   <div class="queue-button-group flex">
     <SplitButton
       v-tooltip.bottom="{
-        value: workspaceStore.shiftDown
-          ? $t('menu.runWorkflowFront')
-          : $t('menu.runWorkflow'),
+        value: queueButtonTooltip,
         showDelay: 600
       }"
       class="comfyui-queue-button"
@@ -16,16 +14,7 @@
       @click="queuePrompt"
     >
       <template #icon>
-        <i v-if="workspaceStore.shiftDown" class="icon-[lucide--list-start]" />
-        <i v-else-if="queueMode === 'disabled'" class="icon-[lucide--play]" />
-        <i
-          v-else-if="queueMode === 'instant'"
-          class="icon-[lucide--fast-forward]"
-        />
-        <i
-          v-else-if="queueMode === 'change'"
-          class="icon-[lucide--step-forward]"
-        />
+        <i :class="iconClass" />
       </template>
       <template #item="{ item }">
         <Button
@@ -89,12 +78,15 @@ import { useI18n } from 'vue-i18n'
 
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
+import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import {
   useQueuePendingTaskCountStore,
   useQueueSettingsStore
 } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
 import BatchCountEdit from '../BatchCountEdit.vue'
 
@@ -102,6 +94,11 @@ const workspaceStore = useWorkspaceStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
 const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
+const nodeDefStore = useNodeDefStore()
+const hasMissingNodes = computed(() =>
+  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+)
+
 const { t } = useI18n()
 const queueModeMenuItemLookup = computed(() => {
   const items: Record<string, MenuItem> = {
@@ -157,6 +154,35 @@ const hasPendingTasks = computed(
   () => queueCountStore.count.value > 1 || queueMode.value !== 'disabled'
 )
 
+const iconClass = computed(() => {
+  if (hasMissingNodes.value) {
+    return 'icon-[lucide--triangle-alert]'
+  }
+  if (workspaceStore.shiftDown) {
+    return 'icon-[lucide--list-start]'
+  }
+  if (queueMode.value === 'disabled') {
+    return 'icon-[lucide--play]'
+  }
+  if (queueMode.value === 'instant') {
+    return 'icon-[lucide--fast-forward]'
+  }
+  if (queueMode.value === 'change') {
+    return 'icon-[lucide--step-forward]'
+  }
+  return 'icon-[lucide--play]'
+})
+
+const queueButtonTooltip = computed(() => {
+  if (hasMissingNodes.value) {
+    return t('menu.runWorkflowDisabled')
+  }
+  if (workspaceStore.shiftDown) {
+    return t('menu.runWorkflowFront')
+  }
+  return t('menu.runWorkflow')
+})
+
 const commandStore = useCommandStore()
 const queuePrompt = async (e: Event) => {
   const isShiftPressed = 'shiftKey' in e && e.shiftKey

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue

@@ -46,11 +46,11 @@
 </template>
 
 <script setup lang="ts">
-import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type { ComfyCommandImpl } from '@/stores/commandStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
 
 const { t } = useI18n()
 

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -2,7 +2,7 @@
   <a
     ref="wrapperRef"
     v-tooltip.bottom="{
-      value: item.label,
+      value: tooltipText,
       showDelay: 512
     }"
     draggable="false"
@@ -16,6 +16,10 @@
     }"
     @click="handleClick"
   >
+    <i
+      v-if="hasMissingNodes && isRoot"
+      class="icon-[lucide--triangle-alert] text-warning-background"
+    />
     <span class="p-breadcrumb-item-label px-2">{{ item.label }}</span>
     <Tag v-if="item.isBlueprint" :value="'Blueprint'" severity="primary" />
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
@@ -47,7 +51,6 @@
 </template>
 
 <script setup lang="ts">
-import { appendJsonExt } from '@comfyorg/shared-frontend-utils/formatUtil'
 import InputText from 'primevue/inputtext'
 import type { MenuState } from 'primevue/menu'
 import Menu from 'primevue/menu'
@@ -61,9 +64,13 @@ import {
   ComfyWorkflow,
   useWorkflowStore
 } from '@/platform/workflow/management/stores/workflowStore'
+import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
+import { appendJsonExt } from '@/utils/formatUtil'
+import { graphHasMissingNodes } from '@/workbench/extensions/manager/utils/graphHasMissingNodes'
 
 interface Props {
   item: MenuItem
@@ -74,6 +81,11 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false
 })
 
+const nodeDefStore = useNodeDefStore()
+const hasMissingNodes = computed(() =>
+  graphHasMissingNodes(app.graph, nodeDefStore.nodeDefsByName)
+)
+
 const { t } = useI18n()
 const menu = ref<InstanceType<typeof Menu> & MenuState>()
 const dialogService = useDialogService()
@@ -115,6 +127,14 @@ const rename = async (
 }
 
 const isRoot = props.item.key === 'root'
+
+const tooltipText = computed(() => {
+  if (hasMissingNodes.value && isRoot) {
+    return t('breadcrumbsMenu.missingNodesWarning')
+  }
+  return props.item.label
+})
+
 const menuItems = computed<MenuItem[]>(() => {
   return [
     {

src/components/button/IconButton.vue

@@ -24,7 +24,7 @@ import {
 import { cn } from '@/utils/tailwindUtil'
 
 interface IconButtonProps extends BaseButtonProps {
-  onClick: (event: Event) => void
+  onClick?: (event: MouseEvent) => void
 }
 
 defineOptions({

src/components/button/IconTextButton.vue

@@ -47,7 +47,7 @@ const {
 } = defineProps<IconTextButtonProps>()
 
 const buttonStyle = computed(() => {
-  const baseClasses = `${getBaseButtonClasses()} justify-start! gap-2`
+  const baseClasses = `${getBaseButtonClasses()} justify-start gap-2`
   const sizeClasses = getButtonSizeClasses(size)
   const typeClasses = border
     ? getBorderButtonTypeClasses(type)

src/components/chip/SquareChip.vue

@@ -11,7 +11,7 @@ import { cn } from '@/utils/tailwindUtil'
 
 const { label, variant = 'dark' } = defineProps<{
   label: string
-  variant?: 'dark' | 'light'
+  variant?: 'dark' | 'light' | 'gray'
 }>()
 
 const baseClasses =
@@ -19,7 +19,10 @@ const baseClasses =
 
 const variantStyles = {
   dark: 'bg-zinc-500/40 text-white/90',
-  light: cn('backdrop-blur-[2px] bg-base-background/50 text-base-foreground')
+  light: cn('backdrop-blur-[2px] bg-base-background/50 text-base-foreground'),
+  gray: cn(
+    'backdrop-blur-[2px] bg-modal-card-tag-background text-base-foreground'
+  )
 }
 
 const chipClasses = computed(() => {

src/components/common/DeviceInfo.vue

@@ -12,9 +12,8 @@
 </template>
 
 <script setup lang="ts">
-import { formatSize } from '@comfyorg/shared-frontend-utils/formatUtil'
-
 import type { DeviceStats } from '@/schemas/apiSchema'
+import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   device: DeviceStats

src/components/common/ElectronFileDownload.vue

@@ -82,7 +82,6 @@
 </template>
 
 <script setup lang="ts">
-import { formatSize } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
@@ -91,6 +90,7 @@ import { useI18n } from 'vue-i18n'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   url: string

src/components/common/FileDownload.vue

@@ -43,13 +43,13 @@
 </template>
 
 <script setup lang="ts">
-import { formatSize } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import { useDownload } from '@/composables/useDownload'
+import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   url: string

src/components/common/SystemStatsPanel.vue

@@ -36,7 +36,6 @@
 </template>
 
 <script setup lang="ts">
-import { formatSize } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Divider from 'primevue/divider'
 import TabPanel from 'primevue/tabpanel'
 import TabView from 'primevue/tabview'
@@ -44,6 +43,7 @@ import { computed } from 'vue'
 
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
 import type { SystemStats } from '@/schemas/apiSchema'
+import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   stats: SystemStats

src/components/common/UrlInput.vue

@@ -23,18 +23,19 @@
 </template>
 
 <script setup lang="ts">
-import { isValidUrl } from '@comfyorg/shared-frontend-utils/formatUtil'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
 import { onMounted, ref, watch } from 'vue'
 
+import { isValidUrl } from '@/utils/formatUtil'
 import { checkUrlReachable } from '@/utils/networkUtil'
 import { ValidationState } from '@/utils/validationUtil'
 
 const props = defineProps<{
   modelValue: string
   validateUrlFn?: (url: string) => Promise<boolean>
+  disableValidation?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -101,6 +102,8 @@ const defaultValidateUrl = async (url: string): Promise<boolean> => {
 }
 
 const validateUrl = async (value: string) => {
+  if (props.disableValidation) return
+
   if (validationState.value === ValidationState.LOADING) return
 
   const url = cleanInput(value)

src/components/common/UserCredit.vue

@@ -18,12 +18,12 @@
 </template>
 
 <script setup lang="ts">
-import { formatMetronomeCurrency } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Skeleton from 'primevue/skeleton'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 const { textClass } = defineProps<{
   textClass?: string

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -92,7 +92,7 @@
             class="w-62.5"
           >
             <template #icon>
-              <i class="icon-[lucide--arrow-up-down]" />
+              <i class="icon-[lucide--arrow-up-down] text-muted-foreground" />
             </template>
           </SingleSelect>
         </div>

src/components/dialog/content/MissingNodesContent.vue

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="flex w-[490px] flex-col border-t-1 border-b-1 border-border-default"
+    class="flex w-[490px] flex-col border-t-1 border-border-default"
+    :class="isCloud ? 'border-b-1' : ''"
   >
     <div class="flex h-full w-full flex-col gap-4 p-4">
       <!-- Description -->

src/components/dialog/content/setting/CreditsPanel.vue

@@ -112,7 +112,6 @@
 </template>
 
 <script setup lang="ts">
-import { formatMetronomeCurrency } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
@@ -130,6 +129,7 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { formatMetronomeCurrency } from '@/utils/formatUtil'
 
 interface CreditHistoryItemData {
   title: string

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -126,7 +126,6 @@
 </template>
 
 <script setup lang="ts">
-import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import { FilterMatchMode } from '@primevue/core/api'
 import Button from 'primevue/button'
 import Column from 'primevue/column'
@@ -147,6 +146,7 @@ import {
   KeybindingImpl,
   useKeybindingStore
 } from '@/stores/keybindingStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
 
 import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'

src/components/graph/NodeTooltip.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script setup lang="ts">
-import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import { useEventListener } from '@vueuse/core'
 import { nextTick, ref } from 'vue'
 
@@ -24,6 +23,7 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { app as comfyApp } from '@/scripts/app'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
 
 let idleTimeout: number
 const nodeDefStore = useNodeDefStore()

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -14,12 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 
 import { st } from '@/i18n'
 import type { ComfyCommand } from '@/stores/commandStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
 
 defineProps<{
   command: ComfyCommand

src/components/graph/widgets/TextPreviewWidget.vue

@@ -12,12 +12,12 @@
 </template>
 
 <script setup lang="ts">
-import { linkifyHtml, nl2br } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import type { NodeId } from '@/lib/litegraph/src/litegraph'
 import { useExecutionStore } from '@/stores/executionStore'
+import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 
 const modelValue = defineModel<string>({ required: true })
 const props = defineProps<{

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -137,7 +137,6 @@
 </template>
 
 <script setup lang="ts">
-import { formatVersionAnchor } from '@comfyorg/shared-frontend-utils/formatUtil'
 import Button from 'primevue/button'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import type { CSSProperties, Component } from 'vue'
@@ -152,6 +151,7 @@ import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { electronAPI, isElectron } from '@/utils/envUtil'
+import { formatVersionAnchor } from '@/utils/formatUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'

src/components/input/MultiSelect.vue

@@ -17,7 +17,7 @@
       root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
         class: cn(
           'h-10 relative inline-flex cursor-pointer select-none',
-          'rounded-lg bg-base-background text-base-foreground',
+          'rounded-lg bg-secondary-background text-base-foreground',
           'transition-all duration-200 ease-in-out',
           'border-[2.5px] border-solid',
           selectedCount > 0
@@ -127,7 +127,7 @@
 
     <!-- Trigger value (keep text scale identical) -->
     <template #value>
-      <span class="text-sm text-muted-foreground">
+      <span class="text-sm">
         {{ label }}
       </span>
       <span
@@ -140,7 +140,7 @@
 
     <!-- Chevron size identical to current -->
     <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-lg text-neutral-400" />
+      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
     </template>
 
     <!-- Custom option row: square checkbox + label (unchanged layout/colors) -->

src/components/input/SearchBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapperStyle" @click="focusInput">
-    <i class="icon-[lucide--search] text-muted" />
+    <i class="icon-[lucide--search] text-muted-foreground" />
     <InputText
       ref="input"
       v-model="internalSearchQuery"
@@ -73,7 +73,7 @@ onMounted(() => autofocus && focusInput())
 
 const wrapperStyle = computed(() => {
   const baseClasses =
-    'relative flex w-full items-center gap-2 bg-base-background cursor-text'
+    'relative flex w-full items-center gap-2 bg-secondary-background cursor-text'
 
   if (showBorder) {
     return cn(

src/components/input/SingleSelect.vue

@@ -20,7 +20,7 @@
           'h-10 relative inline-flex cursor-pointer select-none items-center',
           // trigger surface
           'rounded-lg',
-          'bg-base-background text-base-foreground',
+          'bg-secondary-background text-base-foreground',
           'border-[2.5px] border-solid border-transparent',
           'transition-all duration-200 ease-in-out',
           'focus-within:border-node-component-border',
@@ -84,7 +84,7 @@
   >
     <!-- Trigger value -->
     <template #value="slotProps">
-      <div class="flex items-center gap-2 text-sm text-neutral-500">
+      <div class="flex items-center gap-2 text-sm">
         <slot name="icon" />
         <span
           v-if="slotProps.value !== null && slotProps.value !== undefined"
@@ -100,7 +100,7 @@
 
     <!-- Trigger caret -->
     <template #dropdownicon>
-      <i class="icon-[lucide--chevron-down] text-base text-neutral-500" />
+      <i class="icon-[lucide--chevron-down] text-muted-foreground" />
     </template>
 
     <!-- Option row -->

src/components/node/NodePreview.vue

@@ -3,7 +3,7 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 -->
 <template>
   <LGraphNodePreview v-if="shouldRenderVueNodes" :node-def="nodeDef" />
-  <div v-else class="_sb_node_preview">
+  <div v-else class="_sb_node_preview bg-component-node-background">
     <div class="_sb_table">
       <div
         class="node_header mr-4 text-ellipsis"
@@ -200,7 +200,6 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
 }
 
 ._sb_node_preview {
-  background-color: var(--comfy-menu-bg);
   font-family: 'Open Sans', sans-serif;
   color: var(--descrip-text);
   border: 1px solid var(--descrip-text);

src/components/queue/CompletionSummaryBanner.stories.ts

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import CompletionSummaryBanner from './CompletionSummaryBanner.vue'
+
+const meta: Meta<typeof CompletionSummaryBanner> = {
+  title: 'Queue/CompletionSummaryBanner',
+  component: CompletionSummaryBanner,
+  parameters: {
+    layout: 'padded'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const thumb = (hex: string) =>
+  `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><rect width='24' height='24' fill='%23${hex}'/></svg>`
+
+const thumbs = [thumb('ff6b6b'), thumb('4dabf7'), thumb('51cf66')]
+
+export const AllSuccessSingle: Story = {
+  args: {
+    mode: 'allSuccess',
+    completedCount: 1,
+    failedCount: 0,
+    thumbnailUrls: [thumbs[0]]
+  }
+}
+
+export const AllSuccessPlural: Story = {
+  args: {
+    mode: 'allSuccess',
+    completedCount: 3,
+    failedCount: 0,
+    thumbnailUrls: thumbs
+  }
+}
+
+export const MixedSingleSingle: Story = {
+  args: {
+    mode: 'mixed',
+    completedCount: 1,
+    failedCount: 1,
+    thumbnailUrls: thumbs.slice(0, 2)
+  }
+}
+
+export const MixedPluralPlural: Story = {
+  args: {
+    mode: 'mixed',
+    completedCount: 2,
+    failedCount: 3,
+    thumbnailUrls: thumbs
+  }
+}
+
+export const AllFailedSingle: Story = {
+  args: {
+    mode: 'allFailed',
+    completedCount: 0,
+    failedCount: 1,
+    thumbnailUrls: []
+  }
+}
+
+export const AllFailedPlural: Story = {
+  args: {
+    mode: 'allFailed',
+    completedCount: 0,
+    failedCount: 4,
+    thumbnailUrls: []
+  }
+}

src/components/queue/CompletionSummaryBanner.test.ts

@@ -0,0 +1,91 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import CompletionSummaryBanner from './CompletionSummaryBanner.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      sideToolbar: {
+        queueProgressOverlay: {
+          jobsCompleted: '{count} job completed | {count} jobs completed',
+          jobsFailed: '{count} job failed | {count} jobs failed'
+        }
+      }
+    }
+  }
+})
+
+const mountComponent = (props: Record<string, unknown>) =>
+  mount(CompletionSummaryBanner, {
+    props: {
+      mode: 'allSuccess',
+      completedCount: 0,
+      failedCount: 0,
+      ...props
+    },
+    global: {
+      plugins: [i18n]
+    }
+  })
+
+describe('CompletionSummaryBanner', () => {
+  it('renders success mode text, thumbnails, and aria label', () => {
+    const wrapper = mountComponent({
+      mode: 'allSuccess',
+      completedCount: 3,
+      failedCount: 0,
+      thumbnailUrls: [
+        'https://example.com/thumb-a.png',
+        'https://example.com/thumb-b.png'
+      ],
+      ariaLabel: 'Open queue summary'
+    })
+
+    const button = wrapper.get('button')
+    expect(button.attributes('aria-label')).toBe('Open queue summary')
+    expect(wrapper.text()).toContain('3 jobs completed')
+
+    const thumbnailImages = wrapper.findAll('img')
+    expect(thumbnailImages).toHaveLength(2)
+    expect(thumbnailImages[0].attributes('src')).toBe(
+      'https://example.com/thumb-a.png'
+    )
+    expect(thumbnailImages[1].attributes('src')).toBe(
+      'https://example.com/thumb-b.png'
+    )
+
+    const thumbnailContainers = wrapper.findAll('.inline-block.h-6.w-6')
+    expect(thumbnailContainers[1].attributes('style')).toContain(
+      'margin-left: -12px'
+    )
+
+    expect(wrapper.html()).not.toContain('icon-[lucide--circle-alert]')
+  })
+
+  it('renders mixed mode with success and failure counts', () => {
+    const wrapper = mountComponent({
+      mode: 'mixed',
+      completedCount: 2,
+      failedCount: 1
+    })
+
+    const summaryText = wrapper.text().replace(/\s+/g, ' ').trim()
+    expect(summaryText).toContain('2 jobs completed, 1 job failed')
+  })
+
+  it('renders failure mode icon without thumbnails', () => {
+    const wrapper = mountComponent({
+      mode: 'allFailed',
+      completedCount: 0,
+      failedCount: 4
+    })
+
+    expect(wrapper.text()).toContain('4 jobs failed')
+    expect(wrapper.html()).toContain('icon-[lucide--circle-alert]')
+    expect(wrapper.findAll('img')).toHaveLength(0)
+  })
+})

src/components/queue/CompletionSummaryBanner.vue

@@ -0,0 +1,106 @@
+<template>
+  <IconButton
+    type="secondary"
+    size="fit-content"
+    class="group w-full justify-between gap-3 rounded-lg p-1 text-left font-normal hover:cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
+    :aria-label="props.ariaLabel"
+    @click="emit('click', $event)"
+  >
+    <span class="inline-flex items-center gap-2">
+      <span v-if="props.mode === 'allFailed'" class="inline-flex items-center">
+        <i
+          class="ml-1 icon-[lucide--circle-alert] block size-4 leading-none"
+          :class="'text-destructive-background'"
+        />
+      </span>
+
+      <span class="inline-flex items-center gap-2">
+        <span
+          v-if="props.mode !== 'allFailed'"
+          class="relative inline-flex h-6 items-center"
+        >
+          <span
+            v-for="(url, idx) in props.thumbnailUrls"
+            :key="url + idx"
+            class="inline-block h-6 w-6 overflow-hidden rounded-[6px] border-0 bg-secondary-background"
+            :style="{ marginLeft: idx === 0 ? '0' : '-12px' }"
+          >
+            <img :src="url" alt="preview" class="h-full w-full object-cover" />
+          </span>
+        </span>
+
+        <span class="text-[14px] font-normal text-text-primary">
+          <template v-if="props.mode === 'allSuccess'">
+            <i18n-t
+              keypath="sideToolbar.queueProgressOverlay.jobsCompleted"
+              :plural="props.completedCount"
+            >
+              <template #count>
+                <span class="font-bold">{{ props.completedCount }}</span>
+              </template>
+            </i18n-t>
+          </template>
+          <template v-else-if="props.mode === 'mixed'">
+            <i18n-t
+              keypath="sideToolbar.queueProgressOverlay.jobsCompleted"
+              :plural="props.completedCount"
+            >
+              <template #count>
+                <span class="font-bold">{{ props.completedCount }}</span>
+              </template>
+            </i18n-t>
+            <span>, </span>
+            <i18n-t
+              keypath="sideToolbar.queueProgressOverlay.jobsFailed"
+              :plural="props.failedCount"
+            >
+              <template #count>
+                <span class="font-bold">{{ props.failedCount }}</span>
+              </template>
+            </i18n-t>
+          </template>
+          <template v-else>
+            <i18n-t
+              keypath="sideToolbar.queueProgressOverlay.jobsFailed"
+              :plural="props.failedCount"
+            >
+              <template #count>
+                <span class="font-bold">{{ props.failedCount }}</span>
+              </template>
+            </i18n-t>
+          </template>
+        </span>
+      </span>
+    </span>
+
+    <span
+      class="flex items-center justify-center rounded p-1 text-text-secondary transition-colors duration-200 ease-in-out"
+    >
+      <i class="icon-[lucide--chevron-down] block size-4 leading-none" />
+    </span>
+  </IconButton>
+</template>
+
+<script setup lang="ts">
+import IconButton from '@/components/button/IconButton.vue'
+import type {
+  CompletionSummary,
+  CompletionSummaryMode
+} from '@/composables/queue/useCompletionSummary'
+
+type Props = {
+  mode: CompletionSummaryMode
+  completedCount: CompletionSummary['completedCount']
+  failedCount: CompletionSummary['failedCount']
+  thumbnailUrls?: CompletionSummary['thumbnailUrls']
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  thumbnailUrls: () => []
+})
+
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void
+}>()
+</script>

src/components/queue/QueueOverlayActive.test.ts

@@ -0,0 +1,125 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import QueueOverlayActive from './QueueOverlayActive.vue'
+import * as tooltipConfig from '@/composables/useTooltipConfig'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      sideToolbar: {
+        queueProgressOverlay: {
+          total: 'Total: {percent}',
+          currentNode: 'Current node:',
+          running: 'running',
+          interruptAll: 'Interrupt all running jobs',
+          queuedSuffix: 'queued',
+          clearQueued: 'Clear queued',
+          viewAllJobs: 'View all jobs',
+          cancelJobTooltip: 'Cancel job',
+          clearQueueTooltip: 'Clear queue'
+        }
+      }
+    }
+  }
+})
+
+const tooltipDirectiveStub = {
+  mounted: vi.fn(),
+  updated: vi.fn()
+}
+
+const SELECTORS = {
+  interruptAllButton: 'button[aria-label="Interrupt all running jobs"]',
+  clearQueuedButton: 'button[aria-label="Clear queued"]',
+  summaryRow: '.flex.items-center.gap-2',
+  currentNodeRow: '.flex.items-center.gap-1.text-text-secondary'
+}
+
+const COPY = {
+  viewAllJobs: 'View all jobs'
+}
+
+const mountComponent = (props: Record<string, unknown> = {}) =>
+  mount(QueueOverlayActive, {
+    props: {
+      totalProgressStyle: { width: '65%' },
+      currentNodeProgressStyle: { width: '40%' },
+      totalPercentFormatted: '65%',
+      currentNodePercentFormatted: '40%',
+      currentNodeName: 'Sampler',
+      runningCount: 1,
+      queuedCount: 2,
+      bottomRowClass: 'flex custom-bottom-row',
+      ...props
+    },
+    global: {
+      plugins: [i18n],
+      directives: {
+        tooltip: tooltipDirectiveStub
+      }
+    }
+  })
+
+describe('QueueOverlayActive', () => {
+  it('renders progress metrics and emits actions when buttons clicked', async () => {
+    const wrapper = mountComponent({ runningCount: 2, queuedCount: 3 })
+
+    const progressBars = wrapper.findAll('.absolute.inset-0')
+    expect(progressBars[0].attributes('style')).toContain('width: 65%')
+    expect(progressBars[1].attributes('style')).toContain('width: 40%')
+
+    const content = wrapper.text().replace(/\s+/g, ' ')
+    expect(content).toContain('Total: 65%')
+
+    const [runningSection, queuedSection] = wrapper.findAll(
+      SELECTORS.summaryRow
+    )
+    expect(runningSection.text()).toContain('2')
+    expect(runningSection.text()).toContain('running')
+    expect(queuedSection.text()).toContain('3')
+    expect(queuedSection.text()).toContain('queued')
+
+    const currentNodeSection = wrapper.find(SELECTORS.currentNodeRow)
+    expect(currentNodeSection.text()).toContain('Current node:')
+    expect(currentNodeSection.text()).toContain('Sampler')
+    expect(currentNodeSection.text()).toContain('40%')
+
+    const interruptButton = wrapper.get(SELECTORS.interruptAllButton)
+    await interruptButton.trigger('click')
+    expect(wrapper.emitted('interruptAll')).toHaveLength(1)
+
+    const clearQueuedButton = wrapper.get(SELECTORS.clearQueuedButton)
+    await clearQueuedButton.trigger('click')
+    expect(wrapper.emitted('clearQueued')).toHaveLength(1)
+
+    const buttons = wrapper.findAll('button')
+    const viewAllButton = buttons.find((btn) =>
+      btn.text().includes(COPY.viewAllJobs)
+    )
+    expect(viewAllButton).toBeDefined()
+    await viewAllButton!.trigger('click')
+    expect(wrapper.emitted('viewAllJobs')).toHaveLength(1)
+
+    expect(wrapper.find('.custom-bottom-row').exists()).toBe(true)
+  })
+
+  it('hides action buttons when counts are zero', () => {
+    const wrapper = mountComponent({ runningCount: 0, queuedCount: 0 })
+
+    expect(wrapper.find(SELECTORS.interruptAllButton).exists()).toBe(false)
+    expect(wrapper.find(SELECTORS.clearQueuedButton).exists()).toBe(false)
+  })
+
+  it('builds tooltip configs with translated strings', () => {
+    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
+
+    mountComponent()
+
+    expect(spy).toHaveBeenCalledWith('Cancel job')
+    expect(spy).toHaveBeenCalledWith('Clear queue')
+  })
+})

src/components/queue/QueueOverlayActive.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="flex flex-col gap-3 p-2">
+    <div class="flex flex-col gap-1">
+      <div
+        class="relative h-2 w-full overflow-hidden rounded-full border border-interface-stroke bg-interface-panel-surface"
+      >
+        <div
+          class="absolute inset-0 h-full rounded-full transition-[width]"
+          :style="totalProgressStyle"
+        />
+        <div
+          class="absolute inset-0 h-full rounded-full transition-[width]"
+          :style="currentNodeProgressStyle"
+        />
+      </div>
+      <div class="flex items-start justify-end gap-4 text-[12px] leading-none">
+        <div class="flex items-center gap-1 text-text-primary opacity-90">
+          <i18n-t keypath="sideToolbar.queueProgressOverlay.total">
+            <template #percent>
+              <span class="font-bold">{{ totalPercentFormatted }}</span>
+            </template>
+          </i18n-t>
+        </div>
+        <div class="flex items-center gap-1 text-text-secondary">
+          <span>{{ t('sideToolbar.queueProgressOverlay.currentNode') }}</span>
+          <span class="inline-block max-w-[10rem] truncate">{{
+            currentNodeName
+          }}</span>
+          <span class="flex items-center gap-1">
+            <span>{{ currentNodePercentFormatted }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div :class="bottomRowClass">
+      <div class="flex items-center gap-4 text-[12px] text-text-primary">
+        <div class="flex items-center gap-2">
+          <span class="opacity-90">
+            <span class="font-bold">{{ runningCount }}</span>
+            <span class="ml-1">{{
+              t('sideToolbar.queueProgressOverlay.running')
+            }}</span>
+          </span>
+          <IconButton
+            v-if="runningCount > 0"
+            v-tooltip.top="cancelJobTooltip"
+            type="secondary"
+            size="sm"
+            class="size-6 bg-secondary-background hover:bg-destructive-background"
+            :aria-label="t('sideToolbar.queueProgressOverlay.interruptAll')"
+            @click="$emit('interruptAll')"
+          >
+            <i
+              class="icon-[lucide--x] block size-4 leading-none text-text-primary"
+            />
+          </IconButton>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <span class="opacity-90">
+            <span class="font-bold">{{ queuedCount }}</span>
+            <span class="ml-1">{{
+              t('sideToolbar.queueProgressOverlay.queuedSuffix')
+            }}</span>
+          </span>
+          <IconButton
+            v-if="queuedCount > 0"
+            v-tooltip.top="clearQueueTooltip"
+            type="secondary"
+            size="sm"
+            class="size-6 bg-secondary-background hover:bg-destructive-background"
+            :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
+            @click="$emit('clearQueued')"
+          >
+            <i
+              class="icon-[lucide--list-x] block size-4 leading-none text-text-primary"
+            />
+          </IconButton>
+        </div>
+      </div>
+
+      <TextButton
+        class="h-6 min-w-[120px] flex-1 px-2 py-0 text-[12px]"
+        type="secondary"
+        :label="t('sideToolbar.queueProgressOverlay.viewAllJobs')"
+        @click="$emit('viewAllJobs')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import IconButton from '@/components/button/IconButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+
+defineProps<{
+  totalProgressStyle: Record<string, string>
+  currentNodeProgressStyle: Record<string, string>
+  totalPercentFormatted: string
+  currentNodePercentFormatted: string
+  currentNodeName: string
+  runningCount: number
+  queuedCount: number
+  bottomRowClass: string
+}>()
+
+defineEmits<{
+  (e: 'interruptAll'): void
+  (e: 'clearQueued'): void
+  (e: 'viewAllJobs'): void
+}>()
+
+const { t } = useI18n()
+const cancelJobTooltip = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.cancelJobTooltip'))
+)
+const clearQueueTooltip = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearQueueTooltip'))
+)
+</script>

src/components/queue/QueueOverlayEmpty.test.ts

@@ -0,0 +1,69 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import QueueOverlayEmpty from './QueueOverlayEmpty.vue'
+import type { CompletionSummary } from '@/composables/queue/useCompletionSummary'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      sideToolbar: {
+        queueProgressOverlay: {
+          expandCollapsedQueue: 'Expand job queue',
+          noActiveJobs: 'No active jobs'
+        }
+      }
+    }
+  }
+})
+
+const CompletionSummaryBannerStub = {
+  name: 'CompletionSummaryBanner',
+  props: [
+    'mode',
+    'completedCount',
+    'failedCount',
+    'thumbnailUrls',
+    'ariaLabel'
+  ],
+  emits: ['click'],
+  template: '<button class="summary-banner" @click="$emit(\'click\')"></button>'
+}
+
+const mountComponent = (summary: CompletionSummary) =>
+  mount(QueueOverlayEmpty, {
+    props: { summary },
+    global: {
+      plugins: [i18n],
+      components: { CompletionSummaryBanner: CompletionSummaryBannerStub }
+    }
+  })
+
+describe('QueueOverlayEmpty', () => {
+  it('renders completion summary banner and proxies click', async () => {
+    const summary: CompletionSummary = {
+      mode: 'mixed',
+      completedCount: 2,
+      failedCount: 1,
+      thumbnailUrls: ['thumb-a']
+    }
+
+    const wrapper = mountComponent(summary)
+    const summaryBanner = wrapper.findComponent(CompletionSummaryBannerStub)
+
+    expect(summaryBanner.exists()).toBe(true)
+    expect(summaryBanner.props()).toMatchObject({
+      mode: 'mixed',
+      completedCount: 2,
+      failedCount: 1,
+      thumbnailUrls: ['thumb-a'],
+      ariaLabel: 'Expand job queue'
+    })
+
+    await summaryBanner.trigger('click')
+    expect(wrapper.emitted('summaryClick')).toHaveLength(1)
+  })
+})

src/components/queue/QueueOverlayEmpty.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="pointer-events-auto">
+    <CompletionSummaryBanner
+      :mode="summary.mode"
+      :completed-count="summary.completedCount"
+      :failed-count="summary.failedCount"
+      :thumbnail-urls="summary.thumbnailUrls"
+      :aria-label="t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')"
+      @click="$emit('summaryClick')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+import CompletionSummaryBanner from '@/components/queue/CompletionSummaryBanner.vue'
+import type { CompletionSummary } from '@/composables/queue/useCompletionSummary'
+
+defineProps<{ summary: CompletionSummary }>()
+
+defineEmits<{
+  (e: 'summaryClick'): void
+}>()
+
+const { t } = useI18n()
+</script>

src/components/queue/QueueOverlayExpanded.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <QueueOverlayHeader
+      :header-title="headerTitle"
+      :show-concurrent-indicator="showConcurrentIndicator"
+      :concurrent-workflow-count="concurrentWorkflowCount"
+      @clear-history="$emit('clearHistory')"
+    />
+
+    <div class="flex items-center justify-between px-3">
+      <IconTextButton
+        class="grow gap-1 p-2 text-center font-inter text-[12px] leading-none hover:opacity-90 justify-center"
+        type="secondary"
+        :label="t('sideToolbar.queueProgressOverlay.showAssets')"
+        :aria-label="t('sideToolbar.queueProgressOverlay.showAssets')"
+        @click="$emit('showAssets')"
+      >
+        <template #icon>
+          <div
+            class="pointer-events-none block size-4 shrink-0 leading-none icon-[comfy--image-ai-edit]"
+            aria-hidden="true"
+          />
+        </template>
+      </IconTextButton>
+      <div class="ml-4 inline-flex items-center">
+        <div
+          class="inline-flex h-6 items-center text-[12px] leading-none text-text-primary opacity-90"
+        >
+          <span class="font-bold">{{ queuedCount }}</span>
+          <span class="ml-1">{{
+            t('sideToolbar.queueProgressOverlay.queuedSuffix')
+          }}</span>
+        </div>
+        <IconButton
+          v-if="queuedCount > 0"
+          class="group ml-2 size-6 bg-secondary-background hover:bg-destructive-background"
+          type="secondary"
+          size="sm"
+          :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
+          @click="$emit('clearQueued')"
+        >
+          <i
+            class="pointer-events-none icon-[lucide--list-x] block size-4 leading-none text-text-primary transition-colors group-hover:text-base-background"
+          />
+        </IconButton>
+      </div>
+    </div>
+
+    <JobFiltersBar
+      :selected-job-tab="selectedJobTab"
+      :selected-workflow-filter="selectedWorkflowFilter"
+      :selected-sort-mode="selectedSortMode"
+      :has-failed-jobs="hasFailedJobs"
+      @update:selected-job-tab="$emit('update:selectedJobTab', $event)"
+      @update:selected-workflow-filter="
+        $emit('update:selectedWorkflowFilter', $event)
+      "
+      @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
+    />
+
+    <div class="flex-1 min-h-0 overflow-y-auto">
+      <JobGroupsList
+        :displayed-job-groups="displayedJobGroups"
+        @cancel-item="onCancelItemEvent"
+        @delete-item="onDeleteItemEvent"
+        @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 { useI18n } from 'vue-i18n'
+
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import type {
+  JobGroup,
+  JobListItem,
+  JobSortMode,
+  JobTab
+} from '@/composables/queue/useJobList'
+import type { MenuEntry } from '@/composables/queue/useJobMenu'
+import { useJobMenu } from '@/composables/queue/useJobMenu'
+
+import QueueOverlayHeader from './QueueOverlayHeader.vue'
+import JobContextMenu from './job/JobContextMenu.vue'
+import JobFiltersBar from './job/JobFiltersBar.vue'
+import JobGroupsList from './job/JobGroupsList.vue'
+
+defineProps<{
+  headerTitle: string
+  showConcurrentIndicator: boolean
+  concurrentWorkflowCount: number
+  queuedCount: number
+  selectedJobTab: JobTab
+  selectedWorkflowFilter: 'all' | 'current'
+  selectedSortMode: JobSortMode
+  displayedJobGroups: JobGroup[]
+  hasFailedJobs: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'showAssets'): void
+  (e: 'clearHistory'): void
+  (e: 'clearQueued'): void
+  (e: 'update:selectedJobTab', value: JobTab): void
+  (e: 'update:selectedWorkflowFilter', value: 'all' | 'current'): void
+  (e: 'update:selectedSortMode', value: JobSortMode): void
+  (e: 'cancelItem', item: JobListItem): void
+  (e: 'deleteItem', item: JobListItem): void
+  (e: 'viewItem', item: JobListItem): void
+}>()
+
+const { t } = useI18n()
+
+const currentMenuItem = ref<JobListItem | null>(null)
+const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
+
+const { jobMenuEntries } = useJobMenu(
+  () => currentMenuItem.value,
+  (item) => emit('viewItem', item)
+)
+
+const onCancelItemEvent = (item: JobListItem) => {
+  emit('cancelItem', item)
+}
+
+const onDeleteItemEvent = (item: JobListItem) => {
+  emit('deleteItem', item)
+}
+
+const onMenuItem = (item: JobListItem, event: Event) => {
+  currentMenuItem.value = item
+  jobContextMenuRef.value?.open(event)
+}
+
+const onJobMenuAction = async (entry: MenuEntry) => {
+  if (entry.kind === 'divider') return
+  if (entry.onClick) await entry.onClick()
+  jobContextMenuRef.value?.hide()
+}
+</script>

src/components/queue/QueueOverlayHeader.test.ts

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+import { defineComponent } from 'vue'
+
+const popoverToggleSpy = vi.fn()
+const popoverHideSpy = vi.fn()
+
+vi.mock('primevue/popover', () => {
+  const PopoverStub = defineComponent({
+    name: 'Popover',
+    setup(_, { slots, expose }) {
+      const toggle = (event: Event) => {
+        popoverToggleSpy(event)
+      }
+      const hide = () => {
+        popoverHideSpy()
+      }
+      expose({ toggle, hide })
+      return () => slots.default?.()
+    }
+  })
+  return { default: PopoverStub }
+})
+
+import QueueOverlayHeader from './QueueOverlayHeader.vue'
+import * as tooltipConfig from '@/composables/useTooltipConfig'
+
+const tooltipDirectiveStub = {
+  mounted: vi.fn(),
+  updated: vi.fn()
+}
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      g: { more: 'More' },
+      sideToolbar: {
+        queueProgressOverlay: {
+          running: 'running',
+          moreOptions: 'More options',
+          clearHistory: 'Clear history'
+        }
+      }
+    }
+  }
+})
+
+const mountHeader = (props = {}) =>
+  mount(QueueOverlayHeader, {
+    props: {
+      headerTitle: 'Job queue',
+      showConcurrentIndicator: true,
+      concurrentWorkflowCount: 2,
+      ...props
+    },
+    global: {
+      plugins: [i18n],
+      directives: { tooltip: tooltipDirectiveStub }
+    }
+  })
+
+describe('QueueOverlayHeader', () => {
+  it('renders header title and concurrent indicator when enabled', () => {
+    const wrapper = mountHeader({ concurrentWorkflowCount: 3 })
+
+    expect(wrapper.text()).toContain('Job queue')
+    const indicator = wrapper.find('.inline-flex.items-center.gap-1')
+    expect(indicator.exists()).toBe(true)
+    expect(indicator.text()).toContain('3')
+    expect(indicator.text()).toContain('running')
+  })
+
+  it('hides concurrent indicator when flag is false', () => {
+    const wrapper = mountHeader({ showConcurrentIndicator: false })
+
+    expect(wrapper.text()).toContain('Job queue')
+    expect(wrapper.find('.inline-flex.items-center.gap-1').exists()).toBe(false)
+  })
+
+  it('toggles popover and emits clear history', async () => {
+    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
+
+    const wrapper = mountHeader()
+
+    const moreButton = wrapper.get('button[aria-label="More options"]')
+    await moreButton.trigger('click')
+    expect(popoverToggleSpy).toHaveBeenCalledTimes(1)
+    expect(spy).toHaveBeenCalledWith('More')
+
+    const clearHistoryButton = wrapper.get('button[aria-label="Clear history"]')
+    await clearHistoryButton.trigger('click')
+    expect(popoverHideSpy).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('clearHistory')).toHaveLength(1)
+  })
+})

src/components/queue/QueueOverlayHeader.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    class="flex h-12 items-center justify-between gap-2 border-b border-interface-stroke px-2"
+  >
+    <div class="px-2 text-[14px] font-normal text-text-primary">
+      <span>{{ headerTitle }}</span>
+      <span
+        v-if="showConcurrentIndicator"
+        class="ml-4 inline-flex items-center gap-1 text-blue-100"
+      >
+        <span class="inline-block size-2 rounded-full bg-blue-100" />
+        <span>
+          <span class="font-bold">{{ concurrentWorkflowCount }}</span>
+          <span class="ml-1">{{
+            t('sideToolbar.queueProgressOverlay.running')
+          }}</span>
+        </span>
+      </span>
+    </div>
+    <div class="flex items-center gap-1">
+      <IconButton
+        v-tooltip.top="moreTooltipConfig"
+        type="transparent"
+        size="sm"
+        class="size-6 bg-transparent hover:bg-secondary-background hover:opacity-100"
+        :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
+        @click="onMoreClick"
+      >
+        <i
+          class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
+        />
+      </IconButton>
+      <Popover
+        ref="morePopoverRef"
+        :dismissable="true"
+        :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'
+            ]
+          }
+        }"
+      >
+        <div
+          class="flex flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
+        >
+          <IconTextButton
+            class="w-full justify-start gap-2 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            type="transparent"
+            :label="t('sideToolbar.queueProgressOverlay.clearHistory')"
+            :aria-label="t('sideToolbar.queueProgressOverlay.clearHistory')"
+            @click="onClearHistoryFromMenu"
+          >
+            <template #icon>
+              <i
+                class="icon-[lucide--file-x-2] block size-4 leading-none text-text-secondary"
+              />
+            </template>
+          </IconTextButton>
+        </div>
+      </Popover>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+import type { PopoverMethods } from 'primevue/popover'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+
+defineProps<{
+  headerTitle: string
+  showConcurrentIndicator: boolean
+  concurrentWorkflowCount: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'clearHistory'): void
+}>()
+
+const { t } = useI18n()
+
+const morePopoverRef = ref<PopoverMethods | null>(null)
+const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
+
+const onMoreClick = (event: MouseEvent) => {
+  morePopoverRef.value?.toggle(event)
+}
+const onClearHistoryFromMenu = () => {
+  morePopoverRef.value?.hide()
+  emit('clearHistory')
+}
+</script>

src/components/queue/QueueProgressOverlay.vue

@@ -0,0 +1,290 @@
+<template>
+  <div
+    v-show="isVisible"
+    :class="['flex', 'justify-end', 'w-full', 'pointer-events-none']"
+  >
+    <div
+      class="pointer-events-auto flex w-[350px] min-w-[310px] max-h-[60vh] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
+      :class="containerClass"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
+    >
+      <!-- Expanded state -->
+      <QueueOverlayExpanded
+        v-if="isExpanded"
+        v-model:selected-job-tab="selectedJobTab"
+        v-model:selected-workflow-filter="selectedWorkflowFilter"
+        v-model:selected-sort-mode="selectedSortMode"
+        class="flex-1 min-h-0"
+        :header-title="headerTitle"
+        :show-concurrent-indicator="showConcurrentIndicator"
+        :concurrent-workflow-count="concurrentWorkflowCount"
+        :queued-count="queuedCount"
+        :displayed-job-groups="displayedJobGroups"
+        :has-failed-jobs="hasFailedJobs"
+        @show-assets="openAssetsSidebar"
+        @clear-history="onClearHistoryFromMenu"
+        @clear-queued="cancelQueuedWorkflows"
+        @cancel-item="onCancelItem"
+        @delete-item="onDeleteItem"
+        @view-item="inspectJobAsset"
+      />
+
+      <QueueOverlayActive
+        v-else-if="hasActiveJob"
+        :total-progress-style="totalProgressStyle"
+        :current-node-progress-style="currentNodeProgressStyle"
+        :total-percent-formatted="totalPercentFormatted"
+        :current-node-percent-formatted="currentNodePercentFormatted"
+        :current-node-name="currentNodeName"
+        :running-count="runningCount"
+        :queued-count="queuedCount"
+        :bottom-row-class="bottomRowClass"
+        @interrupt-all="interruptAll"
+        @clear-queued="cancelQueuedWorkflows"
+        @view-all-jobs="viewAllJobs"
+      />
+
+      <QueueOverlayEmpty
+        v-else-if="completionSummary"
+        :summary="completionSummary"
+        @summary-click="onSummaryClick"
+      />
+    </div>
+  </div>
+
+  <ResultGallery
+    v-model:active-index="galleryActiveIndex"
+    :all-gallery-items="galleryItems"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import QueueOverlayActive from '@/components/queue/QueueOverlayActive.vue'
+import QueueOverlayEmpty from '@/components/queue/QueueOverlayEmpty.vue'
+import QueueOverlayExpanded from '@/components/queue/QueueOverlayExpanded.vue'
+import QueueClearHistoryDialog from '@/components/queue/dialogs/QueueClearHistoryDialog.vue'
+import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
+import { useCompletionSummary } from '@/composables/queue/useCompletionSummary'
+import { useJobList } from '@/composables/queue/useJobList'
+import type { JobListItem } from '@/composables/queue/useJobList'
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+import { useResultGallery } from '@/composables/queue/useResultGallery'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useAssetSelectionStore } from '@/platform/assets/composables/useAssetSelectionStore'
+import { api } from '@/scripts/api'
+import { useAssetsStore } from '@/stores/assetsStore'
+import { useCommandStore } from '@/stores/commandStore'
+import { useDialogStore } from '@/stores/dialogStore'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useQueueStore } from '@/stores/queueStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+
+type OverlayState = 'hidden' | 'empty' | 'active' | 'expanded'
+
+const props = defineProps<{
+  expanded?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:expanded', value: boolean): void
+}>()
+
+const { t } = useI18n()
+const queueStore = useQueueStore()
+const commandStore = useCommandStore()
+const executionStore = useExecutionStore()
+const sidebarTabStore = useSidebarTabStore()
+const dialogStore = useDialogStore()
+const assetsStore = useAssetsStore()
+const assetSelectionStore = useAssetSelectionStore()
+const { wrapWithErrorHandlingAsync } = useErrorHandling()
+
+const {
+  totalPercentFormatted,
+  currentNodePercentFormatted,
+  totalProgressStyle,
+  currentNodeProgressStyle
+} = useQueueProgress()
+const isHovered = ref(false)
+const internalExpanded = ref(false)
+const isExpanded = computed({
+  get: () =>
+    props.expanded === undefined ? internalExpanded.value : props.expanded,
+  set: (value) => {
+    if (props.expanded === undefined) {
+      internalExpanded.value = value
+    }
+    emit('update:expanded', value)
+  }
+})
+
+const { summary: completionSummary, clearSummary } = useCompletionSummary()
+const hasCompletionSummary = computed(() => completionSummary.value !== null)
+
+const runningCount = computed(() => queueStore.runningTasks.length)
+const queuedCount = computed(() => queueStore.pendingTasks.length)
+const isExecuting = computed(() => !executionStore.isIdle)
+const hasActiveJob = computed(() => runningCount.value > 0 || isExecuting.value)
+const activeJobsCount = computed(() => runningCount.value + queuedCount.value)
+
+const overlayState = computed<OverlayState>(() => {
+  if (isExpanded.value) return 'expanded'
+  if (hasActiveJob.value) return 'active'
+  if (hasCompletionSummary.value) return 'empty'
+  return 'hidden'
+})
+
+const showBackground = computed(
+  () =>
+    overlayState.value === 'expanded' ||
+    overlayState.value === 'empty' ||
+    (overlayState.value === 'active' && isHovered.value)
+)
+
+const isVisible = computed(() => overlayState.value !== 'hidden')
+
+const containerClass = computed(() =>
+  showBackground.value
+    ? 'border-interface-stroke bg-interface-panel-surface shadow-interface'
+    : 'border-transparent bg-transparent shadow-none'
+)
+
+const bottomRowClass = computed(
+  () =>
+    `flex items-center justify-end gap-4 transition-opacity duration-200 ease-in-out ${
+      overlayState.value === 'active' && isHovered.value
+        ? 'opacity-100 pointer-events-auto'
+        : 'opacity-0 pointer-events-none'
+    }`
+)
+const headerTitle = computed(() =>
+  hasActiveJob.value
+    ? `${activeJobsCount.value} ${t('sideToolbar.queueProgressOverlay.activeJobsSuffix')}`
+    : t('sideToolbar.queueProgressOverlay.jobQueue')
+)
+
+const concurrentWorkflowCount = computed(
+  () => executionStore.runningWorkflowCount
+)
+const showConcurrentIndicator = computed(
+  () => concurrentWorkflowCount.value > 1
+)
+
+const {
+  selectedJobTab,
+  selectedWorkflowFilter,
+  selectedSortMode,
+  hasFailedJobs,
+  filteredTasks,
+  groupedJobItems,
+  currentNodeName
+} = useJobList()
+
+const displayedJobGroups = computed(() => groupedJobItems.value)
+
+const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
+  const promptId = item.taskRef?.promptId
+  if (!promptId) return
+  await api.interrupt(promptId)
+})
+
+const onDeleteItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
+  if (!item.taskRef) return
+  await queueStore.delete(item.taskRef)
+})
+
+const {
+  galleryActiveIndex,
+  galleryItems,
+  onViewItem: openResultGallery
+} = useResultGallery(() => filteredTasks.value)
+
+const setExpanded = (expanded: boolean) => {
+  isExpanded.value = expanded
+}
+
+const openExpandedFromEmpty = () => {
+  setExpanded(true)
+}
+
+const viewAllJobs = () => {
+  setExpanded(true)
+}
+
+const onSummaryClick = () => {
+  openExpandedFromEmpty()
+  clearSummary()
+}
+
+const openAssetsSidebar = () => {
+  sidebarTabStore.activeSidebarTabId = 'assets'
+}
+
+const focusAssetInSidebar = async (item: JobListItem) => {
+  const task = item.taskRef
+  const promptId = task?.promptId
+  const preview = task?.previewOutput
+  if (!promptId || !preview) return
+
+  const assetId = String(promptId)
+  openAssetsSidebar()
+  await nextTick()
+  await assetsStore.updateHistory()
+  const asset = assetsStore.historyAssets.find(
+    (existingAsset) => existingAsset.id === assetId
+  )
+  if (!asset) {
+    throw new Error('Asset not found in media assets panel')
+  }
+  assetSelectionStore.setSelection([assetId])
+}
+
+const inspectJobAsset = wrapWithErrorHandlingAsync(
+  async (item: JobListItem) => {
+    openResultGallery(item)
+    await focusAssetInSidebar(item)
+  }
+)
+
+const cancelQueuedWorkflows = wrapWithErrorHandlingAsync(async () => {
+  await commandStore.execute('Comfy.ClearPendingTasks')
+})
+
+const interruptAll = wrapWithErrorHandlingAsync(async () => {
+  const tasks = queueStore.runningTasks
+  await Promise.all(
+    tasks
+      .filter((task) => task.promptId != null)
+      .map((task) => api.interrupt(task.promptId))
+  )
+})
+
+const showClearHistoryDialog = () => {
+  dialogStore.showDialog({
+    key: 'queue-clear-history',
+    component: QueueClearHistoryDialog,
+    dialogComponentProps: {
+      headless: true,
+      closable: false,
+      closeOnEscape: true,
+      dismissableMask: true,
+      pt: {
+        root: {
+          class: 'max-w-[360px] w-auto bg-transparent border-none shadow-none'
+        },
+        content: {
+          class: '!p-0 bg-transparent'
+        }
+      }
+    }
+  })
+}
+
+const onClearHistoryFromMenu = () => {
+  showClearHistoryDialog()
+}
+</script>

src/components/queue/dialogs/QueueClearHistoryDialog.vue

@@ -0,0 +1,90 @@
+<template>
+  <section
+    class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface text-text-primary shadow-interface font-inter"
+  >
+    <header
+      class="flex items-center justify-between border-b border-interface-stroke px-4 py-4"
+    >
+      <p class="m-0 text-[14px] font-normal leading-none">
+        {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
+      </p>
+      <IconButton
+        type="transparent"
+        size="sm"
+        class="size-6 bg-transparent text-text-secondary hover:bg-secondary-background hover:opacity-100"
+        :aria-label="t('g.close')"
+        @click="onCancel"
+      >
+        <i class="icon-[lucide--x] block size-4 leading-none" />
+      </IconButton>
+    </header>
+
+    <div class="flex flex-col gap-4 px-4 py-4 text-[14px] text-text-secondary">
+      <p class="m-0">
+        {{
+          t('sideToolbar.queueProgressOverlay.clearHistoryDialogDescription')
+        }}
+      </p>
+      <p class="m-0">
+        {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogAssetsNote') }}
+      </p>
+    </div>
+
+    <footer class="flex items-center justify-end px-4 py-4">
+      <div class="flex items-center gap-4 text-[14px] leading-none">
+        <TextButton
+          class="min-h-[24px] px-1 py-1 text-[14px] leading-[1] text-text-secondary hover:text-text-primary"
+          type="transparent"
+          :label="t('g.cancel')"
+          @click="onCancel"
+        />
+        <TextButton
+          class="min-h-[32px] px-4 py-2 text-[12px] font-normal leading-[1]"
+          type="secondary"
+          :label="t('g.clear')"
+          :disabled="isClearing"
+          @click="onConfirm"
+        />
+      </div>
+    </footer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import IconButton from '@/components/button/IconButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
+import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useDialogStore } from '@/stores/dialogStore'
+import { useQueueStore } from '@/stores/queueStore'
+
+const dialogStore = useDialogStore()
+const queueStore = useQueueStore()
+const { t } = useI18n()
+const { wrapWithErrorHandlingAsync } = useErrorHandling()
+
+const isClearing = ref(false)
+
+const clearHistory = wrapWithErrorHandlingAsync(
+  async () => {
+    await queueStore.clear(['history'])
+    dialogStore.closeDialog()
+  },
+  undefined,
+  () => {
+    isClearing.value = false
+  }
+)
+
+const onConfirm = async () => {
+  if (isClearing.value) return
+  isClearing.value = true
+  await clearHistory()
+}
+
+const onCancel = () => {
+  dialogStore.closeDialog()
+}
+</script>

src/components/queue/job/JobContextMenu.vue

@@ -0,0 +1,76 @@
+<template>
+  <Popover
+    ref="jobItemPopoverRef"
+    :dismissable="true"
+    :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'
+        ]
+      }
+    }"
+  >
+    <div
+      class="flex min-w-[14rem] 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>
+        <IconTextButton
+          v-else
+          class="w-full justify-start gap-2 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-interface-panel-hover-surface"
+          type="transparent"
+          :label="entry.label"
+          :aria-label="entry.label"
+          @click="onEntry(entry)"
+        >
+          <template #icon>
+            <i
+              v-if="entry.icon"
+              :class="[
+                entry.icon,
+                'block size-4 shrink-0 leading-none text-text-secondary'
+              ]"
+            />
+          </template>
+        </IconTextButton>
+      </template>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+import { ref } from 'vue'
+
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import type { MenuEntry } from '@/composables/queue/useJobMenu'
+
+defineProps<{ entries: MenuEntry[] }>()
+
+const emit = defineEmits<{
+  (e: 'action', entry: MenuEntry): void
+}>()
+
+const jobItemPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
+
+function open(event: Event) {
+  if (jobItemPopoverRef.value) {
+    jobItemPopoverRef.value.toggle(event)
+  }
+}
+
+function hide() {
+  jobItemPopoverRef.value?.hide()
+}
+
+function onEntry(entry: MenuEntry) {
+  emit('action', entry)
+}
+
+defineExpose({ open, hide })
+</script>

src/components/queue/job/JobDetailsPopover.stories.ts

@@ -0,0 +1,423 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import type { TaskStatus } from '@/schemas/apiSchema'
+import { useExecutionStore } from '@/stores/executionStore'
+import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+
+import JobDetailsPopover from './JobDetailsPopover.vue'
+
+const meta: Meta<typeof JobDetailsPopover> = {
+  title: 'Queue/JobDetailsPopover',
+  component: JobDetailsPopover,
+  args: {
+    workflowId: 'WF-1234'
+  },
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+  globals: {
+    theme: 'dark'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function resetStores() {
+  const queue = useQueueStore()
+  const exec = useExecutionStore()
+
+  queue.pendingTasks = []
+  queue.runningTasks = []
+  queue.historyTasks = []
+
+  exec.nodeProgressStatesByPrompt = {}
+}
+
+function makePendingTask(
+  id: string,
+  index: number,
+  createTimeMs?: number
+): TaskItemImpl {
+  const extraData = {
+    client_id: 'c1',
+    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
+  }
+  return new TaskItemImpl('Pending', [index, id, {}, extraData, []])
+}
+
+function makeRunningTask(
+  id: string,
+  index: number,
+  createTimeMs?: number
+): TaskItemImpl {
+  const extraData = {
+    client_id: 'c1',
+    ...(typeof createTimeMs === 'number' ? { create_time: createTimeMs } : {})
+  }
+  return new TaskItemImpl('Running', [index, id, {}, extraData, []])
+}
+
+function makeRunningTaskWithStart(
+  id: string,
+  index: number,
+  startedSecondsAgo: number
+): TaskItemImpl {
+  const start = Date.now() - startedSecondsAgo * 1000
+  const status: TaskStatus = {
+    status_str: 'success',
+    completed: false,
+    messages: [['execution_start', { prompt_id: id, timestamp: start } as any]]
+  }
+  return new TaskItemImpl(
+    'Running',
+    [index, id, {}, { client_id: 'c1', create_time: start - 5000 }, []],
+    status
+  )
+}
+
+function makeHistoryTask(
+  id: string,
+  index: number,
+  durationSec: number,
+  ok: boolean,
+  errorMessage?: string
+): TaskItemImpl {
+  const start = Date.now() - durationSec * 1000 - 1000
+  const end = start + durationSec * 1000
+  const messages: TaskStatus['messages'] = ok
+    ? [
+        ['execution_start', { prompt_id: id, timestamp: start } as any],
+        ['execution_success', { prompt_id: id, timestamp: end } as any]
+      ]
+    : [
+        ['execution_start', { prompt_id: id, timestamp: start } as any],
+        [
+          'execution_error',
+          {
+            prompt_id: id,
+            timestamp: end,
+            node_id: '1',
+            node_type: 'Node',
+            executed: [],
+            exception_message:
+              errorMessage || 'Demo error: Node failed during execution',
+            exception_type: 'RuntimeError',
+            traceback: [],
+            current_inputs: {},
+            current_outputs: {}
+          } as any
+        ]
+      ]
+  const status: TaskStatus = {
+    status_str: ok ? 'success' : 'error',
+    completed: true,
+    messages
+  }
+  return new TaskItemImpl(
+    'History',
+    [index, id, {}, { client_id: 'c1', create_time: start }, []],
+    status
+  )
+}
+
+export const Queued: Story = {
+  render: (args) => ({
+    components: { JobDetailsPopover },
+    setup() {
+      resetStores()
+      const queue = useQueueStore()
+      const exec = useExecutionStore()
+
+      const jobId = 'job-queued-1'
+      const queueIndex = 104
+
+      // Current job in pending
+      queue.pendingTasks = [
+        makePendingTask(jobId, queueIndex, Date.now() - 90_000)
+      ]
+      // Add some other pending jobs to give context
+      queue.pendingTasks.push(makePendingTask('job-older-1', 100))
+      queue.pendingTasks.push(makePendingTask('job-older-2', 101))
+
+      // Queued at (in metadata on prompt[4])
+
+      // One running workflow
+      exec.nodeProgressStatesByPrompt = {
+        p1: {
+          '1': {
+            value: 1,
+            max: 1,
+            state: 'running',
+            node_id: '1',
+            prompt_id: 'p1'
+          }
+        }
+      } as any
+
+      return { args: { ...args, jobId } }
+    },
+    template: `
+      <div style="padding: 12px; background: var(--color-charcoal-700); display:inline-block;">
+        <JobDetailsPopover v-bind="args" />
+      </div>
+    `
+  })
+}
+
+export const QueuedParallel: Story = {
+  render: (args) => ({
+    components: { JobDetailsPopover },
+    setup() {
+      resetStores()
+      const queue = useQueueStore()
+      const exec = useExecutionStore()
+
+      const jobId = 'job-queued-parallel'
+      const queueIndex = 210
+
+      // Current job in pending with some ahead
+      queue.pendingTasks = [
+        makePendingTask('job-ahead-1', 200, Date.now() - 180_000),
+        makePendingTask('job-ahead-2', 205, Date.now() - 150_000),
+        makePendingTask(jobId, queueIndex, Date.now() - 120_000)
+      ]
+
+      // Seen 2 minutes ago - set via prompt metadata above
+
+      // History durations for ETA (in seconds)
+      queue.historyTasks = [
+        makeHistoryTask('hist-1', 150, 25, true),
+        makeHistoryTask('hist-2', 151, 40, true),
+        makeHistoryTask('hist-3', 152, 60, true)
+      ]
+
+      // Two parallel workflows running
+      exec.nodeProgressStatesByPrompt = {
+        p1: {
+          '1': {
+            value: 1,
+            max: 2,
+            state: 'running',
+            node_id: '1',
+            prompt_id: 'p1'
+          }
+        },
+        p2: {
+          '2': {
+            value: 1,
+            max: 2,
+            state: 'running',
+            node_id: '2',
+            prompt_id: 'p2'
+          }
+        }
+      } as any
+
+      return { args: { ...args, jobId } }
+    },
+    template: `
+      <div style="padding: 12px; background: var(--color-charcoal-700); display:inline-block;">
+        <JobDetailsPopover v-bind="args" />
+      </div>
+    `
+  })
+}
+
+export const Running: Story = {
+  render: (args) => ({
+    components: { JobDetailsPopover },
+    setup() {
+      resetStores()
+      const queue = useQueueStore()
+      const exec = useExecutionStore()
+
+      const jobId = 'job-running-1'
+      const queueIndex = 300
+      queue.runningTasks = [
+        makeRunningTask(jobId, queueIndex, Date.now() - 65_000)
+      ]
+      queue.historyTasks = [
+        makeHistoryTask('hist-r1', 250, 30, true),
+        makeHistoryTask('hist-r2', 251, 45, true),
+        makeHistoryTask('hist-r3', 252, 60, true)
+      ]
+
+      exec.nodeProgressStatesByPrompt = {
+        p1: {
+          '1': {
+            value: 5,
+            max: 10,
+            state: 'running',
+            node_id: '1',
+            prompt_id: 'p1'
+          }
+        }
+      } as any
+
+      return { args: { ...args, jobId } }
+    },
+    template: `
+      <div style="padding: 12px; background: var(--color-charcoal-700); display:inline-block;">
+        <JobDetailsPopover v-bind="args" />
+      </div>
+    `
+  })
+}
+
+export const QueuedZeroAheadSingleRunning: Story = {
+  render: (args) => ({
+    components: { JobDetailsPopover },
+    setup() {
+      resetStores()
+      const queue = useQueueStore()
+      const exec = useExecutionStore()
+
+      const jobId = 'job-queued-zero-ahead-single'
+      const queueIndex = 510
+
+      queue.pendingTasks = [
+        makePendingTask(jobId, queueIndex, Date.now() - 45_000)
+      ]
+
+      queue.historyTasks = [
+        makeHistoryTask('hist-s1', 480, 30, true),
+        makeHistoryTask('hist-s2', 481, 50, true),
+        makeHistoryTask('hist-s3', 482, 80, true)
+      ]
+
+      queue.runningTasks = [makeRunningTaskWithStart('running-1', 505, 20)]
+
+      exec.nodeProgressStatesByPrompt = {
+        p1: {
+          '1': {
+            value: 1,
+            max: 3,
+            state: 'running',
+            node_id: '1',
+            prompt_id: 'p1'
+          }
+        }
+      } as any
+
+      return { args: { ...args, jobId } }
+    },
+    template: `
+      <div style="padding: 12px; background: var(--color-charcoal-700); display:inline-block;">
+        <JobDetailsPopover v-bind="args" />
+      </div>
+    `
+  })
+}
+
+export const QueuedZeroAheadMultiRunning: Story = {
+  render: (args) => ({
+    components: { JobDetailsPopover },
+    setup() {
+      resetStores()
+      const queue = useQueueStore()
+      const exec = useExecutionStore()
+
+      const jobId = 'job-queued-zero-ahead-multi'
+      const queueIndex = 520
+
+      queue.pendingTasks = [
+        makePendingTask(jobId, queueIndex, Date.now() - 20_000)
+      ]
+
+      queue.historyTasks = [
+        makeHistoryTask('hist-m1', 490, 40, true),
+        makeHistoryTask('hist-m2', 491, 55, true),
+        makeHistoryTask('hist-m3', 492, 70, true)
+      ]
+
+      queue.runningTasks = [
+        makeRunningTaskWithStart('running-a', 506, 35),
+        makeRunningTaskWithStart('running-b', 507, 10)
+      ]
+
+      exec.nodeProgressStatesByPrompt = {
+        p1: {
+          '1': {
+            value: 2,
+            max: 5,
+            state: 'running',
+            node_id: '1',
+            prompt_id: 'p1'
+          }
+        },
+        p2: {
+          '2': {
+            value: 3,
+            max: 5,
+            state: 'running',
+            node_id: '2',
+            prompt_id: 'p2'
+          }
+        }
+      } as any
+
+      return { args: { ...args, jobId } }
+    },
+    template: `
+      <div style="padding: 12px; background: var(--color-charcoal-700); display:inline-block;">
+        <JobDetailsPopover v-bind="args" />
+      </div>
+    `
+  })
+}
+
+export const Completed: Story = {
+  render: (args) => ({
+    components: { JobDetailsPopover },
+    setup() {
+      resetStores()
+      const queue = useQueueStore()
+
+      const jobId = 'job-completed-1'
+      const queueIndex = 400
+      queue.historyTasks = [makeHistoryTask(jobId, queueIndex, 37, true)]
+
+      return { args: { ...args, jobId } }
+    },
+    template: `
+      <div style="padding: 12px; background: var(--color-charcoal-700); display:inline-block;">
+        <JobDetailsPopover v-bind="args" />
+      </div>
+    `
+  })
+}
+
+export const Failed: Story = {
+  render: (args) => ({
+    components: { JobDetailsPopover },
+    setup() {
+      resetStores()
+      const queue = useQueueStore()
+
+      const jobId = 'job-failed-1'
+      const queueIndex = 410
+      queue.historyTasks = [
+        makeHistoryTask(
+          jobId,
+          queueIndex,
+          12,
+          false,
+          'Example error: invalid inputs for node X'
+        )
+      ]
+      // Show a queued-at time for the failed job via history extra_data (2 minutes ago)
+      // Already set by makeHistoryTask using its start timestamp
+
+      return { args: { ...args, jobId } }
+    },
+    template: `
+      <div style="padding: 12px; background: var(--color-charcoal-700); display:inline-block;">
+        <JobDetailsPopover v-bind="args" />
+      </div>
+    `
+  })
+}

src/components/queue/job/JobDetailsPopover.vue

@@ -0,0 +1,359 @@
+<template>
+  <div
+    class="w-[300px] min-w-[260px] rounded-lg border border-interface-stroke bg-interface-panel-surface shadow-md"
+  >
+    <div class="flex items-center border-b border-interface-stroke p-4">
+      <span
+        class="text-[0.875rem] leading-normal font-normal text-text-primary"
+        >{{ t('queue.jobDetails.header') }}</span
+      >
+    </div>
+    <div class="flex flex-col gap-6 px-4 pt-4 pb-4">
+      <div class="grid grid-cols-2 items-center gap-x-2 gap-y-2">
+        <template v-for="row in baseRows" :key="row.label">
+          <div
+            class="flex items-center text-[0.75rem] leading-normal font-normal text-text-primary"
+          >
+            {{ row.label }}
+          </div>
+          <div
+            class="flex min-w-0 items-center text-[0.75rem] leading-normal font-normal text-text-secondary"
+          >
+            <span class="block min-w-0 truncate">{{ row.value }}</span>
+            <IconButton
+              v-if="row.canCopy"
+              type="transparent"
+              size="sm"
+              class="ml-2 size-6 bg-transparent hover:opacity-90"
+              :aria-label="copyAriaLabel"
+              @click.stop="copyJobId"
+            >
+              <i
+                class="icon-[lucide--copy] block size-4 leading-none text-text-secondary"
+              />
+            </IconButton>
+          </div>
+        </template>
+      </div>
+
+      <div
+        v-if="extraRows.length"
+        class="grid grid-cols-2 items-center gap-x-2 gap-y-2"
+      >
+        <template v-for="row in extraRows" :key="row.label">
+          <div
+            class="flex items-center text-[0.75rem] leading-normal font-normal text-text-primary"
+          >
+            {{ row.label }}
+          </div>
+          <div
+            class="flex min-w-0 items-center text-[0.75rem] leading-normal font-normal text-text-secondary"
+          >
+            <span class="block min-w-0 truncate">{{ row.value }}</span>
+          </div>
+        </template>
+      </div>
+
+      <div v-if="jobState === 'failed'" class="grid grid-cols-2 gap-x-2">
+        <div
+          class="flex items-center text-[0.75rem] leading-normal font-normal text-text-primary"
+        >
+          {{ t('queue.jobDetails.errorMessage') }}
+        </div>
+        <div class="flex items-center justify-between gap-4">
+          <IconTextButton
+            class="h-6 justify-start gap-2 bg-transparent px-0 text-[0.75rem] leading-none text-text-secondary hover:opacity-90"
+            type="transparent"
+            :label="copyAriaLabel"
+            :aria-label="copyAriaLabel"
+            icon-position="right"
+            @click.stop="copyErrorMessage"
+          >
+            <template #icon>
+              <i class="icon-[lucide--copy] block size-3.5 leading-none" />
+            </template>
+          </IconTextButton>
+          <IconTextButton
+            class="h-6 justify-start gap-2 bg-transparent px-0 text-[0.75rem] leading-none text-text-secondary hover:opacity-90"
+            type="transparent"
+            :label="t('queue.jobDetails.report')"
+            icon-position="right"
+            @click.stop="reportJobError"
+          >
+            <template #icon>
+              <i
+                class="icon-[lucide--message-circle-warning] block size-3.5 leading-none"
+              />
+            </template>
+          </IconTextButton>
+        </div>
+        <div
+          class="col-span-2 mt-2 rounded bg-interface-panel-hover-surface px-4 py-2 text-[0.75rem] leading-normal text-text-secondary"
+        >
+          {{ errorMessageValue }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { t } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useDialogService } from '@/services/dialogService'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useQueueStore } from '@/stores/queueStore'
+import type { TaskItemImpl } from '@/stores/queueStore'
+import { formatClockTime } from '@/utils/dateTimeUtil'
+import { jobStateFromTask } from '@/utils/queueUtil'
+
+import { useJobErrorReporting } from './useJobErrorReporting'
+import { formatElapsedTime, useQueueEstimates } from './useQueueEstimates'
+
+const props = defineProps<{
+  jobId: string
+  workflowId?: string
+}>()
+
+const copyAriaLabel = computed(() => t('g.copy'))
+
+const workflowStore = useWorkflowStore()
+const queueStore = useQueueStore()
+const executionStore = useExecutionStore()
+const dialog = useDialogService()
+const { locale } = useI18n()
+
+const workflowValue = computed(() => {
+  const wid = props.workflowId
+  if (!wid) return ''
+  const activeId = workflowStore.activeWorkflow?.activeState?.id
+  if (activeId && activeId === wid) {
+    return workflowStore.activeWorkflow?.filename ?? wid
+  }
+  return wid
+})
+const jobIdValue = computed(() => props.jobId)
+
+const { copyToClipboard } = useCopyToClipboard()
+const copyJobId = () => void copyToClipboard(jobIdValue.value)
+
+const taskForJob = computed(() => {
+  const pid = props.jobId
+  const findIn = (arr: TaskItemImpl[]) =>
+    arr.find((t) => String(t.promptId ?? '') === String(pid))
+  return (
+    findIn(queueStore.pendingTasks) ||
+    findIn(queueStore.runningTasks) ||
+    findIn(queueStore.historyTasks) ||
+    null
+  )
+})
+
+const jobState = computed(() => {
+  const task = taskForJob.value
+  if (!task) return null
+  const isInitializing = executionStore.isPromptInitializing(
+    String(task?.promptId)
+  )
+  return jobStateFromTask(task, isInitializing)
+})
+
+const firstSeenTs = computed<number | undefined>(() => {
+  const task = taskForJob.value
+  return task?.createTime
+})
+
+const queuedAtValue = computed(() =>
+  firstSeenTs.value !== undefined
+    ? formatClockTime(firstSeenTs.value, locale.value)
+    : ''
+)
+
+const currentQueueIndex = computed<number | null>(() => {
+  const task = taskForJob.value
+  return task ? Number(task.queueIndex) : null
+})
+
+const jobsAhead = computed<number | null>(() => {
+  const idx = currentQueueIndex.value
+  if (idx == null) return null
+  const ahead = queueStore.pendingTasks.filter(
+    (t: TaskItemImpl) => Number(t.queueIndex) < idx
+  )
+  return ahead.length
+})
+
+const queuePositionValue = computed(() => {
+  if (jobsAhead.value == null) return ''
+  const n = jobsAhead.value
+  return t('queue.jobDetails.queuePositionValue', { count: n }, n)
+})
+
+const nowTs = ref<number>(Date.now())
+let timer: number | null = null
+onMounted(() => {
+  timer = window.setInterval(() => {
+    nowTs.value = Date.now()
+  }, 1000)
+})
+onUnmounted(() => {
+  if (timer != null) {
+    clearInterval(timer)
+    timer = null
+  }
+})
+
+const {
+  showParallelQueuedStats,
+  estimateRangeSeconds,
+  estimateRemainingRangeSeconds,
+  timeElapsedValue
+} = useQueueEstimates({
+  queueStore,
+  executionStore,
+  taskForJob,
+  jobState,
+  firstSeenTs,
+  jobsAhead,
+  nowTs
+})
+
+const formatEta = (lo: number, hi: number): string => {
+  if (hi <= 60) {
+    const hiS = Math.max(1, Math.round(hi))
+    const loS = Math.max(1, Math.min(hiS, Math.round(lo)))
+    if (loS === hiS)
+      return t('queue.jobDetails.eta.seconds', { count: hiS }, hiS)
+    return t('queue.jobDetails.eta.secondsRange', { lo: loS, hi: hiS })
+  }
+  if (lo >= 60 && hi < 90) {
+    return t('queue.jobDetails.eta.minutes', { count: 1 }, 1)
+  }
+  const loM = Math.max(1, Math.floor(lo / 60))
+  const hiM = Math.max(loM, Math.ceil(hi / 60))
+  if (loM === hiM) {
+    return t('queue.jobDetails.eta.minutes', { count: loM }, loM)
+  }
+  return t('queue.jobDetails.eta.minutesRange', { lo: loM, hi: hiM })
+}
+
+const estimatedStartInValue = computed(() => {
+  const range = estimateRangeSeconds.value
+  if (!range) return ''
+  const [lo, hi] = range
+  return formatEta(lo, hi)
+})
+
+const estimatedFinishInValue = computed(() => {
+  const range = estimateRemainingRangeSeconds.value
+  if (!range) return ''
+  const [lo, hi] = range
+  return formatEta(lo, hi)
+})
+
+type DetailRow = { label: string; value: string; canCopy?: boolean }
+
+const baseRows = computed<DetailRow[]>(() => [
+  { label: t('queue.jobDetails.workflow'), value: workflowValue.value },
+  { label: t('queue.jobDetails.jobId'), value: jobIdValue.value, canCopy: true }
+])
+
+const extraRows = computed<DetailRow[]>(() => {
+  if (jobState.value === 'pending') {
+    if (!firstSeenTs.value) return []
+    const rows: DetailRow[] = [
+      { label: t('queue.jobDetails.queuedAt'), value: queuedAtValue.value }
+    ]
+    if (showParallelQueuedStats.value) {
+      rows.push(
+        {
+          label: t('queue.jobDetails.queuePosition'),
+          value: queuePositionValue.value
+        },
+        {
+          label: t('queue.jobDetails.timeElapsed'),
+          value: timeElapsedValue.value
+        },
+        {
+          label: t('queue.jobDetails.estimatedStartIn'),
+          value: estimatedStartInValue.value
+        }
+      )
+    }
+    return rows
+  }
+  if (jobState.value === 'running') {
+    if (!firstSeenTs.value) return []
+    return [
+      { label: t('queue.jobDetails.queuedAt'), value: queuedAtValue.value },
+      {
+        label: t('queue.jobDetails.timeElapsed'),
+        value: timeElapsedValue.value
+      },
+      {
+        label: t('queue.jobDetails.estimatedFinishIn'),
+        value: estimatedFinishInValue.value
+      }
+    ]
+  }
+  if (jobState.value === 'completed') {
+    const task = taskForJob.value as any
+    const endTs: number | undefined = task?.executionEndTimestamp
+    const execMs: number | undefined = task?.executionTime
+    const generatedOnValue = endTs ? formatClockTime(endTs, locale.value) : ''
+    const totalGenTimeValue =
+      execMs !== undefined ? formatElapsedTime(execMs) : ''
+    const computeHoursValue =
+      execMs !== undefined ? (execMs / 3600000).toFixed(3) + ' hours' : ''
+
+    const rows: DetailRow[] = [
+      { label: t('queue.jobDetails.generatedOn'), value: generatedOnValue },
+      {
+        label: t('queue.jobDetails.totalGenerationTime'),
+        value: totalGenTimeValue
+      }
+    ]
+    if (isCloud) {
+      rows.push({
+        label: t('queue.jobDetails.computeHoursUsed'),
+        value: computeHoursValue
+      })
+    }
+    return rows
+  }
+  if (jobState.value === 'failed') {
+    const task = taskForJob.value as any
+    const execMs: number | undefined = task?.executionTime
+    const failedAfterValue =
+      execMs !== undefined ? formatElapsedTime(execMs) : ''
+    const computeHoursValue =
+      execMs !== undefined ? (execMs / 3600000).toFixed(3) + ' hours' : ''
+    const rows: DetailRow[] = [
+      { label: t('queue.jobDetails.queuedAt'), value: queuedAtValue.value },
+      { label: t('queue.jobDetails.failedAfter'), value: failedAfterValue }
+    ]
+    if (isCloud) {
+      rows.push({
+        label: t('queue.jobDetails.computeHoursUsed'),
+        value: computeHoursValue
+      })
+    }
+    return rows
+  }
+  return []
+})
+
+const { errorMessageValue, copyErrorMessage, reportJobError } =
+  useJobErrorReporting({
+    taskForJob,
+    copyToClipboard,
+    dialog
+  })
+</script>

src/components/queue/job/JobFiltersBar.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="flex items-center justify-between gap-2 px-3">
+    <div class="min-w-0 flex-1 overflow-x-auto">
+      <div class="inline-flex items-center gap-1 whitespace-nowrap">
+        <TextButton
+          v-for="tab in visibleJobTabs"
+          :key="tab"
+          class="h-6 px-3 py-1 text-[12px] leading-none hover:opacity-90"
+          :type="selectedJobTab === tab ? 'secondary' : 'transparent'"
+          :class="[
+            selectedJobTab === tab ? 'text-text-primary' : 'text-text-secondary'
+          ]"
+          :label="tabLabel(tab)"
+          @click="$emit('update:selectedJobTab', tab)"
+        />
+      </div>
+    </div>
+    <div class="ml-2 flex shrink-0 items-center gap-2">
+      <IconButton
+        v-if="showWorkflowFilter"
+        v-tooltip.top="filterTooltipConfig"
+        type="secondary"
+        size="sm"
+        class="relative size-6 bg-secondary-background hover:bg-secondary-background-hover hover:opacity-90"
+        :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
+        @click="onFilterClick"
+      >
+        <i
+          class="icon-[lucide--list-filter] block size-4 leading-none text-text-primary"
+        />
+        <span
+          v-if="selectedWorkflowFilter !== 'all'"
+          class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
+        />
+      </IconButton>
+      <Popover
+        v-if="showWorkflowFilter"
+        ref="filterPopoverRef"
+        :dismissable="true"
+        :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'
+            ]
+          }
+        }"
+      >
+        <div
+          class="flex min-w-[12rem] flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3"
+        >
+          <IconTextButton
+            class="w-full justify-between gap-1 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            type="transparent"
+            icon-position="right"
+            :label="t('sideToolbar.queueProgressOverlay.filterAllWorkflows')"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
+            "
+            @click="selectWorkflowFilter('all')"
+          >
+            <template #icon>
+              <i
+                v-if="selectedWorkflowFilter === 'all'"
+                class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
+              />
+            </template>
+          </IconTextButton>
+          <div class="mx-2 mt-1 h-px" />
+          <IconTextButton
+            class="w-full justify-between gap-1 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            type="transparent"
+            icon-position="right"
+            :label="t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
+            "
+            @click="selectWorkflowFilter('current')"
+          >
+            <template #icon>
+              <i
+                v-if="selectedWorkflowFilter === 'current'"
+                class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
+              />
+            </template>
+          </IconTextButton>
+        </div>
+      </Popover>
+      <IconButton
+        v-tooltip.top="sortTooltipConfig"
+        type="secondary"
+        size="sm"
+        class="relative size-6 bg-secondary-background hover:bg-secondary-background-hover hover:opacity-90"
+        :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
+        @click="onSortClick"
+      >
+        <i
+          class="icon-[lucide--arrow-up-down] block size-4 leading-none text-text-primary"
+        />
+        <span
+          v-if="selectedSortMode !== 'mostRecent'"
+          class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
+        />
+      </IconButton>
+      <Popover
+        ref="sortPopoverRef"
+        :dismissable="true"
+        :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'
+            ]
+          }
+        }"
+      >
+        <div
+          class="flex min-w-[12rem] flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3"
+        >
+          <template v-for="(mode, index) in jobSortModes" :key="mode">
+            <IconTextButton
+              class="w-full justify-between gap-1 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+              type="transparent"
+              icon-position="right"
+              :label="sortLabel(mode)"
+              :aria-label="sortLabel(mode)"
+              @click="selectSortMode(mode)"
+            >
+              <template #icon>
+                <i
+                  v-if="selectedSortMode === mode"
+                  class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
+                />
+              </template>
+            </IconTextButton>
+            <div
+              v-if="index < jobSortModes.length - 1"
+              class="mx-2 mt-1 h-px"
+            />
+          </template>
+        </div>
+      </Popover>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import IconButton from '@/components/button/IconButton.vue'
+import IconTextButton from '@/components/button/IconTextButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
+import { jobSortModes, jobTabs } from '@/composables/queue/useJobList'
+import type { JobSortMode, JobTab } from '@/composables/queue/useJobList'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import { isCloud } from '@/platform/distribution/types'
+
+const props = defineProps<{
+  selectedJobTab: JobTab
+  selectedWorkflowFilter: 'all' | 'current'
+  selectedSortMode: JobSortMode
+  hasFailedJobs: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:selectedJobTab', value: JobTab): void
+  (e: 'update:selectedWorkflowFilter', value: 'all' | 'current'): void
+  (e: 'update:selectedSortMode', value: JobSortMode): void
+}>()
+
+const { t } = useI18n()
+const filterPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
+const sortPopoverRef = ref<InstanceType<typeof Popover> | null>(null)
+
+const filterTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.filterBy'))
+)
+const sortTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.sortBy'))
+)
+
+// This can be removed when cloud implements /jobs and we switch to it.
+const showWorkflowFilter = !isCloud
+
+const visibleJobTabs = computed(() =>
+  props.hasFailedJobs ? jobTabs : jobTabs.filter((tab) => tab !== 'Failed')
+)
+
+const onFilterClick = (event: Event) => {
+  if (filterPopoverRef.value) {
+    filterPopoverRef.value.toggle(event)
+  }
+}
+const selectWorkflowFilter = (value: 'all' | 'current') => {
+  ;(filterPopoverRef.value as any)?.hide?.()
+  emit('update:selectedWorkflowFilter', value)
+}
+
+const onSortClick = (event: Event) => {
+  if (sortPopoverRef.value) {
+    sortPopoverRef.value.toggle(event)
+  }
+}
+
+const selectSortMode = (value: JobSortMode) => {
+  ;(sortPopoverRef.value as any)?.hide?.()
+  emit('update:selectedSortMode', value)
+}
+
+const tabLabel = (tab: JobTab) => {
+  if (tab === 'All') return t('g.all')
+  if (tab === 'Completed') return t('g.completed')
+  return t('g.failed')
+}
+
+const sortLabel = (mode: JobSortMode) => {
+  if (mode === 'mostRecent') {
+    return t('queue.jobList.sortMostRecent')
+  }
+  if (mode === 'totalGenerationTime') {
+    return t('queue.jobList.sortTotalGenerationTime')
+  }
+  return ''
+}
+</script>

src/components/queue/job/JobGroupsList.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex flex-col gap-4 px-3 pb-4">
+    <div
+      v-for="group in displayedJobGroups"
+      :key="group.key"
+      class="flex flex-col gap-2"
+    >
+      <div class="text-[12px] leading-none text-text-secondary">
+        {{ group.label }}
+      </div>
+      <QueueJobItem
+        v-for="ji in group.items"
+        :key="ji.id"
+        :job-id="ji.id"
+        :workflow-id="ji.taskRef?.workflow?.id"
+        :state="ji.state"
+        :title="ji.title"
+        :right-text="ji.meta"
+        :icon-name="ji.iconName"
+        :icon-image-url="ji.iconImageUrl"
+        :show-clear="ji.showClear"
+        :show-menu="true"
+        :progress-total-percent="ji.progressTotalPercent"
+        :progress-current-percent="ji.progressCurrentPercent"
+        :running-node-name="ji.runningNodeName"
+        :active-details-id="activeDetailsId"
+        @cancel="emitCancelItem(ji)"
+        @delete="emitDeleteItem(ji)"
+        @menu="(ev) => $emit('menu', ji, ev)"
+        @view="$emit('viewItem', ji)"
+        @details-enter="onDetailsEnter"
+        @details-leave="onDetailsLeave"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import QueueJobItem from '@/components/queue/job/QueueJobItem.vue'
+import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+
+defineProps<{ displayedJobGroups: JobGroup[] }>()
+
+const emit = defineEmits<{
+  (e: 'cancelItem', item: JobListItem): void
+  (e: 'deleteItem', item: JobListItem): void
+  (e: 'menu', item: JobListItem, ev: MouseEvent): void
+  (e: 'viewItem', item: JobListItem): void
+}>()
+
+const emitCancelItem = (item: JobListItem) => {
+  emit('cancelItem', item)
+}
+
+const emitDeleteItem = (item: JobListItem) => {
+  emit('deleteItem', item)
+}
+
+const activeDetailsId = ref<string | null>(null)
+const hideTimer = ref<number | null>(null)
+const showTimer = ref<number | null>(null)
+const clearHideTimer = () => {
+  if (hideTimer.value !== null) {
+    clearTimeout(hideTimer.value)
+    hideTimer.value = null
+  }
+}
+const clearShowTimer = () => {
+  if (showTimer.value !== null) {
+    clearTimeout(showTimer.value)
+    showTimer.value = null
+  }
+}
+const onDetailsEnter = (jobId: string) => {
+  clearHideTimer()
+  clearShowTimer()
+  showTimer.value = window.setTimeout(() => {
+    activeDetailsId.value = jobId
+    showTimer.value = null
+  }, 200)
+}
+const onDetailsLeave = (jobId: string) => {
+  clearHideTimer()
+  clearShowTimer()
+  hideTimer.value = window.setTimeout(() => {
+    if (activeDetailsId.value === jobId) activeDetailsId.value = null
+    hideTimer.value = null
+  }, 150)
+}
+</script>

src/components/queue/job/QueueAssetPreview.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="w-[300px] min-w-[260px] rounded-lg shadow-md">
+    <div class="p-3">
+      <div class="relative aspect-square w-full overflow-hidden rounded-lg">
+        <img
+          ref="imgRef"
+          :src="imageUrl"
+          :alt="name"
+          class="h-full w-full cursor-pointer object-contain"
+          @click="$emit('image-click')"
+          @load="onImgLoad"
+        />
+        <div
+          v-if="timeLabel"
+          class="absolute bottom-2 left-2 rounded px-2 py-0.5 text-xs text-text-primary"
+          :style="{
+            background: 'rgba(217, 217, 217, 0.40)',
+            backdropFilter: 'blur(2px)'
+          }"
+        >
+          {{ timeLabel }}
+        </div>
+      </div>
+      <div class="mt-2 text-center">
+        <div
+          class="truncate text-[0.875rem] leading-normal font-semibold text-text-primary"
+          :title="name"
+        >
+          {{ name }}
+        </div>
+        <div
+          v-if="width && height"
+          class="mt-1 text-[0.75rem] leading-normal text-text-secondary"
+        >
+          {{ width }}x{{ height }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+defineProps<{
+  imageUrl: string
+  name: string
+  timeLabel?: string
+}>()
+
+defineEmits(['image-click'])
+
+const imgRef = ref<HTMLImageElement | null>(null)
+const width = ref<number | null>(null)
+const height = ref<number | null>(null)
+
+const onImgLoad = () => {
+  const el = imgRef.value
+  if (!el) return
+  width.value = el.naturalWidth || null
+  height.value = el.naturalHeight || null
+}
+</script>

src/components/queue/job/QueueJobItem.stories.ts

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import QueueJobItem from './QueueJobItem.vue'
+
+const meta: Meta<typeof QueueJobItem> = {
+  title: 'Queue/QueueJobItem',
+  component: QueueJobItem,
+  parameters: {
+    layout: 'padded'
+  },
+  argTypes: {
+    onCancel: { action: 'cancel' },
+    onDelete: { action: 'delete' },
+    onMenu: { action: 'menu' },
+    onView: { action: 'view' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const thumb = (hex: string) =>
+  `data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><rect width='256' height='256' fill='%23${hex}'/></svg>`
+
+export const PendingRecentlyAdded: Story = {
+  args: {
+    jobId: 'job-pending-added-1',
+    state: 'pending',
+    title: 'Job added to queue',
+    rightText: '12:30 PM',
+    iconName: 'icon-[lucide--check]'
+  }
+}
+
+export const Pending: Story = {
+  args: {
+    jobId: 'job-pending-1',
+    state: 'pending',
+    title: 'Pending job',
+    rightText: '12:31 PM'
+  }
+}
+
+export const Initialization: Story = {
+  args: {
+    jobId: 'job-init-1',
+    state: 'initialization',
+    title: 'Initializing...'
+  }
+}
+
+export const RunningTotalOnly: Story = {
+  args: {
+    jobId: 'job-running-1',
+    state: 'running',
+    title: 'Generating image',
+    progressTotalPercent: 42
+  }
+}
+
+export const RunningWithCurrent: Story = {
+  args: {
+    jobId: 'job-running-2',
+    state: 'running',
+    title: 'Generating image',
+    progressTotalPercent: 66,
+    progressCurrentPercent: 10,
+    runningNodeName: 'KSampler'
+  }
+}
+
+export const CompletedWithPreview: Story = {
+  args: {
+    jobId: 'job-completed-1',
+    state: 'completed',
+    title: 'Prompt #1234',
+    rightText: '12.79s',
+    iconImageUrl: thumb('4dabf7')
+  }
+}
+
+export const CompletedNoPreview: Story = {
+  args: {
+    jobId: 'job-completed-2',
+    state: 'completed',
+    title: 'Prompt #5678',
+    rightText: '8.12s'
+  }
+}
+
+export const Failed: Story = {
+  args: {
+    jobId: 'job-failed-1',
+    state: 'failed',
+    title: 'Failed job',
+    rightText: 'Failed'
+  }
+}
+
+export const Gallery: Story = {
+  render: (args) => ({
+    components: { QueueJobItem },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="flex flex-col gap-2 w-[420px]">
+        <QueueJobItem job-id="job-pending-added-1" state="pending" title="Job added to queue" right-text="12:30 PM" icon-name="icon-[lucide--check]" v-bind="args" />
+        <QueueJobItem job-id="job-pending-1" state="pending" title="Pending job" right-text="12:31 PM" v-bind="args" />
+        <QueueJobItem job-id="job-init-1" state="initialization" title="Initializing..." v-bind="args" />
+        <QueueJobItem job-id="job-running-1" state="running" title="Generating image" :progress-total-percent="42" v-bind="args" />
+        <QueueJobItem
+          job-id="job-running-2"
+          state="running"
+          title="Generating image"
+          :progress-total-percent="66"
+          :progress-current-percent="10"
+          running-node-name="KSampler"
+          v-bind="args"
+        />
+        <QueueJobItem
+          job-id="job-completed-1"
+          state="completed"
+          title="Prompt #1234"
+          right-text="12.79s"
+          icon-image-url="${thumb('4dabf7')}"
+          v-bind="args"
+        />
+        <QueueJobItem job-id="job-completed-2" state="completed" title="Prompt #5678" right-text="8.12s" v-bind="args" />
+        <QueueJobItem job-id="job-failed-1" state="failed" title="Failed job" right-text="Failed" v-bind="args" />
+      </div>
+    `
+  })
+}

src/components/queue/job/QueueJobItem.vue

@@ -0,0 +1,314 @@
+<template>
+  <div
+    ref="rowRef"
+    class="relative"
+    @mouseenter="onRowEnter"
+    @mouseleave="onRowLeave"
+    @contextmenu.stop.prevent="onContextMenu"
+  >
+    <Teleport to="body">
+      <div
+        v-if="!isPreviewVisible && showDetails && popoverPosition"
+        class="fixed z-50"
+        :style="{
+          top: `${popoverPosition.top}px`,
+          right: `${popoverPosition.right}px`
+        }"
+        @mouseenter="onPopoverEnter"
+        @mouseleave="onPopoverLeave"
+      >
+        <JobDetailsPopover
+          :job-id="props.jobId"
+          :workflow-id="props.workflowId"
+        />
+      </div>
+    </Teleport>
+    <Teleport to="body">
+      <div
+        v-if="isPreviewVisible && canShowPreview && popoverPosition"
+        class="fixed z-50"
+        :style="{
+          top: `${popoverPosition.top}px`,
+          right: `${popoverPosition.right}px`
+        }"
+        @mouseenter="onPreviewEnter"
+        @mouseleave="onPreviewLeave"
+      >
+        <QueueAssetPreview
+          :image-url="iconImageUrl!"
+          :name="props.title"
+          :time-label="rightText || undefined"
+          @image-click="emit('view')"
+        />
+      </div>
+    </Teleport>
+    <div
+      class="relative flex items-center justify-between gap-2 overflow-hidden rounded-lg border border-secondary-background bg-secondary-background p-1 text-[12px] text-text-primary transition-colors duration-150 ease-in-out hover:border-secondary-background-hover hover:bg-secondary-background-hover"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
+    >
+      <div
+        v-if="
+          props.state === 'running' &&
+          (props.progressTotalPercent !== undefined ||
+            props.progressCurrentPercent !== undefined)
+        "
+        class="absolute inset-0"
+      >
+        <div
+          v-if="props.progressTotalPercent !== undefined"
+          class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-primary transition-[width]"
+          :style="{ width: `${props.progressTotalPercent}%` }"
+        />
+        <div
+          v-if="props.progressCurrentPercent !== undefined"
+          class="pointer-events-none absolute inset-y-0 left-0 h-full bg-interface-panel-job-progress-secondary transition-[width]"
+          :style="{ width: `${props.progressCurrentPercent}%` }"
+        />
+      </div>
+
+      <div class="relative z-[1] flex items-center gap-1">
+        <div class="relative inline-flex items-center justify-center">
+          <div
+            class="absolute left-1/2 top-1/2 size-10 -translate-x-1/2 -translate-y-1/2"
+            @mouseenter.stop="onIconEnter"
+            @mouseleave.stop="onIconLeave"
+          />
+          <div
+            class="inline-flex h-6 w-6 items-center justify-center overflow-hidden rounded-[6px]"
+          >
+            <img
+              v-if="iconImageUrl"
+              :src="iconImageUrl"
+              class="h-full w-full object-cover"
+            />
+            <i v-else :class="[iconClass, 'size-4']" />
+          </div>
+        </div>
+      </div>
+
+      <div class="relative z-[1] min-w-0 flex-1">
+        <div class="truncate opacity-90" :title="props.title">
+          <slot name="primary">{{ props.title }}</slot>
+        </div>
+      </div>
+
+      <div class="relative z-[1] flex items-center gap-2 text-text-secondary">
+        <Transition
+          mode="out-in"
+          enter-active-class="transition-opacity transition-transform duration-150 ease-out"
+          leave-active-class="transition-opacity transition-transform duration-150 ease-in"
+          enter-from-class="opacity-0 translate-y-0.5"
+          enter-to-class="opacity-100 translate-y-0"
+          leave-from-class="opacity-100 translate-y-0"
+          leave-to-class="opacity-0 translate-y-0.5"
+        >
+          <div
+            v-if="isHovered"
+            key="actions"
+            class="inline-flex items-center gap-2 pr-1"
+          >
+            <IconButton
+              v-if="props.state === 'failed' && computedShowClear"
+              v-tooltip.top="deleteTooltipConfig"
+              type="transparent"
+              size="sm"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
+              :aria-label="t('g.delete')"
+              @click.stop="emit('delete')"
+            >
+              <i class="icon-[lucide--trash-2] size-4" />
+            </IconButton>
+            <IconButton
+              v-else-if="props.state !== 'completed' && computedShowClear"
+              v-tooltip.top="cancelTooltipConfig"
+              type="transparent"
+              size="sm"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:bg-destructive-background hover:opacity-95"
+              :aria-label="t('g.cancel')"
+              @click.stop="emit('cancel')"
+            >
+              <i class="icon-[lucide--x] size-4" />
+            </IconButton>
+            <TextButton
+              v-else-if="props.state === 'completed'"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-2 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
+              type="transparent"
+              :label="t('menuLabels.View')"
+              :aria-label="t('menuLabels.View')"
+              @click.stop="emit('view')"
+            />
+            <IconButton
+              v-if="props.showMenu !== undefined ? props.showMenu : true"
+              v-tooltip.top="moreTooltipConfig"
+              type="transparent"
+              size="sm"
+              class="h-6 transform gap-1 rounded bg-modal-card-button-surface px-1 py-0 text-text-primary transition duration-150 ease-in-out hover:-translate-y-px hover:opacity-95"
+              :aria-label="t('g.more')"
+              @click.stop="emit('menu', $event)"
+            >
+              <i class="icon-[lucide--more-horizontal] size-4" />
+            </IconButton>
+          </div>
+          <div v-else key="secondary" class="pr-2">
+            <slot name="secondary">{{ props.rightText }}</slot>
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import IconButton from '@/components/button/IconButton.vue'
+import TextButton from '@/components/button/TextButton.vue'
+import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
+import QueueAssetPreview from '@/components/queue/job/QueueAssetPreview.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import type { JobState } from '@/types/queue'
+import { iconForJobState } from '@/utils/queueDisplay'
+
+const props = withDefaults(
+  defineProps<{
+    jobId: string
+    workflowId?: string
+    state: JobState
+    title: string
+    rightText?: string
+    iconName?: string
+    iconImageUrl?: string
+    showClear?: boolean
+    showMenu?: boolean
+    progressTotalPercent?: number
+    progressCurrentPercent?: number
+    runningNodeName?: string
+    activeDetailsId?: string | null
+  }>(),
+  {
+    workflowId: undefined,
+    rightText: '',
+    iconName: undefined,
+    iconImageUrl: undefined,
+    showClear: undefined,
+    showMenu: undefined,
+    progressTotalPercent: undefined,
+    progressCurrentPercent: undefined,
+    runningNodeName: undefined,
+    activeDetailsId: null
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'cancel'): void
+  (e: 'delete'): void
+  (e: 'menu', event: MouseEvent): void
+  (e: 'view'): void
+  (e: 'details-enter', jobId: string): void
+  (e: 'details-leave', jobId: string): void
+}>()
+
+const { t } = useI18n()
+
+const cancelTooltipConfig = computed(() => buildTooltipConfig(t('g.cancel')))
+const deleteTooltipConfig = computed(() => buildTooltipConfig(t('g.delete')))
+const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
+
+const rowRef = ref<HTMLDivElement | null>(null)
+const showDetails = computed(() => props.activeDetailsId === props.jobId)
+
+const onRowEnter = () => {
+  if (!isPreviewVisible.value) emit('details-enter', props.jobId)
+}
+const onRowLeave = () => emit('details-leave', props.jobId)
+const onPopoverEnter = () => emit('details-enter', props.jobId)
+const onPopoverLeave = () => emit('details-leave', props.jobId)
+
+const isPreviewVisible = ref(false)
+const previewHideTimer = ref<number | null>(null)
+const previewShowTimer = ref<number | null>(null)
+const clearPreviewHideTimer = () => {
+  if (previewHideTimer.value !== null) {
+    clearTimeout(previewHideTimer.value)
+    previewHideTimer.value = null
+  }
+}
+const clearPreviewShowTimer = () => {
+  if (previewShowTimer.value !== null) {
+    clearTimeout(previewShowTimer.value)
+    previewShowTimer.value = null
+  }
+}
+const canShowPreview = computed(
+  () => props.state === 'completed' && !!props.iconImageUrl
+)
+const scheduleShowPreview = () => {
+  if (!canShowPreview.value) return
+  clearPreviewHideTimer()
+  clearPreviewShowTimer()
+  previewShowTimer.value = window.setTimeout(() => {
+    isPreviewVisible.value = true
+    previewShowTimer.value = null
+  }, 200)
+}
+const scheduleHidePreview = () => {
+  clearPreviewHideTimer()
+  clearPreviewShowTimer()
+  previewHideTimer.value = window.setTimeout(() => {
+    isPreviewVisible.value = false
+    previewHideTimer.value = null
+  }, 150)
+}
+const onIconEnter = () => scheduleShowPreview()
+const onIconLeave = () => scheduleHidePreview()
+const onPreviewEnter = () => scheduleShowPreview()
+const onPreviewLeave = () => scheduleHidePreview()
+
+const popoverPosition = ref<{ top: number; right: number } | null>(null)
+
+const updatePopoverPosition = () => {
+  const el = rowRef.value
+  if (!el) return
+  const rect = el.getBoundingClientRect()
+  const gap = 8
+  popoverPosition.value = {
+    top: rect.top,
+    right: window.innerWidth - rect.left + gap
+  }
+}
+
+const isAnyPopoverVisible = computed(
+  () => showDetails.value || (isPreviewVisible.value && canShowPreview.value)
+)
+
+watch(
+  isAnyPopoverVisible,
+  (visible) => {
+    if (visible) {
+      nextTick(updatePopoverPosition)
+    } else {
+      popoverPosition.value = null
+    }
+  },
+  { immediate: false }
+)
+
+const isHovered = ref(false)
+
+const iconClass = computed(() => {
+  if (props.iconName) return props.iconName
+  return iconForJobState(props.state)
+})
+
+const computedShowClear = computed(() => {
+  if (props.showClear !== undefined) return props.showClear
+  return props.state !== 'completed'
+})
+
+const onContextMenu = (event: MouseEvent) => {
+  const shouldShowMenu = props.showMenu !== undefined ? props.showMenu : true
+  if (shouldShowMenu) emit('menu', event)
+}
+</script>

src/components/queue/job/useJobErrorReporting.ts

@@ -0,0 +1,83 @@
+import { computed } from 'vue'
+import type { ComputedRef } from 'vue'
+
+import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
+import type { TaskItemImpl } from '@/stores/queueStore'
+
+type CopyHandler = (value: string) => void | Promise<void>
+
+export type JobErrorDialogService = {
+  showExecutionErrorDialog: (error: ExecutionErrorWsMessage) => void
+  showErrorDialog: (
+    error: Error,
+    options?: {
+      reportType?: string
+      [key: string]: unknown
+    }
+  ) => void
+}
+
+type JobExecutionError = {
+  detail?: ExecutionErrorWsMessage
+  message: string
+}
+
+export const extractExecutionError = (
+  task: TaskItemImpl | null
+): JobExecutionError | null => {
+  const status = (task as TaskItemImpl | null)?.status
+  const messages = (status as { messages?: unknown[] } | undefined)?.messages
+  if (!Array.isArray(messages) || !messages.length) return null
+  const record = messages.find((entry: unknown) => {
+    return Array.isArray(entry) && entry[0] === 'execution_error'
+  }) as [string, ExecutionErrorWsMessage?] | undefined
+  if (!record) return null
+  const detail = record[1]
+  const message = String(detail?.exception_message ?? '')
+  return {
+    detail,
+    message
+  }
+}
+
+type UseJobErrorReportingOptions = {
+  taskForJob: ComputedRef<TaskItemImpl | null>
+  copyToClipboard: CopyHandler
+  dialog: JobErrorDialogService
+}
+
+export const useJobErrorReporting = ({
+  taskForJob,
+  copyToClipboard,
+  dialog
+}: UseJobErrorReportingOptions) => {
+  const errorMessageValue = computed(() => {
+    const error = extractExecutionError(taskForJob.value)
+    return error?.message ?? ''
+  })
+
+  const copyErrorMessage = () => {
+    if (errorMessageValue.value) {
+      void copyToClipboard(errorMessageValue.value)
+    }
+  }
+
+  const reportJobError = () => {
+    const error = extractExecutionError(taskForJob.value)
+    if (error?.detail) {
+      dialog.showExecutionErrorDialog(error.detail)
+      return
+    }
+    if (errorMessageValue.value) {
+      dialog.showErrorDialog(new Error(errorMessageValue.value), {
+        reportType: 'queueJobError'
+      })
+    }
+  }
+
+  return {
+    errorMessageValue,
+    copyErrorMessage,
+    reportJobError
+  }
+}

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

@@ -0,0 +1,230 @@
+import { computed, ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+
+import type { TaskItemImpl } from '@/stores/queueStore'
+import type { JobState } from '@/types/queue'
+
+import { formatElapsedTime, useQueueEstimates } from './useQueueEstimates'
+import type { UseQueueEstimatesOptions } from './useQueueEstimates'
+
+type QueueStore = UseQueueEstimatesOptions['queueStore']
+type ExecutionStore = UseQueueEstimatesOptions['executionStore']
+
+const makeHistoryTask = (
+  executionTimeInSeconds: number | string | undefined
+): TaskItemImpl =>
+  ({
+    executionTimeInSeconds
+  }) as TaskItemImpl
+
+const makeRunningTask = (executionStartTimestamp?: number): TaskItemImpl =>
+  ({
+    executionStartTimestamp
+  }) as TaskItemImpl
+
+const createQueueStore = (data?: Partial<QueueStore>): QueueStore =>
+  ({
+    historyTasks: [],
+    runningTasks: [],
+    ...data
+  }) as QueueStore
+
+const createExecutionStore = (data?: Partial<ExecutionStore>): ExecutionStore =>
+  ({
+    runningWorkflowCount: 1,
+    ...data
+  }) as ExecutionStore
+
+type HarnessOptions = {
+  queueStore?: QueueStore
+  executionStore?: ExecutionStore
+  task?: TaskItemImpl | null
+  jobState?: JobState | null
+  firstSeenTs?: number
+  jobsAhead?: number | null
+  now?: number
+}
+
+const createHarness = (options?: HarnessOptions) => {
+  const queueStore = options?.queueStore ?? createQueueStore()
+  const executionStore = options?.executionStore ?? createExecutionStore()
+  const taskRef = ref<TaskItemImpl | null>(options?.task ?? null)
+  const jobStateRef = ref<JobState | null>(options?.jobState ?? null)
+  const firstSeenRef = ref<number | undefined>(options?.firstSeenTs)
+  const jobsAheadRef = ref<number | null>(options?.jobsAhead ?? null)
+  const nowRef = ref(options?.now ?? 0)
+
+  const result = useQueueEstimates({
+    queueStore,
+    executionStore,
+    taskForJob: computed(() => taskRef.value),
+    jobState: computed(() => jobStateRef.value),
+    firstSeenTs: computed(() => firstSeenRef.value),
+    jobsAhead: computed(() => jobsAheadRef.value),
+    nowTs: nowRef
+  })
+
+  return {
+    ...result,
+    queueStore,
+    executionStore,
+    taskRef,
+    jobStateRef,
+    firstSeenRef,
+    jobsAheadRef,
+    nowRef
+  }
+}
+
+describe('formatElapsedTime', () => {
+  it('formats elapsed milliseconds and clamps negatives to zero', () => {
+    expect(formatElapsedTime(0)).toBe('0m 0s')
+    expect(formatElapsedTime(61000)).toBe('1m 1s')
+    expect(formatElapsedTime(90000)).toBe('1m 30s')
+    expect(formatElapsedTime(-5000)).toBe('0m 0s')
+  })
+})
+
+describe('useQueueEstimates', () => {
+  it('only shows parallel queued stats for pending jobs seen with multiple runners', () => {
+    const ready = createHarness({
+      executionStore: createExecutionStore({ runningWorkflowCount: 2 }),
+      jobState: 'pending',
+      firstSeenTs: 1000
+    })
+    expect(ready.showParallelQueuedStats.value).toBe(true)
+
+    const missingTimestamp = createHarness({
+      executionStore: createExecutionStore({ runningWorkflowCount: 2 }),
+      jobState: 'pending'
+    })
+    expect(missingTimestamp.showParallelQueuedStats.value).toBe(false)
+
+    const singleRunner = createHarness({
+      executionStore: createExecutionStore({ runningWorkflowCount: 1 }),
+      jobState: 'pending',
+      firstSeenTs: 1000
+    })
+    expect(singleRunner.showParallelQueuedStats.value).toBe(false)
+
+    const runningJob = createHarness({
+      executionStore: createExecutionStore({ runningWorkflowCount: 3 }),
+      jobState: 'running',
+      firstSeenTs: 1000
+    })
+    expect(runningJob.showParallelQueuedStats.value).toBe(false)
+  })
+
+  it('uses the last 20 valid durations to estimate queued batches', () => {
+    const durations = Array.from({ length: 25 }, (_, idx) => idx + 1)
+    const queueStore = createQueueStore({
+      historyTasks: [
+        ...durations.slice(0, 5).map((value) => makeHistoryTask(value)),
+        makeHistoryTask('not-a-number'),
+        makeHistoryTask(undefined),
+        ...durations.slice(5).map((value) => makeHistoryTask(value))
+      ]
+    })
+
+    const { estimateRangeSeconds } = createHarness({
+      queueStore,
+      executionStore: createExecutionStore({ runningWorkflowCount: 2 }),
+      jobsAhead: 5
+    })
+
+    expect(estimateRangeSeconds.value).toEqual([47, 63])
+  })
+
+  it('returns null for estimateRangeSeconds when no history or jobsAhead is unknown', () => {
+    const emptyHistory = createHarness({
+      queueStore: createQueueStore(),
+      jobsAhead: 2
+    })
+    expect(emptyHistory.estimateRangeSeconds.value).toBeNull()
+
+    const missingAhead = createHarness({
+      queueStore: createQueueStore({
+        historyTasks: [makeHistoryTask(10)]
+      })
+    })
+    expect(missingAhead.estimateRangeSeconds.value).toBeNull()
+  })
+
+  it('falls back to the running remaining range when there are no jobs ahead', () => {
+    const now = 20000
+    const queueStore = createQueueStore({
+      historyTasks: [10, 20, 30].map((value) => makeHistoryTask(value)),
+      runningTasks: [
+        makeRunningTask(now - 5000),
+        makeRunningTask(now - 15000),
+        makeRunningTask(undefined)
+      ]
+    })
+
+    const { estimateRangeSeconds } = createHarness({
+      queueStore,
+      jobsAhead: 0,
+      now
+    })
+
+    expect(estimateRangeSeconds.value).toEqual([5, 15])
+  })
+
+  it('subtracts elapsed time when estimating a running job', () => {
+    const now = 25000
+    const queueStore = createQueueStore({
+      historyTasks: [10, 20, 30].map((value) => makeHistoryTask(value))
+    })
+
+    const { estimateRemainingRangeSeconds } = createHarness({
+      queueStore,
+      task: makeRunningTask(5000),
+      jobState: 'running',
+      firstSeenTs: 2000,
+      now
+    })
+
+    expect(estimateRemainingRangeSeconds.value).toEqual([0, 10])
+  })
+
+  it('uses the first-seen timestamp for pending jobs and clamps negatives to zero', () => {
+    const queueStore = createQueueStore({
+      historyTasks: [10, 20, 30].map((value) => makeHistoryTask(value))
+    })
+
+    const harness = createHarness({
+      queueStore,
+      jobState: 'pending',
+      firstSeenTs: 10000,
+      now: 25000
+    })
+
+    expect(harness.estimateRemainingRangeSeconds.value).toEqual([5, 15])
+
+    harness.firstSeenRef.value = 1000
+    harness.nowRef.value = 70000
+
+    expect(harness.estimateRemainingRangeSeconds.value).toEqual([0, 0])
+  })
+
+  it('computes the elapsed label using execution start, then first-seen timestamp', () => {
+    const harness = createHarness()
+
+    harness.taskRef.value = makeRunningTask(1000)
+    harness.jobStateRef.value = 'running'
+    harness.nowRef.value = 4000
+
+    expect(harness.timeElapsedValue.value).toBe('0m 3s')
+
+    harness.jobStateRef.value = 'pending'
+    harness.firstSeenRef.value = 2000
+    harness.nowRef.value = 5000
+
+    expect(harness.timeElapsedValue.value).toBe('0m 3s')
+
+    harness.taskRef.value = null
+    harness.firstSeenRef.value = undefined
+
+    expect(harness.timeElapsedValue.value).toBe('')
+  })
+})

src/components/queue/job/useQueueEstimates.ts

@@ -0,0 +1,149 @@
+import { computed } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+
+import type { useExecutionStore } from '@/stores/executionStore'
+import type { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
+import type { JobState } from '@/types/queue'
+
+type QueueStore = ReturnType<typeof useQueueStore>
+type ExecutionStore = ReturnType<typeof useExecutionStore>
+
+export type UseQueueEstimatesOptions = {
+  queueStore: QueueStore
+  executionStore: ExecutionStore
+  taskForJob: ComputedRef<TaskItemImpl | null>
+  jobState: ComputedRef<JobState | null>
+  firstSeenTs: ComputedRef<number | undefined>
+  jobsAhead: ComputedRef<number | null>
+  nowTs: Ref<number>
+}
+
+type EstimateRange = [number, number]
+
+export const formatElapsedTime = (ms: number): string => {
+  const totalSec = Math.max(0, Math.floor(ms / 1000))
+  const minutes = Math.floor(totalSec / 60)
+  const seconds = totalSec % 60
+  return `${minutes}m ${seconds}s`
+}
+
+const pickRecentDurations = (queueStore: QueueStore) =>
+  queueStore.historyTasks
+    .map((task: TaskItemImpl) => Number(task.executionTimeInSeconds))
+    .filter(
+      (value: number | undefined) =>
+        typeof value === 'number' && !Number.isNaN(value)
+    ) as number[]
+
+export const useQueueEstimates = ({
+  queueStore,
+  executionStore,
+  taskForJob,
+  jobState,
+  firstSeenTs,
+  jobsAhead,
+  nowTs
+}: UseQueueEstimatesOptions) => {
+  const runningWorkflowCount = computed(
+    () => executionStore.runningWorkflowCount
+  )
+
+  const showParallelQueuedStats = computed(
+    () =>
+      jobState.value === 'pending' &&
+      !!firstSeenTs.value &&
+      (runningWorkflowCount.value ?? 0) > 1
+  )
+
+  const recentDurations = computed<number[]>(() =>
+    pickRecentDurations(queueStore).slice(-20)
+  )
+
+  const runningRemainingRangeSeconds = computed<EstimateRange | null>(() => {
+    const durations = recentDurations.value
+    if (!durations.length) return null
+    const sorted = durations.slice().sort((a, b) => a - b)
+    const avg = sorted.reduce((sum, value) => sum + value, 0) / sorted.length
+    const p75 =
+      sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.75))]
+    const running = queueStore.runningTasks as TaskItemImpl[]
+    const now = nowTs.value
+    const remaining = running
+      .map((task) => task.executionStartTimestamp)
+      .filter((timestamp): timestamp is number => typeof timestamp === 'number')
+      .map((startTs) => {
+        const elapsed = Math.max(0, Math.floor((now - startTs) / 1000))
+        return {
+          lo: Math.max(0, Math.round(avg - elapsed)),
+          hi: Math.max(0, Math.round(p75 - elapsed))
+        }
+      })
+    if (!remaining.length) return null
+    const minLo = remaining.reduce(
+      (min, range) => Math.min(min, range.lo),
+      Infinity
+    )
+    const minHi = remaining.reduce(
+      (min, range) => Math.min(min, range.hi),
+      Infinity
+    )
+    return [minLo, minHi]
+  })
+
+  const estimateRangeSeconds = computed<EstimateRange | null>(() => {
+    const durations = recentDurations.value
+    if (!durations.length) return null
+    const ahead = jobsAhead.value
+    if (ahead == null) return null
+    const sorted = durations.slice().sort((a, b) => a - b)
+    const avg = sorted.reduce((sum, value) => sum + value, 0) / sorted.length
+    const p75 =
+      sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.75))]
+    if (ahead <= 0) {
+      return runningRemainingRangeSeconds.value ?? [0, 0]
+    }
+    const runningCount = Math.max(1, runningWorkflowCount.value || 1)
+    const batches = Math.ceil(ahead / runningCount)
+    return [Math.round(avg * batches), Math.round(p75 * batches)]
+  })
+
+  const estimateRemainingRangeSeconds = computed<EstimateRange | null>(() => {
+    const durations = recentDurations.value
+    if (!durations.length) return null
+    const sorted = durations.slice().sort((a, b) => a - b)
+    const avg = sorted.reduce((sum, value) => sum + value, 0) / sorted.length
+    const p75 =
+      sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.75))]
+    const task = taskForJob.value as TaskItemImpl & {
+      executionStartTimestamp?: number
+    }
+    const execStart =
+      jobState.value === 'running' ? task?.executionStartTimestamp : undefined
+    const baseTs = execStart ?? firstSeenTs.value
+    const elapsed = baseTs
+      ? Math.max(0, Math.floor((nowTs.value - baseTs) / 1000))
+      : 0
+    const lo = Math.max(0, Math.round(avg - elapsed))
+    const hi = Math.max(0, Math.round(p75 - elapsed))
+    return [lo, hi]
+  })
+
+  const timeElapsedValue = computed(() => {
+    const task = taskForJob.value as TaskItemImpl & {
+      executionStartTimestamp?: number
+    }
+    const execStart =
+      jobState.value === 'running' ? task?.executionStartTimestamp : undefined
+    const baseTs = execStart ?? firstSeenTs.value
+    if (!baseTs) return ''
+    return formatElapsedTime(nowTs.value - baseTs)
+  })
+
+  return {
+    runningWorkflowCount,
+    showParallelQueuedStats,
+    estimateRangeSeconds,
+    estimateRemainingRangeSeconds,
+    timeElapsedValue
+  }
+}

src/components/searchbox/NodeSearchItem.vue

@@ -47,10 +47,6 @@
 </template>
 
 <script setup lang="ts">
-import {
-  formatNumberWithSuffix,
-  highlightQuery
-} from '@comfyorg/shared-frontend-utils/formatUtil'
 import Chip from 'primevue/chip'
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
@@ -60,6 +56,7 @@ import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import { NodeSourceType } from '@/types/nodeSource'
+import { formatNumberWithSuffix, highlightQuery } from '@/utils/formatUtil'
 
 const settingStore = useSettingStore()
 const showCategory = computed(() =>

src/components/sidebar/ComfyMenuButton.vue

@@ -73,6 +73,7 @@
         @click.stop="handleNodes2ToggleClick"
       >
         <span class="p-menubar-item-label text-nowrap">{{ item.label }}</span>
+        <Tag severity="info" class="ml-2 text-xs">{{ $t('g.beta') }}</Tag>
         <ToggleSwitch
           v-model="nodes2Enabled"
           class="ml-4"
@@ -100,8 +101,8 @@
 </template>
 
 <script setup lang="ts">
-import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
 import type { MenuItem } from 'primevue/menuitem'
+import Tag from 'primevue/tag'
 import TieredMenu from 'primevue/tieredmenu'
 import type { TieredMenuMethods, TieredMenuState } from 'primevue/tieredmenu'
 import ToggleSwitch from 'primevue/toggleswitch'
@@ -119,6 +120,7 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -97,43 +97,62 @@
     <template #footer>
       <div
         v-if="hasSelection"
+        ref="footerRef"
         class="flex gap-1 h-18 w-full items-center justify-between"
       >
-        <div ref="selectionCountButtonRef" class="flex-1 pl-4">
-          <TextButton
-            :label="
-              isHoveringSelectionCount
-                ? $t('mediaAsset.selection.deselectAll')
-                : $t('mediaAsset.selection.selectedCount', {
-                    count: totalOutputCount
-                  })
-            "
-            type="transparent"
-            @click="handleDeselectAll"
-          />
+        <div class="flex-1 pl-4">
+          <div ref="selectionCountButtonRef" class="inline-flex w-48">
+            <TextButton
+              :label="
+                isHoveringSelectionCount
+                  ? $t('mediaAsset.selection.deselectAll')
+                  : $t('mediaAsset.selection.selectedCount', {
+                      count: totalOutputCount
+                    })
+              "
+              type="transparent"
+              :class="isCompact ? 'text-left' : ''"
+              @click="handleDeselectAll"
+            />
+          </div>
         </div>
         <div class="flex gap-2 pr-4">
-          <IconTextButton
-            v-if="shouldShowDeleteButton"
-            :label="$t('mediaAsset.selection.deleteSelected')"
-            type="secondary"
-            icon-position="right"
-            @click="handleDeleteSelected"
-          >
-            <template #icon>
+          <template v-if="isCompact">
+            <!-- Compact mode: Icon only -->
+            <IconButton
+              v-if="shouldShowDeleteButton"
+              @click="handleDeleteSelected"
+            >
               <i class="icon-[lucide--trash-2] size-4" />
-            </template>
-          </IconTextButton>
-          <IconTextButton
-            :label="$t('mediaAsset.selection.downloadSelected')"
-            type="secondary"
-            icon-position="right"
-            @click="handleDownloadSelected"
-          >
-            <template #icon>
+            </IconButton>
+            <IconButton @click="handleDownloadSelected">
               <i class="icon-[lucide--download] size-4" />
-            </template>
-          </IconTextButton>
+            </IconButton>
+          </template>
+          <template v-else>
+            <!-- Normal mode: Icon + Text -->
+            <IconTextButton
+              v-if="shouldShowDeleteButton"
+              :label="$t('mediaAsset.selection.deleteSelected')"
+              type="secondary"
+              icon-position="right"
+              @click="handleDeleteSelected"
+            >
+              <template #icon>
+                <i class="icon-[lucide--trash-2] size-4" />
+              </template>
+            </IconTextButton>
+            <IconTextButton
+              :label="$t('mediaAsset.selection.downloadSelected')"
+              type="secondary"
+              icon-position="right"
+              @click="handleDownloadSelected"
+            >
+              <template #icon>
+                <i class="icon-[lucide--download] size-4" />
+              </template>
+            </IconTextButton>
+          </template>
         </div>
       </div>
     </template>
@@ -145,15 +164,12 @@
 </template>
 
 <script setup lang="ts">
-import {
-  formatDuration,
-  getMediaTypeFromFilename
-} from '@comfyorg/shared-frontend-utils/formatUtil'
-import { useDebounceFn, useElementHover } from '@vueuse/core'
+import { useDebounceFn, useElementHover, useResizeObserver } from '@vueuse/core'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
+import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import TextButton from '@/components/button/TextButton.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
@@ -174,6 +190,7 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { isCloud } from '@/platform/distribution/types'
 import { useDialogStore } from '@/stores/dialogStore'
 import { ResultItemImpl } from '@/stores/queueStore'
+import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 
 import AssetsSidebarTemplate from './AssetSidebarTemplate.vue'
 
@@ -191,7 +208,7 @@ const shouldShowDeleteButton = computed(() => {
 
 const getOutputCount = (item: AssetItem): number => {
   const count = item.user_metadata?.outputCount
-  return typeof count === 'number' && count > 0 ? count : 0
+  return typeof count === 'number' && count > 0 ? count : 1
 }
 
 const shouldShowOutputCount = (item: AssetItem): boolean => {
@@ -224,6 +241,22 @@ const {
 
 const { downloadMultipleAssets, deleteMultipleAssets } = useMediaAssetActions()
 
+// Footer responsive behavior
+const footerRef = ref<HTMLElement | null>(null)
+const footerWidth = ref(0)
+
+// Track footer width changes
+useResizeObserver(footerRef, (entries) => {
+  const entry = entries[0]
+  footerWidth.value = entry.contentRect.width
+})
+
+// Determine if we should show compact mode (icon only)
+// Threshold: 350px or less shows icon only
+const isCompact = computed(
+  () => footerWidth.value > 0 && footerWidth.value <= 350
+)
+
 // Hover state for selection count button
 const selectionCountButtonRef = ref<HTMLElement | null>(null)
 const isHoveringSelectionCount = useElementHover(selectionCountButtonRef)