fix tests

refactor to use useMouse + rAF sampling for the drag ghost
- replace pointer tracking with once per frame transform
2026-06-11 00:38:37 +00:00 · 2026-06-10 12:34:13 -07:00 · 2026-06-10 09:02:49 -07:00 · 2026-06-10 08:19:14 -07:00 · 2026-06-10 07:47:30 -07:00 · 2026-06-10 06:04:16 -07:00
37 changed files with 2041 additions and 1218 deletions
--- a/browser_tests/assets/missing/missing_nodes_same_pack.json
+++ b/browser_tests/assets/missing/missing_nodes_same_pack.json
@@ -0,0 +1,48 @@
+{
+  "last_node_id": 2,
+  "last_link_id": 0,
+  "nodes": [
+    {
+      "id": 1,
+      "type": "TEST_MISSING_PACK_NODE_A",
+      "pos": [48, 86],
+      "size": [400, 200],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "TEST_MISSING_PACK_NODE_A",
+        "cnr_id": "test-missing-node-pack"
+      },
+      "widgets_values": []
+    },
+    {
+      "id": 2,
+      "type": "TEST_MISSING_PACK_NODE_B",
+      "pos": [520, 86],
+      "size": [400, 200],
+      "flags": {},
+      "order": 1,
+      "mode": 0,
+      "inputs": [],
+      "outputs": [],
+      "properties": {
+        "Node name for S&R": "TEST_MISSING_PACK_NODE_B",
+        "cnr_id": "test-missing-node-pack"
+      },
+      "widgets_values": []
+    }
+  ],
+  "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
@@ -45,6 +45,8 @@ export const TestIds = {
    errorOverlayMessages: 'error-overlay-messages',
    runtimeErrorPanel: 'runtime-error-panel',
    missingNodeCard: 'missing-node-card',
+    missingNodePackExpand: 'missing-node-pack-expand',
+    missingNodePackCount: 'missing-node-pack-count',
    errorCardFindOnGithub: 'error-card-find-on-github',
    errorCardCopy: 'error-card-copy',
    errorDialog: 'error-dialog',
--- a/browser_tests/tests/browseModelAssets.spec.ts
+++ b/browser_tests/tests/browseModelAssets.spec.ts
@@ -0,0 +1,61 @@
+import { expect } from '@playwright/test'
+
+import type { Asset } from '@comfyorg/ingest-types'
+import { createCloudAssetsFixture } from '@e2e/fixtures/assetApiFixture'
+import { STABLE_CHECKPOINT } from '@e2e/fixtures/data/assetFixtures'
+
+const CLOUD_ASSETS: Asset[] = [STABLE_CHECKPOINT]
+
+const test = createCloudAssetsFixture(CLOUD_ASSETS)
+
+test.describe('Browse Model Assets - Use button', { tag: '@cloud' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.Assets.UseAssetAPI', true)
+    await comfyPage.nodeOps.clearGraph()
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.nodeOps.clearGraph()
+  })
+
+  test('Use button ghost-places a loader populated with the model', async ({
+    comfyPage
+  }) => {
+    await comfyPage.command.executeCommand('Comfy.BrowseModelAssets')
+
+    const modal = comfyPage.page.locator(
+      '[data-component-id="AssetBrowserModal"]'
+    )
+    await expect(modal).toBeVisible()
+
+    const card = comfyPage.page.locator(
+      `[data-component-id="AssetCard"][data-asset-id="${STABLE_CHECKPOINT.id}"]`
+    )
+    await expect(card).toBeVisible()
+    await card.getByRole('button', { name: 'Use' }).click()
+
+    // Dialog closes and the ghost is armed; the node is not placed until the
+    // user clicks the canvas.
+    await expect(modal).toBeHidden()
+    await expect
+      .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 1000 })
+      .toBe(0)
+
+    const canvasBox = (await comfyPage.canvas.boundingBox())!
+    await comfyPage.canvas.click({
+      position: { x: canvasBox.width / 2, y: canvasBox.height / 2 }
+    })
+
+    await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
+    await expect
+      .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+      .toBe(1)
+
+    const [loader] = await comfyPage.nodeOps.getNodeRefsByType(
+      'CheckpointLoaderSimple'
+    )
+    expect(loader).toBeDefined()
+    const widget = await loader.getWidgetByName('ckpt_name')
+    expect(await widget.getValue()).toBe(STABLE_CHECKPOINT.name)
+  })
+})
--- a/browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts
+++ b/browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts
@@ -4,7 +4,7 @@ import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
 import { TestIds } from '@e2e/fixtures/selectors'
 import { loadWorkflowAndOpenErrorsTab } from '@e2e/fixtures/helpers/ErrorsTabHelper'

-test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
+test.describe('Errors tab - Missing nodes', { tag: ['@ui', '@canvas'] }, () => {
  test.beforeEach(async ({ comfyPage }) => {
    await comfyPage.settings.setSetting(
      'Comfy.RightSidePanel.ShowErrorsTab',
@@ -12,27 +12,39 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
    )
  })

-  test('Should show MissingNodeCard in errors tab', async ({ comfyPage }) => {
-    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
-
-    await expect(
-      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
-    ).toBeVisible()
-  })
-
-  test('Should show missing node packs group', async ({ comfyPage }) => {
+  test('Should show missing node pack card with guidance', async ({
+    comfyPage
+  }) => {
    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')

    const missingNodeGroup = comfyPage.page.getByTestId(
      TestIds.dialogs.missingNodePacksGroup
    )
+
+    await expect(
+      comfyPage.page.getByTestId(TestIds.dialogs.missingNodeCard)
+    ).toBeVisible()
    await expect(missingNodeGroup).toBeVisible()
    await expect(
      missingNodeGroup.getByTestId(TestIds.dialogs.errorGroupDisplayMessage)
    ).toHaveText(/\S/)
  })

-  test('Should expand pack group to reveal node type names', async ({
+  test('Should show unknown pack node rows by default', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')
+
+    const missingNodeCard = comfyPage.page.getByTestId(
+      TestIds.dialogs.missingNodeCard
+    )
+    await expect(missingNodeCard.getByText('Unknown pack')).toBeVisible()
+    await expect(
+      missingNodeCard.getByRole('button', { name: 'UNKNOWN NODE' })
+    ).toBeVisible()
+  })
+
+  test('Should show subgraph missing node rows by default', async ({
    comfyPage
  }) => {
    await loadWorkflowAndOpenErrorsTab(
@@ -43,66 +55,72 @@ test.describe('Errors tab - Missing nodes', { tag: '@ui' }, () => {
    const missingNodeCard = comfyPage.page.getByTestId(
      TestIds.dialogs.missingNodeCard
    )
-    await expect(missingNodeCard).toBeVisible()
-
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
+      missingNodeCard.getByRole('button', {
+        name: 'MISSING_NODE_TYPE_IN_SUBGRAPH'
+      })
    ).toBeVisible()
  })

-  test('Should collapse expanded pack group', async ({ comfyPage }) => {
-    await loadWorkflowAndOpenErrorsTab(
-      comfyPage,
-      'missing/missing_nodes_in_subgraph'
-    )
+  test('Should locate missing node from the row label', async ({
+    comfyPage
+  }) => {
+    await loadWorkflowAndOpenErrorsTab(comfyPage, 'missing/missing_nodes')

    const missingNodeCard = comfyPage.page.getByTestId(
      TestIds.dialogs.missingNodeCard
    )
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeVisible()
+    await comfyPage.canvasOps.pan({ x: -800, y: -800 })
+    const offsetBeforeLocate = await comfyPage.canvasOps.getOffset()

-    await missingNodeCard
-      .getByRole('button', { name: /collapse/i })
-      .first()
-      .click()
-    await expect(
-      missingNodeCard.getByText('MISSING_NODE_TYPE_IN_SUBGRAPH')
-    ).toBeHidden()
+    await missingNodeCard.getByRole('button', { name: 'UNKNOWN NODE' }).click()
+
+    await expect
+      .poll(() => comfyPage.canvasOps.getOffset())
+      .not.toEqual(offsetBeforeLocate)
  })

-  test('Locate node button is visible for expanded pack nodes', async ({
+  test('Should toggle grouped pack nodes from chevron and title', async ({
    comfyPage
  }) => {
    await loadWorkflowAndOpenErrorsTab(
      comfyPage,
-      'missing/missing_nodes_in_subgraph'
+      'missing/missing_nodes_same_pack'
    )

    const missingNodeCard = comfyPage.page.getByTestId(
      TestIds.dialogs.missingNodeCard
    )
-    await missingNodeCard
-      .getByRole('button', { name: /expand/i })
-      .first()
-      .click()
-
-    const locateButton = missingNodeCard.getByRole('button', {
-      name: /locate/i
+    const packTitle = missingNodeCard.getByRole('button', {
+      name: 'test-missing-node-pack'
    })
-    await expect(locateButton.first()).toBeVisible()
-    // TODO: Add navigation assertion once subgraph node ID deduplication
-    // timing is fixed. Currently, collectMissingNodes runs before
-    // configure(), so execution IDs use pre-remapped node IDs that don't
-    // match the runtime graph. See PR #9510 / #8762.
+    const expandButton = missingNodeCard.getByTestId(
+      TestIds.dialogs.missingNodePackExpand
+    )
+    const firstNode = missingNodeCard.getByRole('button', {
+      name: 'TEST_MISSING_PACK_NODE_A'
+    })
+    const secondNode = missingNodeCard.getByRole('button', {
+      name: 'TEST_MISSING_PACK_NODE_B'
+    })
+
+    await expect(packTitle).toBeVisible()
+    await expect(
+      missingNodeCard.getByTestId(TestIds.dialogs.missingNodePackCount)
+    ).toHaveText('2')
+    await expect(firstNode).toBeHidden()
+    await expect(secondNode).toBeHidden()
+
+    await expandButton.click()
+    await expect(firstNode).toBeVisible()
+    await expect(secondNode).toBeVisible()
+
+    await packTitle.click()
+    await expect(firstNode).toBeHidden()
+    await expect(secondNode).toBeHidden()
+
+    await packTitle.click()
+    await expect(firstNode).toBeVisible()
+    await expect(secondNode).toBeVisible()
  })
 })
--- a/browser_tests/tests/sidebar/modelLibrary.spec.ts
+++ b/browser_tests/tests/sidebar/modelLibrary.spec.ts
@@ -233,4 +233,64 @@ test.describe('Model library sidebar - empty state', () => {
    await expect(tab.folderNodes).toHaveCount(0)
    await expect(tab.leafNodes).toHaveCount(0)
  })
+
+  test.describe('Model library sidebar - add node', () => {
+    test.beforeEach(async ({ comfyPage }) => {
+      await comfyPage.modelLibrary.mockFoldersWithFiles(MOCK_FOLDERS)
+      await comfyPage.setup()
+      await comfyPage.nodeOps.clearGraph()
+    })
+
+    test.afterEach(async ({ comfyPage }) => {
+      await comfyPage.modelLibrary.clearMocks()
+    })
+
+    test('Clicking a model defers creation until placed on the canvas', async ({
+      comfyPage
+    }) => {
+      const tab = comfyPage.menu.modelLibraryTab
+      await tab.open()
+      await tab.getFolderByLabel('checkpoints').click()
+      await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeVisible()
+
+      await tab.getLeafByLabel('sd_xl_base_1.0').click()
+
+      await expect
+        .poll(() => comfyPage.nodeOps.getGraphNodesCount(), { timeout: 1000 })
+        .toBe(0)
+
+      const canvasBox = (await comfyPage.canvas.boundingBox())!
+      await comfyPage.canvas.click({
+        position: { x: canvasBox.width / 2, y: canvasBox.height / 2 }
+      })
+
+      await expect.poll(() => comfyPage.nodeOps.getGraphNodesCount()).toBe(1)
+      await expect
+        .poll(() => comfyPage.nodeOps.getSelectedGraphNodesCount())
+        .toBe(1)
+
+      const [loader] = await comfyPage.nodeOps.getNodeRefsByType(
+        'CheckpointLoaderSimple'
+      )
+      expect(loader).toBeDefined()
+      const widget = await loader.getWidgetByName('ckpt_name')
+      expect(await widget.getValue()).toBe('sd_xl_base_1.0.safetensors')
+    })
+
+    test('Ghost preview shows the model in the loader widget before placing', async ({
+      comfyPage
+    }) => {
+      const tab = comfyPage.menu.modelLibraryTab
+      await tab.open()
+      await tab.getFolderByLabel('checkpoints').click()
+      await expect(tab.getLeafByLabel('sd_xl_base_1.0')).toBeVisible()
+
+      await tab.getLeafByLabel('sd_xl_base_1.0').click()
+
+      const ghost = comfyPage.page.locator(
+        '[data-node-id="preview-CheckpointLoaderSimple"]'
+      )
+      await expect(ghost).toContainText('sd_xl_base_1.0.safetensors')
+    })
+  })
 })
--- a/public/assets/sorted-custom-node-map.json
+++ b/public/assets/sorted-custom-node-map.json
@@ -2,8 +2,8 @@
  "PreviewImage": 4314,
  "LoadImage": 3474,
  "CLIPTextEncode": 2435,
+  "SaveImageAdvanced": 1763,
  "SaveImage": 1762,
-  "SaveImageAdvanced": 1762,
  "VAEDecode": 1754,
  "KSampler": 1511,
  "CheckpointLoaderSimple": 1293,
@@ -14,6 +14,7 @@
  "UpscaleModelLoader": 629,
  "UNETLoader": 606,
  "VAELoader": 604,
+  "PreviewAny": 528,
  "ShowText|pysssss": 527.5526981023964,
  "ImageUpscaleWithModel": 523,
  "ControlNetApplyAdvanced": 513,
@@ -24,10 +25,12 @@
  "VHS_LoadVideo": 440,
  "ImpactSwitch": 349,
  "Reroute": 348,
+  "ResizeImageMaskNode": 337,
+  "ResizeAndPadImage": 336,
  "ImageResizeKJv2": 335,
+  "StringConcatenate": 326,
  "Text Concatenate": 325.7030402103206,
  "SaveVideo": 321,
-  "PreviewAny": 319,
  "KSamplerAdvanced": 304,
  "SDXLPromptStyler": 297.0913411304729,
  "Note": 291,
@@ -52,6 +55,7 @@
  "CLIPLoader": 202,
  "GeminiNode": 202,
  "KSampler (Efficient)": 194.01083622636423,
+  "RemoveBackground": 187,
  "ImageRemoveBackground+": 186,
  "IPAdapterModelLoader": 184,
  "PrimitiveInt": 183,
@@ -59,7 +63,9 @@
  "LoadVideo": 179,
  "Text Concatenate (JPS)": 175.98154639522735,
  "PrimitiveNode": 175,
-  "Text Multiline": 163.04749064680308,
+  "PrimitiveStringMultiline": 166,
+  "Text Multiline": 165,
+  "GetImageSize": 164,
  "GetImageSize+": 163,
  "ImageScaleToTotalPixels": 157,
  "String Literal": 150.11343489837878,
@@ -68,15 +74,14 @@
  "DownloadAndLoadFlorence2Model": 144,
  "LoadImageOutput": 143,
  "IPAdapterUnifiedLoader": 141,
-  "FluxGuidance": 133,
+  "BatchImagesNode": 134,
  "ImageBatchMulti": 133,
+  "FluxGuidance": 132,
  "ByteDanceSeedreamNode": 130,
  "CR Text Input Switch": 128.16473423438606,
  "IPAdapterAdvanced": 128,
  "If ANY execute A else B": 127.77279315110049,
  "GeminiImage2Node": 124,
-  "GetImageSize": 121,
-  "PrimitiveStringMultiline": 120,
  "IPAdapter": 118,
  "CreateVideo": 116,
  "ConditioningZeroOut": 115,
@@ -102,6 +107,7 @@
  "DepthAnythingPreprocessor": 100,
  "CR Apply LoRA Stack": 96.02556540496816,
  "Image Filter Adjustments": 95.24168323839699,
+  "ComfyMathExpression": 96,
  "SimpleMath+": 95,
  "GroundingDinoSAMSegment (segment anything)": 93.28197782196906,
  "Image Overlay": 93.28197782196906,
@@ -147,7 +153,6 @@
  "Image Resize": 63.494455492264656,
  "Automatic CFG": 63.494455492264656,
  "Canny": 63,
-  "StringConcatenate": 63,
  "DepthAnything_V2": 61,
  "ImageCrop+": 60,
  "ModelSamplingSD3": 59,
@@ -199,6 +204,7 @@
  "BNK_CLIPTextEncodeAdvanced": 45.857106744413365,
  "CR SDXL Aspect Ratio": 45.46516566112778,
  "LoadAudio": 45,
+  "ResolutionSelector": 45,
  "smZ CLIPTextEncode": 44.68128349455661,
  "Bus Node": 44.68128349455661,
  "PreviewTextNode": 44.68128349455661,
@@ -389,7 +395,6 @@
  "SD_4XUpscale_Conditioning": 21,
  "UltimateSDUpscaleCustomSample": 21,
  "StyleModelLoader": 21,
-  "ResizeAndPadImage": 21,
  "Text Random Prompt": 20.77287741413597,
  "INPAINT_VAEEncodeInpaintConditioning": 20.77287741413597,
  "BrushNet": 20.77287741413597,
--- a/src/components/common/TreeExplorerV2Node.test.ts
+++ b/src/components/common/TreeExplorerV2Node.test.ts
@@ -355,7 +355,7 @@ describe('TreeExplorerV2Node', () => {
      const nodeDiv = getTreeNode(container)
      await fireEvent.dragStart(nodeDiv)

-      expect(mockStartDrag).toHaveBeenCalledWith(mockData, 'native')
+      expect(mockStartDrag).toHaveBeenCalledWith(mockData, { mode: 'native' })
    })

    it('does not call startDrag for folder items on dragstart', async () => {
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -93,6 +93,7 @@

  <NodeTooltip v-if="tooltipEnabled" />
  <NodeSearchboxPopover ref="nodeSearchboxPopoverRef" />
+  <NodeDragPreview />
  <VueNodeSwitchPopup />

  <!-- Initialize components after comfyApp is ready. useAbsolutePosition requires
@@ -136,6 +137,7 @@ import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
 import LinkOverlayCanvas from '@/components/graph/LinkOverlayCanvas.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import NodeContextMenu from '@/components/graph/NodeContextMenu.vue'
+import NodeDragPreview from '@/components/graph/NodeDragPreview.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
 import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodePropertiesPanel from '@/components/rightSidePanel/RightSidePanel.vue'
--- a/src/components/graph/NodeDragPreview.vue
+++ b/src/components/graph/NodeDragPreview.vue
@@ -0,0 +1,57 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="showGhost && rafPosition"
+      class="pointer-events-none fixed top-0 left-0 z-10000 will-change-transform"
+      :style="{
+        transform: `translate(${rafPosition.x + 12}px, ${rafPosition.y + 12}px)`
+      }"
+    >
+      <div class="origin-top-left scale-50 opacity-80">
+        <LGraphNodePreview
+          :node-def="draggedNode!"
+          :widget-values="pendingWidgetValues"
+          position="relative"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useMouse, useRafFn } from '@vueuse/core'
+import { computed, shallowRef, watch } from 'vue'
+
+import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
+import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
+
+const { isDragging, draggedNode, pendingWidgetValues } = useNodeDragToCanvas()
+
+const { x, y, sourceType } = useMouse({ type: 'client' })
+
+const showGhost = computed(() => Boolean(isDragging.value && draggedNode.value))
+const rafPosition = shallowRef<{ x: number; y: number }>()
+
+const { pause, resume } = useRafFn(
+  () => {
+    if (sourceType.value === null) return
+    const pos = rafPosition.value
+    if (pos && pos.x === x.value && pos.y === y.value) return
+    rafPosition.value = { x: x.value, y: y.value }
+  },
+  { immediate: false }
+)
+
+watch(
+  showGhost,
+  (show) => {
+    if (show) {
+      resume()
+    } else {
+      pause()
+      rafPosition.value = undefined
+    }
+  },
+  { immediate: true }
+)
+</script>
--- a/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.test.ts
@@ -71,12 +71,11 @@ vi.mock('./MissingPackGroupRow.vue', () => ({
    name: 'MissingPackGroupRow',
    template: `<div class="pack-row" data-testid="pack-row"
      :data-show-info-button="String(showInfoButton)"
-      :data-show-node-id-badge="String(showNodeIdBadge)"
    >
      <button data-testid="locate-node" @click="$emit('locate-node', group.nodeTypes[0]?.nodeId)" />
      <button data-testid="open-manager-info" @click="$emit('open-manager-info', group.packId)" />
    </div>`,
-    props: ['group', 'showInfoButton', 'showNodeIdBadge'],
+    props: ['group', 'showInfoButton'],
    emits: ['locate-node', 'open-manager-info']
  }
 }))
@@ -122,7 +121,6 @@ function makePackGroups(count = 2): MissingPackGroup[] {
 function renderCard(
  props: Partial<{
    showInfoButton: boolean
-    showNodeIdBadge: boolean
    missingPackGroups: MissingPackGroup[]
  }> = {}
 ) {
@@ -130,7 +128,6 @@ function renderCard(
  const result = render(MissingNodeCard, {
    props: {
      showInfoButton: false,
-      showNodeIdBadge: false,
      missingPackGroups: makePackGroups(),
      ...props
    },
@@ -169,12 +166,10 @@ describe('MissingNodeCard', () => {

    it('passes props correctly to MissingPackGroupRow children', () => {
      renderCard({
-        showInfoButton: true,
-        showNodeIdBadge: true
+        showInfoButton: true
      })
      const row = screen.getAllByTestId('pack-row')[0]
      expect(row.getAttribute('data-show-info-button')).toBe('true')
-      expect(row.getAttribute('data-show-node-id-badge')).toBe('true')
    })
  })

@@ -256,7 +251,6 @@ describe('MissingNodeCard', () => {
      render(MissingNodeCard, {
        props: {
          showInfoButton: false,
-          showNodeIdBadge: false,
          missingPackGroups: makePackGroups(),
          onLocateNode
        },
@@ -279,7 +273,6 @@ describe('MissingNodeCard', () => {
      render(MissingNodeCard, {
        props: {
          showInfoButton: false,
-          showNodeIdBadge: false,
          missingPackGroups: makePackGroups(),
          onOpenManagerInfo
        },
--- a/src/components/rightSidePanel/errors/MissingNodeCard.vue
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.vue
@@ -56,27 +56,29 @@
        >
      </template>
    </i18n-t>
-    <MissingPackGroupRow
-      v-for="group in missingPackGroups"
-      :key="group.packId ?? '__unknown__'"
-      :group="group"
-      :show-info-button="showInfoButton"
-      :show-node-id-badge="showNodeIdBadge"
-      @locate-node="emit('locateNode', $event)"
-      @open-manager-info="emit('openManagerInfo', $event)"
-    />
+    <div class="flex flex-col gap-1 overflow-hidden py-2">
+      <MissingPackGroupRow
+        v-for="group in missingPackGroups"
+        :key="group.packId ?? '__unknown__'"
+        :group="group"
+        :show-info-button="showInfoButton"
+        @locate-node="emit('locateNode', $event)"
+        @open-manager-info="emit('openManagerInfo', $event)"
+      />
+    </div>
  </div>

  <!-- Apply Changes: shown when manager enabled and at least one pack install succeeded -->
  <div v-if="shouldShowManagerButtons" class="px-4">
    <Button
      v-if="hasInstalledPacksPendingRestart"
-      variant="primary"
+      variant="secondary"
+      size="sm"
      :disabled="isRestarting"
-      class="mt-2 h-9 w-full justify-center gap-2 text-sm font-semibold"
+      class="mt-2 h-8 w-full min-w-0 rounded-lg text-sm"
      @click="applyChanges()"
    >
-      <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
+      <DotSpinner v-if="isRestarting" duration="1s" :size="12" />
      <i
        v-else
        aria-hidden="true"
@@ -105,9 +107,8 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
 import MissingPackGroupRow from '@/components/rightSidePanel/errors/MissingPackGroupRow.vue'

-const { showInfoButton, showNodeIdBadge, missingPackGroups } = defineProps<{
+const { showInfoButton, missingPackGroups } = defineProps<{
  showInfoButton: boolean
-  showNodeIdBadge: boolean
  missingPackGroups: MissingPackGroup[]
 }>()

--- a/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts
+++ b/src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts
@@ -61,16 +61,16 @@ const i18n = createI18n({
  messages: {
    en: {
      g: {
-        loading: 'Loading'
+        install: 'Install',
+        loading: 'Loading',
+        search: 'Search'
      },
      rightSidePanel: {
        locateNode: 'Locate node on canvas',
        missingNodePacks: {
          unknownPack: 'Unknown pack',
-          installNodePack: 'Install node pack',
          installing: 'Installing...',
          installed: 'Installed',
-          searchInManager: 'Search in Node Manager',
          viewInManager: 'View in Manager',
          collapse: 'Collapse',
          expand: 'Expand'
@@ -100,7 +100,6 @@ function renderRow(
  props: Partial<{
    group: MissingPackGroup
    showInfoButton: boolean
-    showNodeIdBadge: boolean
  }> = {}
 ) {
  const user = userEvent.setup()
@@ -110,7 +109,6 @@ function renderRow(
    props: {
      group: makeGroup(),
      showInfoButton: false,
-      showNodeIdBadge: false,
      onLocateNode,
      onOpenManagerInfo,
      ...props
@@ -118,7 +116,6 @@ function renderRow(
    global: {
      plugins: [createTestingPinia({ createSpy: vi.fn }), PrimeVue, i18n],
      stubs: {
-        TransitionCollapse: { template: '<div><slot /></div>' },
        DotSpinner: {
          template: '<span role="status" aria-label="loading" />'
        }
@@ -156,9 +153,22 @@ describe('MissingPackGroupRow', () => {
      expect(screen.getByText(/Loading/)).toBeInTheDocument()
    })

+    it('does not render header locate while pack metadata is resolving', () => {
+      renderRow({
+        group: makeGroup({
+          isResolving: true,
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
+        })
+      })
+
+      expect(
+        screen.queryByRole('button', { name: 'Locate node on canvas' })
+      ).not.toBeInTheDocument()
+    })
+
    it('renders node count', () => {
      renderRow()
-      expect(screen.getByText(/\(2\)/)).toBeInTheDocument()
+      expect(screen.getByText('2')).toBeInTheDocument()
    })

    it('renders count of 5 for 5 nodeTypes', () => {
@@ -171,38 +181,29 @@ describe('MissingPackGroupRow', () => {
          }))
        })
      })
-      expect(screen.getByText(/\(5\)/)).toBeInTheDocument()
-    })
-  })
-
-  describe('Expand / Collapse', () => {
-    it('starts collapsed', () => {
-      renderRow()
-      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
-    })
-
-    it('expands when chevron is clicked', async () => {
-      const { user } = renderRow()
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-      expect(screen.getByText('MissingA')).toBeInTheDocument()
-      expect(screen.getByText('MissingB')).toBeInTheDocument()
-    })
-
-    it('collapses when chevron is clicked again', async () => {
-      const { user } = renderRow()
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-      expect(screen.getByText('MissingA')).toBeInTheDocument()
-      await user.click(screen.getByRole('button', { name: 'Collapse' }))
-      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
+      expect(screen.getByText('5')).toBeInTheDocument()
    })
  })

  describe('Node Type List', () => {
-    async function expand(user: ReturnType<typeof userEvent.setup>) {
-      await user.click(screen.getByRole('button', { name: 'Expand' }))
-    }
+    it('hides multiple nodeTypes behind the expand control by default', () => {
+      renderRow()
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
+      expect(screen.queryByText('MissingB')).not.toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument()
+    })

-    it('renders all nodeTypes when expanded', async () => {
+    it('shows unknown pack nodeTypes by default', () => {
+      renderRow({ group: makeGroup({ packId: null }) })
+
+      expect(
+        screen.getByRole('button', { name: 'Collapse' })
+      ).toBeInTheDocument()
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+      expect(screen.getByText('MissingB')).toBeInTheDocument()
+    })
+
+    it('renders all nodeTypes after expanding', async () => {
      const { user } = renderRow({
        group: makeGroup({
          nodeTypes: [
@@ -212,40 +213,87 @@ describe('MissingPackGroupRow', () => {
          ]
        })
      })
-      await expand(user)
+
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+
      expect(screen.getByText('NodeA')).toBeInTheDocument()
      expect(screen.getByText('NodeB')).toBeInTheDocument()
      expect(screen.getByText('NodeC')).toBeInTheDocument()
    })

-    it('shows nodeId badge when showNodeIdBadge is true', async () => {
-      const { user } = renderRow({ showNodeIdBadge: true })
-      await expand(user)
-      expect(screen.getByText('#10')).toBeInTheDocument()
+    it('hides multiple nodeTypes again after collapsing', async () => {
+      const { user } = renderRow()
+
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      expect(screen.getByText('MissingA')).toBeInTheDocument()
+
+      await user.click(screen.getByRole('button', { name: 'Collapse' }))
+      expect(screen.queryByText('MissingA')).not.toBeInTheDocument()
    })

-    it('hides nodeId badge when showNodeIdBadge is false', async () => {
-      const { user } = renderRow({ showNodeIdBadge: false })
-      await expand(user)
-      expect(screen.queryByText('#10')).not.toBeInTheDocument()
+    it('hides a single nodeType without an expand control', () => {
+      renderRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '1', isReplaceable: false }]
+        })
+      })
+
+      expect(screen.queryByText('OnlyNode')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Expand' })
+      ).not.toBeInTheDocument()
    })

-    it('emits locateNode when Locate button is clicked', async () => {
-      const { user, onLocateNode } = renderRow({ showNodeIdBadge: true })
-      await expand(user)
+    it('emits locateNode when the pack label is clicked for one nodeType', async () => {
+      const { user, onLocateNode } = renderRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
+        })
+      })
+
+      await user.click(screen.getByRole('button', { name: 'my-pack' }))
+
+      expect(onLocateNode).toHaveBeenCalledWith('100')
+    })
+
+    it('moves locate to the header when there is one nodeType', async () => {
+      const { user, onLocateNode } = renderRow({
+        group: makeGroup({
+          nodeTypes: [{ type: 'OnlyNode', nodeId: '100', isReplaceable: false }]
+        })
+      })
+
+      await user.click(
+        screen.getByRole('button', { name: 'Locate node on canvas' })
+      )
+
+      expect(onLocateNode).toHaveBeenCalledWith('100')
+    })
+
+    it('emits locateNode when expanded child Locate button is clicked', async () => {
+      const { user, onLocateNode } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+
      await user.click(
        screen.getAllByRole('button', { name: 'Locate node on canvas' })[0]
      )
+
      expect(onLocateNode).toHaveBeenCalledWith('10')
    })

-    it('does not show Locate for nodeType without nodeId', async () => {
-      const { user } = renderRow({
+    it('emits locateNode when node label is clicked', async () => {
+      const { user, onLocateNode } = renderRow()
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
+      await user.click(screen.getByRole('button', { name: 'MissingA' }))
+      expect(onLocateNode).toHaveBeenCalledWith('10')
+    })
+
+    it('does not show Locate for nodeType without nodeId', () => {
+      renderRow({
        group: makeGroup({
          nodeTypes: [{ type: 'NoId', isReplaceable: false } as never]
        })
      })
-      await expand(user)
      expect(
        screen.queryByRole('button', { name: 'Locate node on canvas' })
      ).not.toBeInTheDocument()
@@ -253,7 +301,6 @@ describe('MissingPackGroupRow', () => {

    it('handles mixed nodeTypes with and without nodeId', async () => {
      const { user } = renderRow({
-        showNodeIdBadge: true,
        group: makeGroup({
          nodeTypes: [
            { type: 'WithId', nodeId: '100', isReplaceable: false },
@@ -261,7 +308,7 @@ describe('MissingPackGroupRow', () => {
          ]
        })
      })
-      await expand(user)
+      await user.click(screen.getByRole('button', { name: 'Expand' }))
      expect(screen.getByText('WithId')).toBeInTheDocument()
      expect(screen.getByText('WithoutId')).toBeInTheDocument()
      expect(
@@ -274,21 +321,25 @@ describe('MissingPackGroupRow', () => {
    it('hides install UI when shouldShowManagerButtons is false', () => {
      mockShouldShowManagerButtons.value = false
      renderRow()
-      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Install' })
+      ).not.toBeInTheDocument()
    })

    it('hides install UI when packId is null', () => {
      mockShouldShowManagerButtons.value = true
      renderRow({ group: makeGroup({ packId: null }) })
-      expect(screen.queryByText('Install node pack')).not.toBeInTheDocument()
+      expect(
+        screen.queryByRole('button', { name: 'Install' })
+      ).not.toBeInTheDocument()
    })

-    it('shows "Search in Node Manager" when packId exists but pack not in registry', () => {
+    it('shows Search when packId exists but pack not in registry', () => {
      mockShouldShowManagerButtons.value = true
      mockIsPackInstalled.mockReturnValue(false)
      mockMissingNodePacks.value = []
      renderRow()
-      expect(screen.getByText('Search in Node Manager')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument()
    })

    it('shows "Installed" state when pack is installed', () => {
@@ -312,7 +363,9 @@ describe('MissingPackGroupRow', () => {
      mockIsPackInstalled.mockReturnValue(false)
      mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
      renderRow()
-      expect(screen.getByText('Install node pack')).toBeInTheDocument()
+      expect(
+        screen.getByRole('button', { name: 'Install' })
+      ).toBeInTheDocument()
    })

    it('calls installAllPacks when Install button is clicked', async () => {
@@ -320,9 +373,7 @@ describe('MissingPackGroupRow', () => {
      mockIsPackInstalled.mockReturnValue(false)
      mockMissingNodePacks.value = [{ id: 'my-pack', name: 'My Pack' }]
      const { user } = renderRow()
-      await user.click(
-        screen.getByRole('button', { name: /Install node pack/ })
-      )
+      await user.click(screen.getByRole('button', { name: 'Install' }))
      expect(mockInstallAllPacks).toHaveBeenCalledOnce()
    })

@@ -369,7 +420,7 @@ describe('MissingPackGroupRow', () => {
  describe('Edge Cases', () => {
    it('handles empty nodeTypes array', () => {
      renderRow({ group: makeGroup({ nodeTypes: [] }) })
-      expect(screen.getByText(/\(0\)/)).toBeInTheDocument()
+      expect(screen.getByText('0')).toBeInTheDocument()
    })
  })
 })
--- a/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
+++ b/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
@@ -1,187 +1,221 @@
 <template>
-  <div class="mb-2 flex w-full flex-col">
-    <!-- Pack header row: pack name + info + chevron -->
-    <div class="flex h-8 w-full items-center">
-      <!-- Warning icon for unknown packs -->
-      <i
-        v-if="group.packId === null && !group.isResolving"
-        class="mr-1.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
-      />
-      <p
-        class="min-w-0 flex-1 truncate text-sm font-medium"
-        :class="
-          group.packId === null && !group.isResolving
-            ? 'text-warning-background'
-            : 'text-foreground'
-        "
-      >
-        <span v-if="group.isResolving" class="text-muted-foreground italic">
-          {{ t('g.loading') }}...
-        </span>
-        <span v-else>
-          {{
-            `${group.packId ?? t('rightSidePanel.missingNodePacks.unknownPack')} (${group.nodeTypes.length})`
-          }}
-        </span>
-      </p>
+  <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">
      <Button
-        v-if="showInfoButton && group.packId !== null"
+        v-if="hasMultipleNodeTypes"
+        data-testid="missing-node-pack-expand"
        variant="textonly"
-        size="icon-sm"
-        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
-        :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
-        @click="emit('openManagerInfo', group.packId ?? '')"
-      >
-        <i class="icon-[lucide--info] size-4" />
-      </Button>
-      <Button
-        variant="textonly"
-        size="icon-sm"
-        :class="
-          cn(
-            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
-            { 'rotate-180': expanded }
-          )
-        "
+        size="unset"
        :aria-label="
          expanded
            ? t('rightSidePanel.missingNodePacks.collapse')
            : t('rightSidePanel.missingNodePacks.expand')
        "
+        :aria-expanded="expanded"
+        :class="
+          cn(
+            'h-8 w-4 shrink-0 p-0 transition-transform duration-200 hover:bg-transparent',
+            expanded && 'rotate-90'
+          )
+        "
        @click="toggleExpand"
      >
        <i
-          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
+          aria-hidden="true"
+          class="icon-[lucide--chevron-right] size-4 text-muted-foreground"
        />
      </Button>
-    </div>
-
-    <!-- Sub-labels: individual node instances, each with their own Locate button -->
-    <TransitionCollapse>
-      <div
-        v-if="expanded"
-        class="mb-1 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"
-        >
-          <span
-            v-if="
-              showNodeIdBadge &&
-              typeof nodeType !== 'string' &&
-              nodeType.nodeId != null
+      <i
+        v-if="isUnknownPack"
+        class="icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
+      />
+      <span class="flex min-w-0 flex-1 items-center gap-2">
+        <span class="flex min-w-0 items-center gap-2.5">
+          <button
+            v-if="hasMultipleNodeTypes && !group.isResolving"
+            type="button"
+            :class="
+              cn(
+                packTextButtonClass,
+                isUnknownPack
+                  ? 'text-warning-background'
+                  : 'text-base-foreground'
+              )
            "
-            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"
+            :aria-expanded="expanded"
+            @click="toggleExpand"
          >
-            #{{ nodeType.nodeId }}
+            {{ packDisplayName }}
+          </button>
+          <button
+            v-else-if="primaryLocatableNodeType"
+            type="button"
+            :class="
+              cn(
+                packTextButtonClass,
+                isUnknownPack
+                  ? 'text-warning-background'
+                  : 'text-base-foreground'
+              )
+            "
+            @click="handleLocateNode(primaryLocatableNodeType)"
+          >
+            {{ packDisplayName }}
+          </button>
+          <span
+            v-else
+            class="min-w-0 truncate text-sm/relaxed font-normal"
+            :class="
+              isUnknownPack ? 'text-warning-background' : 'text-base-foreground'
+            "
+          >
+            <span v-if="group.isResolving" class="text-muted-foreground italic">
+              {{ t('g.loading') }}...
+            </span>
+            <span v-else>
+              {{ packDisplayName }}
+            </span>
          </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"
+            v-if="showInfoButton && group.packId !== 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')"
-            @click="handleLocateNode(nodeType)"
+            class="size-7 shrink-0 text-muted-foreground hover:bg-transparent hover:text-base-foreground"
+            :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
+            @click="emit('openManagerInfo', group.packId ?? '')"
          >
-            <i class="icon-[lucide--locate] size-3" />
+            <i class="icon-[lucide--info] size-4" />
          </Button>
-        </div>
-      </div>
-    </TransitionCollapse>
-
-    <!-- Install button: shown when manager enabled, registry knows the pack or it's already installed -->
-    <div
-      v-if="
-        shouldShowManagerButtons &&
-        group.packId !== null &&
-        (nodePack || comfyManagerStore.isPackInstalled(group.packId))
-      "
-      class="flex w-full items-start py-1"
-    >
-      <Button
-        variant="secondary"
-        size="md"
-        class="flex w-full flex-1 rounded-lg"
-        :disabled="
-          comfyManagerStore.isPackInstalled(group.packId) || isInstalling
-        "
-        @click="handlePackInstallClick"
-      >
-        <DotSpinner
-          v-if="isInstalling"
-          duration="1s"
-          :size="12"
-          class="mr-1.5 shrink-0"
-        />
-        <i
-          v-else-if="comfyManagerStore.isPackInstalled(group.packId)"
-          class="text-foreground mr-1 icon-[lucide--check] size-4 shrink-0"
-        />
-        <i
-          v-else
-          class="text-foreground mr-1 icon-[lucide--download] size-4 shrink-0"
-        />
-        <span class="text-foreground min-w-0 truncate text-sm">
-          {{
-            isInstalling
-              ? t('rightSidePanel.missingNodePacks.installing')
-              : comfyManagerStore.isPackInstalled(group.packId)
-                ? t('rightSidePanel.missingNodePacks.installed')
-                : t('rightSidePanel.missingNodePacks.installNodePack')
-          }}
+          <span
+            v-if="showNodeCount"
+            data-testid="missing-node-pack-count"
+            class="flex size-6 shrink-0 items-center justify-center rounded-md bg-secondary-background-selected text-xs font-bold text-muted-foreground"
+          >
+            {{ group.nodeTypes.length }}
+          </span>
        </span>
-      </Button>
-    </div>
-
-    <!-- Registry still loading: packId known but result not yet available -->
-    <div
-      v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
-      class="flex w-full items-start py-1"
-    >
+      </span>
+      <div v-if="showInstallAction" class="ml-auto shrink-0">
+        <Button
+          variant="secondary"
+          size="sm"
+          class="h-8 shrink-0 rounded-lg text-sm"
+          :disabled="isPackInstalled || isInstalling"
+          @click="handlePackInstallClick"
+        >
+          <DotSpinner
+            v-if="isInstalling"
+            duration="1s"
+            :size="12"
+            class="mr-1.5 shrink-0"
+          />
+          <span class="text-foreground min-w-0 truncate">
+            {{
+              isInstalling
+                ? t('rightSidePanel.missingNodePacks.installing')
+                : isPackInstalled
+                  ? t('rightSidePanel.missingNodePacks.installed')
+                  : t('g.install')
+            }}
+          </span>
+        </Button>
+      </div>
      <div
-        class="flex h-8 min-w-0 flex-1 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background p-2 opacity-60 select-none"
+        v-else-if="showLoadingAction"
+        class="ml-auto flex h-8 shrink-0 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background px-2 py-1 text-sm opacity-60 select-none"
      >
        <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
        <span class="text-foreground min-w-0 truncate text-sm">
          {{ t('g.loading') }}
        </span>
      </div>
-    </div>
-
-    <!-- Search in Manager: fetch done but pack not found in registry -->
-    <div
-      v-else-if="group.packId !== null && shouldShowManagerButtons"
-      class="flex w-full items-start py-1"
-    >
+      <div v-else-if="showSearchAction" class="ml-auto shrink-0">
+        <Button
+          variant="secondary"
+          size="sm"
+          class="h-8 shrink-0 rounded-lg text-sm"
+          @click="
+            openManager({
+              initialTab: ManagerTab.All,
+              initialPackId: group.packId!
+            })
+          "
+        >
+          <span class="text-foreground min-w-0 truncate">
+            {{ t('g.search') }}
+          </span>
+        </Button>
+      </div>
      <Button
-        variant="secondary"
-        size="md"
-        class="flex w-full flex-1 rounded-lg"
-        @click="
-          openManager({
-            initialTab: ManagerTab.All,
-            initialPackId: group.packId!
-          })
-        "
+        v-if="primaryLocatableNodeType"
+        variant="textonly"
+        size="icon-sm"
+        class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
+        :aria-label="t('rightSidePanel.locateNode')"
+        @click="handleLocateNode(primaryLocatableNodeType)"
      >
-        <i class="text-foreground mr-1 icon-[lucide--search] size-4 shrink-0" />
-        <span class="text-foreground min-w-0 truncate text-sm">
-          {{ t('rightSidePanel.missingNodePacks.searchInManager') }}
-        </span>
+        <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
      </Button>
    </div>
+
+    <TransitionCollapse>
+      <ul
+        v-if="showNodeTypeList"
+        :class="
+          cn(
+            'm-0 list-none space-y-1 p-0',
+            (hasMultipleNodeTypes || isUnknownPack) && 'pl-5'
+          )
+        "
+      >
+        <li
+          v-for="nodeType in group.nodeTypes"
+          :key="getKey(nodeType)"
+          class="min-w-0"
+        >
+          <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="
+                  cn(
+                    packTextButtonClass,
+                    'text-muted-foreground hover:text-base-foreground'
+                  )
+                "
+                @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="t('rightSidePanel.locateNode')"
+              @click="handleLocateNode(nodeType)"
+            >
+              <i aria-hidden="true" class="icon-[lucide--locate] size-4" />
+            </Button>
+          </div>
+        </li>
+      </ul>
+    </TransitionCollapse>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { cn } from '@comfyorg/tailwind-utils'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { cn } from '@comfyorg/tailwind-utils'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
@@ -193,10 +227,9 @@ import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTyp
 import type { MissingNodeType } from '@/types/comfy'
 import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'

-const { group, showInfoButton, showNodeIdBadge } = defineProps<{
+const { group, showInfoButton } = defineProps<{
  group: MissingPackGroup
  showInfoButton: boolean
-  showNodeIdBadge: boolean
 }>()

 const emit = defineEmits<{
@@ -205,6 +238,10 @@ const emit = defineEmits<{
 }>()

 const { t } = useI18n()
+const expandedOverride = ref<boolean | null>(null)
+
+const packTextButtonClass =
+  'm-0 inline max-w-full cursor-pointer appearance-none border-0 bg-transparent p-0 text-left text-sm/relaxed font-normal wrap-break-word outline-none focus:outline-none focus-visible:underline focus-visible:ring-0 focus-visible:outline-none'

 const { missingNodePacks, isLoading } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
@@ -219,17 +256,73 @@ const { isInstalling, installAllPacks } = usePackInstall(() =>
  nodePack.value ? [nodePack.value] : []
 )

+const isUnknownPack = computed(
+  () => group.packId === null && !group.isResolving
+)
+
+const packDisplayName = computed(() => {
+  if (group.packId === null) {
+    return t('rightSidePanel.missingNodePacks.unknownPack')
+  }
+  return nodePack.value?.name ?? group.packId
+})
+
+const isPackInstalled = computed(
+  () => group.packId !== null && comfyManagerStore.isPackInstalled(group.packId)
+)
+
+const showInstallAction = computed(
+  () =>
+    shouldShowManagerButtons.value &&
+    group.packId !== null &&
+    (nodePack.value !== null || isPackInstalled.value)
+)
+
+const showLoadingAction = computed(
+  () =>
+    shouldShowManagerButtons.value &&
+    group.packId !== null &&
+    !showInstallAction.value &&
+    isLoading.value
+)
+
+const showSearchAction = computed(
+  () =>
+    shouldShowManagerButtons.value &&
+    group.packId !== null &&
+    !showInstallAction.value &&
+    !showLoadingAction.value
+)
+
+const hasMultipleNodeTypes = computed(() => group.nodeTypes.length > 1)
+const showNodeCount = computed(() => group.nodeTypes.length !== 1)
+const expanded = computed(
+  () =>
+    expandedOverride.value ??
+    (isUnknownPack.value && hasMultipleNodeTypes.value)
+)
+const showNodeTypeList = computed(
+  () =>
+    (isUnknownPack.value && group.nodeTypes.length === 1) ||
+    (hasMultipleNodeTypes.value && expanded.value)
+)
+const primaryLocatableNodeType = computed(() => {
+  if (group.isResolving) return null
+  if (isUnknownPack.value) return null
+  if (group.nodeTypes.length !== 1) return null
+  const [nodeType] = group.nodeTypes
+  return isLocatableNodeType(nodeType) ? nodeType : null
+})
+
 function handlePackInstallClick() {
  if (!group.packId) return
-  if (!comfyManagerStore.isPackInstalled(group.packId)) {
+  if (!isPackInstalled.value) {
    void installAllPacks()
  }
 }

-const expanded = ref(false)
-
 function toggleExpand() {
-  expanded.value = !expanded.value
+  expandedOverride.value = !expanded.value
 }

 function getKey(nodeType: MissingNodeType): string {
@@ -241,10 +334,14 @@ 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 (typeof nodeType === 'string') return
-  if (nodeType.nodeId != null) {
-    emit('locateNode', String(nodeType.nodeId))
-  }
+  if (!isLocatableNodeType(nodeType)) return
+  emit('locateNode', String(nodeType.nodeId))
 }
 </script>
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -148,7 +148,6 @@
          <MissingNodeCard
            v-if="group.type === 'missing_node'"
            :show-info-button="shouldShowManagerButtons"
-            :show-node-id-badge="showNodeIdBadge"
            :missing-pack-groups="missingPackGroups"
            @locate-node="handleLocateMissingNode"
            @open-manager-info="handleOpenManagerInfo"
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.test.ts
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.test.ts
@@ -14,7 +14,7 @@ const {
  captureRoot,
  getRoot,
  resetRoot,
-  mockAddNodeOnGraph,
+  mockStartDrag,
  mockGetNodeProvider,
  mockToggleNodeOnEvent,
  mockRefreshModelFolder,
@@ -29,7 +29,7 @@ const {
    resetRoot: () => {
      capturedRoot = null
    },
-    mockAddNodeOnGraph: vi.fn(),
+    mockStartDrag: vi.fn(),
    mockGetNodeProvider: vi.fn(),
    mockToggleNodeOnEvent: vi.fn(),
    mockRefreshModelFolder: vi.fn().mockResolvedValue(undefined),
@@ -37,8 +37,8 @@ const {
  }
 })

-vi.mock('@/services/litegraphService', () => ({
-  useLitegraphService: () => ({ addNodeOnGraph: mockAddNodeOnGraph })
+vi.mock('@/composables/node/useNodeDragToCanvas', () => ({
+  useNodeDragToCanvas: () => ({ startDrag: mockStartDrag })
 }))

 vi.mock('@/stores/modelToNodeStore', () => ({
@@ -173,16 +173,13 @@ describe('ModelLibrarySidebarTab', () => {
    expect(screen.getByTestId('search-input')).toBeInTheDocument()
  })

-  it('handles model click and adds node to graph', async () => {
+  it('starts a ghost drag carrying the widget value to fill on placement', async () => {
    const mockNodeDef = { name: 'CheckpointLoaderSimple' }
-    const mockWidget = { name: 'ckpt_name', value: '' }
-    const mockGraphNode = { widgets: [mockWidget] }

    mockGetNodeProvider.mockReturnValue({
      nodeDef: mockNodeDef,
      key: 'ckpt_name'
    })
-    mockAddNodeOnGraph.mockReturnValue(mockGraphNode)

    renderComponent()
    await nextTick()
@@ -198,8 +195,9 @@ describe('ModelLibrarySidebarTab', () => {
    await modelLeaf?.handleClick?.(mockEvent)

    expect(mockGetNodeProvider).toHaveBeenCalledWith('checkpoints')
-    expect(mockAddNodeOnGraph).toHaveBeenCalledWith(mockNodeDef)
-    expect(mockWidget.value).toBe('model.safetensors')
+    expect(mockStartDrag).toHaveBeenCalledWith(mockNodeDef, {
+      widgetValues: { ckpt_name: 'model.safetensors' }
+    })
  })

  it('toggles folder expansion on click', async () => {
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -63,10 +63,9 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { startModelLoaderDrag } from '@/composables/node/startModelNodeDragFromAsset'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { withNodeAddSource } from '@/platform/telemetry/nodeAdded/nodeAddSource'
-import { useLitegraphService } from '@/services/litegraphService'
 import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
 import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
 import { ResourceState, useModelStore } from '@/stores/modelStore'
@@ -156,15 +155,7 @@ const renderedRoot = computed<TreeExplorerNode<ModelOrFolder>>(() => {
        if (this.leaf && model) {
          const provider = modelToNodeStore.getNodeProvider(model.directory)
          if (provider) {
-            const graphNode = withNodeAddSource('sidebar_drag', () =>
-              useLitegraphService().addNodeOnGraph(provider.nodeDef)
-            )
-            const widget = graphNode?.widgets?.find(
-              (widget) => widget.name === provider.key
-            )
-            if (widget) {
-              widget.value = model.file_name
-            }
+            startModelLoaderDrag(provider, model.file_name)
          }
        } else {
          toggleNodeOnEvent(e, node)
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.test.ts
@@ -31,11 +31,8 @@ vi.mock('@/composables/node/useNodeDragToCanvas', () => ({
  useNodeDragToCanvas: () => ({
    isDragging: { value: false },
    draggedNode: { value: null },
-    cursorPosition: { value: { x: 0, y: 0 } },
    startDrag: vi.fn(),
-    cancelDrag: vi.fn(),
-    setupGlobalListeners: vi.fn(),
-    cleanupGlobalListeners: vi.fn()
+    cancelDrag: vi.fn()
  })
 }))

--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
@@ -115,7 +115,6 @@
      </div>
    </template>
    <template #body>
-      <NodeDragPreview />
      <div class="flex h-full flex-col">
        <div
          v-if="hasNoMatches"
@@ -215,7 +214,6 @@ import type {
 import AllNodesPanel from './nodeLibrary/AllNodesPanel.vue'
 import BlueprintsPanel from './nodeLibrary/BlueprintsPanel.vue'
 import EssentialNodesPanel from './nodeLibrary/EssentialNodesPanel.vue'
-import NodeDragPreview from './nodeLibrary/NodeDragPreview.vue'
 import SidebarTabTemplate from './SidebarTabTemplate.vue'

 const { flags } = useFeatureFlags()
--- a/src/components/sidebar/tabs/nodeLibrary/NodeDragPreview.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeDragPreview.vue
@@ -1,69 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div
-      v-if="isDragging && draggedNode && showPreview"
-      class="pointer-events-none fixed z-10000"
-      :style="{
-        left: `${previewPosition.x + 12}px`,
-        top: `${previewPosition.y + 12}px`
-      }"
-    >
-      <div class="origin-top-left scale-50 opacity-80">
-        <LGraphNodePreview :node-def="draggedNode" position="relative" />
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
-
-import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
-import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
-
-const {
-  isDragging,
-  draggedNode,
-  cursorPosition,
-  dragMode,
-  setupGlobalListeners,
-  cleanupGlobalListeners
-} = useNodeDragToCanvas()
-
-const nativeDragPosition = ref({ x: 0, y: 0 })
-
-const previewPosition = computed(() => {
-  if (dragMode.value === 'native') {
-    return nativeDragPosition.value
-  }
-  return cursorPosition.value
-})
-
-const showPreview = computed(() => {
-  if (dragMode.value === 'native') {
-    return nativeDragPosition.value.x > 0 || nativeDragPosition.value.y > 0
-  }
-  return true
-})
-
-function handleDrag(e: DragEvent) {
-  if (e.clientX === 0 && e.clientY === 0) return
-  nativeDragPosition.value = { x: e.clientX, y: e.clientY }
-}
-
-function handleDragEnd() {
-  nativeDragPosition.value = { x: 0, y: 0 }
-}
-
-onMounted(() => {
-  setupGlobalListeners()
-  document.addEventListener('drag', handleDrag)
-  document.addEventListener('dragend', handleDragEnd)
-})
-
-onUnmounted(() => {
-  cleanupGlobalListeners()
-  document.removeEventListener('drag', handleDrag)
-  document.removeEventListener('dragend', handleDragEnd)
-})
-</script>
--- a/src/composables/node/startModelNodeDragFromAsset.test.ts
+++ b/src/composables/node/startModelNodeDragFromAsset.test.ts
@@ -0,0 +1,73 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { startModelNodeDragFromAsset } from '@/composables/node/startModelNodeDragFromAsset'
+
+const { mockStartDrag, mockGetNodeProvider } = vi.hoisted(() => ({
+  mockStartDrag: vi.fn(),
+  mockGetNodeProvider: vi.fn()
+}))
+
+vi.mock('@/composables/node/useNodeDragToCanvas', () => ({
+  useNodeDragToCanvas: () => ({ startDrag: mockStartDrag })
+}))
+
+vi.mock('@/stores/modelToNodeStore', () => ({
+  useModelToNodeStore: () => ({ getNodeProvider: mockGetNodeProvider })
+}))
+
+function createAsset(overrides: Partial<AssetItem> = {}): AssetItem {
+  return {
+    id: 'asset-123',
+    name: 'sd_xl_base_1.0.safetensors',
+    size: 1024,
+    created_at: '2025-10-01T00:00:00Z',
+    tags: ['models', 'checkpoints'],
+    user_metadata: { filename: 'sd_xl_base_1.0.safetensors' },
+    ...overrides
+  }
+}
+
+describe('startModelNodeDragFromAsset', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  it('starts a ghost drag for the resolved node carrying the widget value', () => {
+    const nodeDef = { name: 'CheckpointLoaderSimple' }
+    mockGetNodeProvider.mockReturnValue({ nodeDef, key: 'ckpt_name' })
+
+    const error = startModelNodeDragFromAsset(createAsset())
+
+    expect(error).toBeUndefined()
+    expect(mockStartDrag).toHaveBeenCalledWith(nodeDef, {
+      widgetValues: { ckpt_name: 'sd_xl_base_1.0.safetensors' }
+    })
+  })
+
+  it('carries no widget value when the provider has no key', () => {
+    const nodeDef = { name: 'FL_ChatterboxVC' }
+    mockGetNodeProvider.mockReturnValue({ nodeDef, key: '' })
+
+    startModelNodeDragFromAsset(
+      createAsset({
+        tags: ['models', 'chatterbox/chatterbox_vc'],
+        user_metadata: { filename: 'chatterbox_vc_model.pt' }
+      })
+    )
+
+    expect(mockStartDrag).toHaveBeenCalledWith(nodeDef, {
+      widgetValues: undefined
+    })
+  })
+
+  it('returns the resolution error and does not start a drag for an invalid asset', () => {
+    mockGetNodeProvider.mockReturnValue(null)
+
+    const error = startModelNodeDragFromAsset(createAsset())
+
+    expect(error?.code).toBe('NO_PROVIDER')
+    expect(mockStartDrag).not.toHaveBeenCalled()
+  })
+})
--- a/src/composables/node/startModelNodeDragFromAsset.ts
+++ b/src/composables/node/startModelNodeDragFromAsset.ts
@@ -0,0 +1,35 @@
+import { useNodeDragToCanvas } from '@/composables/node/useNodeDragToCanvas'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { resolveModelNodeFromAsset } from '@/platform/assets/utils/resolveModelNodeFromAsset'
+import type { ResolveModelNodeError } from '@/platform/assets/utils/resolveModelNodeFromAsset'
+import type { ModelNodeProvider } from '@/stores/modelToNodeStore'
+
+/**
+ * Arms a ghost drag for a model loader node. Providers with no widget key
+ * (auto-load nodes) start the drag without widget values.
+ */
+export function startModelLoaderDrag(
+  provider: ModelNodeProvider,
+  filename: string
+) {
+  const widgetValues = provider.key ? { [provider.key]: filename } : undefined
+  useNodeDragToCanvas().startDrag(provider.nodeDef, { widgetValues })
+}
+
+/**
+ * Starts a ghost drag for the model loader node described by an asset. The
+ * node is created where the user next clicks the canvas, with the asset's
+ * filename written into the loader widget.
+ *
+ * @returns the resolution error when the asset cannot be mapped to a node,
+ *   otherwise `undefined`.
+ */
+export function startModelNodeDragFromAsset(
+  asset: AssetItem
+): ResolveModelNodeError | undefined {
+  const resolved = resolveModelNodeFromAsset(asset)
+  if (!resolved.success) return resolved.error
+
+  const { provider, filename } = resolved.value
+  startModelLoaderDrag(provider, filename)
+}
--- a/src/composables/node/useNodeDragToCanvas.test.ts
+++ b/src/composables/node/useNodeDragToCanvas.test.ts
@@ -7,7 +7,8 @@ const {
  mockAddNodeOnGraph,
  mockConvertEventToCanvasOffset,
  mockSelectItems,
-  mockCanvas
+  mockCanvas,
+  mockToastAdd
 } = vi.hoisted(() => {
  const mockConvertEventToCanvasOffset = vi.fn()
  const mockSelectItems = vi.fn()
@@ -15,6 +16,7 @@ const {
    mockAddNodeOnGraph: vi.fn(),
    mockConvertEventToCanvasOffset,
    mockSelectItems,
+    mockToastAdd: vi.fn(),
    mockCanvas: {
      canvas: {
        getBoundingClientRect: vi.fn()
@@ -37,6 +39,12 @@ vi.mock('@/services/litegraphService', () => ({
  }))
 }))

+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: vi.fn(() => ({ add: mockToastAdd }))
+}))
+
+vi.mock('@/i18n', () => ({ t: (key: string) => key }))
+
 describe('useNodeDragToCanvas', () => {
  let useNodeDragToCanvas: typeof UseNodeDragToCanvasType

@@ -54,8 +62,8 @@ describe('useNodeDragToCanvas', () => {
  })

  afterEach(() => {
-    const { cleanupGlobalListeners } = useNodeDragToCanvas()
-    cleanupGlobalListeners()
+    const { cancelDrag } = useNodeDragToCanvas()
+    cancelDrag()
    vi.restoreAllMocks()
  })

@@ -71,22 +79,6 @@ describe('useNodeDragToCanvas', () => {
      expect(isDragging.value).toBe(true)
      expect(draggedNode.value).toBe(mockNodeDef)
    })
-
-    it('should set dragMode to click by default', () => {
-      const { dragMode, startDrag } = useNodeDragToCanvas()
-
-      startDrag(mockNodeDef)
-
-      expect(dragMode.value).toBe('click')
-    })
-
-    it('should set dragMode to native when specified', () => {
-      const { dragMode, startDrag } = useNodeDragToCanvas()
-
-      startDrag(mockNodeDef, 'native')
-
-      expect(dragMode.value).toBe('native')
-    })
  })

  describe('cancelDrag', () => {
@@ -102,30 +94,15 @@ describe('useNodeDragToCanvas', () => {
      expect(isDragging.value).toBe(false)
      expect(draggedNode.value).toBeNull()
    })
-
-    it('should reset dragMode to click', () => {
-      const { dragMode, startDrag, cancelDrag } = useNodeDragToCanvas()
-
-      startDrag(mockNodeDef, 'native')
-      expect(dragMode.value).toBe('native')
-
-      cancelDrag()
-
-      expect(dragMode.value).toBe('click')
-    })
  })

-  describe('setupGlobalListeners', () => {
-    it('should add event listeners to document', () => {
+  describe('drag listener lifecycle', () => {
+    it('should attach document listeners on startDrag', () => {
      const addEventListenerSpy = vi.spyOn(document, 'addEventListener')
-      const { setupGlobalListeners } = useNodeDragToCanvas()
+      const { startDrag } = useNodeDragToCanvas()

-      setupGlobalListeners()
+      startDrag(mockNodeDef)

-      expect(addEventListenerSpy).toHaveBeenCalledWith(
-        'pointermove',
-        expect.any(Function)
-      )
      expect(addEventListenerSpy).toHaveBeenCalledWith(
        'pointerdown',
        expect.any(Function),
@@ -142,35 +119,53 @@ describe('useNodeDragToCanvas', () => {
      )
    })

-    it('should only setup listeners once', () => {
+    it('should not attach drag listeners until a drag starts', () => {
      const addEventListenerSpy = vi.spyOn(document, 'addEventListener')
-      const { setupGlobalListeners } = useNodeDragToCanvas()
+      useNodeDragToCanvas()

-      setupGlobalListeners()
+      expect(addEventListenerSpy).not.toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        true
+      )
+      expect(addEventListenerSpy).not.toHaveBeenCalledWith(
+        'keydown',
+        expect.any(Function)
+      )
+    })
+
+    it('should detach document listeners on cancelDrag', () => {
+      const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener')
+      const { startDrag, cancelDrag } = useNodeDragToCanvas()
+
+      startDrag(mockNodeDef)
+      cancelDrag()
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'pointerdown',
+        expect.any(Function),
+        true
+      )
+      expect(removeEventListenerSpy).toHaveBeenCalledWith(
+        'pointerup',
+        expect.any(Function),
+        true
+      )
+    })
+
+    it('should only attach listeners once across re-arms', () => {
+      const addEventListenerSpy = vi.spyOn(document, 'addEventListener')
+      const { startDrag } = useNodeDragToCanvas()
+
+      startDrag(mockNodeDef)
      const callCount = addEventListenerSpy.mock.calls.length

-      setupGlobalListeners()
+      startDrag(mockNodeDef)

      expect(addEventListenerSpy.mock.calls.length).toBe(callCount)
    })
  })

-  describe('cursorPosition', () => {
-    it('should update on pointermove', () => {
-      const { cursorPosition, setupGlobalListeners } = useNodeDragToCanvas()
-
-      setupGlobalListeners()
-
-      const pointerEvent = new PointerEvent('pointermove', {
-        clientX: 100,
-        clientY: 200
-      })
-      document.dispatchEvent(pointerEvent)
-
-      expect(cursorPosition.value).toEqual({ x: 100, y: 200 })
-    })
-  })
-
  describe('endDrag behavior', () => {
    it('should add node when pointer is over canvas', () => {
      mockCanvas.canvas.getBoundingClientRect.mockReturnValue({
@@ -181,9 +176,7 @@ describe('useNodeDragToCanvas', () => {
      })
      mockConvertEventToCanvasOffset.mockReturnValue([150, 150])

-      const { startDrag, setupGlobalListeners } = useNodeDragToCanvas()
-
-      setupGlobalListeners()
+      const { startDrag } = useNodeDragToCanvas()
      startDrag(mockNodeDef)

      const pointerEvent = new PointerEvent('pointerup', {
@@ -206,10 +199,7 @@ describe('useNodeDragToCanvas', () => {
        bottom: 500
      })

-      const { startDrag, setupGlobalListeners, isDragging } =
-        useNodeDragToCanvas()
-
-      setupGlobalListeners()
+      const { startDrag, isDragging } = useNodeDragToCanvas()
      startDrag(mockNodeDef)

      const pointerEvent = new PointerEvent('pointerup', {
@@ -224,10 +214,7 @@ describe('useNodeDragToCanvas', () => {
    })

    it('should cancel drag on Escape key', () => {
-      const { startDrag, setupGlobalListeners, isDragging } =
-        useNodeDragToCanvas()
-
-      setupGlobalListeners()
+      const { startDrag, isDragging } = useNodeDragToCanvas()
      startDrag(mockNodeDef)

      expect(isDragging.value).toBe(true)
@@ -239,10 +226,7 @@ describe('useNodeDragToCanvas', () => {
    })

    it('should not cancel drag on other keys', () => {
-      const { startDrag, setupGlobalListeners, isDragging } =
-        useNodeDragToCanvas()
-
-      setupGlobalListeners()
+      const { startDrag, isDragging } = useNodeDragToCanvas()
      startDrag(mockNodeDef)

      const keyEvent = new KeyboardEvent('keydown', { key: 'Enter' })
@@ -262,8 +246,7 @@ describe('useNodeDragToCanvas', () => {
      const placedNode = { id: 1 }
      mockAddNodeOnGraph.mockReturnValue(placedNode)

-      const { startDrag, setupGlobalListeners } = useNodeDragToCanvas()
-      setupGlobalListeners()
+      const { startDrag } = useNodeDragToCanvas()
      startDrag(mockNodeDef)

      document.dispatchEvent(
@@ -277,6 +260,97 @@ describe('useNodeDragToCanvas', () => {
      expect(mockSelectItems).toHaveBeenCalledWith([placedNode])
    })

+    it('should apply the requested widget values to the placed node', () => {
+      mockCanvas.canvas.getBoundingClientRect.mockReturnValue({
+        left: 0,
+        right: 500,
+        top: 0,
+        bottom: 500
+      })
+      mockConvertEventToCanvasOffset.mockReturnValue([150, 150])
+      const widget = { name: 'ckpt_name', value: '' }
+      mockAddNodeOnGraph.mockReturnValue({ id: 1, widgets: [widget] })
+
+      const { startDrag } = useNodeDragToCanvas()
+      startDrag(mockNodeDef, {
+        widgetValues: { ckpt_name: 'model.safetensors' }
+      })
+
+      document.dispatchEvent(
+        new PointerEvent('pointerup', {
+          clientX: 250,
+          clientY: 250,
+          bubbles: true
+        })
+      )
+
+      expect(widget.value).toBe('model.safetensors')
+    })
+
+    it('should still place the node when a requested widget is missing', () => {
+      mockCanvas.canvas.getBoundingClientRect.mockReturnValue({
+        left: 0,
+        right: 500,
+        top: 0,
+        bottom: 500
+      })
+      mockConvertEventToCanvasOffset.mockReturnValue([150, 150])
+      const placedNode = { id: 1, widgets: [] }
+      mockAddNodeOnGraph.mockReturnValue(placedNode)
+      const consoleErrorSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {})
+
+      const { startDrag } = useNodeDragToCanvas()
+      startDrag(mockNodeDef, {
+        widgetValues: { ckpt_name: 'model.safetensors' }
+      })
+
+      document.dispatchEvent(
+        new PointerEvent('pointerup', {
+          clientX: 250,
+          clientY: 250,
+          bubbles: true
+        })
+      )
+
+      expect(mockSelectItems).toHaveBeenCalledWith([placedNode])
+      expect(mockToastAdd).not.toHaveBeenCalled()
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        expect.stringContaining('ckpt_name')
+      )
+    })
+
+    it('should show an error toast when the graph fails to add the node', () => {
+      mockCanvas.canvas.getBoundingClientRect.mockReturnValue({
+        left: 0,
+        right: 500,
+        top: 0,
+        bottom: 500
+      })
+      mockConvertEventToCanvasOffset.mockReturnValue([150, 150])
+      mockAddNodeOnGraph.mockReturnValue(null)
+      vi.spyOn(console, 'error').mockImplementation(() => {})
+
+      const { startDrag } = useNodeDragToCanvas()
+      startDrag(mockNodeDef)
+
+      document.dispatchEvent(
+        new PointerEvent('pointerup', {
+          clientX: 250,
+          clientY: 250,
+          bubbles: true
+        })
+      )
+
+      expect(mockToastAdd).toHaveBeenCalledWith(
+        expect.objectContaining({
+          severity: 'error',
+          detail: 'assetBrowser.failedToCreateNode'
+        })
+      )
+    })
+
    it('should not call selectItems when graph returns no node', () => {
      mockCanvas.canvas.getBoundingClientRect.mockReturnValue({
        left: 0,
@@ -286,9 +360,9 @@ describe('useNodeDragToCanvas', () => {
      })
      mockConvertEventToCanvasOffset.mockReturnValue([150, 150])
      mockAddNodeOnGraph.mockReturnValue(null)
+      vi.spyOn(console, 'error').mockImplementation(() => {})

-      const { startDrag, setupGlobalListeners } = useNodeDragToCanvas()
-      setupGlobalListeners()
+      const { startDrag } = useNodeDragToCanvas()
      startDrag(mockNodeDef)

      document.dispatchEvent(
@@ -311,11 +385,8 @@ describe('useNodeDragToCanvas', () => {
      })
      mockConvertEventToCanvasOffset.mockReturnValue([150, 150])

-      const { startDrag, setupGlobalListeners, isDragging } =
-        useNodeDragToCanvas()
-
-      setupGlobalListeners()
-      startDrag(mockNodeDef, 'native')
+      const { startDrag, isDragging } = useNodeDragToCanvas()
+      startDrag(mockNodeDef, { mode: 'native' })

      const pointerEvent = new PointerEvent('pointerup', {
        clientX: 250,
@@ -341,7 +412,7 @@ describe('useNodeDragToCanvas', () => {

      const { startDrag, handleNativeDrop } = useNodeDragToCanvas()

-      startDrag(mockNodeDef, 'native')
+      startDrag(mockNodeDef, { mode: 'native' })
      handleNativeDrop(250, 250)

      expect(mockAddNodeOnGraph).toHaveBeenCalledWith(mockNodeDef, {
@@ -359,7 +430,7 @@ describe('useNodeDragToCanvas', () => {

      const { startDrag, handleNativeDrop, isDragging } = useNodeDragToCanvas()

-      startDrag(mockNodeDef, 'native')
+      startDrag(mockNodeDef, { mode: 'native' })
      handleNativeDrop(600, 250)

      expect(mockAddNodeOnGraph).not.toHaveBeenCalled()
@@ -377,7 +448,7 @@ describe('useNodeDragToCanvas', () => {

      const { startDrag, handleNativeDrop } = useNodeDragToCanvas()

-      startDrag(mockNodeDef, 'click')
+      startDrag(mockNodeDef)
      handleNativeDrop(250, 250)

      expect(mockAddNodeOnGraph).not.toHaveBeenCalled()
@@ -392,14 +463,12 @@ describe('useNodeDragToCanvas', () => {
      })
      mockConvertEventToCanvasOffset.mockReturnValue([200, 200])

-      const { startDrag, handleNativeDrop, isDragging, dragMode } =
-        useNodeDragToCanvas()
+      const { startDrag, handleNativeDrop, isDragging } = useNodeDragToCanvas()

-      startDrag(mockNodeDef, 'native')
+      startDrag(mockNodeDef, { mode: 'native' })
      handleNativeDrop(250, 250)

      expect(isDragging.value).toBe(false)
-      expect(dragMode.value).toBe('click')
    })
  })

@@ -426,31 +495,29 @@ describe('useNodeDragToCanvas', () => {
    })

    it('should stop propagation when in click-drag mode over canvas', () => {
-      const { startDrag, setupGlobalListeners } = useNodeDragToCanvas()
-      setupGlobalListeners()
+      const { startDrag } = useNodeDragToCanvas()
      startDrag(mockNodeDef)

      expect(dispatchPointerDown(250, 250)).toHaveBeenCalled()
    })

-    it('should not stop propagation when not dragging', () => {
-      const { setupGlobalListeners } = useNodeDragToCanvas()
-      setupGlobalListeners()
+    it('should not stop propagation once the drag is cancelled', () => {
+      const { startDrag, cancelDrag } = useNodeDragToCanvas()
+      startDrag(mockNodeDef)
+      cancelDrag()

      expect(dispatchPointerDown(250, 250)).not.toHaveBeenCalled()
    })

    it('should not stop propagation in native drag mode', () => {
-      const { startDrag, setupGlobalListeners } = useNodeDragToCanvas()
-      setupGlobalListeners()
-      startDrag(mockNodeDef, 'native')
+      const { startDrag } = useNodeDragToCanvas()
+      startDrag(mockNodeDef, { mode: 'native' })

      expect(dispatchPointerDown(250, 250)).not.toHaveBeenCalled()
    })

    it('should not stop propagation when pointer is outside canvas', () => {
-      const { startDrag, setupGlobalListeners } = useNodeDragToCanvas()
-      setupGlobalListeners()
+      const { startDrag } = useNodeDragToCanvas()
      startDrag(mockNodeDef)

      expect(dispatchPointerDown(600, 250)).not.toHaveBeenCalled()
@@ -477,10 +544,8 @@ describe('useNodeDragToCanvas', () => {
    }

    it('should prefer tracked drag position over dragend coordinates', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-      startDrag(mockNodeDef, 'native')
+      const { startDrag, handleNativeDrop } = useNodeDragToCanvas()
+      startDrag(mockNodeDef, { mode: 'native' })

      fireDrag(250, 250)
      // dragend supplies a bad position (the Firefox bug); the tracked one
@@ -494,10 +559,8 @@ describe('useNodeDragToCanvas', () => {
    })

    it('should ignore drag events with (0, 0)', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-      startDrag(mockNodeDef, 'native')
+      const { startDrag, handleNativeDrop } = useNodeDragToCanvas()
+      startDrag(mockNodeDef, { mode: 'native' })

      fireDrag(250, 250)
      fireDrag(0, 0)
@@ -510,10 +573,8 @@ describe('useNodeDragToCanvas', () => {
    })

    it('should fall back to dragend coordinates when no drag fired', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-      startDrag(mockNodeDef, 'native')
+      const { startDrag, handleNativeDrop } = useNodeDragToCanvas()
+      startDrag(mockNodeDef, { mode: 'native' })

      handleNativeDrop(250, 250)

@@ -523,32 +584,14 @@ describe('useNodeDragToCanvas', () => {
      })
    })

-    it('should ignore dragover events fired before startDrag', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-
-      fireDrag(250, 250)
-      startDrag(mockNodeDef, 'native')
-      handleNativeDrop(300, 300)
-
-      expect(mockConvertEventToCanvasOffset).toHaveBeenCalledWith({
-        clientX: 300,
-        clientY: 300
-      })
-    })
-
    it('should clear tracked position between drags', () => {
-      const { startDrag, setupGlobalListeners, handleNativeDrop } =
-        useNodeDragToCanvas()
-      setupGlobalListeners()
-
-      startDrag(mockNodeDef, 'native')
+      const { startDrag, handleNativeDrop } = useNodeDragToCanvas()
+      startDrag(mockNodeDef, { mode: 'native' })
      fireDrag(250, 250)
      handleNativeDrop(1505, 102)

      // Second drag - no drag events, so we should fall back to args.
-      startDrag(mockNodeDef, 'native')
+      startDrag(mockNodeDef, { mode: 'native' })
      handleNativeDrop(300, 300)

      expect(mockConvertEventToCanvasOffset).toHaveBeenLastCalledWith({
--- a/src/composables/node/useNodeDragToCanvas.ts
+++ b/src/composables/node/useNodeDragToCanvas.ts
@@ -1,23 +1,29 @@
 import { ref, shallowRef } from 'vue'

+import { t } from '@/i18n'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { withNodeAddSource } from '@/platform/telemetry/nodeAdded/nodeAddSource'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'

 type DragMode = 'click' | 'native'
+type WidgetValues = Record<string, string>
+type Position = { x: number; y: number }
+
+interface StartDragOptions {
+  mode?: DragMode
+  widgetValues?: WidgetValues
+}

 const isDragging = ref(false)
 const draggedNode = shallowRef<ComfyNodeDefImpl | null>(null)
-const cursorPosition = ref({ x: 0, y: 0 })
 const dragMode = ref<DragMode>('click')
-const lastNativeDragPosition = shallowRef<{ x: number; y: number }>()
+const lastNativeDragPosition = shallowRef<Position>()
+const pendingWidgetValues = shallowRef<WidgetValues>()
 let listenersSetup = false

-function updatePosition(e: PointerEvent) {
-  cursorPosition.value = { x: e.clientX, y: e.clientY }
-}
-
 // Firefox dragend can report stale clientX/Y and `drag` can fire with
 // (0, 0). dragover on the target reliably reports real client coords.
 // https://bugzilla.mozilla.org/show_bug.cgi?id=1773886
@@ -27,11 +33,15 @@ function trackNativeDragPosition(e: DragEvent) {
  lastNativeDragPosition.value = { x: e.clientX, y: e.clientY }
 }

-function cancelDrag() {
-  isDragging.value = false
-  draggedNode.value = null
-  dragMode.value = 'click'
-  lastNativeDragPosition.value = undefined
+function applyWidgetValues(node: LGraphNode, values: WidgetValues) {
+  for (const [name, value] of Object.entries(values)) {
+    const widget = node.widgets?.find((w) => w.name === name)
+    if (!widget) {
+      console.error(`Widget ${name} not found on node ${node.type}`)
+      continue
+    }
+    widget.value = value
+  }
 }

 function isOverCanvas(clientX: number, clientY: number): boolean {
@@ -62,7 +72,19 @@ function addNodeAtPosition(clientX: number, clientY: number): boolean {
  const node = withNodeAddSource('sidebar_drag', () =>
    useLitegraphService().addNodeOnGraph(nodeDef, { pos })
  )
-  if (node) canvas.selectItems([node])
+  if (!node) {
+    console.error(`Failed to add node to graph: ${nodeDef.name}`)
+    useToastStore().add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: t('assetBrowser.failedToCreateNode')
+    })
+    return true
+  }
+
+  if (pendingWidgetValues.value)
+    applyWidgetValues(node, pendingWidgetValues.value)
+  canvas.selectItems([node])
  return true
 }

@@ -92,7 +114,6 @@ function setupGlobalListeners() {
  if (listenersSetup) return
  listenersSetup = true

-  document.addEventListener('pointermove', updatePosition)
  document.addEventListener('pointerdown', blockCommitPointerDown, true)
  document.addEventListener('pointerup', endDrag, true)
  document.addEventListener('keydown', handleKeydown)
@@ -103,22 +124,31 @@ function cleanupGlobalListeners() {
  if (!listenersSetup) return
  listenersSetup = false

-  document.removeEventListener('pointermove', updatePosition)
  document.removeEventListener('pointerdown', blockCommitPointerDown, true)
  document.removeEventListener('pointerup', endDrag, true)
  document.removeEventListener('keydown', handleKeydown)
  document.removeEventListener('dragover', trackNativeDragPosition)
+}

-  if (isDragging.value && dragMode.value === 'click') {
-    cancelDrag()
-  }
+function cancelDrag() {
+  isDragging.value = false
+  draggedNode.value = null
+  dragMode.value = 'click'
+  lastNativeDragPosition.value = undefined
+  pendingWidgetValues.value = undefined
+  cleanupGlobalListeners()
 }

 export function useNodeDragToCanvas() {
-  function startDrag(nodeDef: ComfyNodeDefImpl, mode: DragMode = 'click') {
+  function startDrag(
+    nodeDef: ComfyNodeDefImpl,
+    { mode = 'click', widgetValues }: StartDragOptions = {}
+  ) {
    isDragging.value = true
    draggedNode.value = nodeDef
    dragMode.value = mode
+    pendingWidgetValues.value = widgetValues
+    setupGlobalListeners()
  }

  function handleNativeDrop(clientX: number, clientY: number) {
@@ -134,12 +164,9 @@ export function useNodeDragToCanvas() {
  return {
    isDragging,
    draggedNode,
-    cursorPosition,
-    dragMode,
+    pendingWidgetValues,
    startDrag,
    cancelDrag,
-    handleNativeDrop,
-    setupGlobalListeners,
-    cleanupGlobalListeners
+    handleNativeDrop
  }
 }
--- a/src/composables/node/useNodePreviewAndDrag.test.ts
+++ b/src/composables/node/useNodePreviewAndDrag.test.ts
@@ -124,7 +124,9 @@ describe('useNodePreviewAndDrag', () => {

      expect(result.isDragging.value).toBe(true)
      expect(result.isHovered.value).toBe(false)
-      expect(mockStartDrag).toHaveBeenCalledWith(mockNodeDef, 'native')
+      expect(mockStartDrag).toHaveBeenCalledWith(mockNodeDef, {
+        mode: 'native'
+      })
      expect(mockDataTransfer.effectAllowed).toBe('copy')
      expect(mockDataTransfer.setData).toHaveBeenCalledWith(
        'application/x-comfy-node',
--- a/src/composables/node/useNodePreviewAndDrag.ts
+++ b/src/composables/node/useNodePreviewAndDrag.ts
@@ -112,7 +112,7 @@ export function useNodePreviewAndDrag(
    isDragging.value = true
    isHovered.value = false

-    startDrag(nodeDef.value, 'native')
+    startDrag(nodeDef.value, { mode: 'native' })

    if (e.dataTransfer) {
      e.dataTransfer.effectAllowed = 'copy'
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -2,6 +2,7 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useAuthActions } from '@/composables/auth/useAuthActions'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useSubgraphOperations } from '@/composables/graph/useSubgraphOperations'
+import { startModelNodeDragFromAsset } from '@/composables/node/startModelNodeDragFromAsset'
 import { useExternalLink } from '@/composables/useExternalLink'
 import { useModelSelectorDialog } from '@/composables/useModelSelectorDialog'
 import {
@@ -20,7 +21,6 @@ import {
 import type { Point } from '@/lib/litegraph/src/litegraph'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
-import { createModelNodeFromAsset } from '@/platform/assets/utils/createModelNodeFromAsset'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { buildSupportUrl } from '@/platform/support/config'
 import { useTelemetry } from '@/platform/telemetry'
@@ -1305,14 +1305,14 @@ export function useCoreCommands(): ComfyCommand[] {
          assetType: 'models',
          title: t('sideToolbar.modelLibrary'),
          onAssetSelected: (asset) => {
-            const result = createModelNodeFromAsset(asset)
-            if (!result.success) {
+            const error = startModelNodeDragFromAsset(asset)
+            if (error) {
              toastStore.add({
                severity: 'error',
                summary: t('g.error'),
                detail: t('assetBrowser.failedToCreateNode')
              })
-              console.error('Node creation failed:', result.error)
+              console.error('Node creation failed:', error)
            }
          }
        })
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2423,6 +2423,7 @@
    "member": "member",
    "usdPerMonth": "USD / mo",
    "usdPerMonthPerMember": "USD / mo / member",
+    "creditSliderSave": "Save {percent}% ({amount})",
    "renewsDate": "Renews {date}",
    "expiresDate": "Expires {date}",
    "manageSubscription": "Manage subscription",
@@ -3629,12 +3630,10 @@
      "unsupportedTitle": "Unsupported Node Packs",
      "ossManagerDisabledHint": "To install missing nodes, first run {pipCmd} in your Python environment to install Node Manager, then restart ComfyUI with the {flag} flag.",
      "installAll": "Install All",
-      "installNodePack": "Install node pack",
      "unknownPack": "Unknown pack",
      "installing": "Installing...",
      "installed": "Installed",
      "applyChanges": "Apply Changes",
-      "searchInManager": "Search in Node Manager",
      "viewInManager": "View in Manager",
      "collapse": "Collapse",
      "expand": "Expand"
--- a/src/platform/assets/utils/createModelNodeFromAsset.test.ts
+++ b/src/platform/assets/utils/createModelNodeFromAsset.test.ts
@@ -1,439 +0,0 @@
-// oxlint-disable no-misused-spread
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { markRaw } from 'vue'
-import type { Raw } from 'vue'
-
-import type { LGraphNode, Subgraph } from '@/lib/litegraph/src/litegraph'
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type * as LitegraphModule from '@/lib/litegraph/src/litegraph'
-import type * as ModelToNodeStoreModule from '@/stores/modelToNodeStore'
-import type * as WorkflowStoreModule from '@/platform/workflow/management/stores/workflowStore'
-import type * as LitegraphServiceModule from '@/services/litegraphService'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { createModelNodeFromAsset } from '@/platform/assets/utils/createModelNodeFromAsset'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { app } from '@/scripts/app'
-import { useLitegraphService } from '@/services/litegraphService'
-import { useModelToNodeStore } from '@/stores/modelToNodeStore'
-
-// Mock dependencies
-vi.mock('@/scripts/api', () => ({
-  api: {
-    apiURL: vi.fn((path: string) => `http://localhost:8188${path}`)
-  }
-}))
-vi.mock('@/stores/modelToNodeStore', async (importOriginal) => {
-  const actual = await importOriginal<typeof ModelToNodeStoreModule>()
-  return {
-    ...actual,
-    useModelToNodeStore: vi.fn()
-  }
-})
-vi.mock(
-  '@/platform/workflow/management/stores/workflowStore',
-  async (importOriginal) => {
-    const actual = await importOriginal<typeof WorkflowStoreModule>()
-    return {
-      ...actual,
-      useWorkflowStore: vi.fn()
-    }
-  }
-)
-vi.mock('@/services/litegraphService', async (importOriginal) => {
-  const actual = await importOriginal<typeof LitegraphServiceModule>()
-  return {
-    ...actual,
-    useLitegraphService: vi.fn()
-  }
-})
-vi.mock('@/lib/litegraph/src/litegraph', async (importOriginal) => {
-  const actual = await importOriginal<typeof LitegraphModule>()
-  return {
-    ...actual,
-    LiteGraph: {
-      ...actual.LiteGraph,
-      createNode: vi.fn()
-    }
-  }
-})
-vi.mock('@/scripts/app', () => ({
-  app: {
-    canvas: {
-      graph: {
-        add: vi.fn()
-      }
-    }
-  }
-}))
-function createMockAsset(overrides: Partial<AssetItem> = {}): AssetItem {
-  return {
-    id: 'asset-123',
-    name: 'test-model.safetensors',
-    size: 1024,
-    created_at: '2025-10-01T00:00:00Z',
-    tags: ['models', 'checkpoints'],
-    user_metadata: {
-      filename: 'models/checkpoints/test-model.safetensors'
-    },
-    ...overrides
-  }
-}
-async function createMockNode(overrides?: {
-  widgetName?: string
-  widgetValue?: string
-  hasWidgets?: boolean
-}): Promise<LGraphNode> {
-  const {
-    widgetName = 'ckpt_name',
-    widgetValue = '',
-    hasWidgets = true
-  } = overrides || {}
-
-  const { LGraphNode: ActualLGraphNode } = await vi.importActual<
-    typeof LitegraphModule
-  >('@/lib/litegraph/src/litegraph')
-
-  if (!hasWidgets) {
-    return Object.create(ActualLGraphNode.prototype)
-  }
-
-  type Widget = NonNullable<LGraphNode['widgets']>[number]
-  const widget: Pick<Widget, 'name' | 'value' | 'type' | 'options' | 'y'> = {
-    name: widgetName,
-    value: widgetValue,
-    type: 'string',
-    options: {},
-    y: 0
-  }
-
-  return Object.create(ActualLGraphNode.prototype, {
-    widgets: { value: [widget], writable: true }
-  })
-}
-function createMockNodeProvider(
-  overrides: {
-    nodeDef?: { name: string; display_name: string }
-    key?: string
-  } = {}
-) {
-  return {
-    nodeDef: {
-      name: 'CheckpointLoaderSimple',
-      display_name: 'Load Checkpoint',
-      ...overrides.nodeDef
-    },
-    key: overrides.key ?? 'ckpt_name'
-  }
-}
-/**
- * Configures all mocked dependencies with sensible defaults.
- * Uses semantic parameters for clearer test intent.
- * For error paths or edge cases, pass null values or specific overrides.
- */
-async function setupMocks(
-  overrides: {
-    nodeProvider?: ReturnType<typeof createMockNodeProvider> | null
-    canvasCenter?: [number, number]
-    activeSubgraph?: Raw<Subgraph>
-    createdNode?: Awaited<ReturnType<typeof createMockNode>> | null
-  } = {}
-) {
-  const {
-    nodeProvider = createMockNodeProvider(),
-    canvasCenter = [100, 200],
-    activeSubgraph = undefined,
-    createdNode = await createMockNode()
-  } = overrides
-
-  vi.mocked(useModelToNodeStore).mockReturnValue({
-    ...useModelToNodeStore(),
-    getNodeProvider: vi.fn().mockReturnValue(nodeProvider)
-  })
-
-  vi.mocked(useLitegraphService).mockReturnValue({
-    ...useLitegraphService(),
-    getCanvasCenter: vi.fn().mockReturnValue(canvasCenter)
-  })
-
-  vi.mocked(useWorkflowStore).mockReturnValue({
-    ...useWorkflowStore(),
-    activeSubgraph,
-    isSubgraphActive: !!activeSubgraph
-  })
-  vi.mocked(LiteGraph.createNode).mockReturnValue(createdNode)
-}
-describe('createModelNodeFromAsset', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    vi.spyOn(console, 'warn').mockImplementation(() => {})
-  })
-  describe('when creating nodes from valid assets', () => {
-    it('should create the appropriate loader node for the asset category', async () => {
-      const asset = createMockAsset()
-      await setupMocks()
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(true)
-      if (result.success) {
-        expect(
-          vi.mocked(useModelToNodeStore)().getNodeProvider
-        ).toHaveBeenCalledWith('checkpoints')
-        expect(LiteGraph.createNode).toHaveBeenCalledWith(
-          'CheckpointLoaderSimple',
-          'Load Checkpoint',
-          { pos: [100, 200] }
-        )
-      }
-    })
-    it('should place node at canvas center by default', async () => {
-      const asset = createMockAsset()
-      await setupMocks({
-        canvasCenter: [150, 250]
-      })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(true)
-      expect(
-        vi.mocked(useLitegraphService)().getCanvasCenter
-      ).toHaveBeenCalled()
-      expect(LiteGraph.createNode).toHaveBeenCalledWith(
-        'CheckpointLoaderSimple',
-        'Load Checkpoint',
-        { pos: [150, 250] }
-      )
-    })
-    it('should place node at specified position when position is provided', async () => {
-      const asset = createMockAsset()
-      await setupMocks()
-      const result = createModelNodeFromAsset(asset, { position: [300, 400] })
-      expect(result.success).toBe(true)
-      expect(
-        vi.mocked(useLitegraphService)().getCanvasCenter
-      ).not.toHaveBeenCalled()
-      expect(LiteGraph.createNode).toHaveBeenCalledWith(
-        'CheckpointLoaderSimple',
-        'Load Checkpoint',
-        { pos: [300, 400] }
-      )
-    })
-    it('should populate the loader widget with the asset file path', async () => {
-      const asset = createMockAsset()
-      const mockNode = await createMockNode()
-      await setupMocks({ createdNode: mockNode })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(true)
-      expect(mockNode.widgets?.[0].value).toBe(
-        'models/checkpoints/test-model.safetensors'
-      )
-    })
-    it('should add node to root graph when no subgraph is active', async () => {
-      const asset = createMockAsset()
-      const mockNode = await createMockNode()
-      await setupMocks({ createdNode: mockNode })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(true)
-      expect(vi.mocked(app).canvas.graph!.add).toHaveBeenCalledWith(mockNode)
-    })
-    it('should fallback to asset.metadata.filename when user_metadata.filename missing', async () => {
-      const asset = createMockAsset({
-        user_metadata: {},
-        metadata: { filename: 'models/checkpoints/from-metadata.safetensors' }
-      })
-      const mockNode = await createMockNode()
-      await setupMocks({ createdNode: mockNode })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(true)
-      expect(mockNode.widgets?.[0].value).toBe(
-        'models/checkpoints/from-metadata.safetensors'
-      )
-    })
-    it('should fallback to asset.name when both filename sources missing', async () => {
-      const asset = createMockAsset({
-        user_metadata: {},
-        metadata: undefined
-      })
-      const mockNode = await createMockNode()
-      await setupMocks({ createdNode: mockNode })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(true)
-      expect(mockNode.widgets?.[0].value).toBe('test-model.safetensors')
-    })
-    it('should add node to active subgraph when present', async () => {
-      const asset = createMockAsset()
-      const mockNode = await createMockNode()
-      const { Subgraph } = await vi.importActual<typeof LitegraphModule>(
-        '@/lib/litegraph/src/litegraph'
-      )
-      const mockSubgraph = markRaw(
-        Object.create(Subgraph.prototype, {
-          add: { value: vi.fn() }
-        })
-      )
-      await setupMocks({
-        createdNode: mockNode,
-        activeSubgraph: mockSubgraph
-      })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(true)
-      expect(mockSubgraph.add).toHaveBeenCalledWith(mockNode)
-      expect(vi.mocked(app).canvas.graph!.add).not.toHaveBeenCalled()
-    })
-    it('should succeed when provider has empty key (auto-load nodes)', async () => {
-      const asset = createMockAsset({
-        tags: ['models', 'chatterbox/chatterbox_vc'],
-        user_metadata: { filename: 'chatterbox_vc_model.pt' }
-      })
-      const mockNode = await createMockNode({ hasWidgets: false })
-      const nodeProvider = createMockNodeProvider({
-        nodeDef: {
-          name: 'FL_ChatterboxVC',
-          display_name: 'FL Chatterbox VC'
-        },
-        key: ''
-      })
-      await setupMocks({ createdNode: mockNode, nodeProvider })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(true)
-      expect(vi.mocked(app).canvas.graph!.add).toHaveBeenCalledWith(mockNode)
-    })
-  })
-  describe('when asset data is incomplete or invalid', () => {
-    beforeEach(() => {
-      vi.spyOn(console, 'error').mockImplementation(() => {})
-    })
-    it.for([
-      {
-        case: 'missing user_metadata with no fallback',
-        overrides: { user_metadata: undefined, metadata: undefined, name: '' },
-        expectedCode: 'INVALID_ASSET' as const,
-        errorPattern: /Invalid filename.*expected non-empty string/
-      },
-      {
-        case: 'empty filename with no fallback',
-        overrides: {
-          user_metadata: { filename: '' },
-          metadata: undefined,
-          name: ''
-        },
-        expectedCode: 'INVALID_ASSET' as const,
-        errorPattern: /Invalid filename.*expected non-empty string/
-      }
-    ])(
-      'should fail when asset has $case',
-      ({ overrides, expectedCode, errorPattern }) => {
-        const asset = createMockAsset(overrides)
-        const result = createModelNodeFromAsset(asset)
-        expect(result.success).toBe(false)
-        if (!result.success) {
-          expect(result.error.code).toBe(expectedCode)
-          expect(result.error.message).toMatch(errorPattern)
-          expect(result.error.assetId).toBe('asset-123')
-        }
-      }
-    )
-    it.for([
-      {
-        case: 'no tags',
-        overrides: { tags: undefined },
-        expectedCode: 'INVALID_ASSET' as const,
-        errorMessage: 'Asset has no tags defined'
-      },
-      {
-        case: 'only excluded tags',
-        overrides: { tags: ['models', 'missing'] },
-        expectedCode: 'INVALID_ASSET' as const,
-        errorMessage: 'Asset has no valid category tag'
-      },
-      {
-        case: 'only the models tag',
-        overrides: { tags: ['models'] },
-        expectedCode: 'INVALID_ASSET' as const,
-        errorMessage: 'Asset has no valid category tag'
-      }
-    ])(
-      'should fail when asset has $case',
-      ({ overrides, expectedCode, errorMessage }) => {
-        const asset = createMockAsset(overrides)
-        const result = createModelNodeFromAsset(asset)
-        expect(result.success).toBe(false)
-        if (!result.success) {
-          expect(result.error.code).toBe(expectedCode)
-          expect(result.error.message).toBe(errorMessage)
-        }
-      }
-    )
-  })
-  describe('when system resources are unavailable', () => {
-    beforeEach(() => {
-      vi.spyOn(console, 'error').mockImplementation(() => {})
-    })
-    it('should fail when no provider registered for category', async () => {
-      const asset = createMockAsset()
-      await setupMocks({ nodeProvider: null })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(false)
-      if (!result.success) {
-        expect(result.error.code).toBe('NO_PROVIDER')
-        expect(result.error.message).toContain('checkpoints')
-        expect(result.error.details?.category).toBe('checkpoints')
-      }
-    })
-    it('should fail when node creation fails', async () => {
-      const asset = createMockAsset()
-      await setupMocks()
-      vi.mocked(LiteGraph.createNode).mockReturnValue(null)
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(false)
-      if (!result.success) {
-        expect(result.error.code).toBe('NODE_CREATION_FAILED')
-        expect(result.error.message).toContain('CheckpointLoaderSimple')
-      }
-    })
-    it('should fail when widget is missing from node', async () => {
-      const asset = createMockAsset()
-      const mockNode = await createMockNode({ widgetName: 'wrong_widget' })
-      await setupMocks({ createdNode: mockNode })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(false)
-      if (!result.success) {
-        expect(result.error.code).toBe('MISSING_WIDGET')
-        expect(result.error.message).toContain('ckpt_name')
-        expect(result.error.message).toContain('CheckpointLoaderSimple')
-        expect(result.error.details?.widgetName).toBe('ckpt_name')
-      }
-    })
-    it('should fail when node has no widgets array', async () => {
-      const asset = createMockAsset()
-      const mockNode = await createMockNode({ hasWidgets: false })
-      await setupMocks({ createdNode: mockNode })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(false)
-      if (!result.success) {
-        expect(result.error.code).toBe('MISSING_WIDGET')
-        expect(result.error.message).toContain('ckpt_name not found')
-      }
-    })
-    it('should not add node to graph when widget validation fails', async () => {
-      const asset = createMockAsset()
-      const mockNode = await createMockNode({ hasWidgets: false })
-      await setupMocks({ createdNode: mockNode })
-      createModelNodeFromAsset(asset)
-      expect(vi.mocked(app).canvas.graph!.add).not.toHaveBeenCalled()
-    })
-  })
-  describe('when graph is null', () => {
-    beforeEach(() => {
-      vi.spyOn(console, 'error').mockImplementation(() => {})
-      vi.mocked(app).canvas.graph = null
-    })
-    it('should fail when no graph is available', async () => {
-      const asset = createMockAsset()
-      const mockNode = await createMockNode()
-      await setupMocks({ createdNode: mockNode })
-      const result = createModelNodeFromAsset(asset)
-      expect(result.success).toBe(false)
-      if (!result.success) {
-        expect(result.error.code).toBe('NO_GRAPH')
-        expect(result.error.message).toBe('No active graph available')
-      }
-    })
-  })
-})
--- a/src/platform/assets/utils/createModelNodeFromAsset.ts
+++ b/src/platform/assets/utils/createModelNodeFromAsset.ts
@@ -1,198 +0,0 @@
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { LGraphNode, Point } from '@/lib/litegraph/src/litegraph'
-import { assetItemSchema } from '@/platform/assets/schemas/assetSchema'
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import {
-  MISSING_TAG,
-  MODELS_TAG
-} from '@/platform/assets/services/assetService'
-import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { app } from '@/scripts/app'
-import { useLitegraphService } from '@/services/litegraphService'
-import { useModelToNodeStore } from '@/stores/modelToNodeStore'
-
-interface ModelNodeCreateOptions {
-  position?: Point
-}
-
-type NodeCreationErrorCode =
-  | 'INVALID_ASSET'
-  | 'NO_PROVIDER'
-  | 'NODE_CREATION_FAILED'
-  | 'MISSING_WIDGET'
-  | 'NO_GRAPH'
-
-interface NodeCreationError {
-  code: NodeCreationErrorCode
-  message: string
-  assetId: string
-  details?: Record<string, unknown>
-}
-
-type Result<T, E> = { success: true; value: T } | { success: false; error: E }
-
-/**
- * Creates a LiteGraph node from an asset item.
- *
- * **Boundary Function**: Bridges Vue reactive domain with LiteGraph canvas domain.
- *
- * @param asset - Asset item to create node from (Vue domain)
- * @param options - Optional position and configuration
- * @returns Result with LiteGraph node (Canvas domain) or error details
- *
- * @remarks
- * This function performs side effects on the canvas graph. Validation failures
- * return error results rather than throwing to allow graceful degradation in UI contexts.
- * Widget validation occurs before graph mutation to prevent orphaned nodes.
- */
-export function createModelNodeFromAsset(
-  asset: AssetItem,
-  options?: ModelNodeCreateOptions
-): Result<LGraphNode, NodeCreationError> {
-  const validatedAsset = assetItemSchema.safeParse(asset)
-
-  if (!validatedAsset.success) {
-    const errorMessage = validatedAsset.error.errors
-      .map((e) => `${e.path.join('.')}: ${e.message}`)
-      .join(', ')
-    console.error('Invalid asset item:', errorMessage)
-    return {
-      success: false,
-      error: {
-        code: 'INVALID_ASSET',
-        message: 'Asset schema validation failed',
-        assetId: asset.id,
-        details: { validationErrors: errorMessage }
-      }
-    }
-  }
-
-  const validAsset = validatedAsset.data
-
-  const filename = getAssetFilename(validAsset)
-  if (filename.length === 0) {
-    console.error(
-      `Asset ${validAsset.id} has invalid user_metadata.filename (expected non-empty string, got ${typeof filename})`
-    )
-    return {
-      success: false,
-      error: {
-        code: 'INVALID_ASSET',
-        message: `Invalid filename (expected non-empty string, got ${typeof filename})`,
-        assetId: validAsset.id
-      }
-    }
-  }
-
-  if (validAsset.tags.length === 0) {
-    console.error(
-      `Asset ${validAsset.id} has no tags defined (expected at least one category tag)`
-    )
-    return {
-      success: false,
-      error: {
-        code: 'INVALID_ASSET',
-        message: 'Asset has no tags defined',
-        assetId: validAsset.id
-      }
-    }
-  }
-
-  const category = validAsset.tags.find(
-    (tag) => tag !== MODELS_TAG && tag !== MISSING_TAG
-  )
-  if (!category) {
-    console.error(
-      `Asset ${validAsset.id} has no valid category tag. Available tags: ${validAsset.tags.join(', ')} (expected tag other than '${MODELS_TAG}' or '${MISSING_TAG}')`
-    )
-    return {
-      success: false,
-      error: {
-        code: 'INVALID_ASSET',
-        message: 'Asset has no valid category tag',
-        assetId: validAsset.id,
-        details: { availableTags: validAsset.tags }
-      }
-    }
-  }
-
-  const modelToNodeStore = useModelToNodeStore()
-  const provider = modelToNodeStore.getNodeProvider(category)
-  if (!provider) {
-    console.error(`No node provider registered for category: ${category}`)
-    return {
-      success: false,
-      error: {
-        code: 'NO_PROVIDER',
-        message: `No node provider registered for category: ${category}`,
-        assetId: validAsset.id,
-        details: { category }
-      }
-    }
-  }
-
-  const litegraphService = useLitegraphService()
-  const pos = options?.position ?? litegraphService.getCanvasCenter()
-
-  const node = LiteGraph.createNode(
-    provider.nodeDef.name,
-    provider.nodeDef.display_name,
-    { pos }
-  )
-
-  if (!node) {
-    console.error(`Failed to create node for type: ${provider.nodeDef.name}`)
-    return {
-      success: false,
-      error: {
-        code: 'NODE_CREATION_FAILED',
-        message: `Failed to create node for type: ${provider.nodeDef.name}`,
-        assetId: validAsset.id,
-        details: { nodeType: provider.nodeDef.name }
-      }
-    }
-  }
-
-  const workflowStore = useWorkflowStore()
-  const targetGraph = workflowStore.isSubgraphActive
-    ? workflowStore.activeSubgraph
-    : app.canvas.graph
-
-  if (!targetGraph) {
-    console.error('No active graph available')
-    return {
-      success: false,
-      error: {
-        code: 'NO_GRAPH',
-        message: 'No active graph available',
-        assetId: validAsset.id
-      }
-    }
-  }
-
-  // Set widget value if provider specifies a key (some nodes auto-load models without a widget)
-  if (provider.key) {
-    const widget = node.widgets?.find((w) => w.name === provider.key)
-    if (!widget) {
-      console.error(
-        `Widget ${provider.key} not found on node ${provider.nodeDef.name}`
-      )
-      return {
-        success: false,
-        error: {
-          code: 'MISSING_WIDGET',
-          message: `Widget ${provider.key} not found on node ${provider.nodeDef.name}`,
-          assetId: validAsset.id,
-          details: { widgetName: provider.key, nodeType: provider.nodeDef.name }
-        }
-      }
-    }
-    widget.value = filename
-  }
-
-  // Add the node to the graph
-  targetGraph.add(node)
-
-  return { success: true, value: node }
-}
--- a/src/platform/assets/utils/resolveModelNodeFromAsset.test.ts
+++ b/src/platform/assets/utils/resolveModelNodeFromAsset.test.ts
@@ -0,0 +1,208 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { resolveModelNodeFromAsset } from '@/platform/assets/utils/resolveModelNodeFromAsset'
+
+const mockGetNodeProvider = vi.hoisted(() => vi.fn())
+
+vi.mock('@/stores/modelToNodeStore', () => ({
+  useModelToNodeStore: () => ({ getNodeProvider: mockGetNodeProvider })
+}))
+
+function createMockAsset(overrides: Partial<AssetItem> = {}): AssetItem {
+  return {
+    id: 'asset-123',
+    name: 'test-model.safetensors',
+    size: 1024,
+    created_at: '2025-10-01T00:00:00Z',
+    tags: ['models', 'checkpoints'],
+    user_metadata: {
+      filename: 'models/checkpoints/test-model.safetensors'
+    },
+    ...overrides
+  }
+}
+
+function createMockNodeProvider(
+  overrides: {
+    nodeDef?: { name: string; display_name: string }
+    key?: string
+  } = {}
+) {
+  return {
+    nodeDef: {
+      name: 'CheckpointLoaderSimple',
+      display_name: 'Load Checkpoint',
+      ...overrides.nodeDef
+    },
+    key: overrides.key ?? 'ckpt_name'
+  }
+}
+
+function mockProvider(
+  provider: ReturnType<typeof createMockNodeProvider> | null
+) {
+  mockGetNodeProvider.mockReturnValue(provider)
+}
+
+describe('resolveModelNodeFromAsset', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  describe('valid assets', () => {
+    it('resolves the provider for the asset category and the filename', () => {
+      mockProvider(createMockNodeProvider())
+      const result = resolveModelNodeFromAsset(createMockAsset())
+
+      expect(result.success).toBe(true)
+      if (result.success) {
+        expect(mockGetNodeProvider).toHaveBeenCalledWith('checkpoints')
+        expect(result.value.provider.nodeDef.name).toBe(
+          'CheckpointLoaderSimple'
+        )
+        expect(result.value.filename).toBe(
+          'models/checkpoints/test-model.safetensors'
+        )
+      }
+    })
+
+    it('falls back to metadata.filename when user_metadata.filename missing', () => {
+      mockProvider(createMockNodeProvider())
+      const result = resolveModelNodeFromAsset(
+        createMockAsset({
+          user_metadata: {},
+          metadata: { filename: 'models/checkpoints/from-metadata.safetensors' }
+        })
+      )
+
+      expect(result.success).toBe(true)
+      if (result.success) {
+        expect(result.value.filename).toBe(
+          'models/checkpoints/from-metadata.safetensors'
+        )
+      }
+    })
+
+    it('falls back to asset.name when both filename sources missing', () => {
+      mockProvider(createMockNodeProvider())
+      const result = resolveModelNodeFromAsset(
+        createMockAsset({ user_metadata: {}, metadata: undefined })
+      )
+
+      expect(result.success).toBe(true)
+      if (result.success) {
+        expect(result.value.filename).toBe('test-model.safetensors')
+      }
+    })
+
+    it('resolves a provider with an empty key (auto-load nodes)', () => {
+      mockProvider(
+        createMockNodeProvider({
+          nodeDef: {
+            name: 'FL_ChatterboxVC',
+            display_name: 'FL Chatterbox VC'
+          },
+          key: ''
+        })
+      )
+      const result = resolveModelNodeFromAsset(
+        createMockAsset({
+          tags: ['models', 'chatterbox/chatterbox_vc'],
+          user_metadata: { filename: 'chatterbox_vc_model.pt' }
+        })
+      )
+
+      expect(result.success).toBe(true)
+      if (result.success) {
+        expect(result.value.provider.key).toBe('')
+        expect(result.value.filename).toBe('chatterbox_vc_model.pt')
+      }
+    })
+  })
+
+  describe('invalid assets', () => {
+    it('fails when the asset does not match the schema', () => {
+      const invalid = {
+        id: 'asset-123',
+        tags: ['models', 'checkpoints']
+      } as unknown as AssetItem
+
+      const result = resolveModelNodeFromAsset(invalid)
+
+      expect(result.success).toBe(false)
+      if (!result.success) {
+        expect(result.error.code).toBe('INVALID_ASSET')
+        expect(result.error.message).toBe('Asset schema validation failed')
+        expect(result.error.assetId).toBe('asset-123')
+        expect(result.error.details?.validationErrors).toBeTruthy()
+      }
+    })
+
+    it.for([
+      {
+        case: 'missing user_metadata with no fallback',
+        overrides: {
+          user_metadata: undefined,
+          metadata: undefined,
+          name: ''
+        },
+        errorPattern: /Invalid filename.*expected non-empty string/
+      },
+      {
+        case: 'empty filename with no fallback',
+        overrides: {
+          user_metadata: { filename: '' },
+          metadata: undefined,
+          name: ''
+        },
+        errorPattern: /Invalid filename.*expected non-empty string/
+      }
+    ])('fails when asset has $case', ({ overrides, errorPattern }) => {
+      const result = resolveModelNodeFromAsset(createMockAsset(overrides))
+      expect(result.success).toBe(false)
+      if (!result.success) {
+        expect(result.error.code).toBe('INVALID_ASSET')
+        expect(result.error.message).toMatch(errorPattern)
+        expect(result.error.assetId).toBe('asset-123')
+      }
+    })
+
+    it.for([
+      {
+        case: 'no tags',
+        overrides: { tags: undefined },
+        message: 'Asset has no tags defined'
+      },
+      {
+        case: 'only excluded tags',
+        overrides: { tags: ['models', 'missing'] },
+        message: 'Asset has no valid category tag'
+      },
+      {
+        case: 'only the models tag',
+        overrides: { tags: ['models'] },
+        message: 'Asset has no valid category tag'
+      }
+    ])('fails when asset has $case', ({ overrides, message }) => {
+      const result = resolveModelNodeFromAsset(createMockAsset(overrides))
+      expect(result.success).toBe(false)
+      if (!result.success) {
+        expect(result.error.code).toBe('INVALID_ASSET')
+        expect(result.error.message).toBe(message)
+      }
+    })
+
+    it('fails when no provider is registered for the category', () => {
+      mockProvider(null)
+      const result = resolveModelNodeFromAsset(createMockAsset())
+      expect(result.success).toBe(false)
+      if (!result.success) {
+        expect(result.error.code).toBe('NO_PROVIDER')
+        expect(result.error.message).toContain('checkpoints')
+        expect(result.error.details?.category).toBe('checkpoints')
+      }
+    })
+  })
+})
--- a/src/platform/assets/utils/resolveModelNodeFromAsset.ts
+++ b/src/platform/assets/utils/resolveModelNodeFromAsset.ts
@@ -0,0 +1,117 @@
+import { assetItemSchema } from '@/platform/assets/schemas/assetSchema'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import {
+  MISSING_TAG,
+  MODELS_TAG
+} from '@/platform/assets/services/assetService'
+import { getAssetFilename } from '@/platform/assets/utils/assetMetadataUtils'
+import { useModelToNodeStore } from '@/stores/modelToNodeStore'
+import type { ModelNodeProvider } from '@/stores/modelToNodeStore'
+
+type ResolveErrorCode = 'INVALID_ASSET' | 'NO_PROVIDER'
+
+export interface ResolveModelNodeError {
+  code: ResolveErrorCode
+  message: string
+  assetId: string
+  details?: Record<string, unknown>
+}
+
+export interface ResolvedModelNode {
+  provider: ModelNodeProvider
+  filename: string
+}
+
+type Result<T, E> = { success: true; value: T } | { success: false; error: E }
+
+/**
+ * Resolves an asset item to the node provider and filename needed to add a
+ * model loader node. Validation failures return error results rather than
+ * throwing, so callers can degrade gracefully in UI contexts.
+ */
+export function resolveModelNodeFromAsset(
+  asset: AssetItem
+): Result<ResolvedModelNode, ResolveModelNodeError> {
+  const validatedAsset = assetItemSchema.safeParse(asset)
+
+  if (!validatedAsset.success) {
+    const errorMessage = validatedAsset.error.errors
+      .map((e) => `${e.path.join('.')}: ${e.message}`)
+      .join(', ')
+    console.error('Invalid asset item:', errorMessage)
+    return {
+      success: false,
+      error: {
+        code: 'INVALID_ASSET',
+        message: 'Asset schema validation failed',
+        assetId: asset.id,
+        details: { validationErrors: errorMessage }
+      }
+    }
+  }
+
+  const validAsset = validatedAsset.data
+
+  const filename = getAssetFilename(validAsset)
+  if (filename.length === 0) {
+    console.error(
+      `Asset ${validAsset.id} has invalid user_metadata.filename (expected non-empty string, got ${typeof filename})`
+    )
+    return {
+      success: false,
+      error: {
+        code: 'INVALID_ASSET',
+        message: `Invalid filename (expected non-empty string, got ${typeof filename})`,
+        assetId: validAsset.id
+      }
+    }
+  }
+
+  if (validAsset.tags.length === 0) {
+    console.error(
+      `Asset ${validAsset.id} has no tags defined (expected at least one category tag)`
+    )
+    return {
+      success: false,
+      error: {
+        code: 'INVALID_ASSET',
+        message: 'Asset has no tags defined',
+        assetId: validAsset.id
+      }
+    }
+  }
+
+  const category = validAsset.tags.find(
+    (tag) => tag !== MODELS_TAG && tag !== MISSING_TAG
+  )
+  if (!category) {
+    console.error(
+      `Asset ${validAsset.id} has no valid category tag. Available tags: ${validAsset.tags.join(', ')} (expected tag other than '${MODELS_TAG}' or '${MISSING_TAG}')`
+    )
+    return {
+      success: false,
+      error: {
+        code: 'INVALID_ASSET',
+        message: 'Asset has no valid category tag',
+        assetId: validAsset.id,
+        details: { availableTags: validAsset.tags }
+      }
+    }
+  }
+
+  const provider = useModelToNodeStore().getNodeProvider(category)
+  if (!provider) {
+    console.error(`No node provider registered for category: ${category}`)
+    return {
+      success: false,
+      error: {
+        code: 'NO_PROVIDER',
+        message: `No node provider registered for category: ${category}`,
+        assetId: validAsset.id,
+        details: { category }
+      }
+    }
+  }
+
+  return { success: true, value: { provider, filename } }
+}
--- a/src/platform/cloud/subscription/components/CreditSlider.stories.ts
+++ b/src/platform/cloud/subscription/components/CreditSlider.stories.ts
@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import CreditSlider from './CreditSlider.vue'
+
+const meta: Meta<typeof CreditSlider> = {
+  title: 'Platform/Subscription/CreditSlider',
+  component: CreditSlider,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    disabled: { control: 'boolean' }
+  },
+  args: {
+    disabled: false
+  },
+  decorators: [
+    (story) => ({
+      components: { story },
+      // Previews at the real layout width: the Figma "Team Plan" card column is
+      // 512px wide with 32px padding (DES-197), i.e. a 448px content area — the
+      // width the slider actually renders into inside PricingTableWorkspace.
+      template: '<div class="w-[512px] px-8"><story /></div>'
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { CreditSlider },
+    setup() {
+      const value = ref(700)
+      return { args, value }
+    },
+    template: '<CreditSlider v-model="value" :disabled="args.disabled" />'
+  })
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => ({
+    components: { CreditSlider },
+    setup() {
+      const value = ref(700)
+      return { args, value }
+    },
+    template: '<CreditSlider v-model="value" :disabled="args.disabled" />'
+  })
+}
+
+// Sample `GET /api/billing/plans → team_credit_stops` payload (DES-197 yearly).
+// In production this comes from the API; here it shows the stops being driven
+// entirely through props rather than the hardcoded default constant.
+const apiTeamCreditStops = {
+  default_stop_index: 2,
+  stops: [
+    {
+      id: 'team_200',
+      credits: 42_200,
+      yearly: { price_cents: 20_000, discount_percent: 0 }
+    },
+    {
+      id: 'team_400',
+      credits: 84_400,
+      yearly: { price_cents: 38_000, discount_percent: 5 }
+    },
+    {
+      id: 'team_700',
+      credits: 147_700,
+      yearly: { price_cents: 63_000, discount_percent: 10 }
+    },
+    {
+      id: 'team_1400',
+      credits: 295_400,
+      yearly: { price_cents: 119_000, discount_percent: 15 }
+    },
+    {
+      id: 'team_2500',
+      credits: 527_500,
+      yearly: { price_cents: 200_000, discount_percent: 20 }
+    }
+  ]
+}
+
+// Reference adapter (FE-934 will own this in the data layer): API → CreditStop[].
+// The pre-discount list price is recovered as discounted / (1 - discount).
+const mappedStops = apiTeamCreditStops.stops.map((s) => ({
+  credits: s.credits,
+  discountPercentYearly: s.yearly.discount_percent,
+  usd: Math.round(
+    s.yearly.price_cents / 100 / (1 - s.yearly.discount_percent / 100)
+  )
+}))
+
+export const BackendDrivenStops: Story = {
+  name: 'Backend-driven stops (props)',
+  render: (args) => ({
+    components: { CreditSlider },
+    setup() {
+      const defaultStopIndex = apiTeamCreditStops.default_stop_index
+      const value = ref(mappedStops[defaultStopIndex].usd)
+      return { args, value, mappedStops, defaultStopIndex }
+    },
+    template:
+      '<CreditSlider v-model="value" :stops="mappedStops" :default-stop-index="defaultStopIndex" :disabled="args.disabled" />'
+  })
+}
--- a/src/platform/cloud/subscription/components/CreditSlider.test.ts
+++ b/src/platform/cloud/subscription/components/CreditSlider.test.ts
@@ -0,0 +1,189 @@
+import { render, screen, within } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import { usdToCredits } from '@/base/credits/comfyCredits'
+import { TEAM_PLAN_CREDIT_STOPS } from '@/platform/cloud/subscription/constants/teamPlanCreditStops'
+
+import CreditSlider from './CreditSlider.vue'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      subscription: {
+        usdPerMonth: 'USD / mo',
+        billedYearly: '{total} Billed yearly',
+        creditSliderSave: 'Save {percent}% ({amount})'
+      }
+    }
+  }
+})
+
+function renderSlider(props: Record<string, unknown> = {}) {
+  return render(CreditSlider, { props, global: { plugins: [i18n] } })
+}
+
+async function flush() {
+  await nextTick()
+  await nextTick()
+}
+
+describe('CreditSlider', () => {
+  it('defaults to the $700 stop (index 2) when no value is bound', async () => {
+    renderSlider()
+    await flush()
+
+    const thumb = screen.getByRole('slider')
+    expect(thumb).toHaveAttribute('aria-valuemin', '0')
+    expect(thumb).toHaveAttribute('aria-valuemax', '4')
+    expect(thumb).toHaveAttribute('aria-valuenow', '2')
+  })
+
+  it('snaps to the next fixed stop on ArrowRight (never a value in between)', async () => {
+    const user = userEvent.setup()
+    const onUpdate = vi.fn<(usd: number) => void>()
+
+    renderSlider({ modelValue: 700, 'onUpdate:modelValue': onUpdate })
+    await flush()
+
+    screen.getByRole('slider').focus()
+    await user.keyboard('{ArrowRight}')
+
+    expect(onUpdate).toHaveBeenCalledWith(1400)
+  })
+
+  it('snaps to the previous fixed stop on ArrowLeft', async () => {
+    const user = userEvent.setup()
+    const onUpdate = vi.fn<(usd: number) => void>()
+
+    renderSlider({ modelValue: 700, 'onUpdate:modelValue': onUpdate })
+    await flush()
+
+    screen.getByRole('slider').focus()
+    await user.keyboard('{ArrowLeft}')
+
+    expect(onUpdate).toHaveBeenCalledWith(400)
+  })
+
+  it('emits change with the full {index, usd, credits} payload', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    renderSlider({ modelValue: 700, onChange })
+    await flush()
+
+    screen.getByRole('slider').focus()
+    await user.keyboard('{ArrowRight}')
+
+    expect(onChange).toHaveBeenCalledWith({
+      index: 3,
+      usd: 1400,
+      credits: 295_400
+    })
+  })
+
+  it('emits nothing when disabled (keyboard interaction suppressed)', async () => {
+    const user = userEvent.setup()
+    const onUpdate = vi.fn<(usd: number) => void>()
+    const onChange = vi.fn()
+
+    renderSlider({
+      modelValue: 700,
+      disabled: true,
+      'onUpdate:modelValue': onUpdate,
+      onChange
+    })
+    await flush()
+
+    screen.getByRole('slider').focus()
+    await user.keyboard('{ArrowRight}')
+
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('shows the discounted price, struck original, save badge and yearly total (DES-197)', async () => {
+    renderSlider() // default $700 stop → 10% yearly discount
+    await flush()
+
+    expect(screen.getByTestId('credit-slider-price')).toHaveTextContent('$630')
+    expect(
+      screen.getByTestId('credit-slider-original-price')
+    ).toHaveTextContent('$700')
+    expect(screen.getByTestId('credit-slider-save')).toHaveTextContent(
+      'Save 10% ($70)'
+    )
+    expect(screen.getByTestId('credit-slider-billed-yearly')).toHaveTextContent(
+      '$7,560'
+    )
+  })
+
+  it('hides the discount UI at the 0% stop ($200)', async () => {
+    renderSlider({ modelValue: 200 })
+    await flush()
+
+    expect(screen.getByTestId('credit-slider-price')).toHaveTextContent('$200')
+    expect(
+      screen.queryByTestId('credit-slider-original-price')
+    ).not.toBeInTheDocument()
+    expect(screen.queryByTestId('credit-slider-save')).not.toBeInTheDocument()
+  })
+
+  it('renders all five fixed credit stop labels', async () => {
+    renderSlider({ modelValue: 700 })
+    await flush()
+
+    const stops = within(screen.getByTestId('credit-slider-stops'))
+    for (const label of ['42.2K', '84.4K', '147.7K', '295.4K', '527.5K']) {
+      expect(stops.getByText(label)).toBeInTheDocument()
+    }
+  })
+
+  it('renders nothing when stops is empty (defensive for BE-sourced data)', async () => {
+    renderSlider({ stops: [] })
+    await flush()
+
+    expect(screen.queryByRole('slider')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('credit-slider-price')).not.toBeInTheDocument()
+  })
+
+  it('renders stops + default index supplied via props (BE-sourced override)', async () => {
+    const stops = [
+      { usd: 50, credits: 10_550, discountPercentYearly: 0 },
+      { usd: 100, credits: 21_100, discountPercentYearly: 25 }
+    ]
+    // No modelValue → the model default ($700) matches no stop, so selectedIndex
+    // falls back to defaultStopIndex (here index 1 → $100).
+    renderSlider({ stops, defaultStopIndex: 1 })
+    await flush()
+
+    const thumb = screen.getByRole('slider')
+    expect(thumb).toHaveAttribute('aria-valuemax', '1') // 2 stops → max index 1
+    expect(thumb).toHaveAttribute('aria-valuenow', '1') // default index honored
+
+    // index 1 → $100 at 25% yearly → $75 discounted, struck $100, save $25
+    expect(screen.getByTestId('credit-slider-price')).toHaveTextContent('$75')
+    expect(
+      screen.getByTestId('credit-slider-original-price')
+    ).toHaveTextContent('$100')
+    expect(screen.getByTestId('credit-slider-save')).toHaveTextContent(
+      'Save 25% ($25)'
+    )
+
+    // Only the prop's labels render — none of the DES-197 defaults.
+    const labels = within(screen.getByTestId('credit-slider-stops'))
+    expect(labels.getByText('10.6K')).toBeInTheDocument()
+    expect(labels.getByText('21.1K')).toBeInTheDocument()
+    expect(labels.queryByText('147.7K')).not.toBeInTheDocument()
+  })
+
+  it('keeps every credit amount equal to usdToCredits(usd) (guards rate drift)', () => {
+    for (const stop of TEAM_PLAN_CREDIT_STOPS) {
+      expect(stop.credits).toBe(usdToCredits(stop.usd))
+    }
+  })
+})
--- a/src/platform/cloud/subscription/components/CreditSlider.vue
+++ b/src/platform/cloud/subscription/components/CreditSlider.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import {
+  TransitionPresets,
+  usePreferredReducedMotion,
+  useTransition
+} from '@vueuse/core'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+import Slider from '@/components/ui/slider/Slider.vue'
+import {
+  DEFAULT_TEAM_PLAN_STOP_INDEX,
+  TEAM_PLAN_CREDIT_STOPS
+} from '@/platform/cloud/subscription/constants/teamPlanCreditStops'
+import type { CreditStop } from '@/platform/cloud/subscription/constants/teamPlanCreditStops'
+
+const {
+  disabled = false,
+  class: rootClass,
+  stops = TEAM_PLAN_CREDIT_STOPS,
+  defaultStopIndex = DEFAULT_TEAM_PLAN_STOP_INDEX
+} = defineProps<{
+  disabled?: boolean
+  class?: HTMLAttributes['class']
+  /**
+   * The fixed credit stops the slider snaps to; when empty, the component
+   * renders nothing. Defaults to the hardcoded DES-197 set; pass the
+   * backend-sourced stops once the contract lands — map
+   * `GET /api/billing/plans → team_credit_stops.stops` to `CreditStop[]`
+   * (credits, the pre-discount `usd`, and `discountPercentYearly`).
+   */
+  stops?: readonly CreditStop[]
+  /**
+   * Stop selected when the bound value matches none (e.g. first render).
+   * Maps to `team_credit_stops.default_stop_index`. Defaults to DES-197 ($700).
+   */
+  defaultStopIndex?: number
+}>()
+
+const emit = defineEmits<{
+  /** Fired when the selected stop changes, with the full derived payload. */
+  change: [stop: { index: number; usd: number; credits: number }]
+}>()
+
+/**
+ * v-model carries the selected USD value (one of the `stops`). The literal
+ * default keeps `defineModel` statically analyzable; when custom `stops` are
+ * passed without a matching v-model, `selectedIndex` falls back to
+ * `defaultStopIndex`, so the displayed stop is still correct.
+ */
+const usd = defineModel<number>({
+  default: TEAM_PLAN_CREDIT_STOPS[DEFAULT_TEAM_PLAN_STOP_INDEX].usd
+})
+
+const selectedIndex = computed(() => {
+  const i = stops.findIndex((stop) => stop.usd === usd.value)
+  if (i !== -1) return i
+  // Fall back to the default stop, clamped into range: a backend-driven `stops`
+  // array can be shorter than expected (or `defaultStopIndex` out of bounds).
+  return Math.min(Math.max(defaultStopIndex, 0), Math.max(stops.length - 1, 0))
+})
+
+// Zero-stop fallback: `useTransition` reads its source eagerly at setup, so an
+// empty `stops` must not crash even though the template then renders nothing.
+const EMPTY_STOP: CreditStop = { usd: 0, credits: 0, discountPercentYearly: 0 }
+const current = computed(() => stops.at(selectedIndex.value) ?? EMPTY_STOP)
+
+// Yearly commitment (per DES-197): the discount applies to the monthly figure.
+// The card shows the discounted monthly price, the struck pre-discount price,
+// the saving, and the annual total.
+const discountedMonthly = computed(() =>
+  Math.round(
+    current.value.usd * (1 - current.value.discountPercentYearly / 100)
+  )
+)
+const saveAmount = computed(() => current.value.usd - discountedMonthly.value)
+const hasDiscount = computed(() => current.value.discountPercentYearly > 0)
+
+/**
+ * Smoothly count the price figures up/down as the slider moves between stops
+ * instead of snapping. Honors the user's reduced-motion preference. The save
+ * badge ("X% ($Y)") is intentionally left snapping — its percent is a discrete
+ * tier, so animating the bracketed amount alone would read inconsistently.
+ */
+const prefersReducedMotion = usePreferredReducedMotion()
+const priceTween = {
+  duration: 350,
+  easing: TransitionPresets.easeOutCubic,
+  disabled: computed(() => prefersReducedMotion.value === 'reduce')
+}
+// One vector tween keeps both figures in phase. Deriving the monthly from the
+// animated original instead would jump at the start of each move: the discount
+// tier snaps per stop while the base price is still mid-tween.
+const animatedPrices = useTransition(
+  () => [discountedMonthly.value, current.value.usd],
+  priceTween
+)
+
+const displayMonthly = computed(() => Math.round(animatedPrices.value[0]))
+const displayOriginal = computed(() => Math.round(animatedPrices.value[1]))
+// Derive the yearly total from the displayed monthly so it always reads as
+// exactly 12× the price shown — even mid-count — rather than drifting as a
+// second, independently-phased tween would.
+const displayBilledYearly = computed(() => displayMonthly.value * 12)
+
+/**
+ * Bridge the discrete stop index (0..n-1) to the reka-ui slider's `number[]`
+ * model. Driving the slider in index space with `step = 1` guarantees the
+ * thumb can only land on the fixed stops — never a value in between.
+ */
+const sliderModel = computed<number[]>({
+  get: () => [selectedIndex.value],
+  set: ([index]) => {
+    const stop = stops[index]
+    if (!stop) return
+    usd.value = stop.usd
+    emit('change', { index, usd: stop.usd, credits: stop.credits })
+  }
+})
+
+const lastIndex = computed(() => Math.max(stops.length - 1, 0))
+
+const formatUsd = (value: number) => `$${value.toLocaleString('en-US')}`
+const formatCreditsCompact = (value: number) =>
+  new Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 1
+  }).format(value)
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div
+    v-if="stops.length > 0"
+    :class="cn('flex w-full flex-col gap-3', rootClass)"
+  >
+    <!-- Price: discounted monthly + struck pre-discount + save badge -->
+    <div class="flex flex-col gap-1">
+      <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+        <span class="flex shrink-0 items-baseline gap-1.5 whitespace-nowrap">
+          <span
+            class="text-[2rem] leading-none font-semibold text-base-foreground"
+            data-testid="credit-slider-price"
+          >
+            {{ formatUsd(displayMonthly) }}
+          </span>
+          <span
+            v-if="hasDiscount"
+            class="text-base text-muted-foreground line-through"
+            data-testid="credit-slider-original-price"
+          >
+            {{ formatUsd(displayOriginal) }}
+          </span>
+          <span class="text-base text-muted-foreground">
+            {{ t('subscription.usdPerMonth') }}
+          </span>
+        </span>
+        <!-- Save badge: outlined primary pill, pushed to the right (DES-197) -->
+        <span
+          v-if="hasDiscount"
+          data-testid="credit-slider-save"
+          class="ms-auto shrink-0 rounded-full border-2 border-primary-background px-2 py-1 text-sm font-bold whitespace-nowrap text-primary-background"
+        >
+          {{
+            t('subscription.creditSliderSave', {
+              percent: current.discountPercentYearly,
+              amount: formatUsd(saveAmount)
+            })
+          }}
+        </span>
+      </div>
+      <p
+        class="m-0 text-sm text-muted-foreground"
+        data-testid="credit-slider-billed-yearly"
+      >
+        {{
+          t('subscription.billedYearly', {
+            total: formatUsd(displayBilledYearly)
+          })
+        }}
+      </p>
+    </div>
+
+    <!-- Discrete slider: snaps to the 5 fixed DES-197 stops -->
+    <Slider
+      v-model="sliderModel"
+      :min="0"
+      :max="lastIndex"
+      :step="1"
+      :disabled="disabled"
+    />
+
+    <!-- Credit stop labels; the selected stop is emphasized -->
+    <ol
+      data-testid="credit-slider-stops"
+      class="m-0 flex list-none justify-between p-0"
+    >
+      <li
+        v-for="(stop, i) in stops"
+        :key="stop.usd"
+        :data-selected="i === selectedIndex ? '' : undefined"
+        :class="
+          cn(
+            'flex items-center gap-1 text-xs',
+            i === selectedIndex
+              ? 'font-semibold text-base-foreground'
+              : 'text-muted-foreground'
+          )
+        "
+      >
+        <i
+          :class="
+            cn(
+              'icon-[comfy--credits] size-3 shrink-0',
+              i === selectedIndex ? 'bg-amber-400' : 'bg-muted-foreground'
+            )
+          "
+          aria-hidden="true"
+        />
+        {{ formatCreditsCompact(stop.credits) }}
+      </li>
+    </ol>
+  </div>
+</template>
--- a/src/platform/cloud/subscription/constants/teamPlanCreditStops.ts
+++ b/src/platform/cloud/subscription/constants/teamPlanCreditStops.ts
@@ -0,0 +1,39 @@
+export interface CreditStop {
+  /** Monthly subscription price in USD (pre-discount). */
+  usd: number
+  /** Monthly credit grant at this stop. */
+  credits: number
+  /**
+   * Yearly-commitment discount applied to `usd`, as a whole-number percent.
+   * Threshold-based per the pricing decision (Slack — Alex Tov, 2026-05-08):
+   * yearly tiers are 0 / 5 / 10 / 15 / 20% with nothing in between (monthly is
+   * halved, but still being iterated). Only the $700 → 10% tier is
+   * design-confirmed (DES-197 shows "Save 10% ($70)"); the rest follow the
+   * agreed 0/5/10/15/20 sequence and should be re-confirmed with design/BE.
+   */
+  discountPercentYearly: number
+}
+
+/**
+ * Team-plan credit-subscription slider stops.
+ *
+ * Hardcoded per Figma DES-197 (Updates to PricingTable dialog): the team-plan
+ * credit slider snaps to exactly these 5 fixed breakpoints — the user cannot
+ * select a value in between. The `credits` figures equal `usdToCredits(usd)` at
+ * the current rate (`CREDITS_PER_USD = 211`); a unit test guards against rate
+ * drift silently changing the designed values.
+ *
+ * TODO(FE-934): once the backend slider contract lands, these stops (and their
+ * discount tiers) will come from `GET /api/billing/plans` instead of being
+ * hardcoded here.
+ */
+export const TEAM_PLAN_CREDIT_STOPS: readonly CreditStop[] = [
+  { usd: 200, credits: 42_200, discountPercentYearly: 0 },
+  { usd: 400, credits: 84_400, discountPercentYearly: 5 },
+  { usd: 700, credits: 147_700, discountPercentYearly: 10 },
+  { usd: 1_400, credits: 295_400, discountPercentYearly: 15 },
+  { usd: 2_500, credits: 527_500, discountPercentYearly: 20 }
+] as const
+
+/** Default stop per DES-197: index 2 = $700 / 147,700 credits. */
+export const DEFAULT_TEAM_PLAN_STOP_INDEX = 2
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.test.ts
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.test.ts
@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
+import { fromPartial } from '@total-typescript/shoehorn'
+
+vi.mock('@/stores/widgetStore', () => ({
+  useWidgetStore: () => ({ inputIsWidget: () => true })
+}))
+
+// Serializes the nodeData prop so tests can assert on the data contract
+// LGraphNodePreview hands to NodeWidgets. How that data renders is covered
+// by NodeWidgets.test.ts and browser_tests/tests/sidebar/modelLibrary.spec.ts.
+const NodeWidgetsProbe = {
+  props: ['nodeData'],
+  template: '<div data-testid="node-data">{{ JSON.stringify(nodeData) }}</div>'
+}
+
+interface ProbedWidget {
+  name: string
+  options?: { values?: string[] }
+}
+
+const nodeDef = fromPartial<ComfyNodeDefV2>({
+  name: 'CheckpointLoaderSimple',
+  display_name: 'Load Checkpoint',
+  inputs: {
+    ckpt_name: { type: 'COMBO', options: ['a.safetensors', 'b.safetensors'] }
+  },
+  outputs: []
+})
+
+function renderedComboWidget(
+  props: { widgetValues?: Record<string, string> } = {}
+) {
+  render(LGraphNodePreview, {
+    props: { nodeDef, ...props },
+    global: {
+      stubs: {
+        NodeHeader: true,
+        NodeSlots: true,
+        NodeWidgets: NodeWidgetsProbe
+      }
+    }
+  })
+  const nodeData: { widgets?: ProbedWidget[] } = JSON.parse(
+    screen.getByTestId('node-data').textContent ?? ''
+  )
+  return nodeData.widgets?.find((w) => w.name === 'ckpt_name')
+}
+
+describe('LGraphNodePreview', () => {
+  it('leads the combo options with the provided widget value', () => {
+    const widget = renderedComboWidget({
+      widgetValues: { ckpt_name: 'sd_xl_base_1.0.safetensors' }
+    })
+
+    expect(widget?.options?.values).toEqual([
+      'sd_xl_base_1.0.safetensors',
+      'a.safetensors',
+      'b.safetensors'
+    ])
+  })
+
+  it('keeps the combo options untouched when no value is provided', () => {
+    const widget = renderedComboWidget()
+
+    expect(widget?.options?.values).toEqual(['a.safetensors', 'b.safetensors'])
+  })
+})
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -45,9 +45,14 @@ import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSc
 import { useWidgetStore } from '@/stores/widgetStore'
 import { cn } from '@comfyorg/tailwind-utils'

-const { nodeDef, position = 'absolute' } = defineProps<{
+const {
+  nodeDef,
+  position = 'absolute',
+  widgetValues
+} = defineProps<{
  nodeDef: ComfyNodeDefV2
  position?: 'absolute' | 'relative'
+  widgetValues?: Record<string, string>
 }>()

 const widgetStore = useWidgetStore()
@@ -56,27 +61,32 @@ const widgetStore = useWidgetStore()
 const nodeData = computed<VueNodeData>(() => {
  const widgets = Object.entries(nodeDef.inputs || {})
    .filter(([_, input]) => widgetStore.inputIsWidget(input))
-    .map(([name, input]) => ({
-      nodeId: '-1',
-      name,
-      type: input.widgetType || input.type,
-      value:
-        input.default !== undefined
-          ? input.default
-          : input.type === 'COMBO' &&
-              Array.isArray(input.options) &&
-              input.options.length > 0
-            ? input.options[0]
-            : '',
-      options: {
-        hidden: input.hidden,
-        advanced: input.advanced,
-        values:
-          input.type === 'COMBO' && Array.isArray(input.options)
-            ? input.options
-            : undefined
-      } satisfies IWidgetOptions
-    }))
+    .map(([name, input]) => {
+      const comboValues =
+        input.type === 'COMBO' && Array.isArray(input.options)
+          ? input.options
+          : undefined
+      // Preview nodes have no widget-value store entry, so combo widgets
+      // render their first option; lead with the requested value to show it.
+      const leadValue = widgetValues?.[name]
+      return {
+        nodeId: '-1',
+        name,
+        type: input.widgetType || input.type,
+        value:
+          input.default !== undefined
+            ? input.default
+            : (comboValues?.[0] ?? ''),
+        options: {
+          hidden: input.hidden,
+          advanced: input.advanced,
+          values:
+            leadValue && comboValues
+              ? [leadValue, ...comboValues.filter((o) => o !== leadValue)]
+              : comboValues
+        } satisfies IWidgetOptions
+      }
+    })

  const inputs: INodeInputSlot[] = Object.entries(nodeDef.inputs || {})
    .filter(([_, input]) => !widgetStore.inputIsWidget(input))
Author	SHA1	Message	Date
pythongosssss	307e8a0d04	fix tests	2026-06-10 12:34:13 -07:00
pythongosssss	e2c9550664	refactor to use useMouse + rAF sampling for the drag ghost - replace pointer tracking with once per frame transform	2026-06-10 09:02:49 -07:00
pythongosssss	a87e107b01	remove double pointermove	2026-06-10 08:19:14 -07:00
pythongosssss	c9f1cc42ad	remove unnecessary drag listener	2026-06-10 07:47:30 -07:00
pythongosssss	6cc1f20bd4	feat: show node preview when adding models from dialog & sidebar - split createModelNodeFromAsset into resolveModelNodeFromAsset + startModelNodeDragFromAsset - move NodeDragPreview from the node library tab to GraphCanvas; drag listeners attach on startDrag instead of tab mount - useNodeDragToCanvas: options-object startDrag, single previewPosition export, widget values applied on placement, toast + log on add failure - track last pointer position passively so the ghost appears at the arming click without waiting for mouse movement - LGraphNodePreview: accept widgetValues and lead combo options with the value so the ghost shows the model filename - e2e: cover sidebar click-to-place and asset browser "Use" flows	2026-06-10 06:04:16 -07:00
jaeone94	1b14f4df8a	Simplify missing node pack error presentation (#12735 ) ## Summary Simplify the Missing Node Packs error card so it follows the new error-tab item-row direction, with clearer pack rows, predictable locate behavior, and focused E2E coverage. This is the third PR in the staged error-tab simplification plan: 1. Merged: execution/prompt/validation error presentation and catalog grouping in #12683. 2. Merged: missing media presentation simplification in #12705. 3. This PR: missing node pack presentation simplification. 4. Planned next: swap-node presentation simplification. 5. Planned later: missing model presentation and action-flow simplification. ## Changes - What: Refactors Missing Node Packs rows so pack-level and node-level actions are easier to scan and more consistent with the rest of the refreshed Errors tab. - What: Removes the node-id badge from missing node pack rows, matching the simplified item-row direction. - What: Makes a single-node known pack row directly locatable from the pack label, rather than rendering an extra child row. - What: Keeps multi-node packs collapsed by default, with both the chevron and pack title toggling the child node list. - What: Keeps unknown packs expanded by default, including the single-node unknown-pack case, so users can still see the unresolved node type immediately. - What: Keeps per-node child rows clickable for locate-on-canvas behavior when a pack contains multiple affected nodes. - What: Replaces missing-node-pack action labels with shared `g.install` and `g.search` copy and removes now-unused English locale keys. - What: Adds targeted Playwright coverage for the simplified missing-node-pack card, including unknown-pack default rows, row-label locate behavior, and chevron/title expansion behavior. - Breaking: None. - Dependencies: None. ## Review Focus Please focus on the missing-node-pack row behavior: - Single known pack with one affected node should stay compact and locate the node from the pack label or locate icon. - Known packs with multiple affected nodes should show a count, start collapsed, and expand/collapse from either the chevron or title. - Unknown packs should expose the affected node rows immediately, including when there is only one affected node. - Locate actions should remain attached to the affected node rows, not to the parent pack when there are multiple nodes. - The E2E fixture intentionally uses two missing nodes with the same `cnr_id` and node sizes of `[400, 200]` to follow browser-test asset guidance. ## Validation - `pnpm format:check` - `pnpm lint` - `pnpm typecheck` - `pnpm knip --cache` via pre-push hook - `pnpm test:unit src/components/rightSidePanel/errors/MissingPackGroupRow.test.ts src/components/rightSidePanel/errors/MissingNodeCard.test.ts --run` - `pnpm test:browser:local browser_tests/tests/propertiesPanel/errorsTabMissingNodes.spec.ts --project=chromium` - Pre-commit hook: staged formatting, linting, `pnpm typecheck`, and `pnpm typecheck:browser` ## Screenshots This PR <img width="531" height="598" alt="스크린샷 2026-06-10 오전 1 54 31" src="https://github.com/user-attachments/assets/9c0addeb-92d2-4cef-a4f3-35a87bbad308" /> old (Main) <img width="509" height="807" alt="스크린샷 2026-06-10 오전 1 53 51" src="https://github.com/user-attachments/assets/b8488f73-d8ed-4356-bd4c-fc678ea205f7" />	2026-06-10 09:59:50 +00:00
Dante	ef93b4696c	feat(billing): team-plan CreditSlider component — 5 fixed stops (FE-935) (#12644 ) ## What https://a46f3266.comfy-storybook.pages.dev/?path=/docs/components-creditslider--docs&globals=theme:dark <img width="560" height="288" alt="cs12644_dark" src="https://github.com/user-attachments/assets/c06b5244-d178-4fa5-8bb9-61fd8595fe9b" /> <img width="560" height="288" alt="cs12644_light" src="https://github.com/user-attachments/assets/16626333-43ba-4541-bd11-faaa8513b1e8" /> Adds CreditSlider — the team-plan credit-subscription slider from Figma DES-197 — as a standalone presentational component. B4 standalone slice (FE-935); parent FE-934. ## Why it can ship now (no backend dependency) The slider's 5 stops are locked in DES-197, so this component is built and reviewable independently of the (still-TBD) backend slider contract. Wiring it into the pricing table is deferred to FE-934. ## How it works - 5 fixed stops — 200 / 400 / 700 / 1,400 / 2,500 USD ↔ 42,200 / 84,400 / 147,700 / 295,400 / 527,500 credits; default $700. - Snap-to-stop is guaranteed by driving the shared `src/components/ui/slider/Slider.vue` (reka-ui) in index space (`:min="0" :max="4" :step="1"`) — the thumb can only land on the 5 stops, with free keyboard-arrow support + ARIA from reka-ui. - `v-model` carries the selected USD value; a `change` event also emits `{ index, usd, credits }` for the future pricing-table wiring. - Thresholds live in a typed constant `teamPlanCreditStops.ts` (sibling to `tierPricing.ts`), hardcoded per DES-197 with a `TODO(FE-934)` to source from `GET /api/billing/plans` once the BE contract lands. The credit figures equal `usdToCredits(usd)` (rate 211); a test guards against rate drift. ## Files - `src/platform/cloud/subscription/components/CreditSlider.vue` (+ `CreditSlider.stories.ts`, `CreditSlider.test.ts`) - `src/platform/cloud/subscription/constants/teamPlanCreditStops.ts` ## Verification - `vue-tsc --noEmit`: clean. - `oxlint --type-aware`: 0 errors / 0 warnings. - `vitest run`: 11/11 pass — default stop, ArrowRight/ArrowLeft snap to the adjacent stop (never in between), `change` payload, disabled state, BE-sourced stops override, empty `stops` renders nothing, all 5 labels render, and the credit-rate-drift guard. ## Not in scope - Wiring into `PricingTableWorkspace` / the team-plan card (FE-934, blocked on the BE slider contract). - The marketing caption and card layout around the slider (parent component's concern). Design source: Figma DES-197 (Team Plan / Workspaces). --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-10 09:05:34 +00:00
Alexis Rolland	24c512d144	Bumping search ranks (#12750 ) ## Summary Bumping the ranking of native nodes to improve their discoverability ## Changes - What: Updated ranking of native nodes in `public/assets/sorted-custom-node-map.json`	2026-06-10 07:22:10 +00:00