[feat] Node replacement UI (#8604)

## Summary
Add node replacement UI to the missing nodes dialog. Users can select
and replace deprecated/missing nodes with compatible alternatives
directly from the dialog.

## Changes
- Classify missing nodes into **Replaceable** (quick fix) and **Install
Required** sections
- Add select-all checkbox + per-node checkboxes for batch replacement
- `useNodeReplacement` composable handles in-place node replacement on
the graph:
  - Simple replacement (configure+copy) for nodes without mapping
  - Input/output connection remapping for nodes with mapping
  - Widget value transfer via `old_widget_ids`
  - Dot-notation input handling for Autogrow/DynamicCombo
  - Undo/redo support via `changeTracker` (try/finally)
  - Title and properties preservation
- Footer UX: "Skip for Now" button when all nodes are replaceable (cloud
+ OSS)
- Auto-close dialog when all replaceable nodes are replaced and no
non-replaceable remain
- Settings navigation link from "Don't show again" checkbox
- 505-line unit test suite for `useNodeReplacement`

## Review Focus
- `useNodeReplacement.ts` — core graph manipulation logic
- `MissingNodesContent.vue` — checkbox selection state management
- `MissingNodesFooter.vue` — conditional button rendering (cloud vs OSS
vs all-replaceable)


[screen-capture.webm](https://github.com/user-attachments/assets/7dae891c-926c-4f26-987f-9637c4a2ca16)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8604-feat-Node-replacement-UI-2fd6d73d36508148a371dabb8f4115af)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/MissingNodesContent.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="flex w-[490px] flex-col border-t-1 border-border-default"
-    :class="isCloud ? 'border-b-1' : ''"
+    class="comfy-missing-nodes flex w-[490px] flex-col border-t border-border-default"
+    :class="isCloud ? 'border-b' : ''"
   >
     <div class="flex h-full w-full flex-col gap-4 p-4">
       <!-- Description -->
       <div>
-        <p class="m-0 text-sm leading-4 text-muted-foreground">
+        <p class="m-0 text-sm leading-5 text-muted-foreground">
           {{
             isCloud
               ? $t('missingNodes.cloud.description')
@@ -14,32 +14,210 @@
           }}
         </p>
       </div>
+
       <MissingCoreNodesMessage v-if="!isCloud" :missing-core-nodes />
 
-      <!-- Missing Nodes List Wrapper -->
-      <div
-        class="comfy-missing-nodes flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-secondary-background"
-      >
+      <!-- QUICK FIX AVAILABLE Section -->
+      <div v-if="replaceableNodes.length > 0" class="flex flex-col gap-2">
+        <!-- Section header with Replace button -->
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <span class="text-xs font-semibold uppercase text-primary">
+              {{ $t('nodeReplacement.quickFixAvailable') }}
+            </span>
+            <div class="h-2 w-2 rounded-full bg-primary" />
+          </div>
+          <Button
+            v-tooltip.top="$t('nodeReplacement.replaceWarning')"
+            variant="primary"
+            size="md"
+            :disabled="selectedTypes.size === 0"
+            @click="handleReplaceSelected"
+          >
+            <i class="icon-[lucide--refresh-cw] mr-1.5 h-4 w-4" />
+            {{
+              $t('nodeReplacement.replaceSelected', {
+                count: selectedTypes.size
+              })
+            }}
+          </Button>
+        </div>
+
+        <!-- Replaceable nodes list -->
         <div
-          v-for="(node, i) in uniqueNodes"
-          :key="i"
-          class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
+          class="flex max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
         >
-          <span class="text-xs">
-            {{ node.label }}
-          </span>
-          <span v-if="node.hint" class="text-xs">{{ node.hint }}</span>
+          <!-- Select All row (sticky header) -->
+          <div
+            :class="
+              cn(
+                'sticky top-0 z-10 flex items-center gap-3 border-b border-border-default bg-secondary-background px-3 py-2',
+                pendingNodes.length > 0
+                  ? 'cursor-pointer hover:bg-secondary-background-hover'
+                  : 'opacity-50 pointer-events-none'
+              )
+            "
+            tabindex="0"
+            role="checkbox"
+            :aria-checked="
+              isAllSelected ? 'true' : isSomeSelected ? 'mixed' : 'false'
+            "
+            @click="toggleSelectAll"
+            @keydown.enter.prevent="toggleSelectAll"
+            @keydown.space.prevent="toggleSelectAll"
+          >
+            <div
+              class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+              :class="
+                isAllSelected || isSomeSelected
+                  ? 'bg-primary-background'
+                  : 'bg-secondary-background'
+              "
+            >
+              <i
+                v-if="isAllSelected"
+                class="icon-[lucide--check] text-bold text-xs text-base-foreground"
+              />
+              <i
+                v-else-if="isSomeSelected"
+                class="icon-[lucide--minus] text-bold text-xs text-base-foreground"
+              />
+            </div>
+            <span class="text-xs font-medium uppercase text-muted-foreground">
+              {{ $t('nodeReplacement.compatibleAlternatives') }}
+            </span>
+          </div>
+
+          <!-- Replaceable node items -->
+          <div
+            v-for="node in replaceableNodes"
+            :key="node.label"
+            :class="
+              cn(
+                'flex items-center gap-3 px-3 py-2',
+                replacedTypes.has(node.label)
+                  ? 'opacity-50 pointer-events-none'
+                  : 'cursor-pointer hover:bg-secondary-background-hover'
+              )
+            "
+            tabindex="0"
+            role="checkbox"
+            :aria-checked="
+              replacedTypes.has(node.label) || selectedTypes.has(node.label)
+                ? 'true'
+                : 'false'
+            "
+            @click="toggleNode(node.label)"
+            @keydown.enter.prevent="toggleNode(node.label)"
+            @keydown.space.prevent="toggleNode(node.label)"
+          >
+            <div
+              class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+              :class="
+                replacedTypes.has(node.label) || selectedTypes.has(node.label)
+                  ? 'bg-primary-background'
+                  : 'bg-secondary-background'
+              "
+            >
+              <i
+                v-if="
+                  replacedTypes.has(node.label) || selectedTypes.has(node.label)
+                "
+                class="icon-[lucide--check] text-bold text-xs text-base-foreground"
+              />
+            </div>
+            <div class="flex flex-col gap-0.5">
+              <div class="flex items-center gap-2">
+                <span
+                  v-if="replacedTypes.has(node.label)"
+                  class="inline-flex h-4 items-center rounded-full border border-success bg-success/10 px-1.5 text-xxxs font-semibold uppercase text-success"
+                >
+                  {{ $t('nodeReplacement.replaced') }}
+                </span>
+                <span
+                  v-else
+                  class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold uppercase text-primary"
+                >
+                  {{ $t('nodeReplacement.replaceable') }}
+                </span>
+                <span class="text-sm text-foreground">
+                  {{ node.label }}
+                </span>
+              </div>
+              <span class="text-xs text-muted-foreground">
+                {{ node.replacement?.new_node_id ?? node.hint ?? '' }}
+              </span>
+            </div>
+          </div>
         </div>
       </div>
 
-      <!-- Bottom instruction -->
-      <div>
-        <p class="m-0 text-sm leading-4 text-muted-foreground">
-          {{
-            isCloud
-              ? $t('missingNodes.cloud.replacementInstruction')
-              : $t('missingNodes.oss.replacementInstruction')
-          }}
+      <!-- MANUAL INSTALLATION REQUIRED Section -->
+      <div
+        v-if="nonReplaceableNodes.length > 0"
+        class="flex max-h-[200px] flex-col gap-2"
+      >
+        <!-- Section header -->
+        <div class="flex items-center gap-2">
+          <span class="text-xs font-semibold uppercase text-error">
+            {{ $t('nodeReplacement.installationRequired') }}
+          </span>
+          <i class="icon-[lucide--info] text-xs text-error" />
+        </div>
+
+        <!-- Non-replaceable nodes list -->
+        <div
+          class="flex flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
+        >
+          <div
+            v-for="node in nonReplaceableNodes"
+            :key="node.label"
+            class="flex items-center justify-between px-4 py-3"
+          >
+            <div class="flex items-center gap-3">
+              <div class="flex flex-col gap-0.5">
+                <div class="flex items-center gap-2">
+                  <span
+                    class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold uppercase text-error"
+                  >
+                    {{ $t('nodeReplacement.notReplaceable') }}
+                  </span>
+                  <span class="text-sm text-foreground">
+                    {{ node.label }}
+                  </span>
+                </div>
+                <span v-if="node.hint" class="text-xs text-muted-foreground">
+                  {{ node.hint }}
+                </span>
+              </div>
+            </div>
+            <Button
+              v-if="node.action"
+              variant="destructive-textonly"
+              size="sm"
+              @click="node.action.callback"
+            >
+              {{ node.action.text }}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Bottom instruction box -->
+      <div
+        class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
+      >
+        <i
+          class="icon-[lucide--triangle-alert] mt-0.5 h-4 w-4 shrink-0 text-warning-background"
+        />
+        <p class="m-0 text-xs leading-5 text-neutral-foreground">
+          <i18n-t keypath="nodeReplacement.instructionMessage">
+            <template #red>
+              <span class="text-error">{{
+                $t('nodeReplacement.redHighlight')
+              }}</span>
+            </template>
+          </i18n-t>
         </p>
       </div>
     </div>
@@ -47,23 +225,39 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
+import Button from '@/components/ui/button/Button.vue'
 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 type { MissingNodeType } from '@/types/comfy'
+import { cn } from '@/utils/tailwindUtil'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 
-const props = defineProps<{
+const { missingNodeTypes } = defineProps<{
   missingNodeTypes: MissingNodeType[]
 }>()
 
-// Get missing core nodes for OSS mode
 const { missingCoreNodes } = useMissingNodes()
+const { replaceNodesInPlace } = useNodeReplacement()
+const dialogStore = useDialogStore()
 
-const uniqueNodes = computed(() => {
-  const seenTypes = new Set()
-  return props.missingNodeTypes
+interface ProcessedNode {
+  label: string
+  hint?: string
+  action?: { text: string; callback: () => void }
+  isReplaceable: boolean
+  replacement?: NodeReplacement
+}
+
+const replacedTypes = ref<Set<string>>(new Set())
+
+const uniqueNodes = computed<ProcessedNode[]>(() => {
+  const seenTypes = new Set<string>()
+  return missingNodeTypes
     .filter((node) => {
       const type = typeof node === 'object' ? node.type : node
       if (seenTypes.has(type)) return false
@@ -75,10 +269,81 @@ const uniqueNodes = computed(() => {
         return {
           label: node.type,
           hint: node.hint,
-          action: node.action
+          action: node.action,
+          isReplaceable: node.isReplaceable ?? false,
+          replacement: node.replacement
         }
       }
-      return { label: node }
+      return { label: node, isReplaceable: false }
     })
 })
+
+const replaceableNodes = computed(() =>
+  uniqueNodes.value.filter((n) => n.isReplaceable)
+)
+
+const pendingNodes = computed(() =>
+  replaceableNodes.value.filter((n) => !replacedTypes.value.has(n.label))
+)
+
+const nonReplaceableNodes = computed(() =>
+  uniqueNodes.value.filter((n) => !n.isReplaceable)
+)
+
+// Selection state - all pending nodes selected by default
+const selectedTypes = ref(new Set(pendingNodes.value.map((n) => n.label)))
+
+const isAllSelected = computed(
+  () =>
+    pendingNodes.value.length > 0 &&
+    pendingNodes.value.every((n) => selectedTypes.value.has(n.label))
+)
+
+const isSomeSelected = computed(
+  () => selectedTypes.value.size > 0 && !isAllSelected.value
+)
+
+function toggleNode(label: string) {
+  if (replacedTypes.value.has(label)) return
+  const next = new Set(selectedTypes.value)
+  if (next.has(label)) {
+    next.delete(label)
+  } else {
+    next.add(label)
+  }
+  selectedTypes.value = next
+}
+
+function toggleSelectAll() {
+  if (isAllSelected.value) {
+    selectedTypes.value = new Set()
+  } else {
+    selectedTypes.value = new Set(pendingNodes.value.map((n) => n.label))
+  }
+}
+
+function handleReplaceSelected() {
+  const selected = missingNodeTypes.filter((node) => {
+    const type = typeof node === 'object' ? node.type : node
+    return selectedTypes.value.has(type)
+  })
+
+  const result = replaceNodesInPlace(selected)
+  const nextReplaced = new Set(replacedTypes.value)
+  const nextSelected = new Set(selectedTypes.value)
+  for (const type of result) {
+    nextReplaced.add(type)
+    nextSelected.delete(type)
+  }
+  replacedTypes.value = nextReplaced
+  selectedTypes.value = nextSelected
+
+  // Auto-close when all replaceable nodes replaced and no non-replaceable remain
+  const allReplaced = replaceableNodes.value.every((n) =>
+    nextReplaced.has(n.label)
+  )
+  if (allReplaced && nonReplaceableNodes.value.length === 0) {
+    dialogStore.closeDialog({ key: 'global-missing-nodes' })
+  }
+}
 </script>

src/components/dialog/content/MissingNodesFooter.vue

@@ -30,8 +30,18 @@
       </i18n-t>
     </div>
 
+    <!-- All nodes replaceable: Skip button (cloud + OSS) -->
+    <div v-if="!hasNonReplaceableNodes" class="flex justify-end gap-1">
+      <Button variant="secondary" size="md" @click="handleGotItClick">
+        {{ $t('nodeReplacement.skipForNow') }}
+      </Button>
+    </div>
+
     <!-- Cloud mode: Learn More + Got It buttons -->
-    <div v-if="isCloud" class="flex w-full items-center justify-between gap-2">
+    <div
+      v-else-if="isCloud"
+      class="flex w-full items-center justify-between gap-2"
+    >
       <Button
         variant="textonly"
         size="sm"
@@ -48,9 +58,9 @@
       }}</Button>
     </div>
 
-    <!-- OSS mode: Open Manager + Install All buttons -->
+    <!-- OSS mode: Manager buttons -->
     <div v-else-if="showManagerButtons" class="flex justify-end gap-1">
-      <Button variant="textonly" @click="openManager">{{
+      <Button variant="textonly" @click="handleOpenManager">{{
         $t('g.openManager')
       }}</Button>
       <PackInstallButton
@@ -82,12 +92,17 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
 import { useDialogStore } from '@/stores/dialogStore'
+import type { MissingNodeType } from '@/types/comfy'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
+const { missingNodeTypes } = defineProps<{
+  missingNodeTypes?: MissingNodeType[]
+}>()
+
 const dialogStore = useDialogStore()
 const { t } = useI18n()
 
@@ -109,6 +124,12 @@ function openShowMissingNodesSetting() {
 const { missingNodePacks, isLoading, error } = useMissingNodes()
 const comfyManagerStore = useComfyManagerStore()
 const managerState = useManagerState()
+function handleOpenManager() {
+  managerState.openManager({
+    initialTab: ManagerTab.Missing,
+    showToastOnLegacyError: true
+  })
+}
 
 // Check if any of the missing packs are currently being installed
 const isInstalling = computed(() => {
@@ -128,15 +149,29 @@ const showInstallAllButton = computed(() => {
   return managerState.shouldShowInstallButton.value
 })
 
-const openManager = async () => {
-  await managerState.openManager({
-    initialTab: ManagerTab.Missing,
-    showToastOnLegacyError: true
-  })
-}
+const hasNonReplaceableNodes = computed(
+  () =>
+    missingNodeTypes?.some(
+      (n) =>
+        typeof n === 'string' || (typeof n === 'object' && !n.isReplaceable)
+    ) ?? false
+)
 
-// Computed to check if all missing nodes have been installed
+// Track whether missingNodePacks was ever non-empty (i.e. there were packs to install)
+const hadMissingPacks = ref(false)
+
+watch(
+  missingNodePacks,
+  (packs) => {
+    if (packs && packs.length > 0) hadMissingPacks.value = true
+  },
+  { immediate: true }
+)
+
+// Only consider "all installed" when packs transitioned from non-empty to empty
+// (actual installation happened). Replaceable-only case is handled by Content auto-close.
 const allMissingNodesInstalled = computed(() => {
+  if (!hadMissingPacks.value) return false
   return (
     !isLoading.value &&
     !isInstalling.value &&