test: update job history mock setup

browser_tests/fixtures/ComfyPage.ts

@@ -23,6 +23,7 @@ import { SettingDialog } from '@e2e/fixtures/components/SettingDialog'
 import { TemplatesDialog } from '@e2e/fixtures/components/TemplatesDialog'
 import {
   AssetsSidebarTab,
+  JobHistorySidebarTab,
   ModelLibrarySidebarTab,
   NodeLibrarySidebarTab,
   NodeLibrarySidebarTabV2,
@@ -30,7 +31,6 @@ import {
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
 import { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
-import { AssetsHelper } from '@e2e/fixtures/helpers/AssetsHelper'
 import { CanvasHelper } from '@e2e/fixtures/helpers/CanvasHelper'
 import { ClipboardHelper } from '@e2e/fixtures/helpers/ClipboardHelper'
 import { CloudAuthHelper } from '@e2e/fixtures/helpers/CloudAuthHelper'
@@ -63,6 +63,7 @@ class ComfyPropertiesPanel {
 
 class ComfyMenu {
   private _assetsTab: AssetsSidebarTab | null = null
+  private _jobHistoryTab: JobHistorySidebarTab | null = null
   private _modelLibraryTab: ModelLibrarySidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _nodeLibraryTabV2: NodeLibrarySidebarTabV2 | null = null
@@ -101,6 +102,11 @@ class ComfyMenu {
     return this._assetsTab
   }
 
+  get jobHistoryTab() {
+    this._jobHistoryTab ??= new JobHistorySidebarTab(this.page)
+    return this._jobHistoryTab
+  }
+
   get workflowsTab() {
     this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
     return this._workflowsTab
@@ -176,7 +182,6 @@ export class ComfyPage {
   public readonly bottomPanel: BottomPanel
   public readonly queuePanel: QueuePanel
   public readonly perf: PerformanceHelper
-  public readonly assets: AssetsHelper
   public readonly modelLibrary: ModelLibraryHelper
   public readonly cloudAuth: CloudAuthHelper
   public readonly visibleToasts: Locator
@@ -229,7 +234,6 @@ export class ComfyPage {
     this.bottomPanel = new BottomPanel(page)
     this.queuePanel = new QueuePanel(page)
     this.perf = new PerformanceHelper(page)
-    this.assets = new AssetsHelper(page)
     this.modelLibrary = new ModelLibraryHelper(page)
     this.cloudAuth = new CloudAuthHelper(page)
   }

browser_tests/fixtures/components/SidebarTab.ts

@@ -204,6 +204,43 @@ export class WorkflowsSidebarTab extends SidebarTab {
   }
 }
 
+export class JobHistorySidebarTab extends SidebarTab {
+  public readonly root: Locator
+  public readonly searchInput: Locator
+  public readonly allTab: Locator
+  public readonly completedTab: Locator
+  public readonly failedTab: Locator
+  public readonly moreOptionsButton: Locator
+  public readonly clearQueuedButton: Locator
+  public readonly jobRows: Locator
+
+  constructor(public override readonly page: Page) {
+    super(page, 'job-history')
+    this.root = page.locator('.sidebar-content-container')
+    this.searchInput = this.root.getByPlaceholder('Search...')
+    this.allTab = this.root.getByRole('tab', { name: 'All', exact: true })
+    this.completedTab = this.root.getByRole('tab', {
+      name: 'Completed',
+      exact: true
+    })
+    this.failedTab = this.root.getByRole('tab', { name: 'Failed', exact: true })
+    this.moreOptionsButton = this.root.getByLabel('More options')
+    this.clearQueuedButton = this.root.getByRole('button', {
+      name: 'Clear queue'
+    })
+    this.jobRows = this.root.locator('[data-job-id]')
+  }
+
+  jobRow(jobId: string) {
+    return this.root.locator(`[data-job-id="${jobId}"]`)
+  }
+
+  override async open() {
+    await super.open()
+    await this.searchInput.waitFor({ state: 'visible' })
+  }
+}
+
 export class ModelLibrarySidebarTab extends SidebarTab {
   public readonly searchInput: Locator
   public readonly modelTree: Locator
@@ -249,70 +286,62 @@ export class ModelLibrarySidebarTab extends SidebarTab {
 }
 
 export class AssetsSidebarTab extends SidebarTab {
-  // --- Tab navigation ---
+  public readonly root: Locator
   public readonly generatedTab: Locator
   public readonly importedTab: Locator
-
-  // --- Empty state ---
   public readonly emptyStateMessage: Locator
-
-  // --- Search & filter ---
   public readonly searchInput: Locator
   public readonly settingsButton: Locator
-
-  // --- View mode ---
   public readonly listViewOption: Locator
   public readonly gridViewOption: Locator
-
-  // --- Sort options (cloud-only, shown inside settings popover) ---
+  public readonly backToAssetsButton: Locator
+  public readonly copyJobIdButton: Locator
+  public readonly previewDialog: Locator
   public readonly sortNewestFirst: Locator
   public readonly sortOldestFirst: Locator
-
-  // --- Asset cards ---
   public readonly assetCards: Locator
   public readonly selectedCards: Locator
-
-  // --- List view items ---
   public readonly listViewItems: Locator
-
-  // --- Selection footer ---
   public readonly selectionFooter: Locator
   public readonly selectionCountButton: Locator
   public readonly deselectAllButton: Locator
   public readonly deleteSelectedButton: Locator
   public readonly downloadSelectedButton: Locator
-
-  // --- Folder view ---
-  public readonly backToAssetsButton: Locator
-
-  // --- Loading ---
   public readonly skeletonLoaders: Locator
 
   constructor(public override readonly page: Page) {
     super(page, 'assets')
+    this.root = page.locator('.sidebar-content-container')
     this.generatedTab = page.getByRole('tab', { name: 'Generated' })
     this.importedTab = page.getByRole('tab', { name: 'Imported' })
     this.emptyStateMessage = page.getByText(
       'Upload files or generate content to see them here'
     )
-    this.searchInput = page.getByPlaceholder('Search Assets...')
-    this.settingsButton = page.getByRole('button', { name: 'View settings' })
+    this.searchInput = this.root.getByPlaceholder(/Search Assets/i)
+    this.settingsButton = this.root.getByLabel('View settings')
     this.listViewOption = page.getByText('List view')
     this.gridViewOption = page.getByText('Grid view')
+    this.backToAssetsButton = page.getByRole('button', {
+      name: 'Back to all assets'
+    })
+    this.copyJobIdButton = page.getByRole('button', {
+      name: 'Copy job ID'
+    })
+    this.previewDialog = page.getByRole('dialog', { name: 'Gallery' })
     this.sortNewestFirst = page.getByText('Newest first')
     this.sortOldestFirst = page.getByText('Oldest first')
-    this.assetCards = page
+    this.assetCards = this.root
       .getByRole('button')
-      .and(page.locator('[data-selected]'))
-    this.selectedCards = page.locator('[data-selected="true"]')
-    this.listViewItems = page.locator(
-      '.sidebar-content-container [role="button"][tabindex="0"]'
-    )
-    this.selectionFooter = page
-      .locator('.sidebar-content-container')
-      .locator('..')
-      .locator('[class*="h-18"]')
-    this.selectionCountButton = page.getByText(/Assets Selected: \d+/)
+      .and(this.root.locator('[data-selected]'))
+    this.selectedCards = this.root.locator('[data-selected="true"]')
+    this.listViewItems = this.root.getByRole('button', { name: /asset$/i })
+    this.selectionFooter = this.root.locator('..').getByRole('toolbar', {
+      name: 'Selected asset actions'
+    })
+    this.selectionCountButton = this.root
+      .getByRole('button', { name: /Assets Selected:/ })
+      .or(page.getByText(/Assets Selected: \d+/))
+      .first()
     this.deselectAllButton = page.getByText('Deselect all')
     this.deleteSelectedButton = page
       .getByTestId('assets-delete-selected')
@@ -322,28 +351,113 @@ export class AssetsSidebarTab extends SidebarTab {
       .getByTestId('assets-download-selected')
       .or(page.locator('button:has(.icon-\\[lucide--download\\])').last())
       .first()
-    this.backToAssetsButton = page.getByText('Back to all assets')
-    this.skeletonLoaders = page.locator(
-      '.sidebar-content-container .animate-pulse'
-    )
+    this.skeletonLoaders = this.root.locator('.animate-pulse')
   }
 
   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)
+  }
+
   getAssetCardByName(name: string) {
-    return this.assetCards.filter({ hasText: name })
+    return this.assetCards.filter({ hasText: name }).first()
   }
 
   contextMenuItem(label: string) {
     return this.page.locator('.p-contextmenu').getByText(label)
   }
 
+  contextMenuAction(label: string) {
+    return this.contextMenuItem(label)
+  }
+
+  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()
+
+    for (const name of names.slice(1)) {
+      await this.asset(name).click({
+        modifiers: ['ControlOrMeta']
+      })
+    }
+  }
+
   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/helpers/AssetsHelper.ts

@@ -1,251 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-import type { JobsListResponse } from '@comfyorg/ingest-types'
-
-import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-
-const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
-const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
-const historyRoutePattern = /\/api\/history$/
-
-/** Factory to create a mock completed job with preview output. */
-export function createMockJob(
-  overrides: Partial<RawJobListItem> & { id: string }
-): RawJobListItem {
-  const now = Date.now()
-  return {
-    status: 'completed',
-    create_time: now,
-    execution_start_time: now,
-    execution_end_time: now + 5000,
-    preview_output: {
-      filename: `output_${overrides.id}.png`,
-      subfolder: '',
-      type: 'output',
-      nodeId: '1',
-      mediaType: 'images'
-    },
-    outputs_count: 1,
-    priority: 0,
-    ...overrides
-  }
-}
-
-/** Create multiple mock jobs with sequential IDs and staggered timestamps. */
-export function createMockJobs(
-  count: number,
-  baseOverrides?: Partial<RawJobListItem>
-): RawJobListItem[] {
-  const now = Date.now()
-  return Array.from({ length: count }, (_, i) =>
-    createMockJob({
-      id: `job-${String(i + 1).padStart(3, '0')}`,
-      create_time: now - i * 60_000,
-      execution_start_time: now - i * 60_000,
-      execution_end_time: now - i * 60_000 + 5000 + i * 1000,
-      preview_output: {
-        filename: `image_${String(i + 1).padStart(3, '0')}.png`,
-        subfolder: '',
-        type: 'output',
-        nodeId: '1',
-        mediaType: 'images'
-      },
-      ...baseOverrides
-    })
-  )
-}
-
-/** Create mock imported file names with various media types. */
-export function createMockImportedFiles(count: number): string[] {
-  const extensions = ['png', 'jpg', 'mp4', 'wav', 'glb', 'txt']
-  return Array.from(
-    { length: count },
-    (_, i) =>
-      `imported_${String(i + 1).padStart(3, '0')}.${extensions[i % extensions.length]}`
-  )
-}
-
-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: RawJobListItem): number {
-  const start = job.execution_start_time ?? 0
-  const end = job.execution_end_time ?? 0
-  return end - start
-}
-
-export class AssetsHelper {
-  private jobsRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private inputFilesRouteHandler: ((route: Route) => Promise<void>) | null =
-    null
-  private deleteHistoryRouteHandler: ((route: Route) => Promise<void>) | null =
-    null
-  private generatedJobs: RawJobListItem[] = []
-  private importedFiles: string[] = []
-
-  constructor(private readonly page: Page) {}
-
-  async mockOutputHistory(jobs: RawJobListItem[]): Promise<void> {
-    this.generatedJobs = [...jobs]
-
-    if (this.jobsRouteHandler) {
-      return
-    }
-
-    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
-
-      let filteredJobs = [...this.generatedJobs]
-
-      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 {
-        jobs: unknown[]
-        pagination: JobsListResponse['pagination']
-      }
-
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(response)
-      })
-    }
-
-    await this.page.route(jobsListRoutePattern, this.jobsRouteHandler)
-  }
-
-  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)
-  }
-
-  /**
-   * Mock the POST /api/history endpoint used for deleting history items.
-   * On receiving a `{ delete: [id] }` payload, removes matching jobs from
-   * the in-memory mock state so subsequent /api/jobs fetches reflect the
-   * deletion.
-   */
-  async mockDeleteHistory(): Promise<void> {
-    if (this.deleteHistoryRouteHandler) return
-
-    this.deleteHistoryRouteHandler = async (route: Route) => {
-      const request = route.request()
-      if (request.method() !== 'POST') {
-        await route.continue()
-        return
-      }
-
-      const body = request.postDataJSON() as { delete?: string[] }
-      if (body.delete) {
-        const idsToRemove = new Set(body.delete)
-        this.generatedJobs = this.generatedJobs.filter(
-          (job) => !idsToRemove.has(job.id)
-        )
-      }
-
-      await route.fulfill({ status: 200, body: '{}' })
-    }
-
-    await this.page.route(historyRoutePattern, this.deleteHistoryRouteHandler)
-  }
-
-  async mockEmptyState(): Promise<void> {
-    await this.mockOutputHistory([])
-    await this.mockInputFiles([])
-  }
-
-  async clearMocks(): Promise<void> {
-    this.generatedJobs = []
-    this.importedFiles = []
-
-    if (this.jobsRouteHandler) {
-      await this.page.unroute(jobsListRoutePattern, this.jobsRouteHandler)
-      this.jobsRouteHandler = null
-    }
-
-    if (this.inputFilesRouteHandler) {
-      await this.page.unroute(
-        inputFilesRoutePattern,
-        this.inputFilesRouteHandler
-      )
-      this.inputFilesRouteHandler = null
-    }
-
-    if (this.deleteHistoryRouteHandler) {
-      await this.page.unroute(
-        historyRoutePattern,
-        this.deleteHistoryRouteHandler
-      )
-      this.deleteHistoryRouteHandler = null
-    }
-  }
-}

browser_tests/fixtures/helpers/ExecutionHelper.ts

@@ -1,18 +1,19 @@
 import type { WebSocketRoute } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'
 
-import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
-import { createMockJob } from '@e2e/fixtures/helpers/AssetsHelper'
+import { AssetScenarioHelper } from '@e2e/fixtures/helpers/AssetScenarioHelper'
+import { createMockJob } from '@e2e/fixtures/helpers/jobFixtures'
 
 /**
  * Helper for simulating prompt execution in e2e tests.
  */
 export class ExecutionHelper {
   private jobCounter = 0
-  private readonly completedJobs: RawJobListItem[] = []
+  private readonly completedJobs: JobEntry[] = []
   private readonly page: ComfyPage['page']
   private readonly command: ComfyPage['command']
-  private readonly assets: ComfyPage['assets']
+  private readonly assetScenario: AssetScenarioHelper
 
   constructor(
     comfyPage: ComfyPage,
@@ -20,7 +21,7 @@ export class ExecutionHelper {
   ) {
     this.page = comfyPage.page
     this.command = comfyPage.command
-    this.assets = comfyPage.assets
+    this.assetScenario = new AssetScenarioHelper(comfyPage.page)
   }
 
   /**
@@ -172,8 +173,6 @@ export class ExecutionHelper {
   /**
    * Complete a job by adding it to mock history, sending execution_success,
    * and triggering a history refresh via a status event.
-   *
-   * Requires an {@link AssetsHelper} to be passed in the constructor.
    */
   async completeWithHistory(
     jobId: string,
@@ -193,7 +192,7 @@ export class ExecutionHelper {
       })
     )
 
-    await this.assets.mockOutputHistory(this.completedJobs)
+    await this.assetScenario.mockGeneratedHistory(this.completedJobs)
     this.executionSuccess(jobId)
     // Trigger queue/history refresh
     this.status(0)

browser_tests/fixtures/helpers/jobFixtures.ts

@@ -24,6 +24,30 @@ export function createMockJob(
   }
 }
 
+export function createMockJobs(
+  count: number,
+  baseOverrides?: Partial<JobEntry>
+): JobEntry[] {
+  const now = Date.now()
+
+  return Array.from({ length: count }, (_, index) =>
+    createMockJob({
+      id: `job-${String(index + 1).padStart(3, '0')}`,
+      create_time: now - index * 60_000,
+      execution_start_time: now - index * 60_000,
+      execution_end_time: now - index * 60_000 + (5 + index) * 1_000,
+      preview_output: {
+        filename: `image_${String(index + 1).padStart(3, '0')}.png`,
+        subfolder: '',
+        type: 'output',
+        nodeId: '1',
+        mediaType: 'images'
+      },
+      ...baseOverrides
+    })
+  )
+}
+
 function isTerminalStatus(status: JobEntry['status']) {
   return status === 'completed' || status === 'failed' || status === 'cancelled'
 }

browser_tests/tests/sidebar/assets.spec.ts

@@ -1,22 +1,21 @@
-import { expect } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'
 
-import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { assetScenarioFixture } from '@e2e/fixtures/assetScenarioFixture'
 import {
   createMockJob,
   createMockJobs
-} from '@e2e/fixtures/helpers/AssetsHelper'
-import type { RawJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
+} from '@e2e/fixtures/helpers/jobFixtures'
 
-// ---------------------------------------------------------------------------
-// Shared fixtures
-// ---------------------------------------------------------------------------
+const test = mergeTests(comfyPageFixture, assetScenarioFixture)
 
-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 +27,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 +41,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,20 +61,12 @@ const SAMPLE_IMPORTED_FILES = [
   'audio_clip.wav'
 ]
 
-// ==========================================================================
-// 1. Empty states
-// ==========================================================================
-
 test.describe('Assets sidebar - empty states', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockEmptyState()
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockEmptyState()
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Shows empty-state copy for generated tab', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
@@ -101,21 +92,13 @@ test.describe('Assets sidebar - empty states', () => {
   })
 })
 
-// ==========================================================================
-// 2. Tab navigation
-// ==========================================================================
-
 test.describe('Assets sidebar - tab navigation', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
-    await comfyPage.assets.mockInputFiles(SAMPLE_IMPORTED_FILES)
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
+    await assetScenario.mockImportedFiles(SAMPLE_IMPORTED_FILES)
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Generated tab is active by default', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
@@ -130,12 +113,10 @@ test.describe('Assets sidebar - tab navigation', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
-    // Switch to Imported
     await tab.switchToImported()
     await expect(tab.importedTab).toHaveAttribute('aria-selected', 'true')
     await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'false')
 
-    // Switch back to Generated
     await tab.switchToGenerated()
     await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'true')
   })
@@ -144,31 +125,21 @@ test.describe('Assets sidebar - tab navigation', () => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
 
-    // Type search in Generated tab
     await tab.searchInput.fill('landscape')
     await expect(tab.searchInput).toHaveValue('landscape')
 
-    // Switch to Imported tab
     await tab.switchToImported()
     await expect(tab.searchInput).toHaveValue('')
   })
 })
 
-// ==========================================================================
-// 3. Asset display - grid view
-// ==========================================================================
-
 test.describe('Assets sidebar - grid view display', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
-    await comfyPage.assets.mockInputFiles(SAMPLE_IMPORTED_FILES)
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
+    await assetScenario.mockImportedFiles(SAMPLE_IMPORTED_FILES)
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Displays generated assets as cards in grid view', async ({
     comfyPage
   }) => {
@@ -193,8 +164,8 @@ test.describe('Assets sidebar - grid view display', () => {
     await expect.poll(() => tab.assetCards.count()).toBeGreaterThanOrEqual(1)
   })
 
-  test('Displays svg outputs', async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory([
+  test('Displays svg outputs', async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory([
       createMockJob({
         id: 'job-alpha',
         create_time: 1000,
@@ -218,31 +189,22 @@ test.describe('Assets sidebar - grid view display', () => {
   })
 })
 
-// ==========================================================================
-// 4. View mode toggle (grid <-> list)
-// ==========================================================================
-
 test.describe('Assets sidebar - view mode toggle', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
-    await comfyPage.assets.mockInputFiles([])
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
+    await assetScenario.mockImportedFiles([])
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Can switch to list view via settings menu', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
     await tab.waitForAssets()
 
-    // Open settings menu and select list view
     await tab.openSettingsMenu()
     await tab.listViewOption.click()
 
-    // List view items should now be visible
+    await expect(tab.assetCards).toHaveCount(0)
     await expect(tab.listViewItems.first()).toBeVisible()
   })
 
@@ -251,12 +213,10 @@ test.describe('Assets sidebar - view mode toggle', () => {
     await tab.open()
     await tab.waitForAssets()
 
-    // Switch to list view
     await tab.openSettingsMenu()
     await tab.listViewOption.click()
     await expect(tab.listViewItems.first()).toBeVisible()
 
-    // Switch back to grid view (settings popover is still open)
     await tab.gridViewOption.click()
     await tab.waitForAssets()
 
@@ -265,21 +225,13 @@ test.describe('Assets sidebar - view mode toggle', () => {
   })
 })
 
-// ==========================================================================
-// 5. Search functionality
-// ==========================================================================
-
 test.describe('Assets sidebar - search', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
-    await comfyPage.assets.mockInputFiles([])
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
+    await assetScenario.mockImportedFiles([])
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Search input is visible', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
@@ -296,7 +248,6 @@ test.describe('Assets sidebar - search', () => {
 
     const initialCount = await tab.assetCards.count()
 
-    // Search for a specific filename that matches only one asset
     await tab.searchInput.fill('landscape')
 
     // Wait for filter to reduce the count
@@ -310,7 +261,6 @@ test.describe('Assets sidebar - search', () => {
 
     const initialCount = await tab.assetCards.count()
 
-    // Filter then clear
     await tab.searchInput.fill('landscape')
     await expect.poll(() => tab.assetCards.count()).toBeLessThan(initialCount)
 
@@ -328,30 +278,20 @@ test.describe('Assets sidebar - search', () => {
   })
 })
 
-// ==========================================================================
-// 6. Asset selection
-// ==========================================================================
-
 test.describe('Assets sidebar - selection', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
-    await comfyPage.assets.mockInputFiles([])
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
+    await assetScenario.mockImportedFiles([])
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Clicking an asset card selects it', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
     await tab.waitForAssets()
 
-    // Click first asset card
     await tab.assetCards.first().click()
 
-    // Should have data-selected="true"
     await expect(tab.selectedCards).toHaveCount(1)
   })
 
@@ -363,11 +303,9 @@ test.describe('Assets sidebar - selection', () => {
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
 
-    // Click first card
     await cards.first().click()
     await expect(tab.selectedCards).toHaveCount(1)
 
-    // Ctrl+click second card
     await cards.nth(1).click({ modifiers: ['ControlOrMeta'] })
     await expect(tab.selectedCards).toHaveCount(2)
   })
@@ -379,7 +317,6 @@ test.describe('Assets sidebar - selection', () => {
     await tab.open()
     await tab.waitForAssets()
 
-    // Select an asset
     await tab.assetCards.first().click()
 
     // Footer should show selection count
@@ -391,15 +328,12 @@ test.describe('Assets sidebar - selection', () => {
     await tab.open()
     await tab.waitForAssets()
 
-    // Select an asset
     await tab.assetCards.first().click()
     await expect(tab.selectedCards).toHaveCount(1)
 
-    // Hover over the selection count button to reveal "Deselect all"
     await tab.selectionCountButton.hover()
     await expect(tab.deselectAllButton).toBeVisible()
 
-    // Click "Deselect all"
     await tab.deselectAllButton.click()
     await expect(tab.selectedCards).toHaveCount(0)
   })
@@ -409,44 +343,31 @@ test.describe('Assets sidebar - selection', () => {
     await tab.open()
     await tab.waitForAssets()
 
-    // Select an asset
     await tab.assetCards.first().click()
     await expect(tab.selectedCards).toHaveCount(1)
 
-    // Switch to Imported tab
     await tab.switchToImported()
 
-    // Switch back - selection should be cleared
     await tab.switchToGenerated()
     await tab.waitForAssets()
     await expect(tab.selectedCards).toHaveCount(0)
   })
 })
 
-// ==========================================================================
-// 7. Context menu
-// ==========================================================================
-
 test.describe('Assets sidebar - context menu', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
-    await comfyPage.assets.mockInputFiles([])
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
+    await assetScenario.mockImportedFiles([])
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Right-clicking an asset shows context menu', async ({ comfyPage }) => {
     const tab = comfyPage.menu.assetsTab
     await tab.open()
     await tab.waitForAssets()
 
-    // Right-click first asset
     await tab.assetCards.first().click({ button: 'right' })
 
-    // Context menu should appear with standard items
     const contextMenu = comfyPage.page.locator('.p-contextmenu')
     await expect(contextMenu).toBeVisible()
   })
@@ -539,23 +460,17 @@ test.describe('Assets sidebar - context menu', () => {
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(2)
 
-    // Dismiss any toasts that appeared after asset loading
     await tab.dismissToasts()
 
-    // Multi-select: use keyboard.down/up so useKeyModifier('Control') detects
-    // the modifier — click({ modifiers }) only sets the mouse event flag and
-    // does not fire a keydown event that VueUse tracks.
     await cards.first().click()
-    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.down('ControlOrMeta')
     await cards.nth(1).click()
-    await comfyPage.page.keyboard.up('Control')
+    await comfyPage.page.keyboard.up('ControlOrMeta')
 
     // Verify multi-selection took effect and footer is stable before right-clicking
     await expect(tab.selectedCards).toHaveCount(2)
     await expect(tab.selectionFooter).toBeVisible()
 
-    // Use dispatchEvent instead of click({ button: 'right' }) to avoid any
-    // overlay intercepting the event, and assert directly without toPass.
     const contextMenu = comfyPage.page.locator('.p-contextmenu')
     await cards.first().dispatchEvent('contextmenu', {
       bubbles: true,
@@ -564,26 +479,17 @@ test.describe('Assets sidebar - context menu', () => {
     })
     await expect(contextMenu).toBeVisible()
 
-    // Bulk menu should show bulk download action
     await expect(tab.contextMenuItem('Download all')).toBeVisible()
   })
 })
 
-// ==========================================================================
-// 8. Bulk actions (footer)
-// ==========================================================================
-
 test.describe('Assets sidebar - bulk actions', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
-    await comfyPage.assets.mockInputFiles([])
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
+    await assetScenario.mockImportedFiles([])
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Footer shows download button when assets selected', async ({
     comfyPage
   }) => {
@@ -615,17 +521,14 @@ test.describe('Assets sidebar - bulk actions', () => {
     await tab.open()
     await tab.waitForAssets()
 
-    // Select the two single-output assets (job-alpha, job-beta).
-    // The count reflects total outputs, not cards — job-gamma has
-    // outputs_count: 2 which would inflate the total.
     const cards = tab.assetCards
     await expect.poll(() => cards.count()).toBeGreaterThanOrEqual(3)
 
     // Cards are sorted newest-first: gamma (idx 0), beta (1), alpha (2)
     await cards.nth(1).click()
-    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.down('ControlOrMeta')
     await cards.nth(2).click()
-    await comfyPage.page.keyboard.up('Control')
+    await comfyPage.page.keyboard.up('ControlOrMeta')
 
     // Selection count should show the count
     await expect(tab.selectionCountButton).toBeVisible()
@@ -633,84 +536,13 @@ test.describe('Assets sidebar - bulk actions', () => {
   })
 })
 
-// ==========================================================================
-// 9. Pagination
-// ==========================================================================
-
-test.describe('Assets sidebar - pagination', () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
-  test('initial load fetches first batch with offset 0', async ({
-    comfyPage
-  }) => {
-    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()
-
-    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)
-  })
-})
-
-// ==========================================================================
-// 10. Settings menu visibility
-// ==========================================================================
-
-test.describe('Assets sidebar - settings menu', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
-    await comfyPage.assets.mockInputFiles([])
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
-  test('Settings menu shows view mode options', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-
-    await tab.openSettingsMenu()
-
-    await expect(tab.listViewOption).toBeVisible()
-    await expect(tab.gridViewOption).toBeVisible()
-  })
-})
-
-// ==========================================================================
-// 11. Delete confirmation
-// ==========================================================================
-
 test.describe('Assets sidebar - delete confirmation', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory(SAMPLE_JOBS)
-    await comfyPage.assets.mockDeleteHistory()
-    await comfyPage.assets.mockInputFiles([])
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
+    await assetScenario.mockImportedFiles([])
     await comfyPage.setup()
   })
 
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
   test('Right-click delete shows confirmation dialog', async ({
     comfyPage
   }) => {
@@ -744,7 +576,7 @@ test.describe('Assets sidebar - delete confirmation', () => {
     const dialog = comfyPage.confirmDialog.root
     await expect(dialog).toBeVisible()
 
-    await comfyPage.confirmDialog.delete.click()
+    await comfyPage.confirmDialog.click('delete')
 
     await expect(dialog).toBeHidden()
     await expect(tab.assetCards).toHaveCount(initialCount - 1)
@@ -766,9 +598,54 @@ test.describe('Assets sidebar - delete confirmation', () => {
     const dialog = comfyPage.confirmDialog.root
     await expect(dialog).toBeVisible()
 
-    await comfyPage.confirmDialog.reject.click()
+    await comfyPage.confirmDialog.click('reject')
 
     await expect(dialog).toBeHidden()
     await expect(tab.assetCards).toHaveCount(initialCount)
   })
 })
+
+test.describe('Assets sidebar - pagination', () => {
+  test('initial load fetches first batch with offset 0', async ({
+    comfyPage,
+    assetScenario
+  }) => {
+    const manyJobs = createMockJobs(250)
+    await assetScenario.mockGeneratedHistory(manyJobs)
+    await comfyPage.setup()
+
+    const firstRequest = comfyPage.page.waitForRequest((req) => {
+      if (!/\/api\/jobs\?/.test(req.url())) return false
+      const url = new URL(req.url())
+      const status = url.searchParams.get('status') ?? ''
+      return status.includes('completed')
+    })
+
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const req = await firstRequest
+    const url = new URL(req.url())
+    expect(url.searchParams.get('offset')).toBe('0')
+    expect(Number(url.searchParams.get('limit'))).toBeGreaterThan(0)
+  })
+})
+
+test.describe('Assets sidebar - settings menu', () => {
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(SAMPLE_JOBS)
+    await assetScenario.mockImportedFiles([])
+    await comfyPage.setup()
+  })
+
+  test('Settings menu shows view mode options', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.openSettingsMenu()
+
+    await expect(tab.listViewOption).toBeVisible()
+    await expect(tab.gridViewOption).toBeVisible()
+  })
+})

browser_tests/tests/sidebar/assetsActions.spec.ts

@@ -0,0 +1,149 @@
+import { expect, mergeTests } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'
+
+import { assetScenarioFixture } from '@e2e/fixtures/assetScenarioFixture'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { createMockJob } from '@e2e/fixtures/helpers/jobFixtures'
+
+const test = mergeTests(comfyPageFixture, assetScenarioFixture)
+
+const GENERATED_JOBS: JobEntry[] = [
+  createMockJob({
+    id: 'job-alpha',
+    create_time: 1_000_000,
+    execution_start_time: 1_000_000,
+    execution_end_time: 1_010_000,
+    preview_output: {
+      filename: 'landscape.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-beta',
+    create_time: 2_000_000,
+    execution_start_time: 2_000_000,
+    execution_end_time: 2_008_000,
+    preview_output: {
+      filename: 'portrait.webp',
+      subfolder: '',
+      type: 'output',
+      nodeId: '2',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-gamma',
+    create_time: 3_000_000,
+    execution_start_time: 3_000_000,
+    execution_end_time: 3_015_000,
+    preview_output: {
+      filename: 'gallery.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '3',
+      mediaType: 'images'
+    },
+    outputs_count: 2
+  })
+]
+
+test.describe('Assets sidebar actions', () => {
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(GENERATED_JOBS)
+    await comfyPage.setup()
+  })
+
+  test('shows selection footer actions after selecting an asset', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.asset('gallery.png').click()
+
+    await expect(tab.selectionFooter).toBeVisible()
+    await expect(tab.selectionCountButton).toHaveText(/Assets Selected:\s*2\b/)
+    await expect(tab.downloadSelectedButton).toBeVisible()
+    await expect(tab.deleteSelectedButton).toBeVisible()
+  })
+
+  test('supports multi-select and deselect all', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.selectAssets(['landscape.png', 'portrait.webp'])
+
+    await expect(tab.selectedCards).toHaveCount(2)
+    await expect(tab.selectionCountButton).toHaveText(/Assets Selected:\s*2\b/)
+
+    await tab.selectionCountButton.hover()
+    await expect(tab.deselectAllButton).toBeVisible()
+
+    await tab.deselectAllButton.click()
+    await expect(tab.selectedCards).toHaveCount(0)
+  })
+
+  test('shows the output asset context menu actions', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.openContextMenuForAsset('landscape.png')
+
+    await expect(tab.contextMenuAction('Download')).toBeVisible()
+    await expect(tab.contextMenuAction('Inspect asset')).toBeVisible()
+    await expect(tab.contextMenuAction('Delete')).toBeVisible()
+    await expect(tab.contextMenuAction('Copy job ID')).toBeVisible()
+  })
+
+  test('shows the bulk context menu for multi-selection', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.selectAssets(['landscape.png', 'portrait.webp'])
+    await expect(tab.selectionFooter).toBeVisible()
+
+    await tab.asset('landscape.png').dispatchEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      button: 2
+    })
+
+    await expect(tab.contextMenuAction('Download all')).toBeVisible()
+  })
+
+  test('confirms delete and removes the selected asset', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const initialCount = await tab.assetCards.count()
+
+    await tab.runContextMenuAction('gallery.png', 'Delete')
+
+    await expect(comfyPage.confirmDialog.root).toBeVisible()
+    await expect(
+      comfyPage.confirmDialog.root.getByText('Delete this asset?')
+    ).toBeVisible()
+
+    await comfyPage.confirmDialog.click('delete')
+
+    await expect(comfyPage.confirmDialog.root).toBeHidden()
+    await expect(tab.assetCards).toHaveCount(initialCount - 1)
+    await expect(
+      comfyPage.page.locator('.p-toast-message-success')
+    ).toBeVisible()
+  })
+})

browser_tests/tests/sidebar/jobHistory.spec.ts

@@ -0,0 +1,137 @@
+import type { Locator } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'
+
+import { assetScenarioFixture } from '@e2e/fixtures/assetScenarioFixture'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { createMockJob } from '@e2e/fixtures/helpers/jobFixtures'
+
+const test = mergeTests(comfyPageFixture, assetScenarioFixture)
+
+const HISTORY_JOBS: JobEntry[] = [
+  createMockJob({
+    id: 'job-completed-1',
+    status: 'completed',
+    create_time: 1_000_000,
+    execution_start_time: 1_000_000,
+    execution_end_time: 1_010_000,
+    preview_output: {
+      filename: 'history-completed.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-failed-1',
+    status: 'failed',
+    create_time: 2_000_000,
+    execution_start_time: 2_000_000,
+    execution_end_time: 2_005_000,
+    preview_output: {
+      filename: 'history-failed.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '2',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  })
+]
+
+async function openOverlayMenu(comfyPage: {
+  page: {
+    getByTestId(id: string): Locator
+    getByLabel(label: string | RegExp): Locator
+  }
+}) {
+  await comfyPage.page.getByTestId('queue-overlay-toggle').click()
+  await comfyPage.page
+    .getByLabel(/More options/i)
+    .first()
+    .click()
+}
+
+test.describe('Job history sidebar', () => {
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(HISTORY_JOBS)
+    await comfyPage.setupSettings({
+      'Comfy.Queue.QPOV2': true
+    })
+    await comfyPage.setup()
+  })
+
+  test('shows mocked history and filters failed jobs', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.jobHistoryTab
+    await tab.open()
+
+    await expect(tab.jobRow('job-completed-1')).toBeVisible()
+    await expect(tab.jobRow('job-failed-1')).toBeVisible()
+
+    await tab.failedTab.click()
+
+    await expect(tab.jobRow('job-failed-1')).toBeVisible()
+    await expect(tab.jobRow('job-completed-1')).toBeHidden()
+  })
+
+  test('opens the preview lightbox for completed jobs', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.jobHistoryTab
+    await tab.open()
+
+    await tab.jobRow('job-completed-1').dblclick()
+
+    await expect(comfyPage.mediaLightbox.root).toBeVisible()
+  })
+
+  test('clears history from the docked sidebar', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.jobHistoryTab
+    await tab.open()
+
+    await tab.moreOptionsButton.click()
+    await comfyPage.page.getByTestId('clear-history-action').click()
+
+    await expect(comfyPage.confirmDialog.root).toBeVisible()
+    await comfyPage.confirmDialog.root
+      .getByRole('button', { name: 'Clear' })
+      .click()
+
+    await expect(tab.jobRows).toHaveCount(0)
+  })
+
+  test('disables clear queue when there are no queued jobs', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.jobHistoryTab
+    await tab.open()
+
+    await expect(tab.clearQueuedButton).toBeDisabled()
+  })
+})
+
+test.describe('Floating overlay dock to job history', () => {
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(HISTORY_JOBS)
+    await comfyPage.setupSettings({
+      'Comfy.Queue.QPOV2': false
+    })
+    await comfyPage.setup()
+  })
+
+  test('opens the docked job history sidebar from the floating overlay', async ({
+    comfyPage
+  }) => {
+    await openOverlayMenu(comfyPage)
+    await comfyPage.page.getByTestId('docked-job-history-action').click()
+
+    await expect(comfyPage.menu.jobHistoryTab.searchInput).toBeVisible()
+    await expect(
+      comfyPage.menu.jobHistoryTab.jobRow('job-completed-1')
+    ).toBeVisible()
+  })
+})

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -119,6 +119,8 @@
       <div
         v-if="hasSelection"
         ref="footerRef"
+        role="toolbar"
+        :aria-label="$t('mediaAsset.selection.actions')"
         class="flex h-18 w-full items-center justify-between gap-1"
       >
         <div class="flex-1 pl-4">
@@ -144,6 +146,7 @@
             <Button
               v-if="shouldShowDeleteButton"
               size="icon"
+              :aria-label="$t('mediaAsset.selection.deleteSelected')"
               data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
             >
@@ -151,6 +154,7 @@
             </Button>
             <Button
               size="icon"
+              :aria-label="$t('mediaAsset.selection.downloadSelected')"
               data-testid="assets-download-selected"
               @click="handleDownloadSelected"
             >

src/locales/en/main.json

@@ -3085,6 +3085,7 @@
     "selection": {
       "selectedCount": "Assets Selected: {count}",
       "multipleSelectedAssets": "Multiple assets selected",
+      "actions": "Selected asset actions",
       "deselectAll": "Deselect all",
       "downloadSelected": "Download",
       "downloadSelectedAll": "Download all",