dev: new flag useComfyApi for auth [ci skip]

.github/workflows/ci-tests-unit.yaml

@@ -31,5 +31,4 @@ jobs:
         uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
         with:
           files: coverage/lcov.info
-          token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: false

browser_tests/assets/subgraphs/basic-subgraph-zero-uuid.json

@@ -1,197 +0,0 @@
-{
-  "id": "00000000-0000-0000-0000-000000000000",
-  "revision": 0,
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 2,
-      "type": "e5fb1765-9323-4548-801a-5aead34d879e",
-      "pos": [627.5973510742188, 423.0972900390625],
-      "size": [144.15234375, 46],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "positive",
-          "type": "CONDITIONING",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": null
-        }
-      ],
-      "properties": {},
-      "widgets_values": []
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "definitions": {
-    "subgraphs": [
-      {
-        "id": "e5fb1765-9323-4548-801a-5aead34d879e",
-        "version": 1,
-        "state": {
-          "lastGroupId": 0,
-          "lastNodeId": 2,
-          "lastLinkId": 4,
-          "lastRerouteId": 0
-        },
-        "revision": 0,
-        "config": {},
-        "name": "New Subgraph",
-        "inputNode": {
-          "id": -10,
-          "bounding": [347.90441582814213, 417.3822440655296, 120, 60]
-        },
-        "outputNode": {
-          "id": -20,
-          "bounding": [892.5973510742188, 416.0972900390625, 120, 60]
-        },
-        "inputs": [
-          {
-            "id": "c5cc99d8-a2b6-4bf3-8be7-d4949ef736cd",
-            "name": "positive",
-            "type": "CONDITIONING",
-            "linkIds": [1],
-            "pos": {
-              "0": 447.9044189453125,
-              "1": 437.3822326660156
-            }
-          }
-        ],
-        "outputs": [
-          {
-            "id": "9bd488b9-e907-4c95-a7a4-85c5597a87af",
-            "name": "LATENT",
-            "type": "LATENT",
-            "linkIds": [2],
-            "pos": {
-              "0": 912.5973510742188,
-              "1": 436.0972900390625
-            }
-          }
-        ],
-        "widgets": [],
-        "nodes": [
-          {
-            "id": 1,
-            "type": "KSampler",
-            "pos": [554.8743286132812, 100.95539093017578],
-            "size": [270, 262],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "model",
-                "name": "model",
-                "type": "MODEL",
-                "link": null
-              },
-              {
-                "localized_name": "positive",
-                "name": "positive",
-                "type": "CONDITIONING",
-                "link": 1
-              },
-              {
-                "localized_name": "negative",
-                "name": "negative",
-                "type": "CONDITIONING",
-                "link": null
-              },
-              {
-                "localized_name": "latent_image",
-                "name": "latent_image",
-                "type": "LATENT",
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [2]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "KSampler"
-            },
-            "widgets_values": [0, "randomize", 20, 8, "euler", "simple", 1]
-          },
-          {
-            "id": 2,
-            "type": "VAEEncode",
-            "pos": [685.1265869140625, 439.1734619140625],
-            "size": [140, 46],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "localized_name": "pixels",
-                "name": "pixels",
-                "type": "IMAGE",
-                "link": null
-              },
-              {
-                "localized_name": "vae",
-                "name": "vae",
-                "type": "VAE",
-                "link": null
-              }
-            ],
-            "outputs": [
-              {
-                "localized_name": "LATENT",
-                "name": "LATENT",
-                "type": "LATENT",
-                "links": [4]
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "VAEEncode"
-            }
-          }
-        ],
-        "groups": [],
-        "links": [
-          {
-            "id": 1,
-            "origin_id": -10,
-            "origin_slot": 0,
-            "target_id": 1,
-            "target_slot": 1,
-            "type": "CONDITIONING"
-          },
-          {
-            "id": 2,
-            "origin_id": 1,
-            "origin_slot": 0,
-            "target_id": -20,
-            "target_slot": 0,
-            "type": "LATENT"
-          }
-        ],
-        "extra": {}
-      }
-    ]
-  },
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 0.8894351682943402,
-      "offset": [58.7671207025881, 137.7124650620126]
-    },
-    "frontendVersion": "1.24.1"
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -29,8 +29,6 @@ import {
 } from '@e2e/fixtures/components/SidebarTab'
 import { Topbar } from '@e2e/fixtures/components/Topbar'
 import { AppModeHelper } from '@e2e/fixtures/helpers/AppModeHelper'
-import type { AssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
-import { createAssetHelper } from '@e2e/fixtures/helpers/AssetHelper'
 import { AssetsHelper } from '@e2e/fixtures/helpers/AssetsHelper'
 import { CanvasHelper } from '@e2e/fixtures/helpers/CanvasHelper'
 import { ClipboardHelper } from '@e2e/fixtures/helpers/ClipboardHelper'
@@ -179,7 +177,6 @@ export class ComfyPage {
   public readonly queuePanel: QueuePanel
   public readonly perf: PerformanceHelper
   public readonly assets: AssetsHelper
-  public readonly assetApi: AssetHelper
   public readonly modelLibrary: ModelLibraryHelper
 
   /** Worker index to test user ID */
@@ -230,7 +227,6 @@ export class ComfyPage {
     this.queuePanel = new QueuePanel(page)
     this.perf = new PerformanceHelper(page)
     this.assets = new AssetsHelper(page)
-    this.assetApi = createAssetHelper(page)
     this.modelLibrary = new ModelLibraryHelper(page)
   }
 
@@ -452,7 +448,6 @@ export const comfyPageFixture = base.extend<{
 
     await use(comfyPage)
 
-    await comfyPage.assetApi.clearMocks()
     if (needsPerf) await comfyPage.perf.dispose()
   },
   comfyMouse: async ({ comfyPage }, use) => {

browser_tests/fixtures/components/ContextMenu.ts

@@ -20,10 +20,6 @@ export class ContextMenu {
     await this.page.getByRole('menuitem', { name }).click()
   }
 
-  async clickMenuItemExact(name: string): Promise<void> {
-    await this.page.getByRole('menuitem', { name, exact: true }).click()
-  }
-
   async clickLitegraphMenuItem(name: string): Promise<void> {
     await this.page.locator(`.litemenu-entry:has-text("${name}")`).click()
   }
@@ -52,18 +48,6 @@ export class ContextMenu {
     return this
   }
 
-  /**
-   * Select a Vue node by clicking its header, then right-click to open
-   * the context menu. Vue nodes require a selection click before the
-   * right-click so the correct per-node menu items appear.
-   */
-  async openForVueNode(header: Locator): Promise<this> {
-    await header.click()
-    await header.click({ button: 'right' })
-    await this.primeVueMenu.waitFor({ state: 'visible' })
-    return this
-  }
-
   async waitForHidden(): Promise<void> {
     const waitIfExists = async (locator: Locator, menuName: string) => {
       const count = await locator.count()

browser_tests/fixtures/data/assetFixtures.ts

@@ -1,306 +0,0 @@
-import type { Asset } from '@comfyorg/ingest-types'
-function createModelAsset(overrides: Partial<Asset> = {}): Asset {
-  return {
-    id: 'test-model-001',
-    name: 'model.safetensors',
-    asset_hash:
-      'blake3:0000000000000000000000000000000000000000000000000000000000000000',
-    size: 2_147_483_648,
-    mime_type: 'application/octet-stream',
-    tags: ['models', 'checkpoints'],
-    created_at: '2025-01-15T10:00:00Z',
-    updated_at: '2025-01-15T10:00:00Z',
-    last_access_time: '2025-01-15T10:00:00Z',
-    user_metadata: { base_model: 'sd15' },
-    ...overrides
-  }
-}
-
-function createInputAsset(overrides: Partial<Asset> = {}): Asset {
-  return {
-    id: 'test-input-001',
-    name: 'input.png',
-    asset_hash:
-      'blake3:1111111111111111111111111111111111111111111111111111111111111111',
-    size: 2_048_576,
-    mime_type: 'image/png',
-    tags: ['input'],
-    created_at: '2025-03-01T09:00:00Z',
-    updated_at: '2025-03-01T09:00:00Z',
-    last_access_time: '2025-03-01T09:00:00Z',
-    ...overrides
-  }
-}
-
-function createOutputAsset(overrides: Partial<Asset> = {}): Asset {
-  return {
-    id: 'test-output-001',
-    name: 'output_00001.png',
-    asset_hash:
-      'blake3:2222222222222222222222222222222222222222222222222222222222222222',
-    size: 4_194_304,
-    mime_type: 'image/png',
-    tags: ['output'],
-    created_at: '2025-03-10T12:00:00Z',
-    updated_at: '2025-03-10T12:00:00Z',
-    last_access_time: '2025-03-10T12:00:00Z',
-    ...overrides
-  }
-}
-export const STABLE_CHECKPOINT: Asset = createModelAsset({
-  id: 'test-checkpoint-001',
-  name: 'sd_xl_base_1.0.safetensors',
-  size: 6_938_078_208,
-  tags: ['models', 'checkpoints'],
-  user_metadata: {
-    base_model: 'sdxl',
-    description: 'Stable Diffusion XL Base 1.0'
-  },
-  created_at: '2025-01-15T10:30:00Z',
-  updated_at: '2025-01-15T10:30:00Z'
-})
-
-export const STABLE_CHECKPOINT_2: Asset = createModelAsset({
-  id: 'test-checkpoint-002',
-  name: 'v1-5-pruned-emaonly.safetensors',
-  size: 4_265_146_304,
-  tags: ['models', 'checkpoints'],
-  user_metadata: {
-    base_model: 'sd15',
-    description: 'Stable Diffusion 1.5 Pruned EMA-Only'
-  },
-  created_at: '2025-01-20T08:00:00Z',
-  updated_at: '2025-01-20T08:00:00Z'
-})
-
-export const STABLE_LORA: Asset = createModelAsset({
-  id: 'test-lora-001',
-  name: 'detail_enhancer_v1.2.safetensors',
-  size: 184_549_376,
-  tags: ['models', 'loras'],
-  user_metadata: {
-    base_model: 'sdxl',
-    description: 'Detail Enhancement LoRA'
-  },
-  created_at: '2025-02-20T14:00:00Z',
-  updated_at: '2025-02-20T14:00:00Z'
-})
-
-export const STABLE_LORA_2: Asset = createModelAsset({
-  id: 'test-lora-002',
-  name: 'add_detail_v2.safetensors',
-  size: 226_492_416,
-  tags: ['models', 'loras'],
-  user_metadata: {
-    base_model: 'sd15',
-    description: 'Add Detail LoRA v2'
-  },
-  created_at: '2025-02-25T11:00:00Z',
-  updated_at: '2025-02-25T11:00:00Z'
-})
-
-export const STABLE_VAE: Asset = createModelAsset({
-  id: 'test-vae-001',
-  name: 'sdxl_vae.safetensors',
-  size: 334_641_152,
-  tags: ['models', 'vae'],
-  user_metadata: {
-    base_model: 'sdxl',
-    description: 'SDXL VAE'
-  },
-  created_at: '2025-01-18T16:00:00Z',
-  updated_at: '2025-01-18T16:00:00Z'
-})
-
-export const STABLE_EMBEDDING: Asset = createModelAsset({
-  id: 'test-embedding-001',
-  name: 'bad_prompt_v2.pt',
-  size: 32_768,
-  mime_type: 'application/x-pytorch',
-  tags: ['models', 'embeddings'],
-  user_metadata: {
-    base_model: 'sd15',
-    description: 'Negative Embedding: Bad Prompt v2'
-  },
-  created_at: '2025-02-01T09:30:00Z',
-  updated_at: '2025-02-01T09:30:00Z'
-})
-
-export const STABLE_INPUT_IMAGE: Asset = createInputAsset({
-  id: 'test-input-001',
-  name: 'reference_photo.png',
-  size: 2_048_576,
-  mime_type: 'image/png',
-  tags: ['input'],
-  created_at: '2025-03-01T09:00:00Z',
-  updated_at: '2025-03-01T09:00:00Z'
-})
-
-export const STABLE_INPUT_IMAGE_2: Asset = createInputAsset({
-  id: 'test-input-002',
-  name: 'mask_layer.png',
-  size: 1_048_576,
-  mime_type: 'image/png',
-  tags: ['input'],
-  created_at: '2025-03-05T10:00:00Z',
-  updated_at: '2025-03-05T10:00:00Z'
-})
-
-export const STABLE_INPUT_VIDEO: Asset = createInputAsset({
-  id: 'test-input-003',
-  name: 'clip_720p.mp4',
-  size: 15_728_640,
-  mime_type: 'video/mp4',
-  tags: ['input'],
-  created_at: '2025-03-08T14:30:00Z',
-  updated_at: '2025-03-08T14:30:00Z'
-})
-
-export const STABLE_OUTPUT: Asset = createOutputAsset({
-  id: 'test-output-001',
-  name: 'ComfyUI_00001_.png',
-  size: 4_194_304,
-  mime_type: 'image/png',
-  tags: ['output'],
-  created_at: '2025-03-10T12:00:00Z',
-  updated_at: '2025-03-10T12:00:00Z'
-})
-
-export const STABLE_OUTPUT_2: Asset = createOutputAsset({
-  id: 'test-output-002',
-  name: 'ComfyUI_00002_.png',
-  size: 3_670_016,
-  mime_type: 'image/png',
-  tags: ['output'],
-  created_at: '2025-03-10T12:05:00Z',
-  updated_at: '2025-03-10T12:05:00Z'
-})
-export const ALL_MODEL_FIXTURES: Asset[] = [
-  STABLE_CHECKPOINT,
-  STABLE_CHECKPOINT_2,
-  STABLE_LORA,
-  STABLE_LORA_2,
-  STABLE_VAE,
-  STABLE_EMBEDDING
-]
-
-export const ALL_INPUT_FIXTURES: Asset[] = [
-  STABLE_INPUT_IMAGE,
-  STABLE_INPUT_IMAGE_2,
-  STABLE_INPUT_VIDEO
-]
-
-export const ALL_OUTPUT_FIXTURES: Asset[] = [STABLE_OUTPUT, STABLE_OUTPUT_2]
-const CHECKPOINT_NAMES = [
-  'sd_xl_base_1.0.safetensors',
-  'v1-5-pruned-emaonly.safetensors',
-  'sd_xl_refiner_1.0.safetensors',
-  'dreamshaper_8.safetensors',
-  'realisticVision_v51.safetensors',
-  'deliberate_v3.safetensors',
-  'anything_v5.safetensors',
-  'counterfeit_v3.safetensors',
-  'revAnimated_v122.safetensors',
-  'majicmixRealistic_v7.safetensors'
-]
-
-const LORA_NAMES = [
-  'detail_enhancer_v1.2.safetensors',
-  'add_detail_v2.safetensors',
-  'epi_noiseoffset_v2.safetensors',
-  'lcm_lora_sdxl.safetensors',
-  'film_grain_v1.safetensors',
-  'sharpness_fix_v2.safetensors',
-  'better_hands_v1.safetensors',
-  'smooth_skin_v3.safetensors',
-  'color_pop_v1.safetensors',
-  'bokeh_effect_v2.safetensors'
-]
-
-const INPUT_NAMES = [
-  'reference_photo.png',
-  'mask_layer.png',
-  'clip_720p.mp4',
-  'depth_map.png',
-  'control_pose.png',
-  'sketch_input.jpg',
-  'inpainting_mask.png',
-  'style_reference.png',
-  'batch_001.png',
-  'batch_002.png'
-]
-
-const EXTENSION_MIME_MAP: Record<string, string> = {
-  png: 'image/png',
-  jpg: 'image/jpeg',
-  jpeg: 'image/jpeg',
-  mp4: 'video/mp4',
-  webm: 'video/webm',
-  mov: 'video/quicktime',
-  mp3: 'audio/mpeg',
-  wav: 'audio/wav',
-  ogg: 'audio/ogg',
-  flac: 'audio/flac'
-}
-
-function getMimeType(filename: string): string {
-  const ext = filename.split('.').pop()?.toLowerCase() ?? ''
-  return EXTENSION_MIME_MAP[ext] ?? 'application/octet-stream'
-}
-
-/**
- * Generate N deterministic model assets of a given category.
- * Uses sequential IDs and fixed names for screenshot stability.
- */
-export function generateModels(
-  count: number,
-  category: 'checkpoints' | 'loras' | 'vae' | 'embeddings' = 'checkpoints'
-): Asset[] {
-  const names = category === 'loras' ? LORA_NAMES : CHECKPOINT_NAMES
-  return Array.from({ length: Math.min(count, names.length) }, (_, i) =>
-    createModelAsset({
-      id: `gen-${category}-${String(i + 1).padStart(3, '0')}`,
-      name: names[i % names.length],
-      size: 2_000_000_000 + i * 500_000_000,
-      tags: ['models', category],
-      user_metadata: { base_model: i % 2 === 0 ? 'sdxl' : 'sd15' },
-      created_at: `2025-01-${String(15 + i).padStart(2, '0')}T10:00:00Z`,
-      updated_at: `2025-01-${String(15 + i).padStart(2, '0')}T10:00:00Z`
-    })
-  )
-}
-
-/**
- * Generate N deterministic input file assets.
- */
-export function generateInputFiles(count: number): Asset[] {
-  return Array.from({ length: Math.min(count, INPUT_NAMES.length) }, (_, i) => {
-    const name = INPUT_NAMES[i % INPUT_NAMES.length]
-    return createInputAsset({
-      id: `gen-input-${String(i + 1).padStart(3, '0')}`,
-      name,
-      size: 1_000_000 + i * 500_000,
-      mime_type: getMimeType(name),
-      tags: ['input'],
-      created_at: `2025-03-${String(1 + i).padStart(2, '0')}T09:00:00Z`,
-      updated_at: `2025-03-${String(1 + i).padStart(2, '0')}T09:00:00Z`
-    })
-  })
-}
-
-/**
- * Generate N deterministic output assets.
- */
-export function generateOutputAssets(count: number): Asset[] {
-  return Array.from({ length: count }, (_, i) =>
-    createOutputAsset({
-      id: `gen-output-${String(i + 1).padStart(3, '0')}`,
-      name: `ComfyUI_${String(i + 1).padStart(5, '0')}_.png`,
-      size: 3_000_000 + i * 200_000,
-      mime_type: 'image/png',
-      tags: ['output'],
-      created_at: `2025-03-10T${String((12 + Math.floor(i / 60)) % 24).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}:00Z`,
-      updated_at: `2025-03-10T${String((12 + Math.floor(i / 60)) % 24).padStart(2, '0')}:${String(i % 60).padStart(2, '0')}:00Z`
-    })
-  )
-}

browser_tests/fixtures/helpers/AppModeHelper.ts

@@ -3,7 +3,6 @@ import type { Locator, Page } from '@playwright/test'
 import type { ComfyPage } from '../ComfyPage'
 import { TestIds } from '../selectors'
 
-import { AppModeWidgetHelper } from './AppModeWidgetHelper'
 import { BuilderFooterHelper } from './BuilderFooterHelper'
 import { BuilderSaveAsHelper } from './BuilderSaveAsHelper'
 import { BuilderSelectHelper } from './BuilderSelectHelper'
@@ -14,31 +13,18 @@ export class AppModeHelper {
   readonly footer: BuilderFooterHelper
   readonly saveAs: BuilderSaveAsHelper
   readonly select: BuilderSelectHelper
-  readonly widgets: AppModeWidgetHelper
 
   constructor(private readonly comfyPage: ComfyPage) {
     this.steps = new BuilderStepsHelper(comfyPage)
     this.footer = new BuilderFooterHelper(comfyPage)
     this.saveAs = new BuilderSaveAsHelper(comfyPage)
     this.select = new BuilderSelectHelper(comfyPage)
-    this.widgets = new AppModeWidgetHelper(comfyPage)
   }
 
   private get page(): Page {
     return this.comfyPage.page
   }
 
-  /** Enable the linear mode feature flag and top menu. */
-  async enableLinearMode() {
-    await this.page.evaluate(() => {
-      window.app!.api.serverFeatureFlags.value = {
-        ...window.app!.api.serverFeatureFlags.value,
-        linear_toggle_enabled: true
-      }
-    })
-    await this.comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-  }
-
   /** Enter builder mode via the "Workflow actions" dropdown → "Build app". */
   async enterBuilder() {
     await this.page
@@ -105,13 +91,6 @@ export class AppModeHelper {
       .first()
   }
 
-  /** The Run button in the app mode footer. */
-  get runButton(): Locator {
-    return this.page
-      .getByTestId('linear-run-button')
-      .getByRole('button', { name: /run/i })
-  }
-
   /**
    * Get the actions menu trigger for a widget in the app mode widget list.
    * @param widgetName Text shown in the widget label (e.g. "seed").

browser_tests/fixtures/helpers/AppModeWidgetHelper.ts

@@ -1,93 +0,0 @@
-import type { Locator, Page } from '@playwright/test'
-
-import type { ComfyPage } from '../ComfyPage'
-
-/**
- * Helper for interacting with widgets rendered in app mode (linear view).
- *
- * Widgets are located by their key (format: "nodeId:widgetName") via the
- * `data-widget-key` attribute on each widget item.
- */
-export class AppModeWidgetHelper {
-  constructor(private readonly comfyPage: ComfyPage) {}
-
-  private get page(): Page {
-    return this.comfyPage.page
-  }
-
-  private get container(): Locator {
-    return this.comfyPage.appMode.linearWidgets
-  }
-
-  /** Get a widget item container by its key (e.g. "6:text", "3:seed"). */
-  getWidgetItem(key: string): Locator {
-    return this.container.locator(`[data-widget-key="${key}"]`)
-  }
-
-  /** Fill a textarea widget (e.g. CLIP Text Encode prompt). */
-  async fillTextarea(key: string, value: string) {
-    const widget = this.getWidgetItem(key)
-    await widget.locator('textarea').fill(value)
-  }
-
-  /**
-   * Set a number input widget value (INT or FLOAT).
-   * Targets the last input inside the widget — this works for both
-   * ScrubableNumberInput (single input) and slider+InputNumber combos
-   * (last input is the editable number field).
-   */
-  async fillNumber(key: string, value: string) {
-    const widget = this.getWidgetItem(key)
-    const input = widget.locator('input').last()
-    await input.fill(value)
-    await input.press('Enter')
-  }
-
-  /** Fill a string text input widget (e.g. filename_prefix). */
-  async fillText(key: string, value: string) {
-    const widget = this.getWidgetItem(key)
-    await widget.locator('input').fill(value)
-  }
-
-  /** Select an option from a combo/select widget. */
-  async selectOption(key: string, optionName: string) {
-    const widget = this.getWidgetItem(key)
-    await widget.getByRole('combobox').click()
-    await this.page
-      .getByRole('option', { name: optionName, exact: true })
-      .click()
-  }
-
-  /**
-   * Intercept the /api/prompt POST, click Run, and return the prompt payload.
-   * Fulfills the route with a mock success response.
-   */
-  async runAndCapturePrompt(): Promise<
-    Record<string, { inputs: Record<string, unknown> }>
-  > {
-    let promptBody: Record<string, { inputs: Record<string, unknown> }> | null =
-      null
-    await this.page.route(
-      '**/api/prompt',
-      async (route, req) => {
-        promptBody = req.postDataJSON().prompt
-        await route.fulfill({
-          status: 200,
-          body: JSON.stringify({
-            prompt_id: 'test-id',
-            number: 1,
-            node_errors: {}
-          })
-        })
-      },
-      { times: 1 }
-    )
-
-    const responsePromise = this.page.waitForResponse('**/api/prompt')
-    await this.comfyPage.appMode.runButton.click()
-    await responsePromise
-
-    if (!promptBody) throw new Error('No prompt payload captured')
-    return promptBody
-  }
-}

browser_tests/fixtures/helpers/AssetHelper.ts

@@ -1,317 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-
-import type {
-  Asset,
-  ListAssetsResponse,
-  UpdateAssetData
-} from '@comfyorg/ingest-types'
-import {
-  generateModels,
-  generateInputFiles,
-  generateOutputAssets
-} from '../data/assetFixtures'
-
-export interface MutationRecord {
-  endpoint: string
-  method: string
-  url: string
-  body: unknown
-  timestamp: number
-}
-
-interface PaginationOptions {
-  total: number
-  hasMore: boolean
-}
-export interface AssetConfig {
-  readonly assets: ReadonlyMap<string, Asset>
-  readonly pagination: PaginationOptions | null
-  readonly uploadResponse: Record<string, unknown> | null
-}
-
-function emptyConfig(): AssetConfig {
-  return { assets: new Map(), pagination: null, uploadResponse: null }
-}
-
-export type AssetOperator = (config: AssetConfig) => AssetConfig
-
-function addAssets(config: AssetConfig, newAssets: Asset[]): AssetConfig {
-  const merged = new Map(config.assets)
-  for (const asset of newAssets) {
-    merged.set(asset.id, asset)
-  }
-  return { ...config, assets: merged }
-}
-export function withModels(
-  countOrAssets: number | Asset[],
-  category: 'checkpoints' | 'loras' | 'vae' | 'embeddings' = 'checkpoints'
-): AssetOperator {
-  return (config) => {
-    const assets =
-      typeof countOrAssets === 'number'
-        ? generateModels(countOrAssets, category)
-        : countOrAssets
-    return addAssets(config, assets)
-  }
-}
-
-export function withInputFiles(countOrAssets: number | Asset[]): AssetOperator {
-  return (config) => {
-    const assets =
-      typeof countOrAssets === 'number'
-        ? generateInputFiles(countOrAssets)
-        : countOrAssets
-    return addAssets(config, assets)
-  }
-}
-
-export function withOutputAssets(
-  countOrAssets: number | Asset[]
-): AssetOperator {
-  return (config) => {
-    const assets =
-      typeof countOrAssets === 'number'
-        ? generateOutputAssets(countOrAssets)
-        : countOrAssets
-    return addAssets(config, assets)
-  }
-}
-
-export function withAsset(asset: Asset): AssetOperator {
-  return (config) => addAssets(config, [asset])
-}
-
-export function withPagination(options: PaginationOptions): AssetOperator {
-  return (config) => ({ ...config, pagination: options })
-}
-
-export function withUploadResponse(
-  response: Record<string, unknown>
-): AssetOperator {
-  return (config) => ({ ...config, uploadResponse: response })
-}
-export class AssetHelper {
-  private store: Map<string, Asset>
-  private paginationOptions: PaginationOptions | null
-  private routeHandlers: Array<{
-    pattern: string
-    handler: (route: Route) => Promise<void>
-  }> = []
-  private mutations: MutationRecord[] = []
-  private uploadResponse: Record<string, unknown> | null
-
-  constructor(
-    private readonly page: Page,
-    config: AssetConfig = emptyConfig()
-  ) {
-    this.store = new Map(config.assets)
-    this.paginationOptions = config.pagination
-    this.uploadResponse = config.uploadResponse
-  }
-  async mock(): Promise<void> {
-    const handler = async (route: Route) => {
-      const url = new URL(route.request().url())
-      const method = route.request().method()
-      const path = url.pathname
-      const isMutation = ['POST', 'PUT', 'DELETE'].includes(method)
-      let body: Record<string, unknown> | null = null
-      if (isMutation) {
-        try {
-          body = route.request().postDataJSON()
-        } catch {
-          body = null
-        }
-      }
-
-      if (isMutation) {
-        this.mutations.push({
-          endpoint: path,
-          method,
-          url: route.request().url(),
-          body,
-          timestamp: Date.now()
-        })
-      }
-
-      if (method === 'GET' && /\/assets\/?$/.test(path))
-        return this.handleListAssets(route, url)
-      if (method === 'GET' && /\/assets\/[^/]+$/.test(path))
-        return this.handleGetAsset(route, path)
-      if (method === 'PUT' && /\/assets\/[^/]+$/.test(path))
-        return this.handleUpdateAsset(route, path, body)
-      if (method === 'DELETE' && /\/assets\/[^/]+$/.test(path))
-        return this.handleDeleteAsset(route, path)
-      if (method === 'POST' && /\/assets\/?$/.test(path))
-        return this.handleUploadAsset(route)
-      if (method === 'POST' && path.endsWith('/assets/download'))
-        return this.handleDownloadAsset(route)
-
-      return route.fallback()
-    }
-
-    const pattern = '**/assets**'
-    this.routeHandlers.push({ pattern, handler })
-    await this.page.route(pattern, handler)
-  }
-
-  async mockError(
-    statusCode: number,
-    error: string = 'Internal Server Error'
-  ): Promise<void> {
-    const handler = async (route: Route) => {
-      return route.fulfill({
-        status: statusCode,
-        json: { error }
-      })
-    }
-
-    const pattern = '**/assets**'
-    this.routeHandlers.push({ pattern, handler })
-    await this.page.route(pattern, handler)
-  }
-  async fetch(
-    path: string,
-    init?: RequestInit
-  ): Promise<{ status: number; body: unknown }> {
-    return this.page.evaluate(
-      async ([fetchUrl, fetchInit]) => {
-        const res = await fetch(fetchUrl, fetchInit)
-        const text = await res.text()
-        let body: unknown
-        try {
-          body = JSON.parse(text)
-        } catch {
-          body = text
-        }
-        return { status: res.status, body }
-      },
-      [path, init] as const
-    )
-  }
-
-  configure(...operators: AssetOperator[]): void {
-    const config = operators.reduce<AssetConfig>(
-      (cfg, op) => op(cfg),
-      emptyConfig()
-    )
-    this.store = new Map(config.assets)
-    this.paginationOptions = config.pagination
-    this.uploadResponse = config.uploadResponse
-  }
-
-  getMutations(): MutationRecord[] {
-    return [...this.mutations]
-  }
-
-  getAssets(): Asset[] {
-    return [...this.store.values()]
-  }
-
-  getAsset(id: string): Asset | undefined {
-    return this.store.get(id)
-  }
-
-  get assetCount(): number {
-    return this.store.size
-  }
-  private handleListAssets(route: Route, url: URL) {
-    const includeTags = url.searchParams.get('include_tags')?.split(',') ?? []
-    const limit = parseInt(url.searchParams.get('limit') ?? '0', 10)
-    const offset = parseInt(url.searchParams.get('offset') ?? '0', 10)
-
-    let filtered = this.getFilteredAssets(includeTags)
-    if (limit > 0) {
-      filtered = filtered.slice(offset, offset + limit)
-    }
-
-    const response: ListAssetsResponse = {
-      assets: filtered,
-      total: this.paginationOptions?.total ?? this.store.size,
-      has_more: this.paginationOptions?.hasMore ?? false
-    }
-    return route.fulfill({ json: response })
-  }
-
-  private handleGetAsset(route: Route, path: string) {
-    const id = path.split('/').pop()!
-    const asset = this.store.get(id)
-    if (asset) return route.fulfill({ json: asset })
-    return route.fulfill({ status: 404, json: { error: 'Not found' } })
-  }
-
-  private handleUpdateAsset(
-    route: Route,
-    path: string,
-    body: UpdateAssetData['body'] | null
-  ) {
-    const id = path.split('/').pop()!
-    const asset = this.store.get(id)
-    if (asset) {
-      const updated = {
-        ...asset,
-        ...(body ?? {}),
-        updated_at: new Date().toISOString()
-      }
-      this.store.set(id, updated)
-      return route.fulfill({ json: updated })
-    }
-    return route.fulfill({ status: 404, json: { error: 'Not found' } })
-  }
-
-  private handleDeleteAsset(route: Route, path: string) {
-    const id = path.split('/').pop()!
-    this.store.delete(id)
-    return route.fulfill({ status: 204, body: '' })
-  }
-
-  private handleUploadAsset(route: Route) {
-    const response = this.uploadResponse ?? {
-      id: `upload-${Date.now()}`,
-      name: 'uploaded_file.safetensors',
-      tags: ['models', 'checkpoints'],
-      created_at: new Date().toISOString(),
-      created_new: true
-    }
-    return route.fulfill({ status: 201, json: response })
-  }
-
-  private handleDownloadAsset(route: Route) {
-    return route.fulfill({
-      status: 202,
-      json: {
-        task_id: 'download-task-001',
-        status: 'created',
-        message: 'Download started'
-      }
-    })
-  }
-
-  async clearMocks(): Promise<void> {
-    for (const { pattern, handler } of this.routeHandlers) {
-      await this.page.unroute(pattern, handler)
-    }
-    this.routeHandlers = []
-    this.store.clear()
-    this.mutations = []
-    this.paginationOptions = null
-    this.uploadResponse = null
-  }
-  private getFilteredAssets(tags: string[]): Asset[] {
-    const assets = [...this.store.values()]
-    if (tags.length === 0) return assets
-
-    return assets.filter((asset) =>
-      tags.every((tag) => (asset.tags ?? []).includes(tag))
-    )
-  }
-}
-export function createAssetHelper(
-  page: Page,
-  ...operators: AssetOperator[]
-): AssetHelper {
-  const config = operators.reduce<AssetConfig>(
-    (cfg, op) => op(cfg),
-    emptyConfig()
-  )
-  return new AssetHelper(page, config)
-}

browser_tests/fixtures/helpers/BuilderSelectHelper.ts

@@ -1,36 +1,9 @@
 import type { Locator, Page } from '@playwright/test'
 
 import type { ComfyPage } from '../ComfyPage'
+import type { NodeReference } from '../utils/litegraphUtils'
 import { TestIds } from '../selectors'
 
-/**
- * Drag an element from one index to another within a list of locators.
- * Uses mousedown/mousemove/mouseup to trigger the DraggableList library.
- *
- * DraggableList toggles position when the dragged item's center crosses
- * past an idle item's center. To reliably land at the target position,
- * we overshoot slightly past the target's far edge.
- */
-async function dragByIndex(items: Locator, fromIndex: number, toIndex: number) {
-  const fromBox = await items.nth(fromIndex).boundingBox()
-  const toBox = await items.nth(toIndex).boundingBox()
-  if (!fromBox || !toBox) throw new Error('Item not visible for drag')
-
-  const draggingDown = toIndex > fromIndex
-  const targetY = draggingDown
-    ? toBox.y + toBox.height * 0.9
-    : toBox.y + toBox.height * 0.1
-
-  const page = items.page()
-  await page.mouse.move(
-    fromBox.x + fromBox.width / 2,
-    fromBox.y + fromBox.height / 2
-  )
-  await page.mouse.down()
-  await page.mouse.move(toBox.x + toBox.width / 2, targetY, { steps: 10 })
-  await page.mouse.up()
-}
-
 export class BuilderSelectHelper {
   constructor(private readonly comfyPage: ComfyPage) {}
 
@@ -126,69 +99,41 @@ export class BuilderSelectHelper {
     await this.comfyPage.nextFrame()
   }
 
-  /**
-   * Click a widget on the canvas to select it as a builder input.
-   * @param nodeTitle The displayed title of the node.
-   * @param widgetName The widget name to click.
-   */
-  async selectInputWidget(nodeTitle: string, widgetName: string) {
+  /** Center on a node and click its first widget to select it as input. */
+  async selectInputWidget(node: NodeReference) {
     await this.comfyPage.canvasOps.setScale(1)
-    const nodeRef = (
-      await this.comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
-    )[0]
-    if (!nodeRef) throw new Error(`Node ${nodeTitle} not found`)
-    await nodeRef.centerOnNode()
-    const widgetLocator = this.comfyPage.vueNodes
-      .getNodeLocator(String(nodeRef.id))
-      .getByLabel(widgetName, { exact: true })
-    await widgetLocator.click({ force: true })
-    await this.comfyPage.nextFrame()
-  }
+    await node.centerOnNode()
 
-  /** All IoItem title locators in the inputs step sidebar. */
-  get inputItemTitles(): Locator {
-    return this.page.getByTestId(TestIds.builder.ioItemTitle)
-  }
-
-  /** All widget label locators in the preview/arrange sidebar. */
-  get previewWidgetLabels(): Locator {
-    return this.page.getByTestId(TestIds.builder.widgetLabel)
-  }
-
-  /**
-   * Drag an IoItem from one index to another in the inputs step.
-   * Items are identified by their 0-based position among visible IoItems.
-   */
-  async dragInputItem(fromIndex: number, toIndex: number) {
-    const items = this.page.getByTestId(TestIds.builder.ioItem)
-    await dragByIndex(items, fromIndex, toIndex)
-    await this.comfyPage.nextFrame()
-  }
-
-  /**
-   * Drag a widget item from one index to another in the preview/arrange step.
-   */
-  async dragPreviewItem(fromIndex: number, toIndex: number) {
-    const items = this.page.getByTestId(TestIds.builder.widgetItem)
-    await dragByIndex(items, fromIndex, toIndex)
-    await this.comfyPage.nextFrame()
-  }
-
-  /**
-   * Click an output node on the canvas to select it as a builder output.
-   * @param nodeTitle The displayed title of the output node.
-   */
-  async selectOutputNode(nodeTitle: string) {
-    await this.comfyPage.canvasOps.setScale(1)
-    const nodeRef = (
-      await this.comfyPage.nodeOps.getNodeRefsByTitle(nodeTitle)
-    )[0]
-    if (!nodeRef) throw new Error(`Node ${nodeTitle} not found`)
-    await nodeRef.centerOnNode()
-    const nodeLocator = this.comfyPage.vueNodes.getNodeLocator(
-      String(nodeRef.id)
+    const widgetRef = await node.getWidget(0)
+    const widgetPos = await widgetRef.getPosition()
+    const titleHeight = await this.page.evaluate(
+      () => window.LiteGraph!['NODE_TITLE_HEIGHT'] as number
+    )
+    await this.page.mouse.click(widgetPos.x, widgetPos.y + titleHeight)
+    await this.comfyPage.nextFrame()
+  }
+
+  /** Click the first SaveImage/PreviewImage node on the canvas. */
+  async selectOutputNode() {
+    const saveImageNodeId = await this.page.evaluate(() => {
+      const node = window.app!.rootGraph.nodes.find(
+        (n: { type?: string }) =>
+          n.type === 'SaveImage' || n.type === 'PreviewImage'
+      )
+      return node ? String(node.id) : null
+    })
+    if (!saveImageNodeId)
+      throw new Error('SaveImage/PreviewImage node not found')
+    const saveImageRef =
+      await this.comfyPage.nodeOps.getNodeRefById(saveImageNodeId)
+    await saveImageRef.centerOnNode()
+
+    const canvasBox = await this.page.locator('#graph-canvas').boundingBox()
+    if (!canvasBox) throw new Error('Canvas not found')
+    await this.page.mouse.click(
+      canvasBox.x + canvasBox.width / 2,
+      canvasBox.y + canvasBox.height / 2
     )
-    await nodeLocator.click({ force: true })
     await this.comfyPage.nextFrame()
   }
 }

browser_tests/fixtures/selectors.ts

@@ -111,12 +111,7 @@ export const TestIds = {
     ioItem: 'builder-io-item',
     ioItemTitle: 'builder-io-item-title',
     widgetActionsMenu: 'widget-actions-menu',
-    opensAs: 'builder-opens-as',
-    widgetItem: 'builder-widget-item',
-    widgetLabel: 'builder-widget-label'
-  },
-  appMode: {
-    widgetItem: 'app-mode-widget-item'
+    opensAs: 'builder-opens-as'
   },
   breadcrumb: {
     subgraph: 'subgraph-breadcrumb'
@@ -154,7 +149,6 @@ export type TestIdValue =
   | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
   | (typeof TestIds.builder)[keyof typeof TestIds.builder]
-  | (typeof TestIds.appMode)[keyof typeof TestIds.appMode]
   | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<
       (typeof TestIds.templates)[keyof typeof TestIds.templates],

browser_tests/helpers/builderTestUtils.ts

@@ -1,18 +1,11 @@
 import { expect } from '@playwright/test'
 
 import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
-import { comfyExpect } from '../fixtures/ComfyPage'
 import { fitToViewInstant } from './fitToView'
 import { getPromotedWidgetNames } from './promotedWidgets'
 
-interface BuilderSetupResult {
-  inputNodeTitle: string
-  widgetNames: string[]
-}
-
 /**
  * Enter builder on the default workflow and select I/O.
  *
@@ -20,48 +13,41 @@ interface BuilderSetupResult {
  * to subgraph), then enters builder mode and selects inputs + outputs.
  *
  * @param comfyPage - The page fixture.
- * @param prepareGraph - Optional callback to transform the graph before
- *   entering builder. Receives the KSampler node ref and returns the
- *   input node title and widget names to select.
- *   Defaults to KSampler with its first widget.
- *   Mutually exclusive with widgetNames.
- * @param widgetNames - Widget names to select from the KSampler node.
- *   Only used when prepareGraph is not provided.
- *   Mutually exclusive with prepareGraph.
+ * @param getInputNode - Returns the node to click for input selection.
+ *   Receives the KSampler node ref and can transform the graph before
+ *   returning the target node. Defaults to using KSampler directly.
+ * @returns The node used for input selection.
  */
 export async function setupBuilder(
   comfyPage: ComfyPage,
-  prepareGraph?: (ksampler: NodeReference) => Promise<BuilderSetupResult>,
-  widgetNames?: string[]
-): Promise<void> {
+  getInputNode?: (ksampler: NodeReference) => Promise<NodeReference>
+): Promise<NodeReference> {
   const { appMode } = comfyPage
   await comfyPage.workflow.loadWorkflow('default')
 
   const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-
-  const { inputNodeTitle, widgetNames: inputWidgets } = prepareGraph
-    ? await prepareGraph(ksampler)
-    : { inputNodeTitle: 'KSampler', widgetNames: widgetNames ?? ['seed'] }
+  const inputNode = getInputNode ? await getInputNode(ksampler) : ksampler
 
   await fitToViewInstant(comfyPage)
   await appMode.enterBuilder()
   await appMode.steps.goToInputs()
-
-  for (const name of inputWidgets) {
-    await appMode.select.selectInputWidget(inputNodeTitle, name)
-  }
+  await appMode.select.selectInputWidget(inputNode)
 
   await appMode.steps.goToOutputs()
-  await appMode.select.selectOutputNode('Save Image')
+  await appMode.select.selectOutputNode()
+
+  return inputNode
 }
 
 /**
  * Convert the KSampler to a subgraph, then enter builder with I/O selected.
+ *
+ * Returns the subgraph node reference for further interaction.
  */
 export async function setupSubgraphBuilder(
   comfyPage: ComfyPage
-): Promise<void> {
-  await setupBuilder(comfyPage, async (ksampler) => {
+): Promise<NodeReference> {
+  return setupBuilder(comfyPage, async (ksampler) => {
     await ksampler.click('title')
     const subgraphNode = await ksampler.convertToSubgraph()
     await comfyPage.nextFrame()
@@ -72,52 +58,10 @@ export async function setupSubgraphBuilder(
     )
     expect(promotedNames).toContain('seed')
 
-    return {
-      inputNodeTitle: 'New Subgraph',
-      widgetNames: ['seed']
-    }
+    return subgraphNode
   })
 }
 
-/**
- * Open the save-as dialog, fill name + view type, click save,
- * and wait for the success dialog.
- */
-export async function builderSaveAs(
-  appMode: AppModeHelper,
-  workflowName: string,
-  viewType: 'App' | 'Node graph' = 'App'
-) {
-  await appMode.footer.saveAsButton.click()
-  await comfyExpect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
-  await appMode.saveAs.fillAndSave(workflowName, viewType)
-  await comfyExpect(appMode.saveAs.successMessage).toBeVisible({
-    timeout: 5000
-  })
-}
-
-/**
- * Load a different workflow, then reopen the named one from the sidebar.
- * Caller must ensure the page is in graph mode (not builder or app mode)
- * before calling.
- */
-export async function openWorkflowFromSidebar(
-  comfyPage: ComfyPage,
-  name: string
-) {
-  await comfyPage.workflow.loadWorkflow('default')
-  await comfyPage.nextFrame()
-  const { workflowsTab } = comfyPage.menu
-  await workflowsTab.open()
-  await workflowsTab.getPersistedItem(name).dblclick()
-  await comfyPage.nextFrame()
-
-  await comfyExpect(async () => {
-    const path = await comfyPage.workflow.getActiveWorkflowPath()
-    expect(path).toContain(name)
-  }).toPass({ timeout: 5000 })
-}
-
 /** Save the workflow, reopen it, and enter app mode. */
 export async function saveAndReopenInAppMode(
   comfyPage: ComfyPage,

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -60,7 +60,13 @@ async function addNode(page: Page, nodeType: string): Promise<string> {
 
 test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.appMode.enableLinearMode()
+    await comfyPage.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        linear_toggle_enabled: true
+      }
+    })
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
   })
 
   test('Select dropdown is not clipped in app mode panel', async ({

browser_tests/tests/appModeWidgetRename.spec.ts

@@ -9,7 +9,13 @@ import {
 
 test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.appMode.enableLinearMode()
+    await comfyPage.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        linear_toggle_enabled: true
+      }
+    })
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.AppBuilder.VueNodeSwitchDismissed',
       true

browser_tests/tests/appModeWidgetValues.spec.ts

@@ -1,94 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-
-/** One representative of each widget type from the default workflow. */
-type WidgetType = 'textarea' | 'number' | 'select' | 'text'
-
-const WIDGET_TEST_DATA: {
-  nodeId: string
-  widgetName: string
-  type: WidgetType
-  fill: string
-  expected: unknown
-}[] = [
-  {
-    nodeId: '6',
-    widgetName: 'text',
-    type: 'textarea',
-    fill: 'test prompt',
-    expected: 'test prompt'
-  },
-  {
-    nodeId: '5',
-    widgetName: 'width',
-    type: 'number',
-    fill: '768',
-    expected: 768
-  },
-  {
-    nodeId: '3',
-    widgetName: 'cfg',
-    type: 'number',
-    fill: '3.5',
-    expected: 3.5
-  },
-  {
-    nodeId: '3',
-    widgetName: 'sampler_name',
-    type: 'select',
-    fill: 'uni_pc',
-    expected: 'uni_pc'
-  },
-  {
-    nodeId: '9',
-    widgetName: 'filename_prefix',
-    type: 'text',
-    fill: 'test_prefix',
-    expected: 'test_prefix'
-  }
-]
-
-test.describe('App mode widget values in prompt', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.appMode.enableLinearMode()
-  })
-
-  test('Widget values are sent correctly in prompt POST', async ({
-    comfyPage
-  }) => {
-    const { appMode } = comfyPage
-    const inputs: [string, string][] = WIDGET_TEST_DATA.map(
-      ({ nodeId, widgetName }) => [nodeId, widgetName]
-    )
-    await appMode.enterAppModeWithInputs(inputs)
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
-
-    for (const { nodeId, widgetName, type, fill } of WIDGET_TEST_DATA) {
-      const key = `${nodeId}:${widgetName}`
-      switch (type) {
-        case 'textarea':
-          await appMode.widgets.fillTextarea(key, fill)
-          break
-        case 'number':
-          await appMode.widgets.fillNumber(key, fill)
-          break
-        case 'select':
-          await appMode.widgets.selectOption(key, fill)
-          break
-        case 'text':
-          await appMode.widgets.fillText(key, fill)
-          break
-        default:
-          throw new Error(`Unknown widget type: ${type satisfies never}`)
-      }
-    }
-
-    const prompt = await appMode.widgets.runAndCapturePrompt()
-
-    for (const { nodeId, widgetName, expected } of WIDGET_TEST_DATA) {
-      expect(prompt[nodeId].inputs[widgetName]).toBe(expected)
-    }
-  })
-})

browser_tests/tests/assetHelper.spec.ts

@@ -1,382 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import {
-  createAssetHelper,
-  withModels,
-  withInputFiles,
-  withOutputAssets,
-  withAsset,
-  withPagination,
-  withUploadResponse
-} from '../fixtures/helpers/AssetHelper'
-import {
-  STABLE_CHECKPOINT,
-  STABLE_LORA,
-  STABLE_INPUT_IMAGE,
-  STABLE_OUTPUT
-} from '../fixtures/data/assetFixtures'
-
-test.describe('AssetHelper', () => {
-  test.describe('operators and configuration', () => {
-    test('creates helper with models via withModels operator', async ({
-      comfyPage
-    }) => {
-      const helper = createAssetHelper(
-        comfyPage.page,
-        withModels(3, 'checkpoints')
-      )
-      expect(helper.assetCount).toBe(3)
-      expect(
-        helper.getAssets().every((a) => a.tags?.includes('checkpoints'))
-      ).toBe(true)
-    })
-
-    test('composes multiple operators', async ({ comfyPage }) => {
-      const helper = createAssetHelper(
-        comfyPage.page,
-        withModels(2, 'checkpoints'),
-        withInputFiles(2),
-        withOutputAssets(1)
-      )
-      expect(helper.assetCount).toBe(5)
-    })
-
-    test('adds individual assets via withAsset', async ({ comfyPage }) => {
-      const helper = createAssetHelper(
-        comfyPage.page,
-        withAsset(STABLE_CHECKPOINT),
-        withAsset(STABLE_LORA)
-      )
-      expect(helper.assetCount).toBe(2)
-      expect(helper.getAsset(STABLE_CHECKPOINT.id)).toMatchObject({
-        id: STABLE_CHECKPOINT.id,
-        name: STABLE_CHECKPOINT.name
-      })
-    })
-
-    test('withPagination sets pagination options', async ({ comfyPage }) => {
-      const helper = createAssetHelper(
-        comfyPage.page,
-        withModels(2),
-        withPagination({ total: 100, hasMore: true })
-      )
-      expect(helper.assetCount).toBe(2)
-    })
-  })
-
-  test.describe('mock API routes', () => {
-    test('GET /assets returns all assets', async ({ comfyPage }) => {
-      const { assetApi } = comfyPage
-      assetApi.configure(
-        withAsset(STABLE_CHECKPOINT),
-        withAsset(STABLE_INPUT_IMAGE)
-      )
-      await assetApi.mock()
-
-      const { status, body } = await assetApi.fetch(
-        `${comfyPage.url}/api/assets`
-      )
-      expect(status).toBe(200)
-
-      const data = body as {
-        assets: unknown[]
-        total: number
-        has_more: boolean
-      }
-      expect(data.assets).toHaveLength(2)
-      expect(data.total).toBe(2)
-      expect(data.has_more).toBe(false)
-
-      await assetApi.clearMocks()
-    })
-
-    test('GET /assets respects pagination params', async ({ comfyPage }) => {
-      const { assetApi } = comfyPage
-      assetApi.configure(
-        withModels(5),
-        withPagination({ total: 10, hasMore: true })
-      )
-      await assetApi.mock()
-
-      const { body } = await assetApi.fetch(
-        `${comfyPage.url}/api/assets?limit=2&offset=0`
-      )
-      const data = body as {
-        assets: unknown[]
-        total: number
-        has_more: boolean
-      }
-      expect(data.assets).toHaveLength(2)
-      expect(data.total).toBe(10)
-      expect(data.has_more).toBe(true)
-
-      await assetApi.clearMocks()
-    })
-
-    test('GET /assets filters by include_tags', async ({ comfyPage }) => {
-      const { assetApi } = comfyPage
-      assetApi.configure(
-        withAsset(STABLE_CHECKPOINT),
-        withAsset(STABLE_LORA),
-        withAsset(STABLE_INPUT_IMAGE)
-      )
-      await assetApi.mock()
-
-      const { body } = await assetApi.fetch(
-        `${comfyPage.url}/api/assets?include_tags=models,checkpoints`
-      )
-      const data = body as { assets: Array<{ id: string }> }
-      expect(data.assets).toHaveLength(1)
-      expect(data.assets[0].id).toBe(STABLE_CHECKPOINT.id)
-
-      await assetApi.clearMocks()
-    })
-
-    test('GET /assets/:id returns single asset or 404', async ({
-      comfyPage
-    }) => {
-      const { assetApi } = comfyPage
-      assetApi.configure(withAsset(STABLE_CHECKPOINT))
-      await assetApi.mock()
-
-      const found = await assetApi.fetch(
-        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`
-      )
-      expect(found.status).toBe(200)
-      const asset = found.body as { id: string }
-      expect(asset.id).toBe(STABLE_CHECKPOINT.id)
-
-      const notFound = await assetApi.fetch(
-        `${comfyPage.url}/api/assets/nonexistent-id`
-      )
-      expect(notFound.status).toBe(404)
-
-      await assetApi.clearMocks()
-    })
-
-    test('PUT /assets/:id updates asset in store', async ({ comfyPage }) => {
-      const { assetApi } = comfyPage
-      assetApi.configure(withAsset(STABLE_CHECKPOINT))
-      await assetApi.mock()
-
-      const { status, body } = await assetApi.fetch(
-        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`,
-        {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name: 'renamed.safetensors' })
-        }
-      )
-      expect(status).toBe(200)
-
-      const updated = body as { name: string }
-      expect(updated.name).toBe('renamed.safetensors')
-      expect(assetApi.getAsset(STABLE_CHECKPOINT.id)?.name).toBe(
-        'renamed.safetensors'
-      )
-
-      await assetApi.clearMocks()
-    })
-
-    test('DELETE /assets/:id removes asset from store', async ({
-      comfyPage
-    }) => {
-      const { assetApi } = comfyPage
-      assetApi.configure(withAsset(STABLE_CHECKPOINT), withAsset(STABLE_LORA))
-      await assetApi.mock()
-
-      const { status } = await assetApi.fetch(
-        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`,
-        { method: 'DELETE' }
-      )
-      expect(status).toBe(204)
-      expect(assetApi.assetCount).toBe(1)
-      expect(assetApi.getAsset(STABLE_CHECKPOINT.id)).toBeUndefined()
-
-      await assetApi.clearMocks()
-    })
-
-    test('POST /assets returns upload response', async ({ comfyPage }) => {
-      const customUpload = {
-        id: 'custom-upload-001',
-        name: 'custom.safetensors',
-        tags: ['models'],
-        created_at: '2025-01-01T00:00:00Z',
-        created_new: true
-      }
-      const { assetApi } = comfyPage
-      assetApi.configure(withUploadResponse(customUpload))
-      await assetApi.mock()
-
-      const { status, body } = await assetApi.fetch(
-        `${comfyPage.url}/api/assets`,
-        { method: 'POST' }
-      )
-      expect(status).toBe(201)
-      const data = body as { id: string; name: string }
-      expect(data.id).toBe('custom-upload-001')
-      expect(data.name).toBe('custom.safetensors')
-
-      await assetApi.clearMocks()
-    })
-
-    test('POST /assets/download returns async download response', async ({
-      comfyPage
-    }) => {
-      const { assetApi } = comfyPage
-      await assetApi.mock()
-
-      const { status, body } = await assetApi.fetch(
-        `${comfyPage.url}/api/assets/download`,
-        { method: 'POST' }
-      )
-      expect(status).toBe(202)
-      const data = body as { task_id: string; status: string }
-      expect(data.task_id).toBe('download-task-001')
-      expect(data.status).toBe('created')
-
-      await assetApi.clearMocks()
-    })
-  })
-
-  test.describe('mutation tracking', () => {
-    test('tracks POST, PUT, DELETE mutations', async ({ comfyPage }) => {
-      const { assetApi } = comfyPage
-      assetApi.configure(withAsset(STABLE_CHECKPOINT))
-      await assetApi.mock()
-
-      await assetApi.fetch(`${comfyPage.url}/api/assets`, { method: 'POST' })
-      await assetApi.fetch(
-        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`,
-        {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name: 'updated.safetensors' })
-        }
-      )
-      await assetApi.fetch(
-        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`,
-        { method: 'DELETE' }
-      )
-
-      const mutations = assetApi.getMutations()
-      expect(mutations).toHaveLength(3)
-      expect(mutations[0].method).toBe('POST')
-      expect(mutations[1].method).toBe('PUT')
-      expect(mutations[2].method).toBe('DELETE')
-
-      await assetApi.clearMocks()
-    })
-
-    test('GET requests are not tracked as mutations', async ({ comfyPage }) => {
-      const { assetApi } = comfyPage
-      assetApi.configure(withAsset(STABLE_CHECKPOINT))
-      await assetApi.mock()
-
-      await assetApi.fetch(`${comfyPage.url}/api/assets`)
-      await assetApi.fetch(
-        `${comfyPage.url}/api/assets/${STABLE_CHECKPOINT.id}`
-      )
-
-      expect(assetApi.getMutations()).toHaveLength(0)
-
-      await assetApi.clearMocks()
-    })
-  })
-
-  test.describe('mockError', () => {
-    test('returns error status for all asset routes', async ({ comfyPage }) => {
-      const { assetApi } = comfyPage
-      await assetApi.mockError(503, 'Service Unavailable')
-
-      const { status, body } = await assetApi.fetch(
-        `${comfyPage.url}/api/assets`
-      )
-      expect(status).toBe(503)
-      const data = body as { error: string }
-      expect(data.error).toBe('Service Unavailable')
-
-      await assetApi.clearMocks()
-    })
-  })
-
-  test.describe('clearMocks', () => {
-    test('resets store, mutations, and unroutes handlers', async ({
-      comfyPage
-    }) => {
-      const { assetApi } = comfyPage
-      assetApi.configure(withAsset(STABLE_CHECKPOINT))
-      await assetApi.mock()
-
-      await assetApi.fetch(`${comfyPage.url}/api/assets`, { method: 'POST' })
-      expect(assetApi.getMutations()).toHaveLength(1)
-      expect(assetApi.assetCount).toBe(1)
-
-      await assetApi.clearMocks()
-      expect(assetApi.getMutations()).toHaveLength(0)
-      expect(assetApi.assetCount).toBe(0)
-    })
-  })
-
-  test.describe('fixture generators', () => {
-    test('generateModels produces deterministic assets', async ({
-      comfyPage
-    }) => {
-      const helper = createAssetHelper(comfyPage.page, withModels(3, 'loras'))
-      const assets = helper.getAssets()
-
-      expect(assets).toHaveLength(3)
-      expect(assets.every((a) => a.tags?.includes('loras'))).toBe(true)
-      expect(assets.every((a) => a.tags?.includes('models'))).toBe(true)
-
-      const ids = assets.map((a) => a.id)
-      expect(new Set(ids).size).toBe(3)
-    })
-
-    test('generateInputFiles produces deterministic input assets', async ({
-      comfyPage
-    }) => {
-      const helper = createAssetHelper(comfyPage.page, withInputFiles(3))
-      const assets = helper.getAssets()
-
-      expect(assets).toHaveLength(3)
-      expect(assets.every((a) => a.tags?.includes('input'))).toBe(true)
-    })
-
-    test('generateOutputAssets produces deterministic output assets', async ({
-      comfyPage
-    }) => {
-      const helper = createAssetHelper(comfyPage.page, withOutputAssets(5))
-      const assets = helper.getAssets()
-
-      expect(assets).toHaveLength(5)
-      expect(assets.every((a) => a.tags?.includes('output'))).toBe(true)
-      expect(assets.every((a) => a.name.startsWith('ComfyUI_'))).toBe(true)
-    })
-
-    test('stable fixtures have expected properties', async ({ comfyPage }) => {
-      const helper = createAssetHelper(
-        comfyPage.page,
-        withAsset(STABLE_CHECKPOINT),
-        withAsset(STABLE_LORA),
-        withAsset(STABLE_INPUT_IMAGE),
-        withAsset(STABLE_OUTPUT)
-      )
-
-      const checkpoint = helper.getAsset(STABLE_CHECKPOINT.id)!
-      expect(checkpoint.tags).toContain('checkpoints')
-      expect(checkpoint.size).toBeGreaterThan(0)
-      expect(checkpoint.created_at).toBeTruthy()
-
-      const lora = helper.getAsset(STABLE_LORA.id)!
-      expect(lora.tags).toContain('loras')
-
-      const input = helper.getAsset(STABLE_INPUT_IMAGE.id)!
-      expect(input.tags).toContain('input')
-
-      const output = helper.getAsset(STABLE_OUTPUT.id)!
-      expect(output.tags).toContain('output')
-    })
-  })
-})

browser_tests/tests/builderReorder.spec.ts

@@ -1,157 +0,0 @@
-import {
-  comfyPageFixture as test,
-  comfyExpect as expect
-} from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
-import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
-import {
-  builderSaveAs,
-  openWorkflowFromSidebar,
-  setupBuilder
-} from '../helpers/builderTestUtils'
-
-const WIDGETS = ['seed', 'steps', 'cfg']
-
-/** Save as app, close it by loading default, reopen from sidebar, enter app mode. */
-async function saveCloseAndReopenAsApp(
-  comfyPage: ComfyPage,
-  appMode: AppModeHelper,
-  workflowName: string
-) {
-  await appMode.steps.goToPreview()
-  await builderSaveAs(appMode, workflowName)
-  await appMode.saveAs.closeButton.click()
-  await comfyPage.nextFrame()
-
-  await appMode.footer.exitBuilder()
-  await openWorkflowFromSidebar(comfyPage, workflowName)
-  await appMode.toggleAppMode()
-}
-
-test.describe('Builder input reordering', { tag: '@ui' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.appMode.enableLinearMode()
-    await comfyPage.settings.setSetting(
-      'Comfy.AppBuilder.VueNodeSwitchDismissed',
-      true
-    )
-  })
-
-  test('Drag first input to last position', async ({ comfyPage }) => {
-    const { appMode } = comfyPage
-    await setupBuilder(comfyPage, undefined, WIDGETS)
-
-    await appMode.steps.goToInputs()
-    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
-
-    await appMode.select.dragInputItem(0, 2)
-    await expect(appMode.select.inputItemTitles).toHaveText([
-      'steps',
-      'cfg',
-      'seed'
-    ])
-
-    await appMode.steps.goToPreview()
-    await expect(appMode.select.previewWidgetLabels).toHaveText([
-      'steps',
-      'cfg',
-      'seed'
-    ])
-  })
-
-  test('Drag last input to first position', async ({ comfyPage }) => {
-    const { appMode } = comfyPage
-    await setupBuilder(comfyPage, undefined, WIDGETS)
-
-    await appMode.steps.goToInputs()
-    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
-
-    await appMode.select.dragInputItem(2, 0)
-    await expect(appMode.select.inputItemTitles).toHaveText([
-      'cfg',
-      'seed',
-      'steps'
-    ])
-
-    await appMode.steps.goToPreview()
-    await expect(appMode.select.previewWidgetLabels).toHaveText([
-      'cfg',
-      'seed',
-      'steps'
-    ])
-  })
-
-  test('Drag input to middle position', async ({ comfyPage }) => {
-    const { appMode } = comfyPage
-    await setupBuilder(comfyPage, undefined, WIDGETS)
-
-    await appMode.steps.goToInputs()
-    await expect(appMode.select.inputItemTitles).toHaveText(WIDGETS)
-
-    await appMode.select.dragInputItem(0, 1)
-    await expect(appMode.select.inputItemTitles).toHaveText([
-      'steps',
-      'seed',
-      'cfg'
-    ])
-
-    await appMode.steps.goToPreview()
-    await expect(appMode.select.previewWidgetLabels).toHaveText([
-      'steps',
-      'seed',
-      'cfg'
-    ])
-  })
-
-  test('Reorder in preview step reflects in app mode after save', async ({
-    comfyPage
-  }) => {
-    const { appMode } = comfyPage
-    await setupBuilder(comfyPage, undefined, WIDGETS)
-
-    await appMode.steps.goToPreview()
-    await expect(appMode.select.previewWidgetLabels).toHaveText(WIDGETS)
-
-    await appMode.select.dragPreviewItem(0, 2)
-    await expect(appMode.select.previewWidgetLabels).toHaveText([
-      'steps',
-      'cfg',
-      'seed'
-    ])
-
-    const workflowName = `${Date.now()} reorder-preview`
-    await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)
-
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
-    await expect(appMode.select.previewWidgetLabels).toHaveText([
-      'steps',
-      'cfg',
-      'seed'
-    ])
-  })
-
-  test('Reorder inputs persists after save and reload', async ({
-    comfyPage
-  }) => {
-    const { appMode } = comfyPage
-    await setupBuilder(comfyPage, undefined, WIDGETS)
-
-    await appMode.steps.goToInputs()
-    await appMode.select.dragInputItem(0, 2)
-    await expect(appMode.select.inputItemTitles).toHaveText([
-      'steps',
-      'cfg',
-      'seed'
-    ])
-
-    const workflowName = `${Date.now()} reorder-persist`
-    await saveCloseAndReopenAsApp(comfyPage, appMode, workflowName)
-
-    await expect(appMode.linearWidgets).toBeVisible({ timeout: 5000 })
-    await expect(appMode.select.previewWidgetLabels).toHaveText([
-      'steps',
-      'cfg',
-      'seed'
-    ])
-  })
-})

browser_tests/tests/builderSaveFlow.spec.ts

@@ -2,14 +2,45 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '../fixtures/ComfyPage'
+import type { ComfyPage } from '../fixtures/ComfyPage'
 import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
-import {
-  builderSaveAs,
-  openWorkflowFromSidebar,
-  setupBuilder
-} from '../helpers/builderTestUtils'
+import { setupBuilder } from '../helpers/builderTestUtils'
 import { fitToViewInstant } from '../helpers/fitToView'
 
+/**
+ * Open the save-as dialog, fill name + view type, click save,
+ * and wait for the success dialog.
+ */
+async function builderSaveAs(
+  appMode: AppModeHelper,
+  workflowName: string,
+  viewType: 'App' | 'Node graph'
+) {
+  await appMode.footer.saveAsButton.click()
+  await expect(appMode.saveAs.nameInput).toBeVisible({ timeout: 5000 })
+  await appMode.saveAs.fillAndSave(workflowName, viewType)
+  await expect(appMode.saveAs.successMessage).toBeVisible({ timeout: 5000 })
+}
+
+/**
+ * Load a different workflow, then reopen the named one from the sidebar.
+ * Caller must ensure the page is in graph mode (not builder or app mode)
+ * before calling.
+ */
+async function openWorkflowFromSidebar(comfyPage: ComfyPage, name: string) {
+  await comfyPage.workflow.loadWorkflow('default')
+  await comfyPage.nextFrame()
+  const { workflowsTab } = comfyPage.menu
+  await workflowsTab.open()
+  await workflowsTab.getPersistedItem(name).dblclick()
+  await comfyPage.nextFrame()
+
+  await expect(async () => {
+    const path = await comfyPage.workflow.getActiveWorkflowPath()
+    expect(path).toContain(name)
+  }).toPass({ timeout: 5000 })
+}
+
 /**
  * After a first save, open save-as again from the chevron,
  * fill name + view type, and save.
@@ -26,7 +57,13 @@ async function reSaveAs(
 
 test.describe('Builder save flow', { tag: ['@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.appMode.enableLinearMode()
+    await comfyPage.page.evaluate(() => {
+      window.app!.api.serverFeatureFlags.value = {
+        ...window.app!.api.serverFeatureFlags.value,
+        linear_toggle_enabled: true
+      }
+    })
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
     await comfyPage.settings.setSetting(
       'Comfy.AppBuilder.VueNodeSwitchDismissed',
       true
@@ -166,9 +203,10 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {
 
     // Select I/O to enable the button
     await appMode.steps.goToInputs()
-    await appMode.select.selectInputWidget('KSampler', 'seed')
+    const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
+    await appMode.select.selectInputWidget(ksampler)
     await appMode.steps.goToOutputs()
-    await appMode.select.selectOutputNode('Save Image')
+    await appMode.select.selectOutputNode()
 
     // State 2: Enabled "Save as" (unsaved, has outputs)
     const enabledBox = await appMode.footer.saveAsButton.boundingBox()

browser_tests/tests/sidebar/assets.spec.ts

@@ -194,29 +194,6 @@ test.describe('Assets sidebar - grid view display', () => {
     const count = await tab.assetCards.count()
     expect(count).toBeGreaterThanOrEqual(1)
   })
-  test('Displays svg outputs', async ({ comfyPage }) => {
-    await comfyPage.assets.mockOutputHistory([
-      createMockJob({
-        id: 'job-alpha',
-        create_time: 1000,
-        execution_start_time: 1000,
-        execution_end_time: 1010,
-        preview_output: {
-          filename: 'logo.svg',
-          subfolder: '',
-          type: 'output',
-          nodeId: '1',
-          mediaType: 'images'
-        },
-        outputs_count: 1
-      })
-    ])
-
-    const tab = comfyPage.menu.assetsTab
-    await tab.open()
-
-    await expect(tab.assetCards.locator('.pi-image')).toBeVisible()
-  })
 })
 
 // ==========================================================================

browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts

@@ -1,94 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../fixtures/ComfyPage'
-import type { ComfyPage } from '../../fixtures/ComfyPage'
-
-async function openVueNodeContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
-  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
-  await comfyPage.contextMenu.openForVueNode(fixture.header)
-}
-
-test.describe(
-  'Subgraph Duplicate Independent Values',
-  { tag: ['@slow', '@subgraph'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
-    test('Duplicated subgraphs maintain independent widget values', async ({
-      comfyPage
-    }) => {
-      const clipNodeTitle = 'CLIP Text Encode (Prompt)'
-
-      // Convert first CLIP Text Encode node to subgraph
-      await openVueNodeContextMenu(comfyPage, clipNodeTitle)
-      await comfyPage.contextMenu.clickMenuItemExact('Convert to Subgraph')
-      await comfyPage.nextFrame()
-      const subgraphNode = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
-      await expect(subgraphNode).toBeVisible()
-
-      // Duplicate the subgraph
-      await openVueNodeContextMenu(comfyPage, 'New Subgraph')
-      await comfyPage.contextMenu.clickMenuItemExact('Duplicate')
-      await comfyPage.nextFrame()
-
-      // Capture both subgraph node IDs
-      const subgraphNodes = comfyPage.vueNodes.getNodeByTitle('New Subgraph')
-      await expect(subgraphNodes).toHaveCount(2)
-      const nodeIds = await subgraphNodes.evaluateAll((nodes) =>
-        nodes
-          .map((n) => n.getAttribute('data-node-id'))
-          .filter((id): id is string => id !== null)
-      )
-      const [nodeId1, nodeId2] = nodeIds
-
-      // Enter first subgraph, set text widget value
-      await comfyPage.vueNodes.enterSubgraph(nodeId1)
-      await comfyPage.vueNodes.waitForNodes()
-      const textarea1 = comfyPage.vueNodes
-        .getNodeByTitle(clipNodeTitle)
-        .first()
-        .getByRole('textbox', { name: 'text' })
-      await textarea1.fill('subgraph1_value')
-      await expect(textarea1).toHaveValue('subgraph1_value')
-      await comfyPage.subgraph.exitViaBreadcrumb()
-
-      // Enter second subgraph, set text widget value
-      await comfyPage.vueNodes.waitForNodes()
-      await comfyPage.vueNodes.enterSubgraph(nodeId2)
-      await comfyPage.vueNodes.waitForNodes()
-      const textarea2 = comfyPage.vueNodes
-        .getNodeByTitle(clipNodeTitle)
-        .first()
-        .getByRole('textbox', { name: 'text' })
-      await textarea2.fill('subgraph2_value')
-      await expect(textarea2).toHaveValue('subgraph2_value')
-      await comfyPage.subgraph.exitViaBreadcrumb()
-
-      // Re-enter first subgraph, assert value preserved
-      await comfyPage.vueNodes.waitForNodes()
-      await comfyPage.vueNodes.enterSubgraph(nodeId1)
-      await comfyPage.vueNodes.waitForNodes()
-      const textarea1Again = comfyPage.vueNodes
-        .getNodeByTitle(clipNodeTitle)
-        .first()
-        .getByRole('textbox', { name: 'text' })
-      await expect(textarea1Again).toHaveValue('subgraph1_value')
-      await comfyPage.subgraph.exitViaBreadcrumb()
-
-      // Re-enter second subgraph, assert value preserved
-      await comfyPage.vueNodes.waitForNodes()
-      await comfyPage.vueNodes.enterSubgraph(nodeId2)
-      await comfyPage.vueNodes.waitForNodes()
-      const textarea2Again = comfyPage.vueNodes
-        .getNodeByTitle(clipNodeTitle)
-        .first()
-        .getByRole('textbox', { name: 'text' })
-      await expect(textarea2Again).toHaveValue('subgraph2_value')
-    })
-  }
-)

browser_tests/tests/subgraph/subgraphZeroUuid.spec.ts

@@ -1,49 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe(
-  'Zero UUID workflow: subgraph undo rendering',
-  { tag: ['@workflow', '@subgraph'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      test.setTimeout(30000) // Extend timeout as we need to reload the page an additional time
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.page.reload() // Reload page as we need to enter in Vue mode
-      await comfyPage.page.waitForFunction(() => !!window.app?.graph)
-    })
-
-    test('Undo after subgraph enter/exit renders all nodes when workflow starts with zero UUID', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/basic-subgraph-zero-uuid'
-      )
-      await comfyPage.vueNodes.waitForNodes()
-
-      const assertInSubgraph = async (inSubgraph: boolean) => {
-        await expect
-          .poll(() => comfyPage.subgraph.isInSubgraph())
-          .toBe(inSubgraph)
-      }
-
-      // Root graph has 1 subgraph node, rendered in the DOM
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
-      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
-
-      await comfyPage.vueNodes.enterSubgraph()
-      await assertInSubgraph(true)
-
-      await comfyPage.subgraph.exitViaBreadcrumb()
-      await assertInSubgraph(false)
-
-      await comfyPage.canvas.focus()
-      await comfyPage.keyboard.undo()
-      await comfyPage.nextFrame()
-
-      // After undo, the subgraph node is still visible and rendered
-      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
-      await expect.poll(() => comfyPage.vueNodes.getNodeCount()).toBe(1)
-    })
-  }
-)

browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts

@@ -10,14 +10,17 @@ import { TestIds } from '../../../../fixtures/selectors'
 const BYPASS_CLASS = /before:bg-bypass\/60/
 
 async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
-  await comfyPage.contextMenu.clickMenuItemExact(name)
+  await comfyPage.page.getByRole('menuitem', { name, exact: true }).click()
   await comfyPage.nextFrame()
 }
 
 async function openContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
   const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
-  await comfyPage.contextMenu.openForVueNode(fixture.header)
-  return comfyPage.contextMenu.primeVueMenu
+  await fixture.header.click()
+  await fixture.header.click({ button: 'right' })
+  const menu = comfyPage.contextMenu.primeVueMenu
+  await menu.waitFor({ state: 'visible' })
+  return menu
 }
 
 async function openMultiNodeContextMenu(

codecov.yml

@@ -1,6 +0,0 @@
-comment:
-  layout: 'header, diff, flags, files'
-  behavior: default
-  require_changes: false
-  require_base: false
-  require_head: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.15",
+  "version": "1.43.14",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -58,6 +58,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "catalog:",
     "@comfyorg/design-system": "workspace:*",
+    "@comfyorg/ingest-types": "workspace:*",
     "@comfyorg/registry-types": "workspace:*",
     "@comfyorg/shared-frontend-utils": "workspace:*",
     "@comfyorg/tailwind-utils": "workspace:*",
@@ -122,7 +123,6 @@
     "zod-validation-error": "catalog:"
   },
   "devDependencies": {
-    "@comfyorg/ingest-types": "workspace:*",
     "@eslint/js": "catalog:",
     "@intlify/eslint-plugin-vue-i18n": "catalog:",
     "@lobehub/i18n-cli": "catalog:",

packages/design-system/src/icons/elevenlabs.svg

@@ -1 +1 @@
-<svg fill="currentColor" fill-rule="evenodd" height="1em" style="line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ElevenLabs</title><path d="M5 0h5v24H5V0zM14 0h5v24h-5V0z"></path></svg>
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>ElevenLabs</title><path d="M5 0h5v24H5V0zM14 0h5v24h-5V0z"></path></svg>

packages/shared-frontend-utils/src/formatUtil.test.ts

@@ -62,8 +62,7 @@ describe('formatUtil', () => {
         { filename: 'animation.gif', expected: 'image' },
         { filename: 'web.webp', expected: 'image' },
         { filename: 'bitmap.bmp', expected: 'image' },
-        { filename: 'modern.avif', expected: 'image' },
-        { filename: 'logo.svg', expected: 'image' }
+        { filename: 'modern.avif', expected: 'image' }
       ]
 
       it.for(imageTestCases)(

packages/shared-frontend-utils/src/formatUtil.ts

@@ -542,8 +542,7 @@ const IMAGE_EXTENSIONS = [
   'bmp',
   'avif',
   'tif',
-  'tiff',
-  'svg'
+  'tiff'
 ] as const
 const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi'] as const
 const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const

pnpm-lock.yaml

@@ -419,6 +419,9 @@ importers:
       '@comfyorg/design-system':
         specifier: workspace:*
         version: link:packages/design-system
+      '@comfyorg/ingest-types':
+        specifier: workspace:*
+        version: link:packages/ingest-types
       '@comfyorg/registry-types':
         specifier: workspace:*
         version: link:packages/registry-types
@@ -606,9 +609,6 @@ importers:
         specifier: 'catalog:'
         version: 3.3.0(zod@3.25.76)
     devDependencies:
-      '@comfyorg/ingest-types':
-        specifier: workspace:*
-        version: link:packages/ingest-types
       '@eslint/js':
         specifier: 'catalog:'
         version: 9.39.1

src/components/builder/AppModeWidgetList.vue

@@ -170,8 +170,6 @@ defineExpose({ handleDragDrop })
         ? `${action.widget.label ?? action.widget.name} — ${action.node.title}`
         : undefined
     "
-    :data-testid="builderMode ? 'builder-widget-item' : 'app-mode-widget-item'"
-    :data-widget-key="key"
   >
     <div
       :class="
@@ -183,7 +181,6 @@ defineExpose({ handleDragDrop })
     >
       <span
         :class="cn('truncate text-sm/8', builderMode && 'pointer-events-none')"
-        data-testid="builder-widget-label"
       >
         {{ action.widget.label || action.widget.name }}
       </span>

src/core/graph/widgets/dynamicWidgets.test.ts

@@ -143,14 +143,14 @@ describe('Autogrow', () => {
   test('Can add autogrow with min input count', () => {
     const node = testNode()
     addAutogrow(node, { min: 4, input: inputsSpec })
-    expect(node.inputs.length).toBe(5)
+    expect(node.inputs.length).toBe(4)
   })
   test('Adding connections will cause growth up to max', () => {
     const graph = new LGraph()
     const node = testNode()
     graph.add(node)
     addAutogrow(node, { min: 1, input: inputsSpec, prefix: 'test', max: 3 })
-    expect(node.inputs.length).toBe(2)
+    expect(node.inputs.length).toBe(1)
 
     connectInput(node, 0, graph)
     expect(node.inputs.length).toBe(2)
@@ -159,7 +159,7 @@ describe('Autogrow', () => {
     connectInput(node, 2, graph)
     expect(node.inputs.length).toBe(3)
   })
-  test('Removing connections decreases to min + 1', async () => {
+  test('Removing connections decreases to min', async () => {
     const graph = new LGraph()
     const node = testNode()
     graph.add(node)
@@ -204,9 +204,9 @@ describe('Autogrow', () => {
       '0.a0',
       '0.a1',
       '0.a2',
-      '2.b0',
-      '2.b1',
-      '2.b2',
+      '1.b0',
+      '1.b1',
+      '1.b2',
       'aa'
     ])
   })

src/core/graph/widgets/dynamicWidgets.ts

@@ -511,7 +511,7 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
       lastInput
     )
   }
-  const removalChecks = groupInputs.slice(min * stride)
+  const removalChecks = groupInputs.slice((min - 1) * stride)
   let i
   for (i = removalChecks.length - stride; i >= 0; i -= stride) {
     if (removalChecks.slice(i, i + stride).some((inp) => inp.link)) break
@@ -597,6 +597,6 @@ function applyAutogrow(node: LGraphNode, inputSpecV2: InputSpecV2) {
     prefix,
     inputSpecs: inputsV2
   }
-  for (let i = 0; i === 0 || i < min + 1; i++)
+  for (let i = 0; i === 0 || i < min; i++)
     addAutogrowGroup(i, inputSpecV2.name, node)
 }

src/lib/litegraph/src/LGraph.test.ts

@@ -12,7 +12,6 @@ import {
 } from '@/lib/litegraph/src/litegraph'
 import type { SerialisableGraph } from '@/lib/litegraph/src/types/serialisation'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
-import { zeroUuid } from '@/lib/litegraph/src/utils/uuid'
 import { usePromotionStore } from '@/stores/promotionStore'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 import {
@@ -1006,25 +1005,3 @@ describe('deduplicateSubgraphNodeIds (via configure)', () => {
     expect(nodeIdSet(graph, SUBGRAPH_B)).toEqual(new Set([20, 21, 22]))
   })
 })
-
-describe('Zero UUID handling in configure', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia())
-  })
-
-  it('rejects zeroUuid for root graphs and assigns a new ID', () => {
-    const graph = new LGraph()
-    const data = graph.serialize()
-    data.id = zeroUuid
-    graph.configure(data)
-    expect(graph.id).not.toBe(zeroUuid)
-  })
-
-  it('preserves zeroUuid for subgraphs', () => {
-    const graph = new LGraph()
-    const subgraphData = { ...createTestSubgraphData(), id: zeroUuid }
-    const subgraph = graph.createSubgraph(subgraphData)
-    subgraph.configure(subgraphData)
-    expect(subgraph.id).toBe(zeroUuid)
-  })
-})

src/lib/litegraph/src/LGraph.ts

@@ -2480,8 +2480,8 @@ export class LGraph
   protected _configureBase(data: ISerialisedGraph | SerialisableGraph): void {
     const { id, extra } = data
 
-    // Create a new graph ID if none is provided or the zero UUID is used on the root graph
-    if (id && !(this.isRootGraph && id === zeroUuid)) {
+    // Create a new graph ID if none is provided
+    if (id) {
       this.id = id
     } else if (this.id === zeroUuid) {
       this.id = createUuidv4()

src/platform/distribution/cloudPreviewUtil.ts

@@ -14,11 +14,6 @@ export function appendCloudResParam(
   filename?: string
 ): void {
   if (!isCloud) return
-  if (
-    filename &&
-    (getMediaTypeFromFilename(filename) !== 'image' ||
-      filename.toLowerCase().endsWith('.svg'))
-  )
-    return
+  if (filename && getMediaTypeFromFilename(filename) !== 'image') return
   params.set('res', '512')
 }

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

@@ -0,0 +1,184 @@
+<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,
+      useComfyApi: remoteConfig.value.use_comfy_api
+    })
+    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,6 +1,11 @@
 <template>
+  <RichComboWidget
+    v-if="hasItemSchema"
+    v-model="modelValue"
+    :widget
+  />
   <WidgetSelectDropdown
-    v-if="isDropdownUIWidget"
+    v-else-if="isDropdownUIWidget"
     v-model="modelValue"
     :widget
     :node-type="widget.nodeType ?? nodeType"
@@ -24,6 +29,7 @@
 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'
@@ -53,6 +59,10 @@ 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,6 +34,8 @@ interface Props {
   accept?: string
   filterOptions?: FilterOption[]
   sortOptions?: SortOption[]
+  showSort?: boolean
+  showLayoutSwitcher?: boolean
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -61,6 +63,8 @@ const {
   accept,
   filterOptions = [],
   sortOptions = getDefaultSortOptions(),
+  showSort = true,
+  showLayoutSwitcher = true,
   showOwnershipFilter,
   ownershipOptions,
   showBaseModelFilter,
@@ -232,6 +236,8 @@ 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,6 +20,8 @@ interface Props {
   isSelected: (item: FormDropdownItem, index: number) => boolean
   filterOptions: FilterOption[]
   sortOptions: SortOption[]
+  showSort?: boolean
+  showLayoutSwitcher?: boolean
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -31,6 +33,8 @@ const {
   isSelected,
   filterOptions,
   sortOptions,
+  showSort = true,
+  showLayoutSwitcher = true,
   showOwnershipFilter,
   ownershipOptions,
   showBaseModelFilter,
@@ -112,6 +116,8 @@ 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
@@ -145,6 +151,7 @@ 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,8 +18,13 @@ import type { LayoutMode, SortOption } from './types'
 const { t } = useI18n()
 const overlayProps = useTransformCompatOverlayProps()
 
-defineProps<{
+const {
+  showSort = true,
+  showLayoutSwitcher = true
+} = defineProps<{
   sortOptions: SortOption[]
+  showSort?: boolean
+  showLayoutSwitcher?: boolean
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -114,6 +119,7 @@ function toggleBaseModelSelection(item: FilterOption) {
     />
 
     <Button
+      v-if="showSort"
       ref="sortTriggerRef"
       variant="textonly"
       size="icon"
@@ -132,6 +138,7 @@ 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"
@@ -309,6 +316,7 @@ function toggleBaseModelSelection(item: FilterOption) {
     </Popover>
 
     <div
+      v-if="showLayoutSwitcher"
       :class="
         cn(
           actionButtonStyle,

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

@@ -12,6 +12,7 @@ interface Props {
   previewUrl: string
   name: string
   label?: string
+  description?: string
   layout?: LayoutMode
 }
 
@@ -27,11 +28,31 @@ 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
@@ -107,6 +128,25 @@ 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"
@@ -144,6 +184,13 @@ 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,7 +12,9 @@ export interface FormDropdownItem {
   name: string
   /** Original/alternate label (e.g., original filename) */
   label?: string
-  /** Preview image/video URL */
+  /** Short description shown below the name in list view */
+  description?: string
+  /** Preview image/video/audio 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,7 +214,9 @@ const addComboWidget = (
     }
   )
 
-  if (inputSpec.remote) {
+  if (inputSpec.remote && !inputSpec.remote.item_schema) {
+    // Skip useRemoteWidget when item_schema is present —
+    // RichComboWidget handles its own data fetching and rendering.
     if (!isComboWidget(widget)) {
       throw new Error(`Expected combo widget but received ${widget.type}`)
     }

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

@@ -2,10 +2,12 @@ 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 { useAuthStore } from '@/stores/authStore'
+import {
+  getRemoteAuthHeaders,
+  resolveRoute
+} from '../utils/resolveRemoteRoute'
 
 const MAX_RETRIES = 5
 const TIMEOUT = 4096
@@ -21,17 +23,6 @@ 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 => {
@@ -73,9 +64,10 @@ const fetchData = async (
 ) => {
   const { route, response_key, query_params, timeout = TIMEOUT } = config
 
-  const authHeaders = await getAuthHeaders()
+  const url = resolveRoute(route, config.use_comfy_api)
+  const authHeaders = await getRemoteAuthHeaders(config.use_comfy_api)
 
-  const res = await axios.get(route, {
+  const res = await axios.get(url, {
     params: query_params,
     signal: controller.signal,
     timeout,

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

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

@@ -0,0 +1,55 @@
+import axios from 'axios'
+
+import { getComfyApiBaseUrl } from '@/config/comfyApi'
+import { useAuthStore } from '@/stores/authStore'
+
+/**
+ * Resolve a RemoteOptions route to a full URL.
+ * - useComfyApi=true → prepend getComfyApiBaseUrl()
+ * - Otherwise → use as-is
+ */
+export function resolveRoute(
+  route: string,
+  useComfyApi?: boolean
+): string {
+  if (useComfyApi) {
+    return getComfyApiBaseUrl() + route
+  }
+  return route
+}
+
+/**
+ * Get auth headers for a remote request.
+ * - useComfyApi=true → inject auth headers (comfy-api requires it)
+ * - Otherwise → no auth headers injected
+ */
+export async function getRemoteAuthHeaders(
+  useComfyApi?: boolean
+): Promise<Record<string, any>> {
+  if (useComfyApi) {
+    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
+    useComfyApi?: boolean
+  } = {}
+) {
+  const { useComfyApi, ...requestOptions } = options
+  const url = resolveRoute(route, useComfyApi)
+  const authHeaders = await getRemoteAuthHeaders(useComfyApi)
+  return axios.get(url, { ...requestOptions, ...authHeaders })
+}

src/schemas/nodeDefSchema.ts

@@ -5,6 +5,16 @@ 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(),
@@ -13,7 +23,9 @@ 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()
+  max_retries: z.number().gte(0).optional(),
+  item_schema: zRemoteItemSchema.optional(),
+  use_comfy_api: z.boolean().optional()
 })
 const zMultiSelectOption = z.object({
   placeholder: z.string().optional(),
@@ -354,6 +366,7 @@ 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>

src/stores/subgraphNavigationStore.ts

@@ -12,7 +12,6 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import { app } from '@/scripts/app'
 import { findSubgraphPathById } from '@/utils/graphTraversalUtil'
-import { anyItemOverlapsRect } from '@/utils/mathUtil'
 import { isNonNullish, isSubgraph } from '@/utils/typeGuardUtil'
 
 export const VIEWPORT_CACHE_MAX_SIZE = 32
@@ -139,19 +138,11 @@ export const useSubgraphNavigationStore = defineStore(
         return
       }
 
-      // Cache miss — fit to content only if no nodes are currently visible.
-      // loadGraphData may have already restored extra.ds or called fitView
-      // for templates, so only intervene when the viewport is truly empty.
+      // Cache miss — fit to content after the canvas has the new graph.
+      // rAF fires after layout + paint, when nodes are positioned.
+      const expectedGraphId = graphId
       requestAnimationFrame(() => {
-        if (getActiveGraphId() !== graphId) return
-        if (!canvas.graph) return
-
-        const nodes = canvas.graph.nodes
-        if (!nodes?.length) return
-
-        canvas.ds.computeVisibleArea(canvas.viewport)
-        if (anyItemOverlapsRect(nodes, canvas.ds.visible_area)) return
-
+        if (getActiveGraphId() !== expectedGraphId) return
         useLitegraphService().fitView()
       })
     }

src/stores/subgraphNavigationStore.viewport.test.ts

@@ -24,11 +24,8 @@ vi.mock('@/scripts/app', () => {
       scale: 1,
       offset: [0, 0],
       state: { scale: 1, offset: [0, 0] },
-      fitToBounds: vi.fn(),
-      visible_area: [0, 0, 1000, 1000],
-      computeVisibleArea: vi.fn()
+      fitToBounds: vi.fn()
     },
-    viewport: [0, 0, 1000, 1000],
     setDirty: mockSetDirty,
     get empty() {
       return true
@@ -187,11 +184,6 @@ describe('useSubgraphNavigationStore - Viewport Persistence', () => {
       // Ensure no cached entry
       store.viewportCache.delete(':root')
 
-      // Add a node outside the visible area so anyItemOverlapsRect returns false
-      const mockGraph = app.graph as { nodes: unknown[]; _nodes: unknown[] }
-      mockGraph.nodes = [{ pos: [9999, 9999], size: [100, 100] }]
-      mockGraph._nodes = mockGraph.nodes
-
       // Use the root graph ID so the stale-guard passes
       store.restoreViewport('root')
 
@@ -202,10 +194,6 @@ describe('useSubgraphNavigationStore - Viewport Persistence', () => {
       rafCallbacks[0](performance.now())
 
       expect(mockFitView).toHaveBeenCalledOnce()
-
-      // Cleanup
-      mockGraph.nodes = []
-      mockGraph._nodes = []
     })
 
     it('skips fitView if active graph changed before rAF fires', () => {