fix: node replacement fails after execution and modal sync

- Detect missing nodes by unregistered type instead of has_errors flag, which gets cleared by clearAllNodeErrorFlags during execution - Sync modal replace action with executionErrorStore so Errors Tab updates immediately when nodes are replaced from the dialog
fix: ensure node replacement data loads before workflow processing
2026-03-15 18:07:35 +00:00 · 2026-02-27 10:37:47 +09:00 · 2026-02-27 00:14:43 +09:00 · 2026-02-26 23:05:12 +09:00 · 2026-02-26 22:03:42 +09:00 · 2026-02-26 21:53:00 +09:00
30 changed files with 438 additions and 1063 deletions
--- a/src/components/dialog/content/MissingNodesContent.vue
+++ b/src/components/dialog/content/MissingNodesContent.vue
@@ -234,6 +234,7 @@ import { isCloud } from '@/platform/distribution/types'
 import type { NodeReplacement } from '@/platform/nodeReplacement/types'
 import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { cn } from '@/utils/tailwindUtil'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
@@ -245,6 +246,7 @@ const { missingNodeTypes } = defineProps<{
 const { missingCoreNodes } = useMissingNodes()
 const { replaceNodesInPlace } = useNodeReplacement()
 const dialogStore = useDialogStore()
+const executionErrorStore = useExecutionErrorStore()

 interface ProcessedNode {
  label: string
@@ -339,6 +341,11 @@ function handleReplaceSelected() {
  replacedTypes.value = nextReplaced
  selectedTypes.value = nextSelected

+  // Sync with execution error store so the Errors Tab updates immediately
+  if (result.length > 0) {
+    executionErrorStore.removeMissingNodesByType(result)
+  }
+
  // Auto-close when all replaceable nodes replaced and no non-replaceable remain
  const allReplaced = replaceableNodes.value.every((n) =>
    nextReplaced.has(n.label)
--- a/src/components/range/RangeEditor.test.ts
+++ b/src/components/range/RangeEditor.test.ts
@@ -1,125 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import RangeEditor from './RangeEditor.vue'
-
-const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
-
-function mountEditor(props: InstanceType<typeof RangeEditor>['$props']) {
-  return mount(RangeEditor, {
-    props,
-    global: { plugins: [i18n] }
-  })
-}
-
-describe('RangeEditor', () => {
-  it('renders with min and max handles', () => {
-    const wrapper = mountEditor({ modelValue: { min: 0.2, max: 0.8 } })
-
-    expect(wrapper.find('svg').exists()).toBe(true)
-    expect(wrapper.find('[data-testid="handle-min"]').exists()).toBe(true)
-    expect(wrapper.find('[data-testid="handle-max"]').exists()).toBe(true)
-  })
-
-  it('highlights selected range in plain mode', () => {
-    const wrapper = mountEditor({ modelValue: { min: 0.2, max: 0.8 } })
-
-    const highlight = wrapper.find('[data-testid="range-highlight"]')
-    expect(highlight.attributes('x')).toBe('0.2')
-    expect(highlight.attributes('width')).toBe('0.6000000000000001')
-  })
-
-  it('dims area outside the range in histogram mode', () => {
-    const histogram = new Uint32Array(256)
-    for (let i = 0; i < 256; i++)
-      histogram[i] = Math.floor(50 + 50 * Math.sin(i / 20))
-
-    const wrapper = mountEditor({
-      modelValue: { min: 0.2, max: 0.8 },
-      display: 'histogram',
-      histogram
-    })
-
-    const left = wrapper.find('[data-testid="range-dim-left"]')
-    const right = wrapper.find('[data-testid="range-dim-right"]')
-    expect(left.attributes('width')).toBe('0.2')
-    expect(right.attributes('x')).toBe('0.8')
-  })
-
-  it('hides midpoint handle by default', () => {
-    const wrapper = mountEditor({
-      modelValue: { min: 0, max: 1, midpoint: 0.5 }
-    })
-
-    expect(wrapper.find('[data-testid="handle-midpoint"]').exists()).toBe(false)
-  })
-
-  it('shows midpoint handle when showMidpoint is true', () => {
-    const wrapper = mountEditor({
-      modelValue: { min: 0, max: 1, midpoint: 0.5 },
-      showMidpoint: true
-    })
-
-    expect(wrapper.find('[data-testid="handle-midpoint"]').exists()).toBe(true)
-  })
-
-  it('renders gradient background when display is gradient', () => {
-    const wrapper = mountEditor({
-      modelValue: { min: 0, max: 1 },
-      display: 'gradient',
-      gradientStops: [
-        { offset: 0, color: [0, 0, 0] as const },
-        { offset: 1, color: [255, 255, 255] as const }
-      ]
-    })
-
-    expect(wrapper.find('[data-testid="gradient-bg"]').exists()).toBe(true)
-    expect(wrapper.find('linearGradient').exists()).toBe(true)
-  })
-
-  it('renders histogram path when display is histogram with data', () => {
-    const histogram = new Uint32Array(256)
-    for (let i = 0; i < 256; i++)
-      histogram[i] = Math.floor(50 + 50 * Math.sin(i / 20))
-
-    const wrapper = mountEditor({
-      modelValue: { min: 0, max: 1 },
-      display: 'histogram',
-      histogram
-    })
-
-    expect(wrapper.find('[data-testid="histogram-path"]').exists()).toBe(true)
-  })
-
-  it('renders inputs for min and max', () => {
-    const wrapper = mountEditor({ modelValue: { min: 0.2, max: 0.8 } })
-
-    const inputs = wrapper.findAll('input')
-    expect(inputs).toHaveLength(2)
-  })
-
-  it('renders midpoint input when showMidpoint is true', () => {
-    const wrapper = mountEditor({
-      modelValue: { min: 0, max: 1, midpoint: 0.5 },
-      showMidpoint: true
-    })
-
-    const inputs = wrapper.findAll('input')
-    expect(inputs).toHaveLength(3)
-  })
-
-  it('normalizes handle positions with custom value range', () => {
-    const wrapper = mountEditor({
-      modelValue: { min: 64, max: 192 },
-      valueMin: 0,
-      valueMax: 255
-    })
-
-    const minHandle = wrapper.find('[data-testid="handle-min"]')
-    const maxHandle = wrapper.find('[data-testid="handle-max"]')
-    // 64/255 ≈ 25.1%, 192/255 ≈ 75.3%
-    expect(minHandle.attributes('style')).toContain('left: 25.0')
-    expect(maxHandle.attributes('style')).toContain('left: 75.')
-  })
-})
--- a/src/components/range/RangeEditor.vue
+++ b/src/components/range/RangeEditor.vue
@@ -1,283 +0,0 @@
-<template>
-  <div>
-    <div
-      ref="trackRef"
-      class="relative select-none"
-      @pointerdown.stop="handleTrackPointerDown"
-      @contextmenu.prevent.stop
-    >
-      <!-- Track -->
-      <svg
-        viewBox="0 0 1 1"
-        preserveAspectRatio="none"
-        :class="
-          cn(
-            'block w-full rounded-sm bg-node-component-surface',
-            display === 'histogram' ? 'aspect-[3/2]' : 'h-8'
-          )
-        "
-      >
-        <defs v-if="display === 'gradient'">
-          <linearGradient :id="gradientId" x1="0" y1="0" x2="1" y2="0">
-            <stop
-              v-for="(stop, i) in computedStops"
-              :key="i"
-              :offset="stop.offset"
-              :stop-color="`rgb(${stop.color[0]},${stop.color[1]},${stop.color[2]})`"
-            />
-          </linearGradient>
-        </defs>
-
-        <rect
-          v-if="display === 'gradient'"
-          data-testid="gradient-bg"
-          x="0"
-          y="0"
-          width="1"
-          height="1"
-          :fill="`url(#${gradientId})`"
-        />
-
-        <path
-          v-if="display === 'histogram' && histogramPath"
-          data-testid="histogram-path"
-          :d="histogramPath"
-          fill="currentColor"
-          fill-opacity="0.3"
-        />
-
-        <rect
-          v-if="display === 'plain'"
-          data-testid="range-highlight"
-          :x="minNorm"
-          y="0"
-          :width="Math.max(0, maxNorm - minNorm)"
-          height="1"
-          fill="white"
-          fill-opacity="0.15"
-        />
-        <template v-if="display === 'histogram'">
-          <rect
-            v-if="minNorm > 0"
-            data-testid="range-dim-left"
-            x="0"
-            y="0"
-            :width="minNorm"
-            height="1"
-            fill="black"
-            fill-opacity="0.5"
-          />
-          <rect
-            v-if="maxNorm < 1"
-            data-testid="range-dim-right"
-            :x="maxNorm"
-            y="0"
-            :width="1 - maxNorm"
-            height="1"
-            fill="black"
-            fill-opacity="0.5"
-          />
-        </template>
-      </svg>
-
-      <!-- Min handle -->
-      <div
-        data-testid="handle-min"
-        class="absolute -translate-x-1/2 cursor-grab"
-        :style="{ left: `${minNorm * 100}%`, bottom: '-10px' }"
-        @pointerdown.stop="startDrag('min', $event)"
-      >
-        <svg width="12" height="10" viewBox="0 0 12 10">
-          <polygon
-            points="6,0 0,10 12,10"
-            fill="#333"
-            stroke="#aaa"
-            stroke-width="0.5"
-          />
-        </svg>
-      </div>
-
-      <!-- Midpoint handle -->
-      <div
-        v-if="showMidpoint && modelValue.midpoint !== undefined"
-        data-testid="handle-midpoint"
-        class="absolute -translate-x-1/2 cursor-grab"
-        :style="{ left: `${midpointPercent}%`, bottom: '-10px' }"
-        @pointerdown.stop="startDrag('midpoint', $event)"
-      >
-        <svg width="12" height="10" viewBox="0 0 12 10">
-          <polygon
-            points="6,0 0,10 12,10"
-            fill="#888"
-            stroke="#ccc"
-            stroke-width="0.5"
-          />
-        </svg>
-      </div>
-
-      <!-- Max handle -->
-      <div
-        data-testid="handle-max"
-        class="absolute -translate-x-1/2 cursor-grab"
-        :style="{ left: `${maxNorm * 100}%`, bottom: '-10px' }"
-        @pointerdown.stop="startDrag('max', $event)"
-      >
-        <svg width="12" height="10" viewBox="0 0 12 10">
-          <polygon
-            points="6,0 0,10 12,10"
-            fill="white"
-            stroke="#555"
-            stroke-width="0.5"
-          />
-        </svg>
-      </div>
-    </div>
-
-    <!-- Value inputs -->
-    <div class="mt-3 flex items-center justify-between" @pointerdown.stop>
-      <ScrubableNumberInput
-        v-model="minValue"
-        :display-value="formatValue(minValue)"
-        :min="valueMin"
-        :max="valueMax"
-        :step="step"
-        hide-buttons
-        class="w-16"
-      />
-      <ScrubableNumberInput
-        v-if="showMidpoint && modelValue.midpoint !== undefined"
-        v-model="midpointValue"
-        :display-value="midpointValue.toFixed(2)"
-        :min="midpointScale === 'gamma' ? 0.01 : 0"
-        :max="midpointScale === 'gamma' ? 9.99 : 1"
-        :step="0.01"
-        hide-buttons
-        class="w-16"
-      />
-      <ScrubableNumberInput
-        v-model="maxValue"
-        :display-value="formatValue(maxValue)"
-        :min="valueMin"
-        :max="valueMax"
-        :step="step"
-        hide-buttons
-        class="w-16"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, toRef, useId, useTemplateRef } from 'vue'
-
-import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
-import { cn } from '@/utils/tailwindUtil'
-import { histogramToPath } from '@/components/curve/curveUtils'
-import { useRangeEditor } from '@/composables/useRangeEditor'
-import type { ColorStop } from '@/lib/litegraph/src/interfaces'
-import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
-
-import {
-  clamp,
-  clamp01,
-  gammaToPosition,
-  normalize,
-  positionToGamma
-} from './rangeUtils'
-
-const {
-  display = 'plain',
-  gradientStops,
-  showMidpoint = false,
-  midpointScale = 'linear',
-  histogram,
-  valueMin = 0,
-  valueMax = 1
-} = defineProps<{
-  display?: 'plain' | 'gradient' | 'histogram'
-  gradientStops?: ColorStop[]
-  showMidpoint?: boolean
-  midpointScale?: 'linear' | 'gamma'
-  histogram?: Uint32Array | null
-  valueMin?: number
-  valueMax?: number
-}>()
-
-const modelValue = defineModel<RangeValue>({ required: true })
-
-const trackRef = useTemplateRef<HTMLDivElement>('trackRef')
-const gradientId = useId()
-
-const { handleTrackPointerDown, startDrag } = useRangeEditor({
-  trackRef,
-  modelValue,
-  valueMin: toRef(() => valueMin),
-  valueMax: toRef(() => valueMax)
-})
-
-const isIntegerRange = computed(() => valueMax - valueMin >= 2)
-const step = computed(() => (isIntegerRange.value ? 1 : 0.01))
-
-function formatValue(v: number): string {
-  return isIntegerRange.value ? Math.round(v).toString() : v.toFixed(2)
-}
-
-/** Normalize an actual value to 0-1 for SVG positioning */
-const minNorm = computed(() =>
-  normalize(modelValue.value.min, valueMin, valueMax)
-)
-const maxNorm = computed(() =>
-  normalize(modelValue.value.max, valueMin, valueMax)
-)
-
-const computedStops = computed(
-  () =>
-    gradientStops ?? [
-      { offset: 0, color: [0, 0, 0] as const },
-      { offset: 1, color: [255, 255, 255] as const }
-    ]
-)
-
-const midpointPercent = computed(() => {
-  const { min, max, midpoint } = modelValue.value
-  if (midpoint === undefined) return 0
-  const midAbs = min + midpoint * (max - min)
-  return normalize(midAbs, valueMin, valueMax) * 100
-})
-
-const minValue = computed({
-  get: () => modelValue.value.min,
-  set: (min) => {
-    modelValue.value = {
-      ...modelValue.value,
-      min: Math.min(clamp(min, valueMin, valueMax), modelValue.value.max)
-    }
-  }
-})
-
-const maxValue = computed({
-  get: () => modelValue.value.max,
-  set: (max) => {
-    modelValue.value = {
-      ...modelValue.value,
-      max: Math.max(clamp(max, valueMin, valueMax), modelValue.value.min)
-    }
-  }
-})
-
-const midpointValue = computed({
-  get: () => {
-    const pos = modelValue.value.midpoint ?? 0.5
-    return midpointScale === 'gamma' ? positionToGamma(pos) : pos
-  },
-  set: (val) => {
-    const position =
-      midpointScale === 'gamma' ? clamp01(gammaToPosition(val)) : clamp01(val)
-    modelValue.value = { ...modelValue.value, midpoint: position }
-  }
-})
-
-const histogramPath = computed(() =>
-  histogram ? histogramToPath(histogram) : ''
-)
-</script>
--- a/src/components/range/WidgetRange.vue
+++ b/src/components/range/WidgetRange.vue
@@ -1,30 +0,0 @@
-<template>
-  <RangeEditor
-    v-model="modelValue"
-    :display="widget?.options?.display"
-    :gradient-stops="widget?.options?.gradient_stops"
-    :show-midpoint="widget?.options?.show_midpoint"
-    :midpoint-scale="widget?.options?.midpoint_scale"
-    :histogram="widget?.options?.histogram"
-    :value-min="widget?.options?.value_min"
-    :value-max="widget?.options?.value_max"
-  />
-</template>
-
-<script setup lang="ts">
-import type {
-  IWidgetRangeOptions,
-  RangeValue
-} from '@/lib/litegraph/src/types/widgets'
-import type { SimplifiedWidget } from '@/types/simplifiedWidget'
-
-import RangeEditor from './RangeEditor.vue'
-
-defineProps<{
-  widget?: SimplifiedWidget<RangeValue, IWidgetRangeOptions>
-}>()
-
-const modelValue = defineModel<RangeValue>({
-  default: () => ({ min: 0, max: 1 })
-})
-</script>
--- a/src/components/range/rangeUtils.test.ts
+++ b/src/components/range/rangeUtils.test.ts
@@ -1,131 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  clamp,
-  clamp01,
-  constrainRange,
-  denormalize,
-  formatMidpointLabel,
-  gammaToPosition,
-  normalize,
-  positionToGamma
-} from './rangeUtils'
-
-describe('clamp', () => {
-  it('clamps to arbitrary range', () => {
-    expect(clamp(128, 0, 255)).toBe(128)
-    expect(clamp(-10, 0, 255)).toBe(0)
-    expect(clamp(300, 0, 255)).toBe(255)
-  })
-})
-
-describe('normalize', () => {
-  it('normalizes value to 0-1', () => {
-    expect(normalize(128, 0, 256)).toBe(0.5)
-    expect(normalize(0, 0, 255)).toBe(0)
-    expect(normalize(255, 0, 255)).toBe(1)
-  })
-
-  it('returns 0 when min equals max', () => {
-    expect(normalize(5, 5, 5)).toBe(0)
-  })
-})
-
-describe('denormalize', () => {
-  it('converts normalized value back to range', () => {
-    expect(denormalize(0.5, 0, 256)).toBe(128)
-    expect(denormalize(0, 0, 255)).toBe(0)
-    expect(denormalize(1, 0, 255)).toBe(255)
-  })
-
-  it('round-trips with normalize', () => {
-    expect(denormalize(normalize(100, 0, 255), 0, 255)).toBeCloseTo(100)
-  })
-})
-
-describe('clamp01', () => {
-  it('returns value within bounds unchanged', () => {
-    expect(clamp01(0.5)).toBe(0.5)
-  })
-
-  it('clamps values below 0', () => {
-    expect(clamp01(-0.5)).toBe(0)
-  })
-
-  it('clamps values above 1', () => {
-    expect(clamp01(1.5)).toBe(1)
-  })
-
-  it('returns 0 for 0', () => {
-    expect(clamp01(0)).toBe(0)
-  })
-
-  it('returns 1 for 1', () => {
-    expect(clamp01(1)).toBe(1)
-  })
-})
-
-describe('positionToGamma', () => {
-  it('converts 0.5 to gamma 1.0', () => {
-    expect(positionToGamma(0.5)).toBeCloseTo(1.0)
-  })
-
-  it('converts 0.25 to gamma 2.0', () => {
-    expect(positionToGamma(0.25)).toBeCloseTo(2.0)
-  })
-})
-
-describe('gammaToPosition', () => {
-  it('converts gamma 1.0 to position 0.5', () => {
-    expect(gammaToPosition(1.0)).toBeCloseTo(0.5)
-  })
-
-  it('converts gamma 2.0 to position 0.25', () => {
-    expect(gammaToPosition(2.0)).toBeCloseTo(0.25)
-  })
-
-  it('round-trips with positionToGamma', () => {
-    for (const pos of [0.1, 0.3, 0.5, 0.7, 0.9]) {
-      expect(gammaToPosition(positionToGamma(pos))).toBeCloseTo(pos)
-    }
-  })
-})
-
-describe('formatMidpointLabel', () => {
-  it('formats linear scale as decimal', () => {
-    expect(formatMidpointLabel(0.5, 'linear')).toBe('0.50')
-  })
-
-  it('formats gamma scale as gamma value', () => {
-    expect(formatMidpointLabel(0.5, 'gamma')).toBe('1.00')
-  })
-})
-
-describe('constrainRange', () => {
-  it('passes through valid range unchanged', () => {
-    const result = constrainRange({ min: 0.2, max: 0.8 })
-    expect(result).toEqual({ min: 0.2, max: 0.8, midpoint: undefined })
-  })
-
-  it('clamps values to [0, 1]', () => {
-    const result = constrainRange({ min: -0.5, max: 1.5 })
-    expect(result.min).toBe(0)
-    expect(result.max).toBe(1)
-  })
-
-  it('enforces min <= max', () => {
-    const result = constrainRange({ min: 0.8, max: 0.3 })
-    expect(result.min).toBe(0.8)
-    expect(result.max).toBe(0.8)
-  })
-
-  it('preserves midpoint when present', () => {
-    const result = constrainRange({ min: 0.2, max: 0.8, midpoint: 0.5 })
-    expect(result.midpoint).toBe(0.5)
-  })
-
-  it('clamps midpoint to [0, 1]', () => {
-    const result = constrainRange({ min: 0.2, max: 0.8, midpoint: 1.5 })
-    expect(result.midpoint).toBe(1)
-  })
-})
--- a/src/components/range/rangeUtils.ts
+++ b/src/components/range/rangeUtils.ts
@@ -1,48 +0,0 @@
-import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
-
-export function clamp(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(max, value))
-}
-
-export function clamp01(value: number): number {
-  return clamp(value, 0, 1)
-}
-
-export function normalize(value: number, min: number, max: number): number {
-  return max === min ? 0 : (value - min) / (max - min)
-}
-
-export function denormalize(
-  normalized: number,
-  min: number,
-  max: number
-): number {
-  return min + normalized * (max - min)
-}
-
-export function positionToGamma(position: number): number {
-  const clamped = Math.max(0.001, Math.min(0.999, position))
-  return -Math.log2(clamped)
-}
-
-export function gammaToPosition(gamma: number): number {
-  return Math.pow(2, -gamma)
-}
-
-export function formatMidpointLabel(
-  position: number,
-  scale: 'linear' | 'gamma'
-): string {
-  if (scale === 'gamma') {
-    return positionToGamma(position).toFixed(2)
-  }
-  return position.toFixed(2)
-}
-
-export function constrainRange(value: RangeValue): RangeValue {
-  const min = clamp01(value.min)
-  const max = clamp01(Math.max(min, value.max))
-  const midpoint =
-    value.midpoint !== undefined ? clamp01(value.midpoint) : undefined
-  return { min, max, midpoint }
-}
--- a/src/components/rightSidePanel/errors/SwapNodeGroupRow.vue
+++ b/src/components/rightSidePanel/errors/SwapNodeGroupRow.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="flex flex-col w-full mb-4">
+    <!-- Type header row: type name + chevron -->
+    <div class="flex h-8 items-center w-full">
+      <p
+        class="flex-1 min-w-0 text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap text-foreground"
+      >
+        {{ `${group.type} (${group.nodeTypes.length})` }}
+      </p>
+
+      <Button
+        variant="textonly"
+        size="icon-sm"
+        :class="
+          cn(
+            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
+            { 'rotate-180': expanded }
+          )
+        "
+        :aria-label="
+          expanded
+            ? t('rightSidePanel.missingNodePacks.collapse', 'Collapse')
+            : t('rightSidePanel.missingNodePacks.expand', 'Expand')
+        "
+        @click="toggleExpand"
+      >
+        <i
+          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
+        />
+      </Button>
+    </div>
+
+    <!-- Sub-labels: individual node instances, each with their own Locate button -->
+    <TransitionCollapse>
+      <div
+        v-if="expanded"
+        class="flex flex-col gap-0.5 pl-2 mb-2 overflow-hidden"
+      >
+        <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
+            "
+            class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-xs font-mono text-muted-foreground font-bold mr-1"
+          >
+            #{{ nodeType.nodeId }}
+          </span>
+          <p class="flex-1 min-w-0 text-xs text-muted-foreground truncate">
+            {{ getLabel(nodeType) }}
+          </p>
+          <Button
+            v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
+            variant="textonly"
+            size="icon-sm"
+            class="size-6 text-muted-foreground hover:text-base-foreground shrink-0 mr-1"
+            :aria-label="t('rightSidePanel.locateNode', 'Locate Node')"
+            @click="handleLocateNode(nodeType)"
+          >
+            <i class="icon-[lucide--locate] size-3" />
+          </Button>
+        </div>
+      </div>
+    </TransitionCollapse>
+
+    <!-- Description rows: what it is replaced by -->
+    <div class="flex flex-col text-[13px] mb-2 mt-1 px-1 gap-0.5">
+      <span class="text-muted-foreground">{{
+        t('nodeReplacement.willBeReplacedBy', 'This node will be replaced by:')
+      }}</span>
+      <span class="font-bold text-foreground">{{
+        group.newNodeId ?? t('nodeReplacement.unknownNode', 'Unknown')
+      }}</span>
+    </div>
+
+    <!-- Replace Action Button -->
+    <div class="flex items-start w-full pt-1 pb-1">
+      <Button
+        variant="secondary"
+        size="md"
+        class="flex flex-1 w-full"
+        @click="handleReplaceNode"
+      >
+        <i class="icon-[lucide--repeat] size-4 text-foreground shrink-0 mr-1" />
+        <span class="text-sm text-foreground truncate min-w-0">
+          {{ t('nodeReplacement.replaceNode', 'Replace Node') }}
+        </span>
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { cn } from '@/utils/tailwindUtil'
+import { useI18n } from 'vue-i18n'
+import Button from '@/components/ui/button/Button.vue'
+import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
+import type { MissingNodeType } from '@/types/comfy'
+import type { SwapNodeGroup } from './useErrorGroups'
+import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+
+const props = defineProps<{
+  group: SwapNodeGroup
+  showNodeIdBadge: boolean
+}>()
+
+const emit = defineEmits<{
+  'locate-node': [nodeId: string]
+}>()
+
+const { t } = useI18n()
+const { replaceNodesInPlace } = useNodeReplacement()
+const executionErrorStore = useExecutionErrorStore()
+
+const expanded = ref(false)
+
+function toggleExpand() {
+  expanded.value = !expanded.value
+}
+
+function getKey(nodeType: MissingNodeType): string {
+  if (typeof nodeType === 'string') return nodeType
+  return nodeType.nodeId != null ? String(nodeType.nodeId) : nodeType.type
+}
+
+function getLabel(nodeType: MissingNodeType): string {
+  return typeof nodeType === 'string' ? nodeType : nodeType.type
+}
+
+function handleLocateNode(nodeType: MissingNodeType) {
+  if (typeof nodeType === 'string') return
+  if (nodeType.nodeId != null) {
+    emit('locate-node', String(nodeType.nodeId))
+  }
+}
+
+function handleReplaceNode() {
+  const replaced = replaceNodesInPlace(props.group.nodeTypes)
+  if (replaced.length > 0) {
+    executionErrorStore.removeMissingNodesByType([props.group.type])
+  }
+}
+</script>
--- a/src/components/rightSidePanel/errors/SwapNodesCard.vue
+++ b/src/components/rightSidePanel/errors/SwapNodesCard.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="px-4 pb-2 mt-2">
+    <!-- Sub-label: guidance message shown above all swap groups -->
+    <p class="m-0 pb-5 text-sm text-muted-foreground leading-relaxed">
+      {{
+        t(
+          'nodeReplacement.swapNodesGuide',
+          'The following nodes can be automatically replaced with compatible alternatives.'
+        )
+      }}
+    </p>
+    <!-- Group Rows -->
+    <SwapNodeGroupRow
+      v-for="group in swapNodeGroups"
+      :key="group.type"
+      :group="group"
+      :show-node-id-badge="showNodeIdBadge"
+      @locate-node="emit('locate-node', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import type { SwapNodeGroup } from './useErrorGroups'
+import SwapNodeGroupRow from './SwapNodeGroupRow.vue'
+
+const { t } = useI18n()
+
+const { swapNodeGroups, showNodeIdBadge } = defineProps<{
+  swapNodeGroups: SwapNodeGroup[]
+  showNodeIdBadge: boolean
+}>()
+
+const emit = defineEmits<{
+  'locate-node': [nodeId: string]
+}>()
+</script>
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -27,7 +27,11 @@
          :key="group.title"
          :collapse="collapseState[group.title] ?? false"
          class="border-b border-interface-stroke"
-          :size="group.type === 'missing_node' ? 'lg' : 'default'"
+          :size="
+            group.type === 'missing_node' || group.type === 'swap_nodes'
+              ? 'lg'
+              : 'default'
+          "
          @update:collapse="collapseState[group.title] = $event"
        >
          <template #label>
@@ -40,7 +44,9 @@
                  {{
                    group.type === 'missing_node'
                      ? `${group.title} (${missingPackGroups.length})`
-                      : group.title
+                      : group.type === 'swap_nodes'
+                        ? `${group.title} (${swapNodeGroups.length})`
+                        : group.title
                  }}
                </span>
                <span
@@ -69,6 +75,21 @@
                    : t('rightSidePanel.missingNodePacks.installAll')
                }}
              </Button>
+              <Button
+                v-else-if="group.type === 'swap_nodes'"
+                v-tooltip.top="
+                  t(
+                    'nodeReplacement.replaceAllWarning',
+                    'Replaces all available nodes in this group.'
+                  )
+                "
+                variant="secondary"
+                size="sm"
+                class="shrink-0 mr-2 h-8 rounded-lg text-sm"
+                @click.stop="handleReplaceAll()"
+              >
+                {{ t('nodeReplacement.replaceAll', 'Replace All') }}
+              </Button>
            </div>
          </template>

@@ -82,8 +103,16 @@
            @open-manager-info="handleOpenManagerInfo"
          />

+          <!-- Swap Nodes -->
+          <SwapNodesCard
+            v-else-if="group.type === 'swap_nodes'"
+            :swap-node-groups="swapNodeGroups"
+            :show-node-id-badge="showNodeIdBadge"
+            @locate-node="handleLocateMissingNode"
+          />
+
          <!-- Execution Errors -->
-          <div v-else class="px-4 space-y-3">
+          <div v-else-if="group.type === 'execution'" class="px-4 space-y-3">
            <ErrorNodeCard
              v-for="card in group.cards"
              :key="card.id"
@@ -150,11 +179,14 @@ import PropertiesAccordionItem from '../layout/PropertiesAccordionItem.vue'
 import FormSearchInput from '@/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue'
 import ErrorNodeCard from './ErrorNodeCard.vue'
 import MissingNodeCard from './MissingNodeCard.vue'
+import SwapNodesCard from './SwapNodesCard.vue'
 import Button from '@/components/ui/button/Button.vue'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useErrorGroups } from './useErrorGroups'
+import { useNodeReplacement } from '@/platform/nodeReplacement/useNodeReplacement'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'

 const { t } = useI18n()
 const { copyToClipboard } = useCopyToClipboard()
@@ -167,6 +199,8 @@ const { shouldShowManagerButtons, shouldShowInstallButton, openManager } =
 const { missingNodePacks } = useMissingNodes()
 const { isInstalling: isInstallingAll, installAllPacks: installAll } =
  usePackInstall(() => missingNodePacks.value)
+const { replaceNodesInPlace } = useNodeReplacement()
+const executionErrorStore = useExecutionErrorStore()

 const searchQuery = ref('')

@@ -183,7 +217,8 @@ const {
  isSingleNodeSelected,
  errorNodeCache,
  missingNodeCache,
-  missingPackGroups
+  missingPackGroups,
+  swapNodeGroups
 } = useErrorGroups(searchQuery, t)

 /**
@@ -229,6 +264,14 @@ function handleOpenManagerInfo(packId: string) {
  }
 }

+function handleReplaceAll() {
+  const allNodeTypes = swapNodeGroups.value.flatMap((g) => g.nodeTypes)
+  const replaced = replaceNodesInPlace(allNodeTypes)
+  if (replaced.length > 0) {
+    executionErrorStore.removeMissingNodesByType(replaced)
+  }
+}
+
 function handleEnterSubgraph(nodeId: string) {
  enterSubgraph(nodeId, errorNodeCache.value)
 }
--- a/src/components/rightSidePanel/errors/types.ts
+++ b/src/components/rightSidePanel/errors/types.ts
@@ -22,3 +22,4 @@ export type ErrorGroup =
      priority: number
    }
  | { type: 'missing_node'; title: string; priority: number }
+  | { type: 'swap_nodes'; title: string; priority: number }
--- a/src/components/rightSidePanel/errors/useErrorGroups.ts
+++ b/src/components/rightSidePanel/errors/useErrorGroups.ts
@@ -42,6 +42,12 @@ export interface MissingPackGroup {
  isResolving: boolean
 }

+export interface SwapNodeGroup {
+  type: string
+  newNodeId: string | undefined
+  nodeTypes: MissingNodeType[]
+}
+
 interface GroupEntry {
  type: 'execution'
  priority: number
@@ -444,6 +450,8 @@ export function useErrorGroups(
    const resolvingKeys = new Set<string | null>()

    for (const nodeType of nodeTypes) {
+      if (typeof nodeType !== 'string' && nodeType.isReplaceable) continue
+
      let packId: string | null

      if (typeof nodeType === 'string') {
@@ -495,18 +503,53 @@ export function useErrorGroups(
      }))
  })

+  const swapNodeGroups = computed<SwapNodeGroup[]>(() => {
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const map = new Map<string, SwapNodeGroup>()
+
+    for (const nodeType of nodeTypes) {
+      if (typeof nodeType === 'string' || !nodeType.isReplaceable) continue
+
+      const typeName = nodeType.type
+      const existing = map.get(typeName)
+      if (existing) {
+        existing.nodeTypes.push(nodeType)
+      } else {
+        map.set(typeName, {
+          type: typeName,
+          newNodeId: nodeType.replacement?.new_node_id,
+          nodeTypes: [nodeType]
+        })
+      }
+    }
+
+    return Array.from(map.values()).sort((a, b) => a.type.localeCompare(b.type))
+  })
+
  /** Builds an ErrorGroup from missingNodesError. Returns [] when none present. */
  function buildMissingNodeGroups(): ErrorGroup[] {
    const error = executionErrorStore.missingNodesError
    if (!error) return []

-    return [
-      {
+    const groups: ErrorGroup[] = []
+
+    if (swapNodeGroups.value.length > 0) {
+      groups.push({
+        type: 'swap_nodes' as const,
+        title: st('nodeReplacement.swapNodesTitle', 'Swap Nodes'),
+        priority: 0
+      })
+    }
+
+    if (missingPackGroups.value.length > 0) {
+      groups.push({
        type: 'missing_node' as const,
        title: error.message,
-        priority: 0
-      }
-    ]
+        priority: 1
+      })
+    }
+
+    return groups.sort((a, b) => a.priority - b.priority)
  }

  const allErrorGroups = computed<ErrorGroup[]>(() => {
@@ -564,6 +607,7 @@ export function useErrorGroups(
    errorNodeCache,
    missingNodeCache,
    groupedErrorMessages,
-    missingPackGroups
+    missingPackGroups,
+    swapNodeGroups
  }
 }
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -14,6 +14,7 @@ import type {
 } from '@/lib/litegraph/src/interfaces'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
@@ -442,6 +443,11 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
      const nodePosition = { x: node.pos[0], y: node.pos[1] }
      const nodeSize = { width: node.size[0], height: node.size[1] }

+      // Skip layout creation if it already exists
+      // (e.g. in-place node replacement where the old node's layout is reused for the new node with the same ID).
+      const existingLayout = layoutStore.getNodeLayoutRef(id).value
+      if (existingLayout) return
+
      // Add node to layout store with final positions
      setSource(LayoutSource.Canvas)
      void createNode(id, {
--- a/src/composables/useMissingNodeScan.ts
+++ b/src/composables/useMissingNodeScan.ts
@@ -0,0 +1,44 @@
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { LGraph } from '@/lib/litegraph/src/litegraph'
+import { useNodeReplacementStore } from '@/platform/nodeReplacement/nodeReplacementStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import type { MissingNodeType } from '@/types/comfy'
+import {
+  collectAllNodes,
+  getExecutionIdByNode
+} from '@/utils/graphTraversalUtil'
+import { getCnrIdFromNode } from '@/workbench/extensions/manager/utils/missingNodeErrorUtil'
+
+/** Scan the live graph for unregistered node types and build a full MissingNodeType list. */
+function scanMissingNodes(rootGraph: LGraph): MissingNodeType[] {
+  const nodeReplacementStore = useNodeReplacementStore()
+  const missingNodeTypes: MissingNodeType[] = []
+
+  const allNodes = collectAllNodes(rootGraph)
+
+  for (const node of allNodes) {
+    const originalType = node.last_serialization?.type ?? node.type ?? 'Unknown'
+
+    if (originalType in LiteGraph.registered_node_types) continue
+
+    const cnrId = getCnrIdFromNode(node)
+    const replacement = nodeReplacementStore.getReplacementFor(originalType)
+    const executionId = getExecutionIdByNode(rootGraph, node)
+
+    missingNodeTypes.push({
+      type: originalType,
+      nodeId: executionId ?? String(node.id),
+      cnrId,
+      isReplaceable: replacement !== null,
+      replacement: replacement ?? undefined
+    })
+  }
+
+  return missingNodeTypes
+}
+
+/** Re-scan the graph for missing nodes and update the error store. */
+export function rescanAndSurfaceMissingNodes(rootGraph: LGraph): void {
+  const types = scanMissingNodes(rootGraph)
+  useExecutionErrorStore().surfaceMissingNodes(types)
+}
--- a/src/composables/useRangeEditor.ts
+++ b/src/composables/useRangeEditor.ts
@@ -1,114 +0,0 @@
-import { onBeforeUnmount, ref } from 'vue'
-import type { Ref } from 'vue'
-
-import { clamp, denormalize, normalize } from '@/components/range/rangeUtils'
-import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
-
-type HandleType = 'min' | 'max' | 'midpoint'
-
-interface UseRangeEditorOptions {
-  trackRef: Ref<HTMLElement | null>
-  modelValue: Ref<RangeValue>
-  valueMin: Ref<number>
-  valueMax: Ref<number>
-}
-
-export function useRangeEditor({
-  trackRef,
-  modelValue,
-  valueMin,
-  valueMax
-}: UseRangeEditorOptions) {
-  const activeHandle = ref<HandleType | null>(null)
-  let cleanupDrag: (() => void) | null = null
-
-  /** Convert pointer event to actual value in [valueMin, valueMax] */
-  function pointerToValue(e: PointerEvent): number {
-    const el = trackRef.value
-    if (!el) return valueMin.value
-    const rect = el.getBoundingClientRect()
-    const normalized = Math.max(
-      0,
-      Math.min(1, (e.clientX - rect.left) / rect.width)
-    )
-    return denormalize(normalized, valueMin.value, valueMax.value)
-  }
-
-  function nearestHandle(value: number): HandleType {
-    const { min, max, midpoint } = modelValue.value
-    const dMin = Math.abs(value - min)
-    const dMax = Math.abs(value - max)
-    let best: HandleType = dMin <= dMax ? 'min' : 'max'
-    const bestDist = Math.min(dMin, dMax)
-    if (midpoint !== undefined) {
-      const midAbs = min + midpoint * (max - min)
-      if (Math.abs(value - midAbs) < bestDist) {
-        best = 'midpoint'
-      }
-    }
-    return best
-  }
-
-  function updateValue(handle: HandleType, value: number) {
-    const current = modelValue.value
-    const clamped = clamp(value, valueMin.value, valueMax.value)
-
-    if (handle === 'min') {
-      modelValue.value = { ...current, min: Math.min(clamped, current.max) }
-    } else if (handle === 'max') {
-      modelValue.value = { ...current, max: Math.max(clamped, current.min) }
-    } else {
-      const range = current.max - current.min
-      const midNorm =
-        range > 0 ? normalize(clamped, current.min, current.max) : 0
-      const midpoint = Math.max(0, Math.min(1, midNorm))
-      modelValue.value = { ...current, midpoint }
-    }
-  }
-
-  function handleTrackPointerDown(e: PointerEvent) {
-    if (e.button !== 0) return
-    startDrag(nearestHandle(pointerToValue(e)), e)
-  }
-
-  function startDrag(handle: HandleType, e: PointerEvent) {
-    if (e.button !== 0) return
-    cleanupDrag?.()
-
-    activeHandle.value = handle
-    const el = trackRef.value
-    if (!el) return
-
-    el.setPointerCapture(e.pointerId)
-
-    const onMove = (ev: PointerEvent) => {
-      if (!activeHandle.value) return
-      updateValue(activeHandle.value, pointerToValue(ev))
-    }
-
-    const endDrag = () => {
-      if (!activeHandle.value) return
-      activeHandle.value = null
-      el.removeEventListener('pointermove', onMove)
-      el.removeEventListener('pointerup', endDrag)
-      el.removeEventListener('lostpointercapture', endDrag)
-      cleanupDrag = null
-    }
-
-    cleanupDrag = endDrag
-
-    el.addEventListener('pointermove', onMove)
-    el.addEventListener('pointerup', endDrag)
-    el.addEventListener('lostpointercapture', endDrag)
-  }
-
-  onBeforeUnmount(() => {
-    cleanupDrag?.()
-  })
-
-  return {
-    activeHandle,
-    handleTrackPointerDown,
-    startDrag
-  }
-}
--- a/src/extensions/core/index.ts
+++ b/src/extensions/core/index.ts
@@ -20,7 +20,6 @@ if (!isCloud) {
 }
 import './noteNode'
 import './painter'
-import './rangeHistogram'
 import './previewAny'
 import './rerouteNode'
 import './saveImageExtraOutput'
--- a/src/extensions/core/rangeHistogram.ts
+++ b/src/extensions/core/rangeHistogram.ts
@@ -1,37 +0,0 @@
-import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import type { RangeValue } from '@/lib/litegraph/src/types/widgets'
-import { useExtensionService } from '@/services/extensionService'
-
-const HISTOGRAM_KEY_PREFIX = 'range_histogram_'
-
-useExtensionService().registerExtension({
-  name: 'Comfy.RangeHistogram',
-
-  async nodeCreated(node: LGraphNode) {
-    const hasRangeWidget = node.widgets?.some((w) => w.type === 'range')
-    if (!hasRangeWidget) return
-
-    const onExecuted = node.onExecuted
-
-    node.onExecuted = function (output: Record<string, unknown>) {
-      onExecuted?.call(this, output)
-
-      for (const widget of node.widgets ?? []) {
-        if (widget.type !== 'range') continue
-
-        const data = output[HISTOGRAM_KEY_PREFIX + widget.name]
-        if (!Array.isArray(data)) continue
-
-        if (widget.options) {
-          ;(widget.options as Record<string, unknown>).histogram =
-            new Uint32Array(data as number[])
-          // Force reactive update: widget.options is not reactive, but
-          // widget.value is (via BaseWidget._state). Re-assigning value
-          // triggers processedWidgets recomputation in NodeWidgets.vue,
-          // which then reads the updated options from the store proxy.
-          widget.value = { ...(widget.value as RangeValue) }
-        }
-      }
-    }
-  }
-})
--- a/src/lib/litegraph/src/types/widgets.ts
+++ b/src/lib/litegraph/src/types/widgets.ts
@@ -139,7 +139,6 @@ export type IWidget =
  | IBoundingBoxWidget
  | ICurveWidget
  | IPainterWidget
-  | IRangeWidget

 export interface IBooleanWidget extends IBaseWidget<boolean, 'toggle'> {
  type: 'toggle'
@@ -342,31 +341,6 @@ export interface IPainterWidget extends IBaseWidget<string, 'painter'> {
  value: string
 }

-export interface RangeValue {
-  min: number
-  max: number
-  midpoint?: number
-}
-
-export interface IWidgetRangeOptions extends IWidgetOptions {
-  display?: 'plain' | 'gradient' | 'histogram'
-  gradient_stops?: ColorStop[]
-  show_midpoint?: boolean
-  midpoint_scale?: 'linear' | 'gamma'
-  value_min?: number
-  value_max?: number
-  histogram?: Uint32Array | null
-}
-
-export interface IRangeWidget extends IBaseWidget<
-  RangeValue,
-  'range',
-  IWidgetRangeOptions
-> {
-  type: 'range'
-  value: RangeValue
-}
-
 /**
 * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
 * Override linkedWidgets[]
--- a/src/lib/litegraph/src/widgets/RangeWidget.ts
+++ b/src/lib/litegraph/src/widgets/RangeWidget.ts
@@ -1,16 +0,0 @@
-import type { IRangeWidget } from '../types/widgets'
-import { BaseWidget } from './BaseWidget'
-import type { DrawWidgetOptions, WidgetEventOptions } from './BaseWidget'
-
-export class RangeWidget
-  extends BaseWidget<IRangeWidget>
-  implements IRangeWidget
-{
-  override type = 'range' as const
-
-  drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void {
-    this.drawVueOnlyWarning(ctx, options, 'Range')
-  }
-
-  onClick(_options: WidgetEventOptions): void {}
-}
--- a/src/lib/litegraph/src/widgets/widgetMap.ts
+++ b/src/lib/litegraph/src/widgets/widgetMap.ts
@@ -22,7 +22,6 @@ import { GalleriaWidget } from './GalleriaWidget'
 import { GradientSliderWidget } from './GradientSliderWidget'
 import { ImageCompareWidget } from './ImageCompareWidget'
 import { PainterWidget } from './PainterWidget'
-import { RangeWidget } from './RangeWidget'
 import { ImageCropWidget } from './ImageCropWidget'
 import { KnobWidget } from './KnobWidget'
 import { LegacyWidget } from './LegacyWidget'
@@ -61,7 +60,6 @@ export type WidgetTypeMap = {
  boundingbox: BoundingBoxWidget
  curve: CurveWidget
  painter: PainterWidget
-  range: RangeWidget
  [key: string]: BaseWidget
 }

@@ -142,8 +140,6 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
      return toClass(CurveWidget, narrowedWidget, node)
    case 'painter':
      return toClass(PainterWidget, narrowedWidget, node)
-    case 'range':
-      return toClass(RangeWidget, narrowedWidget, node)
    default: {
      if (wrapLegacyWidgets) return toClass(LegacyWidget, widget, node)
    }
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -3073,7 +3073,14 @@
    "openNodeManager": "Open Node Manager",
    "skipForNow": "Skip for Now",
    "installMissingNodes": "Install Missing Nodes",
-    "replaceWarning": "This will permanently modify the workflow. Save a copy first if unsure."
+    "replaceWarning": "This will permanently modify the workflow. Save a copy first if unsure.",
+    "swapNodesGuide": "The following nodes can be automatically replaced with compatible alternatives.",
+    "willBeReplacedBy": "This node will be replaced by:",
+    "replaceNode": "Replace Node",
+    "replaceAll": "Replace All",
+    "unknownNode": "Unknown",
+    "replaceAllWarning": "Replaces all available nodes in this group.",
+    "swapNodesTitle": "Swap Nodes"
  },
  "rightSidePanel": {
    "togglePanel": "Toggle properties panel",
--- a/src/platform/nodeReplacement/useNodeReplacement.ts
+++ b/src/platform/nodeReplacement/useNodeReplacement.ts
@@ -229,7 +229,12 @@ export function useNodeReplacement() {
    try {
      const placeholders = collectAllNodes(
        graph,
-        (n) => !!n.has_errors && !!n.last_serialization
+        (n) =>
+          !!n.last_serialization &&
+          !(
+            (n.last_serialization.type ?? n.type ?? '') in
+            LiteGraph.registered_node_types
+          )
      )

      for (const node of placeholders) {
@@ -261,6 +266,10 @@ export function useNodeReplacement() {
            }
        replaceWithMapping(node, newNode, effectiveReplacement, nodeGraph, idx)

+        // Refresh Vue node data — replaceWithMapping bypasses graph.add()
+        // so onNodeAdded must be called explicitly to update VueNodeData.
+        nodeGraph.onNodeAdded?.(newNode)
+
        if (!replacedTypes.includes(match.type)) {
          replacedTypes.push(match.type)
        }
@@ -279,6 +288,19 @@ export function useNodeReplacement() {
          life: 3000
        })
      }
+    } catch (error) {
+      console.error('Failed to replace nodes:', error)
+      if (replacedTypes.length > 0) {
+        graph.updateExecutionOrder()
+        graph.setDirtyCanvas(true, true)
+      }
+      toastStore.add({
+        severity: 'error',
+        summary: t('g.error', 'Error'),
+        detail: t('nodeReplacement.replaceFailed', 'Failed to replace nodes'),
+        life: 5000
+      })
+      return replacedTypes
    } finally {
      changeTracker?.afterChange()
    }
--- a/src/renderer/extensions/vueNodes/widgets/composables/useRangeWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useRangeWidget.ts
@@ -1,37 +0,0 @@
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type {
-  IRangeWidget,
-  IWidgetRangeOptions
-} from '@/lib/litegraph/src/types/widgets'
-import type { RangeInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
-
-export const useRangeWidget = (): ComfyWidgetConstructorV2 => {
-  return (node: LGraphNode, inputSpec): IRangeWidget => {
-    const spec = inputSpec as RangeInputSpec
-    const defaultValue = spec.default ?? { min: 0.0, max: 1.0 }
-
-    const options: IWidgetRangeOptions = {
-      display: spec.display,
-      gradient_stops: spec.gradient_stops,
-      show_midpoint: spec.show_midpoint,
-      midpoint_scale: spec.midpoint_scale,
-      value_min: spec.value_min,
-      value_max: spec.value_max
-    }
-
-    const rawWidget = node.addWidget(
-      'range',
-      spec.name,
-      { ...defaultValue },
-      () => {},
-      options
-    )
-
-    if (rawWidget.type !== 'range') {
-      throw new Error(`Unexpected widget type: ${rawWidget.type}`)
-    }
-
-    return rawWidget as IRangeWidget
-  }
-}
--- a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
+++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts
@@ -63,9 +63,6 @@ const WidgetCurve = defineAsyncComponent(
 const WidgetPainter = defineAsyncComponent(
  () => import('@/components/painter/WidgetPainter.vue')
 )
-const WidgetRange = defineAsyncComponent(
-  () => import('@/components/range/WidgetRange.vue')
-)

 export const FOR_TESTING = {
  WidgetButton,
@@ -200,14 +197,6 @@ const coreWidgetDefinitions: Array<[string, WidgetDefinition]> = [
      aliases: ['PAINTER'],
      essential: false
    }
-  ],
-  [
-    'range',
-    {
-      component: WidgetRange,
-      aliases: ['RANGE'],
-      essential: false
-    }
  ]
 ]

@@ -244,8 +233,7 @@ const EXPANDING_TYPES = [
  'markdown',
  'load3D',
  'curve',
-  'painter',
-  'range'
+  'painter'
 ] as const

 export function shouldExpand(type: string): boolean {
--- a/src/schemas/nodeDef/nodeDefSchemaV2.ts
+++ b/src/schemas/nodeDef/nodeDefSchemaV2.ts
@@ -135,30 +135,6 @@ const zCurveInputSpec = zBaseInputOptions.extend({
  default: z.array(zCurvePoint).optional()
 })

-const zRangeValue = z.object({
-  min: z.number(),
-  max: z.number(),
-  midpoint: z.number().optional()
-})
-
-const zColorStop = z.object({
-  offset: z.number(),
-  color: z.tuple([z.number(), z.number(), z.number()])
-})
-
-const zRangeInputSpec = zBaseInputOptions.extend({
-  type: z.literal('RANGE'),
-  name: z.string(),
-  isOptional: z.boolean().optional(),
-  default: zRangeValue.optional(),
-  display: z.enum(['plain', 'gradient', 'histogram']).optional(),
-  gradient_stops: z.array(zColorStop).optional(),
-  show_midpoint: z.boolean().optional(),
-  midpoint_scale: z.enum(['linear', 'gamma']).optional(),
-  value_min: z.number().optional(),
-  value_max: z.number().optional()
-})
-
 const zCustomInputSpec = zBaseInputOptions.extend({
  type: z.string(),
  name: z.string(),
@@ -180,7 +156,6 @@ const zInputSpec = z.union([
  zGalleriaInputSpec,
  zTextareaInputSpec,
  zCurveInputSpec,
-  zRangeInputSpec,
  zCustomInputSpec
 ])

@@ -226,7 +201,6 @@ export type ChartInputSpec = z.infer<typeof zChartInputSpec>
 export type GalleriaInputSpec = z.infer<typeof zGalleriaInputSpec>
 export type TextareaInputSpec = z.infer<typeof zTextareaInputSpec>
 export type CurveInputSpec = z.infer<typeof zCurveInputSpec>
-export type RangeInputSpec = z.infer<typeof zRangeInputSpec>
 export type CustomInputSpec = z.infer<typeof zCustomInputSpec>

 export type InputSpec = z.infer<typeof zInputSpec>
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -79,12 +79,8 @@ import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import type { ExtensionManager } from '@/types/extensionTypes'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { graphToPrompt } from '@/utils/executionUtil'
-import type { MissingNodeTypeExtraInfo } from '@/workbench/extensions/manager/types/missingNodeErrorTypes'
-import {
-  createMissingNodeTypeFromError,
-  getCnrIdFromNode,
-  getCnrIdFromProperties
-} from '@/workbench/extensions/manager/utils/missingNodeErrorUtil'
+import { getCnrIdFromProperties } from '@/workbench/extensions/manager/utils/missingNodeErrorUtil'
+import { rescanAndSurfaceMissingNodes } from '@/composables/useMissingNodeScan'
 import { anyItemOverlapsRect } from '@/utils/mathUtil'
 import {
  collectAllNodes,
@@ -1190,7 +1186,7 @@ export class ComfyApp {
    const embeddedModels: ModelFile[] = []

    const nodeReplacementStore = useNodeReplacementStore()
-
+    await nodeReplacementStore.load()
    const collectMissingNodesAndModels = (
      nodes: ComfyWorkflowJSON['nodes'],
      pathPrefix: string = '',
@@ -1527,35 +1523,8 @@ export class ComfyApp {
              typeof error.response.error === 'object' &&
              error.response.error?.type === 'missing_node_type'
            ) {
-              const extraInfo = (error.response.error.extra_info ??
-                {}) as MissingNodeTypeExtraInfo
-
-              let graphNode = null
-              if (extraInfo.node_id && this.rootGraph) {
-                graphNode = getNodeByExecutionId(
-                  this.rootGraph,
-                  extraInfo.node_id
-                )
-              }
-
-              const enrichedExtraInfo: MissingNodeTypeExtraInfo = {
-                ...extraInfo,
-                class_type: extraInfo.class_type ?? graphNode?.type,
-                node_title: extraInfo.node_title ?? graphNode?.title
-              }
-
-              const missingNodeType =
-                createMissingNodeTypeFromError(enrichedExtraInfo)
-
-              if (
-                graphNode &&
-                typeof missingNodeType !== 'string' &&
-                !missingNodeType.cnrId
-              ) {
-                missingNodeType.cnrId = getCnrIdFromNode(graphNode)
-              }
-
-              this.showMissingNodesError([missingNodeType])
+              // Re-scan the full graph instead of using the server's single-node response.
+              rescanAndSurfaceMissingNodes(this.rootGraph)
            } else if (
              !useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab') ||
              !(error instanceof PromptExecutionError)
--- a/src/scripts/widgets.ts
+++ b/src/scripts/widgets.ts
@@ -20,7 +20,6 @@ import { useImageUploadWidget } from '@/renderer/extensions/vueNodes/widgets/com
 import { useIntWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useIntWidget'
 import { useMarkdownWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useMarkdownWidget'
 import { usePainterWidget } from '@/renderer/extensions/vueNodes/widgets/composables/usePainterWidget'
-import { useRangeWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useRangeWidget'
 import { useStringWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useStringWidget'
 import { useTextareaWidget } from '@/renderer/extensions/vueNodes/widgets/composables/useTextareaWidget'
 import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
@@ -311,7 +310,6 @@ export const ComfyWidgets = {
  PAINTER: transformWidgetConstructorV2ToV1(usePainterWidget()),
  TEXTAREA: transformWidgetConstructorV2ToV1(useTextareaWidget()),
  CURVE: transformWidgetConstructorV2ToV1(useCurveWidget()),
-  RANGE: transformWidgetConstructorV2ToV1(useRangeWidget()),
  ...dynamicWidgets
 } as const

--- a/src/stores/executionErrorStore.ts
+++ b/src/stores/executionErrorStore.ts
@@ -112,6 +112,17 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
    }
  }

+  /** Remove specific node types from the missing nodes list (e.g. after replacement). */
+  function removeMissingNodesByType(typesToRemove: string[]) {
+    if (!missingNodesError.value) return
+    const removeSet = new Set(typesToRemove)
+    const remaining = missingNodesError.value.nodeTypes.filter((node) => {
+      const nodeType = typeof node === 'string' ? node : node.type
+      return !removeSet.has(nodeType)
+    })
+    setMissingNodeTypes(remaining)
+  }
+
  function setMissingNodeTypes(types: MissingNodeType[]) {
    if (!types.length) {
      missingNodesError.value = null
@@ -406,6 +417,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
    // Missing node actions
    setMissingNodeTypes,
    surfaceMissingNodes,
+    removeMissingNodesByType,

    // Lookup helpers
    getNodeErrors,
--- a/src/workbench/extensions/manager/types/missingNodeErrorTypes.ts
+++ b/src/workbench/extensions/manager/types/missingNodeErrorTypes.ts
@@ -1,9 +0,0 @@
-/**
- * Extra info returned by the backend for missing_node_type errors
- * from the /prompt endpoint validation.
- */
-export interface MissingNodeTypeExtraInfo {
-  class_type?: string | null
-  node_title?: string | null
-  node_id?: string
-}
--- a/src/workbench/extensions/manager/utils/missingNodeErrorUtil.test.ts
+++ b/src/workbench/extensions/manager/utils/missingNodeErrorUtil.test.ts
@@ -1,93 +1,70 @@
 import { describe, expect, it } from 'vitest'

+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+
 import {
-  buildMissingNodeHint,
-  createMissingNodeTypeFromError
+  getCnrIdFromProperties,
+  getCnrIdFromNode
 } from './missingNodeErrorUtil'

-describe('buildMissingNodeHint', () => {
-  it('returns hint with title and node ID when both available', () => {
-    expect(buildMissingNodeHint('My Node', 'MyNodeClass', '42')).toBe(
-      '"My Node" (Node ID #42)'
+describe('getCnrIdFromProperties', () => {
+  it('returns cnr_id when present', () => {
+    expect(getCnrIdFromProperties({ cnr_id: 'my-pack' })).toBe('my-pack')
+  })
+
+  it('returns aux_id when cnr_id is absent', () => {
+    expect(getCnrIdFromProperties({ aux_id: 'my-aux-pack' })).toBe(
+      'my-aux-pack'
    )
  })

-  it('returns hint with title only when no node ID', () => {
-    expect(buildMissingNodeHint('My Node', 'MyNodeClass', undefined)).toBe(
-      '"My Node"'
-    )
-  })
-
-  it('returns hint with node ID only when title matches class type', () => {
-    expect(buildMissingNodeHint('MyNodeClass', 'MyNodeClass', '42')).toBe(
-      'Node ID #42'
-    )
-  })
-
-  it('returns undefined when title matches class type and no node ID', () => {
+  it('prefers cnr_id over aux_id', () => {
    expect(
-      buildMissingNodeHint('MyNodeClass', 'MyNodeClass', undefined)
-    ).toBeUndefined()
+      getCnrIdFromProperties({ cnr_id: 'primary', aux_id: 'secondary' })
+    ).toBe('primary')
  })

-  it('returns undefined when title is null and no node ID', () => {
-    expect(buildMissingNodeHint(null, 'MyNodeClass', undefined)).toBeUndefined()
+  it('returns undefined when neither is present', () => {
+    expect(getCnrIdFromProperties({})).toBeUndefined()
  })

-  it('returns node ID hint when title is null but node ID exists', () => {
-    expect(buildMissingNodeHint(null, 'MyNodeClass', '42')).toBe('Node ID #42')
+  it('returns undefined for null properties', () => {
+    expect(getCnrIdFromProperties(null)).toBeUndefined()
+  })
+
+  it('returns undefined for undefined properties', () => {
+    expect(getCnrIdFromProperties(undefined)).toBeUndefined()
+  })
+
+  it('returns undefined when cnr_id is not a string', () => {
+    expect(getCnrIdFromProperties({ cnr_id: 123 })).toBeUndefined()
  })
 })

-describe('createMissingNodeTypeFromError', () => {
-  it('returns string type when no hint is generated', () => {
-    const result = createMissingNodeTypeFromError({
-      class_type: 'MyNodeClass',
-      node_title: 'MyNodeClass'
-    })
-    expect(result).toBe('MyNodeClass')
+describe('getCnrIdFromNode', () => {
+  it('returns cnr_id from node properties', () => {
+    const node = {
+      properties: { cnr_id: 'node-pack' }
+    } as unknown as LGraphNode
+    expect(getCnrIdFromNode(node)).toBe('node-pack')
  })

-  it('returns object with hint when title differs from class type', () => {
-    const result = createMissingNodeTypeFromError({
-      class_type: 'MyNodeClass',
-      node_title: 'My Custom Title',
-      node_id: '42'
-    })
-    expect(result).toEqual({
-      type: 'MyNodeClass',
-      nodeId: '42',
-      hint: '"My Custom Title" (Node ID #42)'
-    })
+  it('returns aux_id when cnr_id is absent', () => {
+    const node = {
+      properties: { aux_id: 'node-aux-pack' }
+    } as unknown as LGraphNode
+    expect(getCnrIdFromNode(node)).toBe('node-aux-pack')
  })

-  it('handles null class_type by defaulting to Unknown', () => {
-    const result = createMissingNodeTypeFromError({
-      class_type: null,
-      node_title: 'Some Title',
-      node_id: '42'
-    })
-    expect(result).toEqual({
-      type: 'Unknown',
-      nodeId: '42',
-      hint: '"Some Title" (Node ID #42)'
-    })
+  it('prefers cnr_id over aux_id in node properties', () => {
+    const node = {
+      properties: { cnr_id: 'primary', aux_id: 'secondary' }
+    } as unknown as LGraphNode
+    expect(getCnrIdFromNode(node)).toBe('primary')
  })

-  it('handles empty extra_info', () => {
-    const result = createMissingNodeTypeFromError({})
-    expect(result).toBe('Unknown')
-  })
-
-  it('returns object with node ID hint when only node_id is available', () => {
-    const result = createMissingNodeTypeFromError({
-      class_type: 'MyNodeClass',
-      node_id: '123'
-    })
-    expect(result).toEqual({
-      type: 'MyNodeClass',
-      nodeId: '123',
-      hint: 'Node ID #123'
-    })
+  it('returns undefined when node has no cnr_id or aux_id', () => {
+    const node = { properties: {} } as unknown as LGraphNode
+    expect(getCnrIdFromNode(node)).toBeUndefined()
  })
 })
--- a/src/workbench/extensions/manager/utils/missingNodeErrorUtil.ts
+++ b/src/workbench/extensions/manager/utils/missingNodeErrorUtil.ts
@@ -1,48 +1,4 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { MissingNodeType } from '@/types/comfy'
-
-import type { MissingNodeTypeExtraInfo } from '../types/missingNodeErrorTypes'
-
-/**
- * Builds a hint string from missing node metadata.
- * Provides context about which node is missing (title, ID) when available.
- */
-export function buildMissingNodeHint(
-  nodeTitle: string | null | undefined,
-  classType: string,
-  nodeId: string | undefined
-): string | undefined {
-  const hasTitle = nodeTitle && nodeTitle !== classType
-  if (hasTitle && nodeId) {
-    return `"${nodeTitle}" (Node ID #${nodeId})`
-  } else if (hasTitle) {
-    return `"${nodeTitle}"`
-  } else if (nodeId) {
-    return `Node ID #${nodeId}`
-  }
-  return undefined
-}
-
-/**
- * Creates a MissingNodeType from backend error extra_info.
- * Used when the /prompt endpoint returns a missing_node_type error.
- */
-export function createMissingNodeTypeFromError(
-  extraInfo: MissingNodeTypeExtraInfo
-): MissingNodeType {
-  const classType = extraInfo.class_type ?? 'Unknown'
-  const nodeTitle = extraInfo.node_title ?? classType
-  const hint = buildMissingNodeHint(nodeTitle, classType, extraInfo.node_id)
-
-  if (hint) {
-    return {
-      type: classType,
-      ...(extraInfo.node_id ? { nodeId: extraInfo.node_id } : {}),
-      ...(hint ? { hint } : {})
-    }
-  }
-  return classType
-}

 /**
 * Extracts the custom node registry ID (cnr_id or aux_id) from a raw
Author	SHA1	Message	Date
jaeone94	4dc67b375b	fix: node replacement fails after execution and modal sync - Detect missing nodes by unregistered type instead of has_errors flag, which gets cleared by clearAllNodeErrorFlags during execution - Sync modal replace action with executionErrorStore so Errors Tab updates immediately when nodes are replaced from the dialog	2026-02-27 10:37:47 +09:00
jaeone94	1d8a01cdf8	fix: ensure node replacement data loads before workflow processing Await nodeReplacementStore.load() before collectMissingNodesAndModels to prevent race condition where replacement mappings are not yet available when determining isReplaceable flag.	2026-02-27 00:14:43 +09:00
jaeone94	b585dfa4fc	fix: address review feedback for handleReplaceAll - Remove redundant parameter that shadowed composable ref - Only remove actually replaced types from error list on partial success	2026-02-26 23:05:12 +09:00
jaeone94	1be6d27024	refactor: Destructure defineProps in SwapNodesCard.vue	2026-02-26 22:03:42 +09:00
jaeone94	5aa4baf116	fix: address review feedback for node replacement - Use i18n key for 'Swap Nodes' group title - Preserve partial replacement results on error instead of returning empty array	2026-02-26 21:53:00 +09:00
jaeone94	7d69a0db5b	fix: remove unused export from scanMissingNodes	2026-02-26 20:28:10 +09:00
jaeone94	83bb4300e3	fix: address code review feedback on node replacement - Add error toast in replaceNodesInPlace for user-visible failure feedback, returning empty array on error instead of throwing - Guard removeMissingNodesByType behind replacement success check (replaced.length > 0) to prevent stale error list updates - Sort buildMissingNodeGroups by priority for deterministic UI order (Swap Nodes 0 → Missing Node Packs 1 → Execution Errors) - Add aux_id fallback and cnr_id precedence tests for getCnrIdFromNode - Split replaceAllWarning from replaceWarning to fix i18n key mismatch between TabErrors tooltip and MissingNodesContent dialog	2026-02-26 20:24:56 +09:00
jaeone94	0d58a92e34	feat: add node replacement UI to Errors Tab Integrate the existing node replacement functionality into the Errors Tab, allowing users to replace missing nodes directly from the side panel without opening the modal dialog. New components: - SwapNodesCard: container with guidance label and grouped rows - SwapNodeGroupRow: per-type replacement row with expand/collapse, node instance list, locate button, and replace action Bug fixes discovered during implementation: - Fix stale canvas rendering after replacement by calling onNodeAdded to refresh VueNodeData (bypassed by replaceWithMapping) - Guard initializeVueNodeLayout against duplicate layout creation - Fix missing node list being overwritten by incomplete server 400 response — replaced with full graph rescan via useMissingNodeScan - Add removeMissingNodesByType to prune replaced types from error list Cleanup: - Remove dead code: buildMissingNodeHint, createMissingNodeTypeFromError	2026-02-26 20:24:44 +09:00