docs: weekly documentation accuracy update

browser_tests/fixtures/components/SidebarTab.ts

@@ -1,5 +1,4 @@
 import type { Locator, Page } from '@playwright/test'
-import { expect } from '@playwright/test'
 
 import type { WorkspaceStore } from '../../types/globals'
 import { TestIds } from '../selectors'
@@ -175,8 +174,6 @@ export class AssetsSidebarTab extends SidebarTab {
     super(page, 'assets')
   }
 
-  // --- Tab navigation ---
-
   get generatedTab() {
     return this.page.getByRole('tab', { name: 'Generated' })
   }
@@ -185,8 +182,6 @@ export class AssetsSidebarTab extends SidebarTab {
     return this.page.getByRole('tab', { name: 'Imported' })
   }
 
-  // --- Empty state ---
-
   get emptyStateMessage() {
     return this.page.getByText(
       'Upload files or generate content to see them here'
@@ -197,169 +192,8 @@ export class AssetsSidebarTab extends SidebarTab {
     return this.page.getByText(title)
   }
 
-  // --- Search & filter ---
-
-  get searchInput() {
-    return this.page.getByPlaceholder('Search Assets...')
-  }
-
-  get settingsButton() {
-    return this.page.getByRole('button', { name: 'View settings' })
-  }
-
-  // --- View mode ---
-
-  get listViewOption() {
-    return this.page.getByText('List view')
-  }
-
-  get gridViewOption() {
-    return this.page.getByText('Grid view')
-  }
-
-  // --- Sort options (cloud-only, shown inside settings popover) ---
-
-  get sortNewestFirst() {
-    return this.page.getByText('Newest first')
-  }
-
-  get sortOldestFirst() {
-    return this.page.getByText('Oldest first')
-  }
-
-  // --- Asset cards ---
-
-  get assetCards() {
-    return this.page.locator('[role="button"][data-selected]')
-  }
-
-  getAssetCardByName(name: string) {
-    return this.page.locator('[role="button"][data-selected]', {
-      hasText: name
-    })
-  }
-
-  get selectedCards() {
-    return this.page.locator('[data-selected="true"]')
-  }
-
-  // --- List view items ---
-
-  get listViewItems() {
-    return this.page.locator(
-      '.sidebar-content-container [role="button"][tabindex="0"]'
-    )
-  }
-
-  // --- Selection footer ---
-
-  get selectionFooter() {
-    return this.page
-      .locator('.sidebar-content-container')
-      .locator('..')
-      .locator('[class*="h-18"]')
-  }
-
-  get selectionCountButton() {
-    return this.page.getByText(/Assets Selected: \d+/)
-  }
-
-  get deselectAllButton() {
-    return this.page.getByText('Deselect all')
-  }
-
-  get deleteSelectedButton() {
-    return this.page
-      .getByTestId('assets-delete-selected')
-      .or(this.page.locator('button:has(.icon-\\[lucide--trash-2\\])').last())
-      .first()
-  }
-
-  get downloadSelectedButton() {
-    return this.page
-      .getByTestId('assets-download-selected')
-      .or(this.page.locator('button:has(.icon-\\[lucide--download\\])').last())
-      .first()
-  }
-
-  // --- Context menu ---
-
-  contextMenuItem(label: string) {
-    return this.page.locator('.p-contextmenu').getByText(label)
-  }
-
-  // --- Folder view ---
-
-  get backToAssetsButton() {
-    return this.page.getByText('Back to all assets')
-  }
-
-  // --- Loading ---
-
-  get skeletonLoaders() {
-    return this.page.locator('.sidebar-content-container .animate-pulse')
-  }
-
-  // --- Helpers ---
-
   override async open() {
-    // Remove any toast notifications that may overlay the sidebar button
-    await this.dismissToasts()
     await super.open()
     await this.generatedTab.waitFor({ state: 'visible' })
   }
-
-  /** Dismiss all visible toast notifications by clicking their close buttons. */
-  async dismissToasts() {
-    const closeButtons = this.page.locator('.p-toast-close-button')
-    for (const btn of await closeButtons.all()) {
-      await btn.click({ force: true }).catch(() => {})
-    }
-    // Wait for all toast elements to fully animate out and detach from DOM
-    await expect(this.page.locator('.p-toast-message'))
-      .toHaveCount(0, { timeout: 5000 })
-      .catch(() => {})
-  }
-
-  async switchToImported() {
-    await this.dismissToasts()
-    await this.importedTab.click()
-    await expect(this.importedTab).toHaveAttribute('aria-selected', 'true', {
-      timeout: 3000
-    })
-  }
-
-  async switchToGenerated() {
-    await this.dismissToasts()
-    await this.generatedTab.click()
-    await expect(this.generatedTab).toHaveAttribute('aria-selected', 'true', {
-      timeout: 3000
-    })
-  }
-
-  async openSettingsMenu() {
-    await this.dismissToasts()
-    await this.settingsButton.click()
-    // Wait for popover content to render
-    await this.listViewOption
-      .or(this.gridViewOption)
-      .first()
-      .waitFor({ state: 'visible', timeout: 3000 })
-  }
-
-  async rightClickAsset(name: string) {
-    const card = this.getAssetCardByName(name)
-    await card.click({ button: 'right' })
-    await this.page
-      .locator('.p-contextmenu')
-      .waitFor({ state: 'visible', timeout: 3000 })
-  }
-
-  async waitForAssets(count?: number) {
-    if (count !== undefined) {
-      await expect(this.assetCards).toHaveCount(count, { timeout: 5000 })
-    } else {
-      await this.assetCards.first().waitFor({ state: 'visible', timeout: 5000 })
-    }
-  }
 }

browser_tests/fixtures/helpers/AssetsHelper.ts

@@ -5,63 +5,6 @@ import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/j
 const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
 const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
 
-/** Factory to create a mock completed job with preview output. */
-export function createMockJob(
-  overrides: Partial<RawJobListItem> & { id: string }
-): RawJobListItem {
-  const now = Date.now() / 1000
-  return {
-    status: 'completed',
-    create_time: now,
-    execution_start_time: now,
-    execution_end_time: now + 5,
-    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() / 1000
-  return Array.from({ length: count }, (_, i) =>
-    createMockJob({
-      id: `job-${String(i + 1).padStart(3, '0')}`,
-      create_time: now - i * 60,
-      execution_start_time: now - i * 60,
-      execution_end_time: now - i * 60 + 5 + i,
-      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) {

browser_tests/tests/sidebar/assets.spec.ts

@@ -1,72 +1,8 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-import {
-  createMockJob,
-  createMockJobs
-} from '../../fixtures/helpers/AssetsHelper'
-import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
 
-// ---------------------------------------------------------------------------
-// Shared fixtures
-// ---------------------------------------------------------------------------
-
-const SAMPLE_JOBS: RawJobListItem[] = [
-  createMockJob({
-    id: 'job-alpha',
-    create_time: 1000,
-    execution_start_time: 1000,
-    execution_end_time: 1010,
-    preview_output: {
-      filename: 'landscape.png',
-      subfolder: '',
-      type: 'output',
-      nodeId: '1',
-      mediaType: 'images'
-    },
-    outputs_count: 1
-  }),
-  createMockJob({
-    id: 'job-beta',
-    create_time: 2000,
-    execution_start_time: 2000,
-    execution_end_time: 2003,
-    preview_output: {
-      filename: 'portrait.png',
-      subfolder: '',
-      type: 'output',
-      nodeId: '2',
-      mediaType: 'images'
-    },
-    outputs_count: 1
-  }),
-  createMockJob({
-    id: 'job-gamma',
-    create_time: 3000,
-    execution_start_time: 3000,
-    execution_end_time: 3020,
-    preview_output: {
-      filename: 'abstract_art.png',
-      subfolder: '',
-      type: 'output',
-      nodeId: '3',
-      mediaType: 'images'
-    },
-    outputs_count: 2
-  })
-]
-
-const SAMPLE_IMPORTED_FILES = [
-  'reference_photo.png',
-  'background.jpg',
-  'audio_clip.wav'
-]
-
-// ==========================================================================
-// 1. Empty states
-// ==========================================================================
-
-test.describe('Assets sidebar - empty states', () => {
+test.describe('Assets sidebar', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.assets.mockEmptyState()
     await comfyPage.setup()
@@ -76,587 +12,19 @@ test.describe('Assets sidebar - empty states', () => {
     await comfyPage.assets.clearMocks()
   })
 
-  test('Shows empty-state copy for generated tab', async ({ comfyPage }) => {
+  test('Shows empty-state copy for generated and imported tabs', async ({
+    comfyPage
+  }) => {
     const tab = comfyPage.menu.assetsTab
+
     await tab.open()
 
     await expect(tab.emptyStateTitle('No generated files found')).toBeVisible()
     await expect(tab.emptyStateMessage).toBeVisible()
-  })
 
-  test('Shows empty-state copy for imported tab', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.switchToImported()
+    await tab.importedTab.click()
 
     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()
-
-    await expect(tab.assetCards).toHaveCount(0)
-  })
-})
-
-// ==========================================================================
-// 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)
-    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()
-
-    await expect(tab.generatedTab).toHaveAttribute('aria-selected', 'true')
-    await expect(tab.importedTab).toHaveAttribute('aria-selected', 'false')
-  })
-
-  test('Can switch between Generated and Imported tabs', async ({
-    comfyPage
-  }) => {
-    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')
-  })
-
-  test('Search is cleared when switching tabs', async ({ comfyPage }) => {
-    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)
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
-  test('Displays generated assets as cards in grid view', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-
-    await tab.waitForAssets()
-    const count = await tab.assetCards.count()
-    expect(count).toBeGreaterThanOrEqual(1)
-  })
-
-  test('Displays imported files when switching to Imported tab', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.switchToImported()
-
-    // Wait for imported assets to render
-    await expect(tab.assetCards.first()).toBeVisible({ timeout: 5000 })
-
-    // Imported tab should show the mocked files
-    const count = await tab.assetCards.count()
-    expect(count).toBeGreaterThanOrEqual(1)
-  })
-})
-
-// ==========================================================================
-// 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([])
-    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.listViewItems.first()).toBeVisible({ timeout: 5000 })
-  })
-
-  test('Can switch back to grid view', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    // Switch to list view
-    await tab.openSettingsMenu()
-    await tab.listViewOption.click()
-    await expect(tab.listViewItems.first()).toBeVisible({ timeout: 5000 })
-
-    // Switch back to grid view (settings popover is still open)
-    await tab.gridViewOption.click()
-    await tab.waitForAssets()
-
-    // Grid cards (with data-selected attribute) should be visible again
-    await expect(tab.assetCards.first()).toBeVisible({ timeout: 5000 })
-  })
-})
-
-// ==========================================================================
-// 5. Search functionality
-// ==========================================================================
-
-test.describe('Assets sidebar - search', () => {
-  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('Search input is visible', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-
-    await expect(tab.searchInput).toBeVisible()
-  })
-
-  test('Filtering assets by search query reduces displayed count', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    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
-    await expect(async () => {
-      const filteredCount = await tab.assetCards.count()
-      expect(filteredCount).toBeLessThan(initialCount)
-    }).toPass({ timeout: 5000 })
-  })
-
-  test('Clearing search restores all assets', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    const initialCount = await tab.assetCards.count()
-
-    // Filter then clear
-    await tab.searchInput.fill('landscape')
-    await expect(async () => {
-      expect(await tab.assetCards.count()).toBeLessThan(initialCount)
-    }).toPass({ timeout: 5000 })
-
-    await tab.searchInput.fill('')
-    await expect(tab.assetCards).toHaveCount(initialCount, { timeout: 5000 })
-  })
-
-  test('Search with no matches shows empty state', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    await tab.searchInput.fill('nonexistent_file_xyz')
-    await expect(tab.assetCards).toHaveCount(0, { timeout: 5000 })
-  })
-})
-
-// ==========================================================================
-// 6. Asset selection
-// ==========================================================================
-
-test.describe('Assets sidebar - selection', () => {
-  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('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)
-  })
-
-  test('Ctrl+click adds to selection', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    const cards = tab.assetCards
-    const cardCount = await cards.count()
-    expect(cardCount).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)
-  })
-
-  test('Selection shows footer with count and actions', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    // Select an asset
-    await tab.assetCards.first().click()
-
-    // Footer should show selection count
-    await expect(tab.selectionCountButton).toBeVisible({ timeout: 3000 })
-  })
-
-  test('Deselect all clears selection', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    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({ timeout: 3000 })
-
-    // Click "Deselect all"
-    await tab.deselectAllButton.click()
-    await expect(tab.selectedCards).toHaveCount(0)
-  })
-
-  test('Selection is cleared when switching tabs', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    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([])
-    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({ timeout: 3000 })
-  })
-
-  test('Context menu contains Download action for output asset', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    await tab.assetCards.first().click({ button: 'right' })
-    await comfyPage.page
-      .locator('.p-contextmenu')
-      .waitFor({ state: 'visible', timeout: 3000 })
-
-    await expect(tab.contextMenuItem('Download')).toBeVisible()
-  })
-
-  test('Context menu contains Inspect action for image assets', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    await tab.assetCards.first().click({ button: 'right' })
-    await comfyPage.page
-      .locator('.p-contextmenu')
-      .waitFor({ state: 'visible', timeout: 3000 })
-
-    await expect(tab.contextMenuItem('Inspect asset')).toBeVisible()
-  })
-
-  test('Context menu contains Delete action for output assets', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    await tab.assetCards.first().click({ button: 'right' })
-    await comfyPage.page
-      .locator('.p-contextmenu')
-      .waitFor({ state: 'visible', timeout: 3000 })
-
-    await expect(tab.contextMenuItem('Delete')).toBeVisible()
-  })
-
-  test('Context menu contains Copy job ID for output assets', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    await tab.assetCards.first().click({ button: 'right' })
-    await comfyPage.page
-      .locator('.p-contextmenu')
-      .waitFor({ state: 'visible', timeout: 3000 })
-
-    await expect(tab.contextMenuItem('Copy job ID')).toBeVisible()
-  })
-
-  test('Context menu contains workflow actions for output assets', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    await tab.assetCards.first().click({ button: 'right' })
-
-    const contextMenu = comfyPage.page.locator('.p-contextmenu')
-    await expect(contextMenu).toBeVisible({ timeout: 3000 })
-
-    await expect(
-      tab.contextMenuItem('Open as workflow in new tab')
-    ).toBeVisible()
-    await expect(tab.contextMenuItem('Export workflow')).toBeVisible()
-  })
-
-  test('Bulk context menu shows when multiple assets selected', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    const cards = tab.assetCards
-    const cardCount = await cards.count()
-    expect(cardCount).toBeGreaterThanOrEqual(2)
-
-    // Dismiss any toasts that appeared after asset loading
-    await tab.dismissToasts()
-
-    // Multi-select: click first, then Ctrl/Cmd+click second
-    await cards.first().click()
-    await cards.nth(1).click({ modifiers: ['ControlOrMeta'] })
-
-    // Verify multi-selection took effect and footer is stable before right-clicking
-    await expect(tab.selectedCards).toHaveCount(2, { timeout: 3000 })
-    await expect(tab.selectionFooter).toBeVisible({ timeout: 3000 })
-
-    // Right-click on a selected card (retry to let grid layout settle)
-    const contextMenu = comfyPage.page.locator('.p-contextmenu')
-    await expect(async () => {
-      await cards.first().click({ button: 'right' })
-      await expect(contextMenu).toBeVisible()
-    }).toPass({ intervals: [300], timeout: 5000 })
-
-    // 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([])
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
-  test('Footer shows download button when assets selected', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    await tab.assetCards.first().click()
-
-    // Download button in footer should be visible
-    await expect(tab.downloadSelectedButton).toBeVisible({ timeout: 3000 })
-  })
-
-  test('Footer shows delete button when output assets selected', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    await tab.assetCards.first().click()
-
-    // Delete button in footer should be visible
-    await expect(tab.deleteSelectedButton).toBeVisible({ timeout: 3000 })
-  })
-
-  test('Selection count displays correct number', async ({ comfyPage }) => {
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    // Select two assets
-    const cards = tab.assetCards
-    const cardCount = await cards.count()
-    expect(cardCount).toBeGreaterThanOrEqual(2)
-
-    await cards.first().click()
-    await cards.nth(1).click({ modifiers: ['ControlOrMeta'] })
-
-    // Selection count should show the count
-    await expect(tab.selectionCountButton).toBeVisible({ timeout: 3000 })
-    const text = await tab.selectionCountButton.textContent()
-    expect(text).toMatch(/Assets Selected: \d+/)
-  })
-})
-
-// ==========================================================================
-// 9. Pagination
-// ==========================================================================
-
-test.describe('Assets sidebar - pagination', () => {
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
-  test('Initially loads a batch of assets with has_more pagination', async ({
-    comfyPage
-  }) => {
-    // Create a large set of jobs to trigger pagination
-    const manyJobs = createMockJobs(30)
-    await comfyPage.assets.mockOutputHistory(manyJobs)
-    await comfyPage.setup()
-
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-    await tab.waitForAssets()
-
-    // Should load at least the first batch
-    const count = await tab.assetCards.count()
-    expect(count).toBeGreaterThanOrEqual(1)
-  })
-})
-
-// ==========================================================================
-// 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()
-  })
 })

docs/extensions/core.md

@@ -25,7 +25,7 @@ ComfyUI's extension system follows these key principles:
 
 ## Core Extensions List
 
-The following table lists ALL core extensions in the system as of 2025-01-30:
+The following table lists the main core extensions in the system. Additional extensions may exist for specialized features like cloud integration, badges, and advanced UI features. See `src/extensions/core/` for the complete list.
 
 ### Main Extensions
 

docs/testing/component-testing.md

@@ -2,22 +2,70 @@
 
 This guide covers patterns and examples for testing Vue components in the ComfyUI Frontend codebase.
 
+## Testing Libraries
+
+This project supports two component testing approaches:
+
+- **@testing-library/vue** (Recommended) - User-centric, behavior-focused testing with semantic queries
+- **@vue/test-utils** - Lower-level component API testing
+
+Both are acceptable, but Testing Library is preferred for new tests as it encourages better testing practices.
+
 ## Table of Contents
 
-1. [Basic Component Testing](#basic-component-testing)
-2. [PrimeVue Components Testing](#primevue-components-testing)
-3. [Tooltip Directives](#tooltip-directives)
-4. [Component Events Testing](#component-events-testing)
-5. [User Interaction Testing](#user-interaction-testing)
-6. [Asynchronous Component Testing](#asynchronous-component-testing)
-7. [Working with Vue Reactivity](#working-with-vue-reactivity)
+1. [Basic Component Testing with Testing Library](#basic-component-testing-with-testing-library)
+2. [Basic Component Testing with Vue Test Utils](#basic-component-testing-with-vue-test-utils)
+3. [PrimeVue Components Testing](#primevue-components-testing)
+4. [Tooltip Directives](#tooltip-directives)
+5. [Component Events Testing](#component-events-testing)
+6. [User Interaction Testing](#user-interaction-testing)
+7. [Asynchronous Component Testing](#asynchronous-component-testing)
+8. [Working with Vue Reactivity](#working-with-vue-reactivity)
 
-## Basic Component Testing
+## Basic Component Testing with Testing Library
 
-Basic approach to testing a component's rendering and structure:
+User-centric approach using @testing-library/vue (recommended):
 
 ```typescript
-// Example from: src/components/sidebar/SidebarIcon.spec.ts
+// Example from: src/components/sidebar/SidebarIcon.test.ts
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import SidebarIcon from './SidebarIcon.vue'
+
+describe('SidebarIcon', () => {
+  const exampleProps = {
+    icon: 'pi pi-cog',
+    selected: false,
+    tooltip: 'Settings'
+  }
+
+  it('renders as a button with accessible label', () => {
+    render(SidebarIcon, { props: exampleProps })
+
+    const button = screen.getByRole('button', { name: 'Settings' })
+    expect(button).toBeInTheDocument()
+  })
+
+  it('handles click interactions', async () => {
+    const user = userEvent.setup()
+    const onClick = vi.fn()
+
+    render(SidebarIcon, {
+      props: { ...exampleProps, onClick }
+    })
+
+    await user.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalled()
+  })
+})
+```
+
+## Basic Component Testing with Vue Test Utils
+
+Lower-level API testing approach:
+
+```typescript
+// Alternative approach using @vue/test-utils
 import { mount } from '@vue/test-utils'
 import SidebarIcon from './SidebarIcon.vue'
 

docs/testing/unit-testing.md

@@ -147,9 +147,9 @@ it('should subscribe to logs API', () => {
 })
 ```
 
-## Mocking Lodash Functions
+## Mocking Utility Functions
 
-Mocking utility functions like debounce:
+Mocking utility functions like debounce from es-toolkit:
 
 ```typescript
 // Mock debounce to execute immediately

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -143,16 +143,11 @@
             <Button
               v-if="shouldShowDeleteButton"
               size="icon"
-              data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
             >
               <i class="icon-[lucide--trash-2] size-4" />
             </Button>
-            <Button
-              size="icon"
-              data-testid="assets-download-selected"
-              @click="handleDownloadSelected"
-            >
+            <Button size="icon" @click="handleDownloadSelected">
               <i class="icon-[lucide--download] size-4" />
             </Button>
           </template>
@@ -161,17 +156,12 @@
             <Button
               v-if="shouldShowDeleteButton"
               variant="secondary"
-              data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
             >
               <span>{{ $t('mediaAsset.selection.deleteSelected') }}</span>
               <i class="icon-[lucide--trash-2] size-4" />
             </Button>
-            <Button
-              variant="secondary"
-              data-testid="assets-download-selected"
-              @click="handleDownloadSelected"
-            >
+            <Button variant="secondary" @click="handleDownloadSelected">
               <span>{{ $t('mediaAsset.selection.downloadSelected') }}</span>
               <i class="icon-[lucide--download] size-4" />
             </Button>

src/locales/README.md

@@ -4,14 +4,18 @@ Our project supports multiple languages using `vue-i18n`. This allows users arou
 
 ## Supported Languages
 
+- ar (العربية)
 - en (English)
-- zh (中文)
-- ru (Русский)
+- es (Español)
+- fa (فارسی)
+- fr (Français)
 - ja (日本語)
 - ko (한국어)
-- fr (Français)
-- es (Español)
+- pt-BR (Português Brasileiro)
+- ru (Русский)
 - tr (Türkçe)
+- zh (中文)
+- zh-TW (繁體中文)
 
 ## How to Add a New Language
 

src/renderer/extensions/vueNodes/widgets/components/RichComboWidget.vue

@@ -1,183 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, provide, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import type { FilterOption } from '@/platform/assets/types/filterTypes'
-import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
-import FormDropdown from './form/dropdown/FormDropdown.vue'
-import type { FormDropdownItem, LayoutMode } from './form/dropdown/types'
-import { AssetKindKey } from './form/dropdown/types'
-import {
-  buildSearchText,
-  extractFilterValues,
-  getByPath,
-  mapToDropdownItem
-} from '../utils/resolveItemSchema'
-import { fetchRemoteRoute } from '../utils/resolveRemoteRoute'
-
-const props = defineProps<{
-  modelValue?: string
-  widget: SimplifiedWidget<string | undefined>
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
-
-const { t } = useI18n()
-
-const comboSpec = computed(() => {
-  if (props.widget.spec && isComboInputSpec(props.widget.spec)) {
-    return props.widget.spec
-  }
-  return undefined
-})
-const remoteConfig = computed(() => comboSpec.value?.remote!)
-const itemSchema = computed(() => remoteConfig.value?.item_schema!)
-
-const rawItems = ref<unknown[]>([])
-const loading = ref(false)
-
-async function fetchItems() {
-  loading.value = true
-  try {
-    const res = await fetchRemoteRoute(remoteConfig.value.route, {
-      params: remoteConfig.value.query_params,
-      timeout: remoteConfig.value.timeout ?? 30000
-    })
-    const data = remoteConfig.value.response_key
-      ? res.data[remoteConfig.value.response_key]
-      : res.data
-    rawItems.value = Array.isArray(data) ? data : []
-  } catch (err) {
-    console.error('RichComboWidget: fetch error', err)
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(() => {
-  void fetchItems()
-})
-
-const assetKind = computed(() => {
-  const pt = itemSchema.value.preview_type ?? 'image'
-  return pt as 'image' | 'video' | 'audio'
-})
-
-provide(AssetKindKey, assetKind)
-
-const items = computed<FormDropdownItem[]>(() =>
-  rawItems.value.map((raw) => mapToDropdownItem(raw, itemSchema.value))
-)
-
-const searchIndex = computed(() => {
-  const schema = itemSchema.value
-  const fields = schema.search_fields ?? [schema.label_field]
-  const index = new Map<string, string>()
-  for (const raw of rawItems.value) {
-    const id = String(getByPath(raw, schema.value_field) ?? '')
-    index.set(id, buildSearchText(raw, fields))
-  }
-  return index
-})
-
-const filterOptions = computed<FilterOption[]>(() => {
-  const schema = itemSchema.value
-  if (!schema.filter_field) return []
-  const values = extractFilterValues(rawItems.value, schema.filter_field)
-  return [
-    { name: 'All', value: 'all' },
-    ...values.map((v) => ({ name: v, value: v }))
-  ]
-})
-
-const filterSelected = ref('all')
-const layoutMode = ref<LayoutMode>('list')
-const selectedSet = ref<Set<string>>(new Set())
-
-const filteredItems = computed<FormDropdownItem[]>(() => {
-  const schema = itemSchema.value
-  if (filterSelected.value === 'all' || !schema.filter_field) {
-    return items.value
-  }
-  const filterField = schema.filter_field
-  return rawItems.value
-    .filter(
-      (raw) =>
-        String(getByPath(raw, filterField) ?? '') === filterSelected.value
-    )
-    .map((raw) => mapToDropdownItem(raw, schema))
-})
-
-async function searcher(
-  query: string,
-  searchItems: FormDropdownItem[],
-  _onCleanup: (cleanupFn: () => void) => void
-): Promise<FormDropdownItem[]> {
-  if (!query.trim()) return searchItems
-  const q = query.toLowerCase()
-  return searchItems.filter((item) => {
-    const text = searchIndex.value.get(item.id) ?? item.name.toLowerCase()
-    return text.includes(q)
-  })
-}
-
-watch(
-  [() => props.modelValue, items],
-  ([val]) => {
-    selectedSet.value.clear()
-    if (val) {
-      const item = items.value.find((i) => i.id === val)
-      if (item) selectedSet.value.add(item.id)
-    }
-  },
-  { immediate: true }
-)
-
-function handleRefresh() {
-  void fetchItems()
-}
-
-function handleSelection(selected: Set<string>) {
-  const id = selected.values().next().value
-  if (id) {
-    emit('update:modelValue', id)
-  }
-}
-</script>
-
-<template>
-  <div class="flex w-full items-center gap-1">
-    <FormDropdown
-      v-model:selected="selectedSet"
-      v-model:filter-selected="filterSelected"
-      v-model:layout-mode="layoutMode"
-      :items="filteredItems"
-      :placeholder="loading ? 'Loading...' : t('widgets.uploadSelect.placeholder')"
-      :multiple="false"
-      :filter-options="[]"
-      :show-sort="false"
-      :show-layout-switcher="false"
-      :searcher="searcher"
-      class="flex-1"
-      @update:selected="handleSelection"
-    />
-    <button
-      v-if="remoteConfig?.refresh_button !== false"
-      class="flex size-7 shrink-0 items-center justify-center rounded text-secondary hover:bg-component-node-widget-background-hovered"
-      title="Refresh"
-      @pointerdown.stop
-      @click.stop="handleRefresh"
-    >
-      <i
-        :class="[
-          'icon-[lucide--refresh-cw] size-3.5',
-          loading && 'animate-spin'
-        ]"
-      />
-    </button>
-  </div>
-</template>

src/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue

@@ -1,11 +1,6 @@
 <template>
-  <RichComboWidget
-    v-if="hasItemSchema"
-    v-model="modelValue"
-    :widget
-  />
   <WidgetSelectDropdown
-    v-else-if="isDropdownUIWidget"
+    v-if="isDropdownUIWidget"
     v-model="modelValue"
     :widget
     :node-type="widget.nodeType ?? nodeType"
@@ -29,7 +24,6 @@
 import { computed } from 'vue'
 
 import { assetService } from '@/platform/assets/services/assetService'
-import RichComboWidget from '@/renderer/extensions/vueNodes/widgets/components/RichComboWidget.vue'
 import WidgetSelectDefault from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue'
 import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'
 import WidgetWithControl from '@/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue'
@@ -59,10 +53,6 @@ const comboSpec = computed<ComboInputSpec | undefined>(() => {
   return undefined
 })
 
-const hasItemSchema = computed(
-  () => !!comboSpec.value?.remote?.item_schema
-)
-
 const specDescriptor = computed<{
   kind: AssetKind
   allowUpload: boolean

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -34,8 +34,6 @@ interface Props {
   accept?: string
   filterOptions?: FilterOption[]
   sortOptions?: SortOption[]
-  showSort?: boolean
-  showLayoutSwitcher?: boolean
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -63,8 +61,6 @@ const {
   accept,
   filterOptions = [],
   sortOptions = getDefaultSortOptions(),
-  showSort = true,
-  showLayoutSwitcher = true,
   showOwnershipFilter,
   ownershipOptions,
   showBaseModelFilter,
@@ -236,8 +232,6 @@ function handleSelection(item: FormDropdownItem, index: number) {
         v-model:base-model-selected="baseModelSelected"
         :filter-options
         :sort-options
-        :show-sort
-        :show-layout-switcher="showLayoutSwitcher"
         :show-ownership-filter
         :ownership-options
         :show-base-model-filter

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -20,8 +20,6 @@ interface Props {
   isSelected: (item: FormDropdownItem, index: number) => boolean
   filterOptions: FilterOption[]
   sortOptions: SortOption[]
-  showSort?: boolean
-  showLayoutSwitcher?: boolean
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -33,8 +31,6 @@ const {
   isSelected,
   filterOptions,
   sortOptions,
-  showSort = true,
-  showLayoutSwitcher = true,
   showOwnershipFilter,
   ownershipOptions,
   showBaseModelFilter,
@@ -116,8 +112,6 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
       v-model:ownership-selected="ownershipSelected"
       v-model:base-model-selected="baseModelSelected"
       :sort-options
-      :show-sort
-      :show-layout-switcher="showLayoutSwitcher"
       :show-ownership-filter
       :ownership-options
       :show-base-model-filter
@@ -151,7 +145,6 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
           :preview-url="item.preview_url ?? ''"
           :name="item.name"
           :label="item.label"
-          :description="item.description"
           :layout="layoutMode"
           @click="emit('item-click', item, index)"
         />

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue

@@ -18,13 +18,8 @@ import type { LayoutMode, SortOption } from './types'
 const { t } = useI18n()
 const overlayProps = useTransformCompatOverlayProps()
 
-const {
-  showSort = true,
-  showLayoutSwitcher = true
-} = defineProps<{
+defineProps<{
   sortOptions: SortOption[]
-  showSort?: boolean
-  showLayoutSwitcher?: boolean
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -119,7 +114,6 @@ function toggleBaseModelSelection(item: FilterOption) {
     />
 
     <Button
-      v-if="showSort"
       ref="sortTriggerRef"
       variant="textonly"
       size="icon"
@@ -138,7 +132,6 @@ function toggleBaseModelSelection(item: FilterOption) {
       <i class="icon-[lucide--arrow-up-down] size-4" />
     </Button>
     <Popover
-      v-if="showSort"
       ref="sortPopoverRef"
       :dismissable="true"
       :close-on-escape="true"
@@ -316,7 +309,6 @@ function toggleBaseModelSelection(item: FilterOption) {
     </Popover>
 
     <div
-      v-if="showLayoutSwitcher"
       :class="
         cn(
           actionButtonStyle,

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -12,7 +12,6 @@ interface Props {
   previewUrl: string
   name: string
   label?: string
-  description?: string
   layout?: LayoutMode
 }
 
@@ -28,31 +27,11 @@ const actualDimensions = ref<string | null>(null)
 const assetKind = inject(AssetKindKey)
 
 const isVideo = computed(() => assetKind?.value === 'video')
-const isAudio = computed(() => assetKind?.value === 'audio')
-
-const audioRef = ref<HTMLAudioElement | null>(null)
-const isPlayingAudio = ref(false)
 
 function handleClick() {
   emit('click', props.index)
 }
 
-function toggleAudioPreview(event: Event) {
-  event.stopPropagation()
-  if (!audioRef.value) return
-  if (isPlayingAudio.value) {
-    audioRef.value.pause()
-    isPlayingAudio.value = false
-  } else {
-    void audioRef.value.play()
-    isPlayingAudio.value = true
-  }
-}
-
-function handleAudioEnded() {
-  isPlayingAudio.value = false
-}
-
 function handleImageLoad(event: Event) {
   emit('mediaLoad', event)
   if (!event.target || !(event.target instanceof HTMLImageElement)) return
@@ -128,25 +107,6 @@ function handleVideoLoad(event: Event) {
         muted
         @loadeddata="handleVideoLoad"
       />
-      <div
-        v-else-if="previewUrl && isAudio"
-        class="flex size-full cursor-pointer items-center justify-center bg-gradient-to-tr from-violet-500 via-purple-500 to-fuchsia-400"
-        @click.stop="toggleAudioPreview"
-      >
-        <audio
-          ref="audioRef"
-          :src="previewUrl"
-          preload="none"
-          @ended="handleAudioEnded"
-        />
-        <i
-          :class="
-            isPlayingAudio
-              ? 'icon-[lucide--pause] size-5 text-white'
-              : 'icon-[lucide--play] size-5 text-white'
-          "
-        />
-      </div>
       <img
         v-else-if="previewUrl"
         :src="previewUrl"
@@ -184,13 +144,6 @@ function handleVideoLoad(event: Event) {
       >
         {{ label ?? name }}
       </span>
-      <!-- Description -->
-      <span
-        v-if="description && layout !== 'grid'"
-        class="text-secondary line-clamp-1 block overflow-hidden text-xs"
-      >
-        {{ description }}
-      </span>
       <!-- Meta Data -->
       <span v-if="actualDimensions" class="text-secondary block text-xs">
         {{ actualDimensions }}

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/types.ts

@@ -12,9 +12,7 @@ export interface FormDropdownItem {
   name: string
   /** Original/alternate label (e.g., original filename) */
   label?: string
-  /** Short description shown below the name in list view */
-  description?: string
-  /** Preview image/video/audio URL */
+  /** Preview image/video URL */
   preview_url?: string
   /** Whether the item is immutable (public model) - used for ownership filtering */
   is_immutable?: boolean

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

@@ -214,9 +214,7 @@ const addComboWidget = (
     }
   )
 
-  if (inputSpec.remote && !inputSpec.remote.item_schema) {
-    // Skip useRemoteWidget when item_schema is present —
-    // RichComboWidget handles its own data fetching and rendering.
+  if (inputSpec.remote) {
     if (!isComboWidget(widget)) {
       throw new Error(`Expected combo widget but received ${widget.type}`)
     }

src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts

@@ -2,12 +2,10 @@ import axios from 'axios'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { IWidget, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { isCloud } from '@/platform/distribution/types'
 import type { RemoteWidgetConfig } from '@/schemas/nodeDefSchema'
 import { api } from '@/scripts/api'
-import {
-  getRemoteAuthHeaders,
-  resolveRoute
-} from '../utils/resolveRemoteRoute'
+import { useAuthStore } from '@/stores/authStore'
 
 const MAX_RETRIES = 5
 const TIMEOUT = 4096
@@ -23,6 +21,17 @@ interface CacheEntry<T> {
   failed?: boolean
 }
 
+async function getAuthHeaders() {
+  if (isCloud) {
+    const authStore = useAuthStore()
+    const authHeader = await authStore.getAuthHeader()
+    return {
+      ...(authHeader && { headers: authHeader })
+    }
+  }
+  return {}
+}
+
 const dataCache = new Map<string, CacheEntry<unknown>>()
 
 const createCacheKey = (config: RemoteWidgetConfig): string => {
@@ -64,10 +73,9 @@ const fetchData = async (
 ) => {
   const { route, response_key, query_params, timeout = TIMEOUT } = config
 
-  const url = resolveRoute(route)
-  const authHeaders = await getRemoteAuthHeaders(route)
+  const authHeaders = await getAuthHeaders()
 
-  const res = await axios.get(url, {
+  const res = await axios.get(route, {
     params: query_params,
     signal: controller.signal,
     timeout,

src/renderer/extensions/vueNodes/widgets/utils/resolveItemSchema.ts

@@ -1,70 +0,0 @@
-import type { RemoteItemSchema } from '@/schemas/nodeDefSchema'
-import type { FormDropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
-
-/** Traverse an object by dot-path, treating numeric segments as array indices */
-export function getByPath(obj: unknown, path: string): unknown {
-  return path.split('.').reduce((acc: unknown, key: string) => {
-    if (acc == null) return undefined
-    const idx = Number(key)
-    if (Number.isInteger(idx) && idx >= 0 && Array.isArray(acc)) return acc[idx]
-    return (acc as Record<string, unknown>)[key]
-  }, obj)
-}
-
-/** Resolve a label — either dot-path or template with {field.path} placeholders */
-export function resolveLabel(template: string, item: unknown): string {
-  if (!template.includes('{')) {
-    return String(getByPath(item, template) ?? '')
-  }
-  return template.replace(/\{([^}]+)\}/g, (_, path: string) =>
-    String(getByPath(item, path) ?? '')
-  )
-}
-
-/** Map a raw API object to a FormDropdownItem using the item_schema */
-export function mapToDropdownItem(
-  raw: unknown,
-  schema: RemoteItemSchema
-): FormDropdownItem {
-  return {
-    id: String(getByPath(raw, schema.value_field) ?? ''),
-    name: resolveLabel(schema.label_field, raw),
-    description: schema.description_field
-      ? resolveLabel(schema.description_field, raw)
-      : undefined,
-    preview_url: schema.preview_url_field
-      ? String(getByPath(raw, schema.preview_url_field) ?? '')
-      : undefined
-  }
-}
-
-/** Extract items array from full API response using response_key */
-export function extractItems(
-  response: unknown,
-  responseKey?: string
-): unknown[] {
-  const data = responseKey ? getByPath(response, responseKey) : response
-  return Array.isArray(data) ? data : []
-}
-
-/** Build search text for an item from the specified search fields */
-export function buildSearchText(raw: unknown, searchFields: string[]): string {
-  return searchFields
-    .map((field) => String(getByPath(raw, field) ?? ''))
-    .filter(Boolean)
-    .join(' ')
-    .toLowerCase()
-}
-
-/** Extract unique filter values from items */
-export function extractFilterValues(
-  items: unknown[],
-  filterField: string
-): string[] {
-  const values = new Set<string>()
-  for (const item of items) {
-    const value = getByPath(item, filterField)
-    if (value != null) values.add(String(value))
-  }
-  return Array.from(values).sort()
-}

src/renderer/extensions/vueNodes/widgets/utils/resolveRemoteRoute.ts

@@ -1,58 +0,0 @@
-import axios from 'axios'
-
-import { getComfyApiBaseUrl } from '@/config/comfyApi'
-import { useAuthStore } from '@/stores/authStore'
-
-/**
- * Check if a route is a comfy-api proxy route.
- * These routes need the comfy-api base URL prepended and always require auth.
- */
-function isProxyRoute(route: string): boolean {
-  return route.startsWith('/proxy/')
-}
-
-/**
- * Resolve a RemoteOptions route to a full URL.
- * - "/proxy/..." routes → prepend getComfyApiBaseUrl()
- * - Everything else → use as-is
- */
-export function resolveRoute(route: string): string {
-  if (isProxyRoute(route)) {
-    return getComfyApiBaseUrl() + route
-  }
-  return route
-}
-
-/**
- * Get auth headers for a remote request.
- * - "/proxy/..." routes → ALWAYS inject auth (comfy-api requires it)
- * - Other routes → only inject auth in cloud mode
- */
-export async function getRemoteAuthHeaders(
-  route: string
-): Promise<Record<string, any>> {
-  if (isProxyRoute(route)) {
-    const authStore = useAuthStore()
-    const authHeader = await authStore.getAuthHeader()
-    if (authHeader) {
-      return { headers: authHeader }
-    }
-  }
-  return {}
-}
-
-/**
- * Convenience: make an authenticated GET request to a remote route.
- */
-export async function fetchRemoteRoute(
-  route: string,
-  options: {
-    params?: Record<string, string>
-    timeout?: number
-    signal?: AbortSignal
-  } = {}
-) {
-  const url = resolveRoute(route)
-  const authHeaders = await getRemoteAuthHeaders(route)
-  return axios.get(url, { ...options, ...authHeaders })
-}

src/schemas/nodeDefSchema.ts

@@ -5,16 +5,6 @@ import { resultItemType } from '@/schemas/apiSchema'
 import { CONTROL_OPTIONS } from '@/types/simplifiedWidget'
 
 const zComboOption = z.union([z.string(), z.number()])
-const zRemoteItemSchema = z.object({
-  value_field: z.string(),
-  label_field: z.string(),
-  preview_url_field: z.string().optional(),
-  preview_type: z.enum(['image', 'video', 'audio']).default('image'),
-  description_field: z.string().optional(),
-  search_fields: z.array(z.string()).optional(),
-  filter_field: z.string().optional()
-})
-
 const zRemoteWidgetConfig = z.object({
   route: z.string().url().or(z.string().startsWith('/')),
   refresh: z.number().gte(128).safe().or(z.number().lte(0).safe()).optional(),
@@ -23,8 +13,7 @@ const zRemoteWidgetConfig = z.object({
   refresh_button: z.boolean().optional(),
   control_after_refresh: z.enum(['first', 'last']).optional(),
   timeout: z.number().gte(0).optional(),
-  max_retries: z.number().gte(0).optional(),
-  item_schema: zRemoteItemSchema.optional()
+  max_retries: z.number().gte(0).optional()
 })
 const zMultiSelectOption = z.object({
   placeholder: z.string().optional(),
@@ -365,7 +354,6 @@ export const zMatchTypeOptions = z.object({
 export type ComfyInputsSpec = z.infer<typeof zComfyInputsSpec>
 export type ComfyOutputTypesSpec = z.infer<typeof zComfyOutputTypesSpec>
 export type ComfyNodeDef = z.infer<typeof zComfyNodeDef>
-export type RemoteItemSchema = z.infer<typeof zRemoteItemSchema>
 export type RemoteWidgetConfig = z.infer<typeof zRemoteWidgetConfig>
 
 export type ComboInputOptions = z.infer<typeof zComboInputOptions>