1.32.7 (#6765)

Patch version increment to 1.32.7

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

Co-authored-by: benceruleanlu <162923238+benceruleanlu@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/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')

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.32.5",
+  "version": "1.32.7",
   "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
@@ -1827,4 +1841,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"
@@ -12,20 +10,12 @@
       severity="primary"
       size="small"
       :model="queueModeMenuItems"
+      :disabled="hasMissingNodes"
       data-testid="queue-button"
       @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
@@ -95,6 +85,7 @@ import {
   useQueueSettingsStore
 } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 
 import BatchCountEdit from '../BatchCountEdit.vue'
 
@@ -102,6 +93,8 @@ const workspaceStore = useWorkspaceStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
 const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
+const { hasMissingNodes } = useMissingNodes()
+
 const { t } = useI18n()
 const queueModeMenuItemLookup = computed(() => {
   const items: Record<string, MenuItem> = {
@@ -157,6 +150,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/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>
@@ -64,6 +68,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { appendJsonExt } from '@/utils/formatUtil'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 
 interface Props {
   item: MenuItem
@@ -74,6 +79,8 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false
 })
 
+const { hasMissingNodes } = useMissingNodes()
+
 const { t } = useI18n()
 const menu = ref<InstanceType<typeof Menu> & MenuState>()
 const dialogService = useDialogService()
@@ -115,6 +122,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/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/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,99 @@
+<template>
+  <button
+    type="button"
+    class="group flex w-full items-center justify-between gap-3 rounded-lg border-0 bg-secondary-background p-1 text-left transition-colors duration-200 ease-in-out hover:cursor-pointer hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
+    :aria-label="props.ariaLabel"
+  >
+    <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>
+  </button>
+</template>
+
+<script setup lang="ts">
+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: () => []
+})
+</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,119 @@
+<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>
+          <button
+            v-if="runningCount > 0"
+            v-tooltip.top="cancelJobTooltip"
+            class="inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 transition-colors 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"
+            />
+          </button>
+        </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>
+          <button
+            v-if="queuedCount > 0"
+            v-tooltip.top="clearQueueTooltip"
+            class="inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 transition-colors 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"
+            />
+          </button>
+        </div>
+      </div>
+
+      <button
+        class="inline-flex h-6 min-w-[120px] flex-1 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background px-2 py-0 text-[12px] text-text-primary hover:bg-secondary-background-hover hover:opacity-90"
+        @click="$emit('viewAllJobs')"
+      >
+        {{ t('sideToolbar.queueProgressOverlay.viewAllJobs') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+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,144 @@
+<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">
+      <button
+        class="inline-flex grow cursor-pointer items-center justify-center gap-1 rounded border-0 bg-secondary-background p-2 text-center font-inter text-[12px] leading-none text-text-primary hover:bg-secondary-background-hover hover:opacity-90"
+        :aria-label="t('sideToolbar.queueProgressOverlay.showAssets')"
+        @click="$emit('showAssets')"
+      >
+        <div
+          class="pointer-events-none block size-4 shrink-0 leading-none icon-[comfy--image-ai-edit]"
+          aria-hidden="true"
+        />
+        <span>{{ t('sideToolbar.queueProgressOverlay.showAssets') }}</span>
+      </button>
+      <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>
+        <button
+          v-if="queuedCount > 0"
+          class="group ml-2 inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 transition-colors hover:bg-destructive-background"
+          :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"
+          />
+        </button>
+      </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 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,96 @@
+<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">
+      <button
+        v-tooltip.top="moreTooltipConfig"
+        class="inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 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"
+        />
+      </button>
+      <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"
+        >
+          <button
+            class="inline-flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            :aria-label="t('sideToolbar.queueProgressOverlay.clearHistory')"
+            @click="onClearHistoryFromMenu"
+          >
+            <i
+              class="icon-[lucide--file-x-2] block size-4 leading-none text-text-secondary"
+            />
+            <span>{{
+              t('sideToolbar.queueProgressOverlay.clearHistory')
+            }}</span>
+          </button>
+        </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 { 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,88 @@
+<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>
+      <button
+        class="inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-transparent p-0 text-text-secondary transition hover:bg-secondary-background hover:opacity-100"
+        :aria-label="t('g.close')"
+        @click="onCancel"
+      >
+        <i class="icon-[lucide--x] block size-4 leading-none" />
+      </button>
+    </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">
+        <button
+          class="inline-flex min-h-[24px] cursor-pointer items-center rounded-md border-0 bg-transparent px-1 py-1 text-[14px] leading-[1] text-text-secondary transition hover:text-text-primary"
+          :aria-label="t('g.cancel')"
+          @click="onCancel"
+        >
+          {{ t('g.cancel') }}
+        </button>
+        <button
+          class="inline-flex min-h-[32px] items-center rounded-lg border-0 bg-secondary-background px-4 py-2 text-[12px] font-normal leading-[1] text-text-primary transition hover:bg-secondary-background-hover hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-60"
+          :aria-label="t('g.clear')"
+          :disabled="isClearing"
+          @click="onConfirm"
+        >
+          {{ t('g.clear') }}
+        </button>
+      </div>
+    </footer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+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,72 @@
+<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>
+        <button
+          v-else
+          class="inline-flex w-full cursor-pointer items-center justify-start gap-2 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary transition-colors duration-150 hover:bg-interface-panel-hover-surface"
+          :aria-label="entry.label"
+          @click="onEntry(entry)"
+        >
+          <i
+            v-if="entry.icon"
+            :class="[
+              entry.icon,
+              'block size-4 shrink-0 leading-none text-text-secondary'
+            ]"
+          />
+          <span>{{ entry.label }}</span>
+        </button>
+      </template>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import Popover from 'primevue/popover'
+import { ref } from '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,350 @@
+<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>
+            <button
+              v-if="row.canCopy"
+              type="button"
+              class="ml-2 inline-flex size-6 items-center justify-center rounded border-0 bg-transparent p-0 hover:opacity-90"
+              :aria-label="copyAriaLabel"
+              @click.stop="copyJobId"
+            >
+              <i
+                class="icon-[lucide--copy] block size-4 leading-none text-text-secondary"
+              />
+            </button>
+          </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">
+          <button
+            type="button"
+            class="inline-flex h-6 items-center justify-center gap-2 rounded border-none bg-transparent px-0 text-[0.75rem] leading-none text-text-secondary hover:opacity-90"
+            :aria-label="copyAriaLabel"
+            @click.stop="copyErrorMessage"
+          >
+            <span>{{ copyAriaLabel }}</span>
+            <i class="icon-[lucide--copy] block size-3.5 leading-none" />
+          </button>
+          <button
+            type="button"
+            class="inline-flex h-6 items-center justify-center gap-2 rounded border-none bg-transparent px-0 text-[0.75rem] leading-none text-text-secondary hover:opacity-90"
+            @click.stop="reportJobError"
+          >
+            <span>{{ t('queue.jobDetails.report') }}</span>
+            <i
+              class="icon-[lucide--message-circle-warning] block size-3.5 leading-none"
+            />
+          </button>
+        </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 { 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,224 @@
+<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">
+        <button
+          v-for="tab in visibleJobTabs"
+          :key="tab"
+          class="h-6 cursor-pointer rounded border-0 px-3 py-1 text-[12px] leading-none hover:opacity-90"
+          :class="[
+            selectedJobTab === tab
+              ? 'bg-secondary-background text-text-primary'
+              : 'bg-transparent text-text-secondary'
+          ]"
+          @click="$emit('update:selectedJobTab', tab)"
+        >
+          {{ tabLabel(tab) }}
+        </button>
+      </div>
+    </div>
+    <div class="ml-2 flex shrink-0 items-center gap-2">
+      <button
+        v-if="showWorkflowFilter"
+        v-tooltip.top="filterTooltipConfig"
+        class="relative inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 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"
+        />
+      </button>
+      <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"
+        >
+          <button
+            class="inline-flex w-full cursor-pointer items-center justify-start gap-1 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
+            "
+            @click="selectWorkflowFilter('all')"
+          >
+            <span>{{
+              t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
+            }}</span>
+            <span class="ml-auto inline-flex items-center">
+              <i
+                v-if="selectedWorkflowFilter === 'all'"
+                class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
+              />
+            </span>
+          </button>
+          <div class="mx-2 mt-1 h-px" />
+          <button
+            class="inline-flex w-full cursor-pointer items-center justify-start gap-1 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
+            "
+            @click="selectWorkflowFilter('current')"
+          >
+            <span>{{
+              t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
+            }}</span>
+            <span class="ml-auto inline-flex items-center">
+              <i
+                v-if="selectedWorkflowFilter === 'current'"
+                class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
+              />
+            </span>
+          </button>
+        </div>
+      </Popover>
+      <button
+        v-tooltip.top="sortTooltipConfig"
+        class="relative inline-flex size-6 cursor-pointer items-center justify-center rounded border-0 bg-secondary-background p-0 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"
+        />
+      </button>
+      <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">
+            <button
+              class="inline-flex w-full cursor-pointer items-center justify-start gap-1 rounded-lg border-0 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
+              :aria-label="sortLabel(mode)"
+              @click="selectSortMode(mode)"
+            >
+              <span>{{ sortLabel(mode) }}</span>
+              <span class="ml-auto inline-flex items-center">
+                <i
+                  v-if="selectedSortMode === mode"
+                  class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
+                />
+              </span>
+            </button>
+            <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 { 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,310 @@
+<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"
+          >
+            <button
+              v-if="props.state === 'failed' && computedShowClear"
+              v-tooltip.top="deleteTooltipConfig"
+              type="button"
+              class="inline-flex h-6 transform cursor-pointer items-center gap-1 rounded border-0 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" />
+            </button>
+            <button
+              v-else-if="props.state !== 'completed' && computedShowClear"
+              v-tooltip.top="cancelTooltipConfig"
+              type="button"
+              class="inline-flex h-6 transform cursor-pointer items-center gap-1 rounded border-0 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" />
+            </button>
+            <button
+              v-else-if="props.state === 'completed'"
+              type="button"
+              class="inline-flex h-6 transform cursor-pointer items-center gap-1 rounded border-0 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"
+              :aria-label="t('menuLabels.View')"
+              @click.stop="emit('view')"
+            >
+              <span>{{ t('menuLabels.View') }}</span>
+            </button>
+            <button
+              v-if="props.showMenu !== undefined ? props.showMenu : true"
+              v-tooltip.top="moreTooltipConfig"
+              type="button"
+              class="inline-flex h-6 transform cursor-pointer items-center gap-1 rounded border-0 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" />
+            </button>
+          </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 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/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,11 +164,12 @@
 </template>
 
 <script setup lang="ts">
-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'
@@ -221,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)

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

@@ -5,9 +5,9 @@
     :value="allGalleryItems"
     :show-indicators="false"
     change-item-on-indicator-hover
-    show-item-navigators
+    :show-item-navigators="hasMultiple"
     full-screen
-    circular
+    :circular="hasMultiple"
     :show-thumbnails="false"
     :pt="{
       mask: {
@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import Galleria from 'primevue/galleria'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
 import ComfyImage from '@/components/common/ComfyImage.vue'
 import type { ResultItemImpl } from '@/stores/queueStore'
@@ -61,6 +61,8 @@ const props = defineProps<{
   activeIndex: number
 }>()
 
+const hasMultiple = computed(() => props.allGalleryItems.length > 1)
+
 let maskMouseDownTarget: EventTarget | null = null
 
 const onMaskMouseDown = (event: MouseEvent) => {

src/composables/canvas/useSelectionToolboxPosition.ts

@@ -66,6 +66,14 @@ export function useSelectionToolboxPosition(
     lgCanvas.canvas
   )
 
+  // Unified dragging state - combines both LiteGraph and Vue node dragging
+  const isDragging = computed((): boolean => {
+    const litegraphDragging = canvasStore.canvas?.state?.draggingItems ?? false
+    const vueNodeDragging =
+      shouldRenderVueNodes.value && layoutStore.isDraggingVueNodes.value
+    return litegraphDragging || vueNodeDragging
+  })
+
   /**
    * Update position based on selection
    */
@@ -77,6 +85,12 @@ export function useSelectionToolboxPosition(
       return
     }
 
+    // Don't show toolbox while dragging
+    if (isDragging.value) {
+      visible.value = false
+      return
+    }
+
     visible.value = true
 
     // Get bounds for all selected items
@@ -241,14 +255,6 @@ export function useSelectionToolboxPosition(
     })
   }
 
-  // Unified dragging state - combines both LiteGraph and Vue node dragging
-  const isDragging = computed((): boolean => {
-    const litegraphDragging = canvasStore.canvas?.state?.draggingItems ?? false
-    const vueNodeDragging =
-      shouldRenderVueNodes.value && layoutStore.isDraggingVueNodes.value
-    return litegraphDragging || vueNodeDragging
-  })
-
   watch(isDragging, handleDragStateChange)
 
   onUnmounted(() => {

src/composables/graph/useWidgetValue.ts

@@ -1,156 +0,0 @@
-/**
- * Composable for managing widget value synchronization between Vue and LiteGraph
- * Provides consistent pattern for immediate UI updates and LiteGraph callbacks
- */
-import { computed, toValue, ref, watch } from 'vue'
-import type { Ref } from 'vue'
-
-import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
-import type { MaybeRefOrGetter } from '@vueuse/core'
-
-interface UseWidgetValueOptions<T extends WidgetValue = WidgetValue, U = T> {
-  /** The widget configuration from LiteGraph */
-  widget: SimplifiedWidget<T>
-  /** The current value from parent component (can be a value or a getter function) */
-  modelValue: MaybeRefOrGetter<T>
-  /** Default value if modelValue is null/undefined */
-  defaultValue: T
-  /** Emit function from component setup */
-  emit: (event: 'update:modelValue', value: T) => void
-  /** Optional value transformer before sending to LiteGraph */
-  transform?: (value: U) => T
-}
-
-interface UseWidgetValueReturn<T extends WidgetValue = WidgetValue, U = T> {
-  /** Local value for immediate UI updates */
-  localValue: Ref<T>
-  /** Handler for user interactions */
-  onChange: (newValue: U) => void
-}
-
-/**
- * Manages widget value synchronization with LiteGraph
- *
- * @example
- * ```vue
- * const { localValue, onChange } = useWidgetValue({
- *   widget: props.widget,
- *   modelValue: props.modelValue,
- *   defaultValue: ''
- * })
- * ```
- */
-export function useWidgetValue<T extends WidgetValue = WidgetValue, U = T>({
-  widget,
-  modelValue,
-  defaultValue,
-  emit,
-  transform
-}: UseWidgetValueOptions<T, U>): UseWidgetValueReturn<T, U> {
-  // Ref for immediate UI feedback before value flows back through modelValue
-  const newProcessedValue = ref<T | null>(null)
-
-  // Computed that prefers the immediately processed value, then falls back to modelValue
-  const localValue = computed<T>(
-    () => newProcessedValue.value ?? toValue(modelValue) ?? defaultValue
-  )
-
-  // Clear newProcessedValue when modelValue updates (allowing external changes to flow through)
-  watch(
-    () => toValue(modelValue),
-    () => {
-      newProcessedValue.value = null
-    }
-  )
-
-  // Handle user changes
-  const onChange = (newValue: U) => {
-    // Handle different PrimeVue component signatures
-    let processedValue: T
-    if (transform) {
-      processedValue = transform(newValue)
-    } else {
-      // Ensure type safety - only cast when types are compatible
-      if (
-        typeof newValue === typeof defaultValue ||
-        newValue === null ||
-        newValue === undefined
-      ) {
-        processedValue = (newValue ?? defaultValue) as T
-      } else {
-        console.warn(
-          `useWidgetValue: Type mismatch for widget ${widget.name}. Expected ${typeof defaultValue}, got ${typeof newValue}`
-        )
-        processedValue = defaultValue
-      }
-    }
-
-    // Set for immediate UI feedback
-    newProcessedValue.value = processedValue
-
-    // Emit to parent component
-    emit('update:modelValue', processedValue)
-  }
-
-  return {
-    localValue: localValue as Ref<T>,
-    onChange
-  }
-}
-
-/**
- * Type-specific helper for string widgets
- */
-export function useStringWidgetValue(
-  widget: SimplifiedWidget<string>,
-  modelValue: string | (() => string),
-  emit: (event: 'update:modelValue', value: string) => void
-) {
-  return useWidgetValue({
-    widget,
-    modelValue,
-    defaultValue: '',
-    emit,
-    transform: (value: string | undefined) => String(value || '') // Handle undefined from PrimeVue
-  })
-}
-
-/**
- * Type-specific helper for number widgets
- */
-export function useNumberWidgetValue(
-  widget: SimplifiedWidget<number>,
-  modelValue: number | (() => number),
-  emit: (event: 'update:modelValue', value: number) => void
-) {
-  return useWidgetValue({
-    widget,
-    modelValue,
-    defaultValue: 0,
-    emit,
-    transform: (value: number | number[]) => {
-      // Handle PrimeVue Slider which can emit number | number[]
-      if (Array.isArray(value)) {
-        return value.length > 0 ? (value[0] ?? 0) : 0
-      }
-      return Number(value) || 0
-    }
-  })
-}
-
-/**
- * Type-specific helper for boolean widgets
- */
-export function useBooleanWidgetValue(
-  widget: SimplifiedWidget<boolean>,
-  modelValue: boolean | (() => boolean),
-  emit: (event: 'update:modelValue', value: boolean) => void
-) {
-  return useWidgetValue({
-    widget,
-    modelValue,
-    defaultValue: false,
-    emit,
-    transform: (value: boolean) => Boolean(value)
-  })
-}

src/composables/node/useNodePricing.ts

@@ -1537,6 +1537,8 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
           return '$0.00125/$0.01 per 1K tokens'
         } else if (model.includes('gemini-2.5-pro')) {
           return '$0.00125/$0.01 per 1K tokens'
+        } else if (model.includes('gemini-3-pro-preview')) {
+          return '$0.002/$0.012 per 1K tokens'
         }
         // For other Gemini models, show token-based pricing info
         return 'Token-based'

src/composables/queue/useCompletionSummary.ts

@@ -0,0 +1,116 @@
+import { computed, ref, watch } from 'vue'
+
+import { useExecutionStore } from '@/stores/executionStore'
+import { useQueueStore } from '@/stores/queueStore'
+import { jobStateFromTask } from '@/utils/queueUtil'
+
+export type CompletionSummaryMode = 'allSuccess' | 'mixed' | 'allFailed'
+
+export type CompletionSummary = {
+  mode: CompletionSummaryMode
+  completedCount: number
+  failedCount: number
+  thumbnailUrls: string[]
+}
+
+/**
+ * Tracks queue activity transitions and exposes a short-lived summary of the
+ * most recent generation batch.
+ */
+export const useCompletionSummary = () => {
+  const queueStore = useQueueStore()
+  const executionStore = useExecutionStore()
+
+  const isActive = computed(
+    () => queueStore.runningTasks.length > 0 || !executionStore.isIdle
+  )
+
+  const lastActiveStartTs = ref<number | null>(null)
+  const _summary = ref<CompletionSummary | null>(null)
+  const dismissTimer = ref<number | null>(null)
+
+  const clearDismissTimer = () => {
+    if (dismissTimer.value !== null) {
+      clearTimeout(dismissTimer.value)
+      dismissTimer.value = null
+    }
+  }
+
+  const startDismissTimer = () => {
+    clearDismissTimer()
+    dismissTimer.value = window.setTimeout(() => {
+      _summary.value = null
+      dismissTimer.value = null
+    }, 6000)
+  }
+
+  const clearSummary = () => {
+    _summary.value = null
+    clearDismissTimer()
+  }
+
+  watch(
+    isActive,
+    (active, prev) => {
+      if (!prev && active) {
+        lastActiveStartTs.value = Date.now()
+      }
+      if (prev && !active) {
+        const start = lastActiveStartTs.value ?? 0
+        const finished = queueStore.historyTasks.filter((t: any) => {
+          const ts: number | undefined = t.executionEndTimestamp
+          return typeof ts === 'number' && ts >= start
+        })
+
+        if (!finished.length) {
+          _summary.value = null
+          clearDismissTimer()
+          return
+        }
+
+        let completedCount = 0
+        let failedCount = 0
+        const imagePreviews: string[] = []
+
+        for (const task of finished) {
+          const state = jobStateFromTask(task, false)
+          if (state === 'completed') {
+            completedCount++
+            const preview = task.previewOutput
+            if (preview?.isImage) {
+              imagePreviews.push(preview.urlWithTimestamp)
+            }
+          } else if (state === 'failed') {
+            failedCount++
+          }
+        }
+
+        if (completedCount === 0 && failedCount === 0) {
+          _summary.value = null
+          clearDismissTimer()
+          return
+        }
+
+        let mode: CompletionSummaryMode = 'mixed'
+        if (failedCount === 0) mode = 'allSuccess'
+        else if (completedCount === 0) mode = 'allFailed'
+
+        _summary.value = {
+          mode,
+          completedCount,
+          failedCount,
+          thumbnailUrls: imagePreviews.slice(0, 3)
+        }
+        startDismissTimer()
+      }
+    },
+    { immediate: true }
+  )
+
+  const summary = computed(() => _summary.value)
+
+  return {
+    summary,
+    clearSummary
+  }
+}

src/composables/queue/useJobList.ts

@@ -0,0 +1,352 @@
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+import { st } from '@/i18n'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useExecutionStore } from '@/stores/executionStore'
+import { useQueueStore } from '@/stores/queueStore'
+import type { TaskItemImpl } from '@/stores/queueStore'
+import type { JobState } from '@/types/queue'
+import {
+  dateKey,
+  formatClockTime,
+  formatShortMonthDay,
+  isToday,
+  isYesterday
+} from '@/utils/dateTimeUtil'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+import { buildJobDisplay } from '@/utils/queueDisplay'
+import { jobStateFromTask } from '@/utils/queueUtil'
+
+/** Tabs for job list filtering */
+export const jobTabs = ['All', 'Completed', 'Failed'] as const
+export type JobTab = (typeof jobTabs)[number]
+
+export const jobSortModes = ['mostRecent', 'totalGenerationTime'] as const
+export type JobSortMode = (typeof jobSortModes)[number]
+
+/**
+ * UI item in the job list. Mirrors data previously prepared inline.
+ */
+export type JobListItem = {
+  id: string
+  title: string
+  meta: string
+  state: JobState
+  iconName?: string
+  iconImageUrl?: string
+  showClear?: boolean
+  taskRef?: any
+  progressTotalPercent?: number
+  progressCurrentPercent?: number
+  runningNodeName?: string
+  executionTimeMs?: number
+  computeHours?: number
+}
+
+export type JobGroup = {
+  key: string
+  label: string
+  items: JobListItem[]
+}
+
+const ADDED_HINT_DURATION_MS = 3000
+const relativeTimeFormatterCache = new Map<string, Intl.RelativeTimeFormat>()
+const taskIdToKey = (id: string | number | undefined) => {
+  if (id === null || id === undefined) return null
+  const key = String(id)
+  return key.length ? key : null
+}
+
+/**
+ * Returns localized Today/Yesterday (capitalized) or localized Mon DD.
+ */
+const dateLabelForTimestamp = (
+  ts: number,
+  locale: string,
+  relativeFormatter: Intl.RelativeTimeFormat
+) => {
+  const formatRelativeDay = (value: number) => {
+    const formatted = relativeFormatter.format(value, 'day')
+    return formatted
+      ? formatted[0].toLocaleUpperCase(locale) + formatted.slice(1)
+      : formatted
+  }
+  if (isToday(ts)) {
+    return formatRelativeDay(0)
+  }
+  if (isYesterday(ts)) {
+    return formatRelativeDay(-1)
+  }
+  return formatShortMonthDay(ts, locale)
+}
+
+type TaskWithState = {
+  task: TaskItemImpl
+  state: JobState
+}
+
+/**
+ * Builds the reactive job list, filters, and grouped view for the queue overlay.
+ */
+export function useJobList() {
+  const { t, locale } = useI18n()
+  const queueStore = useQueueStore()
+  const executionStore = useExecutionStore()
+  const workflowStore = useWorkflowStore()
+
+  const recentlyAddedPendingIds = ref<Set<string>>(new Set())
+  const addedHintTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+  const clearAddedHintTimeout = (id: string) => {
+    const timeoutId = addedHintTimeouts.get(id)
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId)
+      addedHintTimeouts.delete(id)
+    }
+  }
+
+  const scheduleAddedHintExpiry = (id: string) => {
+    clearAddedHintTimeout(id)
+    const timeoutId = setTimeout(() => {
+      addedHintTimeouts.delete(id)
+      const updated = new Set(recentlyAddedPendingIds.value)
+      if (updated.delete(id)) {
+        recentlyAddedPendingIds.value = updated
+      }
+    }, ADDED_HINT_DURATION_MS)
+    addedHintTimeouts.set(id, timeoutId)
+  }
+
+  watch(
+    () =>
+      queueStore.pendingTasks
+        .map((task) => taskIdToKey(task.promptId))
+        .filter((id): id is string => !!id),
+    (pendingIds) => {
+      const pendingSet = new Set(pendingIds)
+      const next = new Set(recentlyAddedPendingIds.value)
+
+      pendingIds.forEach((id) => {
+        if (!next.has(id)) {
+          next.add(id)
+          scheduleAddedHintExpiry(id)
+        }
+      })
+
+      for (const id of Array.from(next)) {
+        if (!pendingSet.has(id)) {
+          next.delete(id)
+          clearAddedHintTimeout(id)
+        }
+      }
+
+      recentlyAddedPendingIds.value = next
+    },
+    { immediate: true }
+  )
+
+  const shouldShowAddedHint = (task: TaskItemImpl, state: JobState) => {
+    if (state !== 'pending') return false
+    const id = taskIdToKey(task.promptId)
+    if (!id) return false
+    return recentlyAddedPendingIds.value.has(id)
+  }
+
+  onUnmounted(() => {
+    addedHintTimeouts.forEach((timeoutId) => clearTimeout(timeoutId))
+    addedHintTimeouts.clear()
+    recentlyAddedPendingIds.value = new Set<string>()
+  })
+
+  const { totalPercent, currentNodePercent } = useQueueProgress()
+
+  const relativeTimeFormatter = computed(() => {
+    const localeValue = locale.value
+    let formatter = relativeTimeFormatterCache.get(localeValue)
+    if (!formatter) {
+      formatter = new Intl.RelativeTimeFormat(localeValue, { numeric: 'auto' })
+      relativeTimeFormatterCache.set(localeValue, formatter)
+    }
+    return formatter
+  })
+  const undatedLabel = computed(() => t('queue.jobList.undated') || 'Undated')
+
+  const isJobInitializing = (promptId: string | number | undefined) =>
+    executionStore.isPromptInitializing(promptId)
+
+  const currentNodeName = computed(() => {
+    const node = executionStore.executingNode
+    if (!node) return t('g.emDash')
+    const title = (node.title ?? '').toString().trim()
+    if (title) return title
+    const nodeType = (node.type ?? '').toString().trim() || t('g.untitled')
+    const key = `nodeDefs.${normalizeI18nKey(nodeType)}.display_name`
+    return st(key, nodeType)
+  })
+
+  const selectedJobTab = ref<JobTab>('All')
+  const selectedWorkflowFilter = ref<'all' | 'current'>('all')
+  const selectedSortMode = ref<JobSortMode>('mostRecent')
+
+  const allTasksSorted = computed<TaskItemImpl[]>(() => {
+    const all = [
+      ...queueStore.pendingTasks,
+      ...queueStore.runningTasks,
+      ...queueStore.historyTasks
+    ]
+    return all.sort((a, b) => b.queueIndex - a.queueIndex)
+  })
+
+  const tasksWithJobState = computed<TaskWithState[]>(() =>
+    allTasksSorted.value.map((task) => ({
+      task,
+      state: jobStateFromTask(task, isJobInitializing(task?.promptId))
+    }))
+  )
+
+  const hasFailedJobs = computed(() =>
+    tasksWithJobState.value.some(({ state }) => state === 'failed')
+  )
+
+  watch(
+    () => hasFailedJobs.value,
+    (hasFailed) => {
+      if (!hasFailed && selectedJobTab.value === 'Failed') {
+        selectedJobTab.value = 'All'
+      }
+    }
+  )
+
+  const filteredTaskEntries = computed<TaskWithState[]>(() => {
+    let entries = tasksWithJobState.value
+    if (selectedJobTab.value === 'Completed') {
+      entries = entries.filter(({ state }) => state === 'completed')
+    } else if (selectedJobTab.value === 'Failed') {
+      entries = entries.filter(({ state }) => state === 'failed')
+    }
+
+    if (selectedWorkflowFilter.value === 'current') {
+      const activeId = workflowStore.activeWorkflow?.activeState?.id
+      if (!activeId) return []
+      entries = entries.filter(({ task }) => {
+        const wid = task.workflow?.id
+        return !!wid && wid === activeId
+      })
+    }
+    return entries
+  })
+
+  const filteredTasks = computed<TaskItemImpl[]>(() =>
+    filteredTaskEntries.value.map(({ task }) => task)
+  )
+
+  const jobItems = computed<JobListItem[]>(() => {
+    return filteredTaskEntries.value.map(({ task, state }) => {
+      const isActive =
+        String(task.promptId ?? '') ===
+        String(executionStore.activePromptId ?? '')
+      const showAddedHint = shouldShowAddedHint(task, state)
+
+      const display = buildJobDisplay(task, state, {
+        t,
+        locale: locale.value,
+        formatClockTimeFn: formatClockTime,
+        isActive,
+        totalPercent: isActive ? totalPercent.value : undefined,
+        currentNodePercent: isActive ? currentNodePercent.value : undefined,
+        currentNodeName: isActive ? currentNodeName.value : undefined,
+        showAddedHint
+      })
+
+      return {
+        id: String(task.promptId),
+        title: display.primary,
+        meta: display.secondary,
+        state,
+        iconName: display.iconName,
+        iconImageUrl: display.iconImageUrl,
+        showClear: display.showClear,
+        taskRef: task,
+        progressTotalPercent:
+          state === 'running' && isActive ? totalPercent.value : undefined,
+        progressCurrentPercent:
+          state === 'running' && isActive
+            ? currentNodePercent.value
+            : undefined,
+        runningNodeName:
+          state === 'running' && isActive ? currentNodeName.value : undefined,
+        executionTimeMs: task.executionTime,
+        computeHours:
+          task.executionTime !== undefined
+            ? task.executionTime / 3_600_000
+            : undefined
+      } as JobListItem
+    })
+  })
+
+  const jobItemById = computed(() => {
+    const m = new Map<string, JobListItem>()
+    jobItems.value.forEach((ji) => m.set(ji.id, ji))
+    return m
+  })
+
+  const groupedJobItems = computed<JobGroup[]>(() => {
+    const groups: JobGroup[] = []
+    const index = new Map<string, number>()
+    const localeValue = locale.value
+    for (const { task, state } of filteredTaskEntries.value) {
+      let ts: number | undefined
+      if (state === 'completed' || state === 'failed') {
+        ts = task.executionEndTimestamp
+      } else {
+        ts = task.createTime
+      }
+      const key = ts === undefined ? 'undated' : dateKey(ts)
+      let groupIdx = index.get(key)
+      if (groupIdx === undefined) {
+        const label =
+          ts === undefined
+            ? undatedLabel.value
+            : dateLabelForTimestamp(
+                ts,
+                localeValue,
+                relativeTimeFormatter.value
+              )
+        groups.push({ key, label, items: [] })
+        groupIdx = groups.length - 1
+        index.set(key, groupIdx)
+      }
+      const ji = jobItemById.value.get(String(task.promptId))
+      if (ji) groups[groupIdx].items.push(ji)
+    }
+
+    if (selectedSortMode.value === 'totalGenerationTime') {
+      const valueOrDefault = (value: JobListItem['executionTimeMs']) =>
+        typeof value === 'number' && !Number.isNaN(value) ? value : -1
+      const sortByExecutionTimeDesc = (a: JobListItem, b: JobListItem) =>
+        valueOrDefault(b.executionTimeMs) - valueOrDefault(a.executionTimeMs)
+
+      groups.forEach((group) => {
+        group.items.sort(sortByExecutionTimeDesc)
+      })
+    }
+
+    return groups
+  })
+
+  return {
+    // filters/state
+    selectedJobTab,
+    selectedWorkflowFilter,
+    selectedSortMode,
+    hasFailedJobs,
+    // data sources
+    allTasksSorted,
+    filteredTasks,
+    jobItems,
+    groupedJobItems,
+    currentNodeName
+  }
+}

src/composables/queue/useJobMenu.ts

@@ -0,0 +1,356 @@
+import { computed } from 'vue'
+
+import { downloadFile } from '@/base/common/downloadUtil'
+import type { JobListItem } from '@/composables/queue/useJobList'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { st, t } from '@/i18n'
+import { mapTaskOutputToAssetItem } from '@/platform/assets/composables/media/assetMappers'
+import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type {
+  ExecutionErrorWsMessage,
+  ResultItem,
+  ResultItemType
+} from '@/schemas/apiSchema'
+import { api } from '@/scripts/api'
+import { downloadBlob } from '@/scripts/utils'
+import { useDialogService } from '@/services/dialogService'
+import { useLitegraphService } from '@/services/litegraphService'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useQueueStore } from '@/stores/queueStore'
+import type { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
+import { createAnnotatedPath } from '@/utils/createAnnotatedPath'
+import { appendJsonExt } from '@/utils/formatUtil'
+
+export type MenuEntry =
+  | {
+      kind?: 'item'
+      key: string
+      label: string
+      icon?: string
+      onClick?: () => void | Promise<void>
+    }
+  | { kind: 'divider'; key: string }
+
+/**
+ * Provides job context menu entries and actions.
+ *
+ * @param currentMenuItem Getter for the currently targeted job list item
+ * @param onInspectAsset Callback to trigger when inspecting a completed job's asset
+ */
+export function useJobMenu(
+  currentMenuItem: () => JobListItem | null,
+  onInspectAsset?: (item: JobListItem) => void
+) {
+  const workflowStore = useWorkflowStore()
+  const workflowService = useWorkflowService()
+  const queueStore = useQueueStore()
+  const { copyToClipboard } = useCopyToClipboard()
+  const litegraphService = useLitegraphService()
+  const nodeDefStore = useNodeDefStore()
+  const mediaAssetActions = useMediaAssetActions()
+
+  const openJobWorkflow = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const data = item.taskRef?.workflow
+    if (!data) return
+    const filename = `Job ${item.id}.json`
+    const temp = workflowStore.createTemporary(filename, data)
+    await workflowService.openWorkflow(temp)
+  }
+
+  const copyJobId = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    await copyToClipboard(item.id)
+  }
+
+  const cancelJob = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    if (item.state === 'running' || item.state === 'initialization') {
+      await api.interrupt(item.id)
+    } else if (item.state === 'pending') {
+      await api.deleteItem('queue', item.id)
+    }
+    await queueStore.update()
+  }
+
+  const copyErrorMessage = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const msgs = item.taskRef?.status?.messages as any[] | undefined
+    const err = msgs?.find((m: any) => m?.[0] === 'execution_error')?.[1] as
+      | ExecutionErrorWsMessage
+      | undefined
+    const message = err?.exception_message
+    if (message) await copyToClipboard(String(message))
+  }
+
+  const reportError = () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const msgs = item.taskRef?.status?.messages as any[] | undefined
+    const err = msgs?.find((m: any) => m?.[0] === 'execution_error')?.[1] as
+      | ExecutionErrorWsMessage
+      | undefined
+    if (err) useDialogService().showExecutionErrorDialog(err)
+  }
+
+  // This is very magical only because it matches the respective backend implementation
+  // There is or will be a better way to do this
+  const addOutputLoaderNode = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
+    if (!result) return
+
+    let nodeType: 'LoadImage' | 'LoadVideo' | 'LoadAudio' | null = null
+    let widgetName: 'image' | 'file' | 'audio' | null = null
+    if (result.isImage) {
+      nodeType = 'LoadImage'
+      widgetName = 'image'
+    } else if (result.isVideo) {
+      nodeType = 'LoadVideo'
+      widgetName = 'file'
+    } else if (result.isAudio) {
+      nodeType = 'LoadAudio'
+      widgetName = 'audio'
+    }
+    if (!nodeType || !widgetName) return
+
+    const nodeDef = nodeDefStore.nodeDefsByName[nodeType]
+    if (!nodeDef) return
+    const node = litegraphService.addNodeOnGraph(nodeDef, {
+      pos: litegraphService.getCanvasCenter()
+    })
+
+    if (!node) return
+
+    const isResultItemType = (v: string | undefined): v is ResultItemType =>
+      v === 'input' || v === 'output' || v === 'temp'
+
+    const apiItem: ResultItem = {
+      filename: result.filename,
+      subfolder: result.subfolder,
+      type: isResultItemType(result.type) ? result.type : undefined
+    }
+
+    const annotated = createAnnotatedPath(apiItem, {
+      rootFolder: apiItem.type
+    })
+    const widget = node.widgets?.find((w) => w.name === widgetName)
+    if (widget) {
+      widget.value = annotated
+      widget.callback?.(annotated)
+    }
+    node.graph?.setDirtyCanvas(true, true)
+  }
+
+  /**
+   * Trigger a download of the job's previewable output asset.
+   */
+  const downloadPreviewAsset = () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const result: ResultItemImpl | undefined = item.taskRef?.previewOutput
+    if (!result) return
+    downloadFile(result.url)
+  }
+
+  /**
+   * Export the workflow JSON attached to the job.
+   */
+  const exportJobWorkflow = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const data = item.taskRef?.workflow
+    if (!data) return
+
+    const settingStore = useSettingStore()
+    let filename = `Job ${item.id}.json`
+
+    if (settingStore.get('Comfy.PromptFilename')) {
+      const input = await useDialogService().prompt({
+        title: t('workflowService.exportWorkflow'),
+        message: t('workflowService.enterFilename') + ':',
+        defaultValue: filename
+      })
+      if (!input) return
+      filename = appendJsonExt(input)
+    }
+
+    const json = JSON.stringify(data, null, 2)
+    const blob = new Blob([json], { type: 'application/json' })
+    downloadBlob(filename, blob)
+  }
+
+  const deleteJobAsset = async () => {
+    const item = currentMenuItem()
+    if (!item) return
+    const task = item.taskRef as TaskItemImpl | undefined
+    const preview = task?.previewOutput
+    if (!task || !preview) return
+
+    const asset = mapTaskOutputToAssetItem(task, preview)
+    const success = await mediaAssetActions.confirmDelete(asset)
+    if (success) {
+      await queueStore.update()
+    }
+  }
+
+  const removeFailedJob = async () => {
+    const task = currentMenuItem()?.taskRef as TaskItemImpl | undefined
+    if (!task) return
+    await queueStore.delete(task)
+  }
+
+  const jobMenuOpenWorkflowLabel = computed(() =>
+    st('queue.jobMenu.openAsWorkflowNewTab', 'Open as workflow in new tab')
+  )
+  const jobMenuOpenWorkflowFailedLabel = computed(() =>
+    st('queue.jobMenu.openWorkflowNewTab', 'Open workflow in new tab')
+  )
+  const jobMenuCopyJobIdLabel = computed(() =>
+    st('queue.jobMenu.copyJobId', 'Copy job ID')
+  )
+  const jobMenuCancelLabel = computed(() =>
+    st('queue.jobMenu.cancelJob', 'Cancel job')
+  )
+
+  const jobMenuEntries = computed<MenuEntry[]>(() => {
+    const item = currentMenuItem()
+    const state = item?.state
+    if (!state) return []
+    const hasDeletableAsset = !!item?.taskRef?.previewOutput
+    if (state === 'completed') {
+      return [
+        {
+          key: 'inspect-asset',
+          label: st('queue.jobMenu.inspectAsset', 'Inspect asset'),
+          icon: 'icon-[lucide--zoom-in]',
+          onClick: onInspectAsset
+            ? () => {
+                const item = currentMenuItem()
+                if (item) onInspectAsset(item)
+              }
+            : undefined
+        },
+        {
+          key: 'add-to-current',
+          label: st(
+            'queue.jobMenu.addToCurrentWorkflow',
+            'Add to current workflow'
+          ),
+          icon: 'icon-[comfy--node]',
+          onClick: addOutputLoaderNode
+        },
+        {
+          key: 'download',
+          label: st('queue.jobMenu.download', 'Download'),
+          icon: 'icon-[lucide--download]',
+          onClick: downloadPreviewAsset
+        },
+        { kind: 'divider', key: 'd1' },
+        {
+          key: 'open-workflow',
+          label: jobMenuOpenWorkflowLabel.value,
+          icon: 'icon-[comfy--workflow]',
+          onClick: openJobWorkflow
+        },
+        {
+          key: 'export-workflow',
+          label: st('queue.jobMenu.exportWorkflow', 'Export workflow'),
+          icon: 'icon-[comfy--file-output]',
+          onClick: exportJobWorkflow
+        },
+        { kind: 'divider', key: 'd2' },
+        {
+          key: 'copy-id',
+          label: jobMenuCopyJobIdLabel.value,
+          icon: 'icon-[lucide--copy]',
+          onClick: copyJobId
+        },
+        { kind: 'divider', key: 'd3' },
+        ...(hasDeletableAsset
+          ? [
+              {
+                key: 'delete',
+                label: st('queue.jobMenu.deleteAsset', 'Delete asset'),
+                icon: 'icon-[lucide--trash-2]',
+                onClick: deleteJobAsset
+              }
+            ]
+          : [])
+      ]
+    }
+    if (state === 'failed') {
+      return [
+        {
+          key: 'open-workflow',
+          label: jobMenuOpenWorkflowFailedLabel.value,
+          icon: 'icon-[comfy--workflow]',
+          onClick: openJobWorkflow
+        },
+        { kind: 'divider', key: 'd1' },
+        {
+          key: 'copy-id',
+          label: jobMenuCopyJobIdLabel.value,
+          icon: 'icon-[lucide--copy]',
+          onClick: copyJobId
+        },
+        {
+          key: 'copy-error',
+          label: st('queue.jobMenu.copyErrorMessage', 'Copy error message'),
+          icon: 'icon-[lucide--copy]',
+          onClick: copyErrorMessage
+        },
+        {
+          key: 'report-error',
+          label: st('queue.jobMenu.reportError', 'Report error'),
+          icon: 'icon-[lucide--message-circle-warning]',
+          onClick: reportError
+        },
+        { kind: 'divider', key: 'd2' },
+        {
+          key: 'delete',
+          label: st('queue.jobMenu.removeJob', 'Remove job'),
+          icon: 'icon-[lucide--circle-minus]',
+          onClick: removeFailedJob
+        }
+      ]
+    }
+    return [
+      {
+        key: 'open-workflow',
+        label: jobMenuOpenWorkflowLabel.value,
+        icon: 'icon-[comfy--workflow]',
+        onClick: openJobWorkflow
+      },
+      { kind: 'divider', key: 'd1' },
+      {
+        key: 'copy-id',
+        label: jobMenuCopyJobIdLabel.value,
+        icon: 'icon-[lucide--copy]',
+        onClick: copyJobId
+      },
+      { kind: 'divider', key: 'd2' },
+      {
+        key: 'cancel-job',
+        label: jobMenuCancelLabel.value,
+        icon: 'icon-[lucide--x]',
+        onClick: cancelJob
+      }
+    ]
+  })
+
+  return {
+    jobMenuEntries,
+    openJobWorkflow,
+    copyJobId,
+    cancelJob
+  }
+}

src/composables/queue/useQueueProgress.ts

@@ -0,0 +1,50 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useExecutionStore } from '@/stores/executionStore'
+import { clampPercentInt, formatPercent0 } from '@/utils/numberUtil'
+
+/**
+ * Queue progress composable exposing total/current node progress values and styles.
+ */
+export function useQueueProgress() {
+  const { locale } = useI18n()
+  const executionStore = useExecutionStore()
+
+  const totalPercent = computed(() =>
+    clampPercentInt(Math.round((executionStore.executionProgress ?? 0) * 100))
+  )
+
+  const totalPercentFormatted = computed(() =>
+    formatPercent0(locale.value, totalPercent.value)
+  )
+
+  const currentNodePercent = computed(() =>
+    clampPercentInt(
+      Math.round((executionStore.executingNodeProgress ?? 0) * 100)
+    )
+  )
+
+  const currentNodePercentFormatted = computed(() =>
+    formatPercent0(locale.value, currentNodePercent.value)
+  )
+
+  const totalProgressStyle = computed(() => ({
+    width: `${totalPercent.value}%`,
+    background: 'var(--color-interface-panel-job-progress-primary)'
+  }))
+
+  const currentNodeProgressStyle = computed(() => ({
+    width: `${currentNodePercent.value}%`,
+    background: 'var(--color-interface-panel-job-progress-secondary)'
+  }))
+
+  return {
+    totalPercent,
+    totalPercentFormatted,
+    currentNodePercent,
+    currentNodePercentFormatted,
+    totalProgressStyle,
+    currentNodeProgressStyle
+  }
+}

src/composables/queue/useResultGallery.ts

@@ -0,0 +1,32 @@
+import { ref, shallowRef } from 'vue'
+
+import type { JobListItem } from '@/composables/queue/useJobList'
+import type { ResultItemImpl } from '@/stores/queueStore'
+
+/**
+ * Manages result gallery state and activation for queue items.
+ */
+export function useResultGallery(getFilteredTasks: () => any[]) {
+  const galleryActiveIndex = ref(-1)
+  const galleryItems = shallowRef<ResultItemImpl[]>([])
+
+  const onViewItem = (item: JobListItem) => {
+    const items: ResultItemImpl[] = getFilteredTasks().flatMap((t: any) => {
+      const preview = t.previewOutput
+      return preview && preview.supportsPreview ? [preview] : []
+    })
+
+    if (!items.length) return
+
+    galleryItems.value = items
+    const activeUrl: string | undefined = item.taskRef?.previewOutput?.url
+    const idx = activeUrl ? items.findIndex((o) => o.url === activeUrl) : 0
+    galleryActiveIndex.value = idx >= 0 ? idx : 0
+  }
+
+  return {
+    galleryActiveIndex,
+    galleryItems,
+    onViewItem
+  }
+}

src/composables/useTooltipConfig.ts

@@ -0,0 +1,18 @@
+/**
+ * Build a tooltip configuration object compatible with v-tooltip.
+ * Consumers pass the translated text value.
+ */
+export const buildTooltipConfig = (value: string) => ({
+  value,
+  showDelay: 300,
+  hideDelay: 0,
+  pt: {
+    text: {
+      class:
+        'border-node-component-tooltip-border bg-node-component-tooltip-surface text-node-component-tooltip border rounded-md px-2 py-1 text-xs leading-none shadow-none'
+    },
+    arrow: {
+      class: 'border-t-node-component-tooltip-border'
+    }
+  }
+})

src/extensions/core/previewAny.ts

@@ -22,9 +22,12 @@ useExtensionService().registerExtension({
           'preview',
           ['STRING', { multiline: true }],
           app
-        ).widget as DOMWidget<any, any>
+        ).widget as DOMWidget<HTMLTextAreaElement, string>
+
+        showValueWidget.options.read_only = true
 
         showValueWidget.element.readOnly = true
+        showValueWidget.element.disabled = true
 
         showValueWidget.serialize = false
       }

src/locales/ar/main.json

@@ -155,13 +155,6 @@
     "duplicate": "تكرار",
     "enterNewName": "أدخل اسمًا جديدًا"
   },
-  "chatHistory": {
-    "cancelEdit": "إلغاء",
-    "cancelEditTooltip": "إلغاء التعديل",
-    "copiedTooltip": "تم النسخ",
-    "copyTooltip": "نسخ الرسالة إلى الحافظة",
-    "editTooltip": "تعديل الرسالة"
-  },
   "clipboard": {
     "errorMessage": "فشل النسخ إلى الحافظة",
     "errorNotSupported": "API الحافظة غير مدعوم في متصفحك",
@@ -965,13 +958,6 @@
       "title": "عارض ثلاثي الأبعاد (بيتا)"
     }
   },
-  "loadWorkflowWarning": {
-    "coreNodesFromVersion": "يتطلب ComfyUI {version}:",
-    "missingNodesDescription": "عند تحميل الرسم البياني، لم يتم العثور على العقد التالية.\nقد يحدث هذا أيضًا إذا كانت إصدار التثبيت المثبت أقل وأن هذا النوع من العقد غير موجود.",
-    "missingNodesTitle": "بعض العقد مفقودة",
-    "outdatedVersion": "بعض العقد تتطلب إصدار أحدث من ComfyUI (الحالي: {version}). يرجى التحديث لاستخدام جميع العقد.",
-    "outdatedVersionGeneric": "بعض العقد تتطلب إصدار أحدث من ComfyUI. يرجى التحديث لاستخدام جميع العقد."
-  },
   "maintenance": {
     "None": "لا شيء",
     "OK": "حسنًا",
@@ -1101,29 +1087,6 @@
     "version": "الإصدار"
   },
   "maskEditor": {
-    "Apply to Whole Image": "تطبيق على كامل الصورة",
-    "Brush Settings": "إعدادات الفرشاة",
-    "Brush Shape": "شكل الفرشاة",
-    "Clear": "مسح",
-    "Color Select Settings": "إعدادات اختيار اللون",
-    "Fill Opacity": "شفافية التعبئة",
-    "Hardness": "الصلابة",
-    "Image Layer": "طبقة الصورة",
-    "Invert": "عكس",
-    "Layers": "الطبقات",
-    "Live Preview": "معاينة حية",
-    "Mask Layer": "طبقة القناع",
-    "Mask Opacity": "شفافية القناع",
-    "Mask Tolerance": "تسامح القناع",
-    "Method": "الطريقة",
-    "Opacity": "الشفافية",
-    "Paint Bucket Settings": "إعدادات دلو الطلاء",
-    "Reset to Default": "إعادة إلى الافتراضي",
-    "Selection Opacity": "شفافية التحديد",
-    "Smoothing Precision": "دقة التنعيم",
-    "Stop at mask": "التوقف عند القناع",
-    "Thickness": "السماكة",
-    "Tolerance": "التسامح"
   },
   "mediaAsset": {
     "assetDeletedSuccessfully": "تم حذف الأصل بنجاح",
@@ -1189,7 +1152,6 @@
     "Canvas Performance": "أداء اللوحة",
     "Canvas Toggle Lock": "تبديل قفل اللوحة",
     "Check for Custom Node Updates": "التحقق من تحديثات العقد المخصصة",
-    "Check for Updates": "التحقق من التحديثات",
     "Clear Pending Tasks": "مسح المهام المعلقة",
     "Clear Workflow": "مسح سير العمل",
     "Clipspace": "مساحة القص",
@@ -1206,7 +1168,6 @@
     "Custom Nodes Manager": "مدير العقد المخصصة",
     "Decrease Brush Size in MaskEditor": "تقليل حجم الفرشاة في محرر القناع",
     "Delete Selected Items": "حذف العناصر المحددة",
-    "Desktop User Guide": "دليل المستخدم لسطح المكتب",
     "Duplicate Current Workflow": "نسخ سير العمل الحالي",
     "Edit": "تحرير",
     "Edit Subgraph Widgets": "تحرير عناصر واجهة المستخدم للرسم البياني الفرعي",
@@ -1243,15 +1204,8 @@
     "Node Links": "روابط العقد",
     "Open": "فتح",
     "Open 3D Viewer (Beta) for Selected Node": "فتح عارض ثلاثي الأبعاد (بيتا) للعقدة المحددة",
-    "Open Custom Nodes Folder": "فتح مجلد العقد المخصصة",
-    "Open DevTools": "فتح أدوات المطور",
-    "Open Inputs Folder": "فتح مجلد المدخلات",
-    "Open Logs Folder": "فتح مجلد السجلات",
     "Open Mask Editor for Selected Node": "فتح محرر القناع للعقدة المحددة",
-    "Open Models Folder": "فتح مجلد النماذج",
-    "Open Outputs Folder": "فتح مجلد المخرجات",
     "Open Sign In Dialog": "فتح نافذة تسجيل الدخول",
-    "Open extra_model_paths_yaml": "فتح ملف extra_model_paths.yaml",
     "Pin/Unpin Selected Items": "تثبيت/إلغاء تثبيت العناصر المحددة",
     "Pin/Unpin Selected Nodes": "تثبيت/إلغاء تثبيت العقد المحددة",
     "Previous Opened Workflow": "سير العمل السابق المفتوح",
@@ -1260,13 +1214,10 @@
     "Queue Prompt": "قائمة انتظار التعليمات",
     "Queue Prompt (Front)": "قائمة انتظار التعليمات (أمامي)",
     "Queue Selected Output Nodes": "قائمة انتظار عقد المخرجات المحددة",
-    "Quit": "خروج",
     "Redo": "إعادة",
     "Refresh Node Definitions": "تحديث تعريفات العقد",
-    "Reinstall": "إعادة التثبيت",
     "Reset View": "إعادة تعيين العرض",
     "Resize Selected Nodes": "تغيير حجم العقد المحددة",
-    "Restart": "إعادة التشغيل",
     "Save": "حفظ",
     "Save As": "حفظ باسم",
     "Show Keybindings Dialog": "عرض مربع حوار اختصارات لوحة المفاتيح",

src/locales/en/commands.json

@@ -1,40 +1,4 @@
 {
-  "Comfy-Desktop_CheckForUpdates": {
-    "label": "Check for Updates"
-  },
-  "Comfy-Desktop_Folders_OpenCustomNodesFolder": {
-    "label": "Open Custom Nodes Folder"
-  },
-  "Comfy-Desktop_Folders_OpenInputsFolder": {
-    "label": "Open Inputs Folder"
-  },
-  "Comfy-Desktop_Folders_OpenLogsFolder": {
-    "label": "Open Logs Folder"
-  },
-  "Comfy-Desktop_Folders_OpenModelConfig": {
-    "label": "Open extra_model_paths.yaml"
-  },
-  "Comfy-Desktop_Folders_OpenModelsFolder": {
-    "label": "Open Models Folder"
-  },
-  "Comfy-Desktop_Folders_OpenOutputsFolder": {
-    "label": "Open Outputs Folder"
-  },
-  "Comfy-Desktop_OpenDevTools": {
-    "label": "Open DevTools"
-  },
-  "Comfy-Desktop_OpenUserGuide": {
-    "label": "Desktop User Guide"
-  },
-  "Comfy-Desktop_Quit": {
-    "label": "Quit"
-  },
-  "Comfy-Desktop_Reinstall": {
-    "label": "Reinstall"
-  },
-  "Comfy-Desktop_Restart": {
-    "label": "Restart"
-  },
   "Comfy_3DViewer_Open3DViewer": {
     "label": "Open 3D Viewer (Beta) for Selected Node"
   },

src/locales/en/main.json

@@ -71,6 +71,7 @@
     "info": "Node Info",
     "bookmark": "Save to Library",
     "moreOptions": "More Options",
+    "more": "More",
     "loading": "Loading",
     "loadingPanel": "Loading {panel} panel...",
     "preview": "PREVIEW",
@@ -170,6 +171,13 @@
     "inProgress": "In progress",
     "completed": "Completed",
     "interrupted": "Interrupted",
+    "queued": "Queued",
+    "running": "Running",
+    "failed": "Failed",
+    "cancelled": "Cancelled",
+    "job": "Job",
+    "untitled": "Untitled",
+    "emDash": "—",
     "enabling": "Enabling {id}",
     "disabling": "Disabling {id}",
     "updating": "Updating {id}",
@@ -496,6 +504,8 @@
     "cannotWrite": "Unable to write to the selected path",
     "insufficientFreeSpace": "Insufficient space - minimum free space",
     "isOneDrive": "OneDrive is not supported. Please install ComfyUI in another location.",
+    "insideAppInstallDir": "This folder is inside the ComfyUI Desktop application bundle and will be deleted during updates. Choose a directory outside the install folder, such as Documents/ComfyUI.",
+    "insideUpdaterCache": "This folder is inside the ComfyUI updater cache, which is cleared on every update. Select a different location for your data.",
     "nonDefaultDrive": "Please install ComfyUI on your system drive (eg. C:\\). Drives with different file systems may cause unpredicable issues. Models and other files can be stored on other drives after installation.",
     "parentMissing": "Path does not exist - create the containing directory first",
     "unhandledError": "Unknown error",
@@ -683,6 +693,40 @@
         "hideCanceled": "Hide Canceled"
       }
     },
+    "queueProgressOverlay": {
+      "title": "Queue Progress",
+      "total": "Total: {percent}",
+      "colonPercent": ": {percent}",
+      "currentNode": "Current node:",
+      "viewAllJobs": "View all jobs",
+      "running": "running",
+      "interruptAll": "Interrupt all running jobs",
+      "moreOptions": "More options",
+      "showAssets": "Show assets",
+      "showAssetsPanel": "Show assets panel",
+      "queuedSuffix": "queued",
+      "clearQueued": "Clear queued",
+      "clearHistory": "Clear job queue history",
+      "filterJobs": "Filter jobs",
+      "filterBy": "Filter by",
+      "filterAllWorkflows": "All workflows",
+      "filterCurrentWorkflow": "Current workflow",
+      "sortJobs": "Sort jobs",
+      "sortBy": "Sort by",
+      "activeJobsSuffix": "active jobs",
+      "jobQueue": "Job Queue",
+      "expandCollapsedQueue": "Expand job queue",
+      "viewJobHistory": "View job history",
+      "noActiveJobs": "No active jobs",
+      "stubClipTextEncode": "CLIP Text Encode:",
+      "jobsCompleted": "{count} job completed | {count} jobs completed",
+      "jobsFailed": "{count} job failed | {count} jobs failed",
+      "cancelJobTooltip": "Cancel job",
+      "clearQueueTooltip": "Clear queue",
+      "clearHistoryDialogTitle": "Clear your job queue history?",
+      "clearHistoryDialogDescription": "All the finished or failed jobs below will be removed from this Job queue panel.",
+      "clearHistoryDialogAssetsNote": "Assets generated by these jobs won’t be deleted and can always be viewed from the assets panel."
+    },
     "workflowTab": {
       "confirmDeleteTitle": "Delete workflow?",
       "confirmDelete": "Are you sure you want to delete this workflow?",
@@ -737,6 +781,7 @@
     "onChangeTooltip": "The workflow will be queued once a change is made",
     "runWorkflow": "Run workflow (Shift to queue at front)",
     "runWorkflowFront": "Run workflow (Queue at front)",
+    "runWorkflowDisabled": "Workflow contains unsupported nodes (highlighted red). Remove these to run the workflow.",
     "run": "Run",
     "execute": "Execute",
     "interrupt": "Cancel current run",
@@ -940,23 +985,60 @@
     "help": "Help",
     "queue": "Queue Panel"
   },
+  "queue": {
+    "initializingAlmostReady": "Initializing - Almost ready",
+    "inQueue": "In queue...",
+    "jobAddedToQueue": "Job added to queue",
+    "jobMenu": {
+      "openAsWorkflowNewTab": "Open as workflow in new tab",
+      "openWorkflowNewTab": "Open workflow in new tab",
+      "copyJobId": "Copy job ID",
+      "cancelJob": "Cancel job",
+      "inspectAsset": "Inspect asset",
+      "addToCurrentWorkflow": "Add to current workflow",
+      "download": "Download",
+      "exportWorkflow": "Export workflow",
+      "delete": "Delete",
+      "deleteAsset": "Delete asset",
+      "removeJob": "Remove job",
+      "copyErrorMessage": "Copy error message",
+      "reportError": "Report error"
+    },
+    "jobList": {
+      "undated": "Undated",
+      "sortMostRecent": "Most recent",
+      "sortTotalGenerationTime": "Total generation time (longest first)",
+      "sortComputeHoursUsed": "Compute hours used (most first)"
+    },
+    "jobDetails": {
+      "header": "Job Details",
+      "workflow": "Workflow",
+      "jobId": "Job ID",
+      "queuedAt": "Queued at",
+      "queuePosition": "Queue position",
+      "timeElapsed": "Time elapsed",
+      "estimatedStartIn": "Estimated to start in",
+      "estimatedFinishIn": "Estimated to finish in",
+      "generatedOn": "Generated on",
+      "totalGenerationTime": "Total generation time",
+      "computeHoursUsed": "Compute hours used",
+      "failedAfter": "Failed after",
+      "errorMessage": "Error message",
+      "report": "Report",
+      "queuePositionValue": "~{count} job ahead of yours | ~{count} jobs ahead of yours",
+      "eta": {
+        "seconds": "~{count} second | ~{count} seconds",
+        "secondsRange": "~{lo}-{hi} seconds",
+        "minutes": "~{count} minute | ~{count} minutes",
+        "minutesRange": "~{lo}-{hi} minutes"
+      }
+    }
+  },
   "menuLabels": {
     "File": "File",
     "Edit": "Edit",
     "View": "View",
     "Help": "Help",
-    "Check for Updates": "Check for Updates",
-    "Open Custom Nodes Folder": "Open Custom Nodes Folder",
-    "Open Inputs Folder": "Open Inputs Folder",
-    "Open Logs Folder": "Open Logs Folder",
-    "Open extra_model_paths_yaml": "Open extra_model_paths.yaml",
-    "Open Models Folder": "Open Models Folder",
-    "Open Outputs Folder": "Open Outputs Folder",
-    "Open DevTools": "Open DevTools",
-    "Desktop User Guide": "Desktop User Guide",
-    "Quit": "Quit",
-    "Reinstall": "Reinstall",
-    "Restart": "Restart",
     "Open 3D Viewer (Beta) for Selected Node": "Open 3D Viewer (Beta) for Selected Node",
     "Experimental: Browse Model Assets": "Experimental: Browse Model Assets",
     "Browse Templates": "Browse Templates",
@@ -1335,6 +1417,7 @@
     "Tripo": "Tripo",
     "Veo": "Veo",
     "Vidu": "Vidu",
+    "": "",
     "camera": "camera",
     "Wan": "Wan"
   },
@@ -1416,6 +1499,14 @@
       "taskFailed": "Task failed to run.",
       "cannotContinue": "Unable to continue - errors remain",
       "defaultDescription": "An error occurred while running a maintenance task."
+    },
+    "unsafeMigration": {
+      "title": "Unsafe install location detected",
+      "generic": "Your current ComfyUI base path is in a location that may be deleted or modified during updates. To avoid data loss, move it to a safe folder.",
+      "appInstallDir": "Your base path is inside the ComfyUI Desktop application bundle. This folder may be deleted or overwritten during updates. Choose a directory outside the install folder, such as Documents/ComfyUI.",
+      "updaterCache": "Your base path is inside the ComfyUI updater cache, which is cleared on each update. Choose a different location for your data.",
+      "oneDrive": "Your base path is on OneDrive, which can cause sync issues and accidental data loss. Choose a local folder that is not managed by OneDrive.",
+      "action": "Use the \"Base path\" maintenance task below to move ComfyUI to a safe location."
     }
   },
   "missingModelsDialog": {
@@ -1836,7 +1927,8 @@
     "clearWorkflow": "Clear Workflow",
     "deleteWorkflow": "Delete Workflow",
     "deleteBlueprint": "Delete Blueprint",
-    "enterNewName": "Enter new name"
+    "enterNewName": "Enter new name",
+    "missingNodesWarning": "Workflow contains unsupported nodes (highlighted red)."
   },
   "shortcuts": {
     "shortcuts": "Shortcuts",
@@ -2022,6 +2114,11 @@
     "assetDeletedSuccessfully": "Asset deleted successfully",
     "deletingImportedFilesCloudOnly": "Deleting imported files is only supported in cloud version",
     "failedToDeleteAsset": "Failed to delete asset",
+    "actions": {
+      "inspect": "Inspect",
+      "more": "More options",
+      "seeMoreOutputs": "See more outputs"
+    },
     "jobIdToast": {
       "jobIdCopied": "Job ID copied to clipboard",
       "jobIdCopyFailed": "Failed to copy Job ID",
@@ -2089,4 +2186,4 @@
       "replacementInstruction": "Install these nodes to run this workflow, or replace them with installed alternatives. Missing nodes are highlighted in red on the canvas."
     }
   }
-}
+}

src/locales/en/nodeDefs.json

@@ -2570,7 +2570,7 @@
     }
   },
   "GeminiImageNode": {
-    "display_name": "Google Gemini Image",
+    "display_name": "Nano Banana (Google Gemini Image)",
     "description": "Edit images synchronously via Google API.",
     "inputs": {
       "prompt": {
@@ -12770,6 +12770,20 @@
       }
     }
   },
+  "wanBlockSwap": {
+    "display_name": "wanBlockSwap",
+    "description": "NOP",
+    "inputs": {
+      "model": {
+        "name": "model"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "WanCameraEmbedding": {
     "display_name": "WanCameraEmbedding",
     "inputs": {

src/locales/en/settings.json

@@ -1,30 +1,4 @@
 {
-  "Comfy-Desktop_AutoUpdate": {
-    "name": "Automatically check for updates"
-  },
-  "Comfy-Desktop_SendStatistics": {
-    "name": "Send anonymous usage metrics"
-  },
-  "Comfy-Desktop_UV_PypiInstallMirror": {
-    "name": "Pypi Install Mirror",
-    "tooltip": "Default pip install mirror"
-  },
-  "Comfy-Desktop_UV_PythonInstallMirror": {
-    "name": "Python Install Mirror",
-    "tooltip": "Managed Python installations are downloaded from the Astral python-build-standalone project. This variable can be set to a mirror URL to use a different source for Python installations. The provided URL will replace https://github.com/astral-sh/python-build-standalone/releases/download in, e.g., https://github.com/astral-sh/python-build-standalone/releases/download/20240713/cpython-3.12.4%2B20240713-aarch64-apple-darwin-install_only.tar.gz. Distributions can be read from a local directory by using the file:// URL scheme."
-  },
-  "Comfy-Desktop_UV_TorchInstallMirror": {
-    "name": "Torch Install Mirror",
-    "tooltip": "Pip install mirror for pytorch"
-  },
-  "Comfy-Desktop_WindowStyle": {
-    "name": "Window Style",
-    "tooltip": "Custom: Replace the system title bar with ComfyUI's Top menu",
-    "options": {
-      "default": "default",
-      "custom": "custom"
-    }
-  },
   "Comfy_Canvas_BackgroundImage": {
     "name": "Canvas background image",
     "tooltip": "Image URL for the canvas background. You can right-click an image in the outputs panel and select \"Set as Background\" to use it, or upload your own image using the upload button."

src/locales/es/main.json

@@ -155,13 +155,6 @@
     "duplicate": "Duplicar",
     "enterNewName": "Ingrese un nuevo nombre"
   },
-  "chatHistory": {
-    "cancelEdit": "Cancelar",
-    "cancelEditTooltip": "Cancelar edición",
-    "copiedTooltip": "Copiado",
-    "copyTooltip": "Copiar mensaje al portapapeles",
-    "editTooltip": "Editar mensaje"
-  },
   "clipboard": {
     "errorMessage": "Error al copiar al portapapeles",
     "errorNotSupported": "API del portapapeles no soportada en su navegador",
@@ -965,13 +958,6 @@
       "title": "Visor 3D (Beta)"
     }
   },
-  "loadWorkflowWarning": {
-    "coreNodesFromVersion": "Requiere ComfyUI {version}:",
-    "missingNodesDescription": "Al cargar el grafo, no se encontraron los siguientes tipos de nodos.\nEsto también puede ocurrir si tu versión instalada es anterior y ese tipo de nodo no se puede encontrar.",
-    "missingNodesTitle": "Faltan Algunos Nodos",
-    "outdatedVersion": "Algunos nodos requieren una versión más reciente de ComfyUI (actual: {version}). Por favor, actualiza para usar todos los nodos.",
-    "outdatedVersionGeneric": "Algunos nodos requieren una versión más reciente de ComfyUI. Por favor, actualiza para usar todos los nodos."
-  },
   "maintenance": {
     "None": "Ninguno",
     "OK": "OK",
@@ -1101,29 +1087,6 @@
     "version": "Versión"
   },
   "maskEditor": {
-    "Apply to Whole Image": "Aplicar a toda la imagen",
-    "Brush Settings": "Configuración de pincel",
-    "Brush Shape": "Forma de pincel",
-    "Clear": "Borrar",
-    "Color Select Settings": "Configuración de selección de color",
-    "Fill Opacity": "Opacidad de relleno",
-    "Hardness": "Dureza",
-    "Image Layer": "Capa de imagen",
-    "Invert": "Invertir",
-    "Layers": "Capas",
-    "Live Preview": "Vista previa en vivo",
-    "Mask Layer": "Capa de máscara",
-    "Mask Opacity": "Opacidad de máscara",
-    "Mask Tolerance": "Tolerancia de máscara",
-    "Method": "Método",
-    "Opacity": "Opacidad",
-    "Paint Bucket Settings": "Configuración de cubo de pintura",
-    "Reset to Default": "Restablecer a predeterminado",
-    "Selection Opacity": "Opacidad de selección",
-    "Smoothing Precision": "Precisión de suavizado",
-    "Stop at mask": "Detener en máscara",
-    "Thickness": "Grosor",
-    "Tolerance": "Tolerancia"
   },
   "mediaAsset": {
     "assetDeletedSuccessfully": "Recurso eliminado exitosamente",
@@ -1189,7 +1152,6 @@
     "Canvas Performance": "Rendimiento del Lienzo",
     "Canvas Toggle Lock": "Alternar bloqueo en lienzo",
     "Check for Custom Node Updates": "Buscar actualizaciones de nodos personalizados",
-    "Check for Updates": "Buscar actualizaciones",
     "Clear Pending Tasks": "Borrar tareas pendientes",
     "Clear Workflow": "Borrar flujo de trabajo",
     "Clipspace": "Espacio de clip",
@@ -1206,7 +1168,6 @@
     "Custom Nodes Manager": "Administrador de Nodos Personalizados",
     "Decrease Brush Size in MaskEditor": "Disminuir tamaño del pincel en MaskEditor",
     "Delete Selected Items": "Eliminar elementos seleccionados",
-    "Desktop User Guide": "Guía de usuario de escritorio",
     "Duplicate Current Workflow": "Duplicar flujo de trabajo actual",
     "Edit": "Editar",
     "Edit Subgraph Widgets": "Editar widgets de subgrafo",
@@ -1243,15 +1204,8 @@
     "Node Links": "Enlaces de nodos",
     "Open": "Abrir",
     "Open 3D Viewer (Beta) for Selected Node": "Abrir Visor 3D (Beta) para Nodo Seleccionado",
-    "Open Custom Nodes Folder": "Abrir carpeta de nodos personalizados",
-    "Open DevTools": "Abrir DevTools",
-    "Open Inputs Folder": "Abrir carpeta de entradas",
-    "Open Logs Folder": "Abrir carpeta de registros",
     "Open Mask Editor for Selected Node": "Abrir el editor de mask para el nodo seleccionado",
-    "Open Models Folder": "Abrir carpeta de modelos",
-    "Open Outputs Folder": "Abrir carpeta de salidas",
     "Open Sign In Dialog": "Abrir diálogo de inicio de sesión",
-    "Open extra_model_paths_yaml": "Abrir extra_model_paths.yaml",
     "Pin/Unpin Selected Items": "Anclar/Desanclar elementos seleccionados",
     "Pin/Unpin Selected Nodes": "Anclar/Desanclar nodos seleccionados",
     "Previous Opened Workflow": "Flujo de trabajo abierto anterior",
@@ -1260,13 +1214,10 @@
     "Queue Prompt": "Indicador de cola",
     "Queue Prompt (Front)": "Indicador de cola (Frente)",
     "Queue Selected Output Nodes": "Encolar nodos de salida seleccionados",
-    "Quit": "Salir",
     "Redo": "Rehacer",
     "Refresh Node Definitions": "Actualizar definiciones de nodo",
-    "Reinstall": "Reinstalar",
     "Reset View": "Restablecer vista",
     "Resize Selected Nodes": "Redimensionar Nodos Seleccionados",
-    "Restart": "Reiniciar",
     "Save": "Guardar",
     "Save As": "Guardar como",
     "Show Keybindings Dialog": "Mostrar diálogo de combinaciones de teclas",

src/locales/fr/main.json

@@ -155,13 +155,6 @@
     "duplicate": "Dupliquer",
     "enterNewName": "Entrez un nouveau nom"
   },
-  "chatHistory": {
-    "cancelEdit": "Annuler",
-    "cancelEditTooltip": "Annuler la modification",
-    "copiedTooltip": "Copié",
-    "copyTooltip": "Copier le message dans le presse-papiers",
-    "editTooltip": "Modifier le message"
-  },
   "clipboard": {
     "errorMessage": "Échec de la copie dans le presse-papiers",
     "errorNotSupported": "L'API du presse-papiers n'est pas prise en charge par votre navigateur",
@@ -965,13 +958,6 @@
       "title": "Visualiseur 3D (Bêta)"
     }
   },
-  "loadWorkflowWarning": {
-    "coreNodesFromVersion": "Nécessite ComfyUI {version} :",
-    "missingNodesDescription": "Lors du chargement du graphe, les types de nœuds suivants n'ont pas été trouvés.\nCela peut également se produire si votre version installée est inférieure et que ce type de nœud ne peut pas être trouvé.",
-    "missingNodesTitle": "Certains nœuds sont manquants",
-    "outdatedVersion": "Certains nœuds nécessitent une version plus récente de ComfyUI (actuelle : {version}). Veuillez mettre à jour pour utiliser tous les nœuds.",
-    "outdatedVersionGeneric": "Certains nœuds nécessitent une version plus récente de ComfyUI. Veuillez mettre à jour pour utiliser tous les nœuds."
-  },
   "maintenance": {
     "None": "Aucun",
     "OK": "OK",
@@ -1101,29 +1087,6 @@
     "version": "Version"
   },
   "maskEditor": {
-    "Apply to Whole Image": "Appliquer à toute l'image",
-    "Brush Settings": "Paramètres de brosse",
-    "Brush Shape": "Forme de brosse",
-    "Clear": "Effacer",
-    "Color Select Settings": "Paramètres de sélection de couleur",
-    "Fill Opacity": "Opacité de remplissage",
-    "Hardness": "Dureté",
-    "Image Layer": "Couche d'image",
-    "Invert": "Inverser",
-    "Layers": "Couches",
-    "Live Preview": "Aperçu en direct",
-    "Mask Layer": "Couche de masque",
-    "Mask Opacity": "Opacité du masque",
-    "Mask Tolerance": "Tolérance du masque",
-    "Method": "Méthode",
-    "Opacity": "Opacité",
-    "Paint Bucket Settings": "Paramètres du seau de peinture",
-    "Reset to Default": "Réinitialiser par défaut",
-    "Selection Opacity": "Opacité de sélection",
-    "Smoothing Precision": "Précision de lissage",
-    "Stop at mask": "Arrêter au masque",
-    "Thickness": "Épaisseur",
-    "Tolerance": "Tolérance"
   },
   "mediaAsset": {
     "assetDeletedSuccessfully": "Élément supprimé avec succès",
@@ -1189,7 +1152,6 @@
     "Canvas Performance": "Performances du canevas",
     "Canvas Toggle Lock": "Basculer le verrouillage de la toile",
     "Check for Custom Node Updates": "Vérifier les mises à jour des nœuds personnalisés",
-    "Check for Updates": "Vérifier les mises à jour",
     "Clear Pending Tasks": "Effacer les tâches en attente",
     "Clear Workflow": "Effacer le flux de travail",
     "Clipspace": "Espace de clip",
@@ -1206,7 +1168,6 @@
     "Custom Nodes Manager": "Gestionnaire de Nœuds Personnalisés",
     "Decrease Brush Size in MaskEditor": "Réduire la taille du pinceau dans MaskEditor",
     "Delete Selected Items": "Supprimer les éléments sélectionnés",
-    "Desktop User Guide": "Guide de l'utilisateur de bureau",
     "Duplicate Current Workflow": "Dupliquer le flux de travail actuel",
     "Edit": "Éditer",
     "Edit Subgraph Widgets": "Modifier les widgets de sous-graphe",
@@ -1243,15 +1204,8 @@
     "Node Links": "Liens de nœuds",
     "Open": "Ouvrir",
     "Open 3D Viewer (Beta) for Selected Node": "Ouvrir le visualiseur 3D (Bêta) pour le nœud sélectionné",
-    "Open Custom Nodes Folder": "Ouvrir le dossier des nœuds personnalisés",
-    "Open DevTools": "Ouvrir DevTools",
-    "Open Inputs Folder": "Ouvrir le dossier des entrées",
-    "Open Logs Folder": "Ouvrir le dossier des journaux",
     "Open Mask Editor for Selected Node": "Ouvrir l’éditeur de mask pour le nœud sélectionné",
-    "Open Models Folder": "Ouvrir le dossier des modèles",
-    "Open Outputs Folder": "Ouvrir le dossier des sorties",
     "Open Sign In Dialog": "Ouvrir la boîte de dialogue de connexion",
-    "Open extra_model_paths_yaml": "Ouvrir extra_model_paths.yaml",
     "Pin/Unpin Selected Items": "Épingler/Désépingler les éléments sélectionnés",
     "Pin/Unpin Selected Nodes": "Épingler/Désépingler les nœuds sélectionnés",
     "Previous Opened Workflow": "Flux de travail ouvert précédent",
@@ -1260,13 +1214,10 @@
     "Queue Prompt": "Invite de file d'attente",
     "Queue Prompt (Front)": "Invite de file d'attente (Front)",
     "Queue Selected Output Nodes": "Mettre en file d’attente les nœuds de sortie sélectionnés",
-    "Quit": "Quitter",
     "Redo": "Refaire",
     "Refresh Node Definitions": "Actualiser les définitions de nœud",
-    "Reinstall": "Réinstaller",
     "Reset View": "Réinitialiser la vue",
     "Resize Selected Nodes": "Redimensionner les nœuds sélectionnés",
-    "Restart": "Redémarrer",
     "Save": "Enregistrer",
     "Save As": "Enregistrer sous",
     "Show Keybindings Dialog": "Afficher la boîte de dialogue des raccourcis clavier",

src/locales/ja/main.json

@@ -155,13 +155,6 @@
     "duplicate": "複製",
     "enterNewName": "新しい名前を入力"
   },
-  "chatHistory": {
-    "cancelEdit": "キャンセル",
-    "cancelEditTooltip": "編集をキャンセル",
-    "copiedTooltip": "コピーしました",
-    "copyTooltip": "メッセージをクリップボードにコピー",
-    "editTooltip": "メッセージを編集"
-  },
   "clipboard": {
     "errorMessage": "クリップボードへのコピーに失敗しました",
     "errorNotSupported": "お使いのブラウザではクリップボードAPIがサポートされていません",
@@ -965,13 +958,6 @@
       "title": "3Dビューア（ベータ）"
     }
   },
-  "loadWorkflowWarning": {
-    "coreNodesFromVersion": "ComfyUI {version} が必要です：",
-    "missingNodesDescription": "グラフを読み込む際、以下のノードタイプが見つかりませんでした。\nインストールされているバージョンが古く、そのノードタイプが存在しない場合にも発生することがあります。",
-    "missingNodesTitle": "ノードが見つかりません",
-    "outdatedVersion": "一部のノードはより新しいバージョンのComfyUIが必要です（現在のバージョン：{version}）。すべてのノードを使用するにはアップデートしてください。",
-    "outdatedVersionGeneric": "一部のノードはより新しいバージョンのComfyUIが必要です。すべてのノードを使用するにはアップデートしてください。"
-  },
   "maintenance": {
     "None": "なし",
     "OK": "OK",
@@ -1101,29 +1087,6 @@
     "version": "バージョン"
   },
   "maskEditor": {
-    "Apply to Whole Image": "全画像に適用",
-    "Brush Settings": "ブラシ設定",
-    "Brush Shape": "ブラシ形状",
-    "Clear": "クリア",
-    "Color Select Settings": "色選択設定",
-    "Fill Opacity": "塗りつぶしの不透明度",
-    "Hardness": "硬さ",
-    "Image Layer": "画像レイヤー",
-    "Invert": "反転",
-    "Layers": "レイヤー",
-    "Live Preview": "ライブプレビュー",
-    "Mask Layer": "マスクレイヤー",
-    "Mask Opacity": "マスクの不透明度",
-    "Mask Tolerance": "マスクの許容範囲",
-    "Method": "方法",
-    "Opacity": "不透明度",
-    "Paint Bucket Settings": "ペイントバケツ設定",
-    "Reset to Default": "デフォルトにリセット",
-    "Selection Opacity": "選択範囲の不透明度",
-    "Smoothing Precision": "スムージング精度",
-    "Stop at mask": "マスクで停止",
-    "Thickness": "厚さ",
-    "Tolerance": "許容範囲"
   },
   "mediaAsset": {
     "assetDeletedSuccessfully": "アセットが正常に削除されました",
@@ -1189,7 +1152,6 @@
     "Canvas Performance": "キャンバスのパフォーマンス",
     "Canvas Toggle Lock": "キャンバスのロックを切り替え",
     "Check for Custom Node Updates": "カスタムノードのアップデートを確認",
-    "Check for Updates": "更新を確認する",
     "Clear Pending Tasks": "保留中のタスクをクリア",
     "Clear Workflow": "ワークフローをクリア",
     "Clipspace": "クリップスペース",
@@ -1206,7 +1168,6 @@
     "Custom Nodes Manager": "カスタムノードマネージャ",
     "Decrease Brush Size in MaskEditor": "マスクエディタでブラシサイズを小さくする",
     "Delete Selected Items": "選択したアイテムを削除",
-    "Desktop User Guide": "デスクトップユーザーガイド",
     "Duplicate Current Workflow": "現在のワークフローを複製",
     "Edit": "編集",
     "Edit Subgraph Widgets": "サブグラフウィジェットを編集",
@@ -1243,15 +1204,8 @@
     "Node Links": "ノードリンク",
     "Open": "開く",
     "Open 3D Viewer (Beta) for Selected Node": "選択したノードの3Dビューア（ベータ版）を開く",
-    "Open Custom Nodes Folder": "カスタムノードフォルダを開く",
-    "Open DevTools": "DevToolsを開く",
-    "Open Inputs Folder": "入力フォルダを開く",
-    "Open Logs Folder": "ログフォルダを開く",
     "Open Mask Editor for Selected Node": "選択したノードのマスクエディタを開く",
-    "Open Models Folder": "モデルフォルダを開く",
-    "Open Outputs Folder": "出力フォルダを開く",
     "Open Sign In Dialog": "サインインダイアログを開く",
-    "Open extra_model_paths_yaml": "extra_model_paths.yamlを開く",
     "Pin/Unpin Selected Items": "選択したアイテムのピン留め/ピン留め解除",
     "Pin/Unpin Selected Nodes": "選択したノードのピン留め/ピン留め解除",
     "Previous Opened Workflow": "前に開いたワークフロー",
@@ -1260,13 +1214,10 @@
     "Queue Prompt": "キューのプロンプト",
     "Queue Prompt (Front)": "キューのプロンプト (前面)",
     "Queue Selected Output Nodes": "選択した出力ノードをキューに追加",
-    "Quit": "終了",
     "Redo": "やり直す",
     "Refresh Node Definitions": "ノード定義を更新",
-    "Reinstall": "再インストール",
     "Reset View": "ビューをリセット",
     "Resize Selected Nodes": "選択したノードのサイズ変更",
-    "Restart": "再起動",
     "Save": "保存",
     "Save As": "名前を付けて保存",
     "Show Keybindings Dialog": "キーバインドダイアログを表示",

src/locales/ko/main.json

@@ -155,13 +155,6 @@
     "duplicate": "복제",
     "enterNewName": "새 이름 입력"
   },
-  "chatHistory": {
-    "cancelEdit": "취소",
-    "cancelEditTooltip": "편집 취소",
-    "copiedTooltip": "복사됨",
-    "copyTooltip": "메시지를 클립보드에 복사",
-    "editTooltip": "메시지 편집"
-  },
   "clipboard": {
     "errorMessage": "클립보드에 복사하지 못했습니다",
     "errorNotSupported": "브라우저가 클립보드 API를 지원하지 않습니다.",
@@ -965,13 +958,6 @@
       "title": "3D 뷰어 (베타)"
     }
   },
-  "loadWorkflowWarning": {
-    "coreNodesFromVersion": "ComfyUI {version} 이상 필요:",
-    "missingNodesDescription": "그래프를 로드할 때 다음 노드 유형을 찾을 수 없습니다.\n설치된 버전이 낮아 해당 노드 유형을 찾을 수 없는 경우에도 이런 일이 발생할 수 있습니다.",
-    "missingNodesTitle": "일부 노드가 누락되었습니다",
-    "outdatedVersion": "일부 노드는 더 최신 버전의 ComfyUI가 필요합니다 (현재: {version}). 모든 노드를 사용하려면 업데이트해 주세요.",
-    "outdatedVersionGeneric": "일부 노드는 더 최신 버전의 ComfyUI가 필요합니다. 모든 노드를 사용하려면 업데이트해 주세요."
-  },
   "maintenance": {
     "None": "없음",
     "OK": "확인",
@@ -1101,29 +1087,6 @@
     "version": "버전"
   },
   "maskEditor": {
-    "Apply to Whole Image": "전체 이미지에 적용",
-    "Brush Settings": "브러시 설정",
-    "Brush Shape": "브러시 모양",
-    "Clear": "지우기",
-    "Color Select Settings": "색상 선택 설정",
-    "Fill Opacity": "채우기 투명도",
-    "Hardness": "경도",
-    "Image Layer": "이미지 레이어",
-    "Invert": "반전",
-    "Layers": "레이어",
-    "Live Preview": "실시간 미리보기",
-    "Mask Layer": "마스크 레이어",
-    "Mask Opacity": "마스크 투명도",
-    "Mask Tolerance": "마스크 허용 오차",
-    "Method": "방법",
-    "Opacity": "투명도",
-    "Paint Bucket Settings": "페인트 버킷 설정",
-    "Reset to Default": "기본값으로 재설정",
-    "Selection Opacity": "선택 투명도",
-    "Smoothing Precision": "스무딩 정밀도",
-    "Stop at mask": "마스크에서 중지",
-    "Thickness": "두께",
-    "Tolerance": "허용 오차"
   },
   "mediaAsset": {
     "assetDeletedSuccessfully": "에셋이 성공적으로 삭제되었습니다",
@@ -1189,7 +1152,6 @@
     "Canvas Performance": "캔버스 성능",
     "Canvas Toggle Lock": "캔버스 토글 잠금",
     "Check for Custom Node Updates": "커스텀 노드 업데이트 확인",
-    "Check for Updates": "업데이트 확인",
     "Clear Pending Tasks": "보류 중인 작업 제거하기",
     "Clear Workflow": "워크플로 지우기",
     "Clipspace": "클립스페이스",
@@ -1206,7 +1168,6 @@
     "Custom Nodes Manager": "커스텀 노드 관리자",
     "Decrease Brush Size in MaskEditor": "마스크 편집기에서 브러시 크기 줄이기",
     "Delete Selected Items": "선택한 항목 삭제",
-    "Desktop User Guide": "데스크톱 사용자 가이드",
     "Duplicate Current Workflow": "현재 워크플로 복제",
     "Edit": "편집",
     "Edit Subgraph Widgets": "하위 그래프 위젯 편집",
@@ -1243,15 +1204,8 @@
     "Node Links": "노드 링크",
     "Open": "열기",
     "Open 3D Viewer (Beta) for Selected Node": "선택한 노드에 대한 3D 뷰어 (베타) 열기",
-    "Open Custom Nodes Folder": "커스텀 노드 폴더 열기",
-    "Open DevTools": "개발자 도구 열기",
-    "Open Inputs Folder": "입력 폴더 열기",
-    "Open Logs Folder": "로그 폴더 열기",
     "Open Mask Editor for Selected Node": "선택한 노드의 마스크 에디터 열기",
-    "Open Models Folder": "모델 폴더 열기",
-    "Open Outputs Folder": "출력 폴더 열기",
     "Open Sign In Dialog": "로그인 대화 상자 열기",
-    "Open extra_model_paths_yaml": "extra_model_paths.yaml 열기",
     "Pin/Unpin Selected Items": "선택한 항목 고정/고정 해제",
     "Pin/Unpin Selected Nodes": "선택한 노드 고정/고정 해제",
     "Previous Opened Workflow": "이전 열린 워크플로",
@@ -1260,13 +1214,10 @@
     "Queue Prompt": "실행 대기열에 프롬프트 추가",
     "Queue Prompt (Front)": "실행 대기열 맨 앞에 프롬프트 추가",
     "Queue Selected Output Nodes": "선택한 출력 노드 대기열에 추가",
-    "Quit": "종료",
     "Redo": "다시 실행",
     "Refresh Node Definitions": "노드 정의 새로 고침",
-    "Reinstall": "재설치",
     "Reset View": "보기 초기화",
     "Resize Selected Nodes": "선택된 노드 크기 조정",
-    "Restart": "재시작",
     "Save": "저장",
     "Save As": "다른 이름으로 저장",
     "Show Keybindings Dialog": "단축키 대화상자 표시",

src/locales/ru/main.json

@@ -155,13 +155,6 @@
     "duplicate": "Дублировать",
     "enterNewName": "Введите новое имя"
   },
-  "chatHistory": {
-    "cancelEdit": "Отмена",
-    "cancelEditTooltip": "Отменить редактирование",
-    "copiedTooltip": "Скопировано",
-    "copyTooltip": "Скопировать сообщение в буфер",
-    "editTooltip": "Редактировать сообщение"
-  },
   "clipboard": {
     "errorMessage": "Не удалось скопировать в буфер обмена",
     "errorNotSupported": "API буфера обмена не поддерживается в вашем браузере",
@@ -965,13 +958,6 @@
       "title": "3D Просмотрщик (Бета)"
     }
   },
-  "loadWorkflowWarning": {
-    "coreNodesFromVersion": "Требуется ComfyUI {version}:",
-    "missingNodesDescription": "При загрузке графа следующие типы нод не были найдены.\nЭто также может произойти, если ваша установленная версия ниже и этот тип ноды не может быть найден.",
-    "missingNodesTitle": "Некоторые ноды отсутствуют",
-    "outdatedVersion": "Некоторые узлы требуют более новой версии ComfyUI (текущая: {version}). Пожалуйста, обновите, чтобы использовать все узлы.",
-    "outdatedVersionGeneric": "Некоторые узлы требуют более новой версии ComfyUI. Пожалуйста, обновите, чтобы использовать все узлы."
-  },
   "maintenance": {
     "None": "Нет",
     "OK": "OK",
@@ -1101,29 +1087,6 @@
     "version": "Версия"
   },
   "maskEditor": {
-    "Apply to Whole Image": "Применить ко всему изображению",
-    "Brush Settings": "Настройки кисти",
-    "Brush Shape": "Форма кисти",
-    "Clear": "Очистить",
-    "Color Select Settings": "Настройки выбора цвета",
-    "Fill Opacity": "Прозрачность заливки",
-    "Hardness": "Жесткость",
-    "Image Layer": "Слой изображения",
-    "Invert": "Инвертировать",
-    "Layers": "Слои",
-    "Live Preview": "Предварительный просмотр",
-    "Mask Layer": "Слой маски",
-    "Mask Opacity": "Прозрачность маски",
-    "Mask Tolerance": "Толерантность маски",
-    "Method": "Метод",
-    "Opacity": "Прозрачность",
-    "Paint Bucket Settings": "Настройки заливки",
-    "Reset to Default": "Сбросить до стандартных",
-    "Selection Opacity": "Прозрачность выбора",
-    "Smoothing Precision": "Точность сглаживания",
-    "Stop at mask": "Остановиться на маске",
-    "Thickness": "Толщина",
-    "Tolerance": "Толерантность"
   },
   "mediaAsset": {
     "assetDeletedSuccessfully": "Ресурс успешно удален",
@@ -1189,7 +1152,6 @@
     "Canvas Performance": "Производительность холста",
     "Canvas Toggle Lock": "Переключение блокировки холста",
     "Check for Custom Node Updates": "Проверить обновления пользовательских узлов",
-    "Check for Updates": "Проверить наличие обновлений",
     "Clear Pending Tasks": "Очистить ожидающие задачи",
     "Clear Workflow": "Очистить рабочий процесс",
     "Clipspace": "Клиппространство",
@@ -1206,7 +1168,6 @@
     "Custom Nodes Manager": "Менеджер Пользовательских Узлов",
     "Decrease Brush Size in MaskEditor": "Уменьшить размер кисти в MaskEditor",
     "Delete Selected Items": "Удалить выбранные элементы",
-    "Desktop User Guide": "Руководство пользователя для настольных ПК",
     "Duplicate Current Workflow": "Дублировать текущий рабочий процесс",
     "Edit": "Редактировать",
     "Edit Subgraph Widgets": "Редактировать виджеты подграфа",
@@ -1243,15 +1204,8 @@
     "Node Links": "Связи узлов",
     "Open": "Открыть",
     "Open 3D Viewer (Beta) for Selected Node": "Открыть 3D просмотрщик (Бета) для выбранного узла",
-    "Open Custom Nodes Folder": "Открыть папку пользовательских нод",
-    "Open DevTools": "Открыть инструменты разработчика",
-    "Open Inputs Folder": "Открыть папку входных данных",
-    "Open Logs Folder": "Открыть папку журналов",
     "Open Mask Editor for Selected Node": "Открыть редактор масок для выбранного узла",
-    "Open Models Folder": "Открыть папку моделей",
-    "Open Outputs Folder": "Открыть папку выходных данных",
     "Open Sign In Dialog": "Открыть окно входа",
-    "Open extra_model_paths_yaml": "Открыть extra_model_paths.yaml",
     "Pin/Unpin Selected Items": "Закрепить/открепить выбранные элементы",
     "Pin/Unpin Selected Nodes": "Закрепить/открепить выбранные ноды",
     "Previous Opened Workflow": "Предыдущий открытый рабочий процесс",
@@ -1260,13 +1214,10 @@
     "Queue Prompt": "Запрос в очереди",
     "Queue Prompt (Front)": "Запрос в очереди (спереди)",
     "Queue Selected Output Nodes": "Добавить выбранные выходные узлы в очередь",
-    "Quit": "Выйти",
     "Redo": "Повторить",
     "Refresh Node Definitions": "Обновить определения нод",
-    "Reinstall": "Переустановить",
     "Reset View": "Сбросить вид",
     "Resize Selected Nodes": "Изменить размер выбранных узлов",
-    "Restart": "Перезапустить",
     "Save": "Сохранить",
     "Save As": "Сохранить как",
     "Show Keybindings Dialog": "Показать диалог клавиш быстрого доступа",

src/locales/tr/main.json

@@ -155,13 +155,6 @@
     "duplicate": "Çoğalt",
     "enterNewName": "Yeni isim girin"
   },
-  "chatHistory": {
-    "cancelEdit": "İptal",
-    "cancelEditTooltip": "Düzenlemeyi iptal et",
-    "copiedTooltip": "Kopyalandı",
-    "copyTooltip": "Mesajı panoya kopyala",
-    "editTooltip": "Mesajı düzenle"
-  },
   "clipboard": {
     "errorMessage": "Panoya kopyalanamadı",
     "errorNotSupported": "Pano API'si tarayıcınızda desteklenmiyor",
@@ -965,13 +958,6 @@
       "title": "3D Görüntüleyici (Beta)"
     }
   },
-  "loadWorkflowWarning": {
-    "coreNodesFromVersion": "ComfyUI {version} gerektirir:",
-    "missingNodesDescription": "Grafik yüklenirken aşağıdaki düğüm türleri bulunamadı.\nBu, yüklü sürümünüz daha düşükse ve bu düğüm türü bulunamazsa da olabilir.",
-    "missingNodesTitle": "Bazı Düğümler Eksik",
-    "outdatedVersion": "Bazı düğümler ComfyUI'nin daha yeni bir sürümünü gerektirir (mevcut: {version}). Tüm düğümleri kullanmak için lütfen güncelleyin.",
-    "outdatedVersionGeneric": "Bazı düğümler ComfyUI'nin daha yeni bir sürümünü gerektirir. Tüm düğümleri kullanmak için lütfen güncelleyin."
-  },
   "maintenance": {
     "None": "Yok",
     "OK": "Tamam",
@@ -1101,29 +1087,6 @@
     "version": "Sürüm"
   },
   "maskEditor": {
-    "Apply to Whole Image": "Tüm Görüntüye Uygula",
-    "Brush Settings": "Fırça Ayarları",
-    "Brush Shape": "Fırça Şekli",
-    "Clear": "Temizle",
-    "Color Select Settings": "Renk Seçim Ayarları",
-    "Fill Opacity": "Dolgu Opaklığı",
-    "Hardness": "Sertlik",
-    "Image Layer": "Görüntü Katmanı",
-    "Invert": "Ters Çevir",
-    "Layers": "Katmanlar",
-    "Live Preview": "Canlı Önizleme",
-    "Mask Layer": "Maske Katmanı",
-    "Mask Opacity": "Maske Opaklığı",
-    "Mask Tolerance": "Maske Toleransı",
-    "Method": "Yöntem",
-    "Opacity": "Opaklık",
-    "Paint Bucket Settings": "Boya Kovası Ayarları",
-    "Reset to Default": "Varsayılana Sıfırla",
-    "Selection Opacity": "Seçim Opaklığı",
-    "Smoothing Precision": "Yumuşatma Hassasiyeti",
-    "Stop at mask": "Maskede dur",
-    "Thickness": "Kalınlık",
-    "Tolerance": "Tolerans"
   },
   "mediaAsset": {
     "assetDeletedSuccessfully": "Varlık başarıyla silindi",
@@ -1189,7 +1152,6 @@
     "Canvas Performance": "Tuval Performansı",
     "Canvas Toggle Lock": "Tuval Kilidini Aç/Kapat",
     "Check for Custom Node Updates": "Özel Düğüm Güncellemelerini Kontrol Et",
-    "Check for Updates": "Güncellemeleri Kontrol Et",
     "Clear Pending Tasks": "Bekleyen Görevleri Temizle",
     "Clear Workflow": "İş Akışını Temizle",
     "Clipspace": "Clipspace",
@@ -1206,7 +1168,6 @@
     "Custom Nodes Manager": "Özel Düğüm Yöneticisi",
     "Decrease Brush Size in MaskEditor": "MaskEditor'da Fırça Boyutunu Azalt",
     "Delete Selected Items": "Seçili Öğeleri Sil",
-    "Desktop User Guide": "Masaüstü Kullanıcı Kılavuzu",
     "Duplicate Current Workflow": "Mevcut İş Akışını Çoğalt",
     "Edit": "Düzenle",
     "Edit Subgraph Widgets": "Alt Grafik Widget'larını Düzenle",
@@ -1243,15 +1204,8 @@
     "Node Links": "Düğüm Bağlantıları",
     "Open": "Aç",
     "Open 3D Viewer (Beta) for Selected Node": "Seçili Düğüm için 3D Görüntüleyiciyi (Beta) Aç",
-    "Open Custom Nodes Folder": "Özel Düğümler Klasörünü Aç",
-    "Open DevTools": "Geliştirici Araçlarını Aç",
-    "Open Inputs Folder": "Girişler Klasörünü Aç",
-    "Open Logs Folder": "Kayıtlar Klasörünü Aç",
     "Open Mask Editor for Selected Node": "Seçili Düğüm için Maske Düzenleyiciyi Aç",
-    "Open Models Folder": "Modeller Klasörünü Aç",
-    "Open Outputs Folder": "Çıktılar Klasörünü Aç",
     "Open Sign In Dialog": "Giriş Yapma İletişim Kutusunu Aç",
-    "Open extra_model_paths_yaml": "extra_model_paths.yaml dosyasını aç",
     "Pin/Unpin Selected Items": "Seçili Öğeleri Sabitle/Kaldır",
     "Pin/Unpin Selected Nodes": "Seçili Düğümleri Sabitle/Kaldır",
     "Previous Opened Workflow": "Önceki Açılan İş Akışı",
@@ -1260,13 +1214,10 @@
     "Queue Prompt": "İstemi Kuyruğa Al",
     "Queue Prompt (Front)": "İstemi Kuyruğa Al (Ön)",
     "Queue Selected Output Nodes": "Seçili Çıktı Düğümlerini Kuyruğa Al",
-    "Quit": "Çık",
     "Redo": "Yinele",
     "Refresh Node Definitions": "Düğüm Tanımlarını Yenile",
-    "Reinstall": "Yeniden Yükle",
     "Reset View": "Görünümü Sıfırla",
     "Resize Selected Nodes": "Seçili Düğümleri Yeniden Boyutlandır",
-    "Restart": "Yeniden Başlat",
     "Save": "Kaydet",
     "Save As": "Farklı Kaydet",
     "Show Keybindings Dialog": "Tuş Atamaları İletişim Kutusunu Göster",

src/locales/zh-TW/main.json

@@ -155,13 +155,6 @@
     "duplicate": "複製",
     "enterNewName": "輸入新名稱"
   },
-  "chatHistory": {
-    "cancelEdit": "取消",
-    "cancelEditTooltip": "取消編輯",
-    "copiedTooltip": "已複製",
-    "copyTooltip": "複製訊息到剪貼簿",
-    "editTooltip": "編輯訊息"
-  },
   "clipboard": {
     "errorMessage": "複製到剪貼簿失敗",
     "errorNotSupported": "您的瀏覽器不支援剪貼簿 API",
@@ -965,13 +958,6 @@
       "title": "3D 檢視器（測試版）"
     }
   },
-  "loadWorkflowWarning": {
-    "coreNodesFromVersion": "需要 ComfyUI {version}：",
-    "missingNodesDescription": "載入圖形時，找不到以下節點類型。\n如果您安裝的版本較舊，找不到該節點類型，也可能發生這種情況。",
-    "missingNodesTitle": "部分節點缺少",
-    "outdatedVersion": "部分節點需要較新版本的 ComfyUI（目前版本：{version}）。請更新以使用所有節點。",
-    "outdatedVersionGeneric": "部分節點需要較新版本的 ComfyUI。請更新以使用所有節點。"
-  },
   "maintenance": {
     "None": "無",
     "OK": "正常",
@@ -1101,29 +1087,6 @@
     "version": "版本"
   },
   "maskEditor": {
-    "Apply to Whole Image": "套用至整張圖片",
-    "Brush Settings": "筆刷設定",
-    "Brush Shape": "筆刷形狀",
-    "Clear": "清除",
-    "Color Select Settings": "顏色選取設定",
-    "Fill Opacity": "填充不透明度",
-    "Hardness": "硬度",
-    "Image Layer": "圖像圖層",
-    "Invert": "反轉",
-    "Layers": "圖層",
-    "Live Preview": "即時預覽",
-    "Mask Layer": "遮罩圖層",
-    "Mask Opacity": "遮罩不透明度",
-    "Mask Tolerance": "遮罩容差",
-    "Method": "方法",
-    "Opacity": "不透明度",
-    "Paint Bucket Settings": "油漆桶設定",
-    "Reset to Default": "重設為預設值",
-    "Selection Opacity": "選取不透明度",
-    "Smoothing Precision": "平滑精度",
-    "Stop at mask": "停在遮罩",
-    "Thickness": "粗細",
-    "Tolerance": "容差"
   },
   "mediaAsset": {
     "assetDeletedSuccessfully": "資源刪除成功",
@@ -1189,7 +1152,6 @@
     "Canvas Performance": "畫布效能",
     "Canvas Toggle Lock": "切換畫布鎖定",
     "Check for Custom Node Updates": "檢查自訂節點更新",
-    "Check for Updates": "檢查更新",
     "Clear Pending Tasks": "清除待處理任務",
     "Clear Workflow": "清除工作流程",
     "Clipspace": "Clipspace",
@@ -1206,7 +1168,6 @@
     "Custom Nodes Manager": "自訂節點管理員",
     "Decrease Brush Size in MaskEditor": "在 MaskEditor 中減小筆刷大小",
     "Delete Selected Items": "刪除選取項目",
-    "Desktop User Guide": "桌面應用程式使用指南",
     "Duplicate Current Workflow": "複製目前工作流程",
     "Edit": "編輯",
     "Edit Subgraph Widgets": "編輯子圖小工具",
@@ -1243,15 +1204,8 @@
     "Node Links": "節點連結",
     "Open": "開啟",
     "Open 3D Viewer (Beta) for Selected Node": "為選取節點開啟 3D 檢視器（測試版）",
-    "Open Custom Nodes Folder": "開啟自訂節點資料夾",
-    "Open DevTools": "開啟開發者工具",
-    "Open Inputs Folder": "開啟輸入資料夾",
-    "Open Logs Folder": "開啟日誌資料夾",
     "Open Mask Editor for Selected Node": "為選取節點開啟遮罩編輯器",
-    "Open Models Folder": "開啟模型資料夾",
-    "Open Outputs Folder": "開啟輸出資料夾",
     "Open Sign In Dialog": "開啟登入對話框",
-    "Open extra_model_paths_yaml": "開啟 extra_model_paths.yaml",
     "Pin/Unpin Selected Items": "釘選/取消釘選選取項目",
     "Pin/Unpin Selected Nodes": "釘選/取消釘選選取節點",
     "Previous Opened Workflow": "上一個已開啟的工作流程",
@@ -1260,13 +1214,10 @@
     "Queue Prompt": "加入提示至佇列",
     "Queue Prompt (Front)": "將提示加入佇列前端",
     "Queue Selected Output Nodes": "將選取的輸出節點加入佇列",
-    "Quit": "離開",
     "Redo": "重做",
     "Refresh Node Definitions": "重新整理節點定義",
-    "Reinstall": "重新安裝",
     "Reset View": "重設視圖",
     "Resize Selected Nodes": "調整選取節點大小",
-    "Restart": "重新啟動",
     "Save": "儲存",
     "Save As": "另存新檔",
     "Show Keybindings Dialog": "顯示快捷鍵對話框",

src/locales/zh/main.json

@@ -155,13 +155,6 @@
     "duplicate": "复制",
     "enterNewName": "输入新名称"
   },
-  "chatHistory": {
-    "cancelEdit": "取消",
-    "cancelEditTooltip": "取消编辑",
-    "copiedTooltip": "已复制",
-    "copyTooltip": "复制消息到剪贴板",
-    "editTooltip": "编辑消息"
-  },
   "clipboard": {
     "errorMessage": "复制到剪贴板失败",
     "errorNotSupported": "您的浏览器不支持剪贴板API",
@@ -965,13 +958,6 @@
       "title": "3D 查看器（测试版）"
     }
   },
-  "loadWorkflowWarning": {
-    "coreNodesFromVersion": "需要 ComfyUI {version}：",
-    "missingNodesDescription": "在加载工作流时，以下节点未找到。\n这也可能是因为你的ComfyUI版本过低，无法找到新的核心节点。",
-    "missingNodesTitle": "某些节点缺失",
-    "outdatedVersion": "某些节点需要更高版本的 ComfyUI（当前版本：{version}）。请更新以使用所有节点。",
-    "outdatedVersionGeneric": "某些节点需要更高版本的 ComfyUI。请更新以使用所有节点。"
-  },
   "maintenance": {
     "None": "无",
     "OK": "确定",
@@ -1101,29 +1087,6 @@
     "version": "版本"
   },
   "maskEditor": {
-    "Apply to Whole Image": "应用到整个图像",
-    "Brush Settings": "笔刷设置",
-    "Brush Shape": "笔刷形状",
-    "Clear": "清空",
-    "Color Select Settings": "颜色选择设置",
-    "Fill Opacity": "填充不透明度",
-    "Hardness": "硬度",
-    "Image Layer": "图像图层",
-    "Invert": "反转",
-    "Layers": "图层",
-    "Live Preview": "实时预览",
-    "Mask Layer": "遮罩图层",
-    "Mask Opacity": "遮罩不透明度",
-    "Mask Tolerance": "遮罩容差",
-    "Method": "方法",
-    "Opacity": "不透明度",
-    "Paint Bucket Settings": "油漆桶设置",
-    "Reset to Default": "恢复默认",
-    "Selection Opacity": "选区不透明度",
-    "Smoothing Precision": "平滑精度",
-    "Stop at mask": "在遮罩处停止",
-    "Thickness": "粗细",
-    "Tolerance": "容差"
   },
   "mediaAsset": {
     "assetDeletedSuccessfully": "资产删除成功",
@@ -1189,7 +1152,6 @@
     "Canvas Performance": "画布性能",
     "Canvas Toggle Lock": "切换视图锁定",
     "Check for Custom Node Updates": "检查自定义节点更新",
-    "Check for Updates": "检查更新",
     "Clear Pending Tasks": "清除待处理任务",
     "Clear Workflow": "清除工作流",
     "Clipspace": "剪贴空间",
@@ -1206,7 +1168,6 @@
     "Custom Nodes Manager": "自定义节点管理器",
     "Decrease Brush Size in MaskEditor": "在 MaskEditor 中减小笔刷大小",
     "Delete Selected Items": "删除选定的项目",
-    "Desktop User Guide": "桌面端用户指南",
     "Duplicate Current Workflow": "复制当前工作流",
     "Edit": "编辑",
     "Edit Subgraph Widgets": "编辑子图组件",
@@ -1243,15 +1204,8 @@
     "Node Links": "节点连接",
     "Open": "打开",
     "Open 3D Viewer (Beta) for Selected Node": "为选中节点打开3D查看器（测试版）",
-    "Open Custom Nodes Folder": "打开自定义节点文件夹",
-    "Open DevTools": "打开开发者工具",
-    "Open Inputs Folder": "打开输入文件夹",
-    "Open Logs Folder": "打开日志文件夹",
     "Open Mask Editor for Selected Node": "为选中节点打开 Mask 编辑器",
-    "Open Models Folder": "打开模型文件夹",
-    "Open Outputs Folder": "打开输出文件夹",
     "Open Sign In Dialog": "打开登录对话框",
-    "Open extra_model_paths_yaml": "打开 extra_model_paths.yaml",
     "Pin/Unpin Selected Items": "固定/取消固定选定项目",
     "Pin/Unpin Selected Nodes": "固定/取消固定选定节点",
     "Previous Opened Workflow": "上一个打开的工作流",
@@ -1260,13 +1214,10 @@
     "Queue Prompt": "执行提示词",
     "Queue Prompt (Front)": "执行提示词 (优先执行)",
     "Queue Selected Output Nodes": "将所选输出节点加入队列",
-    "Quit": "退出",
     "Redo": "重做",
     "Refresh Node Definitions": "刷新节点定义",
-    "Reinstall": "重新安装",
     "Reset View": "重置视图",
     "Resize Selected Nodes": "调整选定节点的大小",
-    "Restart": "重启",
     "Save": "保存",
     "Save As": "另存为",
     "Show Keybindings Dialog": "显示快捷键对话框",

src/platform/assets/components/Media3DTop.vue

@@ -3,8 +3,8 @@
     <div
       class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
     >
-      <i class="icon-[lucide--box] text-3xl text-base-foreground" />
-      <span class="text-base-foreground">{{
+      <i class="icon-[lucide--box] text-3xl text-muted-foreground" />
+      <span class="text-sm text-base-foreground">{{
         $t('assetBrowser.media.threeDModelPlaceholder')
       }}</span>
     </div>

src/platform/assets/components/MediaAssetCard.vue

@@ -27,7 +27,7 @@
         <!-- Loading State -->
         <template v-if="loading">
           <div
-            class="size-full animate-pulse rounded-lg bg-modal-card-button-surface"
+            class="size-full animate-pulse rounded-lg bg-modal-card-placeholder-background"
           />
         </template>
 
@@ -51,44 +51,51 @@
           <div v-if="showStaticChips" class="flex flex-wrap items-center gap-1">
             <SquareChip
               v-if="formattedDuration"
-              variant="light"
+              variant="gray"
               :label="formattedDuration"
             />
-            <SquareChip v-if="fileFormat" variant="light" :label="fileFormat" />
+            <SquareChip v-if="fileFormat" variant="gray" :label="fileFormat" />
           </div>
 
           <!-- Media actions - show on hover or when playing -->
           <IconGroup v-else-if="showActionsOverlay">
-            <IconButton
-              size="sm"
-              @click.stop="handleZoomClick"
-              @mouseenter="handleOverlayMouseEnter"
-              @mouseleave="handleOverlayMouseLeave"
-            >
-              <i class="icon-[lucide--zoom-in] size-4" />
-            </IconButton>
-            <MoreButton
-              size="sm"
-              @menu-opened="isMenuOpen = true"
-              @menu-closed="isMenuOpen = false"
-              @mouseenter="handleOverlayMouseEnter"
-              @mouseleave="handleOverlayMouseLeave"
-            >
-              <template #default="{ close }">
-                <MediaAssetMoreMenu
-                  :close="close"
-                  :show-delete-button="showDeleteButton"
-                  @inspect="handleZoomClick"
-                  @asset-deleted="handleAssetDelete"
-                />
-              </template>
-            </MoreButton>
+            <div v-tooltip.top="$t('mediaAsset.actions.inspect')">
+              <IconButton
+                size="sm"
+                @click.stop="handleZoomClick"
+                @mouseenter="handleOverlayMouseEnter"
+                @mouseleave="handleOverlayMouseLeave"
+              >
+                <i class="icon-[lucide--zoom-in] size-4" />
+              </IconButton>
+            </div>
+            <div v-tooltip.top="$t('mediaAsset.actions.more')">
+              <MoreButton
+                size="sm"
+                @menu-opened="isMenuOpen = true"
+                @menu-closed="isMenuOpen = false"
+                @mouseenter="handleOverlayMouseEnter"
+                @mouseleave="handleOverlayMouseLeave"
+              >
+                <template #default="{ close }">
+                  <MediaAssetMoreMenu
+                    :close="close"
+                    :show-delete-button="showDeleteButton"
+                    @inspect="handleZoomClick"
+                    @asset-deleted="handleAssetDelete"
+                  />
+                </template>
+              </MoreButton>
+            </div>
           </IconGroup>
         </template>
 
         <!-- Output count (top-right) -->
         <template v-if="showOutputCount" #top-right>
           <IconTextButton
+            v-tooltip.top.pt:pointer-events-none="
+              $t('mediaAsset.actions.seeMoreOutputs')
+            "
             type="secondary"
             size="sm"
             :label="String(outputCount)"
@@ -251,8 +258,8 @@ const containerClasses = computed(() =>
   cn(
     'gap-1 select-none group',
     selected
-      ? 'ring-3 ring-inset ring-base-foreground bg-modal-card-background'
-      : 'hover:bg-modal-card-background'
+      ? 'ring-3 ring-inset ring-modal-card-border-highlighted'
+      : 'hover:bg-modal-card-background-hovered'
   )
 )
 

src/renderer/extensions/vueNodes/VideoPreview.vue

@@ -11,12 +11,12 @@
   >
     <!-- Video Wrapper -->
     <div
-      class="relative h-88 w-full grow overflow-hidden rounded-[5px] bg-node-component-surface"
+      class="relative h-full w-full grow overflow-hidden rounded-[5px] bg-node-component-surface"
     >
       <!-- Error State -->
       <div
         v-if="videoError"
-        class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white"
+        class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white py-8"
       >
         <i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-smoke-400" />
         <p class="text-sm text-smoke-300">{{ $t('g.videoFailedToLoad') }}</p>

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

@@ -11,12 +11,12 @@
   >
     <!-- Image Wrapper -->
     <div
-      class="min-h-88 w-full overflow-hidden rounded-[5px] bg-node-component-surface"
+      class="h-full w-full overflow-hidden rounded-[5px] bg-node-component-surface"
     >
       <!-- Error State -->
       <div
         v-if="imageError"
-        class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white"
+        class="flex size-full flex-col items-center justify-center bg-smoke-800/50 text-center text-white py-8"
       >
         <i class="mb-2 icon-[lucide--image-off] h-12 w-12 text-smoke-400" />
         <p class="text-sm text-smoke-300">{{ $t('g.imageFailedToLoad') }}</p>

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

@@ -10,12 +10,10 @@
     />
 
     <!-- Slot Name -->
-    <div class="relative h-full flex items-center">
+    <div class="relative h-full flex items-center min-w-0">
       <span
         v-if="!dotOnly"
-        :class="
-          cn('whitespace-nowrap text-xs font-normal lod-toggle', labelClasses)
-        "
+        :class="cn('truncate text-xs font-normal lod-toggle', labelClasses)"
       >
         {{ slotData.localized_name || slotData.name || `Input ${index}` }}
       </span>

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

@@ -8,8 +8,9 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-component-node-background lg-node absolute',
-        'h-min w-min contain-style contain-layout min-h-(--node-height) min-w-(--node-width)',
+        'bg-component-node-background lg-node absolute pb-1',
+
+        'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
         'rounded-2xl touch-none flex flex-col',
         'border-1 border-solid border-component-node-border',
         // hover (only when node should handle events)
@@ -100,7 +101,7 @@
 
       <!-- Node Body - rendered based on LOD level and collapsed state -->
       <div
-        class="flex min-h-min min-w-min flex-1 flex-col gap-1 pb-2"
+        class="flex flex-1 flex-col gap-1 pb-2"
         :data-testid="`node-body-${nodeData.id}`"
       >
         <!-- Slots only rendered at full detail -->
@@ -343,12 +344,17 @@ const cornerResizeHandles: CornerResizeHandle[] = [
   }
 ]
 
+const MIN_NODE_WIDTH = 225
+
 const { startResize } = useNodeResize(
   (result, element) => {
     if (isCollapsed.value) return
 
+    // Clamp width to minimum to avoid conflicts with CSS min-width
+    const clampedWidth = Math.max(result.size.width, MIN_NODE_WIDTH)
+
     // Apply size directly to DOM element - ResizeObserver will pick this up
-    element.style.setProperty('--node-width', `${result.size.width}px`)
+    element.style.setProperty('--node-width', `${clampedWidth}px`)
     element.style.setProperty('--node-height', `${result.size.height}px`)
 
     const currentPosition = position.value

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

@@ -6,7 +6,7 @@
     v-else
     :class="
       cn(
-        'lg-node-header py-2 pl-2 pr-3 text-sm rounded-t-2xl w-full min-w-50',
+        'lg-node-header py-2 pl-2 pr-3 text-sm rounded-t-2xl w-full min-w-0',
         'text-node-component-header bg-node-component-header-surface',
         collapsed && 'rounded-2xl'
       )
@@ -15,9 +15,9 @@
     :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"
   >
-    <div class="flex items-center justify-between gap-2.5">
+    <div class="flex items-center justify-between gap-2.5 min-w-0">
       <!-- Collapse/Expand Button -->
-      <div class="relative grow-1 flex items-center gap-2.5">
+      <div class="relative grow-1 flex items-center gap-2.5 min-w-0 flex-1">
         <div class="lod-toggle flex shrink-0 items-center px-0.5">
           <IconButton
             size="fit-content"
@@ -44,16 +44,18 @@
         <!-- Node Title -->
         <div
           v-tooltip.top="tooltipConfig"
-          class="lod-toggle grow-1 items-center gap-2 truncate text-sm font-bold w-15"
+          class="lod-toggle flex min-w-0 flex-1 items-center gap-2 text-sm font-bold"
           data-testid="node-title"
         >
-          <EditableText
-            :model-value="displayTitle"
-            :is-editing="isEditing"
-            :input-attrs="{ 'data-testid': 'node-title-input' }"
-            @edit="handleTitleEdit"
-            @cancel="handleTitleCancel"
-          />
+          <div class="truncate min-w-0 flex-1">
+            <EditableText
+              :model-value="displayTitle"
+              :is-editing="isEditing"
+              :input-attrs="{ 'data-testid': 'node-title-input' }"
+              @edit="handleTitleEdit"
+              @cancel="handleTitleCancel"
+            />
+          </div>
         </div>
         <LODFallback />
       </div>

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

@@ -2,10 +2,10 @@
   <div v-if="renderError" class="node-error p-2 text-sm text-red-500">
     {{ st('nodeErrors.slots', 'Node Slots Error') }}
   </div>
-  <div v-else :class="cn('flex justify-between', unifiedWrapperClass)">
+  <div v-else :class="cn('flex justify-between min-w-0', unifiedWrapperClass)">
     <div
       v-if="filteredInputs.length"
-      :class="cn('flex flex-col', unifiedDotsClass)"
+      :class="cn('flex flex-col min-w-0', unifiedDotsClass)"
     >
       <InputSlot
         v-for="(input, index) in filteredInputs"
@@ -19,7 +19,7 @@
 
     <div
       v-if="nodeData?.outputs?.length"
-      :class="cn('ml-auto flex flex-col', unifiedDotsClass)"
+      :class="cn('ml-auto flex flex-col min-w-0', unifiedDotsClass)"
     >
       <OutputSlot
         v-for="(output, index) in nodeData.outputs"