test: cover core assets sidebar journeys

## Summary
- Add queue overlay E2E tests: toggle, filter tabs, completed filter,
close (5 tests)
- Add workflow sidebar search E2E tests: search input, filter by name,
clear, no matches (4 tests)
- Fix AssetsHelper mock timestamps from seconds to milliseconds
(matching backend's `int(time.time() * 1000)`)
- Type AssetsHelper response pagination with `JobsListResponse` from
`@comfyorg/ingest-types`

## Test plan
- [ ] CI passes all Playwright shards
- [ ] `pnpm typecheck:browser` passes
- [ ] `pnpm lint` passes

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10802-test-add-queue-overlay-and-workflow-search-E2E-tests-3356d73d365081018df8c7061c0854ee)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>

CODEOWNERS

@@ -69,6 +69,9 @@
 /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

browser_tests/fixtures/ComfyPage.ts

@@ -19,7 +19,9 @@ 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'
@@ -31,6 +33,7 @@ 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'
@@ -55,7 +58,9 @@ 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
 
@@ -73,11 +78,21 @@ 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
@@ -199,6 +214,7 @@ 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[] = []
@@ -246,6 +262,7 @@ 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() {

browser_tests/fixtures/components/SidebarTab.ts

@@ -100,6 +100,59 @@ 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')
@@ -170,11 +223,68 @@ 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')
   }
 
+  get root() {
+    return this.page.locator('.sidebar-content-container')
+  }
+
   // --- Tab navigation ---
 
   get generatedTab() {
@@ -193,30 +303,58 @@ export class AssetsSidebarTab extends SidebarTab {
     )
   }
 
-  emptyStateTitle(title: string) {
-    return this.page.getByText(title)
-  }
-
-  // --- Search & filter ---
-
   get searchInput() {
-    return this.page.getByPlaceholder('Search Assets...')
+    return this.root.getByPlaceholder(/Search Assets/i)
   }
 
   get settingsButton() {
-    return this.page.getByRole('button', { name: 'View settings' })
+    return this.root.getByLabel('View settings')
   }
 
-  // --- View mode ---
+  get viewSettingsButton() {
+    return this.settingsButton
+  }
 
   get listViewOption() {
     return this.page.getByText('List view')
   }
 
+  get listViewButton() {
+    return this.listViewOption
+  }
+
   get gridViewOption() {
     return this.page.getByText('Grid view')
   }
 
+  get gridViewButton() {
+    return this.gridViewOption
+  }
+
+  get backButton() {
+    return this.page.getByRole('button', { name: 'Back to all assets' })
+  }
+
+  get copyJobIdButton() {
+    return this.page.getByRole('button', { name: 'Copy job ID' })
+  }
+
+  get previewDialog() {
+    return this.page.getByRole('dialog', { name: 'Gallery' })
+  }
+
+  emptyStateTitle(title: string) {
+    return this.page.getByText(title)
+  }
+
+  previewImage(filename: string) {
+    return this.previewDialog.getByRole('img', { name: filename })
+  }
+
+  asset(name: string) {
+    return this.getAssetCardByName(name)
+  }
+
   // --- Sort options (cloud-only, shown inside settings popover) ---
 
   get sortNewestFirst() {
@@ -230,38 +368,34 @@ export class AssetsSidebarTab extends SidebarTab {
   // --- Asset cards ---
 
   get assetCards() {
-    return this.page.locator('[role="button"][data-selected]')
+    return this.root.locator('[role="button"][data-selected]')
   }
 
   getAssetCardByName(name: string) {
-    return this.page.locator('[role="button"][data-selected]', {
-      hasText: name
-    })
+    return this.assetCards.filter({ hasText: name }).first()
   }
 
   get selectedCards() {
-    return this.page.locator('[data-selected="true"]')
+    return this.root.locator('[data-selected="true"]')
   }
 
   // --- List view items ---
 
   get listViewItems() {
-    return this.page.locator(
-      '.sidebar-content-container [role="button"][tabindex="0"]'
-    )
+    return this.root.locator('[role="button"][tabindex="0"]')
   }
 
   // --- Selection footer ---
 
   get selectionFooter() {
-    return this.page
-      .locator('.sidebar-content-container')
-      .locator('..')
-      .locator('[class*="h-18"]')
+    return this.root.locator('..').locator('[class*="h-18"]')
   }
 
   get selectionCountButton() {
-    return this.page.getByText(/Assets Selected: \d+/)
+    return this.root
+      .getByRole('button', { name: /Assets Selected:/ })
+      .or(this.page.getByText(/Assets Selected: \d+/))
+      .first()
   }
 
   get deselectAllButton() {
@@ -275,6 +409,10 @@ export class AssetsSidebarTab extends SidebarTab {
       .first()
   }
 
+  get deleteSelectionButton() {
+    return this.deleteSelectedButton
+  }
+
   get downloadSelectedButton() {
     return this.page
       .getByTestId('assets-download-selected')
@@ -282,30 +420,113 @@ export class AssetsSidebarTab extends SidebarTab {
       .first()
   }
 
+  get downloadSelectionButton() {
+    return this.downloadSelectedButton
+  }
+
   // --- Context menu ---
 
   contextMenuItem(label: string) {
     return this.page.locator('.p-contextmenu').getByText(label)
   }
 
+  contextMenuAction(label: string) {
+    return this.contextMenuItem(label)
+  }
+
   // --- Folder view ---
 
   get backToAssetsButton() {
-    return this.page.getByText('Back to all assets')
+    return this.backButton
   }
 
   // --- Loading ---
 
   get skeletonLoaders() {
-    return this.page.locator('.sidebar-content-container .animate-pulse')
+    return this.root.locator('.animate-pulse')
   }
 
-  // --- Helpers ---
+  async showGenerated() {
+    await this.switchToGenerated()
+  }
+
+  async showImported() {
+    await this.switchToImported()
+  }
+
+  async search(query: string) {
+    await this.searchInput.fill(query)
+  }
+
+  async switchToListView() {
+    await this.openSettingsMenu()
+    await this.listViewOption.click()
+  }
+
+  async switchToGridView() {
+    await this.openSettingsMenu()
+    await this.gridViewOption.click()
+  }
+
+  async openContextMenuForAsset(name: string) {
+    await this.asset(name).click({ button: 'right' })
+    await this.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+  }
+
+  async runContextMenuAction(assetName: string, actionName: string) {
+    await this.openContextMenuForAsset(assetName)
+    await this.contextMenuAction(actionName).click()
+  }
+
+  async openAssetPreview(name: string) {
+    const asset = this.asset(name)
+    await asset.hover()
+
+    const zoomButton = asset.getByLabel('Zoom in')
+    if (await zoomButton.isVisible().catch(() => false)) {
+      await zoomButton.click()
+      return
+    }
+
+    await asset.dblclick()
+  }
+
+  async openOutputFolder(name: string) {
+    await this.asset(name)
+      .getByRole('button', { name: 'See more outputs' })
+      .click()
+
+    await this.backToAssetsButton.waitFor({ state: 'visible' })
+  }
+
+  async toggleStack(name: string) {
+    await this.asset(name)
+      .getByRole('button', { name: 'See more outputs' })
+      .click()
+  }
+
+  async selectAssets(names: string[]) {
+    if (names.length === 0) {
+      return
+    }
+
+    await this.asset(names[0]).click()
+
+    const modifier = process.platform === 'darwin' ? 'Meta' : 'Control'
+    for (const name of names.slice(1)) {
+      await this.asset(name).click({
+        modifiers: [modifier]
+      })
+    }
+  }
 
   override async open() {
     // Remove any toast notifications that may overlay the sidebar button
     await this.dismissToasts()
     await super.open()
+    await this.root.waitFor({ state: 'visible' })
     await this.generatedTab.waitFor({ state: 'visible' })
   }
 

browser_tests/fixtures/components/Topbar.ts

@@ -50,15 +50,30 @@ 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.getByRole('button', { name: 'Close' }).click({ force: true })
+    await tab.hover()
+    await tab.locator('.close-button').click({ force: true })
   }
 
   getSaveDialog(): Locator {

browser_tests/fixtures/helpers/AssetsHelper.ts

@@ -1,20 +1,45 @@
+import { readFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
 import type { Page, Route } from '@playwright/test'
+import type { JobDetailResponse, JobEntry } from '@comfyorg/ingest-types'
 
-import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
+import type { ResultItemType, TaskOutput } from '../../../src/schemas/apiSchema'
+
+import { JobsApiMock } from './JobsApiMock'
+import type { SeededJob } from './JobsApiMock'
+import { getMimeType } from './mimeTypeUtil'
 
-const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
 const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
+const viewRoutePattern = /\/api\/view(?:\?.*)?$/
+const helperDir = path.dirname(fileURLToPath(import.meta.url))
+
+type SeededAssetFile = {
+  filePath?: string
+  contentType?: string
+  textContent?: string
+}
+
+type MockPreviewOutput = NonNullable<JobEntry['preview_output']> & {
+  filename?: string
+  subfolder?: string
+  type?: ResultItemType
+  nodeId: string
+  mediaType?: string
+  display_name?: string
+}
 
 /** Factory to create a mock completed job with preview output. */
 export function createMockJob(
-  overrides: Partial<RawJobListItem> & { id: string }
-): RawJobListItem {
-  const now = Date.now() / 1000
+  overrides: Partial<JobEntry> & { id: string }
+): JobEntry {
+  const now = Date.now()
   return {
     status: 'completed',
     create_time: now,
     execution_start_time: now,
-    execution_end_time: now + 5,
+    execution_end_time: now + 5_000,
     preview_output: {
       filename: `output_${overrides.id}.png`,
       subfolder: '',
@@ -23,7 +48,6 @@ export function createMockJob(
       mediaType: 'images'
     },
     outputs_count: 1,
-    priority: 0,
     ...overrides
   }
 }
@@ -31,15 +55,15 @@ export function createMockJob(
 /** Create multiple mock jobs with sequential IDs and staggered timestamps. */
 export function createMockJobs(
   count: number,
-  baseOverrides?: Partial<RawJobListItem>
-): RawJobListItem[] {
-  const now = Date.now() / 1000
+  baseOverrides?: Partial<JobEntry>
+): JobEntry[] {
+  const now = Date.now()
   return Array.from({ length: count }, (_, i) =>
     createMockJob({
       id: `job-${String(i + 1).padStart(3, '0')}`,
-      create_time: now - i * 60,
-      execution_start_time: now - i * 60,
-      execution_end_time: now - i * 60 + 5 + i,
+      create_time: now - i * 60_000,
+      execution_start_time: now - i * 60_000,
+      execution_end_time: now - i * 60_000 + (5 + i) * 1_000,
       preview_output: {
         filename: `image_${String(i + 1).padStart(3, '0')}.png`,
         subfolder: '',
@@ -62,136 +86,335 @@ export function createMockImportedFiles(count: number): string[] {
   )
 }
 
-function parseLimit(url: URL, total: number): number {
-  const value = Number(url.searchParams.get('limit'))
-  if (!Number.isInteger(value) || value <= 0) {
-    return total
-  }
-  return value
+export type ImportedAssetSeed = {
+  name: string
+  filePath?: string
+  contentType?: string
 }
 
-function parseOffset(url: URL): number {
-  const value = Number(url.searchParams.get('offset'))
-  if (!Number.isInteger(value) || value < 0) {
-    return 0
-  }
-  return value
+export type GeneratedAssetOutputSeed = {
+  filename: string
+  displayName?: string
+  filePath?: string
+  contentType?: string
+  mediaType?: 'images' | 'video' | 'audio'
+  subfolder?: string
+  type?: ResultItemType
 }
 
-function getExecutionDuration(job: RawJobListItem): number {
-  const start = job.execution_start_time ?? 0
-  const end = job.execution_end_time ?? 0
-  return end - start
+export type GeneratedJobSeed = {
+  jobId: string
+  outputs: [GeneratedAssetOutputSeed, ...GeneratedAssetOutputSeed[]]
+  createdAt?: string
+  createTime?: number
+  executionStartTime?: number
+  executionEndTime?: number
+  workflowId?: string
+  workflow?: JobDetailResponse['workflow']
+  nodeId?: string
+}
+
+function getFixturePath(relativePath: string): string {
+  return path.resolve(helperDir, '../../assets', relativePath)
+}
+
+function defaultFileFor(filename: string): SeededAssetFile {
+  const name = filename.toLowerCase()
+
+  if (name.endsWith('.png')) {
+    return {
+      filePath: getFixturePath('workflowInMedia/workflow_itxt.png'),
+      contentType: 'image/png'
+    }
+  }
+
+  if (name.endsWith('.webp')) {
+    return {
+      filePath: getFixturePath('example.webp'),
+      contentType: 'image/webp'
+    }
+  }
+
+  if (name.endsWith('.webm')) {
+    return {
+      filePath: getFixturePath('workflowInMedia/workflow.webm'),
+      contentType: 'video/webm'
+    }
+  }
+
+  if (name.endsWith('.mp4')) {
+    return {
+      filePath: getFixturePath('workflowInMedia/workflow.mp4'),
+      contentType: 'video/mp4'
+    }
+  }
+
+  if (name.endsWith('.glb')) {
+    return {
+      filePath: getFixturePath('workflowInMedia/workflow.glb'),
+      contentType: 'model/gltf-binary'
+    }
+  }
+
+  if (name.endsWith('.json')) {
+    return {
+      textContent: JSON.stringify({ mocked: true }, null, 2),
+      contentType: 'application/json'
+    }
+  }
+
+  return {
+    textContent: 'mocked asset content',
+    contentType: getMimeType(filename)
+  }
+}
+
+function normalizeOutputSeed(
+  output: GeneratedAssetOutputSeed
+): GeneratedAssetOutputSeed {
+  const fallback = defaultFileFor(output.filename)
+
+  return {
+    mediaType: 'images',
+    subfolder: '',
+    type: 'output',
+    ...output,
+    filePath: output.filePath ?? fallback.filePath,
+    contentType: output.contentType ?? fallback.contentType
+  }
+}
+
+function buildTaskOutput(
+  jobSeed: GeneratedJobSeed,
+  outputs: GeneratedAssetOutputSeed[]
+): TaskOutput {
+  const nodeId = jobSeed.nodeId ?? '5'
+
+  return {
+    [nodeId]: {
+      [outputs[0].mediaType ?? 'images']: outputs.map((output) => ({
+        filename: output.filename,
+        subfolder: output.subfolder ?? '',
+        type: output.type ?? 'output',
+        display_name: output.displayName
+      }))
+    }
+  }
+}
+
+function buildSeededJob(jobSeed: GeneratedJobSeed): SeededJob {
+  const outputs = jobSeed.outputs.map(normalizeOutputSeed)
+  const preview = outputs[0]
+  const createTime =
+    jobSeed.createTime ??
+    new Date(jobSeed.createdAt ?? '2026-03-27T12:00:00.000Z').getTime()
+  const executionStartTime = jobSeed.executionStartTime ?? createTime
+  const executionEndTime = jobSeed.executionEndTime ?? createTime + 2_000
+
+  const listItem: JobEntry = {
+    id: jobSeed.jobId,
+    status: 'completed',
+    create_time: createTime,
+    execution_start_time: executionStartTime,
+    execution_end_time: executionEndTime,
+    preview_output: {
+      filename: preview.filename,
+      subfolder: preview.subfolder ?? '',
+      type: preview.type ?? 'output',
+      nodeId: jobSeed.nodeId ?? '5',
+      mediaType: preview.mediaType ?? 'images',
+      display_name: preview.displayName
+    },
+    outputs_count: outputs.length,
+    ...(jobSeed.workflowId ? { workflow_id: jobSeed.workflowId } : {})
+  }
+
+  const detail: JobDetailResponse = {
+    ...listItem,
+    workflow: jobSeed.workflow,
+    outputs: buildTaskOutput(jobSeed, outputs),
+    update_time: executionEndTime
+  }
+
+  return { listItem, detail }
+}
+
+function createOutputFilename(baseFilename: string, index: number): string {
+  if (index === 0) {
+    return baseFilename
+  }
+
+  const extensionIndex = baseFilename.lastIndexOf('.')
+  if (extensionIndex === -1) {
+    return `${baseFilename}-${index + 1}`
+  }
+
+  return `${baseFilename.slice(0, extensionIndex)}-${index + 1}${baseFilename.slice(extensionIndex)}`
+}
+
+function getPreviewOutput(
+  previewOutput: JobEntry['preview_output'] | undefined
+): MockPreviewOutput | undefined {
+  return previewOutput as MockPreviewOutput | undefined
+}
+
+function outputsFromJobEntry(
+  job: JobEntry
+): [GeneratedAssetOutputSeed, ...GeneratedAssetOutputSeed[]] {
+  const previewOutput = getPreviewOutput(job.preview_output)
+  const outputCount = Math.max(job.outputs_count ?? 1, 1)
+  const baseFilename = previewOutput?.filename ?? `output_${job.id}.png`
+  const mediaType: GeneratedAssetOutputSeed['mediaType'] =
+    previewOutput?.mediaType === 'video' || previewOutput?.mediaType === 'audio'
+      ? previewOutput.mediaType
+      : 'images'
+  const outputs = Array.from({ length: outputCount }, (_, index) => ({
+    filename: createOutputFilename(baseFilename, index),
+    displayName: index === 0 ? previewOutput?.display_name : undefined,
+    mediaType,
+    subfolder: previewOutput?.subfolder ?? '',
+    type: previewOutput?.type ?? 'output'
+  }))
+
+  return [outputs[0], ...outputs.slice(1)]
+}
+
+function generatedJobFromJobEntry(job: JobEntry): GeneratedJobSeed {
+  return {
+    jobId: job.id,
+    outputs: outputsFromJobEntry(job),
+    createTime: job.create_time,
+    executionStartTime: job.execution_start_time,
+    executionEndTime: job.execution_end_time,
+    workflowId: job.workflow_id
+  }
 }
 
 export class AssetsHelper {
-  private jobsRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private readonly jobsApiMock: JobsApiMock
   private inputFilesRouteHandler: ((route: Route) => Promise<void>) | null =
     null
-  private generatedJobs: RawJobListItem[] = []
-  private importedFiles: string[] = []
+  private viewRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private generatedJobs: GeneratedJobSeed[] = []
+  private importedFiles: ImportedAssetSeed[] = []
+  private seededFiles = new Map<string, SeededAssetFile>()
 
-  constructor(private readonly page: Page) {}
+  constructor(private readonly page: Page) {
+    this.jobsApiMock = new JobsApiMock(page)
+  }
 
-  async mockOutputHistory(jobs: RawJobListItem[]): Promise<void> {
-    this.generatedJobs = [...jobs]
-
-    if (this.jobsRouteHandler) {
-      return
+  generatedImage(
+    options: Partial<Omit<GeneratedJobSeed, 'outputs'>> & {
+      filename: string
+      displayName?: string
+      filePath?: string
+      contentType?: string
     }
+  ): GeneratedJobSeed {
+    const {
+      filename,
+      displayName,
+      filePath,
+      contentType,
+      jobId = `job-${filename.replace(/\W+/g, '-').toLowerCase()}`,
+      ...rest
+    } = options
 
-    this.jobsRouteHandler = async (route: Route) => {
-      const url = new URL(route.request().url())
-      const statuses = url.searchParams
-        .get('status')
-        ?.split(',')
-        .map((status) => status.trim())
-        .filter(Boolean)
-      const workflowId = url.searchParams.get('workflow_id')
-      const sortBy = url.searchParams.get('sort_by')
-      const sortOrder = url.searchParams.get('sort_order') === 'asc' ? 1 : -1
+    return {
+      jobId,
+      outputs: [
+        {
+          filename,
+          displayName,
+          filePath,
+          contentType,
+          mediaType: 'images'
+        }
+      ],
+      ...rest
+    }
+  }
 
-      let filteredJobs = [...this.generatedJobs]
+  importedImage(options: ImportedAssetSeed): ImportedAssetSeed {
+    return { ...options }
+  }
 
-      if (statuses?.length) {
-        filteredJobs = filteredJobs.filter((job) =>
-          statuses.includes(job.status)
-        )
+  async workflowContainerFromFixture(
+    relativePath: string = 'default.json'
+  ): Promise<JobDetailResponse['workflow']> {
+    const workflow = JSON.parse(
+      await readFile(getFixturePath(relativePath), 'utf-8')
+    )
+
+    return {
+      extra_data: {
+        extra_pnginfo: {
+          workflow
+        }
       }
+    }
+  }
 
-      if (workflowId) {
-        filteredJobs = filteredJobs.filter(
-          (job) => job.workflow_id === workflowId
-        )
-      }
+  async seedAssets({
+    generated = [],
+    imported = []
+  }: {
+    generated?: GeneratedJobSeed[]
+    imported?: ImportedAssetSeed[]
+  }): Promise<void> {
+    this.generatedJobs = [...generated]
+    this.importedFiles = [...imported]
+    this.seededFiles = new Map()
 
-      filteredJobs.sort((left, right) => {
-        const leftValue =
-          sortBy === 'execution_duration'
-            ? getExecutionDuration(left)
-            : left.create_time
-        const rightValue =
-          sortBy === 'execution_duration'
-            ? getExecutionDuration(right)
-            : right.create_time
-
-        return (leftValue - rightValue) * sortOrder
-      })
-
-      const offset = parseOffset(url)
-      const total = filteredJobs.length
-      const limit = parseLimit(url, total)
-      const visibleJobs = filteredJobs.slice(offset, offset + limit)
-
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          jobs: visibleJobs,
-          pagination: {
-            offset,
-            limit,
-            total,
-            has_more: offset + visibleJobs.length < total
-          }
+    for (const job of this.generatedJobs) {
+      for (const output of job.outputs) {
+        const fallback = defaultFileFor(output.filename)
+        this.seededFiles.set(output.filename, {
+          filePath: output.filePath ?? fallback.filePath,
+          contentType: output.contentType ?? fallback.contentType,
+          textContent: fallback.textContent
         })
+      }
+    }
+
+    for (const asset of this.importedFiles) {
+      const fallback = defaultFileFor(asset.name)
+      this.seededFiles.set(asset.name, {
+        filePath: asset.filePath ?? fallback.filePath,
+        contentType: asset.contentType ?? fallback.contentType,
+        textContent: fallback.textContent
       })
     }
 
-    await this.page.route(jobsListRoutePattern, this.jobsRouteHandler)
+    await this.jobsApiMock.seedJobs(this.generatedJobs.map(buildSeededJob))
+    await this.ensureInputFilesRoute()
+    await this.ensureViewRoute()
+  }
+
+  async mockOutputHistory(jobs: JobEntry[]): Promise<void> {
+    await this.seedAssets({
+      generated: jobs.map(generatedJobFromJobEntry),
+      imported: this.importedFiles
+    })
   }
 
   async mockInputFiles(files: string[]): Promise<void> {
-    this.importedFiles = [...files]
-
-    if (this.inputFilesRouteHandler) {
-      return
-    }
-
-    this.inputFilesRouteHandler = async (route: Route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(this.importedFiles)
-      })
-    }
-
-    await this.page.route(inputFilesRoutePattern, this.inputFilesRouteHandler)
+    await this.seedAssets({
+      generated: this.generatedJobs,
+      imported: files.map((name) => ({ name }))
+    })
   }
 
   async mockEmptyState(): Promise<void> {
-    await this.mockOutputHistory([])
-    await this.mockInputFiles([])
+    await this.seedAssets({ generated: [], imported: [] })
   }
 
   async clearMocks(): Promise<void> {
     this.generatedJobs = []
     this.importedFiles = []
+    this.seededFiles.clear()
 
-    if (this.jobsRouteHandler) {
-      await this.page.unroute(jobsListRoutePattern, this.jobsRouteHandler)
-      this.jobsRouteHandler = null
-    }
+    await this.jobsApiMock.clearMocks()
 
     if (this.inputFilesRouteHandler) {
       await this.page.unroute(
@@ -200,5 +423,67 @@ export class AssetsHelper {
       )
       this.inputFilesRouteHandler = null
     }
+
+    if (this.viewRouteHandler) {
+      await this.page.unroute(viewRoutePattern, this.viewRouteHandler)
+      this.viewRouteHandler = null
+    }
+  }
+
+  private async ensureInputFilesRoute(): Promise<void> {
+    if (this.inputFilesRouteHandler) {
+      return
+    }
+
+    this.inputFilesRouteHandler = async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(this.importedFiles.map((asset) => asset.name))
+      })
+    }
+
+    await this.page.route(inputFilesRoutePattern, this.inputFilesRouteHandler)
+  }
+
+  private async ensureViewRoute(): Promise<void> {
+    if (this.viewRouteHandler) {
+      return
+    }
+
+    this.viewRouteHandler = async (route: Route) => {
+      const url = new URL(route.request().url())
+      const filename = url.searchParams.get('filename')
+
+      if (!filename) {
+        await route.fulfill({
+          status: 400,
+          contentType: 'application/json',
+          body: JSON.stringify({ error: 'Missing filename' })
+        })
+        return
+      }
+
+      const seededFile =
+        this.seededFiles.get(filename) ?? defaultFileFor(filename)
+
+      if (seededFile.filePath) {
+        const body = await readFile(seededFile.filePath)
+        await route.fulfill({
+          status: 200,
+          contentType: seededFile.contentType ?? getMimeType(filename),
+          body
+        })
+        return
+      }
+
+      await route.fulfill({
+        status: 200,
+        contentType: seededFile.contentType ?? getMimeType(filename),
+        body: seededFile.textContent ?? ''
+      })
+    }
+
+    await this.page.route(viewRoutePattern, this.viewRouteHandler)
   }
 }

browser_tests/fixtures/helpers/JobsApiMock.ts

@@ -0,0 +1,196 @@
+import type { Page, Route } from '@playwright/test'
+import type {
+  JobDetailResponse,
+  JobEntry,
+  JobsListResponse
+} from '@comfyorg/ingest-types'
+
+const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
+const jobDetailRoutePattern = /\/api\/jobs\/[^/?#]+(?:\?.*)?$/
+const historyRoutePattern = /\/api\/history(?:\?.*)?$/
+
+export type SeededJob = {
+  listItem: JobEntry
+  detail: JobDetailResponse
+}
+
+function parseLimit(url: URL, total: number): number {
+  const value = Number(url.searchParams.get('limit'))
+  if (!Number.isInteger(value) || value <= 0) {
+    return total
+  }
+  return value
+}
+
+function parseOffset(url: URL): number {
+  const value = Number(url.searchParams.get('offset'))
+  if (!Number.isInteger(value) || value < 0) {
+    return 0
+  }
+  return value
+}
+
+function getExecutionDuration(job: JobEntry): number {
+  const start = job.execution_start_time ?? 0
+  const end = job.execution_end_time ?? 0
+  return end - start
+}
+
+export class JobsApiMock {
+  private listRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private detailRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private historyRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private seededJobs: SeededJob[] = []
+
+  constructor(private readonly page: Page) {}
+
+  async seedJobs(jobs: SeededJob[]): Promise<void> {
+    this.seededJobs = [...jobs]
+    await this.ensureRoutesRegistered()
+  }
+
+  async clearMocks(): Promise<void> {
+    this.seededJobs = []
+
+    if (this.listRouteHandler) {
+      await this.page.unroute(jobsListRoutePattern, this.listRouteHandler)
+      this.listRouteHandler = null
+    }
+
+    if (this.detailRouteHandler) {
+      await this.page.unroute(jobDetailRoutePattern, this.detailRouteHandler)
+      this.detailRouteHandler = null
+    }
+
+    if (this.historyRouteHandler) {
+      await this.page.unroute(historyRoutePattern, this.historyRouteHandler)
+      this.historyRouteHandler = null
+    }
+  }
+
+  private async ensureRoutesRegistered(): Promise<void> {
+    if (!this.listRouteHandler) {
+      this.listRouteHandler = async (route: Route) => {
+        const url = new URL(route.request().url())
+        const statuses = url.searchParams
+          .get('status')
+          ?.split(',')
+          .map((status) => status.trim())
+          .filter(Boolean)
+        const workflowId = url.searchParams.get('workflow_id')
+        const sortBy = url.searchParams.get('sort_by')
+        const sortOrder = url.searchParams.get('sort_order') === 'asc' ? 1 : -1
+
+        let filteredJobs = this.seededJobs.map(({ listItem }) => listItem)
+
+        if (statuses?.length) {
+          filteredJobs = filteredJobs.filter((job) =>
+            statuses.includes(job.status)
+          )
+        }
+
+        if (workflowId) {
+          filteredJobs = filteredJobs.filter(
+            (job) => job.workflow_id === workflowId
+          )
+        }
+
+        filteredJobs.sort((left, right) => {
+          const leftValue =
+            sortBy === 'execution_duration'
+              ? getExecutionDuration(left)
+              : left.create_time
+          const rightValue =
+            sortBy === 'execution_duration'
+              ? getExecutionDuration(right)
+              : right.create_time
+
+          return (leftValue - rightValue) * sortOrder
+        })
+
+        const offset = parseOffset(url)
+        const total = filteredJobs.length
+        const limit = parseLimit(url, total)
+        const visibleJobs = filteredJobs.slice(offset, offset + limit)
+
+        const response = {
+          jobs: visibleJobs,
+          pagination: {
+            offset,
+            limit,
+            total,
+            has_more: offset + visibleJobs.length < total
+          }
+        } satisfies JobsListResponse
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(response)
+        })
+      }
+
+      await this.page.route(jobsListRoutePattern, this.listRouteHandler)
+    }
+
+    if (!this.detailRouteHandler) {
+      this.detailRouteHandler = async (route: Route) => {
+        const jobId = route
+          .request()
+          .url()
+          .split('/api/jobs/')[1]
+          ?.split('?')[0]
+        const job = jobId
+          ? this.seededJobs.find(({ listItem }) => listItem.id === jobId)
+          : undefined
+
+        if (!job) {
+          await route.fulfill({
+            status: 404,
+            contentType: 'application/json',
+            body: JSON.stringify({ error: 'Job not found' })
+          })
+          return
+        }
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify(job.detail)
+        })
+      }
+
+      await this.page.route(jobDetailRoutePattern, this.detailRouteHandler)
+    }
+
+    if (!this.historyRouteHandler) {
+      this.historyRouteHandler = async (route: Route) => {
+        const requestBody = route.request().postDataJSON() as
+          | { delete?: string[]; clear?: boolean }
+          | undefined
+
+        if (requestBody?.clear) {
+          this.seededJobs = this.seededJobs.filter(
+            ({ listItem }) =>
+              listItem.status === 'pending' || listItem.status === 'in_progress'
+          )
+        }
+
+        if (requestBody?.delete?.length) {
+          const deletedIds = new Set(requestBody.delete)
+          this.seededJobs = this.seededJobs.filter(
+            ({ listItem }) => !deletedIds.has(listItem.id)
+          )
+        }
+
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({})
+        })
+      }
+
+      await this.page.route(historyRoutePattern, this.historyRouteHandler)
+    }
+  }
+}

browser_tests/fixtures/helpers/KeyboardHelper.ts

@@ -14,8 +14,9 @@ export class KeyboardHelper {
     keyToPress: string,
     locator: Locator | null = this.canvas
   ): Promise<void> {
+    const modifier = process.platform === 'darwin' ? 'Meta' : 'Control'
     const target = locator ?? this.page.keyboard
-    await target.press(`Control+${keyToPress}`)
+    await target.press(`${modifier}+${keyToPress}`)
     await this.nextFrame()
   }
 

browser_tests/fixtures/helpers/ModelLibraryHelper.ts

@@ -0,0 +1,134 @@
+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
+    }
+  }
+}

browser_tests/fixtures/selectors.ts

@@ -80,7 +80,10 @@ export const TestIds = {
     widgetActionsMenuButton: 'widget-actions-menu-button'
   },
   node: {
-    titleInput: 'node-title-input'
+    titleInput: 'node-title-input',
+    pinIndicator: 'node-pin-indicator',
+    innerWrapper: 'node-inner-wrapper',
+    mainImage: 'main-image'
   },
   selectionToolbox: {
     colorPickerButton: 'color-picker-button',

browser_tests/fixtures/utils/vueNodeFixtures.ts

@@ -1,5 +1,7 @@
 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) {}
@@ -20,6 +22,10 @@ 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"]')
   }

browser_tests/tests/queue/queueOverlay.spec.ts

@@ -0,0 +1,118 @@
+import { expect } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { createMockJob } from '../../fixtures/helpers/AssetsHelper'
+import { TestIds } from '../../fixtures/selectors'
+
+const now = Date.now()
+
+const MOCK_JOBS: JobEntry[] = [
+  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 })
+  })
+})

browser_tests/tests/selectionToolboxActions.spec.ts

@@ -1,9 +1,20 @@
+import type { Locator } from '@playwright/test'
+
 import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
-import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 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')
+}
 
 async function selectNodeWithPan(comfyPage: ComfyPage, nodeRef: NodeReference) {
   const nodePos = await nodeRef.getPosition()
@@ -36,7 +47,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       () => window.app!.graph!._nodes.length
     )
 
-    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
+    const deleteButton = comfyPage.page.getByTestId('delete-button')
     await expect(deleteButton).toBeVisible()
     await deleteButton.click({ force: true })
     await comfyPage.nextFrame()
@@ -51,14 +62,12 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     const nodeRef = (await comfyPage.nodeOps.getNodeRefsByTitle('KSampler'))[0]
     await selectNodeWithPan(comfyPage, nodeRef)
 
-    const infoButton = comfyPage.page.locator('[data-testid="info-button"]')
+    const infoButton = comfyPage.page.getByTestId('info-button')
     await expect(infoButton).toBeVisible()
     await infoButton.click({ force: true })
     await comfyPage.nextFrame()
 
-    await expect(
-      comfyPage.page.locator('[data-testid="properties-panel"]')
-    ).toBeVisible()
+    await expect(comfyPage.page.getByTestId('properties-panel')).toBeVisible()
   })
 
   test('convert-to-subgraph button visible with multi-select', async ({
@@ -71,7 +80,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
     await comfyPage.nextFrame()
 
     await expect(
-      comfyPage.page.locator('[data-testid="convert-to-subgraph-button"]')
+      comfyPage.page.getByTestId('convert-to-subgraph-button')
     ).toBeVisible()
   })
 
@@ -88,7 +97,7 @@ test.describe('Selection Toolbox - Button Actions', { tag: '@ui' }, () => {
       () => window.app!.graph!._nodes.length
     )
 
-    const deleteButton = comfyPage.page.locator('[data-testid="delete-button"]')
+    const deleteButton = comfyPage.page.getByTestId('delete-button')
     await expect(deleteButton).toBeVisible()
     await deleteButton.click({ force: true })
     await comfyPage.nextFrame()
@@ -98,4 +107,152 @@ 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()
+  })
 })

browser_tests/tests/sidebar/assets.spec.ts

@@ -1,22 +1,24 @@
 import { expect } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'
 
+import type { ComfyPage } from '../../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import type { GeneratedJobSeed } from '../../fixtures/helpers/AssetsHelper'
 import {
   createMockJob,
   createMockJobs
 } from '../../fixtures/helpers/AssetsHelper'
-import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
 
 // ---------------------------------------------------------------------------
 // Shared fixtures
 // ---------------------------------------------------------------------------
 
-const SAMPLE_JOBS: RawJobListItem[] = [
+const SAMPLE_JOBS: JobEntry[] = [
   createMockJob({
     id: 'job-alpha',
-    create_time: 1000,
-    execution_start_time: 1000,
-    execution_end_time: 1010,
+    create_time: 1_000_000,
+    execution_start_time: 1_000_000,
+    execution_end_time: 1_010_000,
     preview_output: {
       filename: 'landscape.png',
       subfolder: '',
@@ -28,9 +30,9 @@ const SAMPLE_JOBS: RawJobListItem[] = [
   }),
   createMockJob({
     id: 'job-beta',
-    create_time: 2000,
-    execution_start_time: 2000,
-    execution_end_time: 2003,
+    create_time: 2_000_000,
+    execution_start_time: 2_000_000,
+    execution_end_time: 2_003_000,
     preview_output: {
       filename: 'portrait.png',
       subfolder: '',
@@ -42,9 +44,9 @@ const SAMPLE_JOBS: RawJobListItem[] = [
   }),
   createMockJob({
     id: 'job-gamma',
-    create_time: 3000,
-    execution_start_time: 3000,
-    execution_end_time: 3020,
+    create_time: 3_000_000,
+    execution_start_time: 3_000_000,
+    execution_end_time: 3_020_000,
     preview_output: {
       filename: 'abstract_art.png',
       subfolder: '',
@@ -62,6 +64,56 @@ const SAMPLE_IMPORTED_FILES = [
   'audio_clip.wav'
 ]
 
+async function openSeededAssetsSidebar(
+  comfyPage: ComfyPage,
+  seed: Parameters<ComfyPage['assets']['seedAssets']>[0]
+) {
+  await comfyPage.assets.seedAssets(seed)
+  await comfyPage.setup()
+
+  const tab = comfyPage.menu.assetsTab
+  await tab.open()
+
+  return tab
+}
+
+function makeGeneratedAssets(comfyPage: ComfyPage) {
+  const stacked: GeneratedJobSeed = {
+    jobId: 'job-gallery-stack',
+    outputs: [
+      {
+        filename: 'gallery-main.webp',
+        displayName: 'Gallery Main',
+        mediaType: 'images'
+      },
+      {
+        filename: 'gallery-alt.webp',
+        displayName: 'Gallery Alt',
+        mediaType: 'images'
+      },
+      {
+        filename: 'gallery-detail.webp',
+        displayName: 'Gallery Detail',
+        mediaType: 'images'
+      }
+    ]
+  }
+
+  return {
+    sunrise: comfyPage.assets.generatedImage({
+      jobId: 'job-sunrise',
+      filename: 'sunrise.webp',
+      displayName: 'Sunrise'
+    }),
+    forest: comfyPage.assets.generatedImage({
+      jobId: 'job-forest',
+      filename: 'forest.webp',
+      displayName: 'Forest'
+    }),
+    stacked
+  }
+}
+
 // ==========================================================================
 // 1. Empty states
 // ==========================================================================
@@ -71,7 +123,6 @@ test.describe('Assets sidebar - empty states', () => {
     await comfyPage.assets.mockEmptyState()
     await comfyPage.setup()
   })
-
   test.afterEach(async ({ comfyPage }) => {
     await comfyPage.assets.clearMocks()
   })
@@ -92,7 +143,6 @@ test.describe('Assets sidebar - empty states', () => {
     await expect(tab.emptyStateTitle('No imported files found')).toBeVisible()
     await expect(tab.emptyStateMessage).toBeVisible()
   })
-
   test('No asset cards are rendered when empty', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
@@ -624,21 +674,30 @@ test.describe('Assets sidebar - pagination', () => {
     await comfyPage.assets.clearMocks()
   })
 
-  test('Initially loads a batch of assets with has_more pagination', async ({
+  test('initial load fetches first batch with offset 0', async ({
     comfyPage
   }) => {
-    // Create a large set of jobs to trigger pagination
-    const manyJobs = createMockJobs(30)
+    const manyJobs = createMockJobs(250)
     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()
 
-    // Should load at least the first batch
-    const count = await tab.assetCards.count()
-    expect(count).toBeGreaterThanOrEqual(1)
+    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)
   })
 })
 
@@ -667,3 +726,110 @@ test.describe('Assets sidebar - settings menu', () => {
     await expect(tab.gridViewOption).toBeVisible()
   })
 })
+
+// ==========================================================================
+// 11. Core journeys
+// ==========================================================================
+
+test.describe('Assets sidebar - core journeys', () => {
+  test.describe.configure({ timeout: 30_000 })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('Opens preview from list view and shows the media dialog', async ({
+    comfyPage
+  }) => {
+    const generated = makeGeneratedAssets(comfyPage)
+    const tab = await openSeededAssetsSidebar(comfyPage, {
+      generated: [generated.sunrise]
+    })
+
+    await tab.waitForAssets()
+    await tab.switchToListView()
+    await tab.openAssetPreview('Sunrise')
+
+    await expect(tab.previewDialog).toBeVisible()
+    await expect(tab.previewImage('sunrise.webp')).toBeVisible()
+
+    await tab.previewDialog.getByLabel('Close').click()
+    await expect(tab.previewDialog).not.toBeVisible()
+  })
+
+  test('Expands stacked outputs in list view', async ({ comfyPage }) => {
+    const generated = makeGeneratedAssets(comfyPage)
+    const tab = await openSeededAssetsSidebar(comfyPage, {
+      generated: [generated.stacked]
+    })
+
+    await tab.waitForAssets()
+    await tab.switchToListView()
+    await expect(tab.asset('Gallery Alt')).not.toBeVisible()
+
+    await tab.toggleStack('Gallery Main')
+
+    await expect(tab.asset('Gallery Alt')).toBeVisible()
+    await expect(tab.asset('Gallery Detail')).toBeVisible()
+  })
+
+  test('Opens folder view for multi-output assets, copies the job ID, and returns back', async ({
+    comfyPage
+  }) => {
+    const generated = makeGeneratedAssets(comfyPage)
+    await comfyPage.page
+      .context()
+      .grantPermissions(['clipboard-read', 'clipboard-write'], {
+        origin: comfyPage.url
+      })
+
+    const tab = await openSeededAssetsSidebar(comfyPage, {
+      generated: [generated.stacked]
+    })
+
+    await tab.waitForAssets()
+    await tab.openOutputFolder('Gallery Main')
+
+    await expect(tab.backButton).toBeVisible()
+    await expect(tab.copyJobIdButton).toBeVisible()
+    await expect(tab.asset('Gallery Main')).toBeVisible()
+    await expect(tab.asset('Gallery Alt')).toBeVisible()
+    await expect(tab.asset('Gallery Detail')).toBeVisible()
+
+    await tab.copyJobIdButton.click()
+
+    await expect(comfyPage.visibleToasts).toContainText('Copied')
+    await expect(comfyPage.visibleToasts).toContainText(
+      'Job ID copied to clipboard'
+    )
+    await tab.searchInput.click()
+    await comfyPage.clipboard.paste(tab.searchInput)
+
+    await expect(tab.searchInput).toHaveValue(generated.stacked.jobId)
+
+    await tab.backButton.click()
+    await expect(tab.asset('Gallery Main')).toBeVisible()
+    await expect(tab.asset('Gallery Alt')).not.toBeVisible()
+    await expect(tab.asset('Gallery Detail')).not.toBeVisible()
+  })
+
+  test('Downloads a selected asset from the selection footer', async ({
+    comfyPage
+  }) => {
+    const generated = makeGeneratedAssets(comfyPage)
+    const tab = await openSeededAssetsSidebar(comfyPage, {
+      generated: [generated.sunrise, generated.forest]
+    })
+
+    await tab.waitForAssets()
+    await tab.selectAssets(['Sunrise'])
+    await expect(tab.selectionCountButton).toBeVisible()
+
+    const downloadPromise = comfyPage.page.waitForEvent('download')
+    await tab.downloadSelectionButton.click()
+
+    const download = await downloadPromise
+    expect(download.suggestedFilename()).toContain('Sunrise')
+    await expect(tab.selectionCountButton).not.toBeVisible()
+  })
+})

browser_tests/tests/sidebar/modelLibrary.spec.ts

@@ -0,0 +1,244 @@
+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)
+  })
+})

browser_tests/tests/sidebar/nodeLibraryV2.spec.ts

@@ -0,0 +1,126 @@
+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)
+  })
+})

browser_tests/tests/sidebar/workflowSearch.spec.ts

@@ -0,0 +1,77 @@
+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()
+  })
+})

browser_tests/tests/topbar/workflowTabs.spec.ts

@@ -0,0 +1,154 @@
+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)
+  })
+})

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,12 +15,10 @@ async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
 }
 
 async function openContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
-  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')
+  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
+  await fixture.header.click()
+  await fixture.header.click({ button: 'right' })
+  const menu = comfyPage.contextMenu.primeVueMenu
   await menu.waitFor({ state: 'visible' })
   return menu
 }
@@ -35,17 +33,13 @@ async function openMultiNodeContextMenu(
   await comfyPage.nextFrame()
 
   for (const title of titles) {
-    const header = comfyPage.vueNodes
-      .getNodeByTitle(title)
-      .locator('.lg-node-header')
-    await header.click({ modifiers: ['ControlOrMeta'] })
+    const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
+    await fixture.header.click({ modifiers: ['ControlOrMeta'] })
   }
   await comfyPage.nextFrame()
 
-  const firstHeader = comfyPage.vueNodes
-    .getNodeByTitle(titles[0])
-    .locator('.lg-node-header')
-  const box = await firstHeader.boundingBox()
+  const firstFixture = await comfyPage.vueNodes.getFixtureByTitle(titles[0])
+  const box = await firstFixture.header.boundingBox()
   if (!box) throw new Error(`Header for "${titles[0]}" not found`)
   await comfyPage.page.mouse.click(
     box.x + box.width / 2,
@@ -53,16 +47,15 @@ async function openMultiNodeContextMenu(
     { button: 'right' }
   )
 
-  const menu = comfyPage.page.locator('.p-contextmenu')
+  const menu = comfyPage.contextMenu.primeVueMenu
   await menu.waitFor({ state: 'visible' })
   return menu
 }
 
 function getNodeWrapper(comfyPage: ComfyPage, nodeTitle: string): Locator {
-  return comfyPage.page
-    .locator('[data-node-id]')
-    .filter({ hasText: nodeTitle })
-    .getByTestId('node-inner-wrapper')
+  return comfyPage.vueNodes
+    .getNodeByTitle(nodeTitle)
+    .getByTestId(TestIds.node.innerWrapper)
 }
 
 async function getNodeRef(comfyPage: ComfyPage, nodeTitle: string) {
@@ -82,9 +75,7 @@ test.describe('Vue Node Context Menu', () => {
       await openContextMenu(comfyPage, 'KSampler')
       await clickExactMenuItem(comfyPage, 'Rename')
 
-      const titleInput = comfyPage.page.locator(
-        '.node-title-editor input[type="text"]'
-      )
+      const titleInput = comfyPage.page.getByTestId(TestIds.node.titleInput)
       await titleInput.waitFor({ state: 'visible' })
       await titleInput.fill('My Renamed Sampler')
       await titleInput.press('Enter')
@@ -135,16 +126,12 @@ test.describe('Vue Node Context Menu', () => {
       await openContextMenu(comfyPage, nodeTitle)
       await clickExactMenuItem(comfyPage, 'Pin')
 
-      const pinIndicator = comfyPage.vueNodes
-        .getNodeByTitle(nodeTitle)
-        .locator(PIN_INDICATOR)
-      await expect(pinIndicator).toBeVisible()
+      const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
+      await expect(fixture.pinIndicator).toBeVisible()
       expect(await nodeRef.isPinned()).toBe(true)
 
       // Verify drag blocked
-      const header = comfyPage.vueNodes
-        .getNodeByTitle(nodeTitle)
-        .locator('.lg-node-header')
+      const header = fixture.header
       const posBeforeDrag = await header.boundingBox()
       if (!posBeforeDrag) throw new Error('Header not found')
       await comfyPage.canvasOps.dragAndDrop(
@@ -158,7 +145,7 @@ test.describe('Vue Node Context Menu', () => {
       await openContextMenu(comfyPage, nodeTitle)
       await clickExactMenuItem(comfyPage, 'Unpin')
 
-      await expect(pinIndicator).not.toBeVisible()
+      await expect(fixture.pinIndicator).not.toBeVisible()
       expect(await nodeRef.isPinned()).toBe(false)
     })
 
@@ -244,7 +231,9 @@ test.describe('Vue Node Context Menu', () => {
       comfyPage
     }) => {
       // Capture the original image src from the node's preview
-      const imagePreview = comfyPage.page.locator('.image-preview img')
+      const imagePreview = comfyPage.vueNodes
+        .getNodeByTitle('Load Image')
+        .getByTestId(TestIds.node.mainImage)
       const originalSrc = await imagePreview.getAttribute('src')
 
       // Write a test image into the browser clipboard
@@ -347,8 +336,7 @@ test.describe('Vue Node Context Menu', () => {
       await comfyPage.nodeOps.fillPromptDialog('TestBlueprint')
 
       // Open node library sidebar and search for the blueprint
-      await comfyPage.page.getByRole('button', { name: 'Node Library' }).click()
-      await comfyPage.nextFrame()
+      await comfyPage.menu.nodeLibraryTab.tabButton.click()
       const searchBox = comfyPage.page.getByRole('combobox', {
         name: 'Search'
       })
@@ -414,20 +402,16 @@ test.describe('Vue Node Context Menu', () => {
       await clickExactMenuItem(comfyPage, 'Pin')
 
       for (const title of nodeTitles) {
-        const pinIndicator = comfyPage.vueNodes
-          .getNodeByTitle(title)
-          .locator(PIN_INDICATOR)
-        await expect(pinIndicator).toBeVisible()
+        const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
+        await expect(fixture.pinIndicator).toBeVisible()
       }
 
       await openMultiNodeContextMenu(comfyPage, nodeTitles)
       await clickExactMenuItem(comfyPage, 'Unpin')
 
       for (const title of nodeTitles) {
-        const pinIndicator = comfyPage.vueNodes
-          .getNodeByTitle(title)
-          .locator(PIN_INDICATOR)
-        await expect(pinIndicator).not.toBeVisible()
+        const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
+        await expect(fixture.pinIndicator).not.toBeVisible()
       }
     })
 

package.json

@@ -73,6 +73,7 @@
     "@primevue/themes": "catalog:",
     "@sentry/vue": "catalog:",
     "@sparkjsdev/spark": "catalog:",
+    "@tanstack/vue-virtual": "catalog:",
     "@tiptap/core": "catalog:",
     "@tiptap/extension-link": "catalog:",
     "@tiptap/extension-table": "catalog:",

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-ai}]");
+@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}]");
 
 /* 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}]");

pnpm-lock.yaml

@@ -102,6 +102,9 @@ 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
@@ -458,6 +461,9 @@ 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)

pnpm-workspace.yaml

@@ -30,6 +30,7 @@ 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

src/components/common/TreeExplorerV2.vue

@@ -37,13 +37,13 @@
       </TreeRoot>
     </ContextMenuTrigger>
 
-    <ContextMenuPortal v-if="showContextMenu">
+    <ContextMenuPortal v-if="showContextMenu && contextMenuNode?.data">
       <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="handleAddToFavorites"
+          @select="handleToggleBookmark"
         >
           <i
             :class="
@@ -59,6 +59,14 @@
               : $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>
@@ -79,6 +87,7 @@ 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'
 
@@ -98,7 +107,6 @@ const emit = defineEmits<{
     node: RenderedTreeExplorerNode<ComfyNodeDefImpl>,
     event: MouseEvent
   ]
-  addToFavorites: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
 }>()
 
 const contextMenuNode = ref<RenderedTreeExplorerNode<ComfyNodeDefImpl> | null>(
@@ -107,6 +115,7 @@ const contextMenuNode = ref<RenderedTreeExplorerNode<ComfyNodeDefImpl> | null>(
 provide(InjectKeyContextMenuNode, contextMenuNode)
 
 const nodeBookmarkStore = useNodeBookmarkStore()
+const subgraphStore = useSubgraphStore()
 
 const isCurrentNodeBookmarked = computed(() => {
   const node = contextMenuNode.value
@@ -114,9 +123,21 @@ const isCurrentNodeBookmarked = computed(() => {
   return nodeBookmarkStore.isBookmarked(node.data)
 })
 
-function handleAddToFavorites() {
-  if (contextMenuNode.value) {
-    emit('addToFavorites', contextMenuNode.value)
+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)
   }
 }
 </script>

src/components/common/TreeExplorerV2Node.test.ts

@@ -13,7 +13,7 @@ import TreeExplorerV2Node from './TreeExplorerV2Node.vue'
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
-  messages: { en: {} }
+  messages: { en: { g: { delete: 'Delete' } } }
 })
 
 vi.mock('@/platform/settings/settingStore', () => ({
@@ -29,6 +29,17 @@ 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 />' }
 }))
@@ -175,8 +186,12 @@ describe('TreeExplorerV2Node', () => {
       expect(contextMenuNode.value).toEqual(nodeItem.value)
     })
 
-    it('does not set contextMenuNode for folder items', async () => {
-      const contextMenuNode = ref<RenderedTreeExplorerNode | null>(null)
+    it('clears contextMenuNode when right-clicking a folder', async () => {
+      const contextMenuNode = ref<RenderedTreeExplorerNode | null>({
+        key: 'stale',
+        type: 'node',
+        label: 'Stale'
+      } as RenderedTreeExplorerNode)
 
       const { wrapper } = mountComponent(
         { item: createMockItem('folder') },
@@ -194,6 +209,59 @@ 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({

src/components/common/TreeExplorerV2Node.vue

@@ -25,25 +25,30 @@
           {{ item.value.label }}
         </slot>
       </span>
-      <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 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>
     </div>
 
     <!-- Folder -->
@@ -53,6 +58,7 @@
       :class="cn(ROW_CLASS, isSelected && 'bg-comfy-input')"
       :style="rowStyle"
       @click.stop="handleClick($event, handleToggle, handleSelect)"
+      @contextmenu="clearContextMenuNode"
     >
       <i
         v-if="item.hasChildren"
@@ -96,6 +102,7 @@ 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'
@@ -107,6 +114,9 @@ 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>>
 }>()
@@ -120,6 +130,7 @@ const emit = defineEmits<{
 
 const contextMenuNode = inject(InjectKeyContextMenuNode)
 const nodeBookmarkStore = useNodeBookmarkStore()
+const subgraphStore = useSubgraphStore()
 
 const nodeDef = computed(() => item.value.data)
 
@@ -128,12 +139,22 @@ 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,
@@ -166,6 +187,12 @@ function handleContextMenu() {
   }
 }
 
+function clearContextMenuNode() {
+  if (contextMenuNode) {
+    contextMenuNode.value = null
+  }
+}
+
 function handleMouseEnter(e: MouseEvent) {
   if (item.value.type !== 'node') return
   baseHandleMouseEnter(e)

src/components/graph/TitleEditor.vue

@@ -7,6 +7,7 @@
     <EditableText
       :is-editing="showInput"
       :model-value="editedTitle"
+      :input-attrs="{ 'data-testid': 'node-title-input' }"
       @edit="onEdit"
     />
   </div>

src/components/queue/QueueOverlayExpanded.vue

@@ -20,7 +20,7 @@
       @update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
     />
 
-    <div class="min-h-0 flex-1 overflow-y-auto">
+    <div class="min-h-0 flex-1">
       <JobAssetsList
         :displayed-job-groups="displayedJobGroups"
         @cancel-item="onCancelItemEvent"

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

@@ -1,4 +1,3 @@
-/* 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'
@@ -6,21 +5,27 @@ 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 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 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 AssetsListItemStub = defineComponent({
   name: 'AssetsListItem',
@@ -65,71 +70,81 @@ vi.mock('vue-i18n', () => {
   }
 })
 
-const createResultItem = (
+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 = (
   filename: string,
   mediaType: string = 'images'
-): 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?: 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
+): TestPreviewOutput => {
+  const url = `/api/view/${filename}`
+  return {
+    url,
+    isImage: mediaType === 'images',
+    isVideo: mediaType === 'video'
   }
-  const flatOutputs = preview ? [preview] : []
-  return new TaskItemImpl(job, {}, flatOutputs)
 }
 
-const buildJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
+const createTaskRef = (preview?: TestPreviewOutput): TestTaskRef => ({
+  workflowId: 'workflow-1',
+  ...(preview && { previewOutput: preview })
+})
+
+const buildJob = (
+  overrides: Partial<TestJobListItem> = {}
+): TestJobListItem => ({
   id: 'job-1',
   title: 'Job 1',
   meta: 'meta',
   state: 'completed',
-  taskRef: createTaskRef(createResultItem('job-1.png')),
+  taskRef: createTaskRef(createPreviewOutput('job-1.png')),
   ...overrides
 })
 
-function renderJobAssetsList(
-  jobs: JobListItem[],
-  callbacks: {
-    onViewItem?: (item: JobListItem) => void
-  } = {}
-) {
-  const displayedJobGroups: JobGroup[] = [
-    {
-      key: 'group-1',
-      label: 'Group 1',
-      items: jobs
-    }
-  ]
-
+function renderJobAssetsList({
+  jobs = [],
+  displayedJobGroups,
+  attrs,
+  onViewItem
+}: {
+  jobs?: TestJobListItem[]
+  displayedJobGroups?: TestJobGroup[]
+  attrs?: Record<string, string>
+  onViewItem?: (item: JobListItem) => void
+} = {}) {
   const user = userEvent.setup()
 
   const result = render(JobAssetsList, {
     props: {
-      displayedJobGroups,
-      ...(callbacks.onViewItem && { onViewItem: callbacks.onViewItem })
+      displayedJobGroups: (displayedJobGroups ?? [
+        {
+          key: 'group-1',
+          label: 'Group 1',
+          items: jobs
+        }
+      ]) as JobGroup[],
+      ...(onViewItem && { onViewItem })
     },
+    attrs,
     global: {
       stubs: {
         teleport: true,
-        JobDetailsPopover: JobDetailsPopoverStub,
         AssetsListItem: AssetsListItemStub
       }
     }
@@ -168,10 +183,57 @@ 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([job], { onViewItem })
+    const { user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     await user.click(screen.getByTestId('preview-trigger'))
 
@@ -181,7 +243,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([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     await user.dblClick(stubRoot)
@@ -192,10 +254,10 @@ describe('JobAssetsList', () => {
   it('emits viewItem on double-click for completed video jobs without icon image', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createResultItem('job-1.webm', 'video'))
+      taskRef: createTaskRef(createPreviewOutput('job-1.webm', 'video'))
     })
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     expect(stubRoot.getAttribute('data-preview-url')).toBe(
@@ -211,10 +273,10 @@ describe('JobAssetsList', () => {
   it('emits viewItem on icon click for completed 3D jobs without preview tile', async () => {
     const job = buildJob({
       iconImageUrl: undefined,
-      taskRef: createTaskRef(createResultItem('job-1.glb', 'model'))
+      taskRef: createTaskRef(createPreviewOutput('job-1.glb', 'model'))
     })
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const icon = container.querySelector('.assets-list-item-stub i')!
     await user.click(icon)
@@ -225,10 +287,10 @@ describe('JobAssetsList', () => {
   it('does not emit viewItem on double-click for non-completed jobs', async () => {
     const job = buildJob({
       state: 'running',
-      taskRef: createTaskRef(createResultItem('job-1.png'))
+      taskRef: createTaskRef(createPreviewOutput('job-1.png'))
     })
     const onViewItem = vi.fn()
-    const { container, user } = renderJobAssetsList([job], { onViewItem })
+    const { container, user } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const stubRoot = container.querySelector('.assets-list-item-stub')!
     await user.dblClick(stubRoot)
@@ -242,7 +304,7 @@ describe('JobAssetsList', () => {
       taskRef: createTaskRef()
     })
     const onViewItem = vi.fn()
-    const { container } = renderJobAssetsList([job], { onViewItem })
+    const { container } = renderJobAssetsList({ jobs: [job], onViewItem })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
     await fireEvent.mouseEnter(jobRow)
@@ -256,7 +318,7 @@ describe('JobAssetsList', () => {
   it('shows and hides the job details popover with hover delays', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -286,7 +348,7 @@ describe('JobAssetsList', () => {
   it('keeps the job details popover open while hovering the popover', async () => {
     vi.useFakeTimers()
     const job = buildJob()
-    const { container } = renderJobAssetsList([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -319,7 +381,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([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -344,7 +406,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([job])
+    const { container } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 
@@ -370,7 +432,9 @@ describe('JobAssetsList', () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })
     const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList([firstJob, secondJob])
+    const { container } = renderJobAssetsList({
+      jobs: [firstJob, secondJob]
+    })
 
     const firstRow = container.querySelector('[data-job-id="job-1"]')!
     const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -398,7 +462,9 @@ describe('JobAssetsList', () => {
     vi.useFakeTimers()
     const firstJob = buildJob({ id: 'job-1' })
     const secondJob = buildJob({ id: 'job-2', title: 'Job 2' })
-    const { container } = renderJobAssetsList([firstJob, secondJob])
+    const { container } = renderJobAssetsList({
+      jobs: [firstJob, secondJob]
+    })
 
     const firstRow = container.querySelector('[data-job-id="job-1"]')!
     const secondRow = container.querySelector('[data-job-id="job-2"]')!
@@ -429,7 +495,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([job])
+    const { container, rerender } = renderJobAssetsList({ jobs: [job] })
 
     const jobRow = container.querySelector(`[data-job-id="${job.id}"]`)!
 

src/components/queue/job/JobAssetsList.vue

@@ -1,79 +1,92 @@
 <template>
-  <div class="flex flex-col gap-4 px-3 pb-4">
-    <div
-      v-for="group in displayedJobGroups"
-      :key="group.key"
-      class="flex flex-col gap-2"
-    >
-      <div class="text-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
+  <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)"
         >
-          <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)"
+          {{ 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
             >
-              <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>
+              <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>
     </div>
   </div>
 
@@ -97,8 +110,11 @@
 </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 { nextTick, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 
 import JobDetailsPopover from '@/components/queue/job/JobDetailsPopover.vue'
 import { getHoverPopoverPosition } from '@/components/queue/job/getHoverPopoverPosition'
@@ -110,6 +126,17 @@ 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<{
@@ -120,9 +147,43 @@ 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,
@@ -135,6 +196,37 @@ 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

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

@@ -0,0 +1,82 @@
+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]
+      }
+    ])
+  })
+})

src/components/queue/job/buildVirtualJobRows.ts

@@ -0,0 +1,37 @@
+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
+}

src/components/queue/job/testUtils/mockTanstackVirtualizer.ts

@@ -0,0 +1,33 @@
+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
+        }
+      })
+  }
+})

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -14,6 +14,7 @@
           <button
             class="m-0 cursor-pointer border-0 bg-transparent p-0 outline-0"
             role="button"
+            :aria-label="$t('mediaAsset.actions.copyJobId')"
             @click="copyJobId"
           >
             <i class="icon-[lucide--copy] text-sm"></i>
@@ -143,6 +144,7 @@
             <Button
               v-if="shouldShowDeleteButton"
               size="icon"
+              :aria-label="$t('mediaAsset.selection.deleteSelected')"
               data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
             >
@@ -150,6 +152,7 @@
             </Button>
             <Button
               size="icon"
+              :aria-label="$t('mediaAsset.selection.downloadSelected')"
               data-testid="assets-download-selected"
               @click="handleDownloadSelected"
             >

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

@@ -1,163 +0,0 @@
-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'
-    })
-  })
-})

src/components/sidebar/tabs/JobHistorySidebarTab.vue

@@ -46,22 +46,25 @@
       </div>
     </template>
     <template #body>
-      <JobAssetsList
-        :displayed-job-groups="displayedJobGroups"
-        @cancel-item="onCancelItem"
-        @delete-item="onDeleteItem"
-        @view-item="onViewItem"
-        @menu="onMenuItem"
-      />
-      <JobContextMenu
-        ref="jobContextMenuRef"
-        :entries="jobMenuEntries"
-        @action="onJobMenuAction"
-      />
-      <MediaLightbox
-        v-model:active-index="galleryActiveIndex"
-        :all-gallery-items="galleryItems"
-      />
+      <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>
     </template>
   </SidebarTabTemplate>
 </template>

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

@@ -12,7 +12,6 @@
       :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') }}
@@ -31,7 +30,6 @@
         :root="section.root"
         show-context-menu
         @node-click="(node) => emit('nodeClick', node)"
-        @add-to-favorites="handleAddToFavorites"
       />
     </div>
   </div>
@@ -71,12 +69,4 @@ const hasFavorites = computed(
 const favoritesRoot = computed(() =>
   fillNodeInfo(nodeBookmarkStore.bookmarkedRoot)
 )
-
-function handleAddToFavorites(
-  node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
-) {
-  if (node.data) {
-    nodeBookmarkStore.toggleBookmark(node.data)
-  }
-}
 </script>

src/components/ui/Popover.stories.ts

@@ -1,212 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import Button from '@/components/ui/button/Button.vue'
-
-import Popover from './Popover.vue'
-
-const meta = {
-  title: 'Components/Popover',
-  component: Popover,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#1a1a1b' },
-        { name: 'light', value: '#ffffff' },
-        { name: 'sidebar', value: '#232326' }
-      ]
-    }
-  }
-} satisfies Meta<typeof Popover>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/** Default: menu-style popover with action entries. */
-export const Default: Story = {
-  render: () => ({
-    components: { Popover },
-    template: `
-      <Popover
-        :entries="[
-          { label: 'Rename', icon: 'icon-[lucide--pencil]', command: () => {} },
-          { label: 'Duplicate', icon: 'icon-[lucide--copy]', command: () => {} },
-          { separator: true },
-          { label: 'Delete', icon: 'icon-[lucide--trash-2]', command: () => {} }
-        ]"
-      />
-    `
-  })
-}
-
-/** Custom trigger button. */
-export const CustomTrigger: Story = {
-  render: () => ({
-    components: { Popover, Button },
-    template: `
-      <Popover
-        :entries="[
-          { label: 'Option A', command: () => {} },
-          { label: 'Option B', command: () => {} }
-        ]"
-      >
-        <template #button>
-          <Button variant="outline">Click me</Button>
-        </template>
-      </Popover>
-    `
-  })
-}
-
-/** Action prompt: small inline confirmation bubble. */
-export const ActionPrompt: Story = {
-  render: () => ({
-    components: { Popover, Button },
-    template: `
-      <Popover>
-        <template #button>
-          <Button variant="outline" size="sm">
-            <i class="icon-[lucide--layout-grid] mr-1 size-3.5" />
-            Group
-          </Button>
-        </template>
-        <template #default="{ close }">
-          <div class="flex flex-col gap-2 p-1">
-            <p class="text-sm text-muted-foreground">Group into a row?</p>
-            <div class="flex gap-2">
-              <Button
-                size="sm"
-                variant="primary"
-                class="flex-1"
-                @click="close()"
-              >
-                Yes
-              </Button>
-              <Button
-                size="sm"
-                variant="ghost"
-                class="flex-1"
-                @click="close()"
-              >
-                No
-              </Button>
-            </div>
-          </div>
-        </template>
-      </Popover>
-    `
-  })
-}
-
-/** Alignment prompt: contextual bubble for zone actions. */
-export const AlignPrompt: Story = {
-  render: () => ({
-    components: { Popover, Button },
-    template: `
-      <Popover>
-        <template #button>
-          <Button variant="ghost" size="sm">
-            <i class="icon-[lucide--align-vertical-justify-end] size-4" />
-          </Button>
-        </template>
-        <template #default="{ close }">
-          <div class="flex flex-col gap-1.5 p-1">
-            <button
-              class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-secondary-background"
-              @click="close()"
-            >
-              <i class="icon-[lucide--arrow-down-to-line] size-4" />
-              Align to bottom
-            </button>
-            <button
-              class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-secondary-background"
-              @click="close()"
-            >
-              <i class="icon-[lucide--columns-2] size-4" />
-              Group into row
-            </button>
-          </div>
-        </template>
-      </Popover>
-    `
-  })
-}
-
-/** On light background — verify popover visibility. */
-export const OnLightBackground: Story = {
-  parameters: {
-    backgrounds: { default: 'light' }
-  },
-  render: () => ({
-    components: { Popover, Button },
-    template: `
-      <Popover>
-        <template #button>
-          <Button>Open popover</Button>
-        </template>
-        <template #default="{ close }">
-          <div class="p-2">
-            <p class="text-sm">Popover on light background</p>
-            <Button size="sm" class="mt-2" @click="close()">Close</Button>
-          </div>
-        </template>
-      </Popover>
-    `
-  })
-}
-
-/** On sidebar background — verify contrast against dark sidebar. */
-export const OnSidebarBackground: Story = {
-  parameters: {
-    backgrounds: { default: 'sidebar' }
-  },
-  render: () => ({
-    components: { Popover, Button },
-    template: `
-      <Popover>
-        <template #button>
-          <Button>Open popover</Button>
-        </template>
-        <template #default="{ close }">
-          <div class="p-2">
-            <p class="text-sm">Popover on sidebar background</p>
-            <Button size="sm" class="mt-2" @click="close()">Close</Button>
-          </div>
-        </template>
-      </Popover>
-    `
-  })
-}
-
-/** No arrow variant. */
-export const NoArrow: Story = {
-  render: () => ({
-    components: { Popover },
-    template: `
-      <Popover
-        :show-arrow="false"
-        :entries="[
-          { label: 'Settings', icon: 'icon-[lucide--settings]', command: () => {} },
-          { label: 'Help', icon: 'icon-[lucide--circle-help]', command: () => {} }
-        ]"
-      />
-    `
-  })
-}
-
-/** Disabled entry. */
-export const WithDisabled: Story = {
-  render: () => ({
-    components: { Popover },
-    template: `
-      <Popover
-        :entries="[
-          { label: 'Available', command: () => {} },
-          { label: 'Coming soon', disabled: true }
-        ]"
-      />
-    `
-  })
-}

src/components/ui/TypeformPopoverButton.stories.ts

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3-vite'
-
-import TypeformPopoverButton from './TypeformPopoverButton.vue'
-
-const meta = {
-  title: 'Components/TypeformPopoverButton',
-  component: TypeformPopoverButton,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered'
-  }
-} satisfies Meta<typeof TypeformPopoverButton>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-/** Default: help button that opens an embedded Typeform survey. */
-export const Default: Story = {
-  args: {
-    dataTfWidget: 'example123',
-    active: true
-  }
-}
-
-/** Inactive: popover content is hidden. */
-export const Inactive: Story = {
-  args: {
-    dataTfWidget: 'example123',
-    active: false
-  }
-}

src/platform/assets/components/MediaAssetCard.vue

@@ -123,6 +123,7 @@
               $t('mediaAsset.actions.seeMoreOutputs')
             "
             variant="secondary"
+            :aria-label="$t('mediaAsset.actions.seeMoreOutputs')"
             @click.stop="handleOutputCountClick"
           >
             <i class="icon-[lucide--layers] size-4" />

src/platform/workflow/cloud/getWorkflowFromHistory.test.ts

@@ -23,8 +23,8 @@ const mockWorkflow: ComfyWorkflowJSON = {
 const mockJobDetailResponse: JobDetail = {
   id: 'test-job-id',
   status: 'completed',
-  create_time: 1234567890,
-  update_time: 1234567900,
+  create_time: 1234567890000,
+  update_time: 1234567900000,
   workflow: {
     extra_data: {
       extra_pnginfo: {

src/stores/subgraphStore.test.ts

@@ -187,6 +187,35 @@ 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(

src/stores/subgraphStore.ts

@@ -432,6 +432,12 @@ 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,
@@ -439,6 +445,7 @@ export const useSubgraphStore = defineStore('subgraph', () => {
     getBlueprint,
     isGlobalBlueprint,
     isSubgraphBlueprint,
+    isUserBlueprint,
     publishSubgraph,
     subgraphBlueprints,
     typePrefix

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-ai': '#B6B6B6',
+  quiver: '#B6B6B6',
   recraft: '#B6B6B6',
   reve: '#B6B6B6',
   rodin: '#F7F7F7',