test: add perf tests for workflow loading time

Add two @perf tests measuring workflow load + settling time: - large workflow (245 nodes): measures DOM creation and layout cost - media-heavy workflow (585 nodes + 128 media): measures combined node creation and media preview loading pressure The media-heavy test intercepts /api/view requests with a small test image to ensure deterministic media rendering cost.
2026-04-06 20:39:58 +00:00 · 2026-04-02 16:52:52 +08:00
39 changed files with 27159 additions and 1902 deletions
--- a/3
+++ b/3
@@ -69,9 +69,6 @@
 /src/renderer/extensions/vueNodes/widgets/composables/usePainterWidget.ts @jtydhr88
 /src/lib/litegraph/src/widgets/PainterWidget.ts   @jtydhr88

-# GLSL
-/src/renderer/glsl/                               @jtydhr88 @pythongosssss @christian-byrne
-
 # 3D
 /src/extensions/core/load3d.ts                    @jtydhr88
 /src/extensions/core/load3dLazy.ts                @jtydhr88
--- a/browser_tests/assets/profiling-workflow-media-heavy.json
+++ b/browser_tests/assets/profiling-workflow-media-heavy.json
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -19,9 +19,7 @@ import { QueuePanel } from '@e2e/fixtures/components/QueuePanel'
 import { SettingDialog } from '@e2e/fixtures/components/SettingDialog'
 import {
  AssetsSidebarTab,
-  ModelLibrarySidebarTab,
  NodeLibrarySidebarTab,
-  NodeLibrarySidebarTabV2,
  WorkflowsSidebarTab
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
@@ -33,7 +31,6 @@ import { CommandHelper } from '@e2e/fixtures/helpers/CommandHelper'
 import { DragDropHelper } from '@e2e/fixtures/helpers/DragDropHelper'
 import { FeatureFlagHelper } from '@e2e/fixtures/helpers/FeatureFlagHelper'
 import { KeyboardHelper } from '@e2e/fixtures/helpers/KeyboardHelper'
-import { ModelLibraryHelper } from '@e2e/fixtures/helpers/ModelLibraryHelper'
 import { NodeOperationsHelper } from '@e2e/fixtures/helpers/NodeOperationsHelper'
 import { PerformanceHelper } from '@e2e/fixtures/helpers/PerformanceHelper'
 import { SettingsHelper } from '@e2e/fixtures/helpers/SettingsHelper'
@@ -58,9 +55,7 @@ class ComfyPropertiesPanel {

 class ComfyMenu {
  private _assetsTab: AssetsSidebarTab | null = null
-  private _modelLibraryTab: ModelLibrarySidebarTab | null = null
  private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
-  private _nodeLibraryTabV2: NodeLibrarySidebarTabV2 | null = null
  private _workflowsTab: WorkflowsSidebarTab | null = null
  private _topbar: Topbar | null = null

@@ -78,21 +73,11 @@ class ComfyMenu {
    return this.sideToolbar.locator('.side-bar-button')
  }

-  get modelLibraryTab() {
-    this._modelLibraryTab ??= new ModelLibrarySidebarTab(this.page)
-    return this._modelLibraryTab
-  }
-
  get nodeLibraryTab() {
    this._nodeLibraryTab ??= new NodeLibrarySidebarTab(this.page)
    return this._nodeLibraryTab
  }

-  get nodeLibraryTabV2() {
-    this._nodeLibraryTabV2 ??= new NodeLibrarySidebarTabV2(this.page)
-    return this._nodeLibraryTabV2
-  }
-
  get assetsTab() {
    this._assetsTab ??= new AssetsSidebarTab(this.page)
    return this._assetsTab
@@ -214,7 +199,6 @@ export class ComfyPage {
  public readonly queuePanel: QueuePanel
  public readonly perf: PerformanceHelper
  public readonly assets: AssetsHelper
-  public readonly modelLibrary: ModelLibraryHelper

  /** Worker index to test user ID */
  public readonly userIds: string[] = []
@@ -262,7 +246,6 @@ export class ComfyPage {
    this.queuePanel = new QueuePanel(page)
    this.perf = new PerformanceHelper(page)
    this.assets = new AssetsHelper(page)
-    this.modelLibrary = new ModelLibraryHelper(page)
  }

  get visibleToasts() {
--- a/browser_tests/fixtures/components/SidebarTab.ts
+++ b/browser_tests/fixtures/components/SidebarTab.ts
@@ -100,59 +100,6 @@ export class NodeLibrarySidebarTab extends SidebarTab {
  }
 }

-export class NodeLibrarySidebarTabV2 extends SidebarTab {
-  constructor(public override readonly page: Page) {
-    super(page, 'node-library')
-  }
-
-  get searchInput() {
-    return this.page.getByPlaceholder('Search...')
-  }
-
-  get sidebarContent() {
-    return this.page.locator('.sidebar-content-container')
-  }
-
-  getTab(name: string) {
-    return this.sidebarContent.getByRole('tab', { name, exact: true })
-  }
-
-  get allTab() {
-    return this.getTab('All')
-  }
-
-  get blueprintsTab() {
-    return this.getTab('Blueprints')
-  }
-
-  get sortButton() {
-    return this.sidebarContent.getByRole('button', { name: 'Sort' })
-  }
-
-  getFolder(folderName: string) {
-    return this.sidebarContent
-      .getByRole('treeitem', { name: folderName })
-      .first()
-  }
-
-  getNode(nodeName: string) {
-    return this.sidebarContent.getByRole('treeitem', { name: nodeName }).first()
-  }
-
-  async expandFolder(folderName: string) {
-    const folder = this.getFolder(folderName)
-    const isExpanded = await folder.getAttribute('aria-expanded')
-    if (isExpanded !== 'true') {
-      await folder.click()
-    }
-  }
-
-  override async open() {
-    await super.open()
-    await this.searchInput.waitFor({ state: 'visible' })
-  }
-}
-
 export class WorkflowsSidebarTab extends SidebarTab {
  constructor(public override readonly page: Page) {
    super(page, 'workflows')
@@ -223,59 +170,6 @@ export class WorkflowsSidebarTab extends SidebarTab {
  }
 }

-export class ModelLibrarySidebarTab extends SidebarTab {
-  constructor(public override readonly page: Page) {
-    super(page, 'model-library')
-  }
-
-  get searchInput() {
-    return this.page.getByPlaceholder('Search Models...')
-  }
-
-  get modelTree() {
-    return this.page.locator('.model-lib-tree-explorer')
-  }
-
-  get refreshButton() {
-    return this.page.getByRole('button', { name: 'Refresh' })
-  }
-
-  get loadAllFoldersButton() {
-    return this.page.getByRole('button', { name: 'Load All Folders' })
-  }
-
-  get folderNodes() {
-    return this.modelTree.locator('.p-tree-node:not(.p-tree-node-leaf)')
-  }
-
-  get leafNodes() {
-    return this.modelTree.locator('.p-tree-node-leaf')
-  }
-
-  get modelPreview() {
-    return this.page.locator('.model-lib-model-preview')
-  }
-
-  override async open() {
-    await super.open()
-    await this.modelTree.waitFor({ state: 'visible' })
-  }
-
-  getFolderByLabel(label: string) {
-    return this.modelTree
-      .locator('.p-tree-node:not(.p-tree-node-leaf)')
-      .filter({ hasText: label })
-      .first()
-  }
-
-  getLeafByLabel(label: string) {
-    return this.modelTree
-      .locator('.p-tree-node-leaf')
-      .filter({ hasText: label })
-      .first()
-  }
-}
-
 export class AssetsSidebarTab extends SidebarTab {
  constructor(public override readonly page: Page) {
    super(page, 'assets')
--- a/browser_tests/fixtures/components/Topbar.ts
+++ b/browser_tests/fixtures/components/Topbar.ts
@@ -50,30 +50,15 @@ export class Topbar {
    return classes ? !classes.includes('invisible') : false
  }

-  get newWorkflowButton(): Locator {
-    return this.page.locator('.new-blank-workflow-button')
-  }
-
  getWorkflowTab(tabName: string): Locator {
    return this.page
      .locator(`.workflow-tabs .workflow-label:has-text("${tabName}")`)
      .locator('..')
  }

-  getTab(index: number): Locator {
-    return this.page.locator('.workflow-tabs .p-togglebutton').nth(index)
-  }
-
-  getActiveTab(): Locator {
-    return this.page.locator(
-      '.workflow-tabs .p-togglebutton.p-togglebutton-checked'
-    )
-  }
-
  async closeWorkflowTab(tabName: string) {
    const tab = this.getWorkflowTab(tabName)
-    await tab.hover()
-    await tab.locator('.close-button').click({ force: true })
+    await tab.getByRole('button', { name: 'Close' }).click({ force: true })
  }

  getSaveDialog(): Locator {
--- a/browser_tests/fixtures/helpers/AssetsHelper.ts
+++ b/browser_tests/fixtures/helpers/AssetsHelper.ts
@@ -1,7 +1,5 @@
 import type { Page, Route } from '@playwright/test'

-import type { JobsListResponse } from '@comfyorg/ingest-types'
-
 import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'

 const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
@@ -11,12 +9,12 @@ const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
 export function createMockJob(
  overrides: Partial<RawJobListItem> & { id: string }
 ): RawJobListItem {
-  const now = Date.now()
+  const now = Date.now() / 1000
  return {
    status: 'completed',
    create_time: now,
    execution_start_time: now,
-    execution_end_time: now + 5000,
+    execution_end_time: now + 5,
    preview_output: {
      filename: `output_${overrides.id}.png`,
      subfolder: '',
@@ -35,13 +33,13 @@ export function createMockJobs(
  count: number,
  baseOverrides?: Partial<RawJobListItem>
 ): RawJobListItem[] {
-  const now = Date.now()
+  const now = Date.now() / 1000
  return Array.from({ length: count }, (_, i) =>
    createMockJob({
      id: `job-${String(i + 1).padStart(3, '0')}`,
-      create_time: now - i * 60_000,
-      execution_start_time: now - i * 60_000,
-      execution_end_time: now - i * 60_000 + 5000 + i * 1000,
+      create_time: now - i * 60,
+      execution_start_time: now - i * 60,
+      execution_end_time: now - i * 60 + 5 + i,
      preview_output: {
        filename: `image_${String(i + 1).padStart(3, '0')}.png`,
        subfolder: '',
@@ -145,24 +143,18 @@ export class AssetsHelper {
      const limit = parseLimit(url, total)
      const visibleJobs = filteredJobs.slice(offset, offset + limit)

-      // Response shape matches JobsListResponse from @comfyorg/ingest-types
-      const response = {
-        jobs: visibleJobs,
-        pagination: {
-          offset,
-          limit,
-          total,
-          has_more: offset + visibleJobs.length < total
-        }
-      } satisfies {
-        jobs: unknown[]
-        pagination: JobsListResponse['pagination']
-      }
-
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
-        body: JSON.stringify(response)
+        body: JSON.stringify({
+          jobs: visibleJobs,
+          pagination: {
+            offset,
+            limit,
+            total,
+            has_more: offset + visibleJobs.length < total
+          }
+        })
      })
    }

--- a/browser_tests/fixtures/helpers/ModelLibraryHelper.ts
+++ b/browser_tests/fixtures/helpers/ModelLibraryHelper.ts
@@ -1,134 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-
-import type {
-  ModelFile,
-  ModelFolderInfo
-} from '../../../src/platform/assets/schemas/assetSchema'
-
-const modelFoldersRoutePattern = /\/api\/experiment\/models$/
-const modelFilesRoutePattern = /\/api\/experiment\/models\/([^?]+)/
-const viewMetadataRoutePattern = /\/api\/view_metadata\/([^?]+)/
-
-export interface MockModelMetadata {
-  'modelspec.title'?: string
-  'modelspec.author'?: string
-  'modelspec.architecture'?: string
-  'modelspec.description'?: string
-  'modelspec.resolution'?: string
-  'modelspec.tags'?: string
-}
-
-export function createMockModelFolders(names: string[]): ModelFolderInfo[] {
-  return names.map((name) => ({ name, folders: [] }))
-}
-
-export function createMockModelFiles(
-  filenames: string[],
-  pathIndex = 0
-): ModelFile[] {
-  return filenames.map((name) => ({ name, pathIndex }))
-}
-
-export class ModelLibraryHelper {
-  private foldersRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private filesRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private metadataRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private folders: ModelFolderInfo[] = []
-  private filesByFolder: Record<string, ModelFile[]> = {}
-  private metadataByModel: Record<string, MockModelMetadata> = {}
-
-  constructor(private readonly page: Page) {}
-
-  async mockModelFolders(folders: ModelFolderInfo[]): Promise<void> {
-    this.folders = [...folders]
-
-    if (this.foldersRouteHandler) return
-
-    this.foldersRouteHandler = async (route: Route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(this.folders)
-      })
-    }
-
-    await this.page.route(modelFoldersRoutePattern, this.foldersRouteHandler)
-  }
-
-  async mockModelFiles(folder: string, files: ModelFile[]): Promise<void> {
-    this.filesByFolder[folder] = [...files]
-
-    if (this.filesRouteHandler) return
-
-    this.filesRouteHandler = async (route: Route) => {
-      const match = route.request().url().match(modelFilesRoutePattern)
-      const folderName = match?.[1] ? decodeURIComponent(match[1]) : undefined
-      const files = folderName ? (this.filesByFolder[folderName] ?? []) : []
-
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(files)
-      })
-    }
-
-    await this.page.route(modelFilesRoutePattern, this.filesRouteHandler)
-  }
-
-  async mockMetadata(
-    entries: Record<string, MockModelMetadata>
-  ): Promise<void> {
-    Object.assign(this.metadataByModel, entries)
-
-    if (this.metadataRouteHandler) return
-
-    this.metadataRouteHandler = async (route: Route) => {
-      const url = new URL(route.request().url())
-      const filename = url.searchParams.get('filename') ?? ''
-      const metadata = this.metadataByModel[filename]
-
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(metadata ?? {})
-      })
-    }
-
-    await this.page.route(viewMetadataRoutePattern, this.metadataRouteHandler)
-  }
-
-  async mockFoldersWithFiles(config: Record<string, string[]>): Promise<void> {
-    const folderNames = Object.keys(config)
-    await this.mockModelFolders(createMockModelFolders(folderNames))
-    for (const [folder, files] of Object.entries(config)) {
-      await this.mockModelFiles(folder, createMockModelFiles(files))
-    }
-  }
-
-  async clearMocks(): Promise<void> {
-    this.folders = []
-    this.filesByFolder = {}
-    this.metadataByModel = {}
-
-    if (this.foldersRouteHandler) {
-      await this.page.unroute(
-        modelFoldersRoutePattern,
-        this.foldersRouteHandler
-      )
-      this.foldersRouteHandler = null
-    }
-
-    if (this.filesRouteHandler) {
-      await this.page.unroute(modelFilesRoutePattern, this.filesRouteHandler)
-      this.filesRouteHandler = null
-    }
-
-    if (this.metadataRouteHandler) {
-      await this.page.unroute(
-        viewMetadataRoutePattern,
-        this.metadataRouteHandler
-      )
-      this.metadataRouteHandler = null
-    }
-  }
-}
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -80,10 +80,7 @@ export const TestIds = {
    widgetActionsMenuButton: 'widget-actions-menu-button'
  },
  node: {
-    titleInput: 'node-title-input',
-    pinIndicator: 'node-pin-indicator',
-    innerWrapper: 'node-inner-wrapper',
-    mainImage: 'main-image'
+    titleInput: 'node-title-input'
  },
  selectionToolbox: {
    colorPickerButton: 'color-picker-button',
--- a/browser_tests/fixtures/utils/vueNodeFixtures.ts
+++ b/browser_tests/fixtures/utils/vueNodeFixtures.ts
@@ -1,7 +1,5 @@
 import type { Locator } from '@playwright/test'

-import { TestIds } from '../selectors'
-
 /** DOM-centric helper for a single Vue-rendered node on the canvas. */
 export class VueNodeFixture {
  constructor(private readonly locator: Locator) {}
@@ -22,10 +20,6 @@ export class VueNodeFixture {
    return this.locator.locator('[data-testid^="node-body-"]')
  }

-  get pinIndicator(): Locator {
-    return this.locator.getByTestId(TestIds.node.pinIndicator)
-  }
-
  get collapseButton(): Locator {
    return this.locator.locator('[data-testid="node-collapse-button"]')
  }
--- a/browser_tests/tests/performance.spec.ts
+++ b/browser_tests/tests/performance.spec.ts
@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'

 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
+import { assetPath } from '../fixtures/utils/paths'
 import { logMeasurement, recordMeasurement } from '../helpers/perfReporter'

 test.describe('Performance', { tag: ['@perf'] }, () => {
@@ -348,6 +349,63 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
    })
  })

+  test.describe('workflow loading', () => {
+    test('large workflow load and settle', async ({ comfyPage }) => {
+      await comfyPage.perf.startMeasuring()
+
+      await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+
+      // Settling period: 120 frames (~2s) for DOM creation + layout stabilization
+      for (let i = 0; i < 120; i++) {
+        await comfyPage.nextFrame()
+      }
+
+      const m = await comfyPage.perf.stopMeasuring('large-workflow-load')
+      recordMeasurement(m)
+      logMeasurement('Large workflow load', m, [
+        'durationMs',
+        'styleRecalcs',
+        'layouts',
+        'taskDurationMs',
+        'totalBlockingTimeMs',
+        'domNodes',
+        'heapDeltaBytes'
+      ])
+    })
+
+    test('media-heavy workflow load and settle', async ({ comfyPage }) => {
+      // Intercept all media preview requests with a small test image
+      await comfyPage.page.route(/\/api\/view\?/, (route) =>
+        route.fulfill({
+          path: assetPath('image64x64.webp'),
+          contentType: 'image/webp'
+        })
+      )
+
+      await comfyPage.perf.startMeasuring()
+
+      await comfyPage.workflow.loadWorkflow('profiling-workflow-media-heavy')
+
+      // Longer settling: 240 frames (~4s) for 585 nodes + 128 media previews
+      for (let i = 0; i < 240; i++) {
+        await comfyPage.nextFrame()
+      }
+
+      const m = await comfyPage.perf.stopMeasuring('media-heavy-workflow-load')
+      recordMeasurement(m)
+      logMeasurement('Media-heavy workflow load', m, [
+        'durationMs',
+        'styleRecalcs',
+        'layouts',
+        'taskDurationMs',
+        'totalBlockingTimeMs',
+        'frameDurationMs',
+        'domNodes',
+        'heapDeltaBytes'
+      ])
+    })
+  })
+
  test('workflow execution', async ({ comfyPage }) => {
    // Uses lightweight PrimitiveString → PreviewAny workflow (no GPU needed)
    await comfyPage.workflow.loadWorkflow('execution/partial_execution')
--- a/browser_tests/tests/queue/queueOverlay.spec.ts
+++ b/browser_tests/tests/queue/queueOverlay.spec.ts
@@ -1,118 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-import { createMockJob } from '../../fixtures/helpers/AssetsHelper'
-import { TestIds } from '../../fixtures/selectors'
-import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
-
-const now = Date.now()
-
-const MOCK_JOBS: RawJobListItem[] = [
-  createMockJob({
-    id: 'job-completed-1',
-    status: 'completed',
-    create_time: now - 60_000,
-    execution_start_time: now - 60_000,
-    execution_end_time: now - 50_000,
-    outputs_count: 2
-  }),
-  createMockJob({
-    id: 'job-completed-2',
-    status: 'completed',
-    create_time: now - 120_000,
-    execution_start_time: now - 120_000,
-    execution_end_time: now - 115_000,
-    outputs_count: 1
-  }),
-  createMockJob({
-    id: 'job-failed-1',
-    status: 'failed',
-    create_time: now - 30_000,
-    execution_start_time: now - 30_000,
-    execution_end_time: now - 28_000,
-    outputs_count: 0
-  })
-]
-
-test.describe('Queue overlay', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(MOCK_JOBS)
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
-  test('Toggle button opens expanded queue overlay', async ({ comfyPage }) => {
-    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
-    await toggle.click()
-
-    // Expanded overlay should show job items
-    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeVisible({
-      timeout: 5000
-    })
-  })
-
-  test('Overlay shows filter tabs (All, Completed)', async ({ comfyPage }) => {
-    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
-    await toggle.click()
-
-    await expect(
-      comfyPage.page.getByRole('button', { name: 'All', exact: true })
-    ).toBeVisible({ timeout: 5000 })
-    await expect(
-      comfyPage.page.getByRole('button', { name: 'Completed', exact: true })
-    ).toBeVisible()
-  })
-
-  test('Overlay shows Failed tab when failed jobs exist', async ({
-    comfyPage
-  }) => {
-    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
-    await toggle.click()
-
-    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeVisible({
-      timeout: 5000
-    })
-
-    await expect(
-      comfyPage.page.getByRole('button', { name: 'Failed', exact: true })
-    ).toBeVisible()
-  })
-
-  test('Completed filter shows only completed jobs', async ({ comfyPage }) => {
-    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
-    await toggle.click()
-
-    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeVisible({
-      timeout: 5000
-    })
-
-    await comfyPage.page
-      .getByRole('button', { name: 'Completed', exact: true })
-      .click()
-
-    await expect(
-      comfyPage.page.locator('[data-job-id="job-completed-1"]')
-    ).toBeVisible({ timeout: 5000 })
-    await expect(
-      comfyPage.page.locator('[data-job-id="job-failed-1"]')
-    ).not.toBeVisible()
-  })
-
-  test('Toggling overlay again closes it', async ({ comfyPage }) => {
-    const toggle = comfyPage.page.getByTestId(TestIds.queue.overlayToggle)
-    await toggle.click()
-
-    await expect(comfyPage.page.locator('[data-job-id]').first()).toBeVisible({
-      timeout: 5000
-    })
-
-    await toggle.click()
-
-    await expect(
-      comfyPage.page.locator('[data-job-id]').first()
-    ).not.toBeVisible({ timeout: 5000 })
-  })
-})
--- a/browser_tests/tests/selectionToolboxActions.spec.ts
+++ b/browser_tests/tests/selectionToolboxActions.spec.ts
@@ -1,20 +1,9 @@
-import type { Locator } from '@playwright/test'
-
 import {
  comfyExpect as expect,
  comfyPageFixture as test
 } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
-
-const BYPASS_CLASS = /before:bg-bypass\/60/
-
-function getNodeWrapper(comfyPage: ComfyPage, nodeTitle: string): Locator {
-  return comfyPage.page
-    .locator('[data-node-id]')
-    .filter({ hasText: nodeTitle })
-    .getByTestId('node-inner-wrapper')
-}
+import type { ComfyPage } from '../fixtures/ComfyPage'

 async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
  const nodePos = await nodeRef.getPosition()
@@ -47,7 +36,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
      () => window.app!.graph!._nodes.length
    )

-    const deleteButton = comfyPage.page.getByTestId('delete-button')
+    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
    await expect(deleteButton).toBeVisible()
    await deleteButton.click({ force: true })
    await comfyPage.nextFrame()
@@ -62,12 +51,14 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
    await selectNodeWithPan(comfyPage, nodeRef)

-    const infoButton = comfyPage.page.getByTestId('info-button')
+    const infoButton = comfyPage.page.locator('[data-testid="info-button"]')
    await expect(infoButton).toBeVisible()
    await infoButton.click({ force: true })
    await comfyPage.nextFrame()

-    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
+    await expect(
+      comfyPage.page.locator('[data-testid="properties-panel"]')
+    ).toBeVisible()
  })

  test('convert-to-subgraph button visible with multi-select', async ({
@@ -80,7 +71,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
    await comfyPage.nextFrame()

    await expect(
-      comfyPage.page.getByTestId('convert-to-subgraph-button')
+      comfyPage.page.locator('[data-testid="convert-to-subgraph-button"]')
    ).toBeVisible()
  })

@@ -97,7 +88,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
      () => window.app!.graph!._nodes.length
    )

-    const deleteButton = comfyPage.page.getByTestId('delete-button')
+    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
    await expect(deleteButton).toBeVisible()
    await deleteButton.click({ force: true })
    await comfyPage.nextFrame()
@@ -107,152 +98,4 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
    )
    expect(newCount).toBe(initialCount - 2)
  })
-
-  test('bypass button toggles bypass on single node', async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('nodes/single_ksampler')
-    await comfyPage.vueNodes.waitForNodes()
-
-    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    await selectNodeWithPan(comfyPage, nodeRef)
-
-    expect(await nodeRef.isBypassed()).toBe(false)
-
-    const bypassButton = comfyPage.page.getByTestId('bypass-button')
-    await expect(bypassButton).toBeVisible()
-    await bypassButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    expect(await nodeRef.isBypassed()).toBe(true)
-    await expect(getNodeWrapper(comfyPage, 'KSampler')).toHaveClass(
-      BYPASS_CLASS
-    )
-
-    await bypassButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    expect(await nodeRef.isBypassed()).toBe(false)
-    await expect(getNodeWrapper(comfyPage, 'KSampler')).not.toHaveClass(
-      BYPASS_CLASS
-    )
-  })
-
-  test('convert-to-subgraph button converts node to subgraph', async ({
-    comfyPage
-  }) => {
-    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    await selectNodeWithPan(comfyPage, nodeRef)
-
-    const convertButton = comfyPage.page.getByTestId(
-      'convert-to-subgraph-button'
-    )
-    await expect(convertButton).toBeVisible()
-    await convertButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    // KSampler should be gone, replaced by a subgraph node
-    await expect
-      .poll(() => comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))
-      .toHaveLength(0)
-
-    await expect
-      .poll(() => comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph'))
-      .toHaveLength(1)
-  })
-
-  test('convert-to-subgraph button converts multiple nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
-
-    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-
-    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
-    await comfyPage.nextFrame()
-
-    const convertButton = comfyPage.page.getByTestId(
-      'convert-to-subgraph-button'
-    )
-    await expect(convertButton).toBeVisible()
-    await convertButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    await expect
-      .poll(() => comfyPage.nodeOps.getNodeRefsByTitle('New Subgraph'))
-      .toHaveLength(1)
-
-    await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount())
-      .toBe(initialCount - 1)
-  })
-
-  test('frame nodes button creates group from multiple selected nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
-
-    const initialGroupCount = await comfyPage.page.evaluate(
-      () => window.app!.graph.groups.length
-    )
-
-    await comfyPage.nodeOps.selectNodes(['KSampler', 'Empty Latent Image'])
-    await comfyPage.nextFrame()
-
-    const frameButton = comfyPage.page.getByRole('button', {
-      name: /Frame Nodes/i
-    })
-    await expect(frameButton).toBeVisible()
-    await frameButton.click({ force: true })
-    await comfyPage.nextFrame()
-
-    await expect
-      .poll(() =>
-        comfyPage.page.evaluate(() => window.app!.graph.groups.length)
-      )
-      .toBe(initialGroupCount + 1)
-  })
-
-  test('frame nodes button is not visible for single selection', async ({
-    comfyPage
-  }) => {
-    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    await selectNodeWithPan(comfyPage, nodeRef)
-
-    const frameButton = comfyPage.page.getByRole('button', {
-      name: /Frame Nodes/i
-    })
-    await expect(frameButton).not.toBeVisible()
-  })
-
-  test('execute button visible when output node selected', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.nextFrame()
-
-    // Select the SaveImage node by panning to it
-    const saveImageRef = (
-      await comfyPage.nodeOps.getNodeRefsByTitle('Save Image')
-    )[0]
-    await selectNodeWithPan(comfyPage, saveImageRef)
-
-    const executeButton = comfyPage.page.getByRole('button', {
-      name: /Execute to selected output nodes/i
-    })
-    await expect(executeButton).toBeVisible()
-  })
-
-  test('execute button not visible when non-output node selected', async ({
-    comfyPage
-  }) => {
-    const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
-    await selectNodeWithPan(comfyPage, nodeRef)
-
-    const executeButton = comfyPage.page.getByRole('button', {
-      name: /Execute to selected output nodes/i
-    })
-    await expect(executeButton).not.toBeVisible()
-  })
 })
--- a/browser_tests/tests/sidebar/assets.spec.ts
+++ b/browser_tests/tests/sidebar/assets.spec.ts
@@ -624,30 +624,21 @@ test.describe('Assets sidebar - pagination', () => {
    await comfyPage.assets.clearMocks()
  })

-  test('initial load fetches first batch with offset 0', async ({
+  test('Initially loads a batch of assets with has_more pagination', async ({
    comfyPage
  }) => {
-    const manyJobs = createMockJobs(250)
+    // Create a large set of jobs to trigger pagination
+    const manyJobs = createMockJobs(30)
    await comfyPage.assets.mockOutputHistory(manyJobs)
    await comfyPage.setup()

-    // Capture the first history fetch (terminal statuses only).
-    // Queue polling also hits /jobs but with status=in_progress,pending.
-    const firstRequest = comfyPage.page.waitForRequest((req) => {
-      if (!/\/api\/jobs\?/.test(req.url())) return false
-      const url = new URL(req.url())
-      const status = url.searchParams.get('status') ?? ''
-      return status.includes('completed')
-    })
-
    const tab = comfyPage.menu.assetsTab
    await tab.open()
    await tab.waitForAssets()

-    const req = await firstRequest
-    const url = new URL(req.url())
-    expect(url.searchParams.get('offset')).toBe('0')
-    expect(Number(url.searchParams.get('limit'))).toBeGreaterThan(0)
+    // Should load at least the first batch
+    const count = await tab.assetCards.count()
+    expect(count).toBeGreaterThanOrEqual(1)
  })
 })

--- a/browser_tests/tests/sidebar/modelLibrary.spec.ts
+++ b/browser_tests/tests/sidebar/modelLibrary.spec.ts
@@ -1,244 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-const MOCK_FOLDERS: Record<string, string[]> = {
-  checkpoints: [
-    'sd_xl_base_1.0.safetensors',
-    'dreamshaper_8.safetensors',
-    'realisticVision_v51.safetensors'
-  ],
-  loras: ['detail_tweaker_xl.safetensors', 'add_brightness.safetensors'],
-  vae: ['sdxl_vae.safetensors']
-}
-
-// ==========================================================================
-// 1. Tab open/close
-// ==========================================================================
-
-test.describe('Model library sidebar - tab', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Opens model library tab and shows tree', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.modelTree).toBeVisible()
-    await expect(tab.searchInput).toBeVisible()
-  })
-
-  test('Shows refresh and load all folders buttons', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.refreshButton).toBeVisible()
-    await expect(tab.loadAllFoldersButton).toBeVisible()
-  })
-})
-
-// ==========================================================================
-// 2. Folder display
-// ==========================================================================
-
-test.describe('Model library sidebar - folders', () => {
-  // Mocks are set up before setup(), so app.ts's loadModelFolders()
-  // call during initialization hits the mock and populates the store.
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Displays model folders after opening tab', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
-    await expect(tab.getFolderByLabel('loras')).toBeVisible()
-    await expect(tab.getFolderByLabel('vae')).toBeVisible()
-  })
-
-  test('Expanding a folder loads and shows models', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    // Click the folder to expand it
-    await tab.getFolderByLabel('checkpoints').click()
-
-    // Models should appear as leaf nodes
-    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible()
-    await expect(tab.getLeafByLabel('realisticVision_v51')).toBeVisible()
-  })
-
-  test('Expanding a different folder shows its models', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await tab.getFolderByLabel('loras').click()
-
-    await expect(tab.getLeafByLabel('detail_tweaker_xl')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(tab.getLeafByLabel('add_brightness')).toBeVisible()
-  })
-})
-
-// ==========================================================================
-// 3. Search
-// ==========================================================================
-
-test.describe('Model library sidebar - search', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Search filters models by filename', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await tab.searchInput.fill('dreamshaper')
-
-    // Wait for debounce (300ms) + load + render
-    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible({
-      timeout: 5000
-    })
-
-    // Other models should not be visible
-    await expect(tab.getLeafByLabel('sd_xl_base_1.0')).not.toBeVisible()
-  })
-
-  test('Clearing search restores folder view', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await tab.searchInput.fill('dreamshaper')
-    await expect(tab.getLeafByLabel('dreamshaper_8')).toBeVisible({
-      timeout: 5000
-    })
-
-    // Clear the search
-    await tab.searchInput.fill('')
-
-    // Folders should be visible again (collapsed)
-    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(tab.getFolderByLabel('loras')).toBeVisible()
-  })
-
-  test('Search with no matches shows empty tree', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await tab.searchInput.fill('nonexistent_model_xyz')
-
-    // Wait for debounce, then verify no leaf nodes
-    await expect
-      .poll(async () => await tab.leafNodes.count(), { timeout: 5000 })
-      .toBe(0)
-  })
-})
-
-// ==========================================================================
-// 4. Refresh and load all
-// ==========================================================================
-
-test.describe('Model library sidebar - refresh', () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Refresh button reloads folder list', async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles({
-      checkpoints: ['model_a.safetensors']
-    })
-    await comfyPage.setup()
-
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.getFolderByLabel('checkpoints')).toBeVisible()
-
-    // Update mock to include a new folder
-    await comfyPage.modelLibrary.clearMocks()
-    await comfyPage.modelLibrary.mockFoldersWithFiles({
-      checkpoints: ['model_a.safetensors'],
-      loras: ['lora_b.safetensors']
-    })
-
-    // Wait for the refresh request to complete
-    const refreshRequest = comfyPage.page.waitForRequest(
-      (req) => req.url().endsWith('/experiment/models'),
-      { timeout: 5000 }
-    )
-    await tab.refreshButton.click()
-    await refreshRequest
-
-    await expect(tab.getFolderByLabel('loras')).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Load all folders button triggers loading all model data', async ({
-    comfyPage
-  }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
-    await comfyPage.setup()
-
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    // Wait for a per-folder model files request triggered by load all
-    const folderRequest = comfyPage.page.waitForRequest(
-      (req) =>
-        /\/api\/experiment\/models\/[^/]+$/.test(req.url()) &&
-        req.method() === 'GET',
-      { timeout: 5000 }
-    )
-
-    await tab.loadAllFoldersButton.click()
-    await folderRequest
-  })
-})
-
-// ==========================================================================
-// 5. Empty state
-// ==========================================================================
-
-test.describe('Model library sidebar - empty state', () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.modelLibrary.clearMocks()
-  })
-
-  test('Shows empty tree when no model folders exist', async ({
-    comfyPage
-  }) => {
-    await comfyPage.modelLibrary.mockFoldersWithFiles({})
-    await comfyPage.setup()
-
-    const tab = comfyPage.menu.modelLibraryTab
-    await tab.open()
-
-    await expect(tab.modelTree).toBeVisible()
-    expect(await tab.folderNodes.count()).toBe(0)
-    expect(await tab.leafNodes.count()).toBe(0)
-  })
-})
--- a/browser_tests/tests/sidebar/nodeLibraryV2.spec.ts
+++ b/browser_tests/tests/sidebar/nodeLibraryV2.spec.ts
@@ -1,126 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Node library sidebar V2', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting('Comfy.NodeLibrary.NewDesign', true)
-
-    const tab = comfyPage.menu.nodeLibraryTabV2
-    await tab.open()
-  })
-
-  test('Can switch between tabs', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
-
-    await tab.blueprintsTab.click()
-    await expect(tab.blueprintsTab).toHaveAttribute('aria-selected', 'true')
-    await expect(tab.allTab).toHaveAttribute('aria-selected', 'false')
-
-    await tab.allTab.click()
-    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
-    await expect(tab.blueprintsTab).toHaveAttribute('aria-selected', 'false')
-  })
-
-  test('All tab displays node tree with folders', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await expect(tab.allTab).toHaveAttribute('aria-selected', 'true')
-    await expect(tab.getFolder('sampling')).toBeVisible()
-  })
-
-  test('Can expand folder and see nodes in All tab', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await tab.expandFolder('sampling')
-    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
-  })
-
-  test('Search filters nodes in All tab', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await expect(tab.getNode('KSampler (Advanced)')).not.toBeVisible()
-
-    await tab.searchInput.fill('KSampler')
-    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(tab.getNode('CLIPLoader')).not.toBeVisible()
-  })
-
-  test('Drag node to canvas adds it', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await tab.expandFolder('sampling')
-    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible()
-
-    const initialCount = await comfyPage.nodeOps.getGraphNodesCount()
-
-    const canvasBoundingBox = await comfyPage.page
-      .locator('#graph-canvas')
-      .boundingBox()
-    expect(canvasBoundingBox).not.toBeNull()
-    const targetPosition = {
-      x: canvasBoundingBox!.x + canvasBoundingBox!.width / 2,
-      y: canvasBoundingBox!.y + canvasBoundingBox!.height / 2
-    }
-
-    const nodeLocator = tab.getNode('KSampler (Advanced)')
-    await nodeLocator.dragTo(comfyPage.page.locator('#graph-canvas'), {
-      targetPosition
-    })
-
-    await expect
-      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 5000 })
-      .toBe(initialCount + 1)
-  })
-
-  test('Right-click node shows context menu with bookmark option', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await tab.expandFolder('sampling')
-    const node = tab.getNode('KSampler (Advanced)')
-    await expect(node).toBeVisible()
-
-    await node.click({ button: 'right' })
-
-    const contextMenu = comfyPage.page.getByRole('menuitem', {
-      name: /Bookmark Node/
-    })
-    await expect(contextMenu).toBeVisible({ timeout: 3000 })
-  })
-
-  test('Search clear restores folder view', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await expect(tab.getFolder('sampling')).toBeVisible()
-
-    await tab.searchInput.fill('KSampler')
-    await expect(tab.getNode('KSampler (Advanced)')).toBeVisible({
-      timeout: 5000
-    })
-
-    await tab.searchInput.clear()
-    await tab.searchInput.press('Enter')
-
-    await expect(tab.getFolder('sampling')).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Sort dropdown shows sorting options', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.nodeLibraryTabV2
-
-    await tab.sortButton.click()
-
-    // Reka UI DropdownMenuRadioItem renders with role="menuitemradio"
-    const options = comfyPage.page.getByRole('menuitemradio')
-    await expect(options.first()).toBeVisible({ timeout: 3000 })
-    await expect
-      .poll(() => options.count(), { timeout: 3000 })
-      .toBeGreaterThanOrEqual(2)
-  })
-})
--- a/browser_tests/tests/sidebar/workflowSearch.spec.ts
+++ b/browser_tests/tests/sidebar/workflowSearch.spec.ts
@@ -1,77 +0,0 @@
-import type { Page } from '@playwright/test'
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-/** Locate a workflow label in whatever panel is visible (browse or search). */
-function findWorkflow(page: Page, name: string) {
-  return page
-    .getByTestId('workflows-sidebar')
-    .locator('.node-label', { hasText: name })
-}
-
-test.describe('Workflow sidebar - search', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.workflow.setupWorkflowsDirectory({
-      'alpha-workflow.json': 'default.json',
-      'beta-workflow.json': 'default.json'
-    })
-  })
-
-  test('Search input is visible in workflows tab', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.workflowsTab
-    await tab.open()
-
-    await expect(
-      comfyPage.page.getByPlaceholder('Search Workflow...')
-    ).toBeVisible()
-  })
-
-  test('Search filters saved workflows by name', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.workflowsTab
-    await tab.open()
-
-    const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
-    await searchInput.fill('alpha')
-
-    await expect(findWorkflow(comfyPage.page, 'alpha-workflow')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(
-      findWorkflow(comfyPage.page, 'beta-workflow')
-    ).not.toBeVisible()
-  })
-
-  test('Clearing search restores all workflows', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.workflowsTab
-    await tab.open()
-
-    const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
-    await searchInput.fill('alpha')
-    await expect(
-      findWorkflow(comfyPage.page, 'beta-workflow')
-    ).not.toBeVisible()
-
-    await searchInput.fill('')
-
-    await expect(tab.getPersistedItem('alpha-workflow')).toBeVisible({
-      timeout: 5000
-    })
-    await expect(tab.getPersistedItem('beta-workflow')).toBeVisible()
-  })
-
-  test('Search with no matches shows empty results', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.workflowsTab
-    await tab.open()
-
-    const searchInput = comfyPage.page.getByPlaceholder('Search Workflow...')
-    await searchInput.fill('nonexistent_xyz')
-
-    await expect(
-      findWorkflow(comfyPage.page, 'alpha-workflow')
-    ).not.toBeVisible()
-    await expect(
-      findWorkflow(comfyPage.page, 'beta-workflow')
-    ).not.toBeVisible()
-  })
-})
--- a/browser_tests/tests/topbar/workflowTabs.spec.ts
+++ b/browser_tests/tests/topbar/workflowTabs.spec.ts
@@ -1,154 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Workflow tabs', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.settings.setSetting(
-      'Comfy.Workflow.WorkflowTabsPosition',
-      'Topbar'
-    )
-    await comfyPage.setup()
-  })
-
-  test('Default workflow tab is visible on load', async ({ comfyPage }) => {
-    const tabNames = await comfyPage.menu.topbar.getTabNames()
-    expect(tabNames.length).toBe(1)
-    expect(tabNames[0]).toContain('Unsaved Workflow')
-  })
-
-  test('Creating a new workflow adds a tab', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    expect(await topbar.getTabNames()).toHaveLength(1)
-
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-    const tabNames = await topbar.getTabNames()
-    expect(tabNames[1]).toContain('Unsaved Workflow (2)')
-  })
-
-  test('Switching tabs changes active workflow', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-    const activeNameBefore = await topbar.getActiveTabName()
-    expect(activeNameBefore).toContain('Unsaved Workflow (2)')
-
-    await topbar.getTab(0).click()
-    await expect
-      .poll(() => topbar.getActiveTabName())
-      .toContain('Unsaved Workflow')
-
-    const activeAfter = await topbar.getActiveTabName()
-    expect(activeAfter).not.toContain('(2)')
-  })
-
-  test('Closing a tab removes it', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-    await topbar.closeWorkflowTab('Unsaved Workflow (2)')
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
-
-    const remaining = await topbar.getTabNames()
-    expect(remaining[0]).toContain('Unsaved Workflow')
-  })
-
-  test('Right-clicking a tab shows context menu', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await topbar.getTab(0).click({ button: 'right' })
-
-    // Reka UI ContextMenuContent gets data-state="open" when active
-    const contextMenu = comfyPage.page.locator(
-      '[role="menu"][data-state="open"]'
-    )
-    await expect(contextMenu).toBeVisible({ timeout: 5000 })
-
-    await expect(
-      contextMenu.getByRole('menuitem', { name: /Close Tab/i }).first()
-    ).toBeVisible()
-    await expect(
-      contextMenu.getByRole('menuitem', { name: /Save/i }).first()
-    ).toBeVisible()
-  })
-
-  test('Context menu Close Tab action removes the tab', async ({
-    comfyPage
-  }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-
-    await topbar.getTab(1).click({ button: 'right' })
-    const contextMenu = comfyPage.page.locator(
-      '[role="menu"][data-state="open"]'
-    )
-    await expect(contextMenu).toBeVisible({ timeout: 5000 })
-
-    await contextMenu
-      .getByRole('menuitem', { name: /Close Tab/i })
-      .first()
-      .click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
-  })
-
-  test('Closing the last tab creates a new default workflow', async ({
-    comfyPage
-  }) => {
-    const topbar = comfyPage.menu.topbar
-
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
-
-    await topbar.closeWorkflowTab('Unsaved Workflow')
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(1)
-
-    const tabNames = await topbar.getTabNames()
-    expect(tabNames[0]).toContain('Unsaved Workflow')
-  })
-
-  test('Modified workflow shows unsaved indicator', async ({ comfyPage }) => {
-    const topbar = comfyPage.menu.topbar
-
-    // Modify the graph via litegraph API to trigger unsaved state
-    await comfyPage.page.evaluate(() => {
-      const graph = window.app?.graph
-      const node = window.LiteGraph?.createNode('Note')
-      if (graph && node) graph.add(node)
-    })
-
-    // WorkflowTab renders "•" when the workflow has unsaved changes
-    const activeTab = topbar.getActiveTab()
-    await expect(activeTab.locator('text=•')).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Multiple tabs can be created, switched, and closed', async ({
-    comfyPage
-  }) => {
-    const topbar = comfyPage.menu.topbar
-
-    // Create 2 additional tabs (3 total)
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-    await topbar.newWorkflowButton.click()
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(3)
-
-    // Switch to first tab
-    await topbar.getTab(0).click()
-    await expect
-      .poll(() => topbar.getActiveTabName())
-      .toContain('Unsaved Workflow')
-
-    // Close the middle tab
-    await topbar.closeWorkflowTab('Unsaved Workflow (2)')
-    await expect.poll(() => topbar.getTabNames()).toHaveLength(2)
-  })
-})
--- a/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
@@ -5,9 +5,9 @@ import {
  comfyPageFixture as test
 } from '../../../../fixtures/ComfyPage'
 import type { ComfyPage } from '../../../../fixtures/ComfyPage'
-import { TestIds } from '../../../../fixtures/selectors'

 const BYPASS_CLASS = /before:bg-bypass\/60/
+const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'

 async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
  await comfyPage.page.getByRole('menuitem', { name, exact: true }).click()
@@ -15,10 +15,12 @@ async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
 }

 async function openContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
-  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
-  await fixture.header.click()
-  await fixture.header.click({ button: 'right' })
-  const menu = comfyPage.contextMenu.primeVueMenu
+  const header = comfyPage.vueNodes
+    .getNodeByTitle(nodeTitle)
+    .locator('.lg-node-header')
+  await header.click()
+  await header.click({ button: 'right' })
+  const menu = comfyPage.page.locator('.p-contextmenu')
  await menu.waitFor({ state: 'visible' })
  return menu
 }
@@ -33,13 +35,17 @@ async function openMultiNodeContextMenu(
  await comfyPage.nextFrame()

  for (const title of titles) {
-    const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-    await fixture.header.click({ modifiers: ['ControlOrMeta'] })
+    const header = comfyPage.vueNodes
+      .getNodeByTitle(title)
+      .locator('.lg-node-header')
+    await header.click({ modifiers: ['ControlOrMeta'] })
  }
  await comfyPage.nextFrame()

-  const firstFixture = await comfyPage.vueNodes.getFixtureByTitle(titles[0])
-  const box = await firstFixture.header.boundingBox()
+  const firstHeader = comfyPage.vueNodes
+    .getNodeByTitle(titles[0])
+    .locator('.lg-node-header')
+  const box = await firstHeader.boundingBox()
  if (!box) throw new Error(`Header for "${titles[0]}" not found`)
  await comfyPage.page.mouse.click(
    box.x + box.width / 2,
@@ -47,15 +53,16 @@ async function openMultiNodeContextMenu(
    { button: 'right' }
  )

-  const menu = comfyPage.contextMenu.primeVueMenu
+  const menu = comfyPage.page.locator('.p-contextmenu')
  await menu.waitFor({ state: 'visible' })
  return menu
 }

 function getNodeWrapper(comfyPage: ComfyPage, nodeTitle: string): Locator {
-  return comfyPage.vueNodes
-    .getNodeByTitle(nodeTitle)
-    .getByTestId(TestIds.node.innerWrapper)
+  return comfyPage.page
+    .locator('[data-node-id]')
+    .filter({ hasText: nodeTitle })
+    .getByTestId('node-inner-wrapper')
 }

 async function getNodeRef(comfyPage: ComfyPage, nodeTitle: string) {
@@ -75,7 +82,9 @@ test.describe('Vue Node Context Menu', () => {
      await openContextMenu(comfyPage, 'KSampler')
      await clickExactMenuItem(comfyPage, 'Rename')

-      const titleInput = comfyPage.page.getByTestId(TestIds.node.titleInput)
+      const titleInput = comfyPage.page.locator(
+        '.node-title-editor input[type="text"]'
+      )
      await titleInput.waitFor({ state: 'visible' })
      await titleInput.fill('My Renamed Sampler')
      await titleInput.press('Enter')
@@ -126,12 +135,16 @@ test.describe('Vue Node Context Menu', () => {
      await openContextMenu(comfyPage, nodeTitle)
      await clickExactMenuItem(comfyPage, 'Pin')

-      const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
-      await expect(fixture.pinIndicator).toBeVisible()
+      const pinIndicator = comfyPage.vueNodes
+        .getNodeByTitle(nodeTitle)
+        .locator(PIN_INDICATOR)
+      await expect(pinIndicator).toBeVisible()
      expect(await nodeRef.isPinned()).toBe(true)

      // Verify drag blocked
-      const header = fixture.header
+      const header = comfyPage.vueNodes
+        .getNodeByTitle(nodeTitle)
+        .locator('.lg-node-header')
      const posBeforeDrag = await header.boundingBox()
      if (!posBeforeDrag) throw new Error('Header not found')
      await comfyPage.canvasOps.dragAndDrop(
@@ -145,7 +158,7 @@ test.describe('Vue Node Context Menu', () => {
      await openContextMenu(comfyPage, nodeTitle)
      await clickExactMenuItem(comfyPage, 'Unpin')

-      await expect(fixture.pinIndicator).not.toBeVisible()
+      await expect(pinIndicator).not.toBeVisible()
      expect(await nodeRef.isPinned()).toBe(false)
    })

@@ -231,9 +244,7 @@ test.describe('Vue Node Context Menu', () => {
      comfyPage
    }) => {
      // Capture the original image src from the node's preview
-      const imagePreview = comfyPage.vueNodes
-        .getNodeByTitle('Load Image')
-        .getByTestId(TestIds.node.mainImage)
+      const imagePreview = comfyPage.page.locator('.image-preview img')
      const originalSrc = await imagePreview.getAttribute('src')

      // Write a test image into the browser clipboard
@@ -336,7 +347,8 @@ test.describe('Vue Node Context Menu', () => {
      await comfyPage.nodeOps.fillPromptDialog('TestBlueprint')

      // Open node library sidebar and search for the blueprint
-      await comfyPage.menu.nodeLibraryTab.tabButton.click()
+      await comfyPage.page.getByRole('button', { name: 'Node Library' }).click()
+      await comfyPage.nextFrame()
      const searchBox = comfyPage.page.getByRole('combobox', {
        name: 'Search'
      })
@@ -402,16 +414,20 @@ test.describe('Vue Node Context Menu', () => {
      await clickExactMenuItem(comfyPage, 'Pin')

      for (const title of nodeTitles) {
-        const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-        await expect(fixture.pinIndicator).toBeVisible()
+        const pinIndicator = comfyPage.vueNodes
+          .getNodeByTitle(title)
+          .locator(PIN_INDICATOR)
+        await expect(pinIndicator).toBeVisible()
      }

      await openMultiNodeContextMenu(comfyPage, nodeTitles)
      await clickExactMenuItem(comfyPage, 'Unpin')

      for (const title of nodeTitles) {
-        const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-        await expect(fixture.pinIndicator).not.toBeVisible()
+        const pinIndicator = comfyPage.vueNodes
+          .getNodeByTitle(title)
+          .locator(PIN_INDICATOR)
+        await expect(pinIndicator).not.toBeVisible()
      }
    })

--- a/package.json
+++ b/package.json
@@ -73,7 +73,6 @@
    "@primevue/themes": "catalog:",
    "@sentry/vue": "catalog:",
    "@sparkjsdev/spark": "catalog:",
-    "@tanstack/vue-virtual": "catalog:",
    "@tiptap/core": "catalog:",
    "@tiptap/extension-link": "catalog:",
    "@tiptap/extension-table": "catalog:",
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -16,7 +16,7 @@
@plugin "./lucideStrokePlugin.js";

 /* Safelist dynamic comfy icons for node library folders */
-@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver}]");
+@source inline("icon-[comfy--{ai-model,bfl,bria,bytedance,credits,elevenlabs,extensions-blocks,file-output,gemini,grok,hitpaw,ideogram,image-ai-edit,kling,ltxv,luma,magnific,mask,meshy,minimax,moonvalley-marey,node,openai,pin,pixverse,play,recraft,reve,rodin,runway,sora,stability-ai,template,tencent,topaz,tripo,veo,vidu,wan,wavespeed,workflow,quiver-ai}]");

 /* Safelist dynamic comfy icons for essential nodes (kebab-case of node names) */
@source inline("icon-[comfy--{save-image,load-video,save-video,load-3-d,save-glb,image-batch,batch-images-node,image-crop,image-scale,image-rotate,image-blur,image-invert,canny,recraft-remove-background-node,kling-lip-sync-audio-to-video-node,load-audio,save-audio,stability-text-to-audio,lora-loader,lora-loader-model-only,primitive-string-multiline,get-video-components,video-slice,tencent-text-to-model-node,tencent-image-to-model-node,open-ai-chat-node,preview-image,image-and-mask-preview,layer-mask-mask-preview,mask-preview,image-preview-from-latent,i-tools-preview-image,i-tools-compare-image,canny-to-image,image-edit,text-to-image,pose-to-image,depth-to-video,image-to-image,canny-to-video,depth-to-image,image-to-video,pose-to-video,text-to-video,image-inpainting,image-outpainting}]");
--- a/packages/design-system/src/icons/quiver-ai.svg
+++ b/packages/design-system/src/icons/quiver-ai.svg
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -102,9 +102,6 @@ catalogs:
    '@tailwindcss/vite':
      specifier: ^4.2.0
      version: 4.2.0
-    '@tanstack/vue-virtual':
-      specifier: ^3.13.12
-      version: 3.13.12
    '@testing-library/jest-dom':
      specifier: ^6.9.1
      version: 6.9.1
@@ -461,9 +458,6 @@ importers:
      '@sparkjsdev/spark':
        specifier: 'catalog:'
        version: 0.1.10
-      '@tanstack/vue-virtual':
-        specifier: 'catalog:'
-        version: 3.13.12(vue@3.5.13(typescript@5.9.3))
      '@tiptap/core':
        specifier: 'catalog:'
        version: 2.27.2(@tiptap/pm@2.27.2)
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -30,7 +30,6 @@ catalog:
  '@sentry/vite-plugin': ^4.6.0
  '@sentry/vue': ^10.32.1
  '@sparkjsdev/spark': ^0.1.10
-  '@tanstack/vue-virtual': ^3.13.12
  '@storybook/addon-docs': ^10.2.10
  '@storybook/addon-mcp': 0.1.6
  '@storybook/vue3': ^10.2.10
--- a/src/components/common/TreeExplorerV2.vue
+++ b/src/components/common/TreeExplorerV2.vue
@@ -37,13 +37,13 @@
      </TreeRoot>
    </ContextMenuTrigger>

-    <ContextMenuPortal v-if="showContextMenu && contextMenuNode?.data">
+    <ContextMenuPortal v-if="showContextMenu">
      <ContextMenuContent
        class="z-9999 min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
      >
        <ContextMenuItem
          class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-highlight focus:bg-highlight"
-          @select="handleToggleBookmark"
+          @select="handleAddToFavorites"
        >
          <i
            :class="
@@ -59,14 +59,6 @@
              : $t('sideToolbar.nodeLibraryTab.sections.favoriteNode')
          }}
        </ContextMenuItem>
-        <ContextMenuItem
-          v-if="isCurrentNodeUserBlueprint"
-          class="text-destructive flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-highlight focus:bg-highlight"
-          @select="handleDeleteBlueprint"
-        >
-          <i class="icon-[lucide--trash-2] size-4" />
-          {{ $t('g.delete') }}
-        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
@@ -87,7 +79,6 @@ import { computed, provide, ref } from 'vue'

 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useSubgraphStore } from '@/stores/subgraphStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'

@@ -107,6 +98,7 @@ const emit = defineEmits<{
    node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
    event: MouseEvent
  ]
+  addToFavorites: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
 }>()

 const contextMenuNode = ref<RenderedTreeExplorerNode<ComfyNodeDefImpl> | null>(
@@ -115,7 +107,6 @@ const contextMenuNode = ref<RenderedTreeExplorerNode<ComfyNodeDefImpl> | null>(
 provide(InjectKeyContextMenuNode, contextMenuNode)

 const nodeBookmarkStore = useNodeBookmarkStore()
-const subgraphStore = useSubgraphStore()

 const isCurrentNodeBookmarked = computed(() => {
  const node = contextMenuNode.value
@@ -123,21 +114,9 @@ const isCurrentNodeBookmarked = computed(() => {
  return nodeBookmarkStore.isBookmarked(node.data)
 })

-const isCurrentNodeUserBlueprint = computed(() =>
-  subgraphStore.isUserBlueprint(contextMenuNode.value?.data?.name)
-)
-
-function handleToggleBookmark() {
-  const node = contextMenuNode.value
-  if (node?.data) {
-    nodeBookmarkStore.toggleBookmark(node.data)
-  }
-}
-
-function handleDeleteBlueprint() {
-  const name = contextMenuNode.value?.data?.name
-  if (name) {
-    void subgraphStore.deleteBlueprint(name)
+function handleAddToFavorites() {
+  if (contextMenuNode.value) {
+    emit('addToFavorites', contextMenuNode.value)
  }
 }
 </script>
--- a/src/components/common/TreeExplorerV2Node.test.ts
+++ b/src/components/common/TreeExplorerV2Node.test.ts
@@ -13,7 +13,7 @@ import TreeExplorerV2Node from './TreeExplorerV2Node.vue'
 const i18n = createI18n({
  legacy: false,
  locale: 'en',
-  messages: { en: { g: { delete: 'Delete' } } }
+  messages: { en: {} }
 })

 vi.mock('@/platform/settings/settingStore', () => ({
@@ -29,17 +29,6 @@ vi.mock('@/stores/nodeBookmarkStore', () => ({
  })
 }))

-const mockDeleteBlueprint = vi.fn()
-const mockIsUserBlueprint = vi.fn().mockReturnValue(false)
-
-vi.mock('@/stores/subgraphStore', () => ({
-  useSubgraphStore: () => ({
-    isUserBlueprint: mockIsUserBlueprint,
-    deleteBlueprint: mockDeleteBlueprint,
-    typePrefix: 'SubgraphBlueprint.'
-  })
-}))
-
 vi.mock('@/components/node/NodePreviewCard.vue', () => ({
  default: { template: '<div />' }
 }))
@@ -186,12 +175,8 @@ describe('TreeExplorerV2Node', () => {
      expect(contextMenuNode.value).toEqual(nodeItem.value)
    })

-    it('clears contextMenuNode when right-clicking a folder', async () => {
-      const contextMenuNode = ref<RenderedTreeExplorerNode | null>({
-        key: 'stale',
-        type: 'node',
-        label: 'Stale'
-      } as RenderedTreeExplorerNode)
+    it('does not set contextMenuNode for folder items', async () => {
+      const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)

      const { wrapper } = mountComponent(
        { item: createMockItem('folder') },
@@ -209,59 +194,6 @@ describe('TreeExplorerV2Node', () => {
    })
  })

-  describe('blueprint actions', () => {
-    beforeEach(() => {
-      vi.clearAllMocks()
-    })
-
-    it('shows delete button for user blueprints', () => {
-      mockIsUserBlueprint.mockReturnValue(true)
-      const { wrapper } = mountComponent({
-        item: createMockItem('node', {
-          data: { name: 'SubgraphBlueprint.test' }
-        })
-      })
-
-      expect(wrapper.find('[aria-label="Delete"]').exists()).toBe(true)
-    })
-
-    it('hides delete button for non-blueprint nodes', () => {
-      mockIsUserBlueprint.mockReturnValue(false)
-      const { wrapper } = mountComponent({
-        item: createMockItem('node', {
-          data: { name: 'KSampler' }
-        })
-      })
-
-      expect(wrapper.find('[aria-label="Delete"]').exists()).toBe(false)
-    })
-
-    it('always shows bookmark button', () => {
-      mockIsUserBlueprint.mockReturnValue(true)
-      const { wrapper } = mountComponent({
-        item: createMockItem('node', {
-          data: { name: 'SubgraphBlueprint.test' }
-        })
-      })
-
-      expect(wrapper.find('[aria-label="icon.bookmark"]').exists()).toBe(true)
-    })
-
-    it('calls deleteBlueprint when delete button is clicked', async () => {
-      mockIsUserBlueprint.mockReturnValue(true)
-      const nodeName = 'SubgraphBlueprint.test'
-      const { wrapper } = mountComponent({
-        item: createMockItem('node', {
-          data: { name: nodeName }
-        })
-      })
-
-      await wrapper.find('[aria-label="Delete"]').trigger('click')
-
-      expect(mockDeleteBlueprint).toHaveBeenCalledWith(nodeName)
-    })
-  })
-
  describe('rendering', () => {
    it('renders node icon for node type', () => {
      const { wrapper } = mountComponent({
--- a/src/components/common/TreeExplorerV2Node.vue
+++ b/src/components/common/TreeExplorerV2Node.vue
@@ -25,30 +25,25 @@
          {{ item.value.label }}
        </slot>
      </span>
-      <div class="flex shrink-0 items-center gap-0.5">
-        <button
-          v-if="isUserBlueprint"
-          :class="cn(ACTION_BTN_CLASS, 'text-destructive')"
-          :aria-label="$t('g.delete')"
-          @click.stop="deleteBlueprint"
-        >
-          <i class="icon-[lucide--trash-2] text-xs" />
-        </button>
-        <button
-          :class="cn(ACTION_BTN_CLASS, 'text-muted-foreground')"
-          :aria-label="$t('icon.bookmark')"
-          @click.stop="toggleBookmark"
-        >
-          <i
-            :class="
-              cn(
-                isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
-                'text-xs'
-              )
-            "
-          />
-        </button>
-      </div>
+      <button
+        :class="
+          cn(
+            'hover:text-foreground flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground',
+            'opacity-0 group-hover/tree-node:opacity-100'
+          )
+        "
+        :aria-label="$t('icon.bookmark')"
+        @click.stop="toggleBookmark"
+      >
+        <i
+          :class="
+            cn(
+              isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
+              'text-xs'
+            )
+          "
+        />
+      </button>
    </div>

    <!-- Folder -->
@@ -58,7 +53,6 @@
      :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
      :style="rowStyle"
      @click.stop="handleClick($event, handleToggle, handleSelect)"
-      @contextmenu="clearContextMenuNode"
    >
      <i
        v-if="item.hasChildren"
@@ -102,7 +96,6 @@ import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { useSubgraphStore } from '@/stores/subgraphStore'
 import { InjectKeyContextMenuNode } from '@/types/treeExplorerTypes'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { cn } from '@/utils/tailwindUtil'
@@ -114,9 +107,6 @@ defineOptions({
 const ROW_CLASS =
  'group/tree-node flex w-full min-w-0 cursor-pointer select-none items-center gap-3 overflow-hidden py-2 outline-none hover:bg-comfy-input rounded'

-const ACTION_BTN_CLASS =
-  'flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent opacity-0 group-hover/tree-node:opacity-100 hover:text-foreground'
-
 const { item } = defineProps<{
  item: FlattenedItem<RenderedTreeExplorerNode<ComfyNodeDefImpl>>
 }>()
@@ -130,7 +120,6 @@ const emit = defineEmits<{

 const contextMenuNode = inject(InjectKeyContextMenuNode)
 const nodeBookmarkStore = useNodeBookmarkStore()
-const subgraphStore = useSubgraphStore()

 const nodeDef = computed(() => item.value.data)

@@ -139,22 +128,12 @@ const isBookmarked = computed(() => {
  return nodeBookmarkStore.isBookmarked(nodeDef.value)
 })

-const isUserBlueprint = computed(() =>
-  subgraphStore.isUserBlueprint(nodeDef.value?.name)
-)
-
 function toggleBookmark() {
  if (nodeDef.value) {
    nodeBookmarkStore.toggleBookmark(nodeDef.value)
  }
 }

-function deleteBlueprint() {
-  if (nodeDef.value) {
-    void subgraphStore.deleteBlueprint(nodeDef.value.name)
-  }
-}
-
 const {
  previewRef,
  showPreview,
@@ -187,12 +166,6 @@ function handleContextMenu() {
  }
 }

-function clearContextMenuNode() {
-  if (contextMenuNode) {
-    contextMenuNode.value = null
-  }
-}
-
 function handleMouseEnter(e: MouseEvent) {
  if (item.value.type !== 'node') return
  baseHandleMouseEnter(e)
--- a/src/components/graph/TitleEditor.vue
+++ b/src/components/graph/TitleEditor.vue
@@ -7,7 +7,6 @@
    <EditableText
      :is-editing="showInput"
      :model-value="editedTitle"
-      :input-attrs="{ 'data-testid': 'node-title-input' }"
      @edit="onEdit"
    />
  </div>
--- a/src/components/queue/QueueOverlayExpanded.vue
+++ b/src/components/queue/QueueOverlayExpanded.vue
@@ -20,7 +20,7 @@
      @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
    />

-    <div class="min-h-0 flex-1">
+    <div class="min-h-0 flex-1 overflow-y-auto">
      <JobAssetsList
        :displayed-job-groups="displayedJobGroups"
        @cancel-item="onCancelItemEvent"
--- a/src/components/queue/job/JobAssetsList.test.ts
+++ b/src/components/queue/job/JobAssetsList.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable vue/one-component-per-file -- test stubs */
 /* eslint-disable testing-library/no-container, testing-library/no-node-access -- stubs lack ARIA roles; data attributes for props */
 /* eslint-disable testing-library/prefer-user-event -- fireEvent needed: fake timers require fireEvent for mouseEnter/mouseLeave */
 import { fireEvent, render, screen } from '@testing-library/vue'
@@ -5,27 +6,21 @@ import userEvent from '@testing-library/user-event'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, nextTick } from 'vue'

-import './testUtils/mockTanstackVirtualizer'
-
 import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
+import type { JobListItem as ApiJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'

 import JobAssetsList from './JobAssetsList.vue'

-const hoisted = vi.hoisted(() => ({
-  jobDetailsPopoverStub: {
-    name: 'JobDetailsPopover',
-    props: {
-      jobId: { type: String, required: true },
-      workflowId: { type: String, default: undefined }
-    },
-    template:
-      '<div class="job-details-popover-stub" :data-job-id="jobId" :data-workflow-id="workflowId" />'
-  }
-}))
-
-vi.mock('@/components/queue/job/JobDetailsPopover.vue', () => ({
-  default: hoisted.jobDetailsPopoverStub
-}))
+const JobDetailsPopoverStub = defineComponent({
+  name: 'JobDetailsPopover',
+  props: {
+    jobId: { type: String, required: true },
+    workflowId: { type: String, default: undefined }
+  },
+  template:
+    '<div class="job-details-popover-stub" :data-job-id="jobId" :data-workflow-id="workflowId" />'
+})

 const AssetsListItemStub = defineComponent({
  name: 'AssetsListItem',
@@ -70,81 +65,71 @@ vi.mock('vue-i18n', () => {
  }
 })

-type TestPreviewOutput = {
-  url: string
-  isImage: boolean
-  isVideo: boolean
-}
-
-type TestTaskRef = {
-  workflowId?: string
-  previewOutput?: TestPreviewOutput
-}
-
-type TestJobListItem = Omit<JobListItem, 'taskRef'> & {
-  taskRef?: TestTaskRef
-}
-
-type TestJobGroup = Omit<JobGroup, 'items'> & {
-  items: TestJobListItem[]
-}
-
-const createPreviewOutput = (
+const createResultItem = (
  filename: string,
  mediaType: string = 'images'
-): TestPreviewOutput => {
-  const url = `/api/view/${filename}`
-  return {
-    url,
-    isImage: mediaType === 'images',
-    isVideo: mediaType === 'video'
-  }
+): ResultItemImpl => {
+  const item = new ResultItemImpl({
+    filename,
+    subfolder: '',
+    type: 'output',
+    nodeId: 'node-1',
+    mediaType
+  })
+  Object.defineProperty(item, 'url', {
+    get: () => `/api/view/${filename}`
+  })
+  return item
 }

-const createTaskRef = (preview?: TestPreviewOutput): TestTaskRef => ({
-  workflowId: 'workflow-1',
-  ...(preview && { previewOutput: preview })
-})
+const createTaskRef = (preview?: ResultItemImpl): TaskItemImpl => {
+  const job: ApiJobListItem = {
+    id: `task-${Math.random().toString(36).slice(2)}`,
+    status: 'completed',
+    create_time: Date.now(),
+    preview_output: null,
+    outputs_count: preview ? 1 : 0,
+    workflow_id: 'workflow-1',
+    priority: 0
+  }
+  const flatOutputs = preview ? [preview] : []
+  return new TaskItemImpl(job, {}, flatOutputs)
+}

-const buildJob = (
-  overrides: Partial<TestJobListItem> = {}
-): TestJobListItem => ({
+const buildJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
  id: 'job-1',
  title: 'Job 1',
  meta: 'meta',
  state: 'completed',
-  taskRef: createTaskRef(createPreviewOutput('job-1.png')),
+  taskRef: createTaskRef(createResultItem('job-1.png')),
  ...overrides
 })

-function renderJobAssetsList({
-  jobs = [],
-  displayedJobGroups,
-  attrs,
-  onViewItem
-}: {
-  jobs?: TestJobListItem[]
-  displayedJobGroups?: TestJobGroup[]
-  attrs?: Record<string, string>
-  onViewItem?: (item: JobListItem) => void
-} = {}) {
+function renderJobAssetsList(
+  jobs: JobListItem[],
+  callbacks: {
+    onViewItem?: (item: JobListItem) => void
+  } = {}
+) {
+  const displayedJobGroups: JobGroup[] = [
+    {
+      key: 'group-1',
+      label: 'Group 1',
+      items: jobs
+    }
+  ]
+
  const user = userEvent.setup()

  const result = render(JobAssetsList, {
    props: {
-      displayedJobGroups: (displayedJobGroups ?? [
-        {
-          key: 'group-1',
-          label: 'Group 1',
-          items: jobs
-        }
-      ]) as JobGroup[],
-      ...(onViewItem && { onViewItem })
+      displayedJobGroups,
+      ...(callbacks.onViewItem && { onViewItem: callbacks.onViewItem })
    },
-    attrs,
    global: {
      stubs: {
        teleport: true,
+        JobDetailsPopover: JobDetailsPopoverStub,
        AssetsListItem: AssetsListItemStub
      }
    }
@@ -183,57 +168,10 @@ afterEach(() => {
 })

 describe('JobAssetsList', () => {
-  it('renders grouped headers alongside job rows', () => {
-    const displayedJobGroups: TestJobGroup[] = [
-      {
-        key: 'today',
-        label: 'Today',
-        items: [buildJob({ id: 'job-1' })]
-      },
-      {
-        key: 'yesterday',
-        label: 'Yesterday',
-        items: [buildJob({ id: 'job-2', title: 'Job 2' })]
-      }
-    ]
-
-    const { container } = renderJobAssetsList({ displayedJobGroups })
-
-    expect(screen.getByText('Today')).toBeTruthy()
-    expect(screen.getByText('Yesterday')).toBeTruthy()
-    expect(container.querySelector('[data-job-id="job-1"]')).not.toBeNull()
-    expect(container.querySelector('[data-job-id="job-2"]')).not.toBeNull()
-  })
-
-  it('forwards parent attrs to the scroll container', () => {
-    renderJobAssetsList({
-      attrs: {
-        class: 'min-h-0 flex-1'
-      },
-      displayedJobGroups: [
-        {
-          key: 'today',
-          label: 'Today',
-          items: [buildJob({ id: 'job-1' })]
-        }
-      ]
-    })
-
-    expect(screen.getByTestId('job-assets-list').className.split(' ')).toEqual(
-      expect.arrayContaining([
-        'min-h-0',
-        'flex-1',
-        'h-full',
-        'overflow-y-auto',
-        'pb-4'
-      ])
-    )
-  })
-
  it('emits viewItem on preview-click for completed jobs with preview', async () => {
    const job = buildJob()
    const onViewItem = vi.fn()
-    const { user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { user } = renderJobAssetsList([job], { onViewItem })

    await user.click(screen.getByTestId('preview-trigger'))

@@ -243,7 +181,7 @@ describe('JobAssetsList', () => {
  it('emits viewItem on double-click for completed jobs with preview', async () => {
    const job = buildJob()
    const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container, user } = renderJobAssetsList([job], { onViewItem })

    const stubRoot = container.querySelector('.assets-list-item-stub')!
    await user.dblClick(stubRoot)
@@ -254,10 +192,10 @@ describe('JobAssetsList', () => {
  it('emits viewItem on double-click for completed video jobs without icon image', async () => {
    const job = buildJob({
      iconImageUrl: undefined,
-      taskRef: createTaskRef(createPreviewOutput('job-1.webm', 'video'))
+      taskRef: createTaskRef(createResultItem('job-1.webm', 'video'))
    })
    const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container, user } = renderJobAssetsList([job], { onViewItem })

    const stubRoot = container.querySelector('.assets-list-item-stub')!
    expect(stubRoot.getAttribute('data-preview-url')).toBe(
@@ -273,10 +211,10 @@ describe('JobAssetsList', () => {
  it('emits viewItem on icon click for completed 3D jobs without preview tile', async () => {
    const job = buildJob({
      iconImageUrl: undefined,
-      taskRef: createTaskRef(createPreviewOutput('job-1.glb', 'model'))
+      taskRef: createTaskRef(createResultItem('job-1.glb', 'model'))
    })
    const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container, user } = renderJobAssetsList([job], { onViewItem })

    const icon = container.querySelector('.assets-list-item-stub i')!
    await user.click(icon)
@@ -287,10 +225,10 @@ describe('JobAssetsList', () => {
  it('does not emit viewItem on double-click for non-completed jobs', async () => {
    const job = buildJob({
      state: 'running',
-      taskRef: createTaskRef(createPreviewOutput('job-1.png'))
+      taskRef: createTaskRef(createResultItem('job-1.png'))
    })
    const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container, user } = renderJobAssetsList([job], { onViewItem })

    const stubRoot = container.querySelector('.assets-list-item-stub')!
    await user.dblClick(stubRoot)
@@ -304,7 +242,7 @@ describe('JobAssetsList', () => {
      taskRef: createTaskRef()
    })
    const onViewItem = vi.fn()
-    const { container } = renderJobAssetsList({ jobs: [job], onViewItem })
+    const { container } = renderJobAssetsList([job], { onViewItem })

    const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
    await fireEvent.mouseEnter(jobRow)
@@ -318,7 +256,7 @@ describe('JobAssetsList', () => {
  it('shows and hides the job details popover with hover delays', async () => {
    vi.useFakeTimers()
    const job = buildJob()
-    const { container } = renderJobAssetsList({ jobs: [job] })
+    const { container } = renderJobAssetsList([job])

    const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!

@@ -348,7 +286,7 @@ describe('JobAssetsList', () => {
  it('keeps the job details popover open while hovering the popover', async () => {
    vi.useFakeTimers()
    const job = buildJob()
-    const { container } = renderJobAssetsList({ jobs: [job] })
+    const { container } = renderJobAssetsList([job])

    const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!

@@ -381,7 +319,7 @@ describe('JobAssetsList', () => {
  it('positions the popover to the right of rows near the left viewport edge', async () => {
    vi.useFakeTimers()
    const job = buildJob()
-    const { container } = renderJobAssetsList({ jobs: [job] })
+    const { container } = renderJobAssetsList([job])

    const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!

@@ -406,7 +344,7 @@ describe('JobAssetsList', () => {
  it('positions the popover to the left of rows near the right viewport edge', async () => {
    vi.useFakeTimers()
    const job = buildJob()
-    const { container } = renderJobAssetsList({ jobs: [job] })
+    const { container } = renderJobAssetsList([job])

    const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!

@@ -432,9 +370,7 @@ describe('JobAssetsList', () => {
    vi.useFakeTimers()
    const firstJob = buildJob({ id: 'job-1' })
    const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList({
-      jobs: [firstJob, secondJob]
-    })
+    const { container } = renderJobAssetsList([firstJob, secondJob])

    const firstRow = container.querySelector('[data-job-id="job-1"]')!
    const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -462,9 +398,7 @@ describe('JobAssetsList', () => {
    vi.useFakeTimers()
    const firstJob = buildJob({ id: 'job-1' })
    const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList({
-      jobs: [firstJob, secondJob]
-    })
+    const { container } = renderJobAssetsList([firstJob, secondJob])

    const firstRow = container.querySelector('[data-job-id="job-1"]')!
    const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -495,7 +429,7 @@ describe('JobAssetsList', () => {
  it('does not show details if the hovered row disappears before the show delay ends', async () => {
    vi.useFakeTimers()
    const job = buildJob()
-    const { container, rerender } = renderJobAssetsList({ jobs: [job] })
+    const { container, rerender } = renderJobAssetsList([job])

    const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!

--- a/src/components/queue/job/JobAssetsList.vue
+++ b/src/components/queue/job/JobAssetsList.vue
@@ -1,92 +1,79 @@
 <template>
-  <div
-    ref="scrollContainer"
-    v-bind="$attrs"
-    data-testid="job-assets-list"
-    class="h-full overflow-y-auto pb-4"
-    @scroll="onListScroll"
-  >
-    <div :style="virtualWrapperStyle">
-      <template v-for="{ row, virtualItem } in virtualRows" :key="row.key">
-        <div
-          v-if="row.type === 'header'"
-          class="box-border px-3 pb-2 text-xs leading-none text-text-secondary"
-          :style="getVirtualRowStyle(virtualItem)"
+  <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>
+      <div
+        v-for="job in group.items"
+        :key="job.id"
+        :data-job-id="job.id"
+        @mouseenter="onJobEnter(job, $event)"
+        @mouseleave="onJobLeave(job.id)"
+      >
+        <AssetsListItem
+          :class="
+            cn(
+              'w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
+              job.state === 'running' && 'bg-secondary-background'
+            )
+          "
+          :preview-url="getJobPreviewUrl(job)"
+          :is-video-preview="isVideoPreviewJob(job)"
+          :preview-alt="job.title"
+          :icon-name="job.iconName ?? iconForJobState(job.state)"
+          :icon-class="getJobIconClass(job)"
+          :primary-text="job.title"
+          :secondary-text="job.meta"
+          :progress-total-percent="job.progressTotalPercent"
+          :progress-current-percent="job.progressCurrentPercent"
+          @contextmenu.prevent.stop="$emit('menu', job, $event)"
+          @dblclick.stop="emitViewItem(job)"
+          @preview-click="emitViewItem(job)"
+          @click.stop
        >
-          {{ row.label }}
-        </div>
-        <div
-          v-else-if="row.type === 'job'"
-          class="box-border px-3"
-          :style="getVirtualRowStyle(virtualItem)"
-        >
-          <div
-            :data-job-id="row.job.id"
-            class="h-12"
-            @mouseenter="onJobEnter(row.job, $event)"
-            @mouseleave="onJobLeave(row.job.id)"
-          >
-            <AssetsListItem
-              :class="
-                cn(
-                  'size-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover',
-                  row.job.state === 'running' && 'bg-secondary-background'
-                )
-              "
-              :preview-url="getJobPreviewUrl(row.job)"
-              :is-video-preview="isVideoPreviewJob(row.job)"
-              :preview-alt="row.job.title"
-              :icon-name="row.job.iconName ?? iconForJobState(row.job.state)"
-              :icon-class="getJobIconClass(row.job)"
-              :primary-text="row.job.title"
-              :secondary-text="row.job.meta"
-              :progress-total-percent="row.job.progressTotalPercent"
-              :progress-current-percent="row.job.progressCurrentPercent"
-              @contextmenu.prevent.stop="$emit('menu', row.job, $event)"
-              @dblclick.stop="emitViewItem(row.job)"
-              @preview-click="emitViewItem(row.job)"
-              @click.stop
+          <template v-if="hoveredJobId === job.id" #actions>
+            <Button
+              v-if="isCancelable(job)"
+              variant="destructive"
+              size="icon"
+              :aria-label="t('g.cancel')"
+              @click.stop="emitCancelItem(job)"
            >
-              <template v-if="hoveredJobId === row.job.id" #actions>
-                <Button
-                  v-if="isCancelable(row.job)"
-                  variant="destructive"
-                  size="icon"
-                  :aria-label="t('g.cancel')"
-                  @click.stop="emitCancelItem(row.job)"
-                >
-                  <i class="icon-[lucide--x] size-4" />
-                </Button>
-                <Button
-                  v-else-if="isFailedDeletable(row.job)"
-                  variant="destructive"
-                  size="icon"
-                  :aria-label="t('g.delete')"
-                  @click.stop="emitDeleteItem(row.job)"
-                >
-                  <i class="icon-[lucide--trash-2] size-4" />
-                </Button>
-                <Button
-                  v-else-if="row.job.state === 'completed'"
-                  variant="textonly"
-                  size="sm"
-                  @click.stop="emitCompletedViewItem(row.job)"
-                >
-                  {{ t('menuLabels.View') }}
-                </Button>
-                <Button
-                  variant="secondary"
-                  size="icon"
-                  :aria-label="t('g.more')"
-                  @click.stop="$emit('menu', row.job, $event)"
-                >
-                  <i class="icon-[lucide--ellipsis] size-4" />
-                </Button>
-              </template>
-            </AssetsListItem>
-          </div>
-        </div>
-      </template>
+              <i class="icon-[lucide--x] size-4" />
+            </Button>
+            <Button
+              v-else-if="isFailedDeletable(job)"
+              variant="destructive"
+              size="icon"
+              :aria-label="t('g.delete')"
+              @click.stop="emitDeleteItem(job)"
+            >
+              <i class="icon-[lucide--trash-2] size-4" />
+            </Button>
+            <Button
+              v-else-if="job.state === 'completed'"
+              variant="textonly"
+              size="sm"
+              @click.stop="emitCompletedViewItem(job)"
+            >
+              {{ t('menuLabels.View') }}
+            </Button>
+            <Button
+              variant="secondary"
+              size="icon"
+              :aria-label="t('g.more')"
+              @click.stop="$emit('menu', job, $event)"
+            >
+              <i class="icon-[lucide--ellipsis] size-4" />
+            </Button>
+          </template>
+        </AssetsListItem>
+      </div>
    </div>
  </div>

@@ -110,11 +97,8 @@
 </template>

 <script setup lang="ts">
-import type { VirtualItem } from '@tanstack/vue-virtual'
-import type { CSSProperties } from 'vue'
-import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useI18n } from 'vue-i18n'
-import { computed, nextTick, ref } from 'vue'
+import { nextTick, ref } from 'vue'

 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
@@ -126,17 +110,6 @@ import { cn } from '@/utils/tailwindUtil'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { isActiveJobState } from '@/utils/queueUtil'

-import { buildVirtualJobRows } from './buildVirtualJobRows'
-import type { VirtualJobRow } from './buildVirtualJobRows'
-
-const HEADER_ROW_HEIGHT = 20
-const GROUP_ROW_GAP = 16
-const JOB_ROW_HEIGHT = 48
-
-defineOptions({
-  inheritAttrs: false
-})
-
 const { displayedJobGroups } = defineProps<{ displayedJobGroups: JobGroup[] }>()

 const emit = defineEmits<{
@@ -147,43 +120,9 @@ const emit = defineEmits<{
 }>()

 const { t } = useI18n()
-const scrollContainer = ref<HTMLElement | null>(null)
 const hoveredJobId = ref<string | null>(null)
 const activeRowElement = ref<HTMLElement | null>(null)
 const popoverPosition = ref<{ top: number; left: number } | null>(null)
-const flatRows = computed(() => buildVirtualJobRows(displayedJobGroups))
-const virtualizer = useVirtualizer({
-  get count(): number {
-    return flatRows.value.length
-  },
-  getItemKey(index: number) {
-    return flatRows.value[index]?.key ?? index
-  },
-  estimateSize(index: number) {
-    const row = flatRows.value[index]
-    return row ? getRowHeight(row, index, flatRows.value) : JOB_ROW_HEIGHT
-  },
-  getScrollElement() {
-    return scrollContainer.value
-  },
-  overscan: 12
-})
-const virtualRows = computed(() => {
-  const rows = flatRows.value
-  return virtualizer.value
-    .getVirtualItems()
-    .flatMap((virtualItem: VirtualItem) => {
-      const row = rows[virtualItem.index]
-      return row ? [{ row, virtualItem }] : []
-    })
-})
-const virtualWrapperStyle = computed<CSSProperties>(() => ({
-  position: 'relative',
-  width: '100%',
-  ...(flatRows.value.length > 0 && {
-    height: `${virtualizer.value.getTotalSize()}px`
-  })
-}))
 const {
  activeDetails,
  clearHoverTimers,
@@ -196,37 +135,6 @@ const {
  onReset: clearPopoverAnchor
 })

-function getVirtualRowStyle(virtualItem: VirtualItem): CSSProperties {
-  return {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: `${virtualItem.size}px`,
-    transform: `translateY(${virtualItem.start}px)`,
-    overflowAnchor: 'none'
-  }
-}
-
-function getRowHeight(
-  row: VirtualJobRow,
-  index: number,
-  rows: VirtualJobRow[]
-): number {
-  if (row.type === 'header') {
-    return HEADER_ROW_HEIGHT
-  }
-
-  return (
-    JOB_ROW_HEIGHT + (rows[index + 1]?.type === 'header' ? GROUP_ROW_GAP : 0)
-  )
-}
-
-function onListScroll() {
-  hoveredJobId.value = null
-  resetActiveDetails()
-}
-
 function clearPopoverAnchor() {
  activeRowElement.value = null
  popoverPosition.value = null
--- a/src/components/queue/job/buildVirtualJobRows.test.ts
+++ b/src/components/queue/job/buildVirtualJobRows.test.ts
@@ -1,82 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
-
-import { buildVirtualJobRows } from './buildVirtualJobRows'
-
-function buildJob(id: string): JobListItem {
-  return {
-    id,
-    title: `Job ${id}`,
-    meta: 'meta',
-    state: 'completed'
-  }
-}
-
-describe('buildVirtualJobRows', () => {
-  it('flattens grouped jobs into headers and rows in display order', () => {
-    const displayedJobGroups: JobGroup[] = [
-      {
-        key: 'today',
-        label: 'Today',
-        items: [buildJob('job-1'), buildJob('job-2')]
-      },
-      {
-        key: 'yesterday',
-        label: 'Yesterday',
-        items: [buildJob('job-3')]
-      }
-    ]
-
-    expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
-      {
-        key: 'header-today',
-        type: 'header',
-        label: 'Today'
-      },
-      {
-        key: 'job-job-1',
-        type: 'job',
-        job: displayedJobGroups[0].items[0]
-      },
-      {
-        key: 'job-job-2',
-        type: 'job',
-        job: displayedJobGroups[0].items[1]
-      },
-      {
-        key: 'header-yesterday',
-        type: 'header',
-        label: 'Yesterday'
-      },
-      {
-        key: 'job-job-3',
-        type: 'job',
-        job: displayedJobGroups[1].items[0]
-      }
-    ])
-  })
-
-  it('keeps a single group flattened without extra row metadata', () => {
-    const displayedJobGroups: JobGroup[] = [
-      {
-        key: 'today',
-        label: 'Today',
-        items: [buildJob('job-1')]
-      }
-    ]
-
-    expect(buildVirtualJobRows(displayedJobGroups)).toEqual([
-      {
-        key: 'header-today',
-        type: 'header',
-        label: 'Today'
-      },
-      {
-        key: 'job-job-1',
-        type: 'job',
-        job: displayedJobGroups[0].items[0]
-      }
-    ])
-  })
-})
--- a/src/components/queue/job/buildVirtualJobRows.ts
+++ b/src/components/queue/job/buildVirtualJobRows.ts
@@ -1,37 +0,0 @@
-import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
-
-export type VirtualJobRow =
-  | {
-      key: string
-      type: 'header'
-      label: string
-    }
-  | {
-      key: string
-      type: 'job'
-      job: JobListItem
-    }
-
-export function buildVirtualJobRows(
-  displayedJobGroups: JobGroup[]
-): VirtualJobRow[] {
-  const rows: VirtualJobRow[] = []
-
-  displayedJobGroups.forEach((group) => {
-    rows.push({
-      key: `header-${group.key}`,
-      type: 'header',
-      label: group.label
-    })
-
-    group.items.forEach((job) => {
-      rows.push({
-        key: `job-${job.id}`,
-        type: 'job',
-        job
-      })
-    })
-  })
-
-  return rows
-}
--- a/src/components/queue/job/testUtils/mockTanstackVirtualizer.ts
+++ b/src/components/queue/job/testUtils/mockTanstackVirtualizer.ts
@@ -1,33 +0,0 @@
-import { vi } from 'vitest'
-
-vi.mock('@tanstack/vue-virtual', async () => {
-  const { computed } = await import('vue')
-
-  return {
-    useVirtualizer: (options: {
-      count: number
-      estimateSize: (index: number) => number
-      getItemKey?: (index: number) => number | string
-    }) =>
-      computed(() => {
-        let start = 0
-        const items = Array.from({ length: options.count }, (_, index) => {
-          const size = options.estimateSize(index)
-          const item = {
-            key: options.getItemKey?.(index) ?? index,
-            index,
-            start,
-            size
-          }
-
-          start += size
-          return item
-        })
-
-        return {
-          getVirtualItems: () => items,
-          getTotalSize: () => start
-        }
-      })
-  }
-})
--- a/src/components/sidebar/tabs/JobHistorySidebarTab.test.ts
+++ b/src/components/sidebar/tabs/JobHistorySidebarTab.test.ts
@@ -0,0 +1,163 @@
+import { mount } from '@vue/test-utils'
+import { createI18n } from 'vue-i18n'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, nextTick } from 'vue'
+
+import JobHistorySidebarTab from './JobHistorySidebarTab.vue'
+
+const JobDetailsPopoverStub = defineComponent({
+  name: 'JobDetailsPopover',
+  props: {
+    jobId: { type: String, required: true },
+    workflowId: { type: String, default: undefined }
+  },
+  template: '<div class="job-details-popover-stub" />'
+})
+
+vi.mock('@/composables/queue/useJobList', async () => {
+  const { ref } = await import('vue')
+  const jobHistoryItem = {
+    id: 'job-1',
+    title: 'Job 1',
+    meta: 'meta',
+    state: 'completed',
+    taskRef: {
+      workflowId: 'workflow-1',
+      previewOutput: {
+        isImage: true,
+        isVideo: false,
+        url: '/api/view/job-1.png'
+      }
+    }
+  }
+
+  return {
+    useJobList: () => ({
+      selectedJobTab: ref('All'),
+      selectedWorkflowFilter: ref('all'),
+      selectedSortMode: ref('mostRecent'),
+      searchQuery: ref(''),
+      hasFailedJobs: ref(false),
+      filteredTasks: ref([]),
+      groupedJobItems: ref([
+        {
+          key: 'group-1',
+          label: 'Group 1',
+          items: [jobHistoryItem]
+        }
+      ])
+    })
+  }
+})
+
+vi.mock('@/composables/queue/useJobMenu', () => ({
+  useJobMenu: () => ({
+    jobMenuEntries: [],
+    cancelJob: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/queue/useQueueClearHistoryDialog', () => ({
+  useQueueClearHistoryDialog: () => ({
+    showQueueClearHistoryDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/queue/useResultGallery', async () => {
+  const { ref } = await import('vue')
+  return {
+    useResultGallery: () => ({
+      galleryActiveIndex: ref(-1),
+      galleryItems: ref([]),
+      onViewItem: vi.fn()
+    })
+  }
+})
+
+vi.mock('@/composables/useErrorHandling', () => ({
+  useErrorHandling: () => ({
+    wrapWithErrorHandlingAsync: <T extends (...args: never[]) => unknown>(
+      fn: T
+    ) => fn
+  })
+}))
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    execute: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    showDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/executionStore', () => ({
+  useExecutionStore: () => ({
+    clearInitializationByJobIds: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/queueStore', () => ({
+  useQueueStore: () => ({
+    runningTasks: [],
+    pendingTasks: [],
+    delete: vi.fn()
+  })
+}))
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: { en: {} }
+})
+
+const SidebarTabTemplateStub = {
+  name: 'SidebarTabTemplate',
+  props: ['title'],
+  template:
+    '<div><slot name="alt-title" /><slot name="header" /><slot name="body" /></div>'
+}
+
+function mountComponent() {
+  return mount(JobHistorySidebarTab, {
+    global: {
+      plugins: [i18n],
+      stubs: {
+        SidebarTabTemplate: SidebarTabTemplateStub,
+        JobFilterTabs: true,
+        JobFilterActions: true,
+        JobHistoryActionsMenu: true,
+        JobContextMenu: true,
+        ResultGallery: true,
+        teleport: true,
+        JobDetailsPopover: JobDetailsPopoverStub
+      }
+    }
+  })
+}
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('JobHistorySidebarTab', () => {
+  it('shows the job details popover for jobs in the history panel', async () => {
+    vi.useFakeTimers()
+    const wrapper = mountComponent()
+    const jobRow = wrapper.find('[data-job-id="job-1"]')
+
+    await jobRow.trigger('mouseenter')
+    await vi.advanceTimersByTimeAsync(200)
+    await nextTick()
+
+    const popover = wrapper.findComponent(JobDetailsPopoverStub)
+    expect(popover.exists()).toBe(true)
+    expect(popover.props()).toMatchObject({
+      jobId: 'job-1',
+      workflowId: 'workflow-1'
+    })
+  })
+})
--- a/src/components/sidebar/tabs/JobHistorySidebarTab.vue
+++ b/src/components/sidebar/tabs/JobHistorySidebarTab.vue
@@ -46,25 +46,22 @@
      </div>
    </template>
    <template #body>
-      <div class="flex h-full min-h-0 flex-col">
-        <JobAssetsList
-          class="min-h-0 flex-1"
-          :displayed-job-groups="displayedJobGroups"
-          @cancel-item="onCancelItem"
-          @delete-item="onDeleteItem"
-          @view-item="onViewItem"
-          @menu="onMenuItem"
-        />
-        <JobContextMenu
-          ref="jobContextMenuRef"
-          :entries="jobMenuEntries"
-          @action="onJobMenuAction"
-        />
-        <MediaLightbox
-          v-model:active-index="galleryActiveIndex"
-          :all-gallery-items="galleryItems"
-        />
-      </div>
+      <JobAssetsList
+        :displayed-job-groups="displayedJobGroups"
+        @cancel-item="onCancelItem"
+        @delete-item="onDeleteItem"
+        @view-item="onViewItem"
+        @menu="onMenuItem"
+      />
+      <JobContextMenu
+        ref="jobContextMenuRef"
+        :entries="jobMenuEntries"
+        @action="onJobMenuAction"
+      />
+      <MediaLightbox
+        v-model:active-index="galleryActiveIndex"
+        :all-gallery-items="galleryItems"
+      />
    </template>
  </SidebarTabTemplate>
 </template>
--- a/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/AllNodesPanel.vue
@@ -12,6 +12,7 @@
      :root="favoritesRoot"
      show-context-menu
      @node-click="(node) => emit('nodeClick', node)"
+      @add-to-favorites="handleAddToFavorites"
    />
    <div v-else class="px-6 py-2 text-xs text-muted-background">
      {{ $t('sideToolbar.nodeLibraryTab.noBookmarkedNodes') }}
@@ -30,6 +31,7 @@
        :root="section.root"
        show-context-menu
        @node-click="(node) => emit('nodeClick', node)"
+        @add-to-favorites="handleAddToFavorites"
      />
    </div>
  </div>
@@ -69,4 +71,12 @@ const hasFavorites = computed(
 const favoritesRoot = computed(() =>
  fillNodeInfo(nodeBookmarkStore.bookmarkedRoot)
 )
+
+function handleAddToFavorites(
+  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
+) {
+  if (node.data) {
+    nodeBookmarkStore.toggleBookmark(node.data)
+  }
+}
 </script>
--- a/src/stores/subgraphStore.test.ts
+++ b/src/stores/subgraphStore.test.ts
@@ -187,35 +187,6 @@ describe('useSubgraphStore', () => {
    expect(store.isGlobalBlueprint('nonexistent')).toBe(false)
  })

-  describe('isUserBlueprint', () => {
-    it('should return true for user blueprints', async () => {
-      await mockFetch({ 'test.json': mockGraph })
-      expect(store.isUserBlueprint('SubgraphBlueprint.test')).toBe(true)
-    })
-
-    it('should return false for global blueprints', async () => {
-      await mockFetch(
-        {},
-        {
-          global_bp: {
-            name: 'Global Blueprint',
-            info: { node_pack: 'comfy_essentials' },
-            data: JSON.stringify(mockGraph)
-          }
-        }
-      )
-      expect(store.isUserBlueprint('SubgraphBlueprint.global_bp')).toBe(false)
-    })
-
-    it('should return false for non-blueprint node types', () => {
-      expect(store.isUserBlueprint('KSampler')).toBe(false)
-    })
-
-    it('should return false for undefined', () => {
-      expect(store.isUserBlueprint(undefined)).toBe(false)
-    })
-  })
-
  describe('blueprint badge display', () => {
    it('should set isGlobal flag on global blueprints', async () => {
      await mockFetch(
--- a/src/stores/subgraphStore.ts
+++ b/src/stores/subgraphStore.ts
@@ -432,12 +432,6 @@ export const useSubgraphStore = defineStore('subgraph', () => {
    return nodeDef !== undefined && nodeDef.isGlobal === true
  }

-  function isUserBlueprint(nodeType?: string): boolean {
-    if (!nodeType?.startsWith(typePrefix)) return false
-    const name = nodeType.slice(typePrefix.length)
-    return name in subgraphCache && !isGlobalBlueprint(name)
-  }
-
  return {
    deleteBlueprint,
    editBlueprint,
@@ -445,7 +439,6 @@ export const useSubgraphStore = defineStore('subgraph', () => {
    getBlueprint,
    isGlobalBlueprint,
    isSubgraphBlueprint,
-    isUserBlueprint,
    publishSubgraph,
    subgraphBlueprints,
    typePrefix
--- a/src/utils/categoryUtil.ts
+++ b/src/utils/categoryUtil.ts
@@ -73,7 +73,7 @@ const PROVIDER_COLORS: Record<string, string | [string, string]> = {
  'moonvalley-marey': '#DAD9C5',
  openai: '#B6B6B6',
  pixverse: ['#B465E6', '#E8632A'],
-  quiver: '#B6B6B6',
+  'quiver-ai': '#B6B6B6',
  recraft: '#B6B6B6',
  reve: '#B6B6B6',
  rodin: '#F7F7F7',