test: cover core assets sidebar journeys

browser_tests/fixtures/components/SidebarTab.ts

@@ -281,6 +281,10 @@ export class AssetsSidebarTab extends SidebarTab {
     super(page, 'assets')
   }
 
+  get root() {
+    return this.page.locator('.sidebar-content-container')
+  }
+
   // --- Tab navigation ---
 
   get generatedTab() {
@@ -299,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() {
@@ -336,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() {
@@ -381,6 +409,10 @@ export class AssetsSidebarTab extends SidebarTab {
       .first()
   }
 
+  get deleteSelectionButton() {
+    return this.deleteSelectedButton
+  }
+
   get downloadSelectedButton() {
     return this.page
       .getByTestId('assets-download-selected')
@@ -388,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/helpers/AssetsHelper.ts

@@ -1,22 +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 { JobsListResponse } from '@comfyorg/ingest-types'
+import type { ResultItemType, TaskOutput } from '../../../src/schemas/apiSchema'
 
-import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
+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 {
+  overrides: Partial<JobEntry> & { id: string }
+): JobEntry {
   const now = Date.now()
   return {
     status: 'completed',
     create_time: now,
     execution_start_time: now,
-    execution_end_time: now + 5000,
+    execution_end_time: now + 5_000,
     preview_output: {
       filename: `output_${overrides.id}.png`,
       subfolder: '',
@@ -25,7 +48,6 @@ export function createMockJob(
       mediaType: 'images'
     },
     outputs_count: 1,
-    priority: 0,
     ...overrides
   }
 }
@@ -33,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[] {
+  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_000,
       execution_start_time: now - i * 60_000,
-      execution_end_time: now - i * 60_000 + 5000 + i * 1000,
+      execution_end_time: now - i * 60_000 + (5 + i) * 1_000,
       preview_output: {
         filename: `image_${String(i + 1).padStart(3, '0')}.png`,
         subfolder: '',
@@ -64,142 +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
-
-      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)
-
-      // Response shape matches JobsListResponse from @comfyorg/ingest-types
-      const response = {
-        jobs: visibleJobs,
-        pagination: {
-          offset,
-          limit,
-          total,
-          has_more: offset + visibleJobs.length < total
+    return {
+      jobId,
+      outputs: [
+        {
+          filename,
+          displayName,
+          filePath,
+          contentType,
+          mediaType: 'images'
         }
-      } satisfies {
-        jobs: unknown[]
-        pagination: JobsListResponse['pagination']
-      }
+      ],
+      ...rest
+    }
+  }
 
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(response)
+  importedImage(options: ImportedAssetSeed): ImportedAssetSeed {
+    return { ...options }
+  }
+
+  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
+        }
+      }
+    }
+  }
+
+  async seedAssets({
+    generated = [],
+    imported = []
+  }: {
+    generated?: GeneratedJobSeed[]
+    imported?: ImportedAssetSeed[]
+  }): Promise<void> {
+    this.generatedJobs = [...generated]
+    this.importedFiles = [...imported]
+    this.seededFiles = new Map()
+
+    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(
@@ -208,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/tests/queue/queueOverlay.spec.ts

@@ -1,13 +1,13 @@
 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'
-import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
 
 const now = Date.now()
 
-const MOCK_JOBS: RawJobListItem[] = [
+const MOCK_JOBS: JobEntry[] = [
   createMockJob({
     id: 'job-completed-1',
     status: 'completed',

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()
@@ -676,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()
+  })
+})

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/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: {