Merge branch 'main' into feat/error-tab-node-installation

void discards the promise entirely; .catch() preserves the
fire-and-forget intent while preventing a silent unhandled rejection
if runFullConflictAnalysis throws asynchronously.

src/components/rightSidePanel/RightSidePanel.vue

@@ -40,7 +40,8 @@ const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
-const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionErrorStore)
+const { hasAnyError, allErrorExecutionIds, activeMissingNodeGraphIds } =
+  storeToRefs(executionErrorStore)
 
 const { findParentGroup } = useGraphHierarchy()
 
@@ -109,9 +110,21 @@ const hasContainerInternalError = computed(() => {
   })
 })
 
+const hasMissingNodeSelected = computed(
+  () =>
+    hasSelection.value &&
+    selectedNodes.value.some((node) =>
+      activeMissingNodeGraphIds.value.has(String(node.id))
+    )
+)
+
 const hasRelevantErrors = computed(() => {
   if (!hasSelection.value) return hasAnyError.value
-  return hasDirectNodeError.value || hasContainerInternalError.value
+  return (
+    hasDirectNodeError.value ||
+    hasContainerInternalError.value ||
+    hasMissingNodeSelected.value
+  )
 })
 
 const tabs = computed<RightSidePanelTabList>(() => {

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -17,24 +17,26 @@
       >
         {{ card.nodeTitle }}
       </span>
-      <Button
-        v-if="card.isSubgraphNode"
-        variant="secondary"
-        size="sm"
-        class="rounded-lg text-sm shrink-0"
-        @click.stop="handleEnterSubgraph"
-      >
-        {{ t('rightSidePanel.enterSubgraph') }}
-      </Button>
-      <Button
-        variant="textonly"
-        size="icon-sm"
-        class="size-7 text-muted-foreground hover:text-base-foreground shrink-0"
-        :aria-label="t('rightSidePanel.locateNode')"
-        @click.stop="handleLocateNode"
-      >
-        <i class="icon-[lucide--locate] size-3.5" />
-      </Button>
+      <div class="flex items-center shrink-0">
+        <Button
+          v-if="card.isSubgraphNode"
+          variant="secondary"
+          size="sm"
+          class="rounded-lg text-sm shrink-0 h-8"
+          @click.stop="handleEnterSubgraph"
+        >
+          {{ t('rightSidePanel.enterSubgraph') }}
+        </Button>
+        <Button
+          variant="textonly"
+          size="icon-sm"
+          class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
+          :aria-label="t('rightSidePanel.locateNode')"
+          @click.stop="handleLocateNode"
+        >
+          <i class="icon-[lucide--locate] size-4" />
+        </Button>
+      </div>
     </div>
 
     <!-- Multiple Errors within one Card -->

src/components/rightSidePanel/errors/MissingNodeCard.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="px-4 pb-2">
+    <!-- Sub-label: cloud or OSS message shown above all pack groups -->
+    <p class="m-0 pb-5 text-sm text-muted-foreground leading-relaxed">
+      {{
+        isCloud
+          ? t('rightSidePanel.missingNodePacks.cloudMessage')
+          : t('rightSidePanel.missingNodePacks.ossMessage')
+      }}
+    </p>
+    <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>
+
+  <!-- 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"
+      :disabled="isRestarting"
+      class="w-full h-9 justify-center gap-2 text-sm font-semibold mt-2"
+      @click="applyChanges()"
+    >
+      <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
+      <i v-else class="icon-[lucide--refresh-cw] size-4 shrink-0" />
+      <span class="truncate min-w-0">{{
+        t('rightSidePanel.missingNodePacks.applyChanges')
+      }}</span>
+    </Button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Button from '@/components/ui/button/Button.vue'
+import DotSpinner from '@/components/common/DotSpinner.vue'
+import { useApplyChanges } from '@/workbench/extensions/manager/composables/useApplyChanges'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { isCloud } from '@/platform/distribution/types'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
+import MissingPackGroupRow from '@/components/rightSidePanel/errors/MissingPackGroupRow.vue'
+
+const props = defineProps<{
+  showInfoButton: boolean
+  showNodeIdBadge: boolean
+  missingPackGroups: MissingPackGroup[]
+}>()
+
+const emit = defineEmits<{
+  locateNode: [nodeId: string]
+  openManagerInfo: [packId: string]
+}>()
+
+const { t } = useI18n()
+
+const comfyManagerStore = useComfyManagerStore()
+const { isRestarting, applyChanges } = useApplyChanges()
+const { shouldShowManagerButtons } = useManagerState()
+
+/**
+ * Show Apply Changes when any pack from the error group is already installed
+ * on disk but ComfyUI hasn't restarted yet to load it.
+ * This is server-state based → persists across browser refreshes.
+ */
+const hasInstalledPacksPendingRestart = computed(() =>
+  props.missingPackGroups.some(
+    (g) => g.packId !== null && comfyManagerStore.isPackInstalled(g.packId)
+  )
+)
+</script>

src/components/rightSidePanel/errors/MissingPackGroupRow.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="flex flex-col w-full mb-2">
+    <!-- Pack header row: pack name + info + chevron -->
+    <div class="flex h-8 items-center w-full">
+      <!-- Warning icon for unknown packs -->
+      <i
+        v-if="group.packId === null && !group.isResolving"
+        class="icon-[lucide--triangle-alert] size-4 text-warning-background shrink-0 mr-1.5"
+      />
+      <p
+        class="flex-1 min-w-0 text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap"
+        :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') }}
+        </span>
+      </p>
+      <Button
+        v-if="showInfoButton && group.packId !== null"
+        variant="textonly"
+        size="icon-sm"
+        class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
+        @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 }
+          )
+        "
+        @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-1 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
+            variant="textonly"
+            size="icon-sm"
+            class="size-6 text-muted-foreground hover:text-base-foreground shrink-0 mr-1"
+            @click="handleLocateNode(nodeType)"
+          >
+            <i class="icon-[lucide--locate] size-3" />
+          </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 items-start w-full pt-1 pb-1"
+    >
+      <div
+        :class="
+          cn(
+            'flex flex-1 h-8 items-center justify-center overflow-hidden p-2 rounded-lg min-w-0 transition-colors select-none',
+            comfyManagerStore.isPackInstalled(group.packId)
+              ? 'bg-secondary-background opacity-60 cursor-not-allowed'
+              : 'bg-secondary-background-hover cursor-pointer hover:bg-secondary-background-selected'
+          )
+        "
+        @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="icon-[lucide--check] size-4 text-foreground shrink-0 mr-1"
+        />
+        <i
+          v-else
+          class="icon-[lucide--download] size-4 text-foreground shrink-0 mr-1"
+        />
+        <span class="text-sm text-foreground truncate min-w-0">
+          {{
+            isInstalling
+              ? t('rightSidePanel.missingNodePacks.installing')
+              : comfyManagerStore.isPackInstalled(group.packId)
+                ? t('rightSidePanel.missingNodePacks.installed')
+                : t('rightSidePanel.missingNodePacks.installNodePack')
+          }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Registry still loading: packId known but result not yet available -->
+    <div
+      v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
+      class="flex items-start w-full pt-1 pb-1"
+    >
+      <div
+        class="flex flex-1 h-8 items-center justify-center overflow-hidden p-2 rounded-lg min-w-0 bg-secondary-background opacity-60 cursor-not-allowed select-none"
+      >
+        <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
+        <span class="text-sm text-foreground truncate min-w-0">
+          {{ 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 items-start w-full pt-1 pb-1"
+    >
+      <div
+        class="flex flex-1 h-8 items-center justify-center overflow-hidden p-2 rounded-lg min-w-0 bg-secondary-background-hover cursor-pointer hover:bg-secondary-background-selected transition-colors select-none"
+        @click="
+          openManager({
+            initialTab: ManagerTab.All,
+            initialPackId: group.packId!
+          })
+        "
+      >
+        <i class="icon-[lucide--search] size-4 text-foreground shrink-0 mr-1" />
+        <span class="text-sm text-foreground truncate min-w-0">
+          {{ t('rightSidePanel.missingNodePacks.searchInManager') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { cn } from '@/utils/tailwindUtil'
+import { useI18n } from 'vue-i18n'
+import Button from '@/components/ui/button/Button.vue'
+import DotSpinner from '@/components/common/DotSpinner.vue'
+import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
+import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import type { MissingNodeType } from '@/types/comfy'
+import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
+
+const props = defineProps<{
+  group: MissingPackGroup
+  showInfoButton: boolean
+  showNodeIdBadge: boolean
+}>()
+
+const emit = defineEmits<{
+  locateNode: [nodeId: string]
+  openManagerInfo: [packId: string]
+}>()
+
+const { t } = useI18n()
+
+const { missingNodePacks, isLoading } = useMissingNodes()
+const comfyManagerStore = useComfyManagerStore()
+const { shouldShowManagerButtons, openManager } = useManagerState()
+
+const nodePack = computed(() => {
+  if (!props.group.packId) return null
+  return missingNodePacks.value.find((p) => p.id === props.group.packId) ?? null
+})
+
+const { isInstalling, installAllPacks } = usePackInstall(() =>
+  nodePack.value ? [nodePack.value] : []
+)
+
+function handlePackInstallClick() {
+  if (!props.group.packId) return
+  if (!comfyManagerStore.isPackInstalled(props.group.packId)) {
+    void installAllPacks()
+  }
+}
+
+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('locateNode', String(nodeType.nodeId))
+  }
+}
+</script>

src/components/rightSidePanel/errors/TabErrors.test.ts

@@ -18,7 +18,8 @@ vi.mock('@/scripts/app', () => ({
 vi.mock('@/utils/graphTraversalUtil', () => ({
   getNodeByExecutionId: vi.fn(),
   getRootParentNode: vi.fn(() => null),
-  forEachNode: vi.fn()
+  forEachNode: vi.fn(),
+  mapAllNodes: vi.fn(() => [])
 }))
 
 vi.mock('@/composables/useCopyToClipboard', () => ({

src/components/rightSidePanel/errors/TabErrors.vue

@@ -27,6 +27,7 @@
           :key="group.title"
           :collapse="collapseState[group.title] ?? false"
           class="border-b border-interface-stroke"
+          :size="group.type === 'missing_node' ? 'lg' : 'default'"
           @update:collapse="collapseState[group.title] = $event"
         >
           <template #label>
@@ -39,17 +40,46 @@
                   {{ group.title }}
                 </span>
                 <span
-                  v-if="group.cards.length > 1"
+                  v-if="group.type !== 'missing_node' && group.cards.length > 1"
                   class="text-destructive-background-hover"
                 >
                   ({{ group.cards.length }})
                 </span>
               </span>
+              <Button
+                v-if="
+                  group.type === 'missing_node' &&
+                  missingNodePacks.length > 0 &&
+                  shouldShowInstallButton
+                "
+                variant="secondary"
+                size="sm"
+                class="shrink-0 mr-2 h-8 rounded-lg text-sm"
+                :disabled="isInstallingAll"
+                @click.stop="installAll"
+              >
+                <DotSpinner v-if="isInstallingAll" duration="1s" :size="12" />
+                {{
+                  isInstallingAll
+                    ? t('rightSidePanel.missingNodePacks.installing')
+                    : t('rightSidePanel.missingNodePacks.installAll')
+                }}
+              </Button>
             </div>
           </template>
 
-          <!-- Cards in Group (default slot) -->
-          <div class="px-4 space-y-3">
+          <!-- Missing Node Packs -->
+          <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"
+          />
+
+          <!-- Execution Errors -->
+          <div v-else class="px-4 space-y-3">
             <ErrorNodeCard
               v-for="card in group.cards"
               :key="card.id"
@@ -108,12 +138,18 @@ import { useExternalLink } from '@/composables/useExternalLink'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 import { NodeBadgeMode } from '@/types/nodeSource'
 
 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 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'
 
 const { t } = useI18n()
@@ -122,6 +158,11 @@ const { focusNode, enterSubgraph } = useFocusNode()
 const { staticUrls } = useExternalLink()
 const settingStore = useSettingStore()
 const rightSidePanelStore = useRightSidePanelStore()
+const { shouldShowManagerButtons, shouldShowInstallButton, openManager } =
+  useManagerState()
+const { missingNodePacks } = useMissingNodes()
+const { isInstalling: isInstallingAll, installAllPacks: installAll } =
+  usePackInstall(() => missingNodePacks.value)
 
 const searchQuery = ref('')
 
@@ -136,7 +177,9 @@ const {
   filteredGroups,
   collapseState,
   isSingleNodeSelected,
-  errorNodeCache
+  errorNodeCache,
+  missingNodeCache,
+  missingPackGroups
 } = useErrorGroups(searchQuery, t)
 
 /**
@@ -167,6 +210,19 @@ function handleLocateNode(nodeId: string) {
   focusNode(nodeId, errorNodeCache.value)
 }
 
+function handleLocateMissingNode(nodeId: string) {
+  focusNode(nodeId, missingNodeCache.value)
+}
+
+function handleOpenManagerInfo(packId: string) {
+  const isKnownToRegistry = missingNodePacks.value.some((p) => p.id === packId)
+  if (isKnownToRegistry) {
+    openManager({ initialTab: ManagerTab.Missing, initialPackId: packId })
+  } else {
+    openManager({ initialTab: ManagerTab.All, initialPackId: packId })
+  }
+}
+
 function handleEnterSubgraph(nodeId: string) {
   enterSubgraph(nodeId, errorNodeCache.value)
 }

src/components/rightSidePanel/errors/types.ts

@@ -14,7 +14,10 @@ export interface ErrorCardData {
   errors: ErrorItem[]
 }
 
+export type ErrorGroupType = 'execution' | 'missing_node' | 'missing_model'
+
 export interface ErrorGroup {
+  type: ErrorGroupType
   title: string
   cards: ErrorCardData[]
   priority: number

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -1,11 +1,11 @@
-import { computed, reactive } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 import Fuse from 'fuse.js'
 import type { IFuseOptions } from 'fuse.js'
 
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
+import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-
 import { app } from '@/scripts/app'
 import { isCloud } from '@/platform/distribution/types'
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
@@ -20,7 +20,13 @@ import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil'
 import { isLGraphNode } from '@/utils/litegraphUtil'
 import { isGroupNode } from '@/utils/executableGroupNodeDto'
 import { st } from '@/i18n'
-import type { ErrorCardData, ErrorGroup, ErrorItem } from './types'
+import type { MissingNodeType } from '@/types/comfy'
+import type {
+  ErrorCardData,
+  ErrorGroup,
+  ErrorGroupType,
+  ErrorItem
+} from './types'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { isNodeExecutionId } from '@/types/nodeIdentification'
 
@@ -32,7 +38,23 @@ const KNOWN_PROMPT_ERROR_TYPES = new Set([
   'server_error'
 ])
 
+/** Sentinel: distinguishes "fetch in-flight" from "fetch done, pack not found (null)". */
+const RESOLVING = '__RESOLVING__'
+
+/**
+ * A group of missing node types belonging to the same node pack.
+ */
+export interface MissingPackGroup {
+  /** Registry pack ID (cnrId). null = could not be resolved. */
+  packId: string | null
+  /** Missing node types belonging to this pack. */
+  nodeTypes: MissingNodeType[]
+  /** True while async pack inference is still in progress for this group. */
+  isResolving: boolean
+}
+
 interface GroupEntry {
+  type: ErrorGroupType
   priority: number
   cards: Map<string, ErrorCardData>
 }
@@ -72,11 +94,12 @@ function resolveNodeInfo(nodeId: string) {
 function getOrCreateGroup(
   groupsMap: Map<string, GroupEntry>,
   title: string,
-  priority = 1
+  priority = 1,
+  type: ErrorGroupType = 'execution'
 ): Map<string, ErrorCardData> {
   let entry = groupsMap.get(title)
   if (!entry) {
-    entry = { priority, cards: new Map() }
+    entry = { type, priority, cards: new Map() }
     groupsMap.set(title, entry)
   }
   return entry.cards
@@ -137,6 +160,7 @@ function addCardErrorToGroup(
 function toSortedGroups(groupsMap: Map<string, GroupEntry>): ErrorGroup[] {
   return Array.from(groupsMap.entries())
     .map(([title, groupData]) => ({
+      type: groupData.type,
       title,
       cards: Array.from(groupData.cards.values()),
       priority: groupData.priority
@@ -197,6 +221,7 @@ export function useErrorGroups(
 ) {
   const executionErrorStore = useExecutionErrorStore()
   const canvasStore = useCanvasStore()
+  const { inferPackFromNodeName } = useComfyRegistryStore()
   const collapseState = reactive<Record<string, boolean>>({})
 
   const selectedNodeInfo = computed(() => {
@@ -237,6 +262,19 @@ export function useErrorGroups(
     return map
   })
 
+  const missingNodeCache = computed(() => {
+    const map = new Map<string, LGraphNode>()
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    for (const nodeType of nodeTypes) {
+      if (typeof nodeType === 'string') continue
+      if (nodeType.nodeId == null) continue
+      const nodeId = String(nodeType.nodeId)
+      const node = getNodeByExecutionId(app.rootGraph, nodeId)
+      if (node) map.set(nodeId, node)
+    }
+    return map
+  })
+
   function isErrorInSelection(executionNodeId: string): boolean {
     const nodeIds = selectedNodeInfo.value.nodeIds
     if (!nodeIds) return true
@@ -343,6 +381,126 @@ export function useErrorGroups(
     )
   }
 
+  // Async pack-ID resolution for missing node types that lack a cnrId
+  const asyncResolvedIds = ref<Map<string, string | null>>(new Map())
+
+  const pendingTypes = computed(() =>
+    (executionErrorStore.missingNodesError?.nodeTypes ?? []).filter(
+      (n): n is Exclude<MissingNodeType, string> =>
+        typeof n !== 'string' && !n.cnrId
+    )
+  )
+
+  watch(
+    pendingTypes,
+    async (pending) => {
+      const toResolve = pending.filter(
+        (n) => !asyncResolvedIds.value.has(n.type)
+      )
+      if (!toResolve.length) return
+
+      const updated = new Map(asyncResolvedIds.value)
+      for (const nodeType of toResolve) {
+        updated.set(nodeType.type, RESOLVING)
+      }
+      asyncResolvedIds.value = updated
+
+      for (const nodeType of toResolve) {
+        const pack = await inferPackFromNodeName.call(nodeType.type)
+        asyncResolvedIds.value = new Map(asyncResolvedIds.value).set(
+          nodeType.type,
+          pack?.id ?? null
+        )
+      }
+    },
+    { immediate: true }
+  )
+
+  const missingPackGroups = computed<MissingPackGroup[]>(() => {
+    const nodeTypes = executionErrorStore.missingNodesError?.nodeTypes ?? []
+    const map = new Map<
+      string | null,
+      { nodeTypes: MissingNodeType[]; isResolving: boolean }
+    >()
+    const resolvingKeys = new Set<string | null>()
+
+    for (const nodeType of nodeTypes) {
+      let packId: string | null
+
+      if (typeof nodeType === 'string') {
+        packId = null
+      } else if (nodeType.cnrId) {
+        packId = nodeType.cnrId
+      } else {
+        const resolved = asyncResolvedIds.value.get(nodeType.type)
+        if (resolved === undefined || resolved === RESOLVING) {
+          packId = null
+          resolvingKeys.add(null)
+        } else {
+          packId = resolved
+        }
+      }
+
+      const existing = map.get(packId)
+      if (existing) {
+        existing.nodeTypes.push(nodeType)
+      } else {
+        map.set(packId, { nodeTypes: [nodeType], isResolving: false })
+      }
+    }
+
+    for (const key of resolvingKeys) {
+      const group = map.get(key)
+      if (group) group.isResolving = true
+    }
+
+    return Array.from(map.entries())
+      .sort(([packIdA], [packIdB]) => {
+        // null (Unknown Pack) always goes last
+        if (packIdA === null) return 1
+        if (packIdB === null) return -1
+        return packIdA.localeCompare(packIdB)
+      })
+      .map(([packId, { nodeTypes, isResolving }]) => ({
+        packId,
+        nodeTypes: [...nodeTypes].sort((a, b) => {
+          const typeA = typeof a === 'string' ? a : a.type
+          const typeB = typeof b === 'string' ? b : b.type
+          const typeCmp = typeA.localeCompare(typeB)
+          if (typeCmp !== 0) return typeCmp
+          const idA = typeof a === 'string' ? '' : String(a.nodeId ?? '')
+          const idB = typeof b === 'string' ? '' : String(b.nodeId ?? '')
+          return idA.localeCompare(idB, undefined, { numeric: true })
+        }),
+        isResolving
+      }))
+  })
+
+  /** Builds an ErrorGroup from missingNodesError. Returns [] when none present. */
+  function buildMissingNodeGroups(): ErrorGroup[] {
+    const error = executionErrorStore.missingNodesError
+    if (!error) return []
+
+    return [
+      {
+        type: 'missing_node' as const,
+        title: error.message,
+        cards: [
+          {
+            id: '__missing_nodes__',
+            title: error.message,
+            errors: [
+              {
+                message: error.message
+              }
+            ]
+          }
+        ],
+        priority: 0
+      }
+    ]
+  }
+
   const allErrorGroups = computed<ErrorGroup[]>(() => {
     const groupsMap = new Map<string, GroupEntry>()
 
@@ -350,7 +508,7 @@ export function useErrorGroups(
     processNodeErrors(groupsMap)
     processExecutionError(groupsMap)
 
-    return toSortedGroups(groupsMap)
+    return [...buildMissingNodeGroups(), ...toSortedGroups(groupsMap)]
   })
 
   const tabErrorGroups = computed<ErrorGroup[]>(() => {
@@ -360,9 +518,11 @@ export function useErrorGroups(
     processNodeErrors(groupsMap, true)
     processExecutionError(groupsMap, true)
 
-    return isSingleNodeSelected.value
+    const executionGroups = isSingleNodeSelected.value
       ? toSortedGroups(regroupByErrorMessage(groupsMap))
       : toSortedGroups(groupsMap)
+
+    return [...buildMissingNodeGroups(), ...executionGroups]
   })
 
   const filteredGroups = computed<ErrorGroup[]>(() => {
@@ -389,6 +549,8 @@ export function useErrorGroups(
     collapseState,
     isSingleNodeSelected,
     errorNodeCache,
-    groupedErrorMessages
+    missingNodeCache,
+    groupedErrorMessages,
+    missingPackGroups
   }
 }

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -10,12 +10,14 @@ const {
   label,
   enableEmptyState,
   tooltip,
+  size = 'default',
   class: className
 } = defineProps<{
   disabled?: boolean
   label?: string
   enableEmptyState?: boolean
   tooltip?: string
+  size?: 'default' | 'lg'
   class?: string
 }>()
 
@@ -39,7 +41,8 @@ const tooltipConfig = computed(() => {
         type="button"
         :class="
           cn(
-            'group min-h-12 bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
+            'group bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
+            size === 'lg' ? 'min-h-16' : 'min-h-12',
             !disabled && 'cursor-pointer'
           )
         "

src/components/rightSidePanel/parameters/SectionWidgets.vue

@@ -131,6 +131,12 @@ const nodeHasError = computed(() => {
   return hasDirectError.value || hasContainerInternalError.value
 })
 
+const showSeeError = computed(
+  () =>
+    nodeHasError.value &&
+    useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')
+)
+
 const parentGroup = computed<LGraphGroup | null>(() => {
   if (!targetNode.value || !getNodeParentGroup) return null
   return getNodeParentGroup(targetNode.value)
@@ -194,6 +200,7 @@ defineExpose({
       :enable-empty-state
       :disabled="isEmpty"
       :tooltip
+      :size="showSeeError ? 'lg' : 'default'"
     >
       <template #label>
         <div class="flex flex-wrap items-center gap-2 flex-1 min-w-0">
@@ -223,13 +230,10 @@ defineExpose({
             </span>
           </span>
           <Button
-            v-if="
-              nodeHasError &&
-              useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')
-            "
+            v-if="showSeeError"
             variant="secondary"
             size="sm"
-            class="shrink-0 rounded-lg text-sm"
+            class="shrink-0 rounded-lg text-sm h-8"
             @click.stop="navigateToErrorTab"
           >
             {{ t('rightSidePanel.seeError') }}

src/locales/en/main.json

@@ -71,6 +71,7 @@
     "error": "Error",
     "enter": "Enter",
     "enterSubgraph": "Enter Subgraph",
+    "inSubgraph": "in subgraph '{name}'",
     "resizeFromBottomRight": "Resize from bottom-right corner",
     "resizeFromTopRight": "Resize from top-right corner",
     "resizeFromBottomLeft": "Resize from bottom-left corner",
@@ -449,6 +450,9 @@
         "import_failed": "Import Failed"
       },
       "warningTooltip": "This package may have compatibility issues with your current environment"
+    },
+    "packInstall": {
+      "nodeIdRequired": "Node ID is required for installation"
     }
   },
   "importFailed": {
@@ -3085,7 +3089,20 @@
     "errorHelpGithub": "submit a GitHub issue",
     "errorHelpSupport": "contact our support",
     "resetToDefault": "Reset to default",
-    "resetAllParameters": "Reset all parameters"
+    "resetAllParameters": "Reset all parameters",
+    "missingNodePacks": {
+      "title": "Missing Node Packs",
+      "unsupportedTitle": "Unsupported Node Packs",
+      "cloudMessage": "This workflow requires custom nodes not yet available on Comfy Cloud.",
+      "ossMessage": "This workflow uses custom nodes you haven't installed yet.",
+      "installAll": "Install All",
+      "installNodePack": "Install node pack",
+      "unknownPack": "Unknown pack",
+      "installing": "Installing...",
+      "installed": "Installed",
+      "applyChanges": "Apply Changes",
+      "searchInManager": "Search in Node Manager"
+    }
   },
   "errorOverlay": {
     "errorCount": "{count} ERRORS | {count} ERROR | {count} ERRORS",

src/platform/workflow/core/services/workflowService.ts

@@ -21,6 +21,7 @@ import { useMissingModelsDialog } from '@/composables/useMissingModelsDialog'
 import { useMissingNodesDialog } from '@/composables/useMissingNodesDialog'
 import { useDialogService } from '@/services/dialogService'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
+import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { appendJsonExt } from '@/utils/formatUtil'
 
@@ -33,6 +34,7 @@ export const useWorkflowService = () => {
   const missingNodesDialog = useMissingNodesDialog()
   const workflowThumbnail = useWorkflowThumbnail()
   const domWidgetStore = useDomWidgetStore()
+  const executionErrorStore = useExecutionErrorStore()
   const workflowDraftStore = useWorkflowDraftStore()
 
   async function getFilename(defaultName: string): Promise<string | null> {
@@ -473,6 +475,14 @@ export const useWorkflowService = () => {
     ) {
       missingNodesDialog.show({ missingNodeTypes })
     }
+
+    if (missingNodeTypes?.length) {
+      executionErrorStore.setMissingNodeTypes(missingNodeTypes)
+      if (settingStore.get('Comfy.RightSidePanel.ShowErrorsTab')) {
+        executionErrorStore.showErrorOverlay()
+      }
+    }
+
     if (
       missingModels &&
       settingStore.get('Comfy.Workflow.ShowMissingModelsWarning')

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -356,7 +356,8 @@ const hasAnyError = computed((): boolean => {
     error ||
     executionErrorStore.getNodeErrors(nodeLocatorId.value) ||
     (lgraphNode.value &&
-      executionErrorStore.isContainerWithInternalError(lgraphNode.value))
+      (executionErrorStore.isContainerWithInternalError(lgraphNode.value) ||
+        executionErrorStore.isContainerWithMissingNode(lgraphNode.value)))
   )
 })
 

src/scripts/app.ts

@@ -34,6 +34,7 @@ import {
   type NodeId,
   isSubgraphDefinition
 } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { buildSubgraphExecutionPaths } from '@/utils/nodeExecutionUtil'
 import type {
   ExecutionErrorWsMessage,
   NodeError,
@@ -1071,6 +1072,11 @@ export class ComfyApp {
     if (useSettingStore().get('Comfy.Workflow.ShowMissingNodesWarning')) {
       useMissingNodesDialog().show({ missingNodeTypes })
     }
+    const executionErrorStore = useExecutionErrorStore()
+    executionErrorStore.setMissingNodeTypes(missingNodeTypes)
+    if (useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')) {
+      executionErrorStore.showErrorOverlay()
+    }
   }
 
   async loadGraphData(
@@ -1152,12 +1158,13 @@ export class ComfyApp {
 
     const collectMissingNodesAndModels = (
       nodes: ComfyWorkflowJSON['nodes'],
-      path: string = ''
+      pathPrefix: string = '',
+      displayName: string = ''
     ) => {
       if (!Array.isArray(nodes)) {
         console.warn(
           'Workflow nodes data is missing or invalid, skipping node processing',
-          { nodes, path }
+          { nodes, pathPrefix }
         )
         return
       }
@@ -1166,9 +1173,24 @@ export class ComfyApp {
         if (!(n.type in LiteGraph.registered_node_types)) {
           const replacement = nodeReplacementStore.getReplacementFor(n.type)
 
+          let cnrId: string | undefined
+          if (typeof n.properties?.cnr_id === 'string') {
+            cnrId = n.properties.cnr_id
+          } else if (typeof n.properties?.aux_id === 'string') {
+            cnrId = n.properties.aux_id
+          }
+
+          const executionId = pathPrefix
+            ? `${pathPrefix}:${n.id}`
+            : String(n.id)
+
           missingNodeTypes.push({
             type: n.type,
-            ...(path && { hint: `in subgraph '${path}'` }),
+            nodeId: executionId,
+            cnrId,
+            ...(displayName && {
+              hint: t('g.inSubgraph', { name: displayName })
+            }),
             isReplaceable: replacement !== null,
             replacement: replacement ?? undefined
           })
@@ -1187,14 +1209,25 @@ export class ComfyApp {
     // Process nodes at the top level
     collectMissingNodesAndModels(graphData.nodes)
 
+    // Build map: subgraph definition UUID → full execution path prefix.
+    // Handles arbitrary nesting depth (e.g. root node 11 → "11", node 14 in sg 11 → "11:14").
+    const subgraphContainerIdMap = buildSubgraphExecutionPaths(
+      graphData.nodes,
+      graphData.definitions?.subgraphs ?? []
+    )
+
     // Process nodes in subgraphs
     if (graphData.definitions?.subgraphs) {
       for (const subgraph of graphData.definitions.subgraphs) {
         if (isSubgraphDefinition(subgraph)) {
-          collectMissingNodesAndModels(
-            subgraph.nodes,
-            subgraph.name || subgraph.id
-          )
+          const paths = subgraphContainerIdMap.get(subgraph.id) ?? []
+          for (const pathPrefix of paths) {
+            collectMissingNodesAndModels(
+              subgraph.nodes,
+              pathPrefix,
+              subgraph.name || subgraph.id
+            )
+          }
         }
       }
     }

src/stores/executionErrorStore.ts

@@ -1,6 +1,8 @@
 import { defineStore } from 'pinia'
 import { computed, ref, watch } from 'vue'
 
+import { st } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
@@ -10,7 +12,7 @@ import type {
   PromptError
 } from '@/schemas/apiSchema'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { NodeExecutionId, NodeLocatorId } from '@/types/nodeIdentification'
 import {
   executionIdToNodeLocatorId,
@@ -18,14 +20,56 @@ import {
   getNodeByExecutionId,
   getExecutionIdByNode
 } from '@/utils/graphTraversalUtil'
+import {
+  getAncestorExecutionIds,
+  getParentExecutionIds
+} from '@/utils/nodeExecutionUtil'
+import type { MissingNodeType } from '@/types/comfy'
 
-/**
- * Store dedicated to execution error state management.
- *
- * Extracted from executionStore to separate error-related concerns
- * (state, computed properties, graph flag propagation, overlay UI)
- * from execution flow management (progress, queuing, events).
- */
+interface MissingNodesError {
+  message: string
+  nodeTypes: MissingNodeType[]
+}
+
+function clearAllNodeErrorFlags(rootGraph: LGraph): void {
+  forEachNode(rootGraph, (node) => {
+    node.has_errors = false
+    if (node.inputs) {
+      for (const slot of node.inputs) {
+        slot.hasErrors = false
+      }
+    }
+  })
+}
+
+function markNodeSlotErrors(node: LGraphNode, nodeError: NodeError): void {
+  if (!node.inputs) return
+  for (const error of nodeError.errors) {
+    const slotName = error.extra_info?.input_name
+    if (!slotName) continue
+    const slot = node.inputs.find((s) => s.name === slotName)
+    if (slot) slot.hasErrors = true
+  }
+}
+
+function applyNodeError(
+  rootGraph: LGraph,
+  executionId: string,
+  nodeError: NodeError
+): void {
+  const node = getNodeByExecutionId(rootGraph, executionId)
+  if (!node) return
+
+  node.has_errors = true
+  markNodeSlotErrors(node, nodeError)
+
+  for (const parentId of getParentExecutionIds(executionId)) {
+    const parentNode = getNodeByExecutionId(rootGraph, parentId)
+    if (parentNode) parentNode.has_errors = true
+  }
+}
+
+/** Execution error state: node errors, runtime errors, prompt errors, and missing nodes. */
 export const useExecutionErrorStore = defineStore('executionError', () => {
   const workflowStore = useWorkflowStore()
   const canvasStore = useCanvasStore()
@@ -36,6 +80,9 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
 
   const isErrorOverlayOpen = ref(false)
 
+  // Missing node state (single error object or null)
+  const missingNodesError = ref<MissingNodesError | null>(null)
+
   function showErrorOverlay() {
     isErrorOverlayOpen.value = true
   }
@@ -49,6 +96,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     lastExecutionError.value = null
     lastPromptError.value = null
     lastNodeErrors.value = null
+    missingNodesError.value = null
     isErrorOverlayOpen.value = false
   }
 
@@ -57,6 +105,41 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     lastPromptError.value = null
   }
 
+  /** Deduplicates by nodeId for object entries, or by type string for legacy entries. */
+  function setMissingNodeTypes(types: MissingNodeType[]) {
+    if (!types.length) {
+      missingNodesError.value = null
+      return
+    }
+    const seen = new Set<string>()
+    const uniqueTypes = types.filter((node) => {
+      // For string entries (group nodes), deduplicate by the string itself.
+      // For object entries, prefer nodeId so multiple instances of the same
+      // type are kept as separate rows; fall back to type if nodeId is absent.
+      const isString = typeof node === 'string'
+      let key: string
+      if (isString) {
+        key = node
+      } else if (node.nodeId != null) {
+        key = String(node.nodeId)
+      } else {
+        key = node.type
+      }
+      if (seen.has(key)) return false
+      seen.add(key)
+      return true
+    })
+    missingNodesError.value = {
+      message: isCloud
+        ? st(
+            'rightSidePanel.missingNodePacks.unsupportedTitle',
+            'Unsupported Node Packs'
+          )
+        : st('rightSidePanel.missingNodePacks.title', 'Missing Node Packs'),
+      nodeTypes: uniqueTypes
+    }
+  }
+
   const lastExecutionErrorNodeLocatorId = computed(() => {
     const err = lastExecutionError.value
     if (!err) return null
@@ -81,9 +164,16 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     () => !!lastNodeErrors.value && Object.keys(lastNodeErrors.value).length > 0
   )
 
-  /** Whether any error (node validation, runtime execution, or prompt-level) is present */
+  /** Whether any missing node types are present in the current workflow */
+  const hasMissingNodes = computed(() => !!missingNodesError.value)
+
+  /** Whether any error (node validation, runtime execution, prompt-level, or missing nodes) is present */
   const hasAnyError = computed(
-    () => hasExecutionError.value || hasPromptError.value || hasNodeError.value
+    () =>
+      hasExecutionError.value ||
+      hasPromptError.value ||
+      hasNodeError.value ||
+      hasMissingNodes.value
   )
 
   const allErrorExecutionIds = computed<string[]>(() => {
@@ -116,13 +206,19 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
   /** Count of runtime execution errors (0 or 1) */
   const executionErrorCount = computed(() => (lastExecutionError.value ? 1 : 0))
 
+  /** Count of missing node errors (0 or 1) */
+  const missingNodeCount = computed(() => (missingNodesError.value ? 1 : 0))
+
   /** Total count of all individual errors */
   const totalErrorCount = computed(
     () =>
-      promptErrorCount.value + nodeErrorCount.value + executionErrorCount.value
+      promptErrorCount.value +
+      nodeErrorCount.value +
+      executionErrorCount.value +
+      missingNodeCount.value
   )
 
-  /** Pre-computed Set of graph node IDs (as strings) that have errors in the current graph scope. */
+  /** Graph node IDs (as strings) that have errors in the current graph scope. */
   const activeGraphErrorNodeIds = computed<Set<string>>(() => {
     const ids = new Set<string>()
     if (!app.rootGraph) return ids
@@ -150,6 +246,44 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     return ids
   })
 
+  /**
+   * Set of all execution ID prefixes derived from missing node execution IDs,
+   * including the missing nodes themselves.
+   *
+   * Example: missing node at "65:70:63" → Set { "65", "65:70", "65:70:63" }
+   */
+  const missingAncestorExecutionIds = computed<Set<NodeExecutionId>>(() => {
+    const ids = new Set<NodeExecutionId>()
+    const error = missingNodesError.value
+    if (!error) return ids
+
+    for (const nodeType of error.nodeTypes) {
+      if (typeof nodeType === 'string') continue
+      if (nodeType.nodeId == null) continue
+      for (const id of getAncestorExecutionIds(String(nodeType.nodeId))) {
+        ids.add(id)
+      }
+    }
+
+    return ids
+  })
+
+  const activeMissingNodeGraphIds = computed<Set<string>>(() => {
+    const ids = new Set<string>()
+    if (!app.rootGraph) return ids
+
+    const activeGraph = canvasStore.currentGraph ?? app.rootGraph
+
+    for (const executionId of missingAncestorExecutionIds.value) {
+      const graphNode = getNodeByExecutionId(app.rootGraph, executionId)
+      if (graphNode?.graph === activeGraph) {
+        ids.add(String(graphNode.id))
+      }
+    }
+
+    return ids
+  })
+
   /** Map of node errors indexed by locator ID. */
   const nodeErrorsByLocatorId = computed<Record<NodeLocatorId, NodeError>>(
     () => {
@@ -196,15 +330,11 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
    */
   const errorAncestorExecutionIds = computed<Set<NodeExecutionId>>(() => {
     const ids = new Set<NodeExecutionId>()
-
     for (const executionId of allErrorExecutionIds.value) {
-      const parts = executionId.split(':')
-      // Add every prefix including the full ID (error leaf node itself)
-      for (let i = 1; i <= parts.length; i++) {
-        ids.add(parts.slice(0, i).join(':'))
+      for (const id of getAncestorExecutionIds(executionId)) {
+        ids.add(id)
       }
     }
-
     return ids
   })
 
@@ -216,59 +346,26 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     return errorAncestorExecutionIds.value.has(execId)
   }
 
-  /**
-   * Update node and slot error flags when validation errors change.
-   * Propagates errors up subgraph chains.
-   */
-  watch(lastNodeErrors, () => {
-    if (!app.rootGraph) return
+  /** True if the node has a missing node inside it at any nesting depth. */
+  function isContainerWithMissingNode(node: LGraphNode): boolean {
+    if (!app.rootGraph) return false
+    const execId = getExecutionIdByNode(app.rootGraph, node)
+    if (!execId) return false
+    return missingAncestorExecutionIds.value.has(execId)
+  }
 
-    // Clear all error flags
-    forEachNode(app.rootGraph, (node) => {
-      node.has_errors = false
-      if (node.inputs) {
-        for (const slot of node.inputs) {
-          slot.hasErrors = false
-        }
-      }
-    })
+  watch(lastNodeErrors, () => {
+    const rootGraph = app.rootGraph
+    if (!rootGraph) return
+
+    clearAllNodeErrorFlags(rootGraph)
 
     if (!lastNodeErrors.value) return
 
-    // Set error flags on nodes and slots
     for (const [executionId, nodeError] of Object.entries(
       lastNodeErrors.value
     )) {
-      const node = getNodeByExecutionId(app.rootGraph, executionId)
-      if (!node) continue
-
-      node.has_errors = true
-
-      // Mark input slots with errors
-      if (node.inputs) {
-        for (const error of nodeError.errors) {
-          const slotName = error.extra_info?.input_name
-          if (!slotName) continue
-
-          const slot = node.inputs.find((s) => s.name === slotName)
-          if (slot) {
-            slot.hasErrors = true
-          }
-        }
-      }
-
-      // Propagate errors to parent subgraph nodes
-      const parts = executionId.split(':')
-      for (let i = parts.length - 1; i > 0; i--) {
-        const parentExecutionId = parts.slice(0, i).join(':')
-        const parentNode = getNodeByExecutionId(
-          app.rootGraph,
-          parentExecutionId
-        )
-        if (parentNode) {
-          parentNode.has_errors = true
-        }
-      }
+      applyNodeError(rootGraph, executionId, nodeError)
     }
   })
 
@@ -277,6 +374,7 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     lastNodeErrors,
     lastExecutionError,
     lastPromptError,
+    missingNodesError,
 
     // Clearing
     clearAllErrors,
@@ -291,16 +389,21 @@ export const useExecutionErrorStore = defineStore('executionError', () => {
     hasExecutionError,
     hasPromptError,
     hasNodeError,
+    hasMissingNodes,
     hasAnyError,
     allErrorExecutionIds,
     totalErrorCount,
     lastExecutionErrorNodeId,
     activeGraphErrorNodeIds,
+    activeMissingNodeGraphIds,
+
+    // Missing node actions
+    setMissingNodeTypes,
 
     // Lookup helpers
     getNodeErrors,
     slotHasError,
-    errorAncestorExecutionIds,
-    isContainerWithInternalError
+    isContainerWithInternalError,
+    isContainerWithMissingNode
   }
 })

src/types/comfy.ts

@@ -90,6 +90,9 @@ export type MissingNodeType =
   // Primarily used by group nodes.
   | {
       type: string
+      /** Graph node ID — used to locate this specific instance on the canvas. */
+      nodeId?: string | number
+      cnrId?: string
       hint?: string
       action?: {
         text: string

src/utils/nodeExecutionUtil.ts

@@ -0,0 +1,61 @@
+import type { NodeExecutionId } from '@/types/nodeIdentification'
+import type { ComfyNode } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { isSubgraphDefinition } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+/**
+ * Returns all ancestor execution IDs for a given execution ID, including itself.
+ *
+ * Example: "65:70:63" → ["65", "65:70", "65:70:63"]
+ */
+export function getAncestorExecutionIds(
+  executionId: string | NodeExecutionId
+): NodeExecutionId[] {
+  const parts = executionId.split(':')
+  return Array.from({ length: parts.length }, (_, i) =>
+    parts.slice(0, i + 1).join(':')
+  )
+}
+
+/**
+ * Returns all ancestor execution IDs for a given execution ID, excluding itself.
+ *
+ * Example: "65:70:63" → ["65", "65:70"]
+ */
+export function getParentExecutionIds(
+  executionId: string | NodeExecutionId
+): NodeExecutionId[] {
+  return getAncestorExecutionIds(executionId).slice(0, -1)
+}
+
+/** "def-A" → ["5", "10"] for each container node instantiating that subgraph definition. */
+export function buildSubgraphExecutionPaths(
+  rootNodes: ComfyNode[],
+  allSubgraphDefs: unknown[]
+): Map<string, string[]> {
+  const subgraphDefIds = new Set(
+    allSubgraphDefs.filter(isSubgraphDefinition).map((s) => s.id)
+  )
+  const pathMap = new Map<string, string[]>()
+
+  const build = (nodes: ComfyNode[], parentPrefix: string) => {
+    for (const n of nodes ?? []) {
+      if (typeof n.type !== 'string' || !subgraphDefIds.has(n.type)) continue
+      const path = parentPrefix ? `${parentPrefix}:${n.id}` : String(n.id)
+      const existing = pathMap.get(n.type)
+      if (existing) {
+        existing.push(path)
+      } else {
+        pathMap.set(n.type, [path])
+      }
+      const innerDef = allSubgraphDefs.find(
+        (s) => isSubgraphDefinition(s) && s.id === n.type
+      )
+      if (innerDef && isSubgraphDefinition(innerDef)) {
+        build(innerDef.nodes, path)
+      }
+    }
+  }
+
+  build(rootNodes, '')
+  return pathMap
+}

src/workbench/extensions/manager/components/ManagerProgressToast.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useEventListener, useScroll, whenever } from '@vueuse/core'
+import { useScroll, whenever } from '@vueuse/core'
 import Panel from 'primevue/panel'
 import TabMenu from 'primevue/tabmenu'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
@@ -8,18 +8,12 @@ import { useI18n } from 'vue-i18n'
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import HoneyToast from '@/components/honeyToast/HoneyToast.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import { api } from '@/scripts/api'
-import { useCommandStore } from '@/stores/commandStore'
-import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
-import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
+import { useApplyChanges } from '@/workbench/extensions/manager/composables/useApplyChanges'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 
 const { t } = useI18n()
 const comfyManagerStore = useComfyManagerStore()
-const settingStore = useSettingStore()
-const { runFullConflictAnalysis } = useConflictDetection()
+const { isRestarting, isRestartCompleted, applyChanges } = useApplyChanges()
 
 const isExpanded = ref(false)
 const activeTabIndex = ref(0)
@@ -42,9 +36,6 @@ const focusedLogs = computed(() => {
 
 const visible = computed(() => comfyManagerStore.taskLogs.length > 0)
 
-const isRestarting = ref(false)
-const isRestartCompleted = ref(false)
-
 const isInProgress = computed(
   () => comfyManagerStore.isProcessingTasks || isRestarting.value
 )
@@ -148,48 +139,7 @@ function closeToast() {
 }
 
 async function handleRestart() {
-  const originalToastSetting = settingStore.get(
-    'Comfy.Toast.DisableReconnectingToast'
-  )
-
-  try {
-    await settingStore.set('Comfy.Toast.DisableReconnectingToast', true)
-
-    isRestarting.value = true
-
-    const onReconnect = async () => {
-      try {
-        comfyManagerStore.setStale()
-        await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
-        await useWorkflowService().reloadCurrentWorkflow()
-        void runFullConflictAnalysis()
-      } finally {
-        await settingStore.set(
-          'Comfy.Toast.DisableReconnectingToast',
-          originalToastSetting
-        )
-        isRestarting.value = false
-        isRestartCompleted.value = true
-
-        setTimeout(() => {
-          closeToast()
-        }, 3000)
-      }
-    }
-
-    useEventListener(api, 'reconnected', onReconnect, { once: true })
-
-    await useComfyManagerService().rebootComfyUI()
-  } catch (error) {
-    await settingStore.set(
-      'Comfy.Toast.DisableReconnectingToast',
-      originalToastSetting
-    )
-    isRestarting.value = false
-    isRestartCompleted.value = false
-    closeToast()
-    throw error
-  }
+  await applyChanges(closeToast)
 }
 
 onMounted(() => {

src/workbench/extensions/manager/components/manager/ManagerDialog.vue

@@ -211,8 +211,9 @@ import { useManagerState } from '@/workbench/extensions/manager/composables/useM
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
-const { initialTab, onClose } = defineProps<{
+const { initialTab, initialPackId, onClose } = defineProps<{
   initialTab?: ManagerTab
+  initialPackId?: string
   onClose: () => void
 }>()
 
@@ -347,8 +348,17 @@ const {
   sortOptions
 } = useRegistrySearch({
   initialSortField: initialState.sortField,
-  initialSearchMode: initialState.searchMode,
-  initialSearchQuery: initialState.searchQuery
+  // Force 'packs' mode only when pre-filling search from a packId on non-Missing tabs
+  initialSearchMode:
+    initialPackId && initialTab !== ManagerTab.Missing
+      ? 'packs'
+      : initialState.searchMode,
+  // Missing tab always opens with empty search so all missing packs are visible.
+  // Other tabs use initialPackId as the pre-filled search query (or fall back to persisted state).
+  initialSearchQuery:
+    initialTab === ManagerTab.Missing
+      ? ''
+      : (initialPackId ?? initialState.searchQuery)
 })
 pageNumber.value = 0
 
@@ -475,6 +485,20 @@ watch(
   }
 )
 
+// Auto-select the pack matching initialPackId once displayPacks is populated.
+watch(
+  resultsWithKeys,
+  (packs) => {
+    if (!initialPackId) return
+    if (selectedNodePacks.value.length > 0) return
+    const target = packs.find((p) => p.id === initialPackId)
+    if (!target) return
+    selectedNodePacks.value = [target]
+    isRightPanelOpen.value = true
+  },
+  { immediate: true }
+)
+
 const getLoadingCount = () => {
   switch (selectedTab.value?.id) {
     case ManagerTab.AllInstalled:

src/workbench/extensions/manager/components/manager/button/PackInstallButton.vue

@@ -27,21 +27,15 @@ import DotSpinner from '@/components/common/DotSpinner.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { ButtonVariants } from '@/components/ui/button/button.variants'
 import type { components } from '@/types/comfyRegistryTypes'
-import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
-import { useNodeConflictDialog } from '@/workbench/extensions/manager/composables/useNodeConflictDialog'
-import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
-import type {
-  ConflictDetail,
-  ConflictDetectionResult
-} from '@/workbench/extensions/manager/types/conflictDetectionTypes'
-import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
+import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
 
 type NodePack = components['schemas']['Node']
 
 const {
   nodePacks,
   isLoading = false,
-  label = 'Install',
+  label,
   size = 'sm',
   hasConflict,
   conflictInfo
@@ -54,86 +48,13 @@ const {
   conflictInfo?: ConflictDetail[]
 }>()
 
-const managerStore = useComfyManagerStore()
-const { show: showNodeConflictDialog } = useNodeConflictDialog()
 const { t } = useI18n()
 
-// Check if any of the packs are currently being installed
-const isInstalling = computed(() => {
-  if (!nodePacks?.length) return false
-  return nodePacks.some((pack) => managerStore.isPackInstalling(pack.id))
-})
-
-const createPayload = (installItem: NodePack) => {
-  if (!installItem.id) {
-    throw new Error('Node ID is required for installation')
-  }
-
-  const isUnclaimedPack = installItem.publisher?.name === 'Unclaimed'
-  const versionToInstall = isUnclaimedPack
-    ? ('nightly' as ManagerComponents['schemas']['SelectedVersion'])
-    : (installItem.latest_version?.version ??
-      ('latest' as ManagerComponents['schemas']['SelectedVersion']))
-
-  return {
-    id: installItem.id,
-    repository: installItem.repository ?? '',
-    channel: 'dev' as ManagerComponents['schemas']['ManagerChannel'],
-    mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
-    selected_version: versionToInstall,
-    version: versionToInstall
-  }
-}
-
-const installPack = (item: NodePack) =>
-  managerStore.installPack.call(createPayload(item))
-
-const installAllPacks = async () => {
-  if (!nodePacks?.length) return
-
-  if (hasConflict && conflictInfo) {
-    // Check each package individually for conflicts
-    const { checkNodeCompatibility } = useConflictDetection()
-    const conflictedPackages: ConflictDetectionResult[] = nodePacks
-      .map((pack) => {
-        const compatibilityCheck = checkNodeCompatibility(pack)
-        return {
-          package_id: pack.id || '',
-          package_name: pack.name || '',
-          has_conflict: compatibilityCheck.hasConflict,
-          conflicts: compatibilityCheck.conflicts,
-          is_compatible: !compatibilityCheck.hasConflict
-        }
-      })
-      .filter((result) => result.has_conflict) // Only show packages with conflicts
-
-    showNodeConflictDialog({
-      conflictedPackages,
-      buttonText: t('manager.conflicts.installAnyway'),
-      onButtonClick: async () => {
-        // Proceed with installation of uninstalled packages
-        const uninstalledPacks = nodePacks.filter(
-          (pack) => !managerStore.isPackInstalled(pack.id)
-        )
-        if (!uninstalledPacks.length) return
-        await performInstallation(uninstalledPacks)
-      }
-    })
-    return
-  }
-
-  // No conflicts or conflicts acknowledged - proceed with installation
-  const uninstalledPacks = nodePacks.filter(
-    (pack) => !managerStore.isPackInstalled(pack.id)
-  )
-  if (!uninstalledPacks.length) return
-  await performInstallation(uninstalledPacks)
-}
-
-const performInstallation = async (packs: NodePack[]) => {
-  await Promise.all(packs.map(installPack))
-  managerStore.installPack.clear()
-}
+const { isInstalling, installAllPacks } = usePackInstall(
+  () => nodePacks,
+  () => hasConflict,
+  () => conflictInfo
+)
 
 const computedLabel = computed(() =>
   isInstalling.value

src/workbench/extensions/manager/composables/nodePack/usePackInstall.ts

@@ -0,0 +1,107 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { components } from '@/types/comfyRegistryTypes'
+import type { components as ManagerComponents } from '@/workbench/extensions/manager/types/generatedManagerTypes'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useNodeConflictDialog } from '@/workbench/extensions/manager/composables/useNodeConflictDialog'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+import type { ConflictDetail } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
+
+type NodePack = components['schemas']['Node']
+
+export function usePackInstall(
+  getNodePacks: () => NodePack[],
+  getHasConflict?: () => boolean | undefined,
+  getConflictInfo?: () => ConflictDetail[] | undefined
+) {
+  const managerStore = useComfyManagerStore()
+  const { show: showNodeConflictDialog } = useNodeConflictDialog()
+  const { checkNodeCompatibility } = useConflictDetection()
+  const { t } = useI18n()
+
+  // Check if any of the packs are currently being installed
+  const isInstalling = computed(() => {
+    const nodePacks = getNodePacks()
+    if (!nodePacks?.length) return false
+    return nodePacks.some((pack) => managerStore.isPackInstalling(pack.id))
+  })
+
+  const createPayload = (installItem: NodePack) => {
+    if (!installItem.id) {
+      throw new Error(t('manager.packInstall.nodeIdRequired'))
+    }
+
+    const isUnclaimedPack = installItem.publisher?.name === 'Unclaimed'
+    const versionToInstall = isUnclaimedPack
+      ? ('nightly' as ManagerComponents['schemas']['SelectedVersion'])
+      : (installItem.latest_version?.version ??
+        ('latest' as ManagerComponents['schemas']['SelectedVersion']))
+
+    return {
+      id: installItem.id,
+      repository: installItem.repository ?? '',
+      channel: 'dev' as ManagerComponents['schemas']['ManagerChannel'],
+      mode: 'cache' as ManagerComponents['schemas']['ManagerDatabaseSource'],
+      selected_version: versionToInstall,
+      version: versionToInstall
+    }
+  }
+
+  const installPack = (item: NodePack) =>
+    managerStore.installPack.call(createPayload(item))
+
+  const performInstallation = async (packs: NodePack[]) => {
+    try {
+      await Promise.all(packs.map(installPack))
+    } finally {
+      managerStore.installPack.clear()
+    }
+  }
+
+  const installAllPacks = async () => {
+    const nodePacks = getNodePacks()
+    if (!nodePacks?.length) return
+
+    const hasConflict = getHasConflict?.()
+    const conflictInfo = getConflictInfo?.()
+
+    if (hasConflict) {
+      if (!conflictInfo) return
+
+      const conflictedPackages = nodePacks
+        .map((pack) => {
+          const compatibilityCheck = checkNodeCompatibility(pack)
+          return {
+            package_id: pack.id || '',
+            package_name: pack.name || '',
+            has_conflict: compatibilityCheck.hasConflict,
+            conflicts: compatibilityCheck.conflicts,
+            is_compatible: !compatibilityCheck.hasConflict
+          }
+        })
+        .filter((result) => result.has_conflict)
+
+      showNodeConflictDialog({
+        conflictedPackages,
+        buttonText: t('manager.conflicts.installAnyway'),
+        onButtonClick: async () => {
+          const uninstalledPacks = nodePacks.filter(
+            (pack) => !managerStore.isPackInstalled(pack.id)
+          )
+          if (!uninstalledPacks.length) return
+          await performInstallation(uninstalledPacks)
+        }
+      })
+      return
+    }
+
+    const uninstalledPacks = nodePacks.filter(
+      (pack) => !managerStore.isPackInstalled(pack.id)
+    )
+    if (!uninstalledPacks.length) return
+    await performInstallation(uninstalledPacks)
+  }
+
+  return { isInstalling, installAllPacks, performInstallation }
+}

src/workbench/extensions/manager/composables/useApplyChanges.ts

@@ -0,0 +1,77 @@
+import { createSharedComposable, useEventListener } from '@vueuse/core'
+import { ref } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
+import { api } from '@/scripts/api'
+import { useCommandStore } from '@/stores/commandStore'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
+import { useComfyManagerService } from '@/workbench/extensions/manager/services/comfyManagerService'
+import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
+
+export const useApplyChanges = createSharedComposable(() => {
+  const comfyManagerStore = useComfyManagerStore()
+  const settingStore = useSettingStore()
+  const { runFullConflictAnalysis } = useConflictDetection()
+
+  const isRestarting = ref(false)
+  const isRestartCompleted = ref(false)
+
+  async function applyChanges(onClose?: () => void) {
+    if (isRestarting.value) return
+
+    isRestarting.value = true
+    isRestartCompleted.value = false
+
+    const originalToastSetting = settingStore.get(
+      'Comfy.Toast.DisableReconnectingToast'
+    )
+    const onReconnect = async () => {
+      try {
+        comfyManagerStore.setStale()
+        await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+        await useWorkflowService().reloadCurrentWorkflow()
+        runFullConflictAnalysis().catch((err) => {
+          console.error('[useApplyChanges] Conflict analysis failed:', err)
+        })
+      } catch (err) {
+        console.error('[useApplyChanges] Post-reconnect tasks failed:', err)
+      } finally {
+        await settingStore.set(
+          'Comfy.Toast.DisableReconnectingToast',
+          originalToastSetting
+        )
+        isRestarting.value = false
+        isRestartCompleted.value = true
+
+        setTimeout(() => {
+          onClose?.()
+        }, 3000)
+      }
+    }
+
+    const stopReconnectListener = useEventListener(
+      api,
+      'reconnected',
+      onReconnect,
+      { once: true }
+    )
+
+    try {
+      await settingStore.set('Comfy.Toast.DisableReconnectingToast', true)
+      await useComfyManagerService().rebootComfyUI()
+    } catch (error) {
+      stopReconnectListener()
+      await settingStore.set(
+        'Comfy.Toast.DisableReconnectingToast',
+        originalToastSetting
+      )
+      isRestarting.value = false
+      isRestartCompleted.value = false
+      onClose?.()
+      throw error
+    }
+  }
+
+  return { isRestarting, isRestartCompleted, applyChanges }
+})

src/workbench/extensions/manager/composables/useManagerDialog.ts

@@ -13,13 +13,14 @@ export function useManagerDialog() {
     dialogStore.closeDialog({ key: DIALOG_KEY })
   }
 
-  function show(initialTab?: ManagerTab) {
+  function show(initialTab?: ManagerTab, initialPackId?: string) {
     dialogService.showLayoutDialog({
       key: DIALOG_KEY,
       component: ManagerDialog,
       props: {
         onClose: hide,
-        initialTab
+        initialTab,
+        initialPackId
       }
     })
   }

src/workbench/extensions/manager/composables/useManagerState.ts

@@ -8,7 +8,7 @@ import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDi
 import { useCommandStore } from '@/stores/commandStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { useManagerDialog } from '@/workbench/extensions/manager/composables/useManagerDialog'
-import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
+import type { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 export enum ManagerUIState {
   DISABLED = 'disabled',
@@ -143,6 +143,7 @@ export function useManagerState() {
    */
   const openManager = async (options?: {
     initialTab?: ManagerTab
+    initialPackId?: string
     legacyCommand?: string
     showToastOnLegacyError?: boolean
     isLegacyOnly?: boolean
@@ -181,16 +182,14 @@ export function useManagerState() {
 
       case ManagerUIState.NEW_UI:
         if (options?.isLegacyOnly) {
-          // Legacy command is not available in NEW_UI mode
           useToastStore().add({
             severity: 'error',
             summary: t('g.error'),
             detail: t('manager.legacyMenuNotAvailable'),
             life: 3000
           })
-          await managerDialog.show(ManagerTab.All)
         } else {
-          await managerDialog.show(options?.initialTab)
+          managerDialog.show(options?.initialTab, options?.initialPackId)
         }
         break
     }