chore: trigger screenshot regeneration for flaky snapshots

The following screenshots have been reported as flaky and need regeneration:
- mobile-default-workflow-mobile-chrome-linux.png
- selection-toolbox-multiple-nodes-border-chromium-linux.png

Adding label "New Browser Test Expectations" will regenerate these.

https://claude.ai/code/session_01Jiv4cSd3DBXkGN2ac79nch

.github/workflows/ci-tests-e2e-forks.yaml

@@ -6,6 +6,9 @@ on:
     workflows: ['CI: Tests E2E']
     types: [requested, completed]
 
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -60,7 +63,8 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
 
       - name: Download and Deploy Reports
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed'

.github/workflows/ci-tests-e2e.yaml

@@ -182,6 +182,10 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v6
 
+      - name: Get start time
+        id: start-time
+        run: echo "time=$(date -u '+%m/%d/%Y, %I:%M:%S %p')" >> $GITHUB_OUTPUT
+
       - name: Post starting comment
         env:
           GITHUB_TOKEN: ${{ github.token }}
@@ -190,7 +194,8 @@ jobs:
           ./scripts/cicd/pr-playwright-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting"
+            "starting" \
+            "${{ steps.start-time.outputs.time }}"
 
   # Deploy and comment for non-forked PRs only
   deploy-and-comment:

.github/workflows/ci-tests-storybook-forks.yaml

@@ -6,6 +6,9 @@ on:
     workflows: ['CI: Tests Storybook']
     types: [requested, completed]
 
+env:
+  DATE_FORMAT: '+%m/%d/%Y, %I:%M:%S %p'
+
 jobs:
   deploy-and-comment-forked-pr:
     runs-on: ubuntu-latest
@@ -60,7 +63,8 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ steps.pr.outputs.result }}" \
             "${{ github.event.workflow_run.head_branch }}" \
-            "starting"
+            "starting" \
+            "$(date -u '${{ env.DATE_FORMAT }}')"
 
       - name: Download and Deploy Storybook
         if: steps.pr.outputs.result != 'null' && github.event.action == 'completed' && github.event.workflow_run.conclusion == 'success'

.github/workflows/ci-tests-storybook.yaml

@@ -24,7 +24,8 @@ jobs:
           ./scripts/cicd/pr-storybook-deploy-and-comment.sh \
             "${{ github.event.pull_request.number }}" \
             "${{ github.head_ref }}" \
-            "starting"
+            "starting" \
+            "$(date -u '+%m/%d/%Y, %I:%M:%S %p')"
 
   # Build Storybook for all PRs (free Cloudflare deployment)
   storybook-build:

.storybook/main.ts

@@ -100,8 +100,7 @@ const config: StorybookConfig = {
         rolldownOptions: {
           treeshake: false,
           output: {
-            keepNames: true,
-            strictExecutionOrder: true
+            keepNames: true
           },
           onwarn: (warning, warn) => {
             // Suppress specific warnings

.storybook/preview.ts

@@ -90,6 +90,7 @@ const preview: Preview = {
           { value: 'light', icon: 'sun', title: 'Light' },
           { value: 'dark', icon: 'moon', title: 'Dark' }
         ],
+        showName: true,
         dynamicTitle: true
       }
     }

browser_tests/assets/subgraphs/subgraph-duplicate-links.json

@@ -1,183 +0,0 @@
-{
-  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
-      "pos": [600, 400],
-      "size": [200, 100],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {},
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "e5fb1765-aaaa-bbbb-cccc-ddddeeee0001",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 2,
-          "lastLinkId": 5,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "Subgraph With Duplicate Links",
-        "inputNode": {
-          "id": -10,
-          "bounding": [200, 400, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [900, 400, 120, 60]
-        },
-        "inputs": [],
-        "outputs": [
-          {
-            "id": "out-latent-1",
-            "name": "LATENT",
-            "type": "LATENT",
-            "linkIds": [2],
-            "pos": [920, 420]
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 1,
-            "type": "KSampler",
-            "pos": [400, 100],
-            "size": [270, 262],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "model",
-                "type": "MODEL",
-                "link": null
-              },
-              {
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": null
-              },
-              {
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": null
-              },
-              {
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": 1
-              }
-            ],
-            "outputs": [
-              {
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [2]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
-          },
-          {
-            "id": 2,
-            "type": "EmptyLatentImage",
-            "pos": [100, 200],
-            "size": [200, 106],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [],
-            "outputs": [
-              {
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [1, 3, 4, 5]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "EmptyLatentImage"
-            },
-            "widgets_values": [512, 512, 1]
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": 2,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 3,
-            "type": "LATENT"
-          },
-          {
-            "id": 2,
-            "origin_id": 1,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "LATENT"
-          },
-          {
-            "id": 3,
-            "origin_id": 2,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 3,
-            "type": "LATENT"
-          },
-          {
-            "id": 4,
-            "origin_id": 2,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 3,
-            "type": "LATENT"
-          },
-          {
-            "id": 5,
-            "origin_id": 2,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 3,
-            "type": "LATENT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [0, 0]
-    },
-    "frontendVersion": "1.38.14"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -26,6 +26,7 @@ import { Topbar } from './components/Topbar'
 import { CanvasHelper } from './helpers/CanvasHelper'
 import { ClipboardHelper } from './helpers/ClipboardHelper'
 import { CommandHelper } from './helpers/CommandHelper'
+import { DebugHelper } from './helpers/DebugHelper'
 import { DragDropHelper } from './helpers/DragDropHelper'
 import { KeyboardHelper } from './helpers/KeyboardHelper'
 import { NodeOperationsHelper } from './helpers/NodeOperationsHelper'
@@ -173,6 +174,7 @@ export class ComfyPage {
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
   public readonly vueNodes: VueNodeHelpers
+  public readonly debug: DebugHelper
   public readonly subgraph: SubgraphHelper
   public readonly canvasOps: CanvasHelper
   public readonly nodeOps: NodeOperationsHelper
@@ -217,6 +219,7 @@ export class ComfyPage {
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
     this.vueNodes = new VueNodeHelpers(page)
+    this.debug = new DebugHelper(page, this.canvas)
     this.subgraph = new SubgraphHelper(this)
     this.canvasOps = new CanvasHelper(page, this.canvas, this.resetViewButton)
     this.nodeOps = new NodeOperationsHelper(this)

browser_tests/fixtures/helpers/DebugHelper.ts

@@ -0,0 +1,167 @@
+import type { Locator, Page, TestInfo } from '@playwright/test'
+
+import type { Position } from '../types'
+
+export interface DebugScreenshotOptions {
+  fullPage?: boolean
+  element?: 'canvas' | 'page'
+  markers?: Array<{ position: Position; id?: string }>
+}
+
+export class DebugHelper {
+  constructor(
+    private page: Page,
+    private canvas: Locator
+  ) {}
+
+  async addMarker(
+    position: Position,
+    id: string = 'debug-marker'
+  ): Promise<void> {
+    await this.page.evaluate(
+      ([pos, markerId]) => {
+        const existing = document.getElementById(markerId)
+        if (existing) existing.remove()
+
+        const marker = document.createElement('div')
+        marker.id = markerId
+        marker.style.position = 'fixed'
+        marker.style.left = `${pos.x - 10}px`
+        marker.style.top = `${pos.y - 10}px`
+        marker.style.width = '20px'
+        marker.style.height = '20px'
+        marker.style.border = '2px solid red'
+        marker.style.borderRadius = '50%'
+        marker.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'
+        marker.style.pointerEvents = 'none'
+        marker.style.zIndex = '10000'
+        document.body.appendChild(marker)
+      },
+      [position, id] as const
+    )
+  }
+
+  async removeMarkers(): Promise<void> {
+    await this.page.evaluate(() => {
+      document
+        .querySelectorAll('[id^="debug-marker"]')
+        .forEach((el) => el.remove())
+    })
+  }
+
+  async attachScreenshot(
+    testInfo: TestInfo,
+    name: string,
+    options?: DebugScreenshotOptions
+  ): Promise<void> {
+    if (options?.markers) {
+      for (const marker of options.markers) {
+        await this.addMarker(marker.position, marker.id)
+      }
+    }
+
+    let screenshot: Buffer
+    const targetElement = options?.element || 'page'
+
+    if (targetElement === 'canvas') {
+      screenshot = await this.canvas.screenshot()
+    } else if (options?.fullPage) {
+      screenshot = await this.page.screenshot({ fullPage: true })
+    } else {
+      screenshot = await this.page.screenshot()
+    }
+
+    await testInfo.attach(name, {
+      body: screenshot,
+      contentType: 'image/png'
+    })
+
+    if (options?.markers) {
+      await this.removeMarkers()
+    }
+  }
+
+  async saveCanvasScreenshot(filename: string): Promise<void> {
+    await this.page.evaluate(async (filename) => {
+      const canvas = document.getElementById(
+        'graph-canvas'
+      ) as HTMLCanvasElement
+      if (!canvas) {
+        throw new Error('Canvas not found')
+      }
+
+      return new Promise<void>((resolve) => {
+        canvas.toBlob(async (blob) => {
+          if (!blob) {
+            throw new Error('Failed to create blob from canvas')
+          }
+
+          const url = URL.createObjectURL(blob)
+          const a = document.createElement('a')
+          a.href = url
+          a.download = filename
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+          URL.revokeObjectURL(url)
+          resolve()
+        }, 'image/png')
+      })
+    }, filename)
+  }
+
+  async getCanvasDataURL(): Promise<string> {
+    return await this.page.evaluate(() => {
+      const canvas = document.getElementById(
+        'graph-canvas'
+      ) as HTMLCanvasElement
+      if (!canvas) {
+        throw new Error('Canvas not found')
+      }
+      return canvas.toDataURL('image/png')
+    })
+  }
+
+  async showCanvasOverlay(): Promise<void> {
+    await this.page.evaluate(() => {
+      const canvas = document.getElementById(
+        'graph-canvas'
+      ) as HTMLCanvasElement
+      if (!canvas) {
+        throw new Error('Canvas not found')
+      }
+
+      const existingOverlay = document.getElementById('debug-canvas-overlay')
+      if (existingOverlay) {
+        existingOverlay.remove()
+      }
+
+      const overlay = document.createElement('div')
+      overlay.id = 'debug-canvas-overlay'
+      overlay.style.position = 'fixed'
+      overlay.style.top = '0'
+      overlay.style.left = '0'
+      overlay.style.zIndex = '9999'
+      overlay.style.backgroundColor = 'white'
+      overlay.style.padding = '10px'
+      overlay.style.border = '2px solid red'
+
+      const img = document.createElement('img')
+      img.src = canvas.toDataURL('image/png')
+      img.style.maxWidth = '800px'
+      img.style.maxHeight = '600px'
+      overlay.appendChild(img)
+
+      document.body.appendChild(overlay)
+    })
+  }
+
+  async hideCanvasOverlay(): Promise<void> {
+    await this.page.evaluate(() => {
+      const overlay = document.getElementById('debug-canvas-overlay')
+      if (overlay) {
+        overlay.remove()
+      }
+    })
+  }
+}

browser_tests/tests/colorPalette.spec.ts

@@ -244,9 +244,21 @@ test.describe(
       await comfyPage.settings.setSetting('Comfy.Node.Opacity', 0.5)
       await comfyPage.settings.setSetting('Comfy.ColorPalette', 'light')
       await comfyPage.nextFrame()
-      const parsed = await comfyPage.page.evaluate(() => {
-        return window['app'].graph.serialize()
-      })
+      const parsed = await (
+        await comfyPage.page.waitForFunction(
+          () => {
+            const workflow = localStorage.getItem('workflow')
+            if (!workflow) return null
+            try {
+              const data = JSON.parse(workflow)
+              return Array.isArray(data?.nodes) ? data : null
+            } catch {
+              return null
+            }
+          },
+          { timeout: 3000 }
+        )
+      ).jsonValue()
       expect(parsed.nodes).toBeDefined()
       expect(Array.isArray(parsed.nodes)).toBe(true)
       for (const node of parsed.nodes) {

browser_tests/tests/dialog.spec.ts

@@ -345,23 +345,17 @@ test.describe('Support', () => {
     comfyPage
   }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-
-    // Prevent loading the external page
-    await comfyPage.page
-      .context()
-      .route('https://support.comfy.org/**', (route) =>
-        route.fulfill({ body: '<html></html>', contentType: 'text/html' })
-      )
-
-    const popupPromise = comfyPage.page.waitForEvent('popup')
+    const pagePromise = comfyPage.page.context().waitForEvent('page')
     await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Support'])
-    const popup = await popupPromise
+    const newPage = await pagePromise
 
-    const url = new URL(popup.url())
-    expect(url.hostname).toBe('support.comfy.org')
+    await newPage.waitForLoadState('networkidle')
+    await expect(newPage).toHaveURL(/.*support\.comfy\.org.*/)
+
+    const url = new URL(newPage.url())
     expect(url.searchParams.get('tf_42243568391700')).toBe('oss')
 
-    await popup.close()
+    await newPage.close()
   })
 })
 

browser_tests/tests/featureFlags.spec.ts

@@ -37,9 +37,12 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
 
       // Monitor for server feature flags
       const checkInterval = setInterval(() => {
-        const flags = window.app?.api?.serverFeatureFlags?.value
-        if (flags && Object.keys(flags).length > 0) {
-          window.__capturedMessages!.serverFeatureFlags = flags
+        if (
+          window.app?.api?.serverFeatureFlags &&
+          Object.keys(window.app.api.serverFeatureFlags).length > 0
+        ) {
+          window.__capturedMessages!.serverFeatureFlags =
+            window.app.api.serverFeatureFlags
           clearInterval(checkInterval)
         }
       }, 100)
@@ -93,7 +96,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
   }) => {
     // Get the actual server feature flags from the backend
     const serverFlags = await comfyPage.page.evaluate(() => {
-      return window.app!.api.serverFeatureFlags.value
+      return window.app!.api.serverFeatureFlags
     })
 
     // Verify we received real feature flags from the backend
@@ -126,8 +129,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     // Test that the method only returns true for boolean true values
     const testResults = await comfyPage.page.evaluate(() => {
       // Temporarily modify serverFeatureFlags to test behavior
-      const original = window.app!.api.serverFeatureFlags.value
-      window.app!.api.serverFeatureFlags.value = {
+      const original = window.app!.api.serverFeatureFlags
+      window.app!.api.serverFeatureFlags = {
         bool_true: true,
         bool_false: false,
         string_value: 'yes',
@@ -144,7 +147,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       }
 
       // Restore original
-      window.app!.api.serverFeatureFlags.value = original
+      window.app!.api.serverFeatureFlags = original
       return results
     })
 
@@ -279,8 +282,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
       // Monitor when feature flags arrive by checking periodically
       const checkFeatureFlags = setInterval(() => {
         if (
-          window.app?.api?.serverFeatureFlags?.value
-            ?.supports_preview_metadata !== undefined
+          window.app?.api?.serverFeatureFlags?.supports_preview_metadata !==
+          undefined
         ) {
           window.__appReadiness!.featureFlagsReceived = true
           clearInterval(checkFeatureFlags)
@@ -317,8 +320,8 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     // Wait for feature flags to be received
     await newPage.waitForFunction(
       () =>
-        window.app?.api?.serverFeatureFlags?.value
-          ?.supports_preview_metadata !== undefined,
+        window.app?.api?.serverFeatureFlags?.supports_preview_metadata !==
+        undefined,
       {
         timeout: 10000
       }
@@ -328,7 +331,7 @@ test.describe('Feature Flags', { tag: ['@slow', '@settings'] }, () => {
     const readiness = await newPage.evaluate(() => {
       return {
         ...window.__appReadiness,
-        currentFlags: window.app!.api.serverFeatureFlags.value
+        currentFlags: window.app!.api.serverFeatureFlags
       }
     })
 

browser_tests/tests/groupNode.spec.ts

@@ -10,7 +10,6 @@ import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
 test.beforeEach(async ({ comfyPage }) => {
   await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Disabled')
-  await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
   await comfyPage.settings.setSetting('Comfy.NodeSearchBoxImpl', 'v1 (legacy)')
 })
 

browser_tests/tests/interaction.spec.ts

@@ -736,25 +736,6 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
     )
-    // Wait for V2 persistence debounce to save the modified workflow
-    const start = Date.now()
-    await comfyPage.page.waitForFunction((since) => {
-      for (let i = 0; i < window.localStorage.length; i++) {
-        const key = window.localStorage.key(i)
-        if (!key?.startsWith('Comfy.Workflow.DraftIndex.v2:')) continue
-        const json = window.localStorage.getItem(key)
-        if (!json) continue
-        try {
-          const index = JSON.parse(json)
-          if (typeof index.updatedAt === 'number' && index.updatedAt >= since) {
-            return true
-          }
-        } catch {
-          // ignore
-        }
-      }
-      return false
-    }, start)
     await comfyPage.setup({ clearStorage: false })
     await expect(comfyPage.canvas).toHaveScreenshot(
       'single_ksampler_modified.png'
@@ -777,17 +758,10 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
       await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
       await comfyPage.menu.topbar.saveWorkflow(workflowB)
 
-      // Wait for sessionStorage to persist the workflow paths before reloading
-      // V2 persistence uses sessionStorage with client-scoped keys
-      await comfyPage.page.waitForFunction(() => {
-        for (let i = 0; i < window.sessionStorage.length; i++) {
-          const key = window.sessionStorage.key(i)
-          if (key?.startsWith('Comfy.Workflow.OpenPaths:')) {
-            return true
-          }
-        }
-        return false
-      })
+      // Wait for localStorage to persist the workflow paths before reloading
+      await comfyPage.page.waitForFunction(
+        () => !!window.localStorage.getItem('Comfy.OpenWorkflowsPaths')
+      )
       await comfyPage.setup({ clearStorage: false })
     })
 

browser_tests/tests/nodeHelp.spec.ts

@@ -27,7 +27,6 @@ test.describe('Node Help', { tag: ['@slow', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setup()
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
   })
 
   test.describe('Selection Toolbox', () => {

browser_tests/tests/propertiesPanel/propertiesPanelPosition.spec.ts

@@ -5,7 +5,6 @@ import { TestIds } from '../../fixtures/selectors'
 
 test.describe('Properties panel position', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     // Open a sidebar tab to ensure sidebar is visible
     await comfyPage.menu.nodeLibraryTab.open()
     await comfyPage.actionbar.propertiesButton.click()

browser_tests/tests/remoteWidgets.spec.ts

@@ -53,7 +53,6 @@ test.describe('Remote COMBO Widget', { tag: '@widget' }, () => {
 
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     await comfyPage.settings.setSetting(
       'Comfy.NodeSearchBoxImpl',
       'v1 (legacy)'

browser_tests/tests/sidebar/nodeLibrary.spec.ts

@@ -5,7 +5,6 @@ import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
 test.describe('Node library sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', false)
     await comfyPage.settings.setSetting('Comfy.NodeLibrary.Bookmarks.V2', [])
     await comfyPage.settings.setSetting(
       'Comfy.NodeLibrary.BookmarksCustomization',

browser_tests/tests/subgraph.spec.ts

@@ -375,45 +375,6 @@ test.describe('Subgraph Operations', { tag: ['@slow', '@subgraph'] }, () => {
     })
   })
 
-  test.describe('Subgraph Unpacking', () => {
-    test('Unpacking subgraph with duplicate links does not create extra links', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-duplicate-links'
-      )
-
-      const result = await comfyPage.page.evaluate(() => {
-        const graph = window.app!.graph!
-        const subgraphNode = graph.nodes.find((n) => n.isSubgraphNode())
-        if (!subgraphNode || !subgraphNode.isSubgraphNode()) {
-          return { error: 'No subgraph node found' }
-        }
-
-        graph.unpackSubgraph(subgraphNode)
-
-        const linkCount = graph.links.size
-        const nodes = graph.nodes
-        const ksampler = nodes.find((n) => n.type === 'KSampler')
-        if (!ksampler) return { error: 'No KSampler found after unpack' }
-
-        const linkedInputCount = ksampler.inputs.filter(
-          (i) => i.link != null
-        ).length
-
-        return { linkCount, linkedInputCount, nodeCount: nodes.length }
-      })
-
-      expect(result).not.toHaveProperty('error')
-      // Should have exactly 1 link (EmptyLatentImage→KSampler)
-      // not 4 (with 3 duplicates). The KSampler→output link is dropped
-      // because the subgraph output has no downstream connection.
-      expect(result.linkCount).toBe(1)
-      // KSampler should have exactly 1 linked input (latent_image)
-      expect(result.linkedInputCount).toBe(1)
-    })
-  })
-
   test.describe('Subgraph Creation and Deletion', () => {
     test('Can create subgraph from selected nodes', async ({ comfyPage }) => {
       await comfyPage.workflow.loadWorkflow('default')

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

@@ -1,22 +1,23 @@
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '../../../../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
 
 test.describe('Vue Nodes Image Preview', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.loadWorkflow('widgets/load_image_widget')
     await comfyPage.vueNodes.waitForNodes()
   })
 
-  async function loadImageOnNode(comfyPage: ComfyPage) {
-    const loadImageNode = (
-      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
-    )[0]
+  async function loadImageOnNode(
+    comfyPage: Awaited<
+      ReturnType<(typeof test)['info']>
+    >['fixtures']['comfyPage']
+  ) {
+    const loadImageNode = (await comfyPage.getNodeRefsByType('LoadImage'))[0]
     const { x, y } = await loadImageNode.getPosition()
 
-    await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
+    await comfyPage.dragAndDropFile('image64x64.webp', {
       dropPosition: { x, y }
     })
 
@@ -28,7 +29,6 @@ test.describe('Vue Nodes Image Preview', () => {
     return imagePreview
   }
 
-  // TODO(#8143): Re-enable after image preview sync is working in CI
   test.fixme('opens mask editor from image preview button', async ({
     comfyPage
   }) => {
@@ -40,7 +40,6 @@ test.describe('Vue Nodes Image Preview', () => {
     await expect(comfyPage.page.locator('.mask-editor-dialog')).toBeVisible()
   })
 
-  // TODO(#8143): Re-enable after image preview sync is working in CI
   test.fixme('shows image context menu options', async ({ comfyPage }) => {
     await loadImageOnNode(comfyPage)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.1",
+  "version": "1.40.8",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -70,14 +70,13 @@
     "@primevue/themes": "catalog:",
     "@sentry/vue": "catalog:",
     "@sparkjsdev/spark": "catalog:",
-    "@tiptap/core": "catalog:",
-    "@tiptap/extension-link": "catalog:",
-    "@tiptap/extension-table": "catalog:",
-    "@tiptap/extension-table-cell": "catalog:",
-    "@tiptap/extension-table-header": "catalog:",
-    "@tiptap/extension-table-row": "catalog:",
-    "@tiptap/pm": "catalog:",
-    "@tiptap/starter-kit": "catalog:",
+    "@tiptap/core": "^2.10.4",
+    "@tiptap/extension-link": "^2.10.4",
+    "@tiptap/extension-table": "^2.10.4",
+    "@tiptap/extension-table-cell": "^2.10.4",
+    "@tiptap/extension-table-header": "^2.10.4",
+    "@tiptap/extension-table-row": "^2.10.4",
+    "@tiptap/starter-kit": "^2.10.4",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "@xterm/addon-fit": "^0.10.0",
@@ -94,9 +93,9 @@
     "extendable-media-recorder-wav-encoder": "^7.0.129",
     "firebase": "catalog:",
     "fuse.js": "^7.0.0",
-    "glob": "catalog:",
+    "glob": "^11.0.3",
     "jsonata": "catalog:",
-    "jsondiffpatch": "catalog:",
+    "jsondiffpatch": "^0.6.0",
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
     "pinia": "catalog:",

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

@@ -1192,7 +1192,7 @@ button.comfy-queue-btn {
 .graphdialog {
   min-height: 1em;
   background-color: var(--comfy-menu-bg);
-  z-index: 1500;
+  z-index: 41; /* z-index is set to 41 here in order to appear over selection-overlay-container which should have a z-index of 40 */
 }
 
 .graphdialog .name {

packages/shared-frontend-utils/src/formatUtil.test.ts

@@ -3,7 +3,6 @@ import { describe, expect, it } from 'vitest'
 import {
   getMediaTypeFromFilename,
   highlightQuery,
-  isPreviewableMediaType,
   truncateFilename
 } from './formatUtil'
 
@@ -57,8 +56,7 @@ describe('formatUtil', () => {
         { filename: 'image.jpeg', expected: 'image' },
         { filename: 'animation.gif', expected: 'image' },
         { filename: 'web.webp', expected: 'image' },
-        { filename: 'bitmap.bmp', expected: 'image' },
-        { filename: 'modern.avif', expected: 'image' }
+        { filename: 'bitmap.bmp', expected: 'image' }
       ]
 
       it.for(imageTestCases)(
@@ -98,37 +96,26 @@ describe('formatUtil', () => {
         expect(getMediaTypeFromFilename('scene.fbx')).toBe('3D')
         expect(getMediaTypeFromFilename('asset.gltf')).toBe('3D')
         expect(getMediaTypeFromFilename('binary.glb')).toBe('3D')
-        expect(getMediaTypeFromFilename('apple.usdz')).toBe('3D')
-      })
-    })
-
-    describe('text files', () => {
-      it('should identify text file extensions correctly', () => {
-        expect(getMediaTypeFromFilename('notes.txt')).toBe('text')
-        expect(getMediaTypeFromFilename('readme.md')).toBe('text')
-        expect(getMediaTypeFromFilename('data.json')).toBe('text')
-        expect(getMediaTypeFromFilename('table.csv')).toBe('text')
-        expect(getMediaTypeFromFilename('config.yaml')).toBe('text')
       })
     })
 
     describe('edge cases', () => {
       it('should handle empty strings', () => {
-        expect(getMediaTypeFromFilename('')).toBe('other')
+        expect(getMediaTypeFromFilename('')).toBe('image')
       })
 
       it('should handle files without extensions', () => {
-        expect(getMediaTypeFromFilename('README')).toBe('other')
+        expect(getMediaTypeFromFilename('README')).toBe('image')
       })
 
       it('should handle unknown extensions', () => {
-        expect(getMediaTypeFromFilename('document.pdf')).toBe('other')
-        expect(getMediaTypeFromFilename('archive.bin')).toBe('other')
+        expect(getMediaTypeFromFilename('document.pdf')).toBe('image')
+        expect(getMediaTypeFromFilename('data.json')).toBe('image')
       })
 
       it('should handle files with multiple dots', () => {
         expect(getMediaTypeFromFilename('my.file.name.png')).toBe('image')
-        expect(getMediaTypeFromFilename('archive.tar.gz')).toBe('other')
+        expect(getMediaTypeFromFilename('archive.tar.gz')).toBe('image')
       })
 
       it('should handle paths with directories', () => {
@@ -137,8 +124,8 @@ describe('formatUtil', () => {
       })
 
       it('should handle null and undefined gracefully', () => {
-        expect(getMediaTypeFromFilename(null)).toBe('other')
-        expect(getMediaTypeFromFilename(undefined)).toBe('other')
+        expect(getMediaTypeFromFilename(null)).toBe('image')
+        expect(getMediaTypeFromFilename(undefined)).toBe('image')
       })
 
       it('should handle special characters in filenames', () => {
@@ -197,18 +184,4 @@ describe('formatUtil', () => {
       )
     })
   })
-
-  describe('isPreviewableMediaType', () => {
-    it('returns true for image/video/audio/3D', () => {
-      expect(isPreviewableMediaType('image')).toBe(true)
-      expect(isPreviewableMediaType('video')).toBe(true)
-      expect(isPreviewableMediaType('audio')).toBe(true)
-      expect(isPreviewableMediaType('3D')).toBe(true)
-    })
-
-    it('returns false for text/other', () => {
-      expect(isPreviewableMediaType('text')).toBe(false)
-      expect(isPreviewableMediaType('other')).toBe(false)
-    })
-  })
 })

packages/shared-frontend-utils/src/formatUtil.ts

@@ -494,41 +494,19 @@ export function formatDuration(milliseconds: number): string {
   return parts.join(' ')
 }
 
-const IMAGE_EXTENSIONS = [
-  'png',
-  'jpg',
-  'jpeg',
-  'gif',
-  'webp',
-  'bmp',
-  'avif',
-  'tif',
-  'tiff'
-] as const
+const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'] as const
 const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi'] as const
 const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const
-const THREE_D_EXTENSIONS = ['obj', 'fbx', 'gltf', 'glb', 'usdz'] as const
-const TEXT_EXTENSIONS = [
-  'txt',
-  'md',
-  'markdown',
-  'json',
-  'csv',
-  'yaml',
-  'yml',
-  'xml',
-  'log'
-] as const
+const THREE_D_EXTENSIONS = ['obj', 'fbx', 'gltf', 'glb'] as const
 
-const MEDIA_TYPES = ['image', 'video', 'audio', '3D', 'text', 'other'] as const
-export type MediaType = (typeof MEDIA_TYPES)[number]
+const MEDIA_TYPES = ['image', 'video', 'audio', '3D'] as const
+type MediaType = (typeof MEDIA_TYPES)[number]
 
 // Type guard helper for checking array membership
 type ImageExtension = (typeof IMAGE_EXTENSIONS)[number]
 type VideoExtension = (typeof VIDEO_EXTENSIONS)[number]
 type AudioExtension = (typeof AUDIO_EXTENSIONS)[number]
 type ThreeDExtension = (typeof THREE_D_EXTENSIONS)[number]
-type TextExtension = (typeof TEXT_EXTENSIONS)[number]
 
 /**
  * Truncates a filename while preserving the extension
@@ -565,30 +543,20 @@ export function truncateFilename(
 /**
  * Determines the media type from a filename's extension (singular form)
  * @param filename The filename to analyze
- * @returns The media type: 'image', 'video', 'audio', '3D', 'text', or 'other'
+ * @returns The media type: 'image', 'video', 'audio', or '3D'
  */
 export function getMediaTypeFromFilename(
   filename: string | null | undefined
 ): MediaType {
-  if (!filename) return 'other'
+  if (!filename) return 'image'
   const ext = filename.split('.').pop()?.toLowerCase()
-  if (!ext) return 'other'
+  if (!ext) return 'image'
 
   // Type-safe array includes check using type assertion
   if (IMAGE_EXTENSIONS.includes(ext as ImageExtension)) return 'image'
   if (VIDEO_EXTENSIONS.includes(ext as VideoExtension)) return 'video'
   if (AUDIO_EXTENSIONS.includes(ext as AudioExtension)) return 'audio'
   if (THREE_D_EXTENSIONS.includes(ext as ThreeDExtension)) return '3D'
-  if (TEXT_EXTENSIONS.includes(ext as TextExtension)) return 'text'
 
-  return 'other'
-}
-
-export function isPreviewableMediaType(mediaType: MediaType): boolean {
-  return (
-    mediaType === 'image' ||
-    mediaType === 'video' ||
-    mediaType === 'audio' ||
-    mediaType === '3D'
-  )
+  return 'image'
 }

pnpm-workspace.yaml

@@ -9,12 +9,12 @@ catalog:
   '@iconify-json/lucide': ^1.1.178
   '@iconify/json': ^2.2.380
   '@iconify/tailwind4': ^1.2.0
-  '@intlify/eslint-plugin-vue-i18n': ^4.1.1
+  '@intlify/eslint-plugin-vue-i18n': ^4.1.0
   '@lobehub/i18n-cli': ^1.26.1
-  '@nx/eslint': 22.5.2
-  '@nx/playwright': 22.5.2
-  '@nx/storybook': 22.5.2
-  '@nx/vite': 22.5.2
+  '@nx/eslint': 22.2.6
+  '@nx/playwright': 22.2.6
+  '@nx/storybook': 22.2.4
+  '@nx/vite': 22.2.6
   '@pinia/testing': ^1.0.3
   '@playwright/test': ^1.58.1
   '@primeuix/forms': 0.0.2
@@ -27,19 +27,11 @@ catalog:
   '@sentry/vite-plugin': ^4.6.0
   '@sentry/vue': ^10.32.1
   '@sparkjsdev/spark': ^0.1.10
-  '@storybook/addon-docs': ^10.2.10
+  '@storybook/addon-docs': ^10.1.9
   '@storybook/addon-mcp': 0.1.6
-  '@storybook/vue3': ^10.2.10
-  '@storybook/vue3-vite': ^10.2.10
-  '@tailwindcss/vite': ^4.2.0
-  '@tiptap/core': ^2.27.2
-  '@tiptap/extension-link': ^2.27.2
-  '@tiptap/extension-table': ^2.27.2
-  '@tiptap/extension-table-cell': ^2.27.2
-  '@tiptap/extension-table-header': ^2.27.2
-  '@tiptap/extension-table-row': ^2.27.2
-  '@tiptap/pm': 2.27.2
-  '@tiptap/starter-kit': ^2.27.2
+  '@storybook/vue3': ^10.1.9
+  '@storybook/vue3-vite': ^10.1.9
+  '@tailwindcss/vite': ^4.1.12
   '@types/fs-extra': ^11.0.4
   '@types/jsdom': ^21.1.7
   '@types/node': ^24.1.0
@@ -53,7 +45,7 @@ catalog:
   '@vueuse/integrations': ^14.2.0
   '@webgpu/types': ^0.1.66
   algoliasearch: ^5.21.0
-  axios: ^1.13.5
+  axios: ^1.8.2
   cross-env: ^10.1.0
   cva: 1.0.0-beta.4
   dompurify: ^3.3.1
@@ -63,26 +55,24 @@ catalog:
   eslint-import-resolver-typescript: ^4.4.4
   eslint-plugin-import-x: ^4.16.1
   eslint-plugin-oxlint: 1.25.0
-  eslint-plugin-storybook: ^10.2.10
+  eslint-plugin-storybook: ^10.1.9
   eslint-plugin-unused-imports: ^4.3.0
   eslint-plugin-vue: ^10.6.2
   firebase: ^11.6.0
-  glob: ^13.0.6
   globals: ^16.5.0
   happy-dom: ^20.0.11
   husky: ^9.1.7
   jiti: 2.6.1
   jsdom: ^27.4.0
   jsonata: ^2.1.0
-  jsondiffpatch: ^0.7.3
   knip: ^5.75.1
   lint-staged: ^16.2.7
   markdown-table: ^3.0.4
   mixpanel-browser: ^2.71.0
-  nx: 22.5.2
-  oxfmt: ^0.34.0
-  oxlint: ^1.49.0
-  oxlint-tsgolint: ^0.14.2
+  nx: 22.2.6
+  oxfmt: ^0.26.0
+  oxlint: ^1.33.0
+  oxlint-tsgolint: ^0.9.1
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
@@ -91,9 +81,9 @@ catalog:
   primevue: ^4.2.5
   reka-ui: ^2.5.0
   rollup-plugin-visualizer: ^6.0.4
-  storybook: ^10.2.10
+  storybook: ^10.1.9
   stylelint: ^16.26.1
-  tailwindcss: ^4.2.0
+  tailwindcss: ^4.1.12
   tailwindcss-primeui: ^0.6.1
   tsx: ^4.15.6
   tw-animate-css: ^1.3.8
@@ -110,10 +100,10 @@ catalog:
   vitest: ^4.0.16
   vue: ^3.5.13
   vue-component-type-helpers: ^3.2.1
-  vue-eslint-parser: ^10.4.0
-  vue-i18n: ^9.14.5
+  vue-eslint-parser: ^10.2.0
+  vue-i18n: ^9.14.3
   vue-router: ^4.4.3
-  vue-tsc: ^3.2.5
+  vue-tsc: ^3.2.1
   vuefire: ^3.2.1
   wwobjloader2: ^6.2.1
   yjs: ^13.6.27
@@ -140,5 +130,4 @@ onlyBuiltDependencies:
   - oxc-resolver
 
 overrides:
-  '@tiptap/pm': 2.27.2
   '@types/eslint': '-'

scripts/cicd/pr-playwright-deploy-and-comment.sh

@@ -2,7 +2,7 @@
 set -e
 
 # Deploy Playwright test reports to Cloudflare Pages and comment on PR
-# Usage: ./pr-playwright-deploy-and-comment.sh <pr_number> <branch_name> <status>
+# Usage: ./pr-playwright-deploy-and-comment.sh <pr_number> <branch_name> <status> [start_time]
 
 # Input validation
 # Validate PR number is numeric
@@ -31,6 +31,8 @@ case "$STATUS" in
         ;;
 esac
 
+START_TIME="${4:-$(date -u '+%m/%d/%Y, %I:%M:%S %p')}"
+
 # Required environment variables
 : "${GITHUB_TOKEN:?GITHUB_TOKEN is required}"
 : "${GITHUB_REPOSITORY:?GITHUB_REPOSITORY is required}"
@@ -133,8 +135,23 @@ post_comment() {
 # Main execution
 if [ "$STATUS" = "starting" ]; then
     # Post concise starting comment
-    comment="$COMMENT_MARKER
-## 🎭 Playwright: ⏳ Running..."
+    comment=$(cat <<EOF
+$COMMENT_MARKER
+## 🎭 Playwright Tests: ⏳ Running...
+
+Tests started at $START_TIME UTC
+
+<details>
+<summary>📊 Browser Tests</summary>
+
+- **chromium**: Running...
+- **chromium-0.5x**: Running...
+- **chromium-2x**: Running...
+- **mobile-chrome**: Running...
+
+</details>
+EOF
+)
     post_comment "$comment"
     
 else
@@ -283,7 +300,7 @@ else
     
     # Generate compact single-line comment
     comment="$COMMENT_MARKER
-## 🎭 Playwright: $status_icon $total_passed passed, $total_failed failed$flaky_note"
+**Playwright:** $status_icon $total_passed passed, $total_failed failed$flaky_note"
 
     # Extract and display failed tests from all browsers (flaky tests are treated as passing)
     if [ $total_failed -gt 0 ]; then

scripts/cicd/pr-storybook-deploy-and-comment.sh

@@ -2,7 +2,7 @@
 set -e
 
 # Deploy Storybook to Cloudflare Pages and comment on PR
-# Usage: ./pr-storybook-deploy-and-comment.sh <pr_number> <branch_name> <status>
+# Usage: ./pr-storybook-deploy-and-comment.sh <pr_number> <branch_name> <status> [start_time]
 
 # Input validation
 # Validate PR number is numeric
@@ -31,6 +31,7 @@ case "$STATUS" in
         ;;
 esac
 
+START_TIME="${4:-$(date -u '+%m/%d/%Y, %I:%M:%S %p')}"
 
 # Required environment variables
 : "${GITHUB_TOKEN:?GITHUB_TOKEN is required}"
@@ -119,9 +120,50 @@ post_comment() {
 
 # Main execution
 if [ "$STATUS" = "starting" ]; then
-    # Post starting comment
-    comment="$COMMENT_MARKER
-## 🎨 Storybook: <img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> Building..."
+    # Check if this is a version-bump branch
+    IS_VERSION_BUMP="false"
+    if echo "$BRANCH_NAME" | grep -q "^version-bump-"; then
+        IS_VERSION_BUMP="true"
+    fi
+    
+    # Post starting comment with appropriate message
+    if [ "$IS_VERSION_BUMP" = "true" ]; then
+        comment=$(cat <<EOF
+$COMMENT_MARKER
+## 🎨 Storybook Build Status
+
+<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Build is starting...**
+
+⏰ Started at: $START_TIME UTC
+
+### 🚀 Building Storybook
+- 📦 Installing dependencies...
+- 🔧 Building Storybook components...
+- 🎨 Running Chromatic visual tests...
+
+---
+⏱️ Please wait while the Storybook build is in progress...
+EOF
+)
+    else
+        comment=$(cat <<EOF
+$COMMENT_MARKER
+## 🎨 Storybook Build Status
+
+<img alt='loading' src='https://github.com/user-attachments/assets/755c86ee-e445-4ea8-bc2c-cca85df48686' width='14px' height='14px'/> **Build is starting...**
+
+⏰ Started at: $START_TIME UTC
+
+### 🚀 Building Storybook
+- 📦 Installing dependencies...
+- 🔧 Building Storybook components...
+- 🌐 Preparing deployment to Cloudflare Pages...
+
+---
+⏱️ Please wait while the Storybook build is in progress...
+EOF
+)
+    fi
     post_comment "$comment"
     
 elif [ "$STATUS" = "completed" ]; then
@@ -150,57 +192,56 @@ elif [ "$STATUS" = "completed" ]; then
     WORKFLOW_CONCLUSION="${WORKFLOW_CONCLUSION:-success}"
     WORKFLOW_URL="${WORKFLOW_URL:-}"
     
-    # Generate compact header based on conclusion
+    # Generate completion comment based on conclusion
     if [ "$WORKFLOW_CONCLUSION" = "success" ]; then
         status_icon="✅"
-        status_text="Built"
+        status_text="Build completed successfully!"
+        footer_text="🎉 Your Storybook is ready for review!"
     elif [ "$WORKFLOW_CONCLUSION" = "skipped" ]; then
         status_icon="⏭️"
-        status_text="Skipped"
+        status_text="Build skipped."
+        footer_text="ℹ️ Chromatic was skipped for this PR."
     elif [ "$WORKFLOW_CONCLUSION" = "cancelled" ]; then
         status_icon="🚫"
-        status_text="Cancelled"
+        status_text="Build cancelled."
+        footer_text="ℹ️ The Chromatic run was cancelled."
     else
         status_icon="❌"
-        status_text="Failed"
+        status_text="Build failed!"
+        footer_text="⚠️ Please check the workflow logs for error details."
     fi
+    
+    comment="$COMMENT_MARKER
+## 🎨 Storybook Build Status
 
-    # Build compact header with optional storybook link
-    header="## 🎨 Storybook: $status_icon $status_text"
-    if [ "$deployment_url" != "Not deployed" ] && [ "$deployment_url" != "Deployment failed" ] && [ "$WORKFLOW_CONCLUSION" = "success" ]; then
-        header="$header — $deployment_url"
-    fi
-
-    # Build details section
-    details="<details>
-<summary>Details</summary>
+$status_icon **$status_text**
 
 ⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC
 
-**Links**
+### 🔗 Links
 - [📊 View Workflow Run]($WORKFLOW_URL)"
-
+    
+    # Add deployment status
     if [ "$deployment_url" != "Not deployed" ]; then
         if [ "$deployment_url" = "Deployment failed" ]; then
-            details="$details
+            comment="$comment
 - ❌ Storybook deployment failed"
-        elif [ "$WORKFLOW_CONCLUSION" != "success" ]; then
-            details="$details
-- ⚠️ Build failed — $deployment_url"
+        elif [ "$WORKFLOW_CONCLUSION" = "success" ]; then
+            comment="$comment
+- 🎨 $deployment_url"
+        else
+            comment="$comment
+- ⚠️ Build failed - $deployment_url"
         fi
     elif [ "$WORKFLOW_CONCLUSION" != "success" ]; then
-        details="$details
+        comment="$comment
 - ⏭️ Storybook deployment skipped (build did not succeed)"
     fi
+    
+    comment="$comment
 
-    details="$details
-
-</details>"
-
-    comment="$COMMENT_MARKER
-$header
-
-$details"
+---
+$footer_text"
     
     post_comment "$comment"
 fi

src/components/TopMenuSection.vue

@@ -169,7 +169,6 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -190,7 +189,6 @@ const { toastErrorHandler } = useErrorHandling()
 const commandStore = useCommandStore()
 const queueStore = useQueueStore()
 const executionStore = useExecutionStore()
-const executionErrorStore = useExecutionErrorStore()
 const queueUIStore = useQueueUIStore()
 const sidebarTabStore = useSidebarTabStore()
 const { activeJobsCount } = storeToRefs(queueStore)
@@ -264,7 +262,7 @@ const shouldShowRedDot = computed((): boolean => {
   return shouldShowConflictRedDot.value
 })
 
-const { hasAnyError } = storeToRefs(executionErrorStore)
+const { hasAnyError } = storeToRefs(executionStore)
 
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)

src/components/common/MarqueeLine.test.ts

@@ -1,22 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import MarqueeLine from './MarqueeLine.vue'
-
-describe(MarqueeLine, () => {
-  it('renders slot content', () => {
-    const wrapper = mount(MarqueeLine, {
-      slots: { default: 'Hello World' }
-    })
-    expect(wrapper.text()).toBe('Hello World')
-  })
-
-  it('renders content inside a span within the container', () => {
-    const wrapper = mount(MarqueeLine, {
-      slots: { default: 'Test Text' }
-    })
-    const span = wrapper.find('span')
-    expect(span.exists()).toBe(true)
-    expect(span.text()).toBe('Test Text')
-  })
-})

src/components/common/MarqueeLine.vue

@@ -1,24 +0,0 @@
-<template>
-  <div
-    class="overflow-hidden [container-type:inline-size] [mask-image:linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:[mask-image:none]"
-  >
-    <span
-      class="whitespace-nowrap inline-block min-w-full text-center [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:[animation:marquee-scroll_3s_linear_infinite_alternate]"
-    >
-      <slot />
-    </span>
-  </div>
-</template>
-
-<style>
-@keyframes marquee-scroll {
-  0%,
-  20% {
-    transform: translateX(0);
-  }
-  80%,
-  100% {
-    transform: translateX(var(--_marquee-end));
-  }
-}
-</style>

src/components/common/ScrubableNumberInput.vue

@@ -6,7 +6,7 @@
     <slot name="background" />
     <Button
       v-if="!hideButtons"
-      :aria-label="t('g.decrement')"
+      :aria-label="t('g.ariaLabel.decrement')"
       data-testid="decrement"
       class="h-full w-8 rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"
@@ -51,7 +51,7 @@
     <slot />
     <Button
       v-if="!hideButtons"
-      :aria-label="t('g.increment')"
+      :aria-label="t('g.ariaLabel.increment')"
       data-testid="increment"
       class="h-full w-8 rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
       variant="muted-textonly"

src/components/common/SystemStatsPanel.vue

@@ -6,12 +6,10 @@
       </h2>
       <div class="grid grid-cols-2 gap-2">
         <template v-for="col in systemColumns" :key="col.field">
-          <div :class="cn('font-medium', isOutdated(col) && 'text-danger-100')">
+          <div class="font-medium">
             {{ col.header }}
           </div>
-          <div :class="cn(isOutdated(col) && 'text-danger-100')">
-            {{ getDisplayValue(col) }}
-          </div>
+          <div>{{ getDisplayValue(col) }}</div>
         </template>
       </div>
     </div>
@@ -49,7 +47,6 @@ import DeviceInfo from '@/components/common/DeviceInfo.vue'
 import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
 import { formatCommitHash, formatSize } from '@/utils/formatUtil'
-import { cn } from '@/utils/tailwindUtil'
 
 const props = defineProps<{
   stats: SystemStats
@@ -79,8 +76,7 @@ const localColumns: ColumnDef[] = [
   { field: 'pytorch_version', header: 'Pytorch Version' },
   { field: 'argv', header: 'Arguments' },
   { field: 'ram_total', header: 'RAM Total', formatNumber: formatSize },
-  { field: 'ram_free', header: 'RAM Free', formatNumber: formatSize },
-  { field: 'installed_templates_version', header: 'Templates Version' }
+  { field: 'ram_free', header: 'RAM Free', formatNumber: formatSize }
 ]
 
 /** Columns for cloud distribution */
@@ -101,13 +97,6 @@ const cloudColumns: ColumnDef[] = [
 
 const systemColumns = computed(() => (isCloud ? cloudColumns : localColumns))
 
-function isOutdated(column: ColumnDef): boolean {
-  if (column.field !== 'installed_templates_version') return false
-  const installed = props.stats.system.installed_templates_version
-  const required = props.stats.system.required_templates_version
-  return !!installed && !!required && installed !== required
-}
-
 const getDisplayValue = (column: ColumnDef) => {
   const value = systemInfo.value[column.field]
   if (column.formatNumber && typeof value === 'number') {

src/components/common/TextTickerMultiLine.test.ts

@@ -1,105 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { nextTick } from 'vue'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-
-import MarqueeLine from './MarqueeLine.vue'
-import TextTickerMultiLine from './TextTickerMultiLine.vue'
-
-type Callback = () => void
-
-const resizeCallbacks: Callback[] = []
-const mutationCallbacks: Callback[] = []
-
-vi.mock('@vueuse/core', async () => {
-  const actual = await vi.importActual('@vueuse/core')
-  return {
-    ...actual,
-    useResizeObserver: (_target: unknown, cb: Callback) => {
-      resizeCallbacks.push(cb)
-      return { stop: vi.fn() }
-    },
-    useMutationObserver: (_target: unknown, cb: Callback) => {
-      mutationCallbacks.push(cb)
-      return { stop: vi.fn() }
-    }
-  }
-})
-
-function mockElementSize(
-  el: HTMLElement,
-  clientWidth: number,
-  scrollWidth: number
-) {
-  Object.defineProperty(el, 'clientWidth', {
-    value: clientWidth,
-    configurable: true
-  })
-  Object.defineProperty(el, 'scrollWidth', {
-    value: scrollWidth,
-    configurable: true
-  })
-}
-
-describe(TextTickerMultiLine, () => {
-  let wrapper: ReturnType<typeof mount>
-
-  afterEach(() => {
-    wrapper?.unmount()
-    resizeCallbacks.length = 0
-    mutationCallbacks.length = 0
-  })
-
-  function mountComponent(text: string) {
-    wrapper = mount(TextTickerMultiLine, {
-      slots: { default: text }
-    })
-    return wrapper
-  }
-
-  function getMeasureEl(): HTMLElement {
-    return wrapper.find('[aria-hidden="true"]').element as HTMLElement
-  }
-
-  async function triggerSplitLines() {
-    resizeCallbacks.forEach((cb) => cb())
-    await nextTick()
-  }
-
-  it('renders slot content', () => {
-    mountComponent('Load Checkpoint')
-    expect(wrapper.text()).toContain('Load Checkpoint')
-  })
-
-  it('renders a single MarqueeLine when text fits', async () => {
-    mountComponent('Short')
-    mockElementSize(getMeasureEl(), 200, 100)
-    await triggerSplitLines()
-
-    expect(wrapper.findAllComponents(MarqueeLine)).toHaveLength(1)
-  })
-
-  it('renders two MarqueeLines when text overflows', async () => {
-    mountComponent('Load Checkpoint Loader Simple')
-    mockElementSize(getMeasureEl(), 100, 300)
-    await triggerSplitLines()
-
-    expect(wrapper.findAllComponents(MarqueeLine)).toHaveLength(2)
-  })
-
-  it('splits text at word boundary when overflowing', async () => {
-    mountComponent('Load Checkpoint Loader')
-    mockElementSize(getMeasureEl(), 100, 200)
-    await triggerSplitLines()
-
-    const lines = wrapper.findAllComponents(MarqueeLine)
-    expect(lines[0].text()).toBe('Load')
-    expect(lines[1].text()).toBe('Checkpoint Loader')
-  })
-
-  it('has hidden measurement element with aria-hidden', () => {
-    mountComponent('Test')
-    const measureEl = wrapper.find('[aria-hidden="true"]')
-    expect(measureEl.exists()).toBe(true)
-    expect(measureEl.classes()).toContain('invisible')
-  })
-})

src/components/common/TextTickerMultiLine.vue

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <!-- Hidden single-line measurement element for overflow detection -->
-    <div
-      ref="measureRef"
-      class="invisible absolute inset-x-0 top-0 overflow-hidden whitespace-nowrap pointer-events-none"
-      aria-hidden="true"
-    >
-      <slot />
-    </div>
-
-    <MarqueeLine v-if="!secondLine">
-      <slot />
-    </MarqueeLine>
-
-    <div v-else class="flex flex-col w-full">
-      <MarqueeLine>{{ firstLine }}</MarqueeLine>
-      <MarqueeLine>{{ secondLine }}</MarqueeLine>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useMutationObserver, useResizeObserver } from '@vueuse/core'
-import { ref } from 'vue'
-
-import MarqueeLine from './MarqueeLine.vue'
-import { splitTextAtWordBoundary } from '@/utils/textTickerUtils'
-
-const measureRef = ref<HTMLElement | null>(null)
-const firstLine = ref('')
-const secondLine = ref('')
-
-function splitLines() {
-  const el = measureRef.value
-  const text = el?.textContent?.trim()
-  if (!el || !text) {
-    firstLine.value = ''
-    secondLine.value = ''
-    return
-  }
-
-  const containerWidth = el.clientWidth
-  const textWidth = el.scrollWidth
-
-  if (textWidth <= containerWidth) {
-    firstLine.value = text
-    secondLine.value = ''
-    return
-  }
-
-  const [first, second] = splitTextAtWordBoundary(
-    text,
-    containerWidth / textWidth
-  )
-  firstLine.value = first
-  secondLine.value = second
-}
-
-useResizeObserver(measureRef, splitLines)
-useMutationObserver(measureRef, splitLines, {
-  childList: true,
-  characterData: true,
-  subtree: true
-})
-</script>

src/components/common/TreeExplorerV2.vue

@@ -1,41 +1,37 @@
 <template>
   <ContextMenuRoot>
-    <ContextMenuTrigger :disabled="!showContextMenu" as-child>
-      <TreeRoot
-        :expanded="[...expandedKeys]"
-        :items="root.children ?? []"
-        :get-key="(item) => item.key"
-        :get-children="
-          (item) => (item.children?.length ? item.children : undefined)
-        "
-        class="m-0 p-0 pb-6"
+    <TreeRoot
+      :expanded="[...expandedKeys]"
+      :items="root.children ?? []"
+      :get-key="(item) => item.key"
+      :get-children="
+        (item) => (item.children?.length ? item.children : undefined)
+      "
+      class="m-0 p-0 pb-6"
+    >
+      <TreeVirtualizer
+        v-slot="{ item }"
+        :estimate-size="36"
+        :text-content="(item) => item.value.label ?? ''"
       >
-        <TreeVirtualizer
-          v-slot="{ item }"
-          :estimate-size="36"
-          :text-content="(item) => item.value.label ?? ''"
+        <TreeExplorerV2Node
+          :item="
+            item as FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>
+          "
+          @node-click="
+            (node: RenderedTreeExplorerNode<ComfyNodeDefImpl>, e: MouseEvent) =>
+              emit('nodeClick', node, e)
+          "
         >
-          <TreeExplorerV2Node
-            :item="
-              item as FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>
-            "
-            @node-click="
-              (
-                node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
-                e: MouseEvent
-              ) => emit('nodeClick', node, e)
-            "
-          >
-            <template #folder="{ node }">
-              <slot name="folder" :node="node" />
-            </template>
-            <template #node="{ node }">
-              <slot name="node" :node="node" />
-            </template>
-          </TreeExplorerV2Node>
-        </TreeVirtualizer>
-      </TreeRoot>
-    </ContextMenuTrigger>
+          <template #folder="{ node }">
+            <slot name="folder" :node="node" />
+          </template>
+          <template #node="{ node }">
+            <slot name="node" :node="node" />
+          </template>
+        </TreeExplorerV2Node>
+      </TreeVirtualizer>
+    </TreeRoot>
 
     <ContextMenuPortal v-if="showContextMenu">
       <ContextMenuContent
@@ -53,11 +49,7 @@
             "
             class="size-4"
           />
-          {{
-            isCurrentNodeBookmarked
-              ? $t('sideToolbar.nodeLibraryTab.sections.unfavoriteNode')
-              : $t('sideToolbar.nodeLibraryTab.sections.favoriteNode')
-          }}
+          {{ $t('sideToolbar.nodeLibraryTab.sections.favorites') }}
         </ContextMenuItem>
       </ContextMenuContent>
     </ContextMenuPortal>
@@ -71,7 +63,6 @@ import {
   ContextMenuItem,
   ContextMenuPortal,
   ContextMenuRoot,
-  ContextMenuTrigger,
   TreeRoot,
   TreeVirtualizer
 } from 'reka-ui'

src/components/common/TreeExplorerV2Node.test.ts

@@ -80,6 +80,10 @@ describe('TreeExplorerV2Node', () => {
         global: {
           stubs: {
             TreeItem: treeItemStub.stub,
+            ContextMenuTrigger: {
+              name: 'ContextMenuTrigger',
+              template: '<div data-testid="context-menu-trigger"><slot /></div>'
+            },
             Teleport: { template: '<div />' }
           },
           provide: {
@@ -141,12 +145,36 @@ describe('TreeExplorerV2Node', () => {
   })
 
   describe('context menu', () => {
-    it('sets contextMenuNode when contextmenu event is triggered on node', async () => {
+    it('renders ContextMenuTrigger when showContextMenu is true for nodes', () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('node'),
+        showContextMenu: true
+      })
+
+      expect(
+        wrapper.find('[data-testid="context-menu-trigger"]').exists()
+      ).toBe(true)
+    })
+
+    it('does not render ContextMenuTrigger for folder items', () => {
+      const { wrapper } = mountComponent({
+        item: createMockItem('folder')
+      })
+
+      expect(
+        wrapper.find('[data-testid="context-menu-trigger"]').exists()
+      ).toBe(false)
+    })
+
+    it('sets contextMenuNode when contextmenu event is triggered', async () => {
       const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)
       const nodeItem = createMockItem('node')
 
       const { wrapper } = mountComponent(
-        { item: nodeItem },
+        {
+          item: nodeItem,
+          showContextMenu: true
+        },
         {
           provide: {
             [InjectKeyContextMenuNode as symbol]: contextMenuNode
@@ -159,24 +187,6 @@ describe('TreeExplorerV2Node', () => {
 
       expect(contextMenuNode.value).toEqual(nodeItem.value)
     })
-
-    it('does not set contextMenuNode for folder items', async () => {
-      const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)
-
-      const { wrapper } = mountComponent(
-        { item: createMockItem('folder') },
-        {
-          provide: {
-            [InjectKeyContextMenuNode as symbol]: contextMenuNode
-          }
-        }
-      )
-
-      const folderDiv = wrapper.find('div.group\\/tree-node')
-      await folderDiv.trigger('contextmenu')
-
-      expect(contextMenuNode.value).toBeNull()
-    })
   })
 
   describe('rendering', () => {

src/components/common/TreeExplorerV2Node.vue

@@ -5,26 +5,27 @@
     :level="item.level"
     as-child
   >
-    <!-- Node -->
-    <div
-      v-if="item.value.type === 'node'"
-      :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
-      :style="rowStyle"
-      draggable="true"
-      @click.stop="handleClick($event, handleToggle, handleSelect)"
-      @contextmenu="handleContextMenu"
-      @mouseenter="handleMouseEnter"
-      @mouseleave="handleMouseLeave"
-      @dragstart="handleDragStart"
-      @dragend="handleDragEnd"
-    >
-      <i class="icon-[comfy--node] size-4 shrink-0 text-muted-foreground" />
-      <span class="min-w-0 flex-1 truncate text-sm text-foreground">
-        <slot name="node" :node="item.value">
-          {{ item.value.label }}
-        </slot>
-      </span>
-    </div>
+    <!-- Node with context menu -->
+    <ContextMenuTrigger v-if="item.value.type === 'node'" as-child>
+      <div
+        :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
+        :style="rowStyle"
+        draggable="true"
+        @click.stop="handleClick($event, handleToggle, handleSelect)"
+        @contextmenu="handleContextMenu"
+        @mouseenter="handleMouseEnter"
+        @mouseleave="handleMouseLeave"
+        @dragstart="handleDragStart"
+        @dragend="handleDragEnd"
+      >
+        <i class="icon-[comfy--node] size-4 shrink-0 text-muted-foreground" />
+        <span class="min-w-0 flex-1 truncate text-sm text-foreground">
+          <slot name="node" :node="item.value">
+            {{ item.value.label }}
+          </slot>
+        </span>
+      </div>
+    </ContextMenuTrigger>
 
     <!-- Folder -->
     <div
@@ -68,7 +69,7 @@
 
 <script setup lang="ts">
 import type { FlattenedItem } from 'reka-ui'
-import { TreeItem } from 'reka-ui'
+import { ContextMenuTrigger, TreeItem } from 'reka-ui'
 import { computed, inject } from 'vue'
 
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'

src/components/common/VirtualGrid.test.ts

@@ -1,189 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import type { Ref } from 'vue'
-import { nextTick, ref } from 'vue'
-
-import VirtualGrid from './VirtualGrid.vue'
-
-type TestItem = { key: string; name: string }
-
-let mockedWidth: Ref<number>
-let mockedHeight: Ref<number>
-let mockedScrollY: Ref<number>
-
-vi.mock('@vueuse/core', async () => {
-  const actual = await vi.importActual<Record<string, unknown>>('@vueuse/core')
-  return {
-    ...actual,
-    useElementSize: () => ({ width: mockedWidth, height: mockedHeight }),
-    useScroll: () => ({ y: mockedScrollY })
-  }
-})
-
-beforeEach(() => {
-  mockedWidth = ref(400)
-  mockedHeight = ref(200)
-  mockedScrollY = ref(0)
-})
-
-function createItems(count: number): TestItem[] {
-  return Array.from({ length: count }, (_, i) => ({
-    key: `item-${i}`,
-    name: `Item ${i}`
-  }))
-}
-
-describe('VirtualGrid', () => {
-  const defaultGridStyle = {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(4, 1fr)',
-    gap: '1rem'
-  }
-
-  it('renders items within the visible range', async () => {
-    const items = createItems(100)
-    mockedWidth.value = 400
-    mockedHeight.value = 200
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: defaultGridStyle,
-        defaultItemHeight: 100,
-        defaultItemWidth: 100,
-        maxColumns: 4,
-        bufferRows: 1
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    const renderedItems = wrapper.findAll('.test-item')
-    expect(renderedItems.length).toBeGreaterThan(0)
-    expect(renderedItems.length).toBeLessThan(items.length)
-
-    wrapper.unmount()
-  })
-
-  it('provides correct index in slot props', async () => {
-    const items = createItems(20)
-    const receivedIndices: number[] = []
-    mockedWidth.value = 400
-    mockedHeight.value = 200
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: defaultGridStyle,
-        defaultItemHeight: 50,
-        defaultItemWidth: 100,
-        maxColumns: 1,
-        bufferRows: 0
-      },
-      slots: {
-        item: ({ index }: { index: number }) => {
-          receivedIndices.push(index)
-          return null
-        }
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    expect(receivedIndices.length).toBeGreaterThan(0)
-    expect(receivedIndices[0]).toBe(0)
-    for (let i = 1; i < receivedIndices.length; i++) {
-      expect(receivedIndices[i]).toBe(receivedIndices[i - 1] + 1)
-    }
-
-    wrapper.unmount()
-  })
-
-  it('respects maxColumns prop', async () => {
-    const items = createItems(10)
-    mockedWidth.value = 400
-    mockedHeight.value = 200
-    mockedScrollY.value = 0
-
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: defaultGridStyle,
-        maxColumns: 2
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    const gridElement = wrapper.find('[style*="display: grid"]')
-    expect(gridElement.exists()).toBe(true)
-
-    const gridEl = gridElement.element as HTMLElement
-    expect(gridEl.style.gridTemplateColumns).toBe('repeat(2, minmax(0, 1fr))')
-
-    wrapper.unmount()
-  })
-
-  it('renders empty when no items provided', async () => {
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items: [],
-        gridStyle: defaultGridStyle
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      }
-    })
-
-    await nextTick()
-
-    const renderedItems = wrapper.findAll('.test-item')
-    expect(renderedItems.length).toBe(0)
-
-    wrapper.unmount()
-  })
-
-  it('forces cols to maxColumns when maxColumns is finite', async () => {
-    mockedWidth.value = 100
-    mockedHeight.value = 200
-    mockedScrollY.value = 0
-
-    const items = createItems(20)
-    const wrapper = mount(VirtualGrid<TestItem>, {
-      props: {
-        items,
-        gridStyle: defaultGridStyle,
-        defaultItemHeight: 50,
-        defaultItemWidth: 200,
-        maxColumns: 4,
-        bufferRows: 0
-      },
-      slots: {
-        item: `<template #item="{ item }">
-          <div class="test-item">{{ item.name }}</div>
-        </template>`
-      },
-      attachTo: document.body
-    })
-
-    await nextTick()
-
-    const renderedItems = wrapper.findAll('.test-item')
-    expect(renderedItems.length).toBeGreaterThan(0)
-    expect(renderedItems.length % 4).toBe(0)
-
-    wrapper.unmount()
-  })
-})

src/components/common/VirtualGrid.vue

@@ -1,16 +1,17 @@
 <template>
   <div
     ref="container"
-    class="h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable] scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
+    class="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
   >
     <div :style="topSpacerStyle" />
     <div :style="mergedGridStyle">
       <div
-        v-for="(item, i) in renderedItems"
+        v-for="item in renderedItems"
         :key="item.key"
+        class="transition-[width] duration-150 ease-out"
         data-virtual-grid-item
       >
-        <slot name="item" :item :index="state.start + i" />
+        <slot name="item" :item="item" />
       </div>
     </div>
     <div :style="bottomSpacerStyle" />
@@ -65,10 +66,9 @@ const { y: scrollY } = useScroll(container, {
   eventListenerOptions: { passive: true }
 })
 
-const cols = computed(() => {
-  if (maxColumns !== Infinity) return maxColumns
-  return Math.floor(width.value / itemWidth.value) || 1
-})
+const cols = computed(() =>
+  Math.min(Math.floor(width.value / itemWidth.value) || 1, maxColumns)
+)
 
 const mergedGridStyle = computed<CSSProperties>(() => {
   if (maxColumns === Infinity) return gridStyle
@@ -101,9 +101,8 @@ const renderedItems = computed(() =>
   isValidGrid.value ? items.slice(state.value.start, state.value.end) : []
 )
 
-function rowsToHeight(itemsCount: number): string {
-  const rows = Math.ceil(itemsCount / cols.value)
-  return `${rows * itemHeight.value}px`
+function rowsToHeight(rows: number): string {
+  return `${(rows / cols.value) * itemHeight.value}px`
 }
 const topSpacerStyle = computed<CSSProperties>(() => ({
   height: rowsToHeight(state.value.start)
@@ -119,10 +118,11 @@ whenever(
   }
 )
 
-function updateItemSize(): void {
+const updateItemSize = () => {
   if (container.value) {
     const firstItem = container.value.querySelector('[data-virtual-grid-item]')
 
+    // Don't update item size if the first item is not rendered yet
     if (!firstItem?.clientHeight || !firstItem?.clientWidth) return
 
     if (itemHeight.value !== firstItem.clientHeight) {

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

@@ -13,7 +13,7 @@
         class="about-badge inline-flex items-center no-underline"
         :title="badge.url"
       >
-        <Tag class="mr-2" :severity="badge.severity">
+        <Tag class="mr-2">
           <template #icon>
             <i :class="[badge.icon, 'mr-2 text-xl']" />
           </template>

src/components/error/ErrorOverlay.vue

@@ -64,17 +64,17 @@ import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
 
 import Button from '@/components/ui/button/Button.vue'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useErrorGroups } from '@/components/rightSidePanel/errors/useErrorGroups'
 
 const { t } = useI18n()
-const executionErrorStore = useExecutionErrorStore()
+const executionStore = useExecutionStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const canvasStore = useCanvasStore()
 
-const { totalErrorCount, isErrorOverlayOpen } = storeToRefs(executionErrorStore)
+const { totalErrorCount, isErrorOverlayOpen } = storeToRefs(executionStore)
 const { groupedErrorMessages } = useErrorGroups(ref(''), t)
 
 const errorCountLabel = computed(() =>
@@ -90,7 +90,7 @@ const isVisible = computed(
 )
 
 function dismiss() {
-  executionErrorStore.dismissErrorOverlay()
+  executionStore.dismissErrorOverlay()
 }
 
 function seeErrors() {
@@ -100,6 +100,6 @@ function seeErrors() {
   }
 
   rightSidePanelStore.openPanel('errors')
-  executionErrorStore.dismissErrorOverlay()
+  executionStore.dismissErrorOverlay()
 }
 </script>

src/components/gradientslider/GradientSlider.test.ts

@@ -1,80 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import GradientSlider from './GradientSlider.vue'
-import type { ColorStop } from '@/lib/litegraph/src/interfaces'
-import { interpolateStops, stopsToGradient } from './gradients'
-
-const TEST_STOPS: ColorStop[] = [
-  { offset: 0, color: [0, 0, 0] },
-  { offset: 1, color: [255, 255, 255] }
-]
-
-function mountSlider(props: {
-  stops?: ColorStop[]
-  modelValue: number
-  min?: number
-  max?: number
-  step?: number
-}) {
-  return mount(GradientSlider, {
-    props: { stops: TEST_STOPS, ...props }
-  })
-}
-
-describe('GradientSlider', () => {
-  it('passes min, max, step to SliderRoot', () => {
-    const wrapper = mountSlider({
-      modelValue: 50,
-      min: -100,
-      max: 100,
-      step: 5
-    })
-    const thumb = wrapper.find('[role="slider"]')
-    expect(thumb.attributes('aria-valuemin')).toBe('-100')
-    expect(thumb.attributes('aria-valuemax')).toBe('100')
-  })
-
-  it('renders slider root with track and thumb', () => {
-    const wrapper = mountSlider({ modelValue: 0 })
-    expect(wrapper.find('[data-slider-impl]').exists()).toBe(true)
-    expect(wrapper.find('[role="slider"]').exists()).toBe(true)
-  })
-
-  it('does not render SliderRange', () => {
-    const wrapper = mountSlider({ modelValue: 50 })
-    expect(wrapper.find('[data-slot="slider-range"]').exists()).toBe(false)
-  })
-})
-
-describe('stopsToGradient', () => {
-  it('returns transparent for empty stops', () => {
-    expect(stopsToGradient([])).toBe('transparent')
-  })
-})
-
-describe('interpolateStops', () => {
-  it('returns transparent for empty stops', () => {
-    expect(interpolateStops([], 0.5)).toBe('transparent')
-  })
-
-  it('returns start color at t=0', () => {
-    expect(interpolateStops(TEST_STOPS, 0)).toBe('rgb(0,0,0)')
-  })
-
-  it('returns end color at t=1', () => {
-    expect(interpolateStops(TEST_STOPS, 1)).toBe('rgb(255,255,255)')
-  })
-
-  it('returns midpoint color at t=0.5', () => {
-    expect(interpolateStops(TEST_STOPS, 0.5)).toBe('rgb(128,128,128)')
-  })
-
-  it('clamps values below 0', () => {
-    expect(interpolateStops(TEST_STOPS, -1)).toBe('rgb(0,0,0)')
-  })
-
-  it('clamps values above 1', () => {
-    expect(interpolateStops(TEST_STOPS, 2)).toBe('rgb(255,255,255)')
-  })
-})

src/components/gradientslider/GradientSlider.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
-import { computed, ref } from 'vue'
-
-import type { ColorStop } from '@/lib/litegraph/src/interfaces'
-import {
-  interpolateStops,
-  stopsToGradient
-} from '@/components/gradientslider/gradients'
-import { cn } from '@/utils/tailwindUtil'
-
-const {
-  stops,
-  min = 0,
-  max = 100,
-  step = 1,
-  disabled = false,
-  ariaLabel
-} = defineProps<{
-  stops: ColorStop[]
-  min?: number
-  max?: number
-  step?: number
-  disabled?: boolean
-  ariaLabel?: string
-}>()
-
-const modelValue = defineModel<number>({ required: true })
-
-const sliderValue = computed({
-  get: () => [modelValue.value],
-  set: (v: number[]) => {
-    if (v.length) modelValue.value = v[0]
-  }
-})
-
-const gradient = computed(() => stopsToGradient(stops))
-
-const thumbColor = computed(() => {
-  const t = max === min ? 0 : (modelValue.value - min) / (max - min)
-  return interpolateStops(stops, t)
-})
-
-const pressed = ref(false)
-</script>
-
-<template>
-  <SliderRoot
-    v-model="sliderValue"
-    :min
-    :max
-    :step
-    :disabled
-    :class="
-      cn(
-        'relative flex w-full touch-none items-center select-none',
-        'data-[disabled]:opacity-50'
-      )
-    "
-    :style="{ '--reka-slider-thumb-transform': 'translate(-50%, -50%)' }"
-    @slide-start="pressed = true"
-    @slide-move="pressed = true"
-    @slide-end="pressed = false"
-  >
-    <SliderTrack
-      :class="
-        cn(
-          'relative h-2.5 w-full grow cursor-pointer overflow-visible rounded-full',
-          'before:absolute before:-inset-2 before:block before:bg-transparent'
-        )
-      "
-      :style="{ background: gradient }"
-    >
-      <SliderThumb
-        :class="
-          cn(
-            'block size-4 shrink-0 cursor-grab rounded-full shadow-md ring-1 ring-black/25 top-1/2',
-            'transition-[color,box-shadow,background-color]',
-            'before:absolute before:-inset-1.5 before:block before:rounded-full before:bg-transparent',
-            'hover:ring-2 hover:ring-black/40 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-hidden',
-            'disabled:pointer-events-none disabled:opacity-50',
-            { 'cursor-grabbing': pressed }
-          )
-        "
-        :style="{ backgroundColor: thumbColor }"
-        :aria-label
-      />
-    </SliderTrack>
-  </SliderRoot>
-</template>

src/components/gradientslider/gradients.ts

@@ -1,40 +0,0 @@
-import type { ColorStop } from '@/lib/litegraph/src/interfaces'
-
-export function stopsToGradient(stops: ColorStop[]): string {
-  if (!stops.length) return 'transparent'
-  const colors = stops.map(
-    ({ offset, color: [r, g, b] }) => `rgb(${r},${g},${b}) ${offset * 100}%`
-  )
-  return `linear-gradient(to right, ${colors.join(', ')})`
-}
-
-export function interpolateStops(stops: ColorStop[], t: number): string {
-  if (!stops.length) return 'transparent'
-  const clamped = Math.max(0, Math.min(1, t))
-
-  if (clamped <= stops[0].offset) {
-    const [r, g, b] = stops[0].color
-    return `rgb(${r},${g},${b})`
-  }
-
-  for (let i = 0; i < stops.length - 1; i++) {
-    const {
-      offset: o1,
-      color: [r1, g1, b1]
-    } = stops[i]
-    const {
-      offset: o2,
-      color: [r2, g2, b2]
-    } = stops[i + 1]
-    if (clamped >= o1 && clamped <= o2) {
-      const f = o2 === o1 ? 0 : (clamped - o1) / (o2 - o1)
-      const r = Math.round(r1 + (r2 - r1) * f)
-      const g = Math.round(g1 + (g2 - g1) * f)
-      const b = Math.round(b1 + (b2 - b1) * f)
-      return `rgb(${r},${g},${b})`
-    }
-  }
-
-  const [r, g, b] = stops[stops.length - 1].color
-  return `rgb(${r},${g},${b})`
-}

src/components/graph/GraphCanvas.vue

@@ -70,7 +70,7 @@
       :key="nodeData.id"
       :node-data="nodeData"
       :error="
-        executionErrorStore.lastExecutionError?.node_id === nodeData.id
+        executionStore.lastExecutionError?.node_id === nodeData.id
           ? 'Execution error'
           : null
       "
@@ -152,7 +152,7 @@ import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
-import { useWorkflowPersistenceV2 as useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistenceV2'
+import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
@@ -170,7 +170,6 @@ import { storeToRefs } from 'pinia'
 import { useBootstrapStore } from '@/stores/bootstrapStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
@@ -197,7 +196,6 @@ const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
 const workflowStore = useWorkflowStore()
 const executionStore = useExecutionStore()
-const executionErrorStore = useExecutionErrorStore()
 const toastStore = useToastStore()
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
@@ -378,7 +376,7 @@ watch(
 // Update node slot errors for LiteGraph nodes
 // (Vue nodes read from store directly)
 watch(
-  () => executionErrorStore.lastNodeErrors,
+  () => executionStore.lastNodeErrors,
   (lastNodeErrors) => {
     if (!comfyApp.graph) return
 

src/components/queue/JobHistoryActionsMenu.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="flex items-center gap-1">
-    <Popover :show-arrow="false">
-      <template #button>
-        <Button
-          v-tooltip.top="moreTooltipConfig"
-          variant="textonly"
-          size="icon"
-          :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
-        >
-          <i
-            class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
-          />
-        </Button>
-      </template>
-      <template #default="{ close }">
-        <div class="flex min-w-[14rem] flex-col items-stretch font-inter">
-          <Button
-            data-testid="docked-job-history-action"
-            class="w-full justify-between text-sm font-light"
-            variant="textonly"
-            size="sm"
-            @click="onToggleDockedJobHistory"
-          >
-            <span class="flex items-center gap-2">
-              <i
-                class="icon-[lucide--panel-left-close] size-4 text-text-secondary"
-              />
-              <span>{{
-                t('sideToolbar.queueProgressOverlay.dockedJobHistory')
-              }}</span>
-            </span>
-            <i
-              v-if="isQueuePanelV2Enabled"
-              class="icon-[lucide--check] size-4"
-            />
-          </Button>
-          <!-- TODO: Bug in assets sidebar panel derives assets from history, so despite this not deleting the assets, it still effectively shows to the user as deleted -->
-          <template v-if="showClearHistoryAction">
-            <div class="my-1 border-t border-interface-stroke" />
-            <Button
-              data-testid="clear-history-action"
-              class="h-auto min-h-0 w-full items-start justify-start whitespace-normal"
-              variant="textonly"
-              size="sm"
-              @click="onClearHistoryFromMenu(close)"
-            >
-              <i
-                class="icon-[lucide--trash-2] size-4 shrink-0 self-center text-destructive-background"
-              />
-              <span
-                class="flex flex-col items-start break-words text-left leading-tight"
-              >
-                <span class="text-sm font-light">
-                  {{ t('sideToolbar.queueProgressOverlay.clearHistory') }}
-                </span>
-                <span class="text-xs text-text-secondary font-light">
-                  {{
-                    t(
-                      'sideToolbar.queueProgressOverlay.clearHistoryMenuAssetsNote'
-                    )
-                  }}
-                </span>
-              </span>
-            </Button>
-          </template>
-        </div>
-      </template>
-    </Popover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Popover from '@/components/ui/Popover.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import { isCloud } from '@/platform/distribution/types'
-import { useSettingStore } from '@/platform/settings/settingStore'
-
-const emit = defineEmits<{
-  (e: 'clearHistory'): void
-}>()
-
-const { t } = useI18n()
-const settingStore = useSettingStore()
-
-const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
-const isQueuePanelV2Enabled = computed(() =>
-  settingStore.get('Comfy.Queue.QPOV2')
-)
-const showClearHistoryAction = computed(() => !isCloud)
-
-const onClearHistoryFromMenu = (close: () => void) => {
-  close()
-  emit('clearHistory')
-}
-
-const onToggleDockedJobHistory = async () => {
-  await settingStore.set('Comfy.Queue.QPOV2', !isQueuePanelV2Enabled.value)
-}
-</script>

src/components/queue/QueueOverlayExpanded.vue

@@ -51,7 +51,6 @@ import type {
 } from '@/composables/queue/useJobList'
 import type { MenuEntry } from '@/composables/queue/useJobMenu'
 import { useJobMenu } from '@/composables/queue/useJobMenu'
-import { useErrorHandling } from '@/composables/useErrorHandling'
 
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
 import JobContextMenu from './job/JobContextMenu.vue'
@@ -84,7 +83,6 @@ const emit = defineEmits<{
 
 const currentMenuItem = ref<JobListItem | null>(null)
 const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
-const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
 const { jobMenuEntries } = useJobMenu(
   () => currentMenuItem.value,
@@ -104,9 +102,9 @@ const onMenuItem = (item: JobListItem, event: Event) => {
   jobContextMenuRef.value?.open(event)
 }
 
-const onJobMenuAction = wrapWithErrorHandlingAsync(async (entry: MenuEntry) => {
+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

@@ -1,40 +1,28 @@
 import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
-import { defineComponent, h } from 'vue'
+import { defineComponent } from 'vue'
 
-const popoverCloseSpy = vi.fn()
+const popoverToggleSpy = vi.fn()
+const popoverHideSpy = vi.fn()
 
-vi.mock('@/components/ui/Popover.vue', () => {
+vi.mock('primevue/popover', () => {
   const PopoverStub = defineComponent({
     name: 'Popover',
-    setup(_, { slots }) {
-      return () =>
-        h('div', [
-          slots.button?.(),
-          slots.default?.({
-            close: () => {
-              popoverCloseSpy()
-            }
-          })
-        ])
+    setup(_, { slots, expose }) {
+      const toggle = (event: Event) => {
+        popoverToggleSpy(event)
+      }
+      const hide = () => {
+        popoverHideSpy()
+      }
+      expose({ toggle, hide })
+      return () => slots.default?.()
     }
   })
   return { default: PopoverStub }
 })
 
-const mockGetSetting = vi.fn((key: string) =>
-  key === 'Comfy.Queue.QPOV2' ? true : undefined
-)
-const mockSetSetting = vi.fn()
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({
-    get: mockGetSetting,
-    set: mockSetSetting
-  })
-}))
-
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
 import * as tooltipConfig from '@/composables/useTooltipConfig'
 
@@ -54,11 +42,8 @@ const i18n = createI18n({
           running: 'running',
           queuedSuffix: 'queued',
           clearQueued: 'Clear queued',
-          clearQueueTooltip: 'Clear queue',
-          clearAllJobsTooltip: 'Cancel all running jobs',
           moreOptions: 'More options',
-          clearHistory: 'Clear history',
-          dockedJobHistory: 'Docked Job History'
+          clearHistory: 'Clear history'
         }
       }
     }
@@ -81,11 +66,6 @@ const mountHeader = (props = {}) =>
   })
 
 describe('QueueOverlayHeader', () => {
-  beforeEach(() => {
-    popoverCloseSpy.mockClear()
-    mockSetSetting.mockClear()
-  })
-
   it('renders header title and concurrent indicator when enabled', () => {
     const wrapper = mountHeader({ concurrentWorkflowCount: 3 })
 
@@ -103,52 +83,38 @@ describe('QueueOverlayHeader', () => {
     expect(wrapper.find('.inline-flex.items-center.gap-1').exists()).toBe(false)
   })
 
-  it('shows clear queue text and emits clear queued', async () => {
+  it('shows queued summary and emits clear queued', async () => {
     const wrapper = mountHeader({ queuedCount: 4 })
 
-    expect(wrapper.text()).toContain('Clear queue')
-    expect(wrapper.text()).not.toContain('4 queued')
+    expect(wrapper.text()).toContain('4')
+    expect(wrapper.text()).toContain('queued')
 
     const clearQueuedButton = wrapper.get('button[aria-label="Clear queued"]')
     await clearQueuedButton.trigger('click')
     expect(wrapper.emitted('clearQueued')).toHaveLength(1)
   })
 
-  it('disables clear queued button when queued count is zero', () => {
+  it('hides clear queued button when queued count is zero', () => {
     const wrapper = mountHeader({ queuedCount: 0 })
-    const clearQueuedButton = wrapper.get('button[aria-label="Clear queued"]')
 
-    expect(clearQueuedButton.attributes('disabled')).toBeDefined()
-    expect(wrapper.text()).toContain('Clear queue')
+    expect(wrapper.find('button[aria-label="Clear queued"]').exists()).toBe(
+      false
+    )
   })
 
-  it('emits clear history from the menu', async () => {
+  it('toggles popover and emits clear history', async () => {
     const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
 
     const wrapper = mountHeader()
 
-    expect(wrapper.find('button[aria-label="More options"]').exists()).toBe(
-      true
-    )
+    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(
-      '[data-testid="clear-history-action"]'
-    )
+    const clearHistoryButton = wrapper.get('button[aria-label="Clear history"]')
     await clearHistoryButton.trigger('click')
-    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
+    expect(popoverHideSpy).toHaveBeenCalledTimes(1)
     expect(wrapper.emitted('clearHistory')).toHaveLength(1)
   })
-
-  it('toggles docked job history setting from the menu', async () => {
-    const wrapper = mountHeader()
-
-    const dockedJobHistoryButton = wrapper.get(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await dockedJobHistoryButton.trigger('click')
-
-    expect(mockSetSetting).toHaveBeenCalledTimes(1)
-    expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', false)
-  })
 })

src/components/queue/QueueOverlayHeader.vue

@@ -20,31 +20,79 @@
     <div
       class="inline-flex h-6 items-center gap-2 text-[12px] leading-none text-text-primary"
     >
-      <span :class="{ 'opacity-50': queuedCount === 0 }">{{
-        t('sideToolbar.queueProgressOverlay.clearQueueTooltip')
-      }}</span>
+      <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="clearAllJobsTooltip"
         variant="destructive"
         size="icon"
         :aria-label="t('sideToolbar.queueProgressOverlay.clearQueued')"
-        :disabled="queuedCount === 0"
         @click="$emit('clearQueued')"
       >
         <i class="icon-[lucide--list-x] size-4" />
       </Button>
     </div>
-    <JobHistoryActionsMenu @clear-history="$emit('clearHistory')" />
+    <div v-if="!isCloud" class="flex items-center gap-1">
+      <Button
+        v-tooltip.top="moreTooltipConfig"
+        variant="textonly"
+        size="icon"
+        :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="w-full justify-start"
+            variant="textonly"
+            size="sm"
+            :aria-label="t('sideToolbar.queueProgressOverlay.clearHistory')"
+            @click="onClearHistoryFromMenu"
+          >
+            <i class="icon-[lucide--file-x-2] size-4 text-muted" />
+            <span>{{
+              t('sideToolbar.queueProgressOverlay.clearHistory')
+            }}</span>
+          </Button>
+        </div>
+      </Popover>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import Popover from 'primevue/popover'
+import type { PopoverMethods } from 'primevue/popover'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import { isCloud } from '@/platform/distribution/types'
 
 defineProps<{
   headerTitle: string
@@ -53,13 +101,24 @@ defineProps<{
   queuedCount: number
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'clearHistory'): void
   (e: 'clearQueued'): void
 }>()
 
 const { t } = useI18n()
+
+const morePopoverRef = ref<PopoverMethods | null>(null)
+const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
 const clearAllJobsTooltip = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.clearAllJobsTooltip'))
 )
+
+const onMoreClick = (event: MouseEvent) => {
+  morePopoverRef.value?.toggle(event)
+}
+const onClearHistoryFromMenu = () => {
+  morePopoverRef.value?.hide()
+  emit('clearHistory')
+}
 </script>

src/components/queue/QueueProgressOverlay.test.ts

@@ -7,7 +7,6 @@ import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
 import { i18n } from '@/i18n'
 import type { JobStatus } from '@/platform/remote/comfyui/jobs/jobTypes'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
 vi.mock('@/platform/distribution/types', () => ({
   isCloud: false
@@ -21,12 +20,7 @@ const QueueOverlayExpandedStub = defineComponent({
       required: true
     }
   },
-  template: `
-    <div>
-      <div data-testid="expanded-title">{{ headerTitle }}</div>
-      <button data-testid="show-assets-button" @click="$emit('show-assets')" />
-    </div>
-  `
+  template: '<div data-testid="expanded-title">{{ headerTitle }}</div>'
 })
 
 function createTask(id: string, status: JobStatus): TaskItemImpl {
@@ -47,11 +41,10 @@ const mountComponent = (
     stubActions: false
   })
   const queueStore = useQueueStore(pinia)
-  const sidebarTabStore = useSidebarTabStore(pinia)
   queueStore.runningTasks = runningTasks
   queueStore.pendingTasks = pendingTasks
 
-  const wrapper = mount(QueueProgressOverlay, {
+  return mount(QueueProgressOverlay, {
     props: {
       expanded: true
     },
@@ -67,8 +60,6 @@ const mountComponent = (
       }
     }
   })
-
-  return { wrapper, sidebarTabStore }
 }
 
 describe('QueueProgressOverlay', () => {
@@ -77,7 +68,7 @@ describe('QueueProgressOverlay', () => {
   })
 
   it('shows expanded header with running and queued labels', () => {
-    const { wrapper } = mountComponent(
+    const wrapper = mountComponent(
       [
         createTask('running-1', 'in_progress'),
         createTask('running-2', 'in_progress')
@@ -91,10 +82,7 @@ describe('QueueProgressOverlay', () => {
   })
 
   it('shows only running label when queued count is zero', () => {
-    const { wrapper } = mountComponent(
-      [createTask('running-1', 'in_progress')],
-      []
-    )
+    const wrapper = mountComponent([createTask('running-1', 'in_progress')], [])
 
     expect(wrapper.get('[data-testid="expanded-title"]').text()).toBe(
       '1 running'
@@ -102,22 +90,10 @@ describe('QueueProgressOverlay', () => {
   })
 
   it('shows job queue title when there are no active jobs', () => {
-    const { wrapper } = mountComponent([], [])
+    const wrapper = mountComponent([], [])
 
     expect(wrapper.get('[data-testid="expanded-title"]').text()).toBe(
       'Job Queue'
     )
   })
-
-  it('toggles the assets sidebar tab when show-assets is clicked', async () => {
-    const { wrapper, sidebarTabStore } = mountComponent([], [])
-
-    expect(sidebarTabStore.activeSidebarTabId).toBe(null)
-
-    await wrapper.get('[data-testid="show-assets-button"]').trigger('click')
-    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
-
-    await wrapper.get('[data-testid="show-assets-button"]').trigger('click')
-    expect(sidebarTabStore.activeSidebarTabId).toBe(null)
-  })
 })

src/components/queue/QueueProgressOverlay.vue

@@ -22,7 +22,7 @@
         :queued-count="queuedCount"
         :displayed-job-groups="displayedJobGroups"
         :has-failed-jobs="hasFailedJobs"
-        @show-assets="toggleAssetsSidebar"
+        @show-assets="openAssetsSidebar"
         @clear-history="onClearHistoryFromMenu"
         @clear-queued="cancelQueuedWorkflows"
         @cancel-item="onCancelItem"
@@ -59,10 +59,10 @@ import { useI18n } from 'vue-i18n'
 
 import QueueOverlayActive from '@/components/queue/QueueOverlayActive.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 { useJobList } from '@/composables/queue/useJobList'
 import type { JobListItem } from '@/composables/queue/useJobList'
-import { useQueueClearHistoryDialog } from '@/composables/queue/useQueueClearHistoryDialog'
 import { useQueueProgress } from '@/composables/queue/useQueueProgress'
 import { useResultGallery } from '@/composables/queue/useResultGallery'
 import { useErrorHandling } from '@/composables/useErrorHandling'
@@ -71,6 +71,7 @@ import { isCloud } from '@/platform/distribution/types'
 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'
@@ -96,9 +97,9 @@ const queueStore = useQueueStore()
 const commandStore = useCommandStore()
 const executionStore = useExecutionStore()
 const sidebarTabStore = useSidebarTabStore()
+const dialogStore = useDialogStore()
 const assetsStore = useAssetsStore()
 const assetSelectionStore = useAssetSelectionStore()
-const { showQueueClearHistoryDialog } = useQueueClearHistoryDialog()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
 const {
@@ -242,10 +243,6 @@ const viewAllJobs = () => {
   setExpanded(true)
 }
 
-const toggleAssetsSidebar = () => {
-  sidebarTabStore.toggleSidebarTab('assets')
-}
-
 const openAssetsSidebar = () => {
   sidebarTabStore.activeSidebarTabId = 'assets'
 }
@@ -312,7 +309,28 @@ const interruptAll = wrapWithErrorHandlingAsync(async () => {
   await queueStore.update()
 })
 
+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 = () => {
-  showQueueClearHistoryDialog()
+  showClearHistoryDialog()
 }
 </script>

src/components/queue/job/JobAssetsList.vue

@@ -1,110 +0,0 @@
-<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-xs leading-none text-text-secondary">
-        {{ group.label }}
-      </div>
-      <AssetsListItem
-        v-for="job in group.items"
-        :key="job.id"
-        class="w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover"
-        :preview-url="job.iconImageUrl"
-        :preview-alt="job.title"
-        :icon-name="job.iconName ?? iconForJobState(job.state)"
-        :icon-class="getJobIconClass(job)"
-        :primary-text="job.title"
-        :secondary-text="job.meta"
-        :progress-total-percent="job.progressTotalPercent"
-        :progress-current-percent="job.progressCurrentPercent"
-        @mouseenter="hoveredJobId = job.id"
-        @mouseleave="onJobLeave(job.id)"
-        @contextmenu.prevent.stop="$emit('menu', job, $event)"
-        @click.stop
-      >
-        <template v-if="hoveredJobId === job.id" #actions>
-          <Button
-            v-if="isCancelable(job)"
-            variant="destructive"
-            size="icon"
-            :aria-label="t('g.cancel')"
-            @click.stop="$emit('cancelItem', job)"
-          >
-            <i class="icon-[lucide--x] size-4" />
-          </Button>
-          <Button
-            v-else-if="isFailedDeletable(job)"
-            variant="destructive"
-            size="icon"
-            :aria-label="t('g.delete')"
-            @click.stop="$emit('deleteItem', job)"
-          >
-            <i class="icon-[lucide--trash-2] size-4" />
-          </Button>
-          <Button
-            v-else-if="job.state === 'completed'"
-            variant="textonly"
-            size="sm"
-            @click.stop="$emit('viewItem', job)"
-          >
-            {{ t('menuLabels.View') }}
-          </Button>
-          <Button
-            variant="secondary"
-            size="icon"
-            :aria-label="t('g.more')"
-            @click.stop="$emit('menu', job, $event)"
-          >
-            <i class="icon-[lucide--ellipsis] size-4" />
-          </Button>
-        </template>
-      </AssetsListItem>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import { ref } from 'vue'
-
-import Button from '@/components/ui/button/Button.vue'
-import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
-import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
-import { iconForJobState } from '@/utils/queueDisplay'
-import { isActiveJobState } from '@/utils/queueUtil'
-
-defineProps<{ displayedJobGroups: JobGroup[] }>()
-
-defineEmits<{
-  (e: 'cancelItem', item: JobListItem): void
-  (e: 'deleteItem', item: JobListItem): void
-  (e: 'menu', item: JobListItem, ev: MouseEvent): void
-  (e: 'viewItem', item: JobListItem): void
-}>()
-
-const { t } = useI18n()
-const hoveredJobId = ref<string | null>(null)
-
-const onJobLeave = (jobId: string) => {
-  if (hoveredJobId.value === jobId) {
-    hoveredJobId.value = null
-  }
-}
-
-const isCancelable = (job: JobListItem) =>
-  job.showClear !== false && isActiveJobState(job.state)
-
-const isFailedDeletable = (job: JobListItem) =>
-  job.showClear !== false && job.state === 'failed'
-
-const getJobIconClass = (job: JobListItem): string | undefined => {
-  const iconName = job.iconName ?? iconForJobState(job.state)
-  if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
-    return 'animate-spin'
-  }
-  return undefined
-}
-</script>

src/components/queue/job/JobFilterActions.vue

@@ -1,199 +0,0 @@
-<template>
-  <div class="flex min-w-0 items-center gap-2">
-    <SearchBox
-      v-if="showSearch"
-      :model-value="searchQuery"
-      class="min-w-0 flex-1"
-      :placeholder="searchPlaceholderText"
-      @update:model-value="onSearchQueryUpdate"
-    />
-    <div
-      class="flex shrink-0 items-center gap-2"
-      :class="{ 'ml-2': !showSearch }"
-    >
-      <Popover :show-arrow="false">
-        <template #button>
-          <Button
-            v-tooltip.top="filterTooltipConfig"
-            variant="secondary"
-            size="icon"
-            :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
-          >
-            <i class="icon-[lucide--list-filter] size-4" />
-            <span
-              v-if="selectedWorkflowFilter !== 'all'"
-              class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
-            />
-          </Button>
-        </template>
-        <template #default="{ close }">
-          <div class="flex min-w-[12rem] flex-col items-stretch">
-            <Button
-              class="w-full justify-between"
-              variant="textonly"
-              size="md"
-              @click="onSelectWorkflowFilter('all', close)"
-            >
-              <span>{{
-                t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
-              }}</span>
-              <i
-                v-if="selectedWorkflowFilter === 'all'"
-                class="icon-[lucide--check] size-4"
-              />
-            </Button>
-            <div class="mx-2 mt-1 h-px" />
-            <Button
-              class="w-full justify-between"
-              variant="textonly"
-              size="md"
-              @click="onSelectWorkflowFilter('current', close)"
-            >
-              <span>{{
-                t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
-              }}</span>
-              <i
-                v-if="selectedWorkflowFilter === 'current'"
-                class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
-              />
-            </Button>
-          </div>
-        </template>
-      </Popover>
-      <Popover :show-arrow="false">
-        <template #button>
-          <Button
-            v-tooltip.top="sortTooltipConfig"
-            variant="secondary"
-            size="icon"
-            :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
-          >
-            <i class="icon-[lucide--arrow-up-down] size-4" />
-            <span
-              v-if="selectedSortMode !== 'mostRecent'"
-              class="pointer-events-none absolute -top-1 -right-1 inline-block size-2 rounded-full bg-base-foreground"
-            />
-          </Button>
-        </template>
-        <template #default="{ close }">
-          <div class="flex min-w-[12rem] flex-col items-stretch">
-            <template v-for="(mode, index) in jobSortModes" :key="mode">
-              <Button
-                class="w-full justify-between"
-                variant="textonly"
-                size="md"
-                @click="onSelectSortMode(mode, close)"
-              >
-                <span>{{ sortLabel(mode) }}</span>
-                <i
-                  v-if="selectedSortMode === mode"
-                  class="icon-[lucide--check] size-4 text-text-secondary"
-                />
-              </Button>
-              <div
-                v-if="index < jobSortModes.length - 1"
-                class="mx-2 mt-1 h-px"
-              />
-            </template>
-          </div>
-        </template>
-      </Popover>
-      <Button
-        v-if="showAssetsAction"
-        v-tooltip.top="showAssetsTooltipConfig"
-        variant="secondary"
-        size="icon"
-        :aria-label="t('sideToolbar.queueProgressOverlay.showAssetsPanel')"
-        @click="emit('showAssets')"
-      >
-        <i class="icon-[comfy--image-ai-edit] size-4" />
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import SearchBox from '@/components/common/SearchBox.vue'
-import Popover from '@/components/ui/Popover.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { jobSortModes } from '@/composables/queue/useJobList'
-import type { JobSortMode } from '@/composables/queue/useJobList'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-
-const {
-  hideShowAssetsAction = false,
-  showSearch = false,
-  searchPlaceholder
-} = defineProps<{
-  hideShowAssetsAction?: boolean
-  showSearch?: boolean
-  searchPlaceholder?: string
-}>()
-
-const selectedWorkflowFilter = defineModel<'all' | 'current'>(
-  'selectedWorkflowFilter',
-  { required: true }
-)
-const selectedSortMode = defineModel<JobSortMode>('selectedSortMode', {
-  required: true
-})
-const searchQuery = defineModel<string>('searchQuery', { default: '' })
-
-const emit = defineEmits<{
-  (e: 'showAssets'): void
-}>()
-
-const { t } = useI18n()
-
-const filterTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.filterBy'))
-)
-const sortTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.sortBy'))
-)
-const showAssetsTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.showAssets'))
-)
-const showAssetsAction = computed(() => !hideShowAssetsAction)
-const searchPlaceholderText = computed(
-  () => searchPlaceholder ?? t('sideToolbar.queueProgressOverlay.searchJobs')
-)
-
-const selectWorkflowFilter = (value: 'all' | 'current') => {
-  selectedWorkflowFilter.value = value
-}
-
-const onSelectWorkflowFilter = (
-  value: 'all' | 'current',
-  close: () => void
-) => {
-  selectWorkflowFilter(value)
-  close()
-}
-
-const selectSortMode = (value: JobSortMode) => {
-  selectedSortMode.value = value
-}
-
-const onSelectSortMode = (value: JobSortMode, close: () => void) => {
-  selectSortMode(value)
-  close()
-}
-
-const onSearchQueryUpdate = (value: string | undefined) => {
-  searchQuery.value = value ?? ''
-}
-
-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/JobFilterTabs.vue

@@ -1,45 +0,0 @@
-<template>
-  <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"
-        :variant="selectedJobTab === tab ? 'secondary' : 'muted-textonly'"
-        size="sm"
-        @click="$emit('update:selectedJobTab', tab)"
-      >
-        {{ tabLabel(tab) }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { jobTabs } from '@/composables/queue/useJobList'
-import type { JobTab } from '@/composables/queue/useJobList'
-
-const { selectedJobTab, hasFailedJobs } = defineProps<{
-  selectedJobTab: JobTab
-  hasFailedJobs: boolean
-}>()
-
-defineEmits<{
-  (e: 'update:selectedJobTab', value: JobTab): void
-}>()
-
-const { t } = useI18n()
-
-const visibleJobTabs = computed(() =>
-  hasFailedJobs ? jobTabs : jobTabs.filter((tab) => tab !== 'Failed')
-)
-
-const tabLabel = (tab: JobTab) => {
-  if (tab === 'All') return t('g.all')
-  if (tab === 'Completed') return t('g.completed')
-  return t('g.failed')
-}
-</script>

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

@@ -76,24 +76,4 @@ describe('JobFiltersBar', () => {
 
     expect(wrapper.emitted('showAssets')).toHaveLength(1)
   })
-
-  it('hides the assets icon button when hideShowAssetsAction is true', () => {
-    const wrapper = mount(JobFiltersBar, {
-      props: {
-        selectedJobTab: 'All',
-        selectedWorkflowFilter: 'all',
-        selectedSortMode: 'mostRecent',
-        hasFailedJobs: false,
-        hideShowAssetsAction: true
-      },
-      global: {
-        plugins: [i18n],
-        directives: { tooltip: () => undefined }
-      }
-    })
-
-    expect(
-      wrapper.find('button[aria-label="Show assets panel"]').exists()
-    ).toBe(false)
-  })
 })

src/components/queue/job/JobFiltersBar.vue

@@ -1,46 +1,225 @@
 <template>
   <div class="flex items-center justify-between gap-2 px-3">
-    <JobFilterTabs
-      :selected-job-tab="selectedJobTab"
-      :has-failed-jobs="hasFailedJobs"
-      @update:selected-job-tab="$emit('update:selectedJobTab', $event)"
-    />
-    <JobFilterActions
-      :selected-workflow-filter="selectedWorkflowFilter"
-      :selected-sort-mode="selectedSortMode"
-      :hide-show-assets-action="hideShowAssetsAction"
-      @show-assets="$emit('showAssets')"
-      @update:selected-workflow-filter="
-        $emit('update:selectedWorkflowFilter', $event)
-      "
-      @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
-    />
+    <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"
+          :variant="selectedJobTab === tab ? 'secondary' : 'muted-textonly'"
+          size="sm"
+          class="px-3"
+          @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"
+        variant="secondary"
+        size="icon"
+        :aria-label="t('sideToolbar.queueProgressOverlay.filterJobs')"
+        @click="onFilterClick"
+      >
+        <i class="icon-[lucide--list-filter] size-4" />
+        <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="w-full justify-between"
+            variant="textonly"
+            size="sm"
+            @click="selectWorkflowFilter('all')"
+          >
+            <span>{{
+              t('sideToolbar.queueProgressOverlay.filterAllWorkflows')
+            }}</span>
+            <i
+              v-if="selectedWorkflowFilter === 'all'"
+              class="icon-[lucide--check] size-4"
+            />
+          </Button>
+          <div class="mx-2 mt-1 h-px" />
+          <Button
+            class="w-full justify-between"
+            variant="textonly"
+            @click="selectWorkflowFilter('current')"
+          >
+            <span>{{
+              t('sideToolbar.queueProgressOverlay.filterCurrentWorkflow')
+            }}</span>
+            <i
+              v-if="selectedWorkflowFilter === 'current'"
+              class="icon-[lucide--check] block size-4 leading-none text-text-secondary"
+            />
+          </Button>
+        </div>
+      </Popover>
+      <Button
+        v-tooltip.top="sortTooltipConfig"
+        variant="secondary"
+        size="icon"
+        :aria-label="t('sideToolbar.queueProgressOverlay.sortJobs')"
+        @click="onSortClick"
+      >
+        <i class="icon-[lucide--arrow-up-down] size-4" />
+        <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="w-full justify-between"
+              variant="textonly"
+              size="sm"
+              @click="selectSortMode(mode)"
+            >
+              <span>{{ sortLabel(mode) }}</span>
+              <i
+                v-if="selectedSortMode === mode"
+                class="icon-[lucide--check] size-4 text-text-secondary"
+              />
+            </Button>
+            <div
+              v-if="index < jobSortModes.length - 1"
+              class="mx-2 mt-1 h-px"
+            />
+          </template>
+        </div>
+      </Popover>
+      <Button
+        v-tooltip.top="showAssetsTooltipConfig"
+        variant="secondary"
+        size="icon"
+        :aria-label="t('sideToolbar.queueProgressOverlay.showAssetsPanel')"
+        @click="$emit('showAssets')"
+      >
+        <i class="icon-[comfy--image-ai-edit] size-4" />
+      </Button>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import JobFilterActions from '@/components/queue/job/JobFilterActions.vue'
-import JobFilterTabs from '@/components/queue/job/JobFilterTabs.vue'
-import type { JobSortMode, JobTab } from '@/composables/queue/useJobList'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-const {
-  selectedJobTab,
-  selectedWorkflowFilter,
-  selectedSortMode,
-  hasFailedJobs,
-  hideShowAssetsAction
-} = defineProps<{
+import Button from '@/components/ui/button/Button.vue'
+import { jobSortModes, jobTabs } from '@/composables/queue/useJobList'
+import type { JobSortMode, JobTab } from '@/composables/queue/useJobList'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
+import { isCloud } from '@/platform/distribution/types'
+
+const props = defineProps<{
   selectedJobTab: JobTab
   selectedWorkflowFilter: 'all' | 'current'
   selectedSortMode: JobSortMode
   hasFailedJobs: boolean
-  hideShowAssetsAction?: boolean
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   (e: 'showAssets'): void
   (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'))
+)
+const showAssetsTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.showAssets'))
+)
+
+// 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?.hide()
+  emit('update:selectedWorkflowFilter', value)
+}
+
+const onSortClick = (event: Event) => {
+  if (sortPopoverRef.value) {
+    sortPopoverRef.value.toggle(event)
+  }
+}
+
+const selectSortMode = (value: JobSortMode) => {
+  sortPopoverRef.value?.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/useQueueEstimates.test.ts

@@ -11,10 +11,10 @@ type QueueStore = UseQueueEstimatesOptions['queueStore']
 type ExecutionStore = UseQueueEstimatesOptions['executionStore']
 
 const makeHistoryTask = (
-  executionTimeInMilliseconds: number | string | undefined
+  executionTimeInSeconds: number | string | undefined
 ): TaskItemImpl =>
   ({
-    executionTimeInSeconds: executionTimeInMilliseconds
+    executionTimeInSeconds
   }) as TaskItemImpl
 
 const makeRunningTask = (executionStartTimestamp?: number): TaskItemImpl =>
@@ -116,13 +116,13 @@ describe('useQueueEstimates', () => {
   })
 
   it('uses the last 20 valid durations to estimate queued batches', () => {
-    const durationsMs = Array.from({ length: 25 }, (_, idx) => (idx + 1) * 1000)
+    const durations = Array.from({ length: 25 }, (_, idx) => idx + 1)
     const queueStore = createQueueStore({
       historyTasks: [
-        ...durationsMs.slice(0, 5).map((value) => makeHistoryTask(value)),
+        ...durations.slice(0, 5).map((value) => makeHistoryTask(value)),
         makeHistoryTask('not-a-number'),
         makeHistoryTask(undefined),
-        ...durationsMs.slice(5).map((value) => makeHistoryTask(value))
+        ...durations.slice(5).map((value) => makeHistoryTask(value))
       ]
     })
 
@@ -144,7 +144,7 @@ describe('useQueueEstimates', () => {
 
     const missingAhead = createHarness({
       queueStore: createQueueStore({
-        historyTasks: [makeHistoryTask(10_000)]
+        historyTasks: [makeHistoryTask(10)]
       })
     })
     expect(missingAhead.estimateRangeSeconds.value).toBeNull()
@@ -153,9 +153,7 @@ describe('useQueueEstimates', () => {
   it('falls back to the running remaining range when there are no jobs ahead', () => {
     const now = 20000
     const queueStore = createQueueStore({
-      historyTasks: [10_000, 20_000, 30_000].map((value) =>
-        makeHistoryTask(value)
-      ),
+      historyTasks: [10, 20, 30].map((value) => makeHistoryTask(value)),
       runningTasks: [
         makeRunningTask(now - 5000),
         makeRunningTask(now - 15000),
@@ -175,9 +173,7 @@ describe('useQueueEstimates', () => {
   it('subtracts elapsed time when estimating a running job', () => {
     const now = 25000
     const queueStore = createQueueStore({
-      historyTasks: [10_000, 20_000, 30_000].map((value) =>
-        makeHistoryTask(value)
-      )
+      historyTasks: [10, 20, 30].map((value) => makeHistoryTask(value))
     })
 
     const { estimateRemainingRangeSeconds } = createHarness({
@@ -193,9 +189,7 @@ describe('useQueueEstimates', () => {
 
   it('uses the first-seen timestamp for pending jobs and clamps negatives to zero', () => {
     const queueStore = createQueueStore({
-      historyTasks: [10_000, 20_000, 30_000].map((value) =>
-        makeHistoryTask(value)
-      )
+      historyTasks: [10, 20, 30].map((value) => makeHistoryTask(value))
     })
 
     const harness = createHarness({
@@ -213,19 +207,6 @@ describe('useQueueEstimates', () => {
     expect(harness.estimateRemainingRangeSeconds.value).toEqual([0, 0])
   })
 
-  it('converts execution durations from milliseconds to seconds', () => {
-    const queueStore = createQueueStore({
-      historyTasks: [2_000, 4_000].map((value) => makeHistoryTask(value))
-    })
-
-    const { estimateRangeSeconds } = createHarness({
-      queueStore,
-      jobsAhead: 1
-    })
-
-    expect(estimateRangeSeconds.value).toEqual([3, 4])
-  })
-
   it('computes the elapsed label using execution start, then first-seen timestamp', () => {
     const harness = createHarness()
 

src/components/queue/job/useQueueEstimates.ts

@@ -30,8 +30,10 @@ export const formatElapsedTime = (ms: number): string => {
 const pickRecentDurations = (queueStore: QueueStore) =>
   queueStore.historyTasks
     .map((task: TaskItemImpl) => Number(task.executionTimeInSeconds))
-    .filter((value: number) => Number.isFinite(value) && value >= 0)
-    .map((durationMilliseconds: number) => durationMilliseconds / 1000)
+    .filter(
+      (value: number | undefined) =>
+        typeof value === 'number' && !Number.isNaN(value)
+    ) as number[]
 
 export const useQueueEstimates = ({
   queueStore,

src/components/rightSidePanel/RightSidePanel.vue

@@ -14,7 +14,7 @@ import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import type { RightSidePanelTab } from '@/stores/workspace/rightSidePanelStore'
 import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
@@ -36,12 +36,12 @@ import SubgraphEditor from './subgraph/SubgraphEditor.vue'
 import TabErrors from './errors/TabErrors.vue'
 
 const canvasStore = useCanvasStore()
-const executionErrorStore = useExecutionErrorStore()
+const executionStore = useExecutionStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
-const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionErrorStore)
+const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionStore)
 
 const { findParentGroup } = useGraphHierarchy()
 
@@ -98,7 +98,7 @@ type RightSidePanelTabList = Array<{
 
 const hasDirectNodeError = computed(() =>
   selectedNodes.value.some((node) =>
-    executionErrorStore.activeGraphErrorNodeIds.has(String(node.id))
+    executionStore.activeGraphErrorNodeIds.has(String(node.id))
   )
 )
 
@@ -106,7 +106,7 @@ const hasContainerInternalError = computed(() => {
   if (allErrorExecutionIds.value.length === 0) return false
   return selectedNodes.value.some((node) => {
     if (!(node instanceof SubgraphNode || isGroupNode(node))) return false
-    return executionErrorStore.hasInternalErrorForNode(node.id)
+    return executionStore.hasInternalErrorForNode(node.id)
   })
 })
 

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

@@ -94,7 +94,7 @@ describe('TabErrors.vue', () => {
 
   it('renders prompt-level errors (Group title = error message)', async () => {
     const wrapper = mountComponent({
-      executionError: {
+      execution: {
         lastPromptError: {
           type: 'prompt_no_outputs',
           message: 'Server Error: No outputs',
@@ -118,7 +118,7 @@ describe('TabErrors.vue', () => {
     } as ReturnType<typeof getNodeByExecutionId>)
 
     const wrapper = mountComponent({
-      executionError: {
+      execution: {
         lastNodeErrors: {
           '6': {
             class_type: 'CLIPTextEncode',
@@ -143,7 +143,7 @@ describe('TabErrors.vue', () => {
     } as ReturnType<typeof getNodeByExecutionId>)
 
     const wrapper = mountComponent({
-      executionError: {
+      execution: {
         lastExecutionError: {
           prompt_id: 'abc',
           node_id: '10',
@@ -167,7 +167,7 @@ describe('TabErrors.vue', () => {
     vi.mocked(getNodeByExecutionId).mockReturnValue(null)
 
     const wrapper = mountComponent({
-      executionError: {
+      execution: {
         lastNodeErrors: {
           '1': {
             class_type: 'CLIPTextEncode',
@@ -198,7 +198,7 @@ describe('TabErrors.vue', () => {
     vi.mocked(useCopyToClipboard).mockReturnValue({ copyToClipboard: mockCopy })
 
     const wrapper = mountComponent({
-      executionError: {
+      execution: {
         lastNodeErrors: {
           '1': {
             class_type: 'TestNode',

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -3,14 +3,13 @@ import type { Ref } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
 import { app } from '@/scripts/app'
 import { isCloud } from '@/platform/distribution/types'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-
 import {
   getNodeByExecutionId,
   getRootParentNode
@@ -193,7 +192,7 @@ export function useErrorGroups(
   searchQuery: Ref<string>,
   t: (key: string) => string
 ) {
-  const executionErrorStore = useExecutionErrorStore()
+  const executionStore = useExecutionStore()
   const canvasStore = useCanvasStore()
   const collapseState = reactive<Record<string, boolean>>({})
 
@@ -224,7 +223,7 @@ export function useErrorGroups(
 
   const errorNodeCache = computed(() => {
     const map = new Map<string, LGraphNode>()
-    for (const execId of executionErrorStore.allErrorExecutionIds) {
+    for (const execId of executionStore.allErrorExecutionIds) {
       const node = getNodeByExecutionId(app.rootGraph, execId)
       if (node) map.set(execId, node)
     }
@@ -263,10 +262,10 @@ export function useErrorGroups(
   }
 
   function processPromptError(groupsMap: Map<string, GroupEntry>) {
-    if (selectedNodeInfo.value.nodeIds || !executionErrorStore.lastPromptError)
+    if (selectedNodeInfo.value.nodeIds || !executionStore.lastPromptError)
       return
 
-    const error = executionErrorStore.lastPromptError
+    const error = executionStore.lastPromptError
     const groupTitle = error.message
     const cards = getOrCreateGroup(groupsMap, groupTitle, 0)
     const isKnown = KNOWN_PROMPT_ERROR_TYPES.has(error.type)
@@ -294,10 +293,10 @@ export function useErrorGroups(
     groupsMap: Map<string, GroupEntry>,
     filterBySelection = false
   ) {
-    if (!executionErrorStore.lastNodeErrors) return
+    if (!executionStore.lastNodeErrors) return
 
     for (const [nodeId, nodeError] of Object.entries(
-      executionErrorStore.lastNodeErrors
+      executionStore.lastNodeErrors
     )) {
       addNodeErrorToGroup(
         groupsMap,
@@ -317,9 +316,9 @@ export function useErrorGroups(
     groupsMap: Map<string, GroupEntry>,
     filterBySelection = false
   ) {
-    if (!executionErrorStore.lastExecutionError) return
+    if (!executionStore.lastExecutionError) return
 
-    const e = executionErrorStore.lastExecutionError
+    const e = executionStore.lastExecutionError
     addNodeErrorToGroup(
       groupsMap,
       String(e.node_id),

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -9,7 +9,7 @@ import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
@@ -62,7 +62,7 @@ watchEffect(() => (widgets.value = widgetsProp))
 provide(HideLayoutFieldKey, true)
 
 const canvasStore = useCanvasStore()
-const executionErrorStore = useExecutionErrorStore()
+const executionStore = useExecutionStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const nodeDefStore = useNodeDefStore()
 const { t } = useI18n()
@@ -110,9 +110,7 @@ const targetNode = computed<LGraphNode | null>(() => {
 
 const hasDirectError = computed(() => {
   if (!targetNode.value) return false
-  return executionErrorStore.activeGraphErrorNodeIds.has(
-    String(targetNode.value.id)
-  )
+  return executionStore.activeGraphErrorNodeIds.has(String(targetNode.value.id))
 })
 
 const hasContainerInternalError = computed(() => {
@@ -121,7 +119,7 @@ const hasContainerInternalError = computed(() => {
     targetNode.value instanceof SubgraphNode || isGroupNode(targetNode.value)
   if (!isContainer) return false
 
-  return executionErrorStore.hasInternalErrorForNode(targetNode.value.id)
+  return executionStore.hasInternalErrorForNode(targetNode.value.id)
 })
 
 const nodeHasError = computed(() => {

src/components/searchbox/v2/NodeSearchCategorySidebar.vue

@@ -53,7 +53,6 @@ import NodeSearchCategoryTreeNode, {
   CATEGORY_UNSELECTED_CLASS
 } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
 import type { CategoryNode } from '@/components/searchbox/v2/NodeSearchCategoryTreeNode.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { nodeOrganizationService } from '@/services/nodeOrganizationService'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { NodeSourceType } from '@/types/nodeSource'
@@ -65,7 +64,6 @@ const selectedCategory = defineModel<string>('selectedCategory', {
 })
 
 const { t } = useI18n()
-const { flags } = useFeatureFlags()
 const nodeDefStore = useNodeDefStore()
 
 const topCategories = computed(() => [
@@ -81,7 +79,7 @@ const hasEssentialNodes = computed(() =>
 
 const sourceCategories = computed(() => {
   const categories = []
-  if (flags.nodeLibraryEssentialsEnabled && hasEssentialNodes.value) {
+  if (hasEssentialNodes.value) {
     categories.push({ id: 'essentials', label: t('g.essentials') })
   }
   categories.push({ id: 'custom', label: t('g.custom') })

src/components/sidebar/SidebarIcon.vue

@@ -41,7 +41,7 @@
         </div>
       </slot>
       <span v-if="label && !isSmall" class="side-bar-button-label">{{
-        st(label, label)
+        t(label)
       }}</span>
     </div>
   </Button>
@@ -50,10 +50,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { Component } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { st } from '@/i18n'
 import { cn } from '@/utils/tailwindUtil'
+
+const { t } = useI18n()
 const {
   icon = '',
   selected = false,
@@ -81,7 +83,7 @@ const overlayValue = computed(() =>
   typeof iconBadge === 'function' ? (iconBadge() ?? '') : iconBadge
 )
 const shouldShowBadge = computed(() => !!overlayValue.value)
-const computedTooltip = computed(() => st(tooltip, tooltip) + tooltipSuffix)
+const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 </script>
 
 <style>

src/components/sidebar/tabs/AssetsSidebarGridView.vue

@@ -1,7 +1,23 @@
 <template>
   <div class="flex h-full flex-col">
+    <!-- Active Jobs Grid -->
+    <div
+      v-if="!isInFolderView && isQueuePanelV2Enabled && activeJobItems.length"
+      class="grid max-h-[50%] scrollbar-custom overflow-y-auto"
+      :style="gridStyle"
+    >
+      <ActiveMediaAssetCard
+        v-for="job in activeJobItems"
+        :key="job.id"
+        :job="job"
+      />
+    </div>
+
     <!-- Assets Header -->
-    <div v-if="assets.length" class="px-2 2xl:px-4">
+    <div
+      v-if="assets.length"
+      :class="cn('px-2 2xl:px-4', activeJobItems.length && 'mt-2')"
+    >
       <div
         class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
       >
@@ -43,18 +59,25 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
+import ActiveMediaAssetCard from '@/platform/assets/components/ActiveMediaAssetCard.vue'
+import { useJobList } from '@/composables/queue/useJobList'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { isActiveJobState } from '@/utils/queueUtil'
+import { cn } from '@/utils/tailwindUtil'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 const {
   assets,
   isSelected,
+  isInFolderView = false,
   assetType = 'output',
   showOutputCount,
   getOutputCount
 } = defineProps<{
   assets: AssetItem[]
   isSelected: (assetId: string) => boolean
+  isInFolderView?: boolean
   assetType?: 'input' | 'output'
   showOutputCount: (asset: AssetItem) => boolean
   getOutputCount: (asset: AssetItem) => number
@@ -69,9 +92,19 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const { jobItems } = useJobList()
+const settingStore = useSettingStore()
+
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
 
 type AssetGridItem = { key: string; asset: AssetItem }
 
+const activeJobItems = computed(() =>
+  jobItems.value.filter((item) => isActiveJobState(item.state)).toReversed()
+)
+
 const assetItems = computed<AssetGridItem[]>(() =>
   assets.map((asset) => ({
     key: `asset-${asset.id}`,

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

@@ -112,22 +112,6 @@ const sampleAssets: AssetItem[] = [
     created_at: baseTimestamp,
     size: 134217728,
     tags: []
-  },
-  {
-    id: 'asset-text-1',
-    name: 'generation-notes.txt',
-    created_at: baseTimestamp,
-    preview_url: '/assets/images/default-template.png',
-    size: 2048,
-    tags: []
-  },
-  {
-    id: 'asset-other-1',
-    name: 'workflow-payload.bin',
-    created_at: baseTimestamp,
-    preview_url: '/assets/images/default-template.png',
-    size: 4096,
-    tags: []
   }
 ]
 
@@ -150,16 +134,6 @@ export const RunningAndGenerated: Story = {
   render: renderAssetsSidebarListView
 }
 
-export const TextAndMiscGeneratedAssets: Story = {
-  args: {
-    assets: sampleAssets.filter((asset) =>
-      ['.txt', '.bin'].some((suffix) => asset.name.endsWith(suffix))
-    ),
-    jobs: []
-  },
-  render: renderAssetsSidebarListView
-}
-
 function renderAssetsSidebarListView(args: StoryArgs) {
   return {
     components: { AssetsSidebarListView },

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

@@ -1,9 +1,6 @@
 import { mount } from '@vue/test-utils'
-import { defineComponent } from 'vue'
-import { describe, expect, it, vi } from 'vitest'
-
-import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
 
 import AssetsSidebarListView from './AssetsSidebarListView.vue'
 
@@ -13,97 +10,141 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
+vi.mock('@/composables/queue/useJobActions', () => ({
+  useJobActions: () => ({
+    cancelAction: { variant: 'ghost', label: 'Cancel', icon: 'pi pi-times' },
+    canCancelJob: ref(false),
+    runCancelJob: vi.fn()
+  })
+}))
+
+const mockJobItems = ref<
+  Array<{
+    id: string
+    title: string
+    meta: string
+    state: string
+    createTime?: number
+  }>
+>([])
+
+vi.mock('@/composables/queue/useJobList', () => ({
+  useJobList: () => ({
+    jobItems: mockJobItems
+  })
+}))
+
 vi.mock('@/stores/assetsStore', () => ({
   useAssetsStore: () => ({
     isAssetDeleting: () => false
   })
 }))
 
-const VirtualGridStub = defineComponent({
-  name: 'VirtualGrid',
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    }
-  },
-  template:
-    '<div><slot v-for="item in items" :key="item.key" name="item" :item="item" /></div>'
-})
-
-const buildAsset = (id: string, name: string): AssetItem =>
-  ({
-    id,
-    name,
-    tags: []
-  }) satisfies AssetItem
-
-const buildOutputItem = (asset: AssetItem): OutputStackListItem => ({
-  key: `asset-${asset.id}`,
-  asset
-})
-
-const mountListView = (assetItems: OutputStackListItem[] = []) =>
-  mount(AssetsSidebarListView, {
-    props: {
-      assetItems,
-      selectableAssets: [],
-      isSelected: () => false,
-      isStackExpanded: () => false,
-      toggleStack: async () => {},
-      assetType: 'output'
-    },
-    global: {
-      stubs: {
-        VirtualGrid: VirtualGridStub
-      }
-    }
+vi.mock('@/platform/settings/settingStore', () => ({
+  useSettingStore: () => ({
+    get: (key: string) => key === 'Comfy.Queue.QPOV2'
   })
+}))
+
+vi.mock('@/utils/queueUtil', () => ({
+  isActiveJobState: (state: string) =>
+    state === 'pending' || state === 'running'
+}))
+
+vi.mock('@/utils/queueDisplay', () => ({
+  iconForJobState: () => 'pi pi-spinner'
+}))
+
+vi.mock('@/platform/assets/schemas/assetMetadataSchema', () => ({
+  getOutputAssetMetadata: () => undefined
+}))
+
+vi.mock('@/platform/assets/utils/mediaIconUtil', () => ({
+  iconForMediaType: () => 'pi pi-file'
+}))
+
+vi.mock('@/utils/formatUtil', () => ({
+  formatDuration: (d: number) => `${d}s`,
+  formatSize: (s: number) => `${s}B`,
+  getMediaTypeFromFilename: () => 'image',
+  truncateFilename: (name: string) => name
+}))
 
 describe('AssetsSidebarListView', () => {
-  it('shows generated assets header when there are assets', () => {
-    const wrapper = mountListView([buildOutputItem(buildAsset('a1', 'x.png'))])
-
-    expect(wrapper.text()).toContain('sideToolbar.generatedAssetsHeader')
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockJobItems.value = []
   })
 
-  it('does not show assets header when there are no assets', () => {
-    const wrapper = mountListView([])
+  const defaultProps = {
+    assetItems: [],
+    selectableAssets: [],
+    isSelected: () => false,
+    isStackExpanded: () => false,
+    toggleStack: async () => {}
+  }
 
-    expect(wrapper.text()).not.toContain('sideToolbar.generatedAssetsHeader')
+  it('displays active jobs in oldest-first order (FIFO)', () => {
+    mockJobItems.value = [
+      {
+        id: 'newest',
+        title: 'Newest Job',
+        meta: '',
+        state: 'pending',
+        createTime: 3000
+      },
+      {
+        id: 'middle',
+        title: 'Middle Job',
+        meta: '',
+        state: 'running',
+        createTime: 2000
+      },
+      {
+        id: 'oldest',
+        title: 'Oldest Job',
+        meta: '',
+        state: 'pending',
+        createTime: 1000
+      }
+    ]
+
+    const wrapper = mount(AssetsSidebarListView, {
+      props: defaultProps,
+      shallow: true
+    })
+
+    const jobListItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
+    expect(jobListItems).toHaveLength(3)
+
+    const displayedTitles = jobListItems.map((item) =>
+      item.props('primaryText')
+    )
+    expect(displayedTitles).toEqual(['Oldest Job', 'Middle Job', 'Newest Job'])
   })
 
-  it('marks mp4 assets as video previews', () => {
-    const videoAsset = {
-      ...buildAsset('video-asset', 'clip.mp4'),
-      preview_url: '/api/view/clip.mp4',
-      user_metadata: {}
-    } satisfies AssetItem
+  it('excludes completed and failed jobs from active jobs section', () => {
+    mockJobItems.value = [
+      { id: 'pending', title: 'Pending', meta: '', state: 'pending' },
+      { id: 'completed', title: 'Completed', meta: '', state: 'completed' },
+      { id: 'failed', title: 'Failed', meta: '', state: 'failed' },
+      { id: 'running', title: 'Running', meta: '', state: 'running' }
+    ]
 
-    const wrapper = mountListView([buildOutputItem(videoAsset)])
+    const wrapper = mount(AssetsSidebarListView, {
+      props: defaultProps,
+      shallow: true
+    })
 
-    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    const assetListItem = listItems.at(-1)
+    const jobListItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
+    expect(jobListItems).toHaveLength(2)
 
-    expect(assetListItem).toBeDefined()
-    expect(assetListItem?.props('previewUrl')).toBe('/api/view/clip.mp4')
-    expect(assetListItem?.props('isVideoPreview')).toBe(true)
-  })
-
-  it('uses icon fallback for text assets even when preview_url exists', () => {
-    const textAsset = {
-      ...buildAsset('text-asset', 'notes.txt'),
-      preview_url: '/api/view/notes.txt',
-      user_metadata: {}
-    } satisfies AssetItem
-
-    const wrapper = mountListView([buildOutputItem(textAsset)])
-
-    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
-    const assetListItem = listItems.at(-1)
-
-    expect(assetListItem).toBeDefined()
-    expect(assetListItem?.props('previewUrl')).toBe('')
-    expect(assetListItem?.props('isVideoPreview')).toBe(false)
+    const displayedTitles = jobListItems.map((item) =>
+      item.props('primaryText')
+    )
+    expect(displayedTitles).toContain('Running')
+    expect(displayedTitles).toContain('Pending')
+    expect(displayedTitles).not.toContain('Completed')
+    expect(displayedTitles).not.toContain('Failed')
   })
 })

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -1,6 +1,48 @@
 <template>
   <div class="flex h-full flex-col">
-    <div v-if="assetItems.length" class="px-2">
+    <div
+      v-if="isQueuePanelV2Enabled && activeJobItems.length"
+      class="flex max-h-[50%] scrollbar-custom flex-col gap-2 overflow-y-auto px-2"
+    >
+      <AssetsListItem
+        v-for="job in activeJobItems"
+        :key="job.id"
+        :class="
+          cn(
+            'w-full shrink-0 text-text-primary transition-colors hover:bg-secondary-background-hover',
+            'cursor-default'
+          )
+        "
+        :preview-url="job.iconImageUrl"
+        :preview-alt="job.title"
+        :icon-name="job.iconName"
+        :icon-class="getJobIconClass(job)"
+        :primary-text="job.title"
+        :secondary-text="job.meta"
+        :progress-total-percent="job.progressTotalPercent"
+        :progress-current-percent="job.progressCurrentPercent"
+        @mouseenter="onJobEnter(job.id)"
+        @mouseleave="onJobLeave(job.id)"
+        @click.stop
+      >
+        <template v-if="hoveredJobId === job.id" #actions>
+          <Button
+            v-if="canCancelJob"
+            :variant="cancelAction.variant"
+            size="icon"
+            :aria-label="cancelAction.label"
+            @click.stop="runCancelJob()"
+          >
+            <i :class="cancelAction.icon" class="size-4" />
+          </Button>
+        </template>
+      </AssetsListItem>
+    </div>
+
+    <div
+      v-if="assetItems.length"
+      :class="cn('px-2', activeJobItems.length && 'mt-2')"
+    >
       <div
         class="flex items-center p-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
       >
@@ -34,7 +76,7 @@
             :aria-label="
               t('assetBrowser.ariaLabel.assetCard', {
                 name: item.asset.name,
-                type: getAssetMediaType(item.asset)
+                type: getMediaTypeFromFilename(item.asset.name)
               })
             "
             :class="
@@ -43,10 +85,11 @@
                 item.isChild && 'pl-6'
               )
             "
-            :preview-url="getAssetPreviewUrl(item.asset)"
+            :preview-url="item.asset.preview_url"
             :preview-alt="item.asset.name"
-            :icon-name="iconForMediaType(getAssetMediaType(item.asset))"
-            :is-video-preview="isVideoAsset(item.asset)"
+            :icon-name="
+              iconForMediaType(getMediaTypeFromFilename(item.asset.name))
+            "
             :primary-text="getAssetPrimaryText(item.asset)"
             :secondary-text="getAssetSecondaryText(item.asset)"
             :stack-count="getStackCount(item.asset)"
@@ -76,25 +119,31 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useJobActions } from '@/composables/queue/useJobActions'
+import type { JobListItem } from '@/composables/queue/useJobList'
+import { useJobList } from '@/composables/queue/useJobList'
 import AssetsListItem from '@/platform/assets/components/AssetsListItem.vue'
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { iconForMediaType } from '@/platform/assets/utils/mediaIconUtil'
 import { useAssetsStore } from '@/stores/assetsStore'
+import { isActiveJobState } from '@/utils/queueUtil'
 import {
   formatDuration,
   formatSize,
   getMediaTypeFromFilename,
   truncateFilename
 } from '@/utils/formatUtil'
+import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
+import { useSettingStore } from '@/platform/settings/settingStore'
 
 const {
   assetItems,
@@ -121,7 +170,24 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const { jobItems } = useJobList()
+const settingStore = useSettingStore()
+
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
+const hoveredJobId = ref<string | null>(null)
 const hoveredAssetId = ref<string | null>(null)
+const activeJobItems = computed(() =>
+  jobItems.value.filter((item) => isActiveJobState(item.state)).toReversed()
+)
+const hoveredJob = computed(() =>
+  hoveredJobId.value
+    ? (activeJobItems.value.find((job) => job.id === hoveredJobId.value) ??
+      null)
+    : null
+)
+const { cancelAction, canCancelJob, runCancelJob } = useJobActions(hoveredJob)
 
 const listGridStyle = {
   display: 'grid',
@@ -134,26 +200,10 @@ function getAssetPrimaryText(asset: AssetItem): string {
   return truncateFilename(asset.name)
 }
 
-function getAssetMediaType(asset: AssetItem) {
-  return getMediaTypeFromFilename(asset.name)
-}
-
-function isVideoAsset(asset: AssetItem): boolean {
-  return getAssetMediaType(asset) === 'video'
-}
-
-function getAssetPreviewUrl(asset: AssetItem): string {
-  const mediaType = getAssetMediaType(asset)
-  if (mediaType === 'image' || mediaType === 'video') {
-    return asset.preview_url || ''
-  }
-  return ''
-}
-
 function getAssetSecondaryText(asset: AssetItem): string {
   const metadata = getOutputAssetMetadata(asset.user_metadata)
   if (typeof metadata?.executionTimeInSeconds === 'number') {
-    return formatDuration(metadata.executionTimeInSeconds)
+    return `${metadata.executionTimeInSeconds.toFixed(2)}s`
   }
 
   const duration = asset.user_metadata?.duration
@@ -190,6 +240,16 @@ function getAssetCardClass(selected: boolean): string {
   )
 }
 
+function onJobEnter(jobId: string) {
+  hoveredJobId.value = jobId
+}
+
+function onJobLeave(jobId: string) {
+  if (hoveredJobId.value === jobId) {
+    hoveredJobId.value = null
+  }
+}
+
 function onAssetEnter(assetId: string) {
   hoveredAssetId.value = assetId
 }
@@ -199,4 +259,13 @@ function onAssetLeave(assetId: string) {
     hoveredAssetId.value = null
   }
 }
+
+function getJobIconClass(job: JobListItem): string | undefined {
+  const classes = []
+  const iconName = job.iconName ?? iconForJobState(job.state)
+  if (!job.iconImageUrl && iconName === iconForJobState('pending')) {
+    classes.push('animate-spin')
+  }
+  return classes.length ? classes.join(' ') : undefined
+}
 </script>

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -53,7 +53,31 @@
         class="pb-1 px-2 2xl:px-4"
         :show-generation-time-sort="activeTab === 'output'"
       />
-      <Divider type="dashed" class="my-2" />
+      <div
+        v-if="isQueuePanelV2Enabled && !isInFolderView"
+        class="flex items-center justify-between px-2 py-2 2xl:px-4"
+      >
+        <span class="text-sm text-muted-foreground">
+          {{ activeJobsLabel }}
+        </span>
+        <div class="flex items-center gap-2">
+          <span class="text-sm text-base-foreground">
+            {{ t('sideToolbar.queueProgressOverlay.clearQueueTooltip') }}
+          </span>
+          <Button
+            variant="destructive"
+            size="icon"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.clearQueueTooltip')
+            "
+            :disabled="queuedCount === 0"
+            @click="handleClearQueue"
+          >
+            <i class="icon-[lucide--list-x] size-4" />
+          </Button>
+        </div>
+      </div>
+      <Divider v-else type="dashed" class="my-2" />
     </template>
     <template #body>
       <div
@@ -102,6 +126,7 @@
           v-else
           :assets="displayAssets"
           :is-selected="isSelected"
+          :is-in-folder-view="isInFolderView"
           :asset-type="activeTab"
           :show-output-count="shouldShowOutputCount"
           :get-output-count="getOutputCount"
@@ -199,27 +224,18 @@ import {
   useDebounceFn,
   useElementHover,
   useResizeObserver,
-  useStorage,
-  useTimeoutFn
+  useStorage
 } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import Divider from 'primevue/divider'
 import { useToast } from 'primevue/usetoast'
-import {
-  computed,
-  defineAsyncComponent,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  ref,
-  watch
-} from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 // Lazy-loaded to avoid pulling THREE.js into the main bundle
-const Load3dViewerContent = defineAsyncComponent(
-  () => import('@/components/load3d/Load3dViewerContent.vue')
-)
+const Load3dViewerContent = () =>
+  import('@/components/load3d/Load3dViewerContent.vue')
 import AssetsSidebarGridView from '@/components/sidebar/tabs/AssetsSidebarGridView.vue'
 import AssetsSidebarListView from '@/components/sidebar/tabs/AssetsSidebarListView.vue'
 import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
@@ -242,16 +258,20 @@ import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { MediaKind } from '@/platform/assets/schemas/mediaAssetSchema'
 import { resolveOutputAssetItems } from '@/platform/assets/utils/outputAssetUtil'
 import { isCloud } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
-import { ResultItemImpl } from '@/stores/queueStore'
-import {
-  formatDuration,
-  getMediaTypeFromFilename,
-  isPreviewableMediaType
-} from '@/utils/formatUtil'
+import { useExecutionStore } from '@/stores/executionStore'
+import { ResultItemImpl, useQueueStore } from '@/stores/queueStore'
+import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-const { t } = useI18n()
+const { t, n } = useI18n()
+const commandStore = useCommandStore()
+const queueStore = useQueueStore()
+const { activeJobsCount } = storeToRefs(queueStore)
+const executionStore = useExecutionStore()
+const settingStore = useSettingStore()
 
 const emit = defineEmits<{ assetSelected: [asset: AssetItem] }>()
 
@@ -264,7 +284,12 @@ const viewMode = useStorage<'list' | 'grid'>(
   'Comfy.Assets.Sidebar.ViewMode',
   'grid'
 )
-const isListView = computed(() => viewMode.value === 'list')
+const isQueuePanelV2Enabled = computed(() =>
+  settingStore.get('Comfy.Queue.QPOV2')
+)
+const isListView = computed(
+  () => isQueuePanelV2Enabled.value && viewMode.value === 'list'
+)
 
 const contextMenuRef = ref<InstanceType<typeof MediaAssetContextMenu>>()
 const contextMenuAsset = ref<AssetItem | null>(null)
@@ -293,7 +318,17 @@ const shouldShowOutputCount = (item: AssetItem): boolean => {
 
 const formattedExecutionTime = computed(() => {
   if (!folderExecutionTime.value) return ''
-  return formatDuration(folderExecutionTime.value)
+  return formatDuration(folderExecutionTime.value * 1000)
+})
+
+const queuedCount = computed(() => queueStore.pendingTasks.length)
+const activeJobsLabel = computed(() => {
+  const count = activeJobsCount.value
+  return t(
+    'sideToolbar.queueProgressOverlay.activeJobs',
+    { count: n(count) },
+    count
+  )
 })
 
 const toast = useToast()
@@ -409,12 +444,6 @@ const visibleAssets = computed(() => {
   return listViewSelectableAssets.value
 })
 
-const previewableVisibleAssets = computed(() =>
-  visibleAssets.value.filter((asset) =>
-    isPreviewableMediaType(getMediaTypeFromFilename(asset.name))
-  )
-)
-
 const selectedAssets = computed(() => getSelectedAssets(visibleAssets.value))
 
 const isBulkMode = computed(
@@ -427,12 +456,17 @@ const isFolderLoading = computed(
 
 const showLoadingState = computed(
   () =>
-    (loading.value || isFolderLoading.value) && displayAssets.value.length === 0
+    (loading.value || isFolderLoading.value) &&
+    displayAssets.value.length === 0 &&
+    activeJobsCount.value === 0
 )
 
 const showEmptyState = computed(
   () =>
-    !loading.value && !isFolderLoading.value && displayAssets.value.length === 0
+    !loading.value &&
+    !isFolderLoading.value &&
+    displayAssets.value.length === 0 &&
+    activeJobsCount.value === 0
 )
 
 watch(visibleAssets, (newAssets) => {
@@ -440,10 +474,12 @@ watch(visibleAssets, (newAssets) => {
   // so selection stays consistent with what this view can act on.
   reconcileSelection(newAssets)
   if (currentGalleryAssetId.value && galleryActiveIndex.value !== -1) {
-    const newIndex = previewableVisibleAssets.value.findIndex(
+    const newIndex = newAssets.findIndex(
       (asset) => asset.id === currentGalleryAssetId.value
     )
-    galleryActiveIndex.value = newIndex
+    if (newIndex !== -1) {
+      galleryActiveIndex.value = newIndex
+    }
   }
 })
 
@@ -454,7 +490,7 @@ watch(galleryActiveIndex, (index) => {
 })
 
 const galleryItems = computed(() => {
-  return previewableVisibleAssets.value.map((asset) => {
+  return visibleAssets.value.map((asset) => {
     const mediaType = getMediaTypeFromFilename(asset.name)
     const resultItem = new ResultItemImpl({
       filename: asset.name,
@@ -501,16 +537,7 @@ function handleAssetSelect(asset: AssetItem, assets?: AssetItem[]) {
   handleAssetClick(asset, index, assetList)
 }
 
-const { start: scheduleCleanup, stop: cancelCleanup } = useTimeoutFn(
-  () => {
-    contextMenuAsset.value = null
-  },
-  0,
-  { immediate: false }
-)
-
 function handleAssetContextMenu(event: MouseEvent, asset: AssetItem) {
-  cancelCleanup()
   contextMenuAsset.value = asset
   void nextTick(() => {
     contextMenuRef.value?.show(event)
@@ -518,7 +545,10 @@ function handleAssetContextMenu(event: MouseEvent, asset: AssetItem) {
 }
 
 function handleContextMenuHide() {
-  scheduleCleanup()
+  // Delay clearing to allow command callbacks to emit before component unmounts
+  requestAnimationFrame(() => {
+    contextMenuAsset.value = null
+  })
 }
 
 const handleBulkDownload = (assets: AssetItem[]) => {
@@ -532,6 +562,16 @@ const handleBulkDelete = async (assets: AssetItem[]) => {
   }
 }
 
+const handleClearQueue = async () => {
+  const pendingJobIds = queueStore.pendingTasks
+    .map((task) => task.jobId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
+  await commandStore.execute('Comfy.ClearPendingTasks')
+
+  executionStore.clearInitializationByJobIds(pendingJobIds)
+}
+
 const handleBulkAddToWorkflow = async (assets: AssetItem[]) => {
   await addMultipleToWorkflow(assets)
   clearSelection()
@@ -560,9 +600,6 @@ const handleDeleteSelected = async () => {
 
 const handleZoomClick = (asset: AssetItem) => {
   const mediaType = getMediaTypeFromFilename(asset.name)
-  if (!isPreviewableMediaType(mediaType)) {
-    return
-  }
 
   if (mediaType === '3D') {
     const dialogStore = useDialogStore()
@@ -582,9 +619,7 @@ const handleZoomClick = (asset: AssetItem) => {
   }
 
   currentGalleryAssetId.value = asset.id
-  const index = previewableVisibleAssets.value.findIndex(
-    (a) => a.id === asset.id
-  )
+  const index = visibleAssets.value.findIndex((a) => a.id === asset.id)
   if (index !== -1) {
     galleryActiveIndex.value = index
   }

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -1,188 +0,0 @@
-<template>
-  <SidebarTabTemplate :title="$t('queue.jobHistory')">
-    <template #alt-title>
-      <div class="ml-auto flex shrink-0 items-center">
-        <JobHistoryActionsMenu @clear-history="showQueueClearHistoryDialog" />
-      </div>
-    </template>
-    <template #header>
-      <div class="flex flex-col gap-2 pb-1">
-        <div class="px-3 py-2">
-          <JobFilterTabs
-            v-model:selected-job-tab="selectedJobTab"
-            :has-failed-jobs="hasFailedJobs"
-          />
-        </div>
-        <JobFilterActions
-          v-model:selected-workflow-filter="selectedWorkflowFilter"
-          v-model:selected-sort-mode="selectedSortMode"
-          v-model:search-query="searchQuery"
-          class="px-3"
-          :hide-show-assets-action="true"
-          :show-search="true"
-          :search-placeholder="t('sideToolbar.queueProgressOverlay.searchJobs')"
-        />
-      </div>
-      <div
-        class="flex items-center justify-between px-3 pb-1 text-xs leading-none text-text-primary"
-      >
-        <span class="text-text-secondary">{{ activeQueueSummary }}</span>
-        <div class="flex items-center gap-2">
-          <span class="text-xs text-base-foreground">
-            {{ t('sideToolbar.queueProgressOverlay.clearQueueTooltip') }}
-          </span>
-          <Button
-            variant="destructive"
-            size="icon"
-            :aria-label="
-              t('sideToolbar.queueProgressOverlay.clearQueueTooltip')
-            "
-            :disabled="queuedCount === 0"
-            @click="clearQueuedWorkflows"
-          >
-            <i class="icon-[lucide--list-x] size-4" />
-          </Button>
-        </div>
-      </div>
-    </template>
-    <template #body>
-      <JobAssetsList
-        :displayed-job-groups="displayedJobGroups"
-        @cancel-item="onCancelItem"
-        @delete-item="onDeleteItem"
-        @view-item="onViewItem"
-        @menu="onMenuItem"
-      />
-      <JobContextMenu
-        ref="jobContextMenuRef"
-        :entries="jobMenuEntries"
-        @action="onJobMenuAction"
-      />
-      <ResultGallery
-        v-model:active-index="galleryActiveIndex"
-        :all-gallery-items="galleryItems"
-      />
-    </template>
-  </SidebarTabTemplate>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import JobFilterActions from '@/components/queue/job/JobFilterActions.vue'
-import JobFilterTabs from '@/components/queue/job/JobFilterTabs.vue'
-import JobAssetsList from '@/components/queue/job/JobAssetsList.vue'
-import JobContextMenu from '@/components/queue/job/JobContextMenu.vue'
-import JobHistoryActionsMenu from '@/components/queue/JobHistoryActionsMenu.vue'
-import type { MenuEntry } from '@/composables/queue/useJobMenu'
-import { useJobMenu } from '@/composables/queue/useJobMenu'
-import { useJobList } from '@/composables/queue/useJobList'
-import type { JobListItem } from '@/composables/queue/useJobList'
-import { useQueueClearHistoryDialog } from '@/composables/queue/useQueueClearHistoryDialog'
-import { useResultGallery } from '@/composables/queue/useResultGallery'
-import { useErrorHandling } from '@/composables/useErrorHandling'
-import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
-import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
-import Button from '@/components/ui/button/Button.vue'
-import { useCommandStore } from '@/stores/commandStore'
-import { useExecutionStore } from '@/stores/executionStore'
-import { useQueueStore } from '@/stores/queueStore'
-
-const { t, n } = useI18n()
-const commandStore = useCommandStore()
-const executionStore = useExecutionStore()
-const queueStore = useQueueStore()
-const { showQueueClearHistoryDialog } = useQueueClearHistoryDialog()
-const { wrapWithErrorHandlingAsync } = useErrorHandling()
-const {
-  selectedJobTab,
-  selectedWorkflowFilter,
-  selectedSortMode,
-  searchQuery,
-  hasFailedJobs,
-  filteredTasks,
-  groupedJobItems
-} = useJobList()
-
-const displayedJobGroups = computed(() => groupedJobItems.value)
-const runningCount = computed(() => queueStore.runningTasks.length)
-const queuedCount = computed(() => queueStore.pendingTasks.length)
-
-const runningJobsLabel = computed(() =>
-  t('sideToolbar.queueProgressOverlay.runningJobsLabel', {
-    count: n(runningCount.value)
-  })
-)
-const queuedJobsLabel = computed(() =>
-  t('sideToolbar.queueProgressOverlay.queuedJobsLabel', {
-    count: n(queuedCount.value)
-  })
-)
-const activeQueueSummary = computed(() => {
-  if (runningCount.value === 0 && queuedCount.value === 0) {
-    return t('sideToolbar.queueProgressOverlay.noActiveJobs')
-  }
-  if (queuedCount.value === 0) {
-    return runningJobsLabel.value
-  }
-  if (runningCount.value === 0) {
-    return queuedJobsLabel.value
-  }
-  return t('sideToolbar.queueProgressOverlay.runningQueuedSummary', {
-    running: runningJobsLabel.value,
-    queued: queuedJobsLabel.value
-  })
-})
-
-const clearQueuedWorkflows = wrapWithErrorHandlingAsync(async () => {
-  const pendingJobIds = queueStore.pendingTasks
-    .map((task) => task.jobId)
-    .filter((id): id is string => typeof id === 'string' && id.length > 0)
-
-  await commandStore.execute('Comfy.ClearPendingTasks')
-  executionStore.clearInitializationByJobIds(pendingJobIds)
-})
-
-const {
-  galleryActiveIndex,
-  galleryItems,
-  onViewItem: openResultGallery
-} = useResultGallery(() => filteredTasks.value)
-
-const onViewItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
-  await openResultGallery(item)
-})
-
-const onInspectAsset = (item: JobListItem) => {
-  void onViewItem(item)
-}
-
-const currentMenuItem = ref<JobListItem | null>(null)
-const jobContextMenuRef = ref<InstanceType<typeof JobContextMenu> | null>(null)
-
-const { jobMenuEntries, cancelJob } = useJobMenu(
-  () => currentMenuItem.value,
-  onInspectAsset
-)
-
-const onCancelItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
-  await cancelJob(item)
-})
-
-const onDeleteItem = wrapWithErrorHandlingAsync(async (item: JobListItem) => {
-  if (!item.taskRef) return
-  await queueStore.delete(item.taskRef)
-})
-
-const onMenuItem = (item: JobListItem, event: Event) => {
-  currentMenuItem.value = item
-  jobContextMenuRef.value?.open(event)
-}
-
-const onJobMenuAction = wrapWithErrorHandlingAsync(async (entry: MenuEntry) => {
-  if (entry.kind === 'divider') return
-  if (entry.onClick) await entry.onClick()
-  jobContextMenuRef.value?.hide()
-})
-</script>

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

@@ -113,7 +113,7 @@ describe('NodeLibrarySidebarTabV2', () => {
     const wrapper = mountComponent()
 
     const triggers = wrapper.findAllComponents(TabsTrigger)
-    expect(triggers).toHaveLength(3)
+    expect(triggers.length).toBe(3)
   })
 
   it('should render search box', () => {

src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue

@@ -52,7 +52,7 @@
             :value="tab.value"
             :class="
               cn(
-                'flex-1 text-center select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
+                'select-none border-none outline-none px-3 py-2 rounded-lg cursor-pointer',
                 'text-sm text-foreground transition-colors',
                 selectedTab === tab.value
                   ? 'bg-comfy-input font-bold'
@@ -70,9 +70,7 @@
       <!-- Tab content (scrollable) -->
       <TabsRoot v-model="selectedTab" class="h-full">
         <EssentialNodesPanel
-          v-if="
-            flags.nodeLibraryEssentialsEnabled && selectedTab === 'essentials'
-          "
+          v-if="selectedTab === 'essentials'"
           v-model:expanded-keys="expandedKeys"
           :root="renderedEssentialRoot"
           @node-click="handleNodeClick"
@@ -96,7 +94,7 @@
 </template>
 
 <script setup lang="ts">
-import { cn } from '@/utils/tailwindUtil'
+import { cn } from '@comfyorg/tailwind-utils'
 import { useLocalStorage } from '@vueuse/core'
 import {
   DropdownMenuContent,
@@ -111,13 +109,11 @@ import {
   TabsRoot,
   TabsTrigger
 } from 'reka-ui'
-import { computed, nextTick, onMounted, ref, watchEffect } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBoxV2.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
-import { usePerTabState } from '@/composables/usePerTabState'
 import {
   DEFAULT_SORTING_ID,
   DEFAULT_TAB_ID,
@@ -139,22 +135,11 @@ import EssentialNodesPanel from './nodeLibrary/EssentialNodesPanel.vue'
 import NodeDragPreview from './nodeLibrary/NodeDragPreview.vue'
 import SidebarTabTemplate from './SidebarTabTemplate.vue'
 
-const { flags } = useFeatureFlags()
-
 const selectedTab = useLocalStorage<TabId>(
   'Comfy.NodeLibrary.Tab',
   DEFAULT_TAB_ID
 )
 
-watchEffect(() => {
-  if (
-    !flags.nodeLibraryEssentialsEnabled &&
-    selectedTab.value === 'essentials'
-  ) {
-    selectedTab.value = DEFAULT_TAB_ID
-  }
-})
-
 const sortOrderByTab = useLocalStorage<Record<TabId, SortingStrategyId>>(
   'Comfy.NodeLibrary.SortByTab',
   {
@@ -163,7 +148,15 @@ const sortOrderByTab = useLocalStorage<Record<TabId, SortingStrategyId>>(
     custom: 'alphabetical'
   }
 )
-const sortOrder = usePerTabState(selectedTab, sortOrderByTab)
+const sortOrder = computed({
+  get: () => sortOrderByTab.value[selectedTab.value],
+  set: (value) => {
+    sortOrderByTab.value = {
+      ...sortOrderByTab.value,
+      [selectedTab.value]: value
+    }
+  }
+})
 
 const sortingOptions = computed(() =>
   nodeOrganizationService.getSortingStrategies().map((strategy) => ({
@@ -181,7 +174,12 @@ const expandedKeysByTab = ref<Record<TabId, string[]>>({
   all: [],
   custom: []
 })
-const expandedKeys = usePerTabState(selectedTab, expandedKeysByTab)
+const expandedKeys = computed({
+  get: () => expandedKeysByTab.value[selectedTab.value],
+  set: (value) => {
+    expandedKeysByTab.value[selectedTab.value] = value
+  }
+})
 
 const nodeDefStore = useNodeDefStore()
 const { startDrag } = useNodeDragToCanvas()
@@ -338,21 +336,11 @@ async function handleSearch() {
   expandedKeys.value = allKeys
 }
 
-const tabs = computed(() => {
-  const baseTabs: Array<{ value: TabId; label: string }> = [
-    { value: 'all', label: t('sideToolbar.nodeLibraryTab.allNodes') },
-    { value: 'custom', label: t('sideToolbar.nodeLibraryTab.custom') }
-  ]
-  return flags.nodeLibraryEssentialsEnabled
-    ? [
-        {
-          value: 'essentials' as TabId,
-          label: t('sideToolbar.nodeLibraryTab.essentials')
-        },
-        ...baseTabs
-      ]
-    : baseTabs
-})
+const tabs = computed(() => [
+  { value: 'essentials', label: t('sideToolbar.nodeLibraryTab.essentials') },
+  { value: 'all', label: t('sideToolbar.nodeLibraryTab.allNodes') },
+  { value: 'custom', label: t('sideToolbar.nodeLibraryTab.custom') }
+])
 
 onMounted(() => {
   searchBoxRef.value?.focus()

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

@@ -10,7 +10,6 @@
       <TreeExplorerV2
         v-model:expanded-keys="expandedKeys"
         :root="favoritesRoot"
-        show-context-menu
         @node-click="(node) => emit('nodeClick', node)"
         @add-to-favorites="handleAddToFavorites"
       />
@@ -27,7 +26,6 @@
       <TreeExplorerV2
         v-model:expanded-keys="expandedKeys"
         :root="section.root"
-        show-context-menu
         @node-click="(node) => emit('nodeClick', node)"
         @add-to-favorites="handleAddToFavorites"
       />

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

@@ -1,7 +1,13 @@
 <template>
   <div
-    class="group relative flex flex-col items-center justify-center py-4 px-2 rounded-2xl cursor-pointer select-none transition-colors duration-150 box-content bg-component-node-background hover:bg-secondary-background-hover border border-component-node-border aspect-square"
-    :data-node-name="node.data?.display_name"
+    :class="
+      cn(
+        'flex flex-col items-center justify-center py-4 px-2 rounded-2xl cursor-pointer select-none transition-colors duration-150 box-content',
+        'bg-component-node-background hover:bg-secondary-background-hover border border-component-node-border',
+        'aspect-square'
+      )
+    "
+    :data-node-name="nodeDef?.display_name"
     draggable="true"
     @click="handleClick"
     @dragstart="handleDragStart"
@@ -12,12 +18,11 @@
     <div class="flex flex-1 items-center justify-center">
       <i :class="cn(nodeIcon, 'size-14 text-muted-foreground')" />
     </div>
-
-    <TextTickerMultiLine
-      class="shrink-0 h-8 w-full text-xs font-bold text-foreground leading-4"
+    <span
+      class="shrink-0 h-8 text-sm font-bold text-center text-foreground line-clamp-2 leading-4"
     >
-      {{ node.data?.display_name }}
-    </TextTickerMultiLine>
+      {{ nodeDef?.display_name }}
+    </span>
   </div>
 
   <Teleport v-if="showPreview" to="body">
@@ -25,10 +30,7 @@
       :ref="(el) => (previewRef = el as HTMLElement)"
       :style="nodePreviewStyle"
     >
-      <NodePreviewCard
-        :node-def="node.data!"
-        :show-inputs-and-outputs="false"
-      />
+      <NodePreviewCard :node-def="nodeDef!" :show-inputs-and-outputs="false" />
     </div>
   </Teleport>
 </template>
@@ -37,7 +39,6 @@
 import { kebabCase } from 'es-toolkit/string'
 import { computed, inject } from 'vue'
 
-import TextTickerMultiLine from '@/components/common/TextTickerMultiLine.vue'
 import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { SidebarContainerKey } from '@/components/sidebar/tabs/SidebarTabTemplate.vue'
 import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
@@ -53,9 +54,10 @@ const emit = defineEmits<{
   click: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
 }>()
 
-const panelRef = inject(SidebarContainerKey, undefined)
 const nodeDef = computed(() => node.data)
 
+const panelRef = inject(SidebarContainerKey, undefined)
+
 const {
   previewRef,
   showPreview,
@@ -67,13 +69,13 @@ const {
 } = useNodePreviewAndDrag(nodeDef, { panelRef })
 
 const nodeIcon = computed(() => {
-  const nodeName = node.data?.name
+  const nodeName = nodeDef.value?.name
   const iconName = nodeName ? kebabCase(nodeName) : 'node'
   return `icon-[comfy--${iconName}]`
 })
 
 function handleClick() {
-  if (!node.data) return
+  if (!nodeDef.value) return
   emit('click', node)
 }
 </script>

src/components/ui/Popover.vue

@@ -15,16 +15,10 @@ defineOptions({
   inheritAttrs: false
 })
 
-const {
-  entries,
-  icon,
-  to,
-  showArrow = true
-} = defineProps<{
+defineProps<{
   entries?: MenuItem[]
   icon?: string
   to?: string | HTMLElement
-  showArrow?: boolean
 }>()
 </script>
 
@@ -45,7 +39,7 @@ const {
         v-bind="$attrs"
         class="z-1700 rounded-lg p-2 bg-base-background shadow-sm border border-border-subtle will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
       >
-        <slot :close>
+        <slot>
           <div class="flex flex-col p-1">
             <template v-for="item in entries ?? []" :key="item.label">
               <div
@@ -77,10 +71,7 @@ const {
             </template>
           </div>
         </slot>
-        <PopoverArrow
-          v-if="showArrow"
-          class="fill-base-background stroke-border-subtle"
-        />
+        <PopoverArrow class="fill-base-background stroke-border-subtle" />
       </PopoverContent>
     </PopoverPortal>
   </PopoverRoot>

src/components/ui/textarea/Textarea.stories.ts

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
-
-import Textarea from './Textarea.vue'
-
-const meta: Meta<typeof Textarea> = {
-  title: 'UI/Textarea',
-  component: Textarea,
-  tags: ['autodocs']
-}
-
-export default meta
-type Story = StoryObj<typeof Textarea>
-
-export const Default: Story = {
-  render: () => ({
-    components: { Textarea },
-    setup() {
-      const value = ref('Hello world')
-      return { value }
-    },
-    template:
-      '<Textarea v-model="value" placeholder="Type something..." class="max-w-sm" />'
-  })
-}
-
-export const Disabled: Story = {
-  render: () => ({
-    components: { Textarea },
-    template:
-      '<Textarea model-value="Disabled textarea" disabled class="max-w-sm" />'
-  })
-}
-
-export const WithLabel: Story = {
-  render: () => ({
-    components: { Textarea },
-    setup() {
-      const value = ref('Content that sits below the label')
-      return { value }
-    },
-    template: `
-      <div class="relative max-w-sm rounded-lg bg-component-node-widget-background">
-        <label class="pointer-events-none absolute left-3 top-1.5 text-xxs text-muted-foreground z-10">
-          Prompt
-        </label>
-        <Textarea
-          v-model="value"
-          class="size-full resize-none border-none bg-transparent pt-5 text-xs"
-        />
-      </div>
-    `
-  })
-}

src/components/ui/textarea/Textarea.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/utils/tailwindUtil'
-
-const { class: className, ...restAttrs } = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-
-const modelValue = defineModel<string | number>()
-</script>
-
-<template>
-  <textarea
-    v-bind="restAttrs"
-    v-model="modelValue"
-    :class="
-      cn(
-        'flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )
-    "
-  />
-</template>

src/composables/auth/useFirebaseAuthActions.ts

@@ -9,7 +9,6 @@ import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import type { BillingPortalTargetTier } from '@/stores/firebaseAuthStore'
@@ -52,17 +51,6 @@ export const useFirebaseAuthActions = () => {
   }
 
   const logout = wrapWithErrorHandlingAsync(async () => {
-    const workflowStore = useWorkflowStore()
-    if (workflowStore.modifiedWorkflows.length > 0) {
-      const dialogService = useDialogService()
-      const confirmed = await dialogService.confirm({
-        title: t('auth.signOut.unsavedChangesTitle'),
-        message: t('auth.signOut.unsavedChangesMessage'),
-        type: 'dirtyClose'
-      })
-      if (!confirmed) return
-    }
-
     await authStore.logout()
     toastStore.add({
       severity: 'success',