[feat] Add missing nodes warning UI to queue button and breadcrumb

Display visual warnings when workflow contains missing nodes.

Key changes:
- Convert useMissingNodes to singleton with createSharedComposable
- Add activeWorkflow watch for automatic updates on workflow changes
- Add warning icon + disabled state + tooltip to ComfyQueueButton
- Add warning icon + tooltip to root SubgraphBreadcrumbItem
- Add i18n keys (menu.runWorkflowDisabled, breadcrumbsMenu.missingNodesWarning)

Technical rationale:
- createSharedComposable: All components share same instance, prevents duplicate API calls
- watch: Ensures persistent components (ComfyQueueButton) update automatically on workflow changes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: viva-jinyi

src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue

@@ -2,21 +2,24 @@
   <div class="queue-button-group flex">
     <SplitButton
       v-tooltip.bottom="{
-        value: workspaceStore.shiftDown
-          ? $t('menu.runWorkflowFront')
-          : $t('menu.runWorkflow'),
+        value: queueButtonTooltip,
         showDelay: 600
       }"
       class="comfyui-queue-button"
       :label="String(activeQueueModeMenuItem?.label ?? '')"
       severity="primary"
       size="small"
       :model="queueModeMenuItems"
+      :disabled="hasMissingNodes"
       data-testid="queue-button"
       @click="queuePrompt"
     >
       <template #icon>
-        <i v-if="workspaceStore.shiftDown" class="icon-[lucide--list-start]" />
+        <i v-if="hasMissingNodes" class="icon-[lucide--triangle-alert]" />
+        <i
+          v-else-if="workspaceStore.shiftDown"
+          class="icon-[lucide--list-start]"
+        />
         <i v-else-if="queueMode === 'disabled'" class="icon-[lucide--play]" />
         <i
           v-else-if="queueMode === 'instant'"
@@ -95,13 +98,16 @@ import {
   useQueueSettingsStore
 } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 
 import BatchCountEdit from '../BatchCountEdit.vue'
 
 const workspaceStore = useWorkspaceStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
 const { mode: queueMode, batchCount } = storeToRefs(useQueueSettingsStore())
 
+const { hasMissingNodes } = useMissingNodes()
+
 const { t } = useI18n()
 const queueModeMenuItemLookup = computed(() => {
   const items: Record<string, MenuItem> = {
@@ -157,6 +163,16 @@ const hasPendingTasks = computed(
   () => queueCountStore.count.value > 1 || queueMode.value !== 'disabled'
 )
 
+const queueButtonTooltip = computed(() => {
+  if (hasMissingNodes.value) {
+    return t('menu.runWorkflowDisabled')
+  }
+  if (workspaceStore.shiftDown) {
+    return t('menu.runWorkflowFront')
+  }
+  return t('menu.runWorkflow')
+})
+
 const commandStore = useCommandStore()
 const queuePrompt = async (e: Event) => {
   const isShiftPressed = 'shiftKey' in e && e.shiftKey

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -2,7 +2,7 @@
   <a
     ref="wrapperRef"
     v-tooltip.bottom="{
-      value: item.label,
+      value: tooltipText,
       showDelay: 512
     }"
     draggable="false"
@@ -16,6 +16,10 @@
     }"
     @click="handleClick"
   >
+    <i
+      v-if="hasMissingNodes && isRoot"
+      class="icon-[lucide--triangle-alert] text-gold-600"
+    />
     <span class="p-breadcrumb-item-label px-2">{{ item.label }}</span>
     <Tag v-if="item.isBlueprint" :value="'Blueprint'" severity="primary" />
     <i v-if="isActive" class="pi pi-angle-down text-[10px]"></i>
@@ -64,6 +68,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { appendJsonExt } from '@/utils/formatUtil'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 
 interface Props {
   item: MenuItem
@@ -74,6 +79,8 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false
 })
 
+const { hasMissingNodes } = useMissingNodes()
+
 const { t } = useI18n()
 const menu = ref<InstanceType<typeof Menu> & MenuState>()
 const dialogService = useDialogService()
@@ -115,6 +122,14 @@ const rename = async (
 }
 
 const isRoot = props.item.key === 'root'
+
+const tooltipText = computed(() => {
+  if (hasMissingNodes.value && isRoot) {
+    return t('breadcrumbsMenu.missingNodesWarning')
+  }
+  return props.item.label
+})
+
 const menuItems = computed<MenuItem[]>(() => {
   return [
     {

src/locales/en/main.json

@@ -737,6 +737,7 @@
     "onChangeTooltip": "The workflow will be queued once a change is made",
     "runWorkflow": "Run workflow (Shift to queue at front)",
     "runWorkflowFront": "Run workflow (Queue at front)",
+    "runWorkflowDisabled": "Workflow contains unsupported nodes (highlighted red). Remove these to run the workflow.",
     "run": "Run",
     "execute": "Execute",
     "interrupt": "Cancel current run",
@@ -1850,7 +1851,8 @@
     "clearWorkflow": "Clear Workflow",
     "deleteWorkflow": "Delete Workflow",
     "deleteBlueprint": "Delete Blueprint",
-    "enterNewName": "Enter new name"
+    "enterNewName": "Enter new name",
+    "missingNodesWarning": "Workflow contains unsupported nodes (highlighted red)."
   },
   "shortcuts": {
     "shortcuts": "Shortcuts",

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

@@ -1,8 +1,10 @@
 import { groupBy } from 'es-toolkit/compat'
-import { computed, onMounted } from 'vue'
+import { createSharedComposable } from '@vueuse/core'
+import { computed, onMounted, watch } from 'vue'
 
 import type { NodeProperty } from '@/lib/litegraph/src/LGraphNode'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { components } from '@/types/comfyRegistryTypes'
@@ -14,10 +16,12 @@ import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comf
  * Composable to find missing NodePacks from workflow
  * Uses the same filtering approach as ManagerDialogContent.vue
  * Automatically fetches workflow pack data when initialized
+ * This is a shared singleton composable - all components use the same instance
  */
-export const useMissingNodes = () => {
+export const useMissingNodes = createSharedComposable(() => {
   const nodeDefStore = useNodeDefStore()
   const comfyManagerStore = useComfyManagerStore()
+  const workflowStore = useWorkflowStore()
   const { workflowPacks, isLoading, error, startFetchWorkflowPacks } =
     useWorkflowPacks()
 
@@ -61,17 +65,36 @@ export const useMissingNodes = () => {
     return groupBy(missingNodes, (node) => String(node.properties?.ver || ''))
   })
 
+  // Check if workflow has any missing nodes
+  const hasMissingNodes = computed(() => {
+    return (
+      missingNodePacks.value.length > 0 ||
+      Object.keys(missingCoreNodes.value).length > 0
+    )
+  })
+
   // Automatically fetch workflow pack data when composable is used
   onMounted(async () => {
     if (!workflowPacks.value.length && !isLoading.value) {
       await startFetchWorkflowPacks()
     }
   })
 
+  // Re-fetch workflow packs when active workflow changes
+  watch(
+    () => workflowStore.activeWorkflow,
+    async (newWorkflow, oldWorkflow) => {
+      if (newWorkflow !== oldWorkflow) {
+        await startFetchWorkflowPacks()
+      }
+    }
+  )
+
   return {
     missingNodePacks,
     missingCoreNodes,
+    hasMissingNodes,
     isLoading,
     error
   }
-}
+})