fix: remove broken throttle from VirtualGrid scroll tracking (#12781 )

## Summary Every `VirtualGrid` consumer (assets sidebar, manager dialog, widget select dropdown) is blind to discrete mouse-wheel scrolling: `useScroll`'s `throttle: 64` never reports scroll position, so the virtualization window stays frozen — users see blank space below the first viewport of items and `approach-end` (infinite scroll) never fires. Trackpad scrolling masks the bug by emitting events faster than the throttle window. ## Changes - **What**: drop the `throttle` option from `useScroll` in `VirtualGrid` and remove the `scrollThrottle` prop (no consumer passes it). Scroll events are frame-aligned and the handler is cheap, so the throttle bought nothing even when it worked. - **Root cause**: VueUse ≥14 `throttleFilter` with `leading=false` (what `useScroll` uses) marks spaced-out events as executed without executing them — each event re-arms an `isLeading` restore timer that makes the next event skip its invoke, and the trailing branch is unreachable when `elapsed > duration`. Regression of vueuse#2390; still present on vueuse `main`. ## Review Focus - Verified live against staging: with the throttle, sidebar scrolled to `scrollTop` 1250 while `scrollY` stayed 0 and the render window stayed at `[0..3)` of 27 (blank viewport); with this fix, `scrollY` tracks 1:1 and the window advances. Bare-vs-throttled `useScroll` compared side-by-side on the same element to isolate the cause. - Unblocks wheel-scroll for #12780's dropdown infinite scroll with no changes there. - Fixes FE-990 🤖 Generated with [Claude Code](https://claude.com/claude-code)
fix: re-encode favicon.ico with PNG frames to fix white corner artifacts (#12753 )
2026-06-11 08:49:13 +00:00 · 2026-06-11 03:27:54 +00:00 · 2026-06-11 03:27:53 +00:00 · 2026-06-10 22:43:34 +00:00 · 2026-06-10 21:30:08 +00:00 · 2026-06-10 21:15:19 +00:00
47 changed files with 798 additions and 589 deletions
--- a/apps/website/public/apple-touch-icon.png
+++ b/apps/website/public/apple-touch-icon.png
--- a/apps/website/public/favicon-96x96.png
+++ b/apps/website/public/favicon-96x96.png
--- a/apps/website/public/favicon.ico
+++ b/apps/website/public/favicon.ico
--- a/apps/website/public/favicon.svg
+++ b/apps/website/public/favicon.svg
--- a/apps/website/public/site.webmanifest
+++ b/apps/website/public/site.webmanifest
@@ -1,23 +1,23 @@
 {
  "name": "Comfy",
  "short_name": "Comfy",
-  "id": "/",
-  "start_url": "/",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
-      "purpose": "any"
+      "purpose": "any maskable"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
-      "purpose": "any"
+      "purpose": "any maskable"
    }
  ],
  "theme_color": "#211927",
  "background_color": "#211927",
-  "display": "standalone"
+  "display": "standalone",
+  "id": "/",
+  "start_url": "/"
 }
--- a/apps/website/public/web-app-manifest-192x192.png
+++ b/apps/website/public/web-app-manifest-192x192.png
--- a/apps/website/public/web-app-manifest-512x512.png
+++ b/apps/website/public/web-app-manifest-512x512.png
--- a/apps/website/src/components/product/local/DownloadLocalButton.vue
+++ b/apps/website/src/components/product/local/DownloadLocalButton.vue
@@ -8,6 +8,7 @@ import {
  useDownloadUrl
 } from '../../../composables/useDownloadUrl'
 import { t } from '../../../i18n/translations'
+import { captureDownloadClick } from '../../../scripts/posthog'
 import BrandButton from '../../common/BrandButton.vue'

 const { locale = 'en', class: customClass = '' } = defineProps<{
@@ -69,6 +70,7 @@ const buttons = computed<ButtonSpec[]>(() => {
    size="lg"
    :class="customClass"
    :aria-label="btn.ariaLabel"
+    @click="captureDownloadClick(btn.key)"
  >
    <span class="inline-flex items-center gap-2">
      <img
--- a/apps/website/src/layouts/BaseLayout.astro
+++ b/apps/website/src/layouts/BaseLayout.astro
@@ -73,7 +73,7 @@ const websiteJsonLd = {

    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="shortcut icon" href="/favicon.ico" sizes="48x48" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="theme-color" content="#211927" />
--- a/apps/website/src/scripts/posthog.test.ts
+++ b/apps/website/src/scripts/posthog.test.ts
@@ -53,3 +53,28 @@ describe('initPostHog', () => {
    expect(result.$set_once).toHaveProperty('plan', 'free')
  })
 })
+
+describe('captureDownloadClick', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.resetModules()
+  })
+
+  it('captures the download event with the platform', async () => {
+    const { initPostHog, captureDownloadClick } = await import('./posthog')
+    initPostHog()
+    captureDownloadClick('mac')
+
+    expect(hoisted.mockCapture).toHaveBeenCalledWith(
+      'website:download_button_clicked',
+      { platform: 'mac' }
+    )
+  })
+
+  it('does not capture before PostHog is initialized', async () => {
+    const { captureDownloadClick } = await import('./posthog')
+    captureDownloadClick('windows')
+
+    expect(hoisted.mockCapture).not.toHaveBeenCalled()
+  })
+})
--- a/apps/website/src/scripts/posthog.ts
+++ b/apps/website/src/scripts/posthog.ts
@@ -38,3 +38,12 @@ export function capturePageview() {
    console.error('PostHog pageview capture failed', error)
  }
 }
+
+export function captureDownloadClick(platform: string) {
+  if (!initialized) return
+  try {
+    posthog.capture('website:download_button_clicked', { platform })
+  } catch (error) {
+    console.error('PostHog download click capture failed', error)
+  }
+}
--- a/browser_tests/assets/missing/node_replacement_same_type.json
+++ b/browser_tests/assets/missing/node_replacement_same_type.json
@@ -1,61 +0,0 @@
-{
-  "last_node_id": 2,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "E2E_OldSampler",
-      "pos": [100, 100],
-      "size": [400, 262],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        { "name": "model", "type": "MODEL", "link": null },
-        { "name": "positive", "type": "CONDITIONING", "link": null },
-        { "name": "negative", "type": "CONDITIONING", "link": null },
-        { "name": "latent_image", "type": "LATENT", "link": null }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": [],
-          "slot_index": 0
-        }
-      ],
-      "properties": { "Node name for S&R": "E2E_OldSampler" },
-      "widgets_values": [42, 20, 7, "euler", "normal"]
-    },
-    {
-      "id": 2,
-      "type": "E2E_OldSampler",
-      "pos": [520, 100],
-      "size": [400, 262],
-      "flags": {},
-      "order": 1,
-      "mode": 0,
-      "inputs": [
-        { "name": "model", "type": "MODEL", "link": null },
-        { "name": "positive", "type": "CONDITIONING", "link": null },
-        { "name": "negative", "type": "CONDITIONING", "link": null },
-        { "name": "latent_image", "type": "LATENT", "link": null }
-      ],
-      "outputs": [
-        {
-          "name": "LATENT",
-          "type": "LATENT",
-          "links": [],
-          "slot_index": 0
-        }
-      ],
-      "properties": { "Node name for S&R": "E2E_OldSampler" },
-      "widgets_values": [43, 20, 7, "euler", "normal"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": { "ds": { "scale": 1, "offset": [0, 0] } },
-  "version": 0.4
-}
--- a/browser_tests/fixtures/selectors.ts
+++ b/browser_tests/fixtures/selectors.ts
@@ -70,7 +70,6 @@ export const TestIds = {
    missingModelImportUnsupported: 'missing-model-import-unsupported',
    missingMediaGroup: 'error-group-missing-media',
    swapNodesGroup: 'error-group-swap-nodes',
-    swapNodeGroupCount: 'swap-node-group-count',
    missingMediaRow: 'missing-media-row',
    missingMediaLocateButton: 'missing-media-locate-button',
    publishTabPanel: 'publish-tab-panel',
--- a/browser_tests/tests/nodeReplacement.spec.ts
+++ b/browser_tests/tests/nodeReplacement.spec.ts
@@ -48,36 +48,6 @@ test.describe('Node replacement', { tag: ['@node', '@ui'] }, () => {
          ).toBeVisible()
        })

-        test('Shows direct row label and locate action for a single replacement group', async ({
-          comfyPage
-        }) => {
-          const swapGroup = getSwapNodesGroup(comfyPage.page)
-          const rowLabel = swapGroup.getByRole('button', {
-            name: 'E2E_OldSampler',
-            exact: true
-          })
-
-          await expect(rowLabel).toBeVisible()
-          await expect(
-            swapGroup.getByRole('button', {
-              name: 'Locate node on canvas',
-              exact: true
-            })
-          ).toBeVisible()
-          await expect(
-            swapGroup.getByTestId(TestIds.dialogs.swapNodeGroupCount)
-          ).toHaveCount(0)
-
-          await comfyPage.canvasOps.pan({ x: -800, y: -800 })
-          const offsetBeforeLocate = await comfyPage.canvasOps.getOffset()
-
-          await rowLabel.click()
-
-          await expect
-            .poll(() => comfyPage.canvasOps.getOffset())
-            .not.toEqual(offsetBeforeLocate)
-        })
-
        test('Replace Node replaces a single group in-place', async ({
          comfyPage
        }) => {
@@ -146,55 +116,6 @@ test.describe('Node replacement', { tag: ['@node', '@ui'] }, () => {
        })
      })

-      test.describe('Same-type replacement group', () => {
-        test.beforeEach(async ({ comfyPage }) => {
-          await comfyPage.settings.setSetting(
-            'Comfy.VueNodes.Enabled',
-            mode.vueNodesEnabled
-          )
-          await setupNodeReplacement(comfyPage, mockNodeReplacementsSingle)
-          await loadWorkflowAndOpenErrorsTab(
-            comfyPage,
-            'missing/node_replacement_same_type'
-          )
-        })
-
-        test('Groups same-type replacement rows behind the title disclosure', async ({
-          comfyPage
-        }) => {
-          const swapGroup = getSwapNodesGroup(comfyPage.page)
-          const countBadge = swapGroup.getByTestId(
-            TestIds.dialogs.swapNodeGroupCount
-          )
-          const childRows = swapGroup.getByRole('listitem')
-          const expandButton = swapGroup.getByRole('button', {
-            name: 'Expand E2E_OldSampler',
-            exact: true
-          })
-
-          await expect(expandButton).toBeVisible()
-          await expect(countBadge).toHaveText('2')
-          await expect(childRows).toHaveCount(0)
-
-          await expandButton.click()
-          await expect(childRows).toHaveCount(2)
-          await expect(
-            swapGroup.getByRole('button', {
-              name: 'E2E_OldSampler',
-              exact: true
-            })
-          ).toHaveCount(2)
-
-          await swapGroup
-            .getByRole('button', {
-              name: 'Collapse E2E_OldSampler',
-              exact: true
-            })
-            .click()
-          await expect(childRows).toHaveCount(0)
-        })
-      })
-
      test.describe('Multi-type replacement', () => {
        test.beforeEach(async ({ comfyPage }) => {
          await comfyPage.settings.setSetting(
--- a/packages/shared-frontend-utils/src/formatUtil.test.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.test.ts
@@ -111,6 +111,7 @@ describe('formatUtil', () => {
        expect(getMediaTypeFromFilename('scene.fbx')).toBe('3D')
        expect(getMediaTypeFromFilename('asset.gltf')).toBe('3D')
        expect(getMediaTypeFromFilename('binary.glb')).toBe('3D')
+        expect(getMediaTypeFromFilename('print.stl')).toBe('3D')
        expect(getMediaTypeFromFilename('apple.usdz')).toBe('3D')
        expect(getMediaTypeFromFilename('scan.ply')).toBe('3D')
      })
--- a/packages/shared-frontend-utils/src/formatUtil.ts
+++ b/packages/shared-frontend-utils/src/formatUtil.ts
@@ -591,7 +591,15 @@ const IMAGE_EXTENSIONS = [
 ] as const
 const VIDEO_EXTENSIONS = ['mp4', 'm4v', 'webm', 'mov', 'avi', 'mkv'] as const
 const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac'] as const
-const THREE_D_EXTENSIONS = ['obj', 'fbx', 'gltf', 'glb', 'usdz', 'ply'] as const
+const THREE_D_EXTENSIONS = [
+  'obj',
+  'fbx',
+  'gltf',
+  'glb',
+  'stl',
+  'usdz',
+  'ply'
+] as const
 const TEXT_EXTENSIONS = [
  'txt',
  'md',
--- a/public/assets/favicon.ico
+++ b/public/assets/favicon.ico
--- a/src/components/common/VirtualGrid.vue
+++ b/src/components/common/VirtualGrid.vue
@@ -33,7 +33,6 @@ const {
  items,
  gridStyle,
  bufferRows = 1,
-  scrollThrottle = 64,
  resizeDebounce = 64,
  defaultItemHeight = 200,
  defaultItemWidth = 200,
@@ -42,7 +41,6 @@ const {
  items: (T & { key: string })[]
  gridStyle: CSSProperties
  bufferRows?: number
-  scrollThrottle?: number
  resizeDebounce?: number
  defaultItemHeight?: number
  defaultItemWidth?: number
@@ -61,7 +59,6 @@ const itemWidth = ref(defaultItemWidth)
 const container = ref<HTMLElement | null>(null)
 const { width, height } = useElementSize(container)
 const { y: scrollY } = useScroll(container, {
-  throttle: scrollThrottle,
  eventListenerOptions: { passive: true }
 })

--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -23,6 +23,8 @@
        :can-use-gizmo="canUseGizmo"
        :can-use-lighting="canUseLighting"
        :can-export="canExport"
+        :can-use-hdri="canUseHdri"
+        :can-use-background-image="canUseBackgroundImage"
        :material-modes="materialModes"
        :has-skeleton="hasSkeleton"
        @update-background-image="handleBackgroundImageUpdate"
@@ -86,7 +88,7 @@
      />

      <RecordingControls
-        v-if="!isPreview"
+        v-if="canUseRecording && !isPreview"
        v-model:is-recording="isRecording"
        v-model:has-recording="hasRecording"
        v-model:recording-duration="recordingDuration"
@@ -117,9 +119,18 @@ import { resolveNode } from '@/utils/litegraphUtil'
 import type { ComponentWidget } from '@/scripts/domWidget'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'

-const props = defineProps<{
+const {
+  widget,
+  nodeId,
+  canUseRecording = true,
+  canUseHdri = true,
+  canUseBackgroundImage = true
+} = defineProps<{
  widget: ComponentWidget<string[]> | SimplifiedWidget
  nodeId?: NodeId
+  canUseRecording?: boolean
+  canUseHdri?: boolean
+  canUseBackgroundImage?: boolean
 }>()

 function isComponentWidget(
@@ -130,11 +141,11 @@ function isComponentWidget(

 const node = ref<LGraphNode | null>(null)

-if (isComponentWidget(props.widget)) {
-  node.value = props.widget.node
-} else if (props.nodeId) {
+if (isComponentWidget(widget)) {
+  node.value = widget.node
+} else if (nodeId) {
  onMounted(() => {
-    node.value = resolveNode(props.nodeId!) ?? null
+    node.value = resolveNode(nodeId) ?? null
  })
 }

--- a/src/components/load3d/Load3DAdvanced.test.ts
+++ b/src/components/load3d/Load3DAdvanced.test.ts
@@ -0,0 +1,47 @@
+import { render } from '@testing-library/vue'
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, ref } from 'vue'
+
+const lastProps = ref<Record<string, unknown> | null>(null)
+
+vi.mock('@/components/load3d/Load3D.vue', () => ({
+  default: defineComponent({
+    name: 'Load3D',
+    props: {
+      widget: { type: null, required: false, default: undefined },
+      nodeId: { type: null, required: false, default: undefined },
+      canUseRecording: { type: Boolean, default: true },
+      canUseHdri: { type: Boolean, default: true },
+      canUseBackgroundImage: { type: Boolean, default: true }
+    },
+    setup(props: Record<string, unknown>) {
+      lastProps.value = { ...props }
+      return () => h('div', { 'data-testid': 'load3d-stub' })
+    }
+  })
+}))
+
+import Load3DAdvanced from '@/components/load3d/Load3DAdvanced.vue'
+
+describe('Load3DAdvanced', () => {
+  it('renders the inner Load3D with all expressive features disabled', () => {
+    const MOCK_NODE = { id: 'node', type: 'Load3DAdvanced' }
+    render(Load3DAdvanced, {
+      props: {
+        widget: { node: MOCK_NODE } as never
+      }
+    })
+    expect(lastProps.value).toMatchObject({
+      canUseRecording: false,
+      canUseHdri: false,
+      canUseBackgroundImage: false
+    })
+  })
+
+  it('forwards widget and nodeId to the inner Load3D', () => {
+    const widget = { node: { id: 'a', type: 'Load3DAdvanced' } }
+    render(Load3DAdvanced, { props: { widget: widget as never, nodeId: 'a' } })
+    expect(lastProps.value?.widget).toEqual(widget)
+    expect(lastProps.value?.nodeId).toBe('a')
+  })
+})
--- a/src/components/load3d/Load3DAdvanced.vue
+++ b/src/components/load3d/Load3DAdvanced.vue
@@ -0,0 +1,21 @@
+<template>
+  <Load3D
+    :widget="widget"
+    :node-id="nodeId"
+    :can-use-recording="false"
+    :can-use-hdri="false"
+    :can-use-background-image="false"
+  />
+</template>
+
+<script setup lang="ts">
+import Load3D from '@/components/load3d/Load3D.vue'
+import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
+import type { ComponentWidget } from '@/scripts/domWidget'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+defineProps<{
+  widget: ComponentWidget<string[]> | SimplifiedWidget
+  nodeId?: NodeId
+}>()
+</script>
--- a/src/components/load3d/Load3DControls.vue
+++ b/src/components/load3d/Load3DControls.vue
@@ -52,6 +52,7 @@
        v-model:background-image="sceneConfig!.backgroundImage"
        v-model:background-render-mode="sceneConfig!.backgroundRenderMode"
        v-model:fov="cameraConfig!.fov"
+        :show-background-image="canUseBackgroundImage"
        :hdri-active="
          !!lightConfig?.hdri?.hdriPath && !!lightConfig?.hdri?.enabled
        "
@@ -81,6 +82,7 @@
        />

        <HDRIControls
+          v-if="canUseHdri"
          v-model:hdri-config="lightConfig!.hdri"
          :has-background-image="!!sceneConfig?.backgroundImage"
          @update-hdri-file="handleHDRIFileUpdate"
@@ -129,12 +131,16 @@ const {
  canUseGizmo = true,
  canUseLighting = true,
  canExport = true,
+  canUseHdri = true,
+  canUseBackgroundImage = true,
  materialModes = ['original', 'normal', 'wireframe'],
  hasSkeleton = false
 } = defineProps<{
  canUseGizmo?: boolean
  canUseLighting?: boolean
  canExport?: boolean
+  canUseHdri?: boolean
+  canUseBackgroundImage?: boolean
  materialModes?: readonly MaterialMode[]
  hasSkeleton?: boolean
 }>()
--- a/src/components/load3d/controls/SceneControls.vue
+++ b/src/components/load3d/controls/SceneControls.vue
@@ -37,7 +37,7 @@
        </Button>
      </div>

-      <div v-if="!hasBackgroundImage">
+      <div v-if="showBackgroundImage && !hasBackgroundImage">
        <Button
          v-tooltip.right="{
            value: $t('load3d.uploadBackgroundImage'),
@@ -61,7 +61,7 @@
      </div>
    </template>

-    <div v-if="hasBackgroundImage">
+    <div v-if="showBackgroundImage && hasBackgroundImage">
      <Button
        v-tooltip.right="{
          value: $t('load3d.panoramaMode'),
@@ -83,12 +83,16 @@
    </div>

    <PopupSlider
-      v-if="hasBackgroundImage && backgroundRenderMode === 'panorama'"
+      v-if="
+        showBackgroundImage &&
+        hasBackgroundImage &&
+        backgroundRenderMode === 'panorama'
+      "
      v-model="fov"
      :tooltip-text="$t('load3d.fov')"
    />

-    <div v-if="hasBackgroundImage">
+    <div v-if="showBackgroundImage && hasBackgroundImage">
      <Button
        v-tooltip.right="{
          value: $t('load3d.removeBackgroundImage'),
@@ -114,8 +118,9 @@ import Button from '@/components/ui/button/Button.vue'
 import type { BackgroundRenderModeType } from '@/extensions/core/load3d/interfaces'
 import { cn } from '@comfyorg/tailwind-utils'

-const { hdriActive = false } = defineProps<{
+const { hdriActive = false, showBackgroundImage = true } = defineProps<{
  hdriActive?: boolean
+  showBackgroundImage?: boolean
 }>()

 const emit = defineEmits<{
--- a/src/components/rightSidePanel/errors/TabErrors.test.ts
+++ b/src/components/rightSidePanel/errors/TabErrors.test.ts
@@ -530,9 +530,7 @@ describe('TabErrors.vue', () => {
    expect(
      screen.getByText('Some nodes can be replaced with alternatives')
    ).toBeInTheDocument()
-    expect(
-      screen.getByRole('button', { name: 'OldSampler' })
-    ).toBeInTheDocument()
+    expect(screen.getByText('OldSampler (1)')).toBeInTheDocument()
    expect(screen.getByText('KSampler')).toBeInTheDocument()
    expect(
      screen.getByRole('button', { name: /Replace Node/ })
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -157,6 +157,7 @@
          <SwapNodesCard
            v-if="group.type === 'swap_nodes'"
            :swap-node-groups="swapNodeGroups"
+            :show-node-id-badge="showNodeIdBadge"
            @locate-node="handleLocateMissingNode"
            @replace="handleReplaceGroup"
          />
--- a/src/extensions/core/load3d.ts
+++ b/src/extensions/core/load3d.ts
@@ -22,6 +22,7 @@ import {
  LOAD3D_NONE_MODEL,
  SUPPORTED_EXTENSIONS_ACCEPT
 } from '@/extensions/core/load3d/constants'
+import { snapshotLoad3dState } from '@/extensions/core/load3d/load3dSerialize'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
@@ -413,16 +414,10 @@ useExtensionService().registerExtension({
            if (cached) return cached
          }

-          const cameraConfig: CameraConfig = (node.properties[
-            'Camera Config'
-          ] as CameraConfig | undefined) || {
-            cameraType: currentLoad3d.getCurrentCameraType(),
-            fov: currentLoad3d.cameraManager.perspectiveCamera.fov
-          }
-          cameraConfig.state = currentLoad3d.getCameraState()
-          node.properties['Camera Config'] = cameraConfig
-
-          currentLoad3d.stopRecording()
+          const { camera_info, model_3d_info } = snapshotLoad3dState(
+            node,
+            currentLoad3d
+          )

          const {
            scene: imageData,
@@ -441,16 +436,11 @@ useExtensionService().registerExtension({

          currentLoad3d.handleResize()

-          const modelInfo = currentLoad3d.getModelInfo()
-          const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
-
          const returnVal: Load3dCachedOutput = {
            image: `threed/${data.name} [temp]`,
            mask: `threed/${dataMask.name} [temp]`,
            normal: `threed/${dataNormal.name} [temp]`,
-            camera_info:
-              (node.properties['Camera Config'] as CameraConfig | undefined)
-                ?.state || null,
+            camera_info,
            recording: '',
            model_3d_info
          }
--- a/src/extensions/core/load3d/MeshModelAdapter.test.ts
+++ b/src/extensions/core/load3d/MeshModelAdapter.test.ts
@@ -23,6 +23,7 @@ const mtlLoaderStub = {
 const objLoaderStub = {
  setWorkerUrl: vi.fn(),
  setMaterials: vi.fn(),
+  setBaseObject3d: vi.fn(),
  loadAsync: vi.fn<(url: string) => Promise<THREE.Object3D>>()
 }

@@ -58,6 +59,7 @@ vi.mock('wwobjloader2', () => ({
  OBJLoader2Parallel: class {
    setWorkerUrl = objLoaderStub.setWorkerUrl
    setMaterials = objLoaderStub.setMaterials
+    setBaseObject3d = objLoaderStub.setBaseObject3d
    loadAsync = objLoaderStub.loadAsync
  },
  MtlObjBridge: {
@@ -247,6 +249,24 @@ describe('MeshModelAdapter', () => {

      expect(ctx.registerOriginalMaterial).toHaveBeenCalledTimes(1)
    })
+
+    it('resets baseObject3d on every load so meshes do not accumulate across calls', async () => {
+      objLoaderStub.loadAsync.mockResolvedValue(makeFbxLikeGroup())
+
+      const adapter = new MeshModelAdapter()
+      const ctx = makeContext('wireframe')
+      await adapter.load(ctx, '/api/view/', 'first.obj')
+      await adapter.load(ctx, '/api/view/', 'second.obj')
+
+      expect(objLoaderStub.setBaseObject3d).toHaveBeenCalledTimes(2)
+      const bases = objLoaderStub.setBaseObject3d.mock.calls.map(
+        ([base]) => base
+      )
+      expect(bases[0]).toBeInstanceOf(THREE.Object3D)
+      expect(bases[1]).toBeInstanceOf(THREE.Object3D)
+      // Each call should hand the loader a fresh container, not the same one.
+      expect(bases[0]).not.toBe(bases[1])
+    })
  })

  describe('GLTF loader path', () => {
--- a/src/extensions/core/load3d/MeshModelAdapter.ts
+++ b/src/extensions/core/load3d/MeshModelAdapter.ts
@@ -102,6 +102,8 @@ export class MeshModelAdapter implements ModelAdapter {
    path: string,
    filename: string
  ): Promise<THREE.Object3D> {
+    this.objLoader.setBaseObject3d(new THREE.Object3D())
+
    if (ctx.materialMode === 'original') {
      try {
        this.mtlLoader.setPath(path)
--- a/src/extensions/core/load3d/load3dSerialize.test.ts
+++ b/src/extensions/core/load3d/load3dSerialize.test.ts
@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import type Load3d from '@/extensions/core/load3d/Load3d'
+import { snapshotLoad3dState } from '@/extensions/core/load3d/load3dSerialize'
+import type { CameraState } from '@/extensions/core/load3d/interfaces'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+
+function makeNode(props: Record<string, unknown> = {}): LGraphNode {
+  return { properties: { ...props } } as unknown as LGraphNode
+}
+
+const baseCameraState: CameraState = {
+  position: { x: 1, y: 2, z: 3 },
+  target: { x: 0, y: 0, z: 0 },
+  zoom: 1,
+  cameraType: 'perspective'
+} as unknown as CameraState
+
+function makeLoad3d({
+  cameraType = 'perspective',
+  fov = 35,
+  modelInfo = { transform: { position: [0, 0, 0] } } as unknown
+}: {
+  cameraType?: string
+  fov?: number
+  modelInfo?: unknown
+} = {}) {
+  return {
+    getCurrentCameraType: vi.fn(() => cameraType),
+    cameraManager: { perspectiveCamera: { fov } },
+    getCameraState: vi.fn(() => baseCameraState),
+    stopRecording: vi.fn(),
+    getModelInfo: vi.fn(() => modelInfo)
+  } as unknown as Load3d
+}
+
+describe('snapshotLoad3dState', () => {
+  it('returns only camera_info and model_3d_info', () => {
+    const result = snapshotLoad3dState(makeNode(), makeLoad3d())
+    expect(Object.keys(result).sort()).toEqual(['camera_info', 'model_3d_info'])
+  })
+
+  it('writes the camera state into properties["Camera Config"]', () => {
+    const node = makeNode()
+    snapshotLoad3dState(node, makeLoad3d({ fov: 42 }))
+    const cfg = node.properties['Camera Config'] as Record<string, unknown>
+    expect(cfg).toMatchObject({
+      cameraType: 'perspective',
+      fov: 42,
+      state: baseCameraState
+    })
+  })
+
+  it('preserves an existing Camera Config object instead of replacing it', () => {
+    const existing = { cameraType: 'orthographic', fov: 99 }
+    const node = makeNode({ 'Camera Config': existing })
+    snapshotLoad3dState(node, makeLoad3d())
+    // Same object reference (mutated in place), with state attached.
+    expect(node.properties['Camera Config']).toBe(existing)
+    expect(
+      (node.properties['Camera Config'] as Record<string, unknown>).state
+    ).toBe(baseCameraState)
+  })
+
+  it('stops in-progress recording as a side effect', () => {
+    const load3d = makeLoad3d()
+    snapshotLoad3dState(makeNode(), load3d)
+    expect(load3d.stopRecording).toHaveBeenCalledOnce()
+  })
+
+  it('returns model_3d_info as a single-element list when a model is loaded', () => {
+    const info = { transform: { position: [1, 2, 3] } }
+    const result = snapshotLoad3dState(
+      makeNode(),
+      makeLoad3d({ modelInfo: info })
+    )
+    expect(result.model_3d_info).toEqual([info])
+  })
+
+  it('returns an empty model_3d_info list when no model is loaded', () => {
+    const result = snapshotLoad3dState(
+      makeNode(),
+      makeLoad3d({ modelInfo: null })
+    )
+    expect(result.model_3d_info).toEqual([])
+  })
+})
--- a/src/extensions/core/load3d/load3dSerialize.ts
+++ b/src/extensions/core/load3d/load3dSerialize.ts
@@ -0,0 +1,36 @@
+import type Load3d from '@/extensions/core/load3d/Load3d'
+import type {
+  CameraConfig,
+  CameraState,
+  Model3DInfo
+} from '@/extensions/core/load3d/interfaces'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+
+export type Load3dSerializedBase = {
+  camera_info: CameraState | null
+  model_3d_info: Model3DInfo
+}
+
+export function snapshotLoad3dState(
+  node: LGraphNode,
+  load3d: Load3d
+): Load3dSerializedBase {
+  const cameraConfig: CameraConfig = (node.properties['Camera Config'] as
+    | CameraConfig
+    | undefined) || {
+    cameraType: load3d.getCurrentCameraType(),
+    fov: load3d.cameraManager.perspectiveCamera.fov
+  }
+  cameraConfig.state = load3d.getCameraState()
+  node.properties['Camera Config'] = cameraConfig
+
+  load3d.stopRecording()
+
+  const modelInfo = load3d.getModelInfo()
+  const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
+
+  return {
+    camera_info: cameraConfig.state ?? null,
+    model_3d_info
+  }
+}
--- a/src/extensions/core/load3d/nodeTypes.ts
+++ b/src/extensions/core/load3d/nodeTypes.ts
@@ -9,7 +9,12 @@ const LOAD3D_PREVIEW_NODES = new Set([
  'PreviewPointCloud'
 ])

-const LOAD3D_ALL_NODES = new Set([...LOAD3D_PREVIEW_NODES, 'Load3D', 'SaveGLB'])
+const LOAD3D_ALL_NODES = new Set([
+  ...LOAD3D_PREVIEW_NODES,
+  'Load3D',
+  'Load3DAdvanced',
+  'SaveGLB'
+])

 export const isLoad3dPreviewNode = (nodeType: string): boolean =>
  LOAD3D_PREVIEW_NODES.has(nodeType)
--- a/src/extensions/core/load3dAdvanced.ts
+++ b/src/extensions/core/load3dAdvanced.ts
@@ -0,0 +1,103 @@
+import { nextTick } from 'vue'
+
+import Load3DAdvanced from '@/components/load3d/Load3DAdvanced.vue'
+import { nodeToLoad3dMap, useLoad3d } from '@/composables/useLoad3d'
+import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper'
+import type { CameraConfig } from '@/extensions/core/load3d/interfaces'
+import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
+import { snapshotLoad3dState } from '@/extensions/core/load3d/load3dSerialize'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
+import { useExtensionService } from '@/services/extensionService'
+import { useLoad3dService } from '@/services/load3dService'
+
+const inputSpecLoad3DAdvanced: CustomInputSpec = {
+  name: 'viewport_state',
+  type: 'LOAD_3D_ADVANCED',
+  isPreview: false
+}
+
+useExtensionService().registerExtension({
+  name: 'Comfy.Load3DAdvanced',
+
+  beforeRegisterNodeDef(_nodeType, nodeData) {
+    if (nodeData.name !== 'Load3DAdvanced') return
+    if (!nodeData.input?.required) return
+    nodeData.input.required.viewport_state = ['LOAD_3D_ADVANCED', {}]
+  },
+
+  getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
+    if (node.constructor.comfyClass !== 'Load3DAdvanced') return []
+
+    const load3d = useLoad3dService().getLoad3d(node)
+    if (!load3d) return []
+
+    return createExportMenuItems(load3d)
+  },
+
+  getCustomWidgets() {
+    return {
+      LOAD_3D_ADVANCED(node) {
+        const widget = new ComponentWidgetImpl({
+          node,
+          name: 'viewport_state',
+          component: Load3DAdvanced,
+          inputSpec: inputSpecLoad3DAdvanced,
+          options: {}
+        })
+
+        widget.type = 'load3DAdvanced'
+
+        addWidget(node, widget)
+
+        return { widget }
+      }
+    }
+  },
+
+  async nodeCreated(node: LGraphNode) {
+    if (node.constructor.comfyClass !== 'Load3DAdvanced') return
+
+    const [oldWidth, oldHeight] = node.size
+    node.setSize([Math.max(oldWidth, 300), Math.max(oldHeight, 600)])
+
+    await nextTick()
+
+    useLoad3d(node).onLoad3dReady((load3d) => {
+      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+      const width = node.widgets?.find((w) => w.name === 'width')
+      const height = node.widgets?.find((w) => w.name === 'height')
+      if (!modelWidget || !width || !height) return
+
+      const cameraConfig = node.properties['Camera Config'] as
+        | CameraConfig
+        | undefined
+      const cameraState = cameraConfig?.state
+
+      const config = new Load3DConfiguration(load3d, node.properties)
+      config.configure({
+        loadFolder: 'input',
+        modelWidget,
+        cameraState,
+        width,
+        height
+      })
+    })
+
+    useLoad3d(node).waitForLoad3d(() => {
+      const sceneWidget = node.widgets?.find((w) => w.name === 'viewport_state')
+      if (!sceneWidget) return
+
+      sceneWidget.serializeValue = async () => {
+        const currentLoad3d = nodeToLoad3dMap.get(node)
+        if (!currentLoad3d) {
+          console.error('No load3d instance found for node')
+          return null
+        }
+        return snapshotLoad3dState(node, currentLoad3d)
+      }
+    })
+  }
+})
--- a/src/extensions/core/load3dLazy.ts
+++ b/src/extensions/core/load3dLazy.ts
@@ -37,6 +37,7 @@ async function loadLoad3dExtensions(): Promise<ComfyExtension[]> {
    // Import extensions - they self-register via useExtensionService()
    await Promise.all([
      import('./load3d'),
+      import('./load3dAdvanced'),
      import('./load3dPreviewExtensions'),
      import('./saveMesh')
    ])
@@ -66,6 +67,12 @@ useExtensionService().registerExtension({
          modelFile[1].mesh_upload = true
          modelFile[1].upload_subfolder = '3d'
        }
+      } else if (nodeData.name === 'Load3DAdvanced') {
+        const modelFile = nodeData.input?.required?.model_file
+        if (modelFile?.[1]) {
+          modelFile[1].mesh_upload = true
+          modelFile[1].upload_subfolder = ''
+        }
      }

      // Load the 3D extensions and replay their beforeRegisterNodeDef hooks,
--- a/src/platform/assets/schemas/assetSchema.ts
+++ b/src/platform/assets/schemas/assetSchema.ts
@@ -22,7 +22,7 @@ const zAsset = z.object({
 })

 const zAssetResponse = zListAssetsResponse
-  .pick({ total: true, has_more: true })
+  .pick({ total: true, has_more: true, next_cursor: true })
  .extend({
    assets: z.array(zAsset)
  })
--- a/src/platform/assets/services/assetService.test.ts
+++ b/src/platform/assets/services/assetService.test.ts
@@ -53,6 +53,7 @@ const fetchApiMock = vi.mocked(api.fetchApi)
 type AssetListResponseOptions = {
  hasMore?: AssetResponse['has_more']
  total?: AssetResponse['total']
+  nextCursor?: AssetResponse['next_cursor']
 }

 function buildResponse(
@@ -68,9 +69,18 @@ function buildResponse(

 function buildAssetListResponse(
  assets: AssetItem[],
-  { hasMore = false, total = assets.length }: AssetListResponseOptions = {}
+  {
+    hasMore = false,
+    total = assets.length,
+    nextCursor
+  }: AssetListResponseOptions = {}
 ): Response {
-  return buildResponse({ assets, total, has_more: hasMore })
+  return buildResponse({
+    assets,
+    total,
+    has_more: hasMore,
+    ...(nextCursor === undefined ? {} : { next_cursor: nextCursor })
+  })
 }

 function validAsset(overrides: Partial<AssetItem> = {}): AssetItem {
@@ -512,7 +522,7 @@ describe(assetService.getAllAssetsByTag, () => {
    vi.clearAllMocks()
  })

-  it('paginates tagged asset requests with include_public=true', async () => {
+  it('walks pages by keyset cursor with include_public=true', async () => {
    fetchApiMock
      .mockResolvedValueOnce(
        buildAssetListResponse(
@@ -520,7 +530,7 @@ describe(assetService.getAllAssetsByTag, () => {
            validAsset({ id: 'a', tags: ['input'] }),
            validAsset({ id: 'b', tags: ['input'] })
          ],
-          { hasMore: true }
+          { hasMore: true, nextCursor: 'cursor-page-2' }
        )
      )
      .mockResolvedValueOnce(
@@ -538,6 +548,8 @@ describe(assetService.getAllAssetsByTag, () => {
    expect(firstParams.get('include_public')).toBe('true')
    expect(firstParams.get('exclude_tags')).toBe(MISSING_TAG)
    expect(firstParams.get('limit')).toBe('2')
+    // First page carries neither a cursor nor an offset.
+    expect(firstParams.has('after')).toBe(false)
    expect(firstParams.has('offset')).toBe(false)

    const secondUrl = fetchApiMock.mock.calls[1]?.[0] as string
@@ -545,7 +557,9 @@ describe(assetService.getAllAssetsByTag, () => {
    expect(secondParams.get('include_public')).toBe('true')
    expect(secondParams.get('exclude_tags')).toBe(MISSING_TAG)
    expect(secondParams.get('limit')).toBe('2')
-    expect(secondParams.get('offset')).toBe('2')
+    // Subsequent pages resume from the prior response's next_cursor, never offset.
+    expect(secondParams.get('after')).toBe('cursor-page-2')
+    expect(secondParams.has('offset')).toBe(false)
  })

  it('honors has_more when walking tagged asset pages', async () => {
@@ -556,7 +570,7 @@ describe(assetService.getAllAssetsByTag, () => {
            validAsset({ id: 'first', tags: ['input'] }),
            validAsset({ id: 'second', tags: ['input'] })
          ],
-          { hasMore: true }
+          { hasMore: true, nextCursor: 'cursor-next' }
        )
      )
      .mockResolvedValueOnce(
@@ -577,7 +591,45 @@ describe(assetService.getAllAssetsByTag, () => {
      throw new Error('Expected a second asset request URL')
    }
    const secondParams = new URL(secondUrl, 'http://localhost').searchParams
-    expect(secondParams.get('offset')).toBe('2')
+    expect(secondParams.get('after')).toBe('cursor-next')
+  })
+
+  it('stops walking when next_cursor is absent even if has_more is true', async () => {
+    fetchApiMock.mockResolvedValueOnce(
+      buildAssetListResponse([validAsset({ id: 'only', tags: ['input'] })], {
+        hasMore: true
+      })
+    )
+
+    const assets = await assetService.getAllAssetsByTag('input', true, {
+      limit: 2
+    })
+
+    expect(assets.map((a) => a.id)).toEqual(['only'])
+    expect(fetchApiMock).toHaveBeenCalledOnce()
+  })
+
+  it('stops walking when the server returns a non-advancing cursor', async () => {
+    fetchApiMock
+      .mockResolvedValueOnce(
+        buildAssetListResponse([validAsset({ id: 'a', tags: ['input'] })], {
+          hasMore: true,
+          nextCursor: 'stuck'
+        })
+      )
+      .mockResolvedValueOnce(
+        buildAssetListResponse([validAsset({ id: 'b', tags: ['input'] })], {
+          hasMore: true,
+          nextCursor: 'stuck'
+        })
+      )
+
+    const assets = await assetService.getAllAssetsByTag('input', true, {
+      limit: 1
+    })
+
+    expect(assets.map((a) => a.id)).toEqual(['a', 'b'])
+    expect(fetchApiMock).toHaveBeenCalledTimes(2)
  })

  it.for([
@@ -636,7 +688,7 @@ describe(assetService.getAllAssetsByTag, () => {
          validAsset({ id: 'a', tags: ['input'] }),
          validAsset({ id: 'b', tags: ['input'] })
        ],
-        { hasMore: true }
+        { hasMore: true, nextCursor: 'cursor-page-2' }
      )
    })

--- a/src/platform/assets/services/assetService.ts
+++ b/src/platform/assets/services/assetService.ts
@@ -31,6 +31,11 @@ export interface PaginationOptions {
 }

 interface AssetPaginationOptions extends PaginationOptions {
+  /**
+   * Opaque keyset cursor from a prior response's `next_cursor`. When set, the
+   * server resumes after that cursor and `offset` is ignored.
+   */
+  after?: string
  signal?: AbortSignal
 }

@@ -38,6 +43,7 @@ interface AssetRequestOptions extends PaginationOptions {
  includeTags: string[]
  excludeTags?: string[]
  includePublic?: boolean
+  after?: string
  signal?: AbortSignal
 }

@@ -286,6 +292,7 @@ function createAssetService() {
      excludeTags = DEFAULT_EXCLUDED_ASSET_TAGS,
      limit = DEFAULT_LIMIT,
      offset,
+      after,
      includePublic,
      signal
    } = options
@@ -299,7 +306,11 @@ function createAssetService() {
    if (normalizedExcludeTags.length > 0) {
      queryParams.set('exclude_tags', normalizedExcludeTags.join(','))
    }
-    if (offset !== undefined && offset > 0) {
+    // `after` (keyset cursor) takes precedence over `offset`; the server ignores
+    // `offset` when a cursor is supplied, so we avoid sending a redundant param.
+    if (after) {
+      queryParams.set('after', after)
+    } else if (offset !== undefined && offset > 0) {
      queryParams.set('offset', offset.toString())
    }
    if (includePublic !== undefined) {
@@ -481,11 +492,17 @@ function createAssetService() {
  async function getAssetsByTag(
    tag: string,
    includePublic: boolean = true,
-    { limit = DEFAULT_LIMIT, offset = 0, signal }: AssetPaginationOptions = {}
+    {
+      limit = DEFAULT_LIMIT,
+      offset = 0,
+      after,
+      signal
+    }: AssetPaginationOptions = {}
  ): Promise<AssetItem[]> {
    const data = await getAssetsPageByTag(tag, includePublic, {
      limit,
      offset,
+      after,
      signal
    })

@@ -498,17 +515,27 @@ function createAssetService() {
  async function getAssetsPageByTag(
    tag: string,
    includePublic: boolean = true,
-    { limit = DEFAULT_LIMIT, offset = 0, signal }: AssetPaginationOptions = {}
+    {
+      limit = DEFAULT_LIMIT,
+      offset = 0,
+      after,
+      signal
+    }: AssetPaginationOptions = {}
  ): Promise<AssetResponse> {
    return await handleAssetRequest(
-      { includeTags: [tag], limit, offset, includePublic, signal },
+      { includeTags: [tag], limit, offset, after, includePublic, signal },
      `assets for tag ${tag}`
    )
  }

  /**
   * Gets every asset for a tag by walking paginated asset API responses.
-   * Pagination follows the required server-provided `has_more` flag.
+   *
+   * Uses keyset (cursor) pagination: each page is fetched with the prior
+   * response's `next_cursor`, which is stable under concurrent inserts/deletes
+   * and avoids the duplicate/skip drift that offset paging exhibits when the
+   * underlying set changes mid-walk. Falls back to terminating on `has_more`
+   * when the server omits `next_cursor`.
   *
   * @param tag - The tag to filter by (e.g., 'models', 'input')
   * @param includePublic - Whether to include public assets (default: true)
@@ -520,18 +547,21 @@ function createAssetService() {
  async function getAllAssetsByTag(
    tag: string,
    includePublic: boolean = true,
-    { limit = DEFAULT_LIMIT, signal }: AssetPaginationOptions = {}
+    {
+      limit = DEFAULT_LIMIT,
+      signal
+    }: Pick<AssetPaginationOptions, 'limit' | 'signal'> = {}
  ): Promise<AssetItem[]> {
    const assets: AssetItem[] = []
    const pageSize = limit > 0 ? limit : DEFAULT_LIMIT
-    let offset = 0
+    let after: string | undefined

    while (true) {
      if (signal?.aborted) throw createAbortError()

      const data = await getAssetsPageByTag(tag, includePublic, {
        limit: pageSize,
-        offset,
+        after,
        signal
      })
      const batch = data.assets
@@ -541,11 +571,12 @@ function createAssetService() {

      assets.push(...batch)

-      if (!data.has_more) {
+      // A server that returns a non-advancing cursor would loop forever.
+      if (!data.has_more || !data.next_cursor || data.next_cursor === after) {
        return assets
      }

-      offset += batch.length
+      after = data.next_cursor
    }
  }

--- a/src/platform/nodeReplacement/components/SwapNodeGroupRow.test.ts
+++ b/src/platform/nodeReplacement/components/SwapNodeGroupRow.test.ts
@@ -1,6 +1,6 @@
 import { createTestingPinia } from '@pinia/testing'
 import { fromAny } from '@total-typescript/shoehorn'
-import { render, screen, within } from '@testing-library/vue'
+import { render, screen } from '@testing-library/vue'
 import userEvent from '@testing-library/user-event'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it, vi } from 'vitest'
@@ -15,11 +15,8 @@ const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
-      g: {
-        nodesCount: '{count} node | {count} nodes'
-      },
      rightSidePanel: {
-        locateNode: 'Locate node on canvas',
+        locateNode: 'Locate Node',
        missingNodePacks: {
          collapse: 'Collapse',
          expand: 'Expand'
@@ -51,6 +48,7 @@ function makeGroup(overrides: Partial<SwapNodeGroup> = {}): SwapNodeGroup {
 function renderRow(
  props: Partial<{
    group: SwapNodeGroup
+    showNodeIdBadge: boolean
    'onLocate-node': (nodeId: string) => void
    onReplace: (group: SwapNodeGroup) => void
  }> = {}
@@ -58,6 +56,7 @@ function renderRow(
  return render(SwapNodeGroupRow, {
    props: {
      group: makeGroup(),
+      showNodeIdBadge: false,
      ...props
    },
    global: {
@@ -76,15 +75,13 @@ describe('SwapNodeGroupRow', () => {
      expect(container.textContent).toContain('OldNodeType')
    })

-    it('renders node count as a badge', () => {
-      renderRow()
-      const badge = screen.getByLabelText('2 nodes')
-      expect(badge).toBeInTheDocument()
-      expect(within(badge).getByText('2')).toBeInTheDocument()
+    it('renders node count in parentheses', () => {
+      const { container } = renderRow()
+      expect(container.textContent).toContain('(2)')
    })

    it('renders node count of 5 for 5 nodeTypes', () => {
-      renderRow({
+      const { container } = renderRow({
        group: makeGroup({
          nodeTypes: Array.from({ length: 5 }, (_, i) => ({
            type: 'OldNodeType',
@@ -93,9 +90,7 @@ describe('SwapNodeGroupRow', () => {
          }))
        })
      })
-      const badge = screen.getByLabelText('5 nodes')
-      expect(badge).toBeInTheDocument()
-      expect(within(badge).getByText('5')).toBeInTheDocument()
+      expect(container.textContent).toContain('(5)')
    })

    it('renders the replacement target name', () => {
@@ -120,147 +115,106 @@ describe('SwapNodeGroupRow', () => {

  describe('Expand / Collapse', () => {
    it('starts collapsed — node list not visible', () => {
-      renderRow()
-      expect(
-        screen.queryByRole('button', { name: 'Locate node on canvas' })
-      ).not.toBeInTheDocument()
+      const { container } = renderRow({ showNodeIdBadge: true })
+      expect(container.textContent).not.toContain('#1')
    })

-    it('expands when title is clicked', async () => {
+    it('expands when chevron is clicked', async () => {
      const user = userEvent.setup()
-      renderRow()
-      await user.click(
-        screen.getByRole('button', { name: 'Expand OldNodeType' })
-      )
-      expect(
-        screen.getAllByRole('button', { name: 'Locate node on canvas' })
-      ).toHaveLength(2)
+      const { container } = renderRow({ showNodeIdBadge: true })
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(container.textContent).toContain('#1')
+      expect(container.textContent).toContain('#2')
    })

-    it('collapses when title is clicked again', async () => {
+    it('collapses when chevron is clicked again', async () => {
      const user = userEvent.setup()
-      renderRow()
-      await user.click(
-        screen.getByRole('button', { name: 'Expand OldNodeType' })
-      )
-      expect(
-        screen.getAllByRole('button', { name: 'Locate node on canvas' })
-      ).toHaveLength(2)
-      await user.click(
-        screen.getByRole('button', { name: 'Collapse OldNodeType' })
-      )
-      expect(
-        screen.queryByRole('button', { name: 'Locate node on canvas' })
-      ).not.toBeInTheDocument()
+      const { container } = renderRow({ showNodeIdBadge: true })
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(container.textContent).toContain('#1')
+      await user.click(screen.getByRole('button', { name: 'Collapse' }))
+      expect(container.textContent).not.toContain('#1')
    })

    it('updates the toggle control state when expanded', async () => {
      const user = userEvent.setup()
      renderRow()
-      const titleButton = screen.getByRole('button', {
-        name: 'Expand OldNodeType'
-      })
-      expect(titleButton).toHaveAttribute('aria-expanded', 'false')
-
-      await user.click(titleButton)
-
-      const collapseButton = screen.getByRole('button', {
-        name: 'Collapse OldNodeType'
-      })
-      expect(collapseButton).toHaveAttribute('aria-expanded', 'true')
+      expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(
+        screen.getByRole('button', { name: 'Collapse' })
+      ).toBeInTheDocument()
    })
  })

  describe('Node Type List (Expanded)', () => {
    async function expand() {
      const user = userEvent.setup()
-      await user.click(screen.getByRole('button', { name: /^Expand / }))
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
    }

    it('renders all nodeTypes when expanded', async () => {
-      renderRow({
+      const { container } = renderRow({
        group: makeGroup({
-          type: 'GroupedNodeType',
          nodeTypes: [
-            { type: 'GroupedNodeType', nodeId: '10', isReplaceable: true },
-            { type: 'GroupedNodeType', nodeId: '20', isReplaceable: true },
-            { type: 'GroupedNodeType', nodeId: '30', isReplaceable: true }
+            { type: 'OldNodeType', nodeId: '10', isReplaceable: true },
+            { type: 'OldNodeType', nodeId: '20', isReplaceable: true },
+            { type: 'OldNodeType', nodeId: '30', isReplaceable: true }
          ]
-        })
+        }),
+        showNodeIdBadge: true
      })
-      expect(screen.queryByRole('list')).not.toBeInTheDocument()
-
      await expand()
+      expect(container.textContent).toContain('#10')
+      expect(container.textContent).toContain('#20')
+      expect(container.textContent).toContain('#30')
+    })

-      expect(
-        within(screen.getByRole('list')).getAllByRole('listitem')
-      ).toHaveLength(3)
-      expect(
-        within(screen.getByRole('list')).getAllByText('GroupedNodeType')
-      ).toHaveLength(3)
+    it('shows nodeId badge when showNodeIdBadge is true', async () => {
+      const { container } = renderRow({ showNodeIdBadge: true })
+      await expand()
+      expect(container.textContent).toContain('#1')
+      expect(container.textContent).toContain('#2')
+    })
+
+    it('hides nodeId badge when showNodeIdBadge is false', async () => {
+      const { container } = renderRow({ showNodeIdBadge: false })
+      await expand()
+      expect(container.textContent).not.toContain('#1')
+      expect(container.textContent).not.toContain('#2')
    })

    it('renders Locate button for each nodeType with nodeId', async () => {
-      renderRow()
+      renderRow({ showNodeIdBadge: true })
      await expand()
      expect(
-        screen.getAllByRole('button', { name: 'Locate node on canvas' })
+        screen.getAllByRole('button', { name: 'Locate Node' })
      ).toHaveLength(2)
    })

    it('does not render Locate button for nodeTypes without nodeId', async () => {
      renderRow({
        group: makeGroup({
+          // Intentionally omits nodeId to test graceful handling of incomplete node data
          nodeTypes: fromAny<MissingNodeType[], unknown>([
-            { type: 'NoIdNode', isReplaceable: true },
-            { type: 'OtherNoIdNode', isReplaceable: true }
+            { type: 'NoIdNode', isReplaceable: true }
          ])
        })
      })
      await expand()
      expect(
-        screen.queryByRole('button', { name: 'Locate node on canvas' })
+        screen.queryByRole('button', { name: 'Locate Node' })
      ).not.toBeInTheDocument()
    })
-
-    it('renders locate controls only for locatable nodeTypes', async () => {
-      renderRow({
-        group: makeGroup({
-          type: 'MixedNodeType',
-          nodeTypes: fromAny<MissingNodeType[], unknown>([
-            { type: 'MixedNodeType', nodeId: '10', isReplaceable: true },
-            { type: 'MixedNodeType', isReplaceable: true }
-          ])
-        })
-      })
-
-      await expand()
-
-      expect(
-        within(screen.getByRole('list')).getAllByText('MixedNodeType')
-      ).toHaveLength(2)
-      expect(
-        within(screen.getByRole('list')).getAllByRole('button', {
-          name: 'MixedNodeType'
-        })
-      ).toHaveLength(1)
-      expect(
-        screen.getAllByRole('button', { name: 'Locate node on canvas' })
-      ).toHaveLength(1)
-    })
  })

  describe('Events', () => {
    it('emits locate-node with correct nodeId', async () => {
      const onLocateNode = vi.fn()
      const user = userEvent.setup()
-      renderRow({ 'onLocate-node': onLocateNode })
-      await user.click(
-        screen.getByRole('button', { name: 'Expand OldNodeType' })
-      )
-      const locateBtns = screen.getAllByRole('button', {
-        name: 'Locate node on canvas'
-      })
+      renderRow({ showNodeIdBadge: true, 'onLocate-node': onLocateNode })
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      const locateBtns = screen.getAllByRole('button', { name: 'Locate Node' })
      await user.click(locateBtns[0])
      expect(onLocateNode).toHaveBeenCalledWith('1')

@@ -279,100 +233,24 @@ describe('SwapNodeGroupRow', () => {
    })
  })

-  describe('Single Node Groups', () => {
-    it('locates a single node without expanding', async () => {
-      const onLocateNode = vi.fn()
-      const user = userEvent.setup()
-      renderRow({
-        group: makeGroup({
-          type: 'SingleNodeType',
-          nodeTypes: [
-            { type: 'SingleNodeType', nodeId: '42', isReplaceable: true }
-          ]
-        }),
-        'onLocate-node': onLocateNode
-      })
-
-      expect(
-        screen.queryByRole('button', { name: /^Expand / })
-      ).not.toBeInTheDocument()
-      expect(screen.queryByLabelText('1 node')).not.toBeInTheDocument()
-
-      await user.click(screen.getByRole('button', { name: 'SingleNodeType' }))
-      expect(onLocateNode).toHaveBeenCalledWith('42')
-
-      await user.click(
-        screen.getByRole('button', { name: 'Locate node on canvas' })
-      )
-      expect(onLocateNode).toHaveBeenCalledTimes(2)
-      expect(onLocateNode).toHaveBeenLastCalledWith('42')
-    })
-
-    it('renders a single node without nodeId as non-locatable text', () => {
-      renderRow({
-        group: makeGroup({
-          type: 'NoIdNode',
-          nodeTypes: fromAny<MissingNodeType[], unknown>([
-            { type: 'NoIdNode', isReplaceable: true }
-          ])
-        })
-      })
-
-      expect(screen.getByText('NoIdNode')).toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: 'NoIdNode' })
-      ).not.toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: 'Locate node on canvas' })
-      ).not.toBeInTheDocument()
-    })
-  })
-
  describe('Edge Cases', () => {
    it('handles empty nodeTypes array', () => {
-      renderRow({
-        group: makeGroup({
-          nodeTypes: []
-        })
+      const { container } = renderRow({
+        group: makeGroup({ nodeTypes: [] })
      })
-
-      expect(screen.getByText('OldNodeType')).toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: 'OldNodeType' })
-      ).not.toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: /^Expand / })
-      ).not.toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: 'Locate node on canvas' })
-      ).not.toBeInTheDocument()
+      expect(container.textContent).toContain('(0)')
    })

    it('handles string nodeType entries', async () => {
      const user = userEvent.setup()
-      renderRow({
+      const { container } = renderRow({
        group: makeGroup({
-          nodeTypes: fromAny<MissingNodeType[], unknown>([
-            'StringType',
-            'OtherStringType'
-          ])
+          // Intentionally uses a plain string entry to test legacy node type handling
+          nodeTypes: fromAny<MissingNodeType[], unknown>(['StringType'])
        })
      })
-      await user.click(
-        screen.getByRole('button', { name: 'Expand OldNodeType' })
-      )
-
-      expect(screen.getByText('StringType')).toBeInTheDocument()
-      expect(screen.getByText('OtherStringType')).toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: 'StringType' })
-      ).not.toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: 'OtherStringType' })
-      ).not.toBeInTheDocument()
-      expect(
-        screen.queryByRole('button', { name: 'Locate node on canvas' })
-      ).not.toBeInTheDocument()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(container.textContent).toContain('StringType')
    })
  })
 })
--- a/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
+++ b/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
@@ -1,152 +1,100 @@
 <template>
-  <div class="mb-1 flex w-full flex-col gap-0.5 last:mb-0">
-    <div class="flex min-h-8 w-full items-center gap-1">
+  <div class="mb-4 flex w-full flex-col">
+    <!-- Type header row: type name + chevron -->
+    <div class="flex h-8 w-full items-center">
+      <p class="text-foreground min-w-0 flex-1 truncate text-sm font-medium">
+        {{ `${group.type} (${group.nodeTypes.length})` }}
+      </p>
+
      <Button
-        v-if="hasMultipleNodeTypes"
        variant="textonly"
-        size="unset"
+        size="icon-sm"
        :class="
          cn(
-            'h-8 w-4 shrink-0 p-0 transition-transform duration-200 hover:bg-transparent',
-            expanded && 'rotate-90'
+            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
+            { 'rotate-180': expanded }
          )
        "
-        aria-hidden="true"
-        tabindex="-1"
+        :aria-label="
+          expanded
+            ? t('rightSidePanel.missingNodePacks.collapse', 'Collapse')
+            : t('rightSidePanel.missingNodePacks.expand', 'Expand')
+        "
        @click="toggleExpand"
      >
        <i
-          aria-hidden="true"
-          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
+          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
        />
      </Button>
-
-      <span class="flex min-w-0 flex-1 flex-col gap-0">
-        <span class="flex min-w-0 items-center gap-2">
-          <span class="flex min-w-0 items-center gap-2.5">
-            <button
-              v-if="hasMultipleNodeTypes"
-              type="button"
-              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-base-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-1 focus-visible:outline-none"
-              :title="group.type"
-              :aria-label="titleToggleAriaLabel"
-              :aria-expanded="expanded"
-              @click="toggleExpand"
-            >
-              {{ group.type }}
-            </button>
-            <button
-              v-else-if="primaryLocatableNodeType"
-              type="button"
-              class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-base-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-1 focus-visible:outline-none"
-              :title="group.type"
-              @click="handleLocateNode(primaryLocatableNodeType)"
-            >
-              {{ group.type }}
-            </button>
-            <span
-              v-else
-              class="min-w-0 truncate text-sm/relaxed font-normal text-base-foreground"
-              :title="group.type"
-            >
-              {{ group.type }}
-            </span>
-            <span
-              v-if="hasMultipleNodeTypes"
-              data-testid="swap-node-group-count"
-              role="img"
-              class="flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary-background-selected text-xs font-bold text-muted-foreground"
-              :aria-label="t('g.nodesCount', group.nodeTypes.length)"
-            >
-              {{ group.nodeTypes.length }}
-            </span>
-          </span>
-        </span>
-        <span class="min-w-0 text-xs/relaxed text-muted-foreground">
-          {{
-            t(
-              'nodeReplacement.willBeReplacedBy',
-              'This node will be replaced by:'
-            )
-          }}
-          <span
-            class="inline-flex rounded-sm bg-modal-card-tag-background px-1.5 py-0.5 text-xs/none font-medium text-modal-card-tag-foreground"
-          >
-            {{ replacementLabel }}
-          </span>
-        </span>
-      </span>
-
-      <Button
-        variant="secondary"
-        size="sm"
-        class="h-8 shrink-0 rounded-lg text-sm"
-        @click="handleReplaceNode"
-      >
-        <i
-          aria-hidden="true"
-          class="text-foreground mr-1 icon-[lucide--repeat] size-4 shrink-0"
-        />
-        <span class="text-foreground min-w-0 truncate">
-          {{ t('nodeReplacement.replaceNode', 'Replace Node') }}
-        </span>
-      </Button>
-
-      <Button
-        v-if="primaryLocatableNodeType"
-        variant="textonly"
-        size="icon-sm"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-        :aria-label="locateNodeLabel"
-        @click="handleLocateNode(primaryLocatableNodeType)"
-      >
-        <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
-      </Button>
    </div>

+    <!-- Sub-labels: individual node instances, each with their own Locate button -->
    <TransitionCollapse>
-      <ul v-if="expanded" class="m-0 list-none space-y-1 p-0 pl-5">
-        <li
-          v-for="(nodeType, index) in group.nodeTypes"
-          :key="getKey(nodeType, index)"
-          class="min-w-0"
+      <div
+        v-if="expanded"
+        class="mb-2 flex flex-col gap-0.5 overflow-hidden pl-2"
+      >
+        <div
+          v-for="nodeType in group.nodeTypes"
+          :key="getKey(nodeType)"
+          class="flex h-7 items-center"
        >
-          <div class="flex min-w-0 items-center gap-2">
-            <span class="flex min-w-0 flex-1 items-center gap-1">
-              <button
-                v-if="isLocatableNodeType(nodeType)"
-                type="button"
-                class="focus-visible:ring-ring m-0 inline max-w-full cursor-pointer appearance-none rounded-sm border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word text-muted-foreground outline-none hover:text-base-foreground focus:outline-none focus-visible:underline focus-visible:ring-1 focus-visible:outline-none"
-                @click="handleLocateNode(nodeType)"
-              >
-                {{ getLabel(nodeType) }}
-              </button>
-              <span
-                v-else
-                class="text-sm/relaxed wrap-break-word text-muted-foreground"
-              >
-                {{ getLabel(nodeType) }}
-              </span>
-            </span>
-            <Button
-              v-if="isLocatableNodeType(nodeType)"
-              variant="textonly"
-              size="icon-sm"
-              class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-              :aria-label="locateNodeLabel"
-              @click="handleLocateNode(nodeType)"
-            >
-              <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
-            </Button>
-          </div>
-        </li>
-      </ul>
+          <span
+            v-if="
+              showNodeIdBadge &&
+              typeof nodeType !== 'string' &&
+              nodeType.nodeId != null
+            "
+            class="mr-1 shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
+          >
+            #{{ nodeType.nodeId }}
+          </span>
+          <p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+            {{ getLabel(nodeType) }}
+          </p>
+          <Button
+            v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
+            variant="textonly"
+            size="icon-sm"
+            class="mr-1 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
+            :aria-label="t('rightSidePanel.locateNode', 'Locate Node')"
+            @click="handleLocateNode(nodeType)"
+          >
+            <i class="icon-[lucide--locate] size-3" />
+          </Button>
+        </div>
+      </div>
    </TransitionCollapse>
+
+    <!-- Description rows: what it is replaced by -->
+    <div class="mt-1 mb-2 flex flex-col gap-0.5 px-1 text-[13px]">
+      <span class="text-muted-foreground">{{
+        t('nodeReplacement.willBeReplacedBy', 'This node will be replaced by:')
+      }}</span>
+      <span class="text-foreground font-bold">{{
+        group.newNodeId ?? t('nodeReplacement.unknownNode', 'Unknown')
+      }}</span>
+    </div>
+
+    <!-- Replace Action Button -->
+    <div class="flex w-full items-start py-1">
+      <Button
+        variant="secondary"
+        size="md"
+        class="flex w-full flex-1"
+        @click="handleReplaceNode"
+      >
+        <i class="text-foreground mr-1 icon-[lucide--repeat] size-4 shrink-0" />
+        <span class="text-foreground min-w-0 truncate text-sm">
+          {{ t('nodeReplacement.replaceNode', 'Replace Node') }}
+        </span>
+      </Button>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { cn } from '@comfyorg/tailwind-utils'
 import { useI18n } from 'vue-i18n'
 import Button from '@/components/ui/button/Button.vue'
@@ -154,8 +102,9 @@ import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCol
 import type { MissingNodeType } from '@/types/comfy'
 import type { SwapNodeGroup } from '@/components/rightSidePanel/errors/useErrorGroups'

-const { group } = defineProps<{
+const props = defineProps<{
  group: SwapNodeGroup
+  showNodeIdBadge: boolean
 }>()

 const emit = defineEmits<{
@@ -166,54 +115,28 @@ const emit = defineEmits<{
 const { t } = useI18n()

 const expanded = ref(false)
-const hasMultipleNodeTypes = computed(() => group.nodeTypes.length > 1)
-const replacementLabel = computed(
-  () => group.newNodeId ?? t('nodeReplacement.unknownNode', 'Unknown')
-)
-const locateNodeLabel = computed(() =>
-  t('rightSidePanel.locateNode', 'Locate node on canvas')
-)
-const titleToggleAriaLabel = computed(
-  () =>
-    `${
-      expanded.value
-        ? t('rightSidePanel.missingNodePacks.collapse', 'Collapse')
-        : t('rightSidePanel.missingNodePacks.expand', 'Expand')
-    } ${group.type}`
-)
-const primaryLocatableNodeType = computed(() => {
-  if (group.nodeTypes.length !== 1) return null
-  const [nodeType] = group.nodeTypes
-  return isLocatableNodeType(nodeType) ? nodeType : null
-})

 function toggleExpand() {
  expanded.value = !expanded.value
 }

-function getKey(nodeType: MissingNodeType, index: number): string {
-  if (typeof nodeType === 'string') return `${nodeType}-${index}`
-  return nodeType.nodeId != null
-    ? String(nodeType.nodeId)
-    : `${nodeType.type}-${index}`
+function getKey(nodeType: MissingNodeType): string {
+  if (typeof nodeType === 'string') return nodeType
+  return nodeType.nodeId != null ? String(nodeType.nodeId) : nodeType.type
 }

 function getLabel(nodeType: MissingNodeType): string {
  return typeof nodeType === 'string' ? nodeType : nodeType.type
 }

-function isLocatableNodeType(
-  nodeType: MissingNodeType
-): nodeType is Exclude<MissingNodeType, string> & { nodeId: string | number } {
-  return typeof nodeType !== 'string' && nodeType.nodeId != null
-}
-
 function handleLocateNode(nodeType: MissingNodeType) {
-  if (!isLocatableNodeType(nodeType)) return
-  emit('locate-node', String(nodeType.nodeId))
+  if (typeof nodeType === 'string') return
+  if (nodeType.nodeId != null) {
+    emit('locate-node', String(nodeType.nodeId))
+  }
 }

 function handleReplaceNode() {
-  emit('replace', group)
+  emit('replace', props.group)
 }
 </script>
--- a/src/platform/nodeReplacement/components/SwapNodesCard.test.ts
+++ b/src/platform/nodeReplacement/components/SwapNodesCard.test.ts
@@ -10,8 +10,8 @@ vi.mock('./SwapNodeGroupRow.vue', () => ({
  default: {
    name: 'SwapNodeGroupRow',
    template:
-      '<div class="swap-row" :data-group-type="group?.type"><button class="locate-trigger" @click="$emit(\'locate-node\', group?.nodeTypes?.[0]?.nodeId)">Locate</button><button class="replace-trigger" @click="$emit(\'replace\', group)">Replace</button></div>',
-    props: ['group'],
+      '<div class="swap-row" :data-show-node-id-badge="showNodeIdBadge" :data-group-type="group?.type"><button class="locate-trigger" @click="$emit(\'locate-node\', group?.nodeTypes?.[0]?.nodeId)">Locate</button><button class="replace-trigger" @click="$emit(\'replace\', group)">Replace</button></div>',
+    props: ['group', 'showNodeIdBadge'],
    emits: ['locate-node', 'replace']
  }
 }))
@@ -29,6 +29,7 @@ function makeGroups(count = 2): SwapNodeGroup[] {
 function mountCard(
  props: Partial<{
    swapNodeGroups: SwapNodeGroup[]
+    showNodeIdBadge: boolean
  }> = {},
  callbacks?: {
    onLocateNode?: (nodeId: string) => void
@@ -38,6 +39,7 @@ function mountCard(
  return render(SwapNodesCard, {
    props: {
      swapNodeGroups: makeGroups(),
+      showNodeIdBadge: false,
      ...props,
      ...(callbacks?.onLocateNode
        ? { 'onLocate-node': callbacks.onLocateNode }
@@ -70,6 +72,16 @@ describe('SwapNodesCard', () => {
      expect(container.querySelectorAll('.swap-row')).toHaveLength(1)
    })

+    it('passes showNodeIdBadge to children', () => {
+      const { container } = mountCard({
+        swapNodeGroups: makeGroups(1),
+        showNodeIdBadge: true
+      })
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const row = container.querySelector('.swap-row')
+      expect(row!.getAttribute('data-show-node-id-badge')).toBe('true')
+    })
+
    it('passes group prop to children', () => {
      const groups = makeGroups(1)
      const { container } = mountCard({ swapNodeGroups: groups })
--- a/src/platform/nodeReplacement/components/SwapNodesCard.vue
+++ b/src/platform/nodeReplacement/components/SwapNodesCard.vue
@@ -4,6 +4,7 @@
      v-for="group in swapNodeGroups"
      :key="group.type"
      :group="group"
+      :show-node-id-badge="showNodeIdBadge"
      @locate-node="emit('locate-node', $event)"
      @replace="emit('replace', $event)"
    />
@@ -14,8 +15,9 @@
 import type { SwapNodeGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 import SwapNodeGroupRow from '@/platform/nodeReplacement/components/SwapNodeGroupRow.vue'

-const { swapNodeGroups } = defineProps<{
+const { swapNodeGroups, showNodeIdBadge } = defineProps<{
  swapNodeGroups: SwapNodeGroup[]
+  showNodeIdBadge: boolean
 }>()

 const emit = defineEmits<{
--- a/src/platform/updates/common/releaseService.test.ts
+++ b/src/platform/updates/common/releaseService.test.ts
@@ -53,7 +53,8 @@ describe('useReleaseService', () => {
          project: 'comfyui',
          current_version: '1.0.0'
        },
-        signal: undefined
+        signal: undefined,
+        headers: undefined
      })

      expect(result).toEqual(mockReleases)
@@ -76,7 +77,8 @@ describe('useReleaseService', () => {
          current_version: '1.0.0',
          form_factor: 'desktop-windows'
        },
-        signal: undefined
+        signal: undefined,
+        headers: undefined
      })

      expect(result).toEqual(mockReleases)
@@ -86,11 +88,30 @@ describe('useReleaseService', () => {
      const abortController = new AbortController()
      mockAxiosInstance.get.mockResolvedValue({ data: mockReleases })

-      await service.getReleases({ project: 'comfyui' }, abortController.signal)
+      await service.getReleases(
+        { project: 'comfyui' },
+        { signal: abortController.signal }
+      )

      expect(mockAxiosInstance.get).toHaveBeenCalledWith('/releases', {
        params: { project: 'comfyui' },
-        signal: abortController.signal
+        signal: abortController.signal,
+        headers: undefined
+      })
+    })
+
+    it('should send Comfy-Env header when deployEnvironment is provided', async () => {
+      mockAxiosInstance.get.mockResolvedValue({ data: mockReleases })
+
+      await service.getReleases(
+        { project: 'comfyui' },
+        { deployEnvironment: 'local-desktop' }
+      )
+
+      expect(mockAxiosInstance.get).toHaveBeenCalledWith('/releases', {
+        params: { project: 'comfyui' },
+        signal: undefined,
+        headers: { 'Comfy-Env': 'local-desktop' }
      })
    })

--- a/src/platform/updates/common/releaseService.ts
+++ b/src/platform/updates/common/releaseService.ts
@@ -98,8 +98,9 @@ export const useReleaseService = () => {
  // Fetch release notes from API
  const getReleases = async (
    params: GetReleasesParams,
-    signal?: AbortSignal
+    options: { signal?: AbortSignal; deployEnvironment?: string } = {}
  ): Promise<ReleaseNote[] | null> => {
+    const { signal, deployEnvironment } = options
    const endpoint = '/releases'
    const errorContext = 'Failed to get releases'
    const routeSpecificErrors = {
@@ -110,7 +111,10 @@ export const useReleaseService = () => {
      () =>
        releaseApiClient.get<ReleaseNote[]>(endpoint, {
          params,
-          signal
+          signal,
+          headers: deployEnvironment
+            ? { 'Comfy-Env': deployEnvironment }
+            : undefined
        }),
      errorContext,
      routeSpecificErrors
--- a/src/platform/updates/common/releaseStore.test.ts
+++ b/src/platform/updates/common/releaseStore.test.ts
@@ -228,12 +228,15 @@ describe('useReleaseStore', () => {

        await store.initialize()

-        expect(releaseService.getReleases).toHaveBeenCalledWith({
-          project: 'comfyui',
-          current_version: '1.0.0',
-          form_factor: 'git-windows',
-          locale: 'en'
-        })
+        expect(releaseService.getReleases).toHaveBeenCalledWith(
+          {
+            project: 'comfyui',
+            current_version: '1.0.0',
+            form_factor: 'git-windows',
+            locale: 'en'
+          },
+          { deployEnvironment: undefined }
+        )
      })
    })

@@ -300,12 +303,15 @@ describe('useReleaseStore', () => {

      await store.initialize()

-      expect(releaseService.getReleases).toHaveBeenCalledWith({
-        project: 'comfyui',
-        current_version: '1.0.0',
-        form_factor: 'git-windows',
-        locale: 'en'
-      })
+      expect(releaseService.getReleases).toHaveBeenCalledWith(
+        {
+          project: 'comfyui',
+          current_version: '1.0.0',
+          form_factor: 'git-windows',
+          locale: 'en'
+        },
+        { deployEnvironment: undefined }
+      )
      expect(store.releases).toEqual([mockRelease])
    })

@@ -318,12 +324,30 @@ describe('useReleaseStore', () => {

      await store.initialize()

-      expect(releaseService.getReleases).toHaveBeenCalledWith({
-        project: 'comfyui',
-        current_version: '1.0.0',
-        form_factor: 'desktop-mac',
-        locale: 'en'
-      })
+      expect(releaseService.getReleases).toHaveBeenCalledWith(
+        {
+          project: 'comfyui',
+          current_version: '1.0.0',
+          form_factor: 'desktop-mac',
+          locale: 'en'
+        },
+        { deployEnvironment: undefined }
+      )
+    })
+
+    it('should pass deploy_environment from system stats', async () => {
+      const store = useReleaseStore()
+      const releaseService = useReleaseService()
+      const systemStatsStore = useSystemStatsStore()
+      systemStatsStore.systemStats!.system.deploy_environment = 'local-desktop'
+      vi.mocked(releaseService.getReleases).mockResolvedValue([mockRelease])
+
+      await store.initialize()
+
+      expect(releaseService.getReleases).toHaveBeenCalledWith(
+        expect.anything(),
+        { deployEnvironment: 'local-desktop' }
+      )
    })

    it('should skip fetching when --disable-api-nodes is present', async () => {
--- a/src/platform/updates/common/releaseStore.ts
+++ b/src/platform/updates/common/releaseStore.ts
@@ -266,12 +266,18 @@ export const useReleaseStore = defineStore('release', () => {
        await until(systemStatsStore.isInitialized)
      }

-      const fetchedReleases = await releaseService.getReleases({
-        project: isCloud ? 'cloud' : 'comfyui',
-        current_version: currentVersion.value,
-        form_factor: systemStatsStore.getFormFactor(),
-        locale: stringToLocale(locale.value)
-      })
+      const fetchedReleases = await releaseService.getReleases(
+        {
+          project: isCloud ? 'cloud' : 'comfyui',
+          current_version: currentVersion.value,
+          form_factor: systemStatsStore.getFormFactor(),
+          locale: stringToLocale(locale.value)
+        },
+        {
+          deployEnvironment:
+            systemStatsStore.systemStats?.system?.deploy_environment
+        }
+      )

      if (fetchedReleases !== null) {
        releases.value = fetchedReleases
--- a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
+++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
@@ -51,6 +51,9 @@ const AudioPreviewPlayer = defineAsyncComponent(
 const Load3D = defineAsyncComponent(
  () => import('@/components/load3d/Load3D.vue')
 )
+const Load3DAdvanced = defineAsyncComponent(
+  () => import('@/components/load3d/Load3DAdvanced.vue')
+)
 const WidgetImageCrop = defineAsyncComponent(
  () => import('@/components/imagecrop/WidgetImageCrop.vue')
 )
@@ -169,6 +172,14 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
    }
  ],
  ['load3D', { component: Load3D, aliases: ['LOAD_3D'], essential: false }],
+  [
+    'load3DAdvanced',
+    {
+      component: Load3DAdvanced,
+      aliases: ['LOAD_3D_ADVANCED'],
+      essential: false
+    }
+  ],
  [
    'imagecrop',
    {
@@ -243,6 +254,7 @@ const EXPANDING_TYPES = [
  'textarea',
  'markdown',
  'load3D',
+  'load3DAdvanced',
  'curve',
  'painter',
  'imagecompare',
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -252,6 +252,7 @@ const zSystemStats = z.object({
    python_version: z.string(),
    embedded_python: z.boolean(),
    comfyui_version: z.string(),
+    deploy_environment: z.string().optional(),
    pytorch_version: z.string(),
    required_frontend_version: z.string().optional(),
    argv: z.array(z.string()),
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -108,6 +108,11 @@ interface QueuePromptRequestBody {
     * ```
     */
    api_key_comfy_org?: string
+    /**
+     * Identifies the client submitting the prompt. Forwarded by the backend
+     * to API nodes' upstream requests via the Comfy-Usage-Source header.
+     */
+    comfy_usage_source?: string
    /**
     * Override the preview method for this prompt execution.
     * 'default' uses the server's CLI setting.
@@ -867,6 +872,7 @@ export class ComfyApi extends EventTarget {
      extra_data: {
        auth_token_comfy_org: this.authToken,
        api_key_comfy_org: this.apiKey,
+        comfy_usage_source: 'comfyui-frontend',
        extra_pnginfo: { workflow },
        ...(options?.previewMethod &&
          options.previewMethod !== 'default' && {
Author	SHA1	Message	Date
Matt Miller	aa68573a6e	fix: remove broken throttle from VirtualGrid scroll tracking (#12781 ) ## Summary Every `VirtualGrid` consumer (assets sidebar, manager dialog, widget select dropdown) is blind to discrete mouse-wheel scrolling: `useScroll`'s `throttle: 64` never reports scroll position, so the virtualization window stays frozen — users see blank space below the first viewport of items and `approach-end` (infinite scroll) never fires. Trackpad scrolling masks the bug by emitting events faster than the throttle window. ## Changes - What: drop the `throttle` option from `useScroll` in `VirtualGrid` and remove the `scrollThrottle` prop (no consumer passes it). Scroll events are frame-aligned and the handler is cheap, so the throttle bought nothing even when it worked. - Root cause: VueUse ≥14 `throttleFilter` with `leading=false` (what `useScroll` uses) marks spaced-out events as executed without executing them — each event re-arms an `isLeading` restore timer that makes the next event skip its invoke, and the trailing branch is unreachable when `elapsed > duration`. Regression of vueuse#2390; still present on vueuse `main`. ## Review Focus - Verified live against staging: with the throttle, sidebar scrolled to `scrollTop` 1250 while `scrollY` stayed 0 and the render window stayed at `[0..3)` of 27 (blank viewport); with this fix, `scrollY` tracks 1:1 and the window advances. Bare-vs-throttled `useScroll` compared side-by-side on the same element to isolate the cause. - Unblocks wheel-scroll for #12780's dropdown infinite scroll with no changes there. - Fixes FE-990 🤖 Generated with [Claude Code](https://claude.com/claude-code)	2026-06-11 03:27:54 +00:00
Deep Mehta	79acf7be5e	fix: re-encode favicon.ico with PNG frames to fix white corner artifacts (#12753 ) ## Summary The rebranded `favicon.ico` renders with opaque white corners in browsers — the rounded mark shows white slivers around its corners on any background. This is a decode bug, not a design issue: the ICO contains BMP-format frames whose alpha channel Chrome (and other consumers) mishandle. Verified by loading the raw `.ico` in headless Chrome on a dark page: corners render white instead of transparent. Every surface that consumes the `.ico` directly shows the artifact — Google search results, connector icon scraping, raw image views — while browser tabs look fine because they prefer the SVG favicon. ## Changes - What: Re-encode `apps/website/public/favicon.ico` and `public/assets/favicon.ico` with PNG-format ICO frames (16/32/48). PNG frames carry unambiguous alpha and decode correctly in all modern browsers. - No design change: identical rounded artwork, same transparency, same sizes and filenames. SVG, PNGs, apple-touch-icon, and manifest icons are untouched. - Breaking: none. ## Review Focus - Headless-Chrome verified: the old ico renders white corners on a dark page; the re-encoded one renders transparent corners. (Comparison in PR comments.) - PNG-in-ICO is supported by all modern browsers and Google's favicon pipeline. - After merge, please add `needs-backport` + `cloud/1.45` so cloud.comfy.org's copy gets the same fix. ## Screenshots (if applicable) --------- Co-authored-by: GitHub Action <action@github.com>	2026-06-11 03:27:53 +00:00
Robin Huang	02adfd4b83	feat: identify prompt source via comfy_usage_source extra_data (#12772 ) Adds `comfy_usage_source: 'comfyui-frontend'` to the prompt body's `extra_data`. The backend forwards this to API nodes' upstream requests via the `Comfy-Usage-Source` header, so partner node API usage can be attributed to the frontend. Used in https://github.com/Comfy-Org/ComfyUI/pull/14404	2026-06-10 22:43:34 +00:00
Robin Huang	7c2c78b537	feat: send deploy_environment as Comfy-Env header on /releases requests (#12771 ) Reads `system.deploy_environment` from `/system_stats` (added in Comfy-Org/ComfyUI#14402) and sends it as the `Comfy-Env` header when fetching `/releases`, matching the header name the backend already uses for outbound API node requests. The header is omitted when the backend doesn't report the field, so older backends are unaffected. Note: api.comfy.org must allow `Comfy-Env` in `Access-Control-Allow-Headers` for the CORS preflight to pass.	2026-06-10 21:30:08 +00:00
Matt Miller	bd1fd0680e	feat(assets): walk getAllAssetsByTag via keyset cursor (#12720 ) ## ELI-5 When the app needs all the assets for a tag (like every input image), it asks the server for them one page at a time. Today it says "give me page starting at item #500" (offset paging). If items get added or removed while it's flipping through, pages shift and it can show the same thing twice or skip something. This switches to "give me the page after this bookmark" (cursor paging). The server now hands back a `next_cursor` bookmark with each page; we pass it to fetch the next one. Bookmarks don't slip when the list changes underneath, so the walk is stable and drift-free. ## What Migrates the full-walk asset pager (`getAllAssetsByTag`) from offset to keyset (`after` / `next_cursor`) pagination, now that the list-assets endpoint exposes a cursor contract in the generated types. - `handleAssetRequest` accepts an `after` cursor and sends it instead of `offset` when present (the server ignores `offset` alongside a cursor) - `getAllAssetsByTag` resumes each page from the prior response's `next_cursor`, and terminates when `has_more` is false or `next_cursor` is omitted - `next_cursor` is exposed on the asset response schema; `after` is threaded through `getAssetsByTag` / `getAssetsPageByTag` for cursor-aware callers - offset remains supported for random-access callers; only the full-walk path changes ## Why Offset pagination double-counts or skips records when the underlying set changes mid-walk. Keyset cursors are stable under concurrent inserts/deletes and scale better than deep offsets. ## Stacking Based on `update-ingest-types` because the `after`/`next_cursor` types land there first; this targets that branch and will retarget to the default branch once it merges. Changes here touch only the asset service/schema, disjoint from the generated types. ## Follow-ups The asset store's bespoke offset loops (model loader, flat-output infinite scroll) and the missing-media resolver still walk by offset; those migrate in separate PRs. ## Tests `assetService.test.ts` updated to assert the cursor walk, that the first page carries neither `after` nor `offset`, that subsequent pages resume from `next_cursor`, and that the walk halts when `next_cursor` is absent even if `has_more` is true. Full asset/service + missing-media + store suites pass locally (193 tests). --------- Co-authored-by: mattmillerai <7741082+mattmillerai@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com>	2026-06-10 21:15:19 +00:00
Robin Huang	9617e498c9	feat: track desktop download button clicks on website (#12770 ) Adds a `website:download_button_clicked` PostHog event (with `platform` property) fired when a user clicks the desktop installer download button on comfy.org. Previously we only had `/download` pageviews as a proxy — autocapture is not active on the website project, so these clicks were untracked. Includes unit tests for the new capture helper. Co-authored-by: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 20:44:57 +00:00
Terry Jia	25205c0f55	feat: add Load3DAdvanced node (#12723 ) ## Summary add Load3DAdvanced node, without FE render, upload BE and HDRI. BE https://github.com/Comfy-Org/ComfyUI/pull/14316 ## Screenshots (if applicable) https://github.com/user-attachments/assets/e561c919-bb52-4904-97da-fb01885762a7	2026-06-10 13:51:50 -04:00