[automated] Update test expectations

test: add E2E tests for Load3D model upload and drag-drop and basic e2e for 3d viewer
test: add basic E2E tests for Load3D node (#10731 )
2026-04-08 05:19:59 +00:00 · 2026-04-08 03:03:04 +00:00 · 2026-04-07 22:49:27 -04:00 · 2026-04-07 22:41:12 -04:00 · 2026-04-08 10:40:12 +09:00 · 2026-04-07 17:45:42 -07:00
50 changed files with 2516 additions and 152 deletions
--- a/.github/workflows/ci-tests-unit.yaml
+++ b/.github/workflows/ci-tests-unit.yaml
@@ -31,4 +31,5 @@ jobs:
        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
        with:
          files: coverage/lcov.info
+          token: ${{ secrets.CODECOV_TOKEN }}
          fail_ci_if_error: false
--- a/.github/workflows/release-version-bump.yaml
+++ b/.github/workflows/release-version-bump.yaml
@@ -144,6 +144,8 @@ jobs:

      - name: Install pnpm
        uses: pnpm/action-setup@fc06bc1257f339d1d5d8b3a19a8cae5388b55320 # v4.4.0
+        with:
+          version: 10

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/browser_tests/assets/3d/load3d_node.json
+++ b/browser_tests/assets/3d/load3d_node.json
@@ -0,0 +1,47 @@
+{
+  "last_node_id": 1,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "Load3D",
+      "pos": [50, 50],
+      "size": [400, 650],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        },
+        {
+          "name": "MASK",
+          "type": "MASK",
+          "links": null
+        },
+        {
+          "name": "MESH",
+          "type": "MESH",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "Load3D"
+      },
+      "widgets_values": ["", 1024, 1024, "#000000"]
+    }
+  ],
+  "links": [],
+  "groups": [],
+  "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
+  "version": 0.4
+}
--- a/browser_tests/assets/cube.obj
+++ b/browser_tests/assets/cube.obj
@@ -0,0 +1,40 @@
+# Blender 5.2.0 Alpha
+# www.blender.org
+mtllib Untitled.mtl
+o Cube
+v 2.857396 2.486626 -0.081892
+v 2.857396 0.486626 -0.081892
+v 2.857396 2.486626 1.918108
+v 2.857396 0.486626 1.918108
+v 0.857396 2.486626 -0.081892
+v 0.857396 0.486626 -0.081892
+v 0.857396 2.486626 1.918108
+v 0.857396 0.486626 1.918108
+vn -0.0000 1.0000 -0.0000
+vn -0.0000 -0.0000 1.0000
+vn -1.0000 -0.0000 -0.0000
+vn -0.0000 -1.0000 -0.0000
+vn 1.0000 -0.0000 -0.0000
+vn -0.0000 -0.0000 -1.0000
+vt 0.625000 0.500000
+vt 0.875000 0.500000
+vt 0.875000 0.750000
+vt 0.625000 0.750000
+vt 0.375000 0.750000
+vt 0.625000 1.000000
+vt 0.375000 1.000000
+vt 0.375000 0.000000
+vt 0.625000 0.000000
+vt 0.625000 0.250000
+vt 0.375000 0.250000
+vt 0.125000 0.500000
+vt 0.375000 0.500000
+vt 0.125000 0.750000
+s 0
+usemtl Material
+f 1/1/1 5/2/1 7/3/1 3/4/1
+f 4/5/2 3/4/2 7/6/2 8/7/2
+f 8/8/3 7/9/3 5/10/3 6/11/3
+f 6/12/4 2/13/4 4/5/4 8/14/4
+f 2/13/5 1/1/5 3/4/5 4/5/5
+f 6/11/6 5/10/6 1/1/6 2/13/6
--- a/browser_tests/assets/subgraphs/basic-subgraph-zero-uuid.json
+++ b/browser_tests/assets/subgraphs/basic-subgraph-zero-uuid.json
@@ -0,0 +1,197 @@
+{
+  "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
+}
--- a/browser_tests/fixtures/ComfyPage.ts
+++ b/browser_tests/fixtures/ComfyPage.ts
@@ -29,6 +29,8 @@ 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'
@@ -177,6 +179,7 @@ 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 */
@@ -227,6 +230,7 @@ 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)
  }

@@ -448,6 +452,7 @@ export const comfyPageFixture = base.extend<{

    await use(comfyPage)

+    await comfyPage.assetApi.clearMocks()
    if (needsPerf) await comfyPage.perf.dispose()
  },
  comfyMouse: async ({ comfyPage }, use) => {
--- a/browser_tests/fixtures/components/ContextMenu.ts
+++ b/browser_tests/fixtures/components/ContextMenu.ts
@@ -20,6 +20,10 @@ 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()
  }
@@ -48,6 +52,18 @@ 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()
--- a/browser_tests/fixtures/data/assetFixtures.ts
+++ b/browser_tests/fixtures/data/assetFixtures.ts
@@ -0,0 +1,306 @@
+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`
+    })
+  )
+}
--- a/browser_tests/fixtures/helpers/AppModeHelper.ts
+++ b/browser_tests/fixtures/helpers/AppModeHelper.ts
@@ -3,6 +3,7 @@ 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'
@@ -13,18 +14,31 @@ 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
@@ -91,6 +105,13 @@ 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").
--- a/browser_tests/fixtures/helpers/AppModeWidgetHelper.ts
+++ b/browser_tests/fixtures/helpers/AppModeWidgetHelper.ts
@@ -0,0 +1,93 @@
+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
+  }
+}
--- a/browser_tests/fixtures/helpers/AssetHelper.ts
+++ b/browser_tests/fixtures/helpers/AssetHelper.ts
@@ -0,0 +1,317 @@
+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)
+}
--- a/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
+++ b/browser_tests/fixtures/helpers/BuilderSelectHelper.ts
@@ -1,9 +1,36 @@
 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) {}

@@ -99,41 +126,69 @@ export class BuilderSelectHelper {
    await this.comfyPage.nextFrame()
  }

-  /** Center on a node and click its first widget to select it as input. */
-  async selectInputWidget(node: NodeReference) {
+  /**
+   * 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) {
    await this.comfyPage.canvasOps.setScale(1)
-    await node.centerOnNode()
-
-    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)
+    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()
  }

-  /** 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()
+  /** All IoItem title locators in the inputs step sidebar. */
+  get inputItemTitles(): Locator {
+    return this.page.getByTestId(TestIds.builder.ioItemTitle)
+  }

-    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
+  /** 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)
    )
+    await nodeLocator.click({ force: true })
    await this.comfyPage.nextFrame()
  }
 }
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -111,7 +111,12 @@ export const TestIds = {
    ioItem: 'builder-io-item',
    ioItemTitle: 'builder-io-item-title',
    widgetActionsMenu: 'widget-actions-menu',
-    opensAs: 'builder-opens-as'
+    opensAs: 'builder-opens-as',
+    widgetItem: 'builder-widget-item',
+    widgetLabel: 'builder-widget-label'
+  },
+  appMode: {
+    widgetItem: 'app-mode-widget-item'
  },
  breadcrumb: {
    subgraph: 'subgraph-breadcrumb'
@@ -130,6 +135,9 @@ export const TestIds = {
  errors: {
    imageLoadError: 'error-loading-image',
    videoLoadError: 'error-loading-video'
+  },
+  loading: {
+    overlay: 'loading-overlay'
  }
 } as const

@@ -149,6 +157,7 @@ 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],
@@ -159,3 +168,4 @@ export type TestIdValue =
  | (typeof TestIds.subgraphEditor)[keyof typeof TestIds.subgraphEditor]
  | (typeof TestIds.queue)[keyof typeof TestIds.queue]
  | (typeof TestIds.errors)[keyof typeof TestIds.errors]
+  | (typeof TestIds.loading)[keyof typeof TestIds.loading]
--- a/browser_tests/helpers/builderTestUtils.ts
+++ b/browser_tests/helpers/builderTestUtils.ts
@@ -1,11 +1,18 @@
 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.
 *
@@ -13,41 +20,48 @@ import { getPromotedWidgetNames } from './promotedWidgets'
 * to subgraph), then enters builder mode and selects inputs + outputs.
 *
 * @param comfyPage - The page fixture.
- * @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.
+ * @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.
 */
 export async function setupBuilder(
  comfyPage: ComfyPage,
-  getInputNode?: (ksampler: NodeReference) => Promise<NodeReference>
-): Promise<NodeReference> {
+  prepareGraph?: (ksampler: NodeReference) => Promise<BuilderSetupResult>,
+  widgetNames?: string[]
+): Promise<void> {
  const { appMode } = comfyPage
  await comfyPage.workflow.loadWorkflow('default')

  const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-  const inputNode = getInputNode ? await getInputNode(ksampler) : ksampler
+
+  const { inputNodeTitle, widgetNames: inputWidgets } = prepareGraph
+    ? await prepareGraph(ksampler)
+    : { inputNodeTitle: 'KSampler', widgetNames: widgetNames ?? ['seed'] }

  await fitToViewInstant(comfyPage)
  await appMode.enterBuilder()
  await appMode.steps.goToInputs()
-  await appMode.select.selectInputWidget(inputNode)
+
+  for (const name of inputWidgets) {
+    await appMode.select.selectInputWidget(inputNodeTitle, name)
+  }

  await appMode.steps.goToOutputs()
-  await appMode.select.selectOutputNode()
-
-  return inputNode
+  await appMode.select.selectOutputNode('Save Image')
 }

 /**
 * 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<NodeReference> {
-  return setupBuilder(comfyPage, async (ksampler) => {
+): Promise<void> {
+  await setupBuilder(comfyPage, async (ksampler) => {
    await ksampler.click('title')
    const subgraphNode = await ksampler.convertToSubgraph()
    await comfyPage.nextFrame()
@@ -58,10 +72,52 @@ export async function setupSubgraphBuilder(
    )
    expect(promotedNames).toContain('seed')

-    return subgraphNode
+    return {
+      inputNodeTitle: 'New Subgraph',
+      widgetNames: ['seed']
+    }
  })
 }

+/**
+ * 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,
--- a/browser_tests/tests/appModeDropdownClipping.spec.ts
+++ b/browser_tests/tests/appModeDropdownClipping.spec.ts
@@ -60,13 +60,7 @@ async function addNode(page: Page, nodeType: string): Promise<string> {

 test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
  test.beforeEach(async ({ comfyPage }) => {
-    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.appMode.enableLinearMode()
  })

  test('Select dropdown is not clipped in app mode panel', async ({
--- a/browser_tests/tests/appModeWidgetRename.spec.ts
+++ b/browser_tests/tests/appModeWidgetRename.spec.ts
@@ -9,13 +9,7 @@ import {

 test.describe('App mode widget rename', { tag: ['@ui', '@subgraph'] }, () => {
  test.beforeEach(async ({ comfyPage }) => {
-    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.appMode.enableLinearMode()
    await comfyPage.settings.setSetting(
      'Comfy.AppBuilder.VueNodeSwitchDismissed',
      true
--- a/browser_tests/tests/appModeWidgetValues.spec.ts
+++ b/browser_tests/tests/appModeWidgetValues.spec.ts
@@ -0,0 +1,94 @@
+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)
+    }
+  })
+})
--- a/browser_tests/tests/assetHelper.spec.ts
+++ b/browser_tests/tests/assetHelper.spec.ts
@@ -0,0 +1,382 @@
+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')
+    })
+  })
+})
--- a/browser_tests/tests/builderReorder.spec.ts
+++ b/browser_tests/tests/builderReorder.spec.ts
@@ -0,0 +1,157 @@
+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'
+    ])
+  })
+})
--- a/browser_tests/tests/builderSaveFlow.spec.ts
+++ b/browser_tests/tests/builderSaveFlow.spec.ts
@@ -2,45 +2,14 @@ import {
  comfyPageFixture as test,
  comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import type { ComfyPage } from '../fixtures/ComfyPage'
 import type { AppModeHelper } from '../fixtures/helpers/AppModeHelper'
-import { setupBuilder } from '../helpers/builderTestUtils'
+import {
+  builderSaveAs,
+  openWorkflowFromSidebar,
+  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.
@@ -57,13 +26,7 @@ async function reSaveAs(

 test.describe('Builder save flow', { tag: ['@ui'] }, () => {
  test.beforeEach(async ({ comfyPage }) => {
-    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.appMode.enableLinearMode()
    await comfyPage.settings.setSetting(
      'Comfy.AppBuilder.VueNodeSwitchDismissed',
      true
@@ -203,10 +166,9 @@ test.describe('Builder save flow', { tag: ['@ui'] }, () => {

    // Select I/O to enable the button
    await appMode.steps.goToInputs()
-    const ksampler = await comfyPage.nodeOps.getNodeRefById('3')
-    await appMode.select.selectInputWidget(ksampler)
+    await appMode.select.selectInputWidget('KSampler', 'seed')
    await appMode.steps.goToOutputs()
-    await appMode.select.selectOutputNode()
+    await appMode.select.selectOutputNode('Save Image')

    // State 2: Enabled "Save as" (unsaved, has outputs)
    const enabledBox = await appMode.footer.saveAsButton.boundingBox()
--- a/browser_tests/tests/changeTracker.spec.ts
+++ b/browser_tests/tests/changeTracker.spec.ts
@@ -33,35 +33,45 @@ test.describe('Change Tracker', { tag: '@workflow' }, () => {
      // Save, confirm no errors & workflow modified flag removed
      await comfyPage.menu.topbar.saveWorkflow('undo-redo-test')
      expect(await comfyPage.toast.getToastErrorCount()).toBe(0)
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(false)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(0)
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(false)
+      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
+      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(0)

      const node = (await comfyPage.nodeOps.getFirstNodeRef())!
      await node.click('title')
      await node.click('collapse')
      await expect(node).toBeCollapsed()
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(1)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(0)
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(true)
+      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(1)
+      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(0)

      await comfyPage.keyboard.bypass()
      await expect(node).toBeBypassed()
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(2)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(0)
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(true)
+      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(2)
+      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(0)

      await comfyPage.keyboard.undo()
      await expect(node).not.toBeBypassed()
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(true)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(1)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(1)
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(true)
+      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(1)
+      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(1)

      await comfyPage.keyboard.undo()
      await expect(node).not.toBeCollapsed()
-      expect(await comfyPage.workflow.isCurrentWorkflowModified()).toBe(false)
-      expect(await comfyPage.workflow.getUndoQueueSize()).toBe(0)
-      expect(await comfyPage.workflow.getRedoQueueSize()).toBe(2)
+      await expect
+        .poll(() => comfyPage.workflow.isCurrentWorkflowModified())
+        .toBe(false)
+      await expect.poll(() => comfyPage.workflow.getUndoQueueSize()).toBe(0)
+      await expect.poll(() => comfyPage.workflow.getRedoQueueSize()).toBe(2)
    })
  })

--- a/browser_tests/tests/load3d/Load3DHelper.ts
+++ b/browser_tests/tests/load3d/Load3DHelper.ts
@@ -0,0 +1,51 @@
+import { expect } from '@playwright/test'
+import type { Locator } from '@playwright/test'
+
+export class Load3DHelper {
+  constructor(readonly node: Locator) {}
+
+  get canvas(): Locator {
+    return this.node.locator('canvas')
+  }
+
+  get menuButton(): Locator {
+    return this.node.getByRole('button', { name: /show menu/i })
+  }
+
+  get recordingButton(): Locator {
+    return this.node.getByRole('button', { name: /start recording/i })
+  }
+
+  get colorInput(): Locator {
+    return this.node.locator('input[type="color"]')
+  }
+
+  get openViewerButton(): Locator {
+    return this.node.getByRole('button', { name: /open in 3d viewer/i })
+  }
+
+  getUploadButton(label: string): Locator {
+    return this.node.getByText(label)
+  }
+
+  getMenuCategory(name: string): Locator {
+    return this.node.getByText(name, { exact: true })
+  }
+
+  async openMenu(): Promise<void> {
+    await this.menuButton.click()
+  }
+
+  async setBackgroundColor(hex: string): Promise<void> {
+    await this.colorInput.evaluate((el, value) => {
+      ;(el as HTMLInputElement).value = value
+      el.dispatchEvent(new Event('input', { bubbles: true }))
+    }, hex)
+  }
+
+  async waitForModelLoaded(): Promise<void> {
+    await expect(this.node.getByTestId('loading-overlay')).toBeHidden({
+      timeout: 30000
+    })
+  }
+}
--- a/browser_tests/tests/load3d/Load3DViewerHelper.ts
+++ b/browser_tests/tests/load3d/Load3DViewerHelper.ts
@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+
+export class Load3DViewerHelper {
+  readonly dialog: Locator
+
+  constructor(readonly page: Page) {
+    this.dialog = page.locator('[aria-labelledby="global-load3d-viewer"]')
+  }
+
+  get canvas(): Locator {
+    return this.dialog.locator('canvas')
+  }
+
+  get sidebar(): Locator {
+    return this.dialog.locator('.w-72')
+  }
+
+  get cancelButton(): Locator {
+    return this.dialog.getByRole('button', { name: /cancel/i })
+  }
+
+  async waitForOpen(): Promise<void> {
+    await expect(this.dialog).toBeVisible({ timeout: 10000 })
+  }
+
+  async waitForClosed(): Promise<void> {
+    await expect(this.dialog).toBeHidden({ timeout: 5000 })
+  }
+}
--- a/browser_tests/tests/load3d/load3d.spec.ts
+++ b/browser_tests/tests/load3d/load3d.spec.ts
@@ -0,0 +1,172 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { Load3DHelper } from './Load3DHelper'
+
+test.describe('Load3D', () => {
+  let load3d: Load3DHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('3d/load3d_node')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    load3d = new Load3DHelper(node)
+  })
+
+  test(
+    'Renders canvas with upload buttons and controls menu',
+    { tag: ['@smoke', '@screenshot'] },
+    async () => {
+      await expect(load3d.node).toBeVisible()
+
+      await expect(load3d.canvas).toBeVisible()
+
+      const canvasBox = await load3d.canvas.boundingBox()
+      expect(canvasBox!.width).toBeGreaterThan(0)
+      expect(canvasBox!.height).toBeGreaterThan(0)
+
+      await expect(load3d.getUploadButton('upload 3d model')).toBeVisible()
+      await expect(
+        load3d.getUploadButton('upload extra resources')
+      ).toBeVisible()
+      await expect(load3d.getUploadButton('clear')).toBeVisible()
+
+      await expect(load3d.menuButton).toBeVisible()
+
+      await expect(load3d.node).toHaveScreenshot('load3d-empty-node.png', {
+        maxDiffPixelRatio: 0.05
+      })
+    }
+  )
+
+  test(
+    'Controls menu opens and shows all categories',
+    { tag: ['@smoke', '@screenshot'] },
+    async () => {
+      await load3d.openMenu()
+
+      await expect(load3d.getMenuCategory('Scene')).toBeVisible()
+      await expect(load3d.getMenuCategory('Model')).toBeVisible()
+      await expect(load3d.getMenuCategory('Camera')).toBeVisible()
+      await expect(load3d.getMenuCategory('Light')).toBeVisible()
+      await expect(load3d.getMenuCategory('Export')).toBeVisible()
+
+      await expect(load3d.node).toHaveScreenshot(
+        'load3d-controls-menu-open.png',
+        { maxDiffPixelRatio: 0.05 }
+      )
+    }
+  )
+
+  test(
+    'Changing background color updates the scene',
+    { tag: ['@smoke', '@screenshot'] },
+    async ({ comfyPage }) => {
+      await load3d.setBackgroundColor('#cc3333')
+      await comfyPage.nextFrame()
+
+      await expect
+        .poll(
+          () =>
+            comfyPage.page.evaluate(() => {
+              const n = window.app!.graph.getNodeById(1)
+              const config = n?.properties?.['Scene Config'] as
+                | Record<string, string>
+                | undefined
+              return config?.backgroundColor
+            }),
+          { timeout: 3000 }
+        )
+        .toBe('#cc3333')
+
+      await expect(load3d.node).toHaveScreenshot('load3d-red-background.png', {
+        maxDiffPixelRatio: 0.05
+      })
+    }
+  )
+
+  test(
+    'Recording controls are visible for Load3D',
+    { tag: '@smoke' },
+    async () => {
+      await expect(load3d.recordingButton).toBeVisible()
+    }
+  )
+
+  test(
+    'Uploads a 3D model via button and renders it',
+    { tag: ['@screenshot'] },
+    async ({ comfyPage }) => {
+      const uploadResponsePromise = comfyPage.page.waitForResponse(
+        (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+        { timeout: 15000 }
+      )
+
+      const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
+      await load3d.getUploadButton('upload 3d model').click()
+      const fileChooser = await fileChooserPromise
+      await fileChooser.setFiles(comfyPage.assetPath('cube.obj'))
+
+      await uploadResponsePromise
+
+      await expect
+        .poll(
+          () =>
+            comfyPage.page.evaluate(() => {
+              const n = window.app!.graph.getNodeById(1)
+              const w = n?.widgets?.find((w) => w.name === 'model_file')
+              return w?.value
+            }),
+          { timeout: 15000 }
+        )
+        .toContain('cube.obj')
+
+      await load3d.waitForModelLoaded()
+      await comfyPage.nextFrame()
+
+      await expect(load3d.node).toHaveScreenshot(
+        'load3d-uploaded-cube-obj.png',
+        { maxDiffPixelRatio: 0.1 }
+      )
+    }
+  )
+
+  test(
+    'Drag-and-drops a 3D model onto the canvas',
+    { tag: ['@screenshot'] },
+    async ({ comfyPage }) => {
+      const canvasBox = await load3d.canvas.boundingBox()
+      const dropPosition = {
+        x: canvasBox!.x + canvasBox!.width / 2,
+        y: canvasBox!.y + canvasBox!.height / 2
+      }
+
+      await comfyPage.dragDrop.dragAndDropFile('cube.obj', {
+        dropPosition,
+        waitForUpload: true
+      })
+
+      await expect
+        .poll(
+          () =>
+            comfyPage.page.evaluate(() => {
+              const n = window.app!.graph.getNodeById(1)
+              const w = n?.widgets?.find((w) => w.name === 'model_file')
+              return w?.value
+            }),
+          { timeout: 15000 }
+        )
+        .toContain('cube.obj')
+
+      await load3d.waitForModelLoaded()
+      await comfyPage.nextFrame()
+
+      await expect(load3d.node).toHaveScreenshot(
+        'load3d-dropped-cube-obj.png',
+        { maxDiffPixelRatio: 0.1 }
+      )
+    }
+  )
+})
--- a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-controls-menu-open-chromium-linux.png
+++ b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-controls-menu-open-chromium-linux.png
--- a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-dropped-cube-obj-chromium-linux.png
+++ b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-dropped-cube-obj-chromium-linux.png
--- a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-empty-node-chromium-linux.png
+++ b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-empty-node-chromium-linux.png
--- a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-red-background-chromium-linux.png
+++ b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-red-background-chromium-linux.png
--- a/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-uploaded-cube-obj-chromium-linux.png
+++ b/browser_tests/tests/load3d/load3d.spec.ts-snapshots/load3d-uploaded-cube-obj-chromium-linux.png
--- a/browser_tests/tests/load3d/load3dViewer.spec.ts
+++ b/browser_tests/tests/load3d/load3dViewer.spec.ts
@@ -0,0 +1,63 @@
+import { expect } from '@playwright/test'
+
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+import { Load3DHelper } from './Load3DHelper'
+import { Load3DViewerHelper } from './Load3DViewerHelper'
+
+test.describe('Load3D Viewer', () => {
+  let load3d: Load3DHelper
+  let viewer: Load3DViewerHelper
+
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.settings.setSetting('Comfy.Load3D.3DViewerEnable', true)
+    await comfyPage.workflow.loadWorkflow('3d/load3d_node')
+    await comfyPage.vueNodes.waitForNodes()
+
+    const node = comfyPage.vueNodes.getNodeLocator('1')
+    load3d = new Load3DHelper(node)
+    viewer = new Load3DViewerHelper(comfyPage.page)
+
+    // Upload cube.obj so the node has a model loaded
+    const uploadResponsePromise = comfyPage.page.waitForResponse(
+      (resp) => resp.url().includes('/upload/') && resp.status() === 200,
+      { timeout: 15000 }
+    )
+    const fileChooserPromise = comfyPage.page.waitForEvent('filechooser')
+    await load3d.getUploadButton('upload 3d model').click()
+    const fileChooser = await fileChooserPromise
+    await fileChooser.setFiles(comfyPage.assetPath('cube.obj'))
+    await uploadResponsePromise
+
+    await load3d.waitForModelLoaded()
+  })
+
+  test(
+    'Opens viewer dialog with canvas and controls sidebar',
+    { tag: '@smoke' },
+    async () => {
+      await load3d.openViewerButton.click()
+      await viewer.waitForOpen()
+
+      await expect(viewer.canvas).toBeVisible()
+      const canvasBox = await viewer.canvas.boundingBox()
+      expect(canvasBox!.width).toBeGreaterThan(0)
+      expect(canvasBox!.height).toBeGreaterThan(0)
+
+      await expect(viewer.sidebar).toBeVisible()
+      await expect(viewer.cancelButton).toBeVisible()
+    }
+  )
+
+  test(
+    'Cancel button closes the viewer dialog',
+    { tag: '@smoke' },
+    async () => {
+      await load3d.openViewerButton.click()
+      await viewer.waitForOpen()
+
+      await viewer.cancelButton.click()
+      await viewer.waitForClosed()
+    }
+  )
+})
--- a/browser_tests/tests/sidebar/assets.spec.ts
+++ b/browser_tests/tests/sidebar/assets.spec.ts
@@ -194,6 +194,29 @@ 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()
+  })
 })

 // ==========================================================================
--- a/browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts
@@ -0,0 +1,94 @@
+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')
+    })
+  }
+)
--- a/browser_tests/tests/subgraph/subgraphZeroUuid.spec.ts
+++ b/browser_tests/tests/subgraph/subgraphZeroUuid.spec.ts
@@ -0,0 +1,49 @@
+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)
+    })
+  }
+)
--- a/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/node/contextMenu.spec.ts
@@ -10,17 +10,14 @@ import { TestIds } from '../../../../fixtures/selectors'
 const BYPASS_CLASS = /before:bg-bypass\/60/

 async function clickExactMenuItem(comfyPage: ComfyPage, name: string) {
-  await comfyPage.page.getByRole('menuitem', { name, exact: true }).click()
+  await comfyPage.contextMenu.clickMenuItemExact(name)
  await comfyPage.nextFrame()
 }

 async function openContextMenu(comfyPage: ComfyPage, nodeTitle: string) {
  const fixture = await comfyPage.vueNodes.getFixtureByTitle(nodeTitle)
-  await fixture.header.click()
-  await fixture.header.click({ button: 'right' })
-  const menu = comfyPage.contextMenu.primeVueMenu
-  await menu.waitFor({ state: 'visible' })
-  return menu
+  await comfyPage.contextMenu.openForVueNode(fixture.header)
+  return comfyPage.contextMenu.primeVueMenu
 }

 async function openMultiNodeContextMenu(
--- a/browser_tests/tests/workflowPersistence.spec.ts
+++ b/browser_tests/tests/workflowPersistence.spec.ts
@@ -323,6 +323,71 @@ test.describe('Workflow Persistence', () => {
    expect(linkCountAfter).toBe(linkCountBefore)
  })

+  test('Closing an unmodified inactive tab preserves both workflows', async ({
+    comfyPage
+  }) => {
+    test.info().annotations.push({
+      type: 'regression',
+      description:
+        'PR #10745 — closing inactive tab could corrupt the persisted file'
+    })
+
+    await comfyPage.settings.setSetting(
+      'Comfy.Workflow.WorkflowTabsPosition',
+      'Topbar'
+    )
+
+    const suffix = Date.now().toString(36)
+    const nameA = `test-A-${suffix}`
+    const nameB = `test-B-${suffix}`
+
+    // Save the default workflow as A
+    await comfyPage.menu.topbar.saveWorkflow(nameA)
+    const nodeCountA = await comfyPage.nodeOps.getNodeCount()
+
+    // Create B: duplicate, add a node, then save (unmodified after save)
+    await comfyPage.command.executeCommand('Comfy.DuplicateWorkflow')
+    await comfyPage.nextFrame()
+
+    await comfyPage.page.evaluate(() => {
+      window.app!.graph.add(window.LiteGraph!.createNode('Note', undefined, {}))
+    })
+    await comfyPage.nextFrame()
+    await comfyPage.menu.topbar.saveWorkflow(nameB)
+
+    const nodeCountB = await comfyPage.nodeOps.getNodeCount()
+    expect(nodeCountB).toBe(nodeCountA + 1)
+
+    // Switch to A (making B inactive and unmodified)
+    await comfyPage.menu.topbar.getWorkflowTab(nameA).click()
+    await comfyPage.workflow.waitForWorkflowIdle()
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
+      .toBe(nodeCountA)
+
+    // Close inactive B via middle-click — no save dialog expected
+    await comfyPage.menu.topbar.getWorkflowTab(nameB).click({
+      button: 'middle'
+    })
+    await comfyPage.nextFrame()
+
+    // A should still have its own content
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 3000 })
+      .toBe(nodeCountA)
+
+    // Reopen B from saved list
+    const workflowsTab = comfyPage.menu.workflowsTab
+    await workflowsTab.open()
+    await workflowsTab.getPersistedItem(nameB).dblclick()
+    await comfyPage.workflow.waitForWorkflowIdle()
+
+    // B should have its original content, not A's
+    await expect
+      .poll(() => comfyPage.nodeOps.getNodeCount(), { timeout: 5000 })
+      .toBe(nodeCountB)
+  })
+
  test('Closing an inactive tab with save preserves its own content', async ({
    comfyPage
  }) => {
--- a/codecov.yml
+++ b/codecov.yml
@@ -0,0 +1,6 @@
+comment:
+  layout: 'header, diff, flags, files'
+  behavior: default
+  require_changes: false
+  require_base: false
+  require_head: true
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@comfyorg/comfyui-frontend",
-  "version": "1.43.14",
+  "version": "1.43.15",
  "private": true,
  "description": "Official front-end implementation of ComfyUI",
  "homepage": "https://comfy.org",
@@ -58,7 +58,6 @@
    "@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:*",
@@ -123,6 +122,7 @@
    "zod-validation-error": "catalog:"
  },
  "devDependencies": {
+    "@comfyorg/ingest-types": "workspace:*",
    "@eslint/js": "catalog:",
    "@intlify/eslint-plugin-vue-i18n": "catalog:",
    "@lobehub/i18n-cli": "catalog:",
--- a/packages/design-system/src/icons/elevenlabs.svg
+++ b/packages/design-system/src/icons/elevenlabs.svg
@@ -1 +1 @@
-<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>
+<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>
--- a/packages/shared-frontend-utils/src/formatUtil.test.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.test.ts
@@ -62,7 +62,8 @@ describe('formatUtil', () => {
        { filename: 'animation.gif', expected: 'image' },
        { filename: 'web.webp', expected: 'image' },
        { filename: 'bitmap.bmp', expected: 'image' },
-        { filename: 'modern.avif', expected: 'image' }
+        { filename: 'modern.avif', expected: 'image' },
+        { filename: 'logo.svg', expected: 'image' }
      ]

      it.for(imageTestCases)(
--- a/packages/shared-frontend-utils/src/formatUtil.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.ts
@@ -542,7 +542,8 @@ const IMAGE_EXTENSIONS = [
  'bmp',
  'avif',
  'tif',
-  'tiff'
+  'tiff',
+  'svg'
 ] as const
 const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi'] as const
 const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -419,9 +419,6 @@ 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
@@ -609,6 +606,9 @@ 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
--- a/src/components/builder/AppModeWidgetList.vue
+++ b/src/components/builder/AppModeWidgetList.vue
@@ -170,6 +170,8 @@ 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="
@@ -181,6 +183,7 @@ 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>
--- a/src/components/common/LoadingOverlay.vue
+++ b/src/components/common/LoadingOverlay.vue
@@ -3,6 +3,7 @@
    <div
      v-if="loading"
      class="absolute inset-0 z-50 flex items-center justify-center bg-backdrop/50"
+      data-testid="loading-overlay"
    >
      <div class="flex flex-col items-center">
        <div class="grid place-items-center">
--- a/src/core/graph/widgets/dynamicWidgets.test.ts
+++ b/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(4)
+    expect(node.inputs.length).toBe(5)
  })
  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(1)
+    expect(node.inputs.length).toBe(2)

    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', async () => {
+  test('Removing connections decreases to min + 1', async () => {
    const graph = new LGraph()
    const node = testNode()
    graph.add(node)
@@ -204,9 +204,9 @@ describe('Autogrow', () => {
      '0.a0',
      '0.a1',
      '0.a2',
-      '1.b0',
-      '1.b1',
-      '1.b2',
+      '2.b0',
+      '2.b1',
+      '2.b2',
      'aa'
    ])
  })
--- a/src/core/graph/widgets/dynamicWidgets.ts
+++ b/src/core/graph/widgets/dynamicWidgets.ts
@@ -511,7 +511,7 @@ function autogrowInputDisconnected(index: number, node: AutogrowNode) {
      lastInput
    )
  }
-  const removalChecks = groupInputs.slice((min - 1) * stride)
+  const removalChecks = groupInputs.slice(min * 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; i++)
+  for (let i = 0; i === 0 || i < min + 1; i++)
    addAutogrowGroup(i, inputSpecV2.name, node)
 }
--- a/src/lib/litegraph/src/LGraph.test.ts
+++ b/src/lib/litegraph/src/LGraph.test.ts
@@ -12,6 +12,7 @@ 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 {
@@ -1005,3 +1006,25 @@ 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)
+  })
+})
--- a/src/lib/litegraph/src/LGraph.ts
+++ b/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
-    if (id) {
+    // 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)) {
      this.id = id
    } else if (this.id === zeroUuid) {
      this.id = createUuidv4()
--- a/src/platform/distribution/cloudPreviewUtil.ts
+++ b/src/platform/distribution/cloudPreviewUtil.ts
@@ -14,6 +14,11 @@ export function appendCloudResParam(
  filename?: string
 ): void {
  if (!isCloud) return
-  if (filename && getMediaTypeFromFilename(filename) !== 'image') return
+  if (
+    filename &&
+    (getMediaTypeFromFilename(filename) !== 'image' ||
+      filename.toLowerCase().endsWith('.svg'))
+  )
+    return
  params.set('res', '512')
 }
--- a/src/stores/subgraphNavigationStore.ts
+++ b/src/stores/subgraphNavigationStore.ts
@@ -12,6 +12,7 @@ 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
@@ -138,11 +139,19 @@ export const useSubgraphNavigationStore = defineStore(
        return
      }

-      // Cache miss — fit to content after the canvas has the new graph.
-      // rAF fires after layout + paint, when nodes are positioned.
-      const expectedGraphId = graphId
+      // 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.
      requestAnimationFrame(() => {
-        if (getActiveGraphId() !== expectedGraphId) return
+        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
+
        useLitegraphService().fitView()
      })
    }
--- a/src/stores/subgraphNavigationStore.viewport.test.ts
+++ b/src/stores/subgraphNavigationStore.viewport.test.ts
@@ -24,8 +24,11 @@ vi.mock('@/scripts/app', () => {
      scale: 1,
      offset: [0, 0],
      state: { scale: 1, offset: [0, 0] },
-      fitToBounds: vi.fn()
+      fitToBounds: vi.fn(),
+      visible_area: [0, 0, 1000, 1000],
+      computeVisibleArea: vi.fn()
    },
+    viewport: [0, 0, 1000, 1000],
    setDirty: mockSetDirty,
    get empty() {
      return true
@@ -184,6 +187,11 @@ 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')

@@ -194,6 +202,10 @@ 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', () => {
Author	SHA1	Message	Date
github-actions	02ee6de0c1	[automated] Update test expectations	2026-04-08 03:03:04 +00:00
Terry Jia	33dd67b394	test: add E2E tests for Load3D model upload and drag-drop and basic e2e for 3d viewer	2026-04-07 22:49:27 -04:00
Terry Jia	d73c4406ed	test: add basic E2E tests for Load3D node (#10731 ) ## Summary Add Playwright tests covering widget rendering, controls menu interaction, background color change, and recording controls visibility. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10731-test-add-basic-E2E-tests-for-Load3D-node-3336d73d36508194bff9eb2a7c9356b9) by [Unito](https://www.unito.io)	2026-04-07 22:41:12 -04:00
Dante	ccdde8697c	test: add E2E regression tests for workflow tab save bug (#10815 ) ## Summary - Adds E2E regression tests for the bug fixed in PR #10745 where closing an inactive workflow tab would save the active workflow's content into the closing tab's file - Three test scenarios covering the full range of the bug surface: 1. Closing an unmodified inactive tab preserves both workflows 2. Closing a modified inactive tab with "Save" preserves its own content (not the active tab's) 3. Closing an unsaved inactive tab with "Save As" preserves its own content ## Linked Issues - Regression coverage for #10745 / Comfy-Org/ComfyUI#13230 ## Test plan - [ ] `pnpm exec playwright test browser_tests/tests/topbar/workflowTabSave.spec.ts` passes against the current main (with the fix) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10815-test-add-E2E-regression-tests-for-workflow-tab-save-bug-3366d73d365081eab409ed303620a959) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>	2026-04-08 10:40:12 +09:00
Christian Byrne	194baf7aee	fix(ci): restore pnpm version input for core/* branch compatibility (#10952 ) ## Summary Restores `version: 10` to the `pnpm/action-setup` step in `release-version-bump.yaml`. ## Why PR #10687 removed the explicit `version: 10` input, relying on `packageManager` in `package.json` instead. However, this workflow checks out a target branch (e.g. `core/1.42`, `core/1.41`) that predates #10687 and lacks the `packageManager` field — causing the action to fail with: > Error: No pnpm version is specified. Failed run: https://github.com/Comfy-Org/ComfyUI_frontend/actions/runs/24110739586 Adding `version: 10` back is safe — the action only errors when `version` and `packageManager` conflict, and `pnpm@10.x` is compatible. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10952-fix-ci-restore-pnpm-version-input-for-core-branch-compatibility-33c6d73d3650819282bbf6c194d0d2f1) by [Unito](https://www.unito.io)	2026-04-07 17:45:42 -07:00
Comfy Org PR Bot	5770837e07	1.43.15 (#10951 ) Patch version increment to 1.43.15 Base branch: `main` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10951-1-43-15-33c6d73d36508183b029ccd217a8403d) by [Unito](https://www.unito.io) Co-authored-by: christian-byrne <72887196+christian-byrne@users.noreply.github.com>	2026-04-07 17:24:14 -07:00
Johnpaul Chiwetelu	4078f8be8f	test: add E2E test for subgraph duplicate independent widget values (#10949 ) ## Summary - Add E2E test verifying duplicated subgraphs maintain independent widget values (convert CLIP node to subgraph, duplicate, set different text in each, assert no bleed) - Extract `clickMenuItemExact` and `openForVueNode` into `ContextMenu` fixture for reuse across Vue node tests - Refactor `contextMenu.spec.ts` to delegate to the new fixture methods ## Test plan - [x] `pnpm typecheck:browser` passes - [x] `pnpm lint` passes - [x] New test passes locally (`pnpm test:browser:local -- browser_tests/tests/subgraph/subgraphDuplicateIndependentValues.spec.ts`) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10949-test-add-E2E-test-for-subgraph-duplicate-independent-widget-values-33b6d73d3650818191c1f78ef8db4455) by [Unito](https://www.unito.io)	2026-04-08 00:20:23 +01:00
Christian Byrne	ff0453416a	ci: pass CODECOV_TOKEN and add codecov.yml for PR comments (#10774 ) ## What Follow-up to #10575. Pass `CODECOV_TOKEN` secret to codecov upload action and add `codecov.yml` config so Codecov posts coverage diff comments on PRs. ## Changes - `ci-tests-unit.yaml`: add `token: ${{ secrets.CODECOV_TOKEN }}` - `codecov.yml`: configure PR comment layout (header, diff, flags, files) ## Manual Step Required An admin needs to add the `CODECOV_TOKEN` secret to the repo: 1. Go to [codecov.io](https://app.codecov.io) → sign in → find `Comfy-Org/ComfyUI_frontend` → Settings → General → copy the Repository Upload Token 2. Go to [repo secrets](https://github.com/Comfy-Org/ComfyUI_frontend/settings/secrets/actions) → New repository secret → name: `CODECOV_TOKEN`, value: the token ## Testing Config-only change. Once the secret is added, the next PR will get a Codecov coverage comment. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10774-ci-pass-CODECOV_TOKEN-and-add-codecov-yml-for-PR-comments-3346d73d36508169bac5e61eecc94063) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>	2026-04-07 15:52:34 -07:00
Benjamin Lu	fd9c67ade8	test: type asset helper update payload (#10751 ) What changed - Typed the `PUT /assets/:id` mock body in `AssetHelper` as `AssetUpdatePayload` instead of treating it as an untyped record. Why - Keeps the mock aligned with the frontend update contract used by the asset service. - Narrows the helper without changing behavior, so follow-up typing work can build on a smaller base. Validation - `pnpm typecheck` - `pnpm typecheck:browser` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10751-test-type-asset-helper-update-payload-3336d73d365081fd8f1bc0c7c49c5ddb) by [Unito](https://www.unito.io)	2026-04-07 14:26:56 -07:00
Christian Byrne	83f4e7060a	test(infra): AssetHelper with builder pattern + deterministic fixtures (#10545 ) ## What Adds `AssetHelper` — a builder-pattern helper for mocking asset-related API endpoints in Playwright E2E tests, plus deterministic fixture data. ## Why 12+ asset-related API endpoints need mocking for asset browser tests (PNL-02), cloud dialog testing (DLG-08), and other asset-dependent E2E scenarios. Random mock data from existing `createMockAssets()` is unsuitable for deterministic E2E assertions. ## What's included ### `AssetHelper.ts` (307 LOC) - Fluent builder API: `assetHelper.withModels(3).withImages(5).mock()` - Stateful mock store (Map) for upload→verify→delete flows - Endpoint coverage: GET/POST/PUT/DELETE `/assets`, download progress - `mockError()` for error state testing - `clearMocks()` cleanup matching QueueHelper/FeatureFlagHelper pattern ### `assetFixtures.ts` (304 LOC) - 11 stable named constants (checkpoints, loras, VAE, embedding, inputs, outputs) - Factory functions: `generateModels()`, `generateInputFiles()`, `generateOutputAssets()` - Fixed IDs/dates/sizes — no randomness, safe for screenshot comparisons ### ComfyPage integration - Available as `comfyPage.assets` in all tests ## Testing - TypeScript compiles clean - Follows existing QueueHelper/FeatureFlagHelper conventions ## Unblocks - PNL-02: Asset browser tests (@Jaewon Yoon) - DLG-08: Assets modal / cloud dialog testing Part of: Test Coverage Q2 Overhaul ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10545-test-infra-AssetHelper-with-builder-pattern-deterministic-fixtures-32f6d73d365081d3985ef079ff3dbede) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>	2026-04-07 14:23:36 -07:00
AustinMroz	31c789c242	Support svg outputs in assets panel (#10470 ) A trivial fix to support svg outputs in the assets panel \| Before \| After \| \| ------ \| ----- \| \| <img width="360" alt="before" src="https://github.com/user-attachments/assets/2fca84f7-40f1-4966-b3dd-96facb8a4067" /> \| <img width="360" alt="after" src="https://github.com/user-attachments/assets/cad1a9fc-f511-43bc-8895-80d931baad1c" />\| Note: SVG do not display on cloud in node, or the assets panel because they are being served with the incorrect content-type of `text/plain` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10470-Support-svg-outputs-in-assets-panel-32d6d73d3650815fbba1fe788297e715) by [Unito](https://www.unito.io)	2026-04-07 13:53:37 -07:00
pythongosssss	1b05927ff4	test: App mode - setting widget value test (#10746 ) ## Summary Adds a test for setting various types of widgets in app mode, then validating the /prompt API is called with the expected values ## Changes - What: - extract duplicated enableLinearMode - add AppModeWidgetHelper for setting values ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10746-test-App-mode-setting-widget-value-test-3336d73d365081739598fb5280d0127e) by [Unito](https://www.unito.io)	2026-04-07 13:53:01 -07:00
AustinMroz	97853aa8b0	Update autogrow to always show one optional beyond min (#10748 ) It can be a little unclear that autogrow inputs will add more slots as connections are made. To assist with this, the first optional input beyond the minimum is always displayed. This ensures users always see a slot with an optional indicator. \| Before \| After \| \| ------ \| ----- \| \| <img width="360" alt="before" src="https://github.com/user-attachments/assets/1dd1241e-c6a4-46a6-a0b9-08b568decd10" /> \| <img width="360" alt="after" src="https://github.com/user-attachments/assets/79650f9a-7cc6-4484-83a3-2b25e2f1af33" />\| ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10748-Update-autogrow-to-always-show-one-optional-beyond-min-3336d73d36508184bcc6c79381a62436) by [Unito](https://www.unito.io)	2026-04-07 12:53:32 -07:00
AustinMroz	ac922fe6aa	Remove flex styling from svg (#10941 ) This cleans up a minor warning message from the dev server.: ` WARN Removing unexpected style on "svg": flex` The icon is displayed in the header of some templates and is not visually impacted by the change. <img width="268" height="365" alt="image" src="https://github.com/user-attachments/assets/a0c03e85-5275-4671-b903-8458d7ba3517" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10941-Remove-flex-styling-from-svg-33b6d73d36508113a7dce77c269fe4cb) by [Unito](https://www.unito.io)	2026-04-07 12:31:21 -07:00
pythongosssss	6f8e58bfa5	test: App Mode - widget reordering (#10685 ) ## Summary Adds tests that simulate the user sorting the inputs and ensures they are persisted and visible in app mode ## Changes - What: - rework input/output selection helpers to accept widget/node names - extract additional shared helpers ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10685-test-App-Mode-widget-reordering-3316d73d3650813b8348da5f29fd01f8) by [Unito](https://www.unito.io)	2026-04-07 11:56:43 -07:00
Arthur R Longbottom	6cd3b59d5f	fix: don't override loadGraphData viewport on cache miss (#10810 ) ## Summary Fix regression from #10247 where template workflows (e.g. LTX2.3) loaded with a broken viewport. ## Problem `restoreViewport()` called `fitView()` on every cache miss via rAF. This raced with `loadGraphData`'s own viewport restore (`extra.ds` for saved workflows, or its own `fitView()` for templates at line 1266 of app.ts). The second `fitView()` overwrote the correct viewport, causing templates with subgraphs to display incorrectly. ## Fix On cache miss, check if any nodes are already visible in the current viewport before calling `fitView()`. If `loadGraphData` already positioned things correctly, we don't override it. Only intervene when the viewport is genuinely empty (first visit to a subgraph with no prior cached state AND no loadGraphData restore). ## Review Focus Single-file change in `subgraphNavigationStore.ts`. The visibility check mirrors the same pattern used in `app.ts:1272-1281` where loadGraphData itself checks for visible nodes. ## E2E Regression Test The existing Playwright tests in `browser_tests/tests/subgraphViewport.spec.ts` (added in #10247) already cover viewport restoration after subgraph navigation. The specific regression (template load viewport race) is not practically testable in E2E because: 1. Template loading requires the backend's template API which returns different templates per environment 2. The race condition depends on exact timing between `loadGraphData`'s viewport restore and the rAF-deferred `restoreViewport` — Playwright cannot reliably reproduce frame-level timing races 3. The fix is a guard condition (skip fitView if nodes visible) that makes the behavior idempotent regardless of timing ## Alternative to #10790 This can replace the full revert in #10790 — it preserves the viewport persistence feature while fixing the template regression. Fixes regression from #10247	2026-04-07 10:01:54 -07:00
pythongosssss	0b83926c3e	fix: Ensure zero uuid root graphs get assigned a valid id (#10825 ) ## Summary Fixes an issue where handlers would be leaked causing Vue node rendering to be corrupted (Vue nodes would not render) due to the 00000000-0000-0000-0000-000000000000 ID being used on the root graph. ## Changes - What: - LGraph clear() skips store cleanup for the zero uuid, leaking handlers that cause the node manager/handlers to be overwritten during operations such as undo due to stale onNodeAdded hooks - Ensures that graph configuration assigns a valid ID for root graphs ## Screenshots (if applicable) Before fix, after doing ctrl+z after entering subgraph <img width="1011" height="574" alt="image" src="https://github.com/user-attachments/assets/1ff4692b-b961-4777-bf2d-9b981e311f91" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10825-fix-Ensure-zero-uuid-root-graphs-get-assigned-a-valid-id-3366d73d3650817d8603c71ffb5e5742) by [Unito](https://www.unito.io) --------- Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>	2026-04-07 08:50:13 -07:00