[1.24.x] Cherry-pick post-1.24.2 fixes including subgraph improvements (#4672)

Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> Co-authored-by: Terry Jia <terryjia88@gmail.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
2026-02-25 17:24:07 +00:00 · 2025-08-04 09:49:54 -07:00
parent 309a5b8c9a
commit 6eb5a2e010
88 changed files with 6218 additions and 554 deletions
--- a/src/assets/icons/README.md
+++ b/src/assets/icons/README.md
@@ -0,0 +1,184 @@
+# ComfyUI Custom Icons Guide
+
+This guide explains how to add and use custom SVG icons in the ComfyUI frontend.
+
+## Overview
+
+ComfyUI uses a hybrid icon system that supports:
+- **PrimeIcons** - Legacy icon library (CSS classes like `pi pi-plus`)
+- **Iconify** - Modern icon system with 200,000+ icons
+- **Custom Icons** - Your own SVG icons
+
+Custom icons are powered by [unplugin-icons](https://github.com/unplugin/unplugin-icons) and integrate seamlessly with Vue's component system.
+
+## Quick Start
+
+### 1. Add Your SVG Icon
+
+Place your SVG file in the `custom/` directory:
+```
+src/assets/icons/custom/
+└── your-icon.svg
+```
+
+### 2. Use in Components
+
+```vue
+<template>
+  <!-- Use as a Vue component -->
+  <i-comfy:your-icon />
+  
+  <!-- In a PrimeVue button -->
+  <Button>
+    <template #icon>
+      <i-comfy:your-icon />
+    </template>
+  </Button>
+</template>
+```
+
+## SVG Requirements
+
+### File Naming
+- Use kebab-case: `workflow-icon.svg`, `node-tree.svg`
+- Avoid special characters and spaces
+- The filename becomes the icon name
+
+### SVG Format
+```xml
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="..." />
+</svg>
+```
+
+**Important:**
+- Use `viewBox` for proper scaling (24x24 is standard)
+- Don't include `width` or `height` attributes
+- Use `currentColor` for theme-aware icons
+- Keep SVGs optimized and simple
+
+### Color Theming
+
+For icons that adapt to the current theme, use `currentColor`:
+
+```xml
+<!-- ✅ Good: Uses currentColor -->
+<svg viewBox="0 0 24 24">
+  <path stroke="currentColor" fill="none" d="..." />
+</svg>
+
+<!-- ❌ Bad: Hardcoded colors -->
+<svg viewBox="0 0 24 24">
+  <path stroke="white" fill="black" d="..." />
+</svg>
+```
+
+## Usage Examples
+
+### Basic Icon
+```vue
+<i-comfy:workflow />
+```
+
+### With Classes
+```vue
+<i-comfy:workflow class="text-2xl text-blue-500" />
+```
+
+### In Buttons
+```vue
+<Button severity="secondary" text>
+  <template #icon>
+    <i-comfy:workflow />
+  </template>
+</Button>
+```
+
+### Conditional Icons
+```vue
+<template #icon>
+  <i-comfy:workflow v-if="isWorkflow" />
+  <i-comfy:node v-else />
+</template>
+```
+
+## Technical Details
+
+### How It Works
+
+1. **unplugin-icons** automatically discovers SVG files in `custom/`
+2. During build, SVGs are converted to Vue components
+3. Components are tree-shaken - only used icons are bundled
+4. The `i-` prefix and `comfy:` namespace identify custom icons
+
+### Configuration
+
+The icon system is configured in `vite.config.mts`:
+
+```typescript
+Icons({
+  compiler: 'vue3',
+  customCollections: {
+    'comfy': FileSystemIconLoader('src/assets/icons/custom'),
+  }
+})
+```
+
+### TypeScript Support
+
+Icons are automatically typed. If TypeScript doesn't recognize a new icon:
+1. Restart your dev server
+2. Check that the SVG file is valid
+3. Ensure the filename follows kebab-case convention
+
+## Troubleshooting
+
+### Icon Not Showing
+1. **Check filename**: Must be kebab-case without special characters
+2. **Restart dev server**: Required after adding new icons
+3. **Verify SVG**: Ensure it's valid SVG syntax
+4. **Check console**: Look for Vue component resolution errors
+
+### Icon Wrong Color
+- Replace hardcoded colors with `currentColor`
+- Use `stroke="currentColor"` for outlines
+- Use `fill="currentColor"` for filled shapes
+
+### Icon Wrong Size
+- Remove `width` and `height` from SVG
+- Ensure `viewBox` is present
+- Use CSS classes for sizing: `class="w-6 h-6"`
+
+## Best Practices
+
+1. **Optimize SVGs**: Use tools like [SVGO](https://jakearchibald.github.io/svgomg/) to minimize file size
+2. **Consistent viewBox**: Stick to 24x24 or 16x16 for consistency
+3. **Semantic names**: Use descriptive names like `workflow-duplicate` not `icon1`
+4. **Theme support**: Always use `currentColor` for adaptable icons
+5. **Test both themes**: Verify icons look good in light and dark modes
+
+## Migration from PrimeIcons
+
+When replacing a PrimeIcon with a custom icon:
+
+```vue
+<!-- Before: PrimeIcon -->
+<Button icon="pi pi-box" />
+
+<!-- After: Custom icon -->
+<Button>
+  <template #icon>
+    <i-comfy:workflow />
+  </template>
+</Button>
+```
+
+## Adding Icon Collections
+
+To add an entire icon set from npm:
+
+1. Install the icon package
+2. Configure in `vite.config.mts`
+3. Use with the appropriate prefix
+
+See the [unplugin-icons documentation](https://github.com/unplugin/unplugin-icons) for details.
--- a/src/assets/icons/custom/workflow.svg
+++ b/src/assets/icons/custom/workflow.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5V3C14 2.44772 13.5523 2 13 2H11C10.4477 2 10 2.44772 10 3V5C10 5.55228 10.4477 6 11 6H13C13.5523 6 14 5.55228 14 5Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M6 5V3C6 2.44772 5.55228 2 5 2H3C2.44772 2 2 2.44772 2 3V5C2 5.55228 2.44772 6 3 6H5C5.55228 6 6 5.55228 6 5Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M14 13V11C14 10.4477 13.5523 10 13 10H11C10.4477 10 10 10.4477 10 11V13C10 13.5523 10.4477 14 11 14H13C13.5523 14 14 13.5523 14 13Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M10 4H6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M10 12H8C5.79086 12 4 10.2091 4 8V6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -19,6 +19,7 @@ import { computed } from 'vue'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
+import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'

 const workflowStore = useWorkflowStore()
 const navigationStore = useSubgraphNavigationStore()
@@ -35,6 +36,14 @@ const items = computed(() => {
      if (!canvas.graph) throw new TypeError('Canvas has no graph')

      canvas.setGraph(subgraph)
+    },
+    updateTitle: (title: string) => {
+      const rootGraph = useCanvasStore().getCanvas().graph?.rootGraph
+      if (!rootGraph) return
+
+      forEachSubgraphNode(rootGraph, subgraph.id, (node) => {
+        node.title = title
+      })
    }
  }))
 })
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -19,6 +19,12 @@
        <SubgraphBreadcrumb />
      </div>
      <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
+
+      <MiniMap
+        v-if="comfyAppReady && minimapEnabled"
+        ref="minimapRef"
+        class="pointer-events-auto"
+      />
    </template>
  </LiteGraphCanvasSplitterOverlay>
  <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
@@ -53,6 +59,7 @@ import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
+import MiniMap from '@/components/graph/MiniMap.vue'
 import NodeTooltip from '@/components/graph/NodeTooltip.vue'
 import SelectionOverlay from '@/components/graph/SelectionOverlay.vue'
 import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
@@ -67,6 +74,7 @@ import { useContextMenuTranslation } from '@/composables/useContextMenuTranslati
 import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
+import { useMinimap } from '@/composables/useMinimap'
 import { usePaste } from '@/composables/usePaste'
 import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
@@ -113,6 +121,10 @@ const selectionToolboxEnabled = computed(() =>
  settingStore.get('Comfy.Canvas.SelectionToolbox')
 )

+const minimapRef = ref<InstanceType<typeof MiniMap>>()
+const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
+const minimap = useMinimap()
+
 watchEffect(() => {
  nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })
@@ -348,6 +360,13 @@ onMounted(async () => {
    }
  )

+  whenever(
+    () => minimapRef.value,
+    (ref) => {
+      minimap.setMinimapRef(ref)
+    }
+  )
+
  whenever(
    () => useCanvasStore().canvas,
    (canvas) => {
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -56,6 +56,15 @@
      data-testid="toggle-link-visibility-button"
      @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
    />
+    <Button
+      v-tooltip.left="t('graphCanvasMenu.toggleMinimap') + ' (Alt + m)'"
+      severity="secondary"
+      :icon="'pi pi-map'"
+      :aria-label="$t('graphCanvasMenu.toggleMinimap')"
+      :class="{ 'minimap-active': minimapVisible }"
+      data-testid="toggle-minimap-button"
+      @click="() => commandStore.execute('Comfy.Canvas.ToggleMinimap')"
+    />
  </ButtonGroup>
 </template>

@@ -75,6 +84,7 @@ const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const settingStore = useSettingStore()

+const minimapVisible = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 const linkHidden = computed(
  () => settingStore.get('Comfy.LinkRenderMode') === LiteGraph.HIDDEN_LINK
 )
@@ -107,4 +117,15 @@ const stopRepeat = () => {
  margin: 0;
  border-radius: 0;
 }
+
+.p-button.minimap-active {
+  background-color: var(--p-button-primary-background);
+  border-color: var(--p-button-primary-border-color);
+  color: var(--p-button-primary-color);
+}
+
+.p-button.minimap-active:hover {
+  background-color: var(--p-button-primary-hover-background);
+  border-color: var(--p-button-primary-hover-border-color);
+}
 </style>
--- a/src/components/graph/MiniMap.vue
+++ b/src/components/graph/MiniMap.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    v-if="visible && initialized"
+    ref="containerRef"
+    class="litegraph-minimap absolute bottom-[20px] right-[90px] z-[1000]"
+    :style="containerStyles"
+    @mousedown="handleMouseDown"
+    @mousemove="handleMouseMove"
+    @mouseup="handleMouseUp"
+    @mouseleave="handleMouseUp"
+    @wheel="handleWheel"
+  >
+    <canvas
+      ref="canvasRef"
+      :width="width"
+      :height="height"
+      class="minimap-canvas"
+    />
+    <div class="minimap-viewport" :style="viewportStyles" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, watch } from 'vue'
+
+import { useMinimap } from '@/composables/useMinimap'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const minimap = useMinimap()
+const canvasStore = useCanvasStore()
+
+const {
+  initialized,
+  visible,
+  containerRef,
+  canvasRef,
+  containerStyles,
+  viewportStyles,
+  width,
+  height,
+  init,
+  destroy,
+  handleMouseDown,
+  handleMouseMove,
+  handleMouseUp,
+  handleWheel
+} = minimap
+
+watch(
+  () => canvasStore.canvas,
+  async (canvas) => {
+    if (canvas && !initialized.value) {
+      await init()
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(async () => {
+  if (canvasStore.canvas) {
+    await init()
+  }
+})
+
+onUnmounted(() => {
+  destroy()
+})
+</script>
+
+<style scoped>
+.litegraph-minimap {
+  overflow: hidden;
+}
+
+.minimap-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.minimap-viewport {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+</style>
--- a/src/components/graph/SelectionOverlay.vue
+++ b/src/components/graph/SelectionOverlay.vue
@@ -17,26 +17,28 @@ import { createBounds } from '@comfyorg/litegraph'
 import { whenever } from '@vueuse/core'
 import { ref, watch } from 'vue'

+import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { useCanvasStore } from '@/stores/graphStore'

 const canvasStore = useCanvasStore()
 const { style, updatePosition } = useAbsolutePosition()
+const { getSelectableItems } = useSelectedLiteGraphItems()

 const visible = ref(false)
 const showBorder = ref(false)

 const positionSelectionOverlay = () => {
-  const { selectedItems } = canvasStore.getCanvas()
-  showBorder.value = selectedItems.size > 1
+  const selectableItems = getSelectableItems()
+  showBorder.value = selectableItems.size > 1

-  if (!selectedItems.size) {
+  if (!selectableItems.size) {
    visible.value = false
    return
  }

  visible.value = true
-  const bounds = createBounds(selectedItems)
+  const bounds = createBounds(selectableItems)
  if (bounds) {
    updatePosition({
      pos: [bounds[0], bounds[1]],
@@ -45,7 +47,6 @@ const positionSelectionOverlay = () => {
  }
 }

-// Register listener on canvas creation.
 whenever(
  () => canvasStore.getCanvas().state.selectionChanged,
  () => {
--- a/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
+++ b/src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue
@@ -7,9 +7,12 @@
    }"
    severity="secondary"
    text
-    icon="pi pi-box"
    @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
-  />
+  >
+    <template #icon>
+      <i-lucide:shrink />
+    </template>
+  </Button>
 </template>

 <script setup lang="ts">
--- a/src/composables/canvas/useCanvasTransformSync.ts
+++ b/src/composables/canvas/useCanvasTransformSync.ts
@@ -0,0 +1,136 @@
+import { LGraphCanvas } from '@comfyorg/litegraph'
+import { onUnmounted, ref } from 'vue'
+
+import { useCanvasStore } from '@/stores/graphStore'
+
+interface CanvasTransformSyncOptions {
+  /**
+   * Whether to automatically start syncing when canvas is available
+   * @default true
+   */
+  autoStart?: boolean
+  /**
+   * Called when sync starts
+   */
+  onStart?: () => void
+  /**
+   * Called when sync stops
+   */
+  onStop?: () => void
+}
+
+interface CanvasTransform {
+  scale: number
+  offsetX: number
+  offsetY: number
+}
+
+/**
+ * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
+ *
+ * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
+ * on every frame. It handles RAF lifecycle management, and ensures proper cleanup.
+ *
+ * The sync function typically reads canvas.ds properties like offset and scale to keep
+ * Vue components aligned with the canvas coordinate system.
+ *
+ * @example
+ * ```ts
+ * const syncWithCanvas = (canvas: LGraphCanvas) => {
+ *   canvas.ds.scale
+ *   canvas.ds.offset
+ * }
+ *
+ * const { isActive, startSync, stopSync } = useCanvasTransformSync(
+ *   syncWithCanvas,
+ *   {
+ *     autoStart: false,
+ *     onStart: () => emit('rafStatusChange', true),
+ *     onStop: () => emit('rafStatusChange', false)
+ *   }
+ * )
+ * ```
+ */
+export function useCanvasTransformSync(
+  syncFn: (canvas: LGraphCanvas) => void,
+  options: CanvasTransformSyncOptions = {}
+) {
+  const { onStart, onStop, autoStart = true } = options
+  const { getCanvas } = useCanvasStore()
+
+  const isActive = ref(false)
+  let rafId: number | null = null
+  let lastTransform: CanvasTransform = {
+    scale: 0,
+    offsetX: 0,
+    offsetY: 0
+  }
+
+  const hasTransformChanged = (canvas: LGraphCanvas): boolean => {
+    const ds = canvas.ds
+    return (
+      ds.scale !== lastTransform.scale ||
+      ds.offset[0] !== lastTransform.offsetX ||
+      ds.offset[1] !== lastTransform.offsetY
+    )
+  }
+
+  const sync = () => {
+    if (!isActive.value) return
+
+    const canvas = getCanvas()
+    if (!canvas) return
+
+    try {
+      // Only run sync if transform actually changed
+      if (hasTransformChanged(canvas)) {
+        lastTransform = {
+          scale: canvas.ds.scale,
+          offsetX: canvas.ds.offset[0],
+          offsetY: canvas.ds.offset[1]
+        }
+
+        syncFn(canvas)
+      }
+    } catch (error) {
+      console.error('Canvas transform sync error:', error)
+    }
+
+    rafId = requestAnimationFrame(sync)
+  }
+
+  const startSync = () => {
+    if (isActive.value) return
+
+    isActive.value = true
+    onStart?.()
+
+    // Reset last transform to force initial sync
+    lastTransform = { scale: 0, offsetX: 0, offsetY: 0 }
+
+    sync()
+  }
+
+  const stopSync = () => {
+    isActive.value = false
+
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+
+    onStop?.()
+  }
+
+  onUnmounted(stopSync)
+
+  if (autoStart) {
+    startSync()
+  }
+
+  return {
+    isActive,
+    startSync,
+    stopSync
+  }
+}
--- a/src/composables/canvas/useSelectedLiteGraphItems.ts
+++ b/src/composables/canvas/useSelectedLiteGraphItems.ts
@@ -0,0 +1,162 @@
+import {
+  LGraphEventMode,
+  LGraphNode,
+  Positionable,
+  Reroute
+} from '@comfyorg/litegraph'
+
+import { app } from '@/scripts/app'
+import { useCanvasStore } from '@/stores/graphStore'
+import {
+  collectFromNodes,
+  traverseNodesDepthFirst
+} from '@/utils/graphTraversalUtil'
+
+/**
+ * Composable for handling selected LiteGraph items filtering and operations.
+ * This provides utilities for working with selected items on the canvas,
+ * including filtering out items that should not be included in selection operations.
+ */
+export function useSelectedLiteGraphItems() {
+  const canvasStore = useCanvasStore()
+
+  /**
+   * Items that should not show in the selection overlay are ignored.
+   * @param item - The item to check.
+   * @returns True if the item should be ignored, false otherwise.
+   */
+  const isIgnoredItem = (item: Positionable): boolean => {
+    return item instanceof Reroute
+  }
+
+  /**
+   * Filter out items that should not show in the selection overlay.
+   * @param items - The Set of items to filter.
+   * @returns The filtered Set of items.
+   */
+  const filterSelectableItems = (
+    items: Set<Positionable>
+  ): Set<Positionable> => {
+    const result = new Set<Positionable>()
+    for (const item of items) {
+      if (!isIgnoredItem(item)) {
+        result.add(item)
+      }
+    }
+    return result
+  }
+
+  /**
+   * Get the filtered selected items from the canvas.
+   * @returns The filtered Set of selected items.
+   */
+  const getSelectableItems = (): Set<Positionable> => {
+    const { selectedItems } = canvasStore.getCanvas()
+    return filterSelectableItems(selectedItems)
+  }
+
+  /**
+   * Check if there are any selectable items.
+   * @returns True if there are selectable items, false otherwise.
+   */
+  const hasSelectableItems = (): boolean => {
+    return getSelectableItems().size > 0
+  }
+
+  /**
+   * Check if there are multiple selectable items.
+   * @returns True if there are multiple selectable items, false otherwise.
+   */
+  const hasMultipleSelectableItems = (): boolean => {
+    return getSelectableItems().size > 1
+  }
+
+  /**
+   * Get only the selected nodes (LGraphNode instances) from the canvas.
+   * This filters out other types of selected items like groups or reroutes.
+   * If a selected node is a subgraph, this also includes all nodes within it.
+   * @returns Array of selected LGraphNode instances and their descendants.
+   */
+  const getSelectedNodes = (): LGraphNode[] => {
+    const selectedNodes = app.canvas.selected_nodes
+    if (!selectedNodes) return []
+
+    // Convert selected_nodes object to array, preserving order
+    const nodeArray: LGraphNode[] = []
+    for (const i in selectedNodes) {
+      nodeArray.push(selectedNodes[i])
+    }
+
+    // Check if any selected nodes are subgraphs
+    const hasSubgraphs = nodeArray.some(
+      (node) => node.isSubgraphNode?.() && node.subgraph
+    )
+
+    // If no subgraphs, just return the array directly to preserve order
+    if (!hasSubgraphs) {
+      return nodeArray
+    }
+
+    // Use collectFromNodes to get all nodes including those in subgraphs
+    return collectFromNodes(nodeArray)
+  }
+
+  /**
+   * Toggle the execution mode of all selected nodes with unified subgraph behavior.
+   *
+   * Top-level behavior (selected nodes): Standard toggle logic
+   * - If the selected node is already in the specified mode → set to ALWAYS
+   * - Otherwise → set to the specified mode
+   *
+   * Subgraph behavior (children of selected subgraph nodes): Unified state application
+   * - All children inherit the same mode that their parent subgraph node was set to
+   * - This creates predictable behavior: if you toggle a subgraph to "mute",
+   *   ALL nodes inside become muted, regardless of their previous individual states
+   *
+   * @param mode - The LGraphEventMode to toggle to (e.g., NEVER for mute, BYPASS for bypass)
+   */
+  const toggleSelectedNodesMode = (mode: LGraphEventMode): void => {
+    const selectedNodes = app.canvas.selected_nodes
+    if (!selectedNodes) return
+
+    // Convert selected_nodes object to array
+    const selectedNodeArray: LGraphNode[] = []
+    for (const i in selectedNodes) {
+      selectedNodeArray.push(selectedNodes[i])
+    }
+
+    // Process each selected node independently to determine its target state and apply to children
+    selectedNodeArray.forEach((selectedNode) => {
+      // Apply standard toggle logic to the selected node itself
+      const newModeForSelectedNode =
+        selectedNode.mode === mode ? LGraphEventMode.ALWAYS : mode
+
+      selectedNode.mode = newModeForSelectedNode
+
+      // If this selected node is a subgraph, apply the same mode uniformly to all its children
+      // This ensures predictable behavior: all children get the same state as their parent
+      if (selectedNode.isSubgraphNode?.() && selectedNode.subgraph) {
+        traverseNodesDepthFirst([selectedNode], {
+          visitor: (node) => {
+            // Skip the parent node since we already handled it above
+            if (node === selectedNode) return undefined
+
+            // Apply the parent's new mode to all children uniformly
+            node.mode = newModeForSelectedNode
+            return undefined
+          }
+        })
+      }
+    })
+  }
+
+  return {
+    isIgnoredItem,
+    filterSelectableItems,
+    getSelectableItems,
+    hasSelectableItems,
+    hasMultipleSelectableItems,
+    getSelectedNodes,
+    toggleSelectedNodesMode
+  }
+}
--- a/src/composables/node/useNodePricing.ts
+++ b/src/composables/node/useNodePricing.ts
@@ -30,6 +30,25 @@ function safePricingExecution(
  }
 }

+/**
+ * Helper function to calculate Runway duration-based pricing
+ * @param node - The LiteGraph node
+ * @returns Formatted price string
+ */
+const calculateRunwayDurationPrice = (node: LGraphNode): string => {
+  const durationWidget = node.widgets?.find(
+    (w) => w.name === 'duration'
+  ) as IComboWidget
+
+  if (!durationWidget) return '$0.05/second'
+
+  const duration = Number(durationWidget.value)
+  // If duration is 0 or NaN, don't fall back to 5 seconds - just use 0
+  const validDuration = isNaN(duration) ? 5 : duration
+  const cost = (0.05 * validDuration).toFixed(2)
+  return `$${cost}/Run`
+}
+
 const pixversePricingCalculator = (node: LGraphNode): string => {
  const durationWidget = node.widgets?.find(
    (w) => w.name === 'duration_seconds'
@@ -110,15 +129,27 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
    FluxProUltraImageNode: {
      displayPrice: '$0.06/Run'
    },
+    FluxProKontextProNode: {
+      displayPrice: '$0.04/Run'
+    },
+    FluxProKontextMaxNode: {
+      displayPrice: '$0.08/Run'
+    },
    IdeogramV1: {
      displayPrice: (node: LGraphNode): string => {
        const numImagesWidget = node.widgets?.find(
          (w) => w.name === 'num_images'
        ) as IComboWidget
-        if (!numImagesWidget) return '$0.06 x num_images/Run'
+        const turboWidget = node.widgets?.find(
+          (w) => w.name === 'turbo'
+        ) as IComboWidget
+
+        if (!numImagesWidget) return '$0.02-0.06 x num_images/Run'

        const numImages = Number(numImagesWidget.value) || 1
-        const cost = (0.06 * numImages).toFixed(2)
+        const turbo = String(turboWidget?.value).toLowerCase() === 'true'
+        const basePrice = turbo ? 0.02 : 0.06
+        const cost = (basePrice * numImages).toFixed(2)
        return `$${cost}/Run`
      }
    },
@@ -127,10 +158,16 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        const numImagesWidget = node.widgets?.find(
          (w) => w.name === 'num_images'
        ) as IComboWidget
-        if (!numImagesWidget) return '$0.08 x num_images/Run'
+        const turboWidget = node.widgets?.find(
+          (w) => w.name === 'turbo'
+        ) as IComboWidget
+
+        if (!numImagesWidget) return '$0.05-0.08 x num_images/Run'

        const numImages = Number(numImagesWidget.value) || 1
-        const cost = (0.08 * numImages).toFixed(2)
+        const turbo = String(turboWidget?.value).toLowerCase() === 'true'
+        const basePrice = turbo ? 0.05 : 0.08
+        const cost = (basePrice * numImages).toFixed(2)
        return `$${cost}/Run`
      }
    },
@@ -651,10 +688,10 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =

        if (duration.includes('5')) {
          if (resolution.includes('720p')) return '$0.3/Run'
-          if (resolution.includes('1080p')) return '~$0.3/Run'
+          if (resolution.includes('1080p')) return '$0.5/Run'
        } else if (duration.includes('10')) {
-          if (resolution.includes('720p')) return '$0.25/Run'
-          if (resolution.includes('1080p')) return '$1.0/Run'
+          if (resolution.includes('720p')) return '$0.4/Run'
+          if (resolution.includes('1080p')) return '$1.5/Run'
        }

        return '$0.3/Run'
@@ -678,9 +715,9 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =

        if (duration.includes('5')) {
          if (resolution.includes('720p')) return '$0.2/Run'
-          if (resolution.includes('1080p')) return '~$0.45/Run'
+          if (resolution.includes('1080p')) return '$0.3/Run'
        } else if (duration.includes('10')) {
-          if (resolution.includes('720p')) return '$0.6/Run'
+          if (resolution.includes('720p')) return '$0.25/Run'
          if (resolution.includes('1080p')) return '$1.0/Run'
        }

@@ -896,18 +933,11 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        }

        const model = String(modelWidget.value)
-        const aspectRatio = String(aspectRatioWidget.value)

        if (model.includes('photon-flash-1')) {
-          if (aspectRatio.includes('1:1')) return '$0.0045/Run'
-          if (aspectRatio.includes('16:9')) return '$0.0045/Run'
-          if (aspectRatio.includes('4:3')) return '$0.0046/Run'
-          if (aspectRatio.includes('21:9')) return '$0.0047/Run'
+          return '$0.0019/Run'
        } else if (model.includes('photon-1')) {
-          if (aspectRatio.includes('1:1')) return '$0.0172/Run'
-          if (aspectRatio.includes('16:9')) return '$0.0172/Run'
-          if (aspectRatio.includes('4:3')) return '$0.0176/Run'
-          if (aspectRatio.includes('21:9')) return '$0.0182/Run'
+          return '$0.0073/Run'
        }

        return '$0.0172/Run'
@@ -918,31 +948,17 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        const modelWidget = node.widgets?.find(
          (w) => w.name === 'model'
        ) as IComboWidget
-        const aspectRatioWidget = node.widgets?.find(
-          (w) => w.name === 'aspect_ratio'
-        ) as IComboWidget

        if (!modelWidget) {
-          return '$0.0045-0.0182/Run (varies with model & aspect ratio)'
+          return '$0.0019-0.0073/Run (varies with model)'
        }

        const model = String(modelWidget.value)
-        const aspectRatio = aspectRatioWidget
-          ? String(aspectRatioWidget.value)
-          : null

        if (model.includes('photon-flash-1')) {
-          if (!aspectRatio) return '$0.0045/Run'
-          if (aspectRatio.includes('1:1')) return '~$0.0045/Run'
-          if (aspectRatio.includes('16:9')) return '~$0.0045/Run'
-          if (aspectRatio.includes('4:3')) return '~$0.0046/Run'
-          if (aspectRatio.includes('21:9')) return '~$0.0047/Run'
+          return '$0.0019/Run'
        } else if (model.includes('photon-1')) {
-          if (!aspectRatio) return '$0.0172/Run'
-          if (aspectRatio.includes('1:1')) return '~$0.0172/Run'
-          if (aspectRatio.includes('16:9')) return '~$0.0172/Run'
-          if (aspectRatio.includes('4:3')) return '~$0.0176/Run'
-          if (aspectRatio.includes('21:9')) return '~$0.0182/Run'
+          return '$0.0073/Run'
        }

        return '$0.0172/Run'
@@ -1010,53 +1026,23 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
      displayPrice: '$0.08/Run'
    },
    RunwayImageToVideoNodeGen3a: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!durationWidget) return '$0.05/second'
-
-        const duration = Number(durationWidget.value) || 5
-        const cost = (0.05 * duration).toFixed(2)
-        return `$${cost}/Run`
-      }
+      displayPrice: calculateRunwayDurationPrice
    },
    RunwayImageToVideoNodeGen4: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!durationWidget) return '$0.05/second'
-
-        const duration = Number(durationWidget.value) || 5
-        const cost = (0.05 * duration).toFixed(2)
-        return `$${cost}/Run`
-      }
+      displayPrice: calculateRunwayDurationPrice
    },
    RunwayFirstLastFrameNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const durationWidget = node.widgets?.find(
-          (w) => w.name === 'duration'
-        ) as IComboWidget
-
-        if (!durationWidget) return '$0.05/second'
-
-        const duration = Number(durationWidget.value) || 5
-        const cost = (0.05 * duration).toFixed(2)
-        return `$${cost}/Run`
-      }
+      displayPrice: calculateRunwayDurationPrice
    },
    // Rodin nodes - all have the same pricing structure
    Rodin3D_Regular: {
      displayPrice: '$0.4/Run'
    },
    Rodin3D_Detail: {
-      displayPrice: '$1.2/Run'
+      displayPrice: '$0.4/Run'
    },
    Rodin3D_Smooth: {
-      displayPrice: '$1.2/Run'
+      displayPrice: '$0.4/Run'
    },
    Rodin3D_Sketch: {
      displayPrice: '$0.4/Run'
@@ -1064,60 +1050,113 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
    // Tripo nodes - using actual node names from ComfyUI
    TripoTextToModelNode: {
      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model' || w.name === 'model_version'
+        const quadWidget = node.widgets?.find(
+          (w) => w.name === 'quad'
+        ) as IComboWidget
+        const styleWidget = node.widgets?.find(
+          (w) => w.name === 'style'
+        ) as IComboWidget
+        const textureWidget = node.widgets?.find(
+          (w) => w.name === 'texture'
        ) as IComboWidget
        const textureQualityWidget = node.widgets?.find(
          (w) => w.name === 'texture_quality'
        ) as IComboWidget

-        if (!modelWidget)
-          return '$0.2-0.3/Run (varies with model & texture quality)'
+        if (!quadWidget || !styleWidget || !textureWidget)
+          return '$0.1-0.4/Run (varies with quad, style, texture & quality)'

-        const model = String(modelWidget.value)
-        const textureQuality = String(textureQualityWidget?.value || 'standard')
+        const quad = String(quadWidget.value).toLowerCase() === 'true'
+        const style = String(styleWidget.value).toLowerCase()
+        const texture = String(textureWidget.value).toLowerCase() === 'true'
+        const textureQuality = String(
+          textureQualityWidget?.value || 'standard'
+        ).toLowerCase()

-        // V2.5 pricing
-        if (model.includes('v2.5') || model.includes('2.5')) {
-          return textureQuality.includes('detailed') ? '$0.3/Run' : '$0.2/Run'
-        }
-        // V2.0 pricing
-        else if (model.includes('v2.0') || model.includes('2.0')) {
-          return textureQuality.includes('detailed') ? '$0.3/Run' : '$0.2/Run'
-        }
-        // V1.4 or legacy pricing
-        else {
-          return '$0.2/Run'
+        // Pricing logic based on CSV data
+        if (style.includes('none')) {
+          if (!quad) {
+            if (!texture) return '$0.10/Run'
+            else return '$0.15/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.30/Run'
+              else return '$0.35/Run'
+            } else {
+              if (!texture) return '$0.20/Run'
+              else return '$0.25/Run'
+            }
+          }
+        } else {
+          // any style
+          if (!quad) {
+            if (!texture) return '$0.15/Run'
+            else return '$0.20/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.35/Run'
+              else return '$0.40/Run'
+            } else {
+              if (!texture) return '$0.25/Run'
+              else return '$0.30/Run'
+            }
+          }
        }
      }
    },
    TripoImageToModelNode: {
      displayPrice: (node: LGraphNode): string => {
-        const modelWidget = node.widgets?.find(
-          (w) => w.name === 'model' || w.name === 'model_version'
+        const quadWidget = node.widgets?.find(
+          (w) => w.name === 'quad'
+        ) as IComboWidget
+        const styleWidget = node.widgets?.find(
+          (w) => w.name === 'style'
+        ) as IComboWidget
+        const textureWidget = node.widgets?.find(
+          (w) => w.name === 'texture'
        ) as IComboWidget
        const textureQualityWidget = node.widgets?.find(
          (w) => w.name === 'texture_quality'
        ) as IComboWidget

-        if (!modelWidget)
-          return '$0.3-0.4/Run (varies with model & texture quality)'
+        if (!quadWidget || !styleWidget || !textureWidget)
+          return '$0.2-0.5/Run (varies with quad, style, texture & quality)'

-        const model = String(modelWidget.value)
-        const textureQuality = String(textureQualityWidget?.value || 'standard')
+        const quad = String(quadWidget.value).toLowerCase() === 'true'
+        const style = String(styleWidget.value).toLowerCase()
+        const texture = String(textureWidget.value).toLowerCase() === 'true'
+        const textureQuality = String(
+          textureQualityWidget?.value || 'standard'
+        ).toLowerCase()

-        // V2.5 and V2.0 have same pricing structure
-        if (
-          model.includes('v2.5') ||
-          model.includes('2.5') ||
-          model.includes('v2.0') ||
-          model.includes('2.0')
-        ) {
-          return textureQuality.includes('detailed') ? '$0.4/Run' : '$0.3/Run'
-        }
-        // V1.4 or legacy pricing (image_to_model is always $0.3)
-        else {
-          return '$0.3/Run'
+        // Pricing logic based on CSV data for Image to Model
+        if (style.includes('none')) {
+          if (!quad) {
+            if (!texture) return '$0.20/Run'
+            else return '$0.25/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.40/Run'
+              else return '$0.45/Run'
+            } else {
+              if (!texture) return '$0.30/Run'
+              else return '$0.35/Run'
+            }
+          }
+        } else {
+          // any style
+          if (!quad) {
+            if (!texture) return '$0.25/Run'
+            else return '$0.30/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.45/Run'
+              else return '$0.50/Run'
+            } else {
+              if (!texture) return '$0.35/Run'
+              else return '$0.40/Run'
+            }
+          }
        }
      }
    },
@@ -1136,6 +1175,68 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        return textureQuality.includes('detailed') ? '$0.2/Run' : '$0.1/Run'
      }
    },
+    TripoConvertModelNode: {
+      displayPrice: '$0.10/Run'
+    },
+    TripoRetargetRiggedModelNode: {
+      displayPrice: '$0.10/Run'
+    },
+    TripoMultiviewToModelNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const quadWidget = node.widgets?.find(
+          (w) => w.name === 'quad'
+        ) as IComboWidget
+        const styleWidget = node.widgets?.find(
+          (w) => w.name === 'style'
+        ) as IComboWidget
+        const textureWidget = node.widgets?.find(
+          (w) => w.name === 'texture'
+        ) as IComboWidget
+        const textureQualityWidget = node.widgets?.find(
+          (w) => w.name === 'texture_quality'
+        ) as IComboWidget
+
+        if (!quadWidget || !styleWidget || !textureWidget)
+          return '$0.2-0.5/Run (varies with quad, style, texture & quality)'
+
+        const quad = String(quadWidget.value).toLowerCase() === 'true'
+        const style = String(styleWidget.value).toLowerCase()
+        const texture = String(textureWidget.value).toLowerCase() === 'true'
+        const textureQuality = String(
+          textureQualityWidget?.value || 'standard'
+        ).toLowerCase()
+
+        // Pricing logic based on CSV data for Multiview to Model (same as Image to Model)
+        if (style.includes('none')) {
+          if (!quad) {
+            if (!texture) return '$0.20/Run'
+            else return '$0.25/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.40/Run'
+              else return '$0.45/Run'
+            } else {
+              if (!texture) return '$0.30/Run'
+              else return '$0.35/Run'
+            }
+          }
+        } else {
+          // any style
+          if (!quad) {
+            if (!texture) return '$0.25/Run'
+            else return '$0.30/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.45/Run'
+              else return '$0.50/Run'
+            } else {
+              if (!texture) return '$0.35/Run'
+              else return '$0.40/Run'
+            }
+          }
+        }
+      }
+    },
    // Google/Gemini nodes
    GeminiNode: {
      displayPrice: (node: LGraphNode): string => {
@@ -1151,9 +1252,9 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
        if (model.includes('veo-2.0')) {
          return '$0.5/second'
        } else if (model.includes('gemini-2.5-pro-preview-05-06')) {
-          return '$0.0035/$0.0008 per 1K tokens'
+          return '$0.00016/$0.0006 per 1K tokens'
        } else if (model.includes('gemini-2.5-flash-preview-04-17')) {
-          return '$0.0015/$0.0004 per 1K tokens'
+          return '$0.00125/$0.01 per 1K tokens'
        }
        // For other Gemini models, show token-based pricing info
        return 'Token-based'
@@ -1233,9 +1334,11 @@ export const useNodePricing = () => {
      OpenAIDalle3: ['size', 'quality'],
      OpenAIDalle2: ['size', 'n'],
      OpenAIGPTImage1: ['quality', 'n'],
-      IdeogramV1: ['num_images'],
-      IdeogramV2: ['num_images'],
+      IdeogramV1: ['num_images', 'turbo'],
+      IdeogramV2: ['num_images', 'turbo'],
      IdeogramV3: ['rendering_speed', 'num_images'],
+      FluxProKontextProNode: [],
+      FluxProKontextMaxNode: [],
      VeoVideoGenerationNode: ['duration_seconds'],
      LumaVideoNode: ['model', 'resolution', 'duration'],
      LumaImageToVideoNode: ['model', 'resolution', 'duration'],
@@ -1269,8 +1372,8 @@ export const useNodePricing = () => {
      RunwayImageToVideoNodeGen4: ['duration'],
      RunwayFirstLastFrameNode: ['duration'],
      // Tripo nodes
-      TripoTextToModelNode: ['model', 'model_version', 'texture_quality'],
-      TripoImageToModelNode: ['model', 'model_version', 'texture_quality'],
+      TripoTextToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
+      TripoImageToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
      TripoTextureNode: ['texture_quality'],
      // Google/Gemini nodes
      GeminiNode: ['model'],
--- a/src/composables/nodePack/useMissingNodes.ts
+++ b/src/composables/nodePack/useMissingNodes.ts
@@ -8,6 +8,7 @@ import { app } from '@/scripts/app'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import type { components } from '@/types/comfyRegistryTypes'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'

 /**
 * Composable to find missing NodePacks from workflow
@@ -56,7 +57,7 @@ export const useMissingNodes = () => {
  }

  const missingCoreNodes = computed<Record<string, LGraphNode[]>>(() => {
-    const missingNodes = app.graph.nodes.filter(isMissingCoreNode)
+    const missingNodes = collectAllNodes(app.graph, isMissingCoreNode)
    return groupBy(missingNodes, (node) => String(node.properties?.ver || ''))
  })

--- a/src/composables/nodePack/useWorkflowPacks.ts
+++ b/src/composables/nodePack/useWorkflowPacks.ts
@@ -9,6 +9,7 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
 import { SelectedVersion, UseNodePacksOptions } from '@/types/comfyManagerTypes'
 import type { components } from '@/types/comfyRegistryTypes'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'

 type WorkflowPack = {
  id:
@@ -109,11 +110,13 @@ export const useWorkflowPacks = (options: UseNodePacksOptions = {}) => {
  }

  /**
-   * Get the node packs for all nodes in the workflow.
+   * Get the node packs for all nodes in the workflow (including subgraphs).
   */
  const getWorkflowPacks = async () => {
-    if (!app.graph?.nodes?.length) return []
-    const packs = await Promise.all(app.graph.nodes.map(workflowNodeToPack))
+    if (!app.graph) return []
+    const allNodes = collectAllNodes(app.graph)
+    if (!allNodes.length) return []
+    const packs = await Promise.all(allNodes.map(workflowNodeToPack))
    workflowPacks.value = packs.filter((pack) => pack !== undefined)
  }

--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -7,6 +7,7 @@ import {
 import { Point } from '@comfyorg/litegraph'

 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import {
  DEFAULT_DARK_COLOR_PALETTE,
  DEFAULT_LIGHT_COLOR_PALETTE
@@ -29,6 +30,11 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import {
+  getAllNonIoNodesInSubgraph,
+  getExecutionIdsForSelectedNodes
+} from '@/utils/graphTraversalUtil'
+import { filterOutputNodes } from '@/utils/nodeFilterUtil'

 const moveSelectedNodesVersionAdded = '1.22.2'

@@ -41,30 +47,10 @@ export function useCoreCommands(): ComfyCommand[] {
  const toastStore = useToastStore()
  const canvasStore = useCanvasStore()
  const executionStore = useExecutionStore()
+  const { getSelectedNodes, toggleSelectedNodesMode } =
+    useSelectedLiteGraphItems()
  const getTracker = () => workflowStore.activeWorkflow?.changeTracker

-  const getSelectedNodes = (): LGraphNode[] => {
-    const selectedNodes = app.canvas.selected_nodes
-    const result: LGraphNode[] = []
-    if (selectedNodes) {
-      for (const i in selectedNodes) {
-        const node = selectedNodes[i]
-        result.push(node)
-      }
-    }
-    return result
-  }
-
-  const toggleSelectedNodesMode = (mode: LGraphEventMode) => {
-    getSelectedNodes().forEach((node) => {
-      if (node.mode === mode) {
-        node.mode = LGraphEventMode.ALWAYS
-      } else {
-        node.mode = mode
-      }
-    })
-  }
-
  const moveSelectedNodes = (
    positionUpdater: (pos: Point, gridSize: number) => Point
  ) => {
@@ -171,7 +157,16 @@ export function useCoreCommands(): ComfyCommand[] {
          confirm('Clear workflow?')
        ) {
          app.clean()
-          app.graph.clear()
+          if (app.canvas.subgraph) {
+            // `clear` is not implemented on subgraphs and the parent class's
+            // (`LGraph`) `clear` breaks the subgraph structure. For subgraphs,
+            // just clear the nodes but preserve input/output nodes and structure
+            const subgraph = app.canvas.subgraph
+            const nonIoNodes = getAllNonIoNodesInSubgraph(subgraph)
+            nonIoNodes.forEach((node) => subgraph.remove(node))
+          } else {
+            app.graph.clear()
+          }
          api.dispatchCustomEvent('graphCleared')
        }
      }
@@ -313,6 +308,19 @@ export function useCoreCommands(): ComfyCommand[] {
        }
      })()
    },
+    {
+      id: 'Comfy.Canvas.ToggleMinimap',
+      icon: 'pi pi-map',
+      label: 'Canvas Toggle Minimap',
+      versionAdded: '1.24.1',
+      function: async () => {
+        const settingStore = useSettingStore()
+        await settingStore.set(
+          'Comfy.Minimap.Visible',
+          !settingStore.get('Comfy.Minimap.Visible')
+        )
+      }
+    },
    {
      id: 'Comfy.QueuePrompt',
      icon: 'pi pi-play',
@@ -340,10 +348,10 @@ export function useCoreCommands(): ComfyCommand[] {
      versionAdded: '1.19.6',
      function: async () => {
        const batchCount = useQueueSettingsStore().batchCount
-        const queueNodeIds = getSelectedNodes()
-          .filter((node) => node.constructor.nodeData?.output_node)
-          .map((node) => node.id)
-        if (queueNodeIds.length === 0) {
+        const selectedNodes = getSelectedNodes()
+        const selectedOutputNodes = filterOutputNodes(selectedNodes)
+
+        if (selectedOutputNodes.length === 0) {
          toastStore.add({
            severity: 'error',
            summary: t('toastMessages.nothingToQueue'),
@@ -352,7 +360,11 @@ export function useCoreCommands(): ComfyCommand[] {
          })
          return
        }
-        await app.queuePrompt(0, batchCount, queueNodeIds)
+
+        // Get execution IDs for all selected output nodes and their descendants
+        const executionIds =
+          getExecutionIdsForSelectedNodes(selectedOutputNodes)
+        await app.queuePrompt(0, batchCount, executionIds)
      }
    },
    {
--- a/src/composables/useMinimap.ts
+++ b/src/composables/useMinimap.ts
@@ -0,0 +1,696 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { useRafFn, useThrottleFn } from '@vueuse/core'
+import { computed, nextTick, ref, watch } from 'vue'
+
+import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
+import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+interface GraphCallbacks {
+  onNodeAdded?: (node: LGraphNode) => void
+  onNodeRemoved?: (node: LGraphNode) => void
+  onConnectionChange?: (node: LGraphNode) => void
+}
+
+export function useMinimap() {
+  const settingStore = useSettingStore()
+  const canvasStore = useCanvasStore()
+
+  const containerRef = ref<HTMLDivElement>()
+  const canvasRef = ref<HTMLCanvasElement>()
+  const minimapRef = ref<any>(null)
+
+  const visible = ref(true)
+
+  const initialized = ref(false)
+  const bounds = ref({
+    minX: 0,
+    minY: 0,
+    maxX: 0,
+    maxY: 0,
+    width: 0,
+    height: 0
+  })
+  const scale = ref(1)
+  const isDragging = ref(false)
+  const viewportTransform = ref({ x: 0, y: 0, width: 0, height: 0 })
+
+  const needsFullRedraw = ref(true)
+  const needsBoundsUpdate = ref(true)
+  const lastNodeCount = ref(0)
+  const nodeStatesCache = new Map<NodeId, string>()
+  const linksCache = ref<string>('')
+
+  const updateFlags = ref({
+    bounds: false,
+    nodes: false,
+    connections: false,
+    viewport: false
+  })
+
+  const width = 250
+  const height = 200
+  const nodeColor = '#0B8CE999'
+  const linkColor = '#F99614'
+  const slotColor = '#F99614'
+  const viewportColor = '#FFF'
+  const backgroundColor = '#15161C'
+  const borderColor = '#333'
+
+  const containerRect = ref({
+    left: 0,
+    top: 0,
+    width: width,
+    height: height
+  })
+
+  const canvasDimensions = ref({
+    width: 0,
+    height: 0
+  })
+
+  const updateContainerRect = () => {
+    if (!containerRef.value) return
+
+    const rect = containerRef.value.getBoundingClientRect()
+    containerRect.value = {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height
+    }
+  }
+
+  const updateCanvasDimensions = () => {
+    const c = canvas.value
+    if (!c) return
+
+    const canvasEl = c.canvas
+    const dpr = window.devicePixelRatio || 1
+
+    canvasDimensions.value = {
+      width: canvasEl.clientWidth || canvasEl.width / dpr,
+      height: canvasEl.clientHeight || canvasEl.height / dpr
+    }
+  }
+
+  const canvas = computed(() => canvasStore.canvas)
+  const graph = ref(app.canvas?.graph)
+
+  const containerStyles = computed(() => ({
+    width: `${width}px`,
+    height: `${height}px`,
+    backgroundColor: backgroundColor,
+    border: `1px solid ${borderColor}`,
+    borderRadius: '8px'
+  }))
+
+  const viewportStyles = computed(() => ({
+    transform: `translate(${viewportTransform.value.x}px, ${viewportTransform.value.y}px)`,
+    width: `${viewportTransform.value.width}px`,
+    height: `${viewportTransform.value.height}px`,
+    border: `2px solid ${viewportColor}`,
+    backgroundColor: `${viewportColor}33`,
+    willChange: 'transform',
+    backfaceVisibility: 'hidden' as const,
+    perspective: '1000px',
+    pointerEvents: 'none' as const
+  }))
+
+  const calculateGraphBounds = () => {
+    const g = graph.value
+    if (!g || !g._nodes || g._nodes.length === 0) {
+      return { minX: 0, minY: 0, maxX: 100, maxY: 100, width: 100, height: 100 }
+    }
+
+    let minX = Infinity
+    let minY = Infinity
+    let maxX = -Infinity
+    let maxY = -Infinity
+
+    for (const node of g._nodes) {
+      minX = Math.min(minX, node.pos[0])
+      minY = Math.min(minY, node.pos[1])
+      maxX = Math.max(maxX, node.pos[0] + node.size[0])
+      maxY = Math.max(maxY, node.pos[1] + node.size[1])
+    }
+
+    let currentWidth = maxX - minX
+    let currentHeight = maxY - minY
+
+    // Enforce minimum viewport dimensions for better visualization
+    const minViewportWidth = 2500
+    const minViewportHeight = 2000
+
+    if (currentWidth < minViewportWidth) {
+      const padding = (minViewportWidth - currentWidth) / 2
+      minX -= padding
+      maxX += padding
+      currentWidth = minViewportWidth
+    }
+
+    if (currentHeight < minViewportHeight) {
+      const padding = (minViewportHeight - currentHeight) / 2
+      minY -= padding
+      maxY += padding
+      currentHeight = minViewportHeight
+    }
+
+    return {
+      minX,
+      minY,
+      maxX,
+      maxY,
+      width: currentWidth,
+      height: currentHeight
+    }
+  }
+
+  const calculateScale = () => {
+    if (bounds.value.width === 0 || bounds.value.height === 0) {
+      return 1
+    }
+
+    const scaleX = width / bounds.value.width
+    const scaleY = height / bounds.value.height
+
+    // Apply 0.9 factor to provide padding/gap between nodes and minimap borders
+    return Math.min(scaleX, scaleY) * 0.9
+  }
+
+  const renderNodes = (
+    ctx: CanvasRenderingContext2D,
+    offsetX: number,
+    offsetY: number
+  ) => {
+    const g = graph.value
+    if (!g || !g._nodes || g._nodes.length === 0) return
+
+    for (const node of g._nodes) {
+      const x = (node.pos[0] - bounds.value.minX) * scale.value + offsetX
+      const y = (node.pos[1] - bounds.value.minY) * scale.value + offsetY
+      const w = node.size[0] * scale.value
+      const h = node.size[1] * scale.value
+
+      // Render solid node blocks
+      ctx.fillStyle = nodeColor
+      ctx.fillRect(x, y, w, h)
+    }
+  }
+
+  const renderConnections = (
+    ctx: CanvasRenderingContext2D,
+    offsetX: number,
+    offsetY: number
+  ) => {
+    const g = graph.value
+    if (!g) return
+
+    ctx.strokeStyle = linkColor
+    ctx.lineWidth = 1.4
+
+    const slotRadius = 3.7 * Math.max(scale.value, 0.5) // Larger slots that scale
+    const connections: Array<{
+      x1: number
+      y1: number
+      x2: number
+      y2: number
+    }> = []
+
+    for (const node of g._nodes) {
+      if (!node.outputs) continue
+
+      const x1 = (node.pos[0] - bounds.value.minX) * scale.value + offsetX
+      const y1 = (node.pos[1] - bounds.value.minY) * scale.value + offsetY
+
+      for (const output of node.outputs) {
+        if (!output.links) continue
+
+        for (const linkId of output.links) {
+          const link = g.links[linkId]
+          if (!link) continue
+
+          const targetNode = g.getNodeById(link.target_id)
+          if (!targetNode) continue
+
+          const x2 =
+            (targetNode.pos[0] - bounds.value.minX) * scale.value + offsetX
+          const y2 =
+            (targetNode.pos[1] - bounds.value.minY) * scale.value + offsetY
+
+          const outputX = x1 + node.size[0] * scale.value
+          const outputY = y1 + node.size[1] * scale.value * 0.2
+          const inputX = x2
+          const inputY = y2 + targetNode.size[1] * scale.value * 0.2
+
+          // Draw connection line
+          ctx.beginPath()
+          ctx.moveTo(outputX, outputY)
+          ctx.lineTo(inputX, inputY)
+          ctx.stroke()
+
+          connections.push({ x1: outputX, y1: outputY, x2: inputX, y2: inputY })
+        }
+      }
+    }
+
+    // Render connection slots on top
+    ctx.fillStyle = slotColor
+    for (const conn of connections) {
+      // Output slot
+      ctx.beginPath()
+      ctx.arc(conn.x1, conn.y1, slotRadius, 0, Math.PI * 2)
+      ctx.fill()
+
+      // Input slot
+      ctx.beginPath()
+      ctx.arc(conn.x2, conn.y2, slotRadius, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+
+  const renderMinimap = () => {
+    const g = graph.value
+    if (!canvasRef.value || !g) return
+
+    const ctx = canvasRef.value.getContext('2d')
+    if (!ctx) return
+
+    // Fast path for 0 nodes - just show background
+    if (!g._nodes || g._nodes.length === 0) {
+      ctx.clearRect(0, 0, width, height)
+      return
+    }
+
+    const needsRedraw =
+      needsFullRedraw.value ||
+      updateFlags.value.nodes ||
+      updateFlags.value.connections
+
+    if (needsRedraw) {
+      ctx.clearRect(0, 0, width, height)
+
+      const offsetX = (width - bounds.value.width * scale.value) / 2
+      const offsetY = (height - bounds.value.height * scale.value) / 2
+
+      renderNodes(ctx, offsetX, offsetY)
+      renderConnections(ctx, offsetX, offsetY)
+
+      needsFullRedraw.value = false
+      updateFlags.value.nodes = false
+      updateFlags.value.connections = false
+    }
+  }
+
+  const updateViewport = () => {
+    const c = canvas.value
+    if (!c) return
+
+    if (
+      canvasDimensions.value.width === 0 ||
+      canvasDimensions.value.height === 0
+    ) {
+      updateCanvasDimensions()
+    }
+
+    const ds = c.ds
+
+    const viewportWidth = canvasDimensions.value.width / ds.scale
+    const viewportHeight = canvasDimensions.value.height / ds.scale
+
+    const worldX = -ds.offset[0]
+    const worldY = -ds.offset[1]
+
+    const centerOffsetX = (width - bounds.value.width * scale.value) / 2
+    const centerOffsetY = (height - bounds.value.height * scale.value) / 2
+
+    viewportTransform.value = {
+      x: (worldX - bounds.value.minX) * scale.value + centerOffsetX,
+      y: (worldY - bounds.value.minY) * scale.value + centerOffsetY,
+      width: viewportWidth * scale.value,
+      height: viewportHeight * scale.value
+    }
+
+    updateFlags.value.viewport = false
+  }
+
+  const updateMinimap = () => {
+    if (needsBoundsUpdate.value || updateFlags.value.bounds) {
+      bounds.value = calculateGraphBounds()
+      scale.value = calculateScale()
+      needsBoundsUpdate.value = false
+      updateFlags.value.bounds = false
+      needsFullRedraw.value = true
+      // When bounds change, we need to update the viewport position
+      updateFlags.value.viewport = true
+    }
+
+    if (
+      needsFullRedraw.value ||
+      updateFlags.value.nodes ||
+      updateFlags.value.connections
+    ) {
+      renderMinimap()
+    }
+
+    // Update viewport if needed (e.g., after bounds change)
+    if (updateFlags.value.viewport) {
+      updateViewport()
+    }
+  }
+
+  const checkForChanges = useThrottleFn(() => {
+    const g = graph.value
+    if (!g) return
+
+    let structureChanged = false
+    let positionChanged = false
+    let connectionChanged = false
+
+    if (g._nodes.length !== lastNodeCount.value) {
+      structureChanged = true
+      lastNodeCount.value = g._nodes.length
+    }
+
+    for (const node of g._nodes) {
+      const key = node.id
+      const currentState = `${node.pos[0]},${node.pos[1]},${node.size[0]},${node.size[1]}`
+
+      if (nodeStatesCache.get(key) !== currentState) {
+        positionChanged = true
+        nodeStatesCache.set(key, currentState)
+      }
+    }
+
+    const currentLinks = JSON.stringify(g.links || {})
+    if (currentLinks !== linksCache.value) {
+      connectionChanged = true
+      linksCache.value = currentLinks
+    }
+
+    const currentNodeIds = new Set(g._nodes.map((n) => n.id))
+    for (const [nodeId] of nodeStatesCache) {
+      if (!currentNodeIds.has(nodeId)) {
+        nodeStatesCache.delete(nodeId)
+        structureChanged = true
+      }
+    }
+
+    if (structureChanged || positionChanged) {
+      updateFlags.value.bounds = true
+      updateFlags.value.nodes = true
+    }
+
+    if (connectionChanged) {
+      updateFlags.value.connections = true
+    }
+
+    if (structureChanged || positionChanged || connectionChanged) {
+      updateMinimap()
+    }
+  }, 500)
+
+  const { pause: pauseChangeDetection, resume: resumeChangeDetection } =
+    useRafFn(
+      async () => {
+        if (visible.value) {
+          await checkForChanges()
+        }
+      },
+      { immediate: false }
+    )
+
+  const { startSync: startViewportSync, stopSync: stopViewportSync } =
+    useCanvasTransformSync(updateViewport, { autoStart: false })
+
+  const handleMouseDown = (e: MouseEvent) => {
+    isDragging.value = true
+    updateContainerRect()
+    handleMouseMove(e)
+  }
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!isDragging.value || !canvasRef.value || !canvas.value) return
+
+    const x = e.clientX - containerRect.value.left
+    const y = e.clientY - containerRect.value.top
+
+    const offsetX = (width - bounds.value.width * scale.value) / 2
+    const offsetY = (height - bounds.value.height * scale.value) / 2
+
+    const worldX = (x - offsetX) / scale.value + bounds.value.minX
+    const worldY = (y - offsetY) / scale.value + bounds.value.minY
+
+    centerViewOn(worldX, worldY)
+  }
+
+  const handleMouseUp = () => {
+    isDragging.value = false
+  }
+
+  const handleWheel = (e: WheelEvent) => {
+    e.preventDefault()
+
+    const c = canvas.value
+    if (!c) return
+
+    if (
+      containerRect.value.left === 0 &&
+      containerRect.value.top === 0 &&
+      containerRef.value
+    ) {
+      updateContainerRect()
+    }
+
+    const ds = c.ds
+    const delta = e.deltaY > 0 ? 0.9 : 1.1
+
+    const newScale = ds.scale * delta
+
+    const MIN_SCALE = 0.1
+    const MAX_SCALE = 10
+
+    if (newScale < MIN_SCALE || newScale > MAX_SCALE) return
+
+    const x = e.clientX - containerRect.value.left
+    const y = e.clientY - containerRect.value.top
+
+    const offsetX = (width - bounds.value.width * scale.value) / 2
+    const offsetY = (height - bounds.value.height * scale.value) / 2
+
+    const worldX = (x - offsetX) / scale.value + bounds.value.minX
+    const worldY = (y - offsetY) / scale.value + bounds.value.minY
+
+    ds.scale = newScale
+
+    centerViewOn(worldX, worldY)
+  }
+
+  const centerViewOn = (worldX: number, worldY: number) => {
+    const c = canvas.value
+    if (!c) return
+
+    if (
+      canvasDimensions.value.width === 0 ||
+      canvasDimensions.value.height === 0
+    ) {
+      updateCanvasDimensions()
+    }
+
+    const ds = c.ds
+
+    const viewportWidth = canvasDimensions.value.width / ds.scale
+    const viewportHeight = canvasDimensions.value.height / ds.scale
+
+    ds.offset[0] = -(worldX - viewportWidth / 2)
+    ds.offset[1] = -(worldY - viewportHeight / 2)
+
+    updateFlags.value.viewport = true
+
+    c.setDirty(true, true)
+  }
+
+  let originalCallbacks: GraphCallbacks = {}
+
+  const handleGraphChanged = useThrottleFn(() => {
+    needsFullRedraw.value = true
+    updateFlags.value.bounds = true
+    updateFlags.value.nodes = true
+    updateFlags.value.connections = true
+    updateMinimap()
+  }, 500)
+
+  const setupEventListeners = () => {
+    const g = graph.value
+    if (!g) return
+
+    originalCallbacks = {
+      onNodeAdded: g.onNodeAdded,
+      onNodeRemoved: g.onNodeRemoved,
+      onConnectionChange: g.onConnectionChange
+    }
+
+    g.onNodeAdded = function (node) {
+      originalCallbacks.onNodeAdded?.call(this, node)
+
+      void handleGraphChanged()
+    }
+
+    g.onNodeRemoved = function (node) {
+      originalCallbacks.onNodeRemoved?.call(this, node)
+      nodeStatesCache.delete(node.id)
+      void handleGraphChanged()
+    }
+
+    g.onConnectionChange = function (node) {
+      originalCallbacks.onConnectionChange?.call(this, node)
+
+      void handleGraphChanged()
+    }
+  }
+
+  const cleanupEventListeners = () => {
+    const g = graph.value
+    if (!g) return
+
+    if (originalCallbacks.onNodeAdded !== undefined) {
+      g.onNodeAdded = originalCallbacks.onNodeAdded
+    }
+    if (originalCallbacks.onNodeRemoved !== undefined) {
+      g.onNodeRemoved = originalCallbacks.onNodeRemoved
+    }
+    if (originalCallbacks.onConnectionChange !== undefined) {
+      g.onConnectionChange = originalCallbacks.onConnectionChange
+    }
+  }
+
+  const init = async () => {
+    if (initialized.value) return
+
+    visible.value = settingStore.get('Comfy.Minimap.Visible')
+
+    if (canvas.value && graph.value) {
+      setupEventListeners()
+
+      api.addEventListener('graphChanged', handleGraphChanged)
+
+      if (containerRef.value) {
+        updateContainerRect()
+      }
+      updateCanvasDimensions()
+
+      window.addEventListener('resize', updateContainerRect)
+      window.addEventListener('scroll', updateContainerRect)
+      window.addEventListener('resize', updateCanvasDimensions)
+
+      needsFullRedraw.value = true
+      updateFlags.value.bounds = true
+      updateFlags.value.nodes = true
+      updateFlags.value.connections = true
+      updateFlags.value.viewport = true
+
+      updateMinimap()
+      updateViewport()
+
+      if (visible.value) {
+        resumeChangeDetection()
+        startViewportSync()
+      }
+      initialized.value = true
+    }
+  }
+
+  const destroy = () => {
+    pauseChangeDetection()
+    stopViewportSync()
+    cleanupEventListeners()
+
+    api.removeEventListener('graphChanged', handleGraphChanged)
+
+    window.removeEventListener('resize', updateContainerRect)
+    window.removeEventListener('scroll', updateContainerRect)
+    window.removeEventListener('resize', updateCanvasDimensions)
+
+    nodeStatesCache.clear()
+    initialized.value = false
+  }
+
+  watch(
+    canvas,
+    async (newCanvas, oldCanvas) => {
+      if (oldCanvas) {
+        cleanupEventListeners()
+        pauseChangeDetection()
+        stopViewportSync()
+        api.removeEventListener('graphChanged', handleGraphChanged)
+        window.removeEventListener('resize', updateContainerRect)
+        window.removeEventListener('scroll', updateContainerRect)
+        window.removeEventListener('resize', updateCanvasDimensions)
+      }
+      if (newCanvas && !initialized.value) {
+        await init()
+      }
+    },
+    { immediate: true, flush: 'post' }
+  )
+
+  watch(visible, async (isVisible) => {
+    if (isVisible) {
+      if (containerRef.value) {
+        updateContainerRect()
+      }
+      updateCanvasDimensions()
+
+      needsFullRedraw.value = true
+      updateFlags.value.bounds = true
+      updateFlags.value.nodes = true
+      updateFlags.value.connections = true
+      updateFlags.value.viewport = true
+
+      await nextTick()
+
+      await nextTick()
+
+      updateMinimap()
+      updateViewport()
+      resumeChangeDetection()
+      startViewportSync()
+    } else {
+      pauseChangeDetection()
+      stopViewportSync()
+    }
+  })
+
+  const toggle = async () => {
+    visible.value = !visible.value
+    await settingStore.set('Comfy.Minimap.Visible', visible.value)
+  }
+
+  const setMinimapRef = (ref: any) => {
+    minimapRef.value = ref
+  }
+
+  return {
+    visible: computed(() => visible.value),
+    initialized: computed(() => initialized.value),
+
+    containerRef,
+    canvasRef,
+    containerStyles,
+    viewportStyles,
+    width,
+    height,
+
+    init,
+    destroy,
+    toggle,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleWheel,
+    setMinimapRef
+  }
+}
--- a/src/constants/coreKeybindings.ts
+++ b/src/constants/coreKeybindings.ts
@@ -181,5 +181,12 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
      shift: true
    },
    commandId: 'Comfy.Graph.ConvertToSubgraph'
+  },
+  {
+    combo: {
+      key: 'm',
+      alt: true
+    },
+    commandId: 'Comfy.Canvas.ToggleMinimap'
  }
 ]
--- a/src/constants/coreSettings.ts
+++ b/src/constants/coreSettings.ts
@@ -511,15 +511,6 @@ export const CORE_SETTINGS: SettingParams[] = [
    defaultValue: [] as string[],
    versionAdded: '1.3.11'
  },
-  {
-    id: 'Comfy.Validation.NodeDefs',
-    name: 'Validate node definitions (slow)',
-    type: 'boolean',
-    tooltip:
-      'Recommended for node developers. This will validate all node definitions on startup.',
-    defaultValue: false,
-    versionAdded: '1.3.14'
-  },
  {
    id: 'Comfy.LinkRenderMode',
    category: ['LiteGraph', 'Graph', 'LinkRenderMode'],
@@ -818,6 +809,13 @@ export const CORE_SETTINGS: SettingParams[] = [
    defaultValue: false,
    versionAdded: '1.15.12'
  },
+  {
+    id: 'Comfy.Minimap.Visible',
+    name: 'Display minimap on canvas',
+    type: 'hidden',
+    defaultValue: false,
+    versionAdded: '1.25.0'
+  },
  {
    id: 'Comfy.Workflow.AutoSaveDelay',
    name: 'Auto Save Delay (ms)',
--- a/src/extensions/core/saveImageExtraOutput.ts
+++ b/src/extensions/core/saveImageExtraOutput.ts
@@ -35,7 +35,7 @@ app.registerExtension({
        // @ts-expect-error fixme ts strict error
        widget.serializeValue = () => {
          // @ts-expect-error fixme ts strict error
-          return applyTextReplacements(app.graph.nodes, widget.value)
+          return applyTextReplacements(app.graph, widget.value)
        }

        return r
--- a/src/extensions/core/widgetInputs.ts
+++ b/src/extensions/core/widgetInputs.ts
@@ -46,7 +46,7 @@ export class PrimitiveNode extends LGraphNode {
    ]
    let v = this.widgets?.[0].value
    if (v && this.properties[replacePropertyName]) {
-      v = applyTextReplacements(app.graph.nodes, v as string)
+      v = applyTextReplacements(app.graph, v as string)
    }

    // For each output link copy our value over the original widget value
--- a/src/locales/en/commands.json
+++ b/src/locales/en/commands.json
@@ -71,6 +71,9 @@
  "Comfy_Canvas_ToggleLock": {
    "label": "Canvas Toggle Lock"
  },
+  "Comfy_Canvas_ToggleMinimap": {
+    "label": "Canvas Toggle Minimap"
+  },
  "Comfy_Canvas_ToggleSelected_Pin": {
    "label": "Pin/Unpin Selected Items"
  },
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -863,7 +863,8 @@
    "fitView": "Fit View",
    "selectMode": "Select Mode",
    "panMode": "Pan Mode",
-    "toggleLinkVisibility": "Toggle Link Visibility"
+    "toggleLinkVisibility": "Toggle Link Visibility",
+    "toggleMinimap": "Toggle Minimap"
  },
  "groupNode": {
    "create": "Create group node",
@@ -939,6 +940,7 @@
    "Resize Selected Nodes": "Resize Selected Nodes",
    "Canvas Toggle Link Visibility": "Canvas Toggle Link Visibility",
    "Canvas Toggle Lock": "Canvas Toggle Lock",
+    "Canvas Toggle Minimap": "Canvas Toggle Minimap",
    "Pin/Unpin Selected Items": "Pin/Unpin Selected Items",
    "Bypass/Unbypass Selected Nodes": "Bypass/Unbypass Selected Nodes",
    "Collapse/Expand Selected Nodes": "Collapse/Expand Selected Nodes",
--- a/src/locales/en/settings.json
+++ b/src/locales/en/settings.json
@@ -329,10 +329,6 @@
      "Bottom": "Bottom"
    }
  },
-  "Comfy_Validation_NodeDefs": {
-    "name": "Validate node definitions (slow)",
-    "tooltip": "Recommended for node developers. This will validate all node definitions on startup."
-  },
  "Comfy_Validation_Workflows": {
    "name": "Validate workflows"
  },
--- a/src/locales/es/commands.json
+++ b/src/locales/es/commands.json
@@ -71,6 +71,9 @@
  "Comfy_Canvas_ToggleLock": {
    "label": "Alternar bloqueo en lienzo"
  },
+  "Comfy_Canvas_ToggleMinimap": {
+    "label": "Lienzo Alternar Minimapa"
+  },
  "Comfy_Canvas_ToggleSelectedNodes_Bypass": {
    "label": "Omitir/No omitir nodos seleccionados"
  },
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -290,6 +290,7 @@
    "devices": "Dispositivos",
    "disableAll": "Deshabilitar todo",
    "disabling": "Deshabilitando",
+    "dismiss": "Descartar",
    "download": "Descargar",
    "edit": "Editar",
    "empty": "Vacío",
@@ -304,6 +305,8 @@
    "filter": "Filtrar",
    "findIssues": "Encontrar problemas",
    "firstTimeUIMessage": "Esta es la primera vez que usas la nueva interfaz. Elige \"Menú > Usar nuevo menú > Desactivado\" para restaurar la antigua interfaz.",
+    "frontendNewer": "La versión del frontend {frontendVersion} puede no ser compatible con la versión del backend {backendVersion}.",
+    "frontendOutdated": "La versión del frontend {frontendVersion} está desactualizada. El backend requiere la versión {requiredVersion} o superior.",
    "goToNode": "Ir al nodo",
    "help": "Ayuda",
    "icon": "Icono",
@@ -379,11 +382,14 @@
    "unknownError": "Error desconocido",
    "update": "Actualizar",
    "updateAvailable": "Actualización Disponible",
+    "updateFrontend": "Actualizar frontend",
    "updated": "Actualizado",
    "updating": "Actualizando",
    "upload": "Subir",
    "usageHint": "Sugerencia de uso",
    "user": "Usuario",
+    "versionMismatchWarning": "Advertencia de compatibilidad de versión",
+    "versionMismatchWarningMessage": "{warning}: {detail} Visita https://docs.comfy.org/installation/update_comfyui#common-update-issues para obtener instrucciones de actualización.",
    "videoFailedToLoad": "Falló la carga del video",
    "workflow": "Flujo de trabajo"
  },
@@ -393,6 +399,7 @@
    "resetView": "Restablecer vista",
    "selectMode": "Modo de selección",
    "toggleLinkVisibility": "Alternar visibilidad de enlace",
+    "toggleMinimap": "Alternar minimapa",
    "zoomIn": "Acercar",
    "zoomOut": "Alejar"
  },
@@ -722,6 +729,7 @@
    "Bypass/Unbypass Selected Nodes": "Evitar/No evitar nodos seleccionados",
    "Canvas Toggle Link Visibility": "Alternar visibilidad de enlace en lienzo",
    "Canvas Toggle Lock": "Alternar bloqueo en lienzo",
+    "Canvas Toggle Minimap": "Lienzo: Alternar minimapa",
    "Check for Updates": "Buscar actualizaciones",
    "Clear Pending Tasks": "Borrar tareas pendientes",
    "Clear Workflow": "Borrar flujo de trabajo",
@@ -1583,6 +1591,13 @@
    "prefix": "Debe comenzar con {prefix}",
    "required": "Requerido"
  },
+  "versionMismatchWarning": {
+    "dismiss": "Descartar",
+    "frontendNewer": "La versión del frontend {frontendVersion} puede no ser compatible con la versión del backend {backendVersion}.",
+    "frontendOutdated": "La versión del frontend {frontendVersion} está desactualizada. El backend requiere la versión {requiredVersion} o superior.",
+    "title": "Advertencia de compatibilidad de versión",
+    "updateFrontend": "Actualizar frontend"
+  },
  "welcome": {
    "getStarted": "Empezar",
    "title": "Bienvenido a ComfyUI"
--- a/src/locales/es/settings.json
+++ b/src/locales/es/settings.json
@@ -329,10 +329,6 @@
    },
    "tooltip": "Posición de la barra de menú. En dispositivos móviles, el menú siempre se muestra en la parte superior."
  },
-  "Comfy_Validation_NodeDefs": {
-    "name": "Validar definiciones de nodos (lento)",
-    "tooltip": "Recomendado para desarrolladores de nodos. Esto validará todas las definiciones de nodos al iniciar."
-  },
  "Comfy_Validation_Workflows": {
    "name": "Validar flujos de trabajo"
  },
--- a/src/locales/fr/commands.json
+++ b/src/locales/fr/commands.json
@@ -71,6 +71,9 @@
  "Comfy_Canvas_ToggleLock": {
    "label": "Basculer le verrouillage du canevas"
  },
+  "Comfy_Canvas_ToggleMinimap": {
+    "label": "Basculer la mini-carte du canevas"
+  },
  "Comfy_Canvas_ToggleSelectedNodes_Bypass": {
    "label": "Contourner/Ne pas contourner les nœuds sélectionnés"
  },
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -290,6 +290,7 @@
    "devices": "Appareils",
    "disableAll": "Désactiver tout",
    "disabling": "Désactivation",
+    "dismiss": "Fermer",
    "download": "Télécharger",
    "edit": "Modifier",
    "empty": "Vide",
@@ -304,6 +305,8 @@
    "filter": "Filtrer",
    "findIssues": "Trouver des problèmes",
    "firstTimeUIMessage": "C'est la première fois que vous utilisez la nouvelle interface utilisateur. Choisissez \"Menu > Utiliser le nouveau menu > Désactivé\" pour restaurer l'ancienne interface utilisateur.",
+    "frontendNewer": "La version du frontend {frontendVersion} peut ne pas être compatible avec la version du backend {backendVersion}.",
+    "frontendOutdated": "La version du frontend {frontendVersion} est obsolète. Le backend requiert la version {requiredVersion} ou supérieure.",
    "goToNode": "Aller au nœud",
    "help": "Aide",
    "icon": "Icône",
@@ -379,11 +382,14 @@
    "unknownError": "Erreur inconnue",
    "update": "Mettre à jour",
    "updateAvailable": "Mise à jour disponible",
+    "updateFrontend": "Mettre à jour le frontend",
    "updated": "Mis à jour",
    "updating": "Mise à jour",
    "upload": "Téléverser",
    "usageHint": "Conseil d'utilisation",
    "user": "Utilisateur",
+    "versionMismatchWarning": "Avertissement de compatibilité de version",
+    "versionMismatchWarningMessage": "{warning} : {detail} Consultez https://docs.comfy.org/installation/update_comfyui#common-update-issues pour les instructions de mise à jour.",
    "videoFailedToLoad": "Échec du chargement de la vidéo",
    "workflow": "Flux de travail"
  },
@@ -393,6 +399,7 @@
    "resetView": "Réinitialiser la vue",
    "selectMode": "Mode sélection",
    "toggleLinkVisibility": "Basculer la visibilité des liens",
+    "toggleMinimap": "Afficher/Masquer la mini-carte",
    "zoomIn": "Zoom avant",
    "zoomOut": "Zoom arrière"
  },
@@ -722,6 +729,7 @@
    "Bypass/Unbypass Selected Nodes": "Contourner/Ne pas contourner les nœuds sélectionnés",
    "Canvas Toggle Link Visibility": "Basculer la visibilité du lien de la toile",
    "Canvas Toggle Lock": "Basculer le verrouillage de la toile",
+    "Canvas Toggle Minimap": "Basculer la mini-carte du canevas",
    "Check for Updates": "Vérifier les mises à jour",
    "Clear Pending Tasks": "Effacer les tâches en attente",
    "Clear Workflow": "Effacer le flux de travail",
@@ -1583,6 +1591,13 @@
    "prefix": "Doit commencer par {prefix}",
    "required": "Requis"
  },
+  "versionMismatchWarning": {
+    "dismiss": "Ignorer",
+    "frontendNewer": "La version du frontend {frontendVersion} peut ne pas être compatible avec la version du backend {backendVersion}.",
+    "frontendOutdated": "La version du frontend {frontendVersion} est obsolète. Le backend nécessite la version {requiredVersion} ou supérieure.",
+    "title": "Avertissement de compatibilité de version",
+    "updateFrontend": "Mettre à jour le frontend"
+  },
  "welcome": {
    "getStarted": "Commencer",
    "title": "Bienvenue sur ComfyUI"
--- a/src/locales/fr/settings.json
+++ b/src/locales/fr/settings.json
@@ -329,10 +329,6 @@
    },
    "tooltip": "Position de la barre de menu. Sur les appareils mobiles, le menu est toujours affiché en haut."
  },
-  "Comfy_Validation_NodeDefs": {
-    "name": "Valider les définitions de nœuds (lent)",
-    "tooltip": "Recommandé pour les développeurs de nœuds. Cela validera toutes les définitions de nœuds au démarrage."
-  },
  "Comfy_Validation_Workflows": {
    "name": "Valider les flux de travail"
  },
--- a/src/locales/ja/commands.json
+++ b/src/locales/ja/commands.json
@@ -71,6 +71,9 @@
  "Comfy_Canvas_ToggleLock": {
    "label": "キャンバスのロックを切り替える"
  },
+  "Comfy_Canvas_ToggleMinimap": {
+    "label": "キャンバス ミニマップ切り替え"
+  },
  "Comfy_Canvas_ToggleSelectedNodes_Bypass": {
    "label": "選択したノードのバイパス/バイパス解除"
  },
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -290,6 +290,7 @@
    "devices": "デバイス",
    "disableAll": "すべて無効にする",
    "disabling": "無効化",
+    "dismiss": "閉じる",
    "download": "ダウンロード",
    "edit": "編集",
    "empty": "空",
@@ -304,6 +305,8 @@
    "filter": "フィルタ",
    "findIssues": "問題を見つける",
    "firstTimeUIMessage": "新しいUIを初めて使用しています。「メニュー > 新しいメニューを使用 > 無効」を選択することで古いUIに戻すことが可能です。",
+    "frontendNewer": "フロントエンドのバージョン {frontendVersion} はバックエンドのバージョン {backendVersion} と互換性がない可能性があります。",
+    "frontendOutdated": "フロントエンドのバージョン {frontendVersion} は古くなっています。バックエンドは {requiredVersion} 以上が必要です。",
    "goToNode": "ノードに移動",
    "help": "ヘルプ",
    "icon": "アイコン",
@@ -379,11 +382,14 @@
    "unknownError": "不明なエラー",
    "update": "更新",
    "updateAvailable": "更新が利用可能",
+    "updateFrontend": "フロントエンドを更新",
    "updated": "更新済み",
    "updating": "更新中",
    "upload": "アップロード",
    "usageHint": "使用ヒント",
    "user": "ユーザー",
+    "versionMismatchWarning": "バージョン互換性の警告",
+    "versionMismatchWarningMessage": "{warning}: {detail} 更新手順については https://docs.comfy.org/installation/update_comfyui#common-update-issues をご覧ください。",
    "videoFailedToLoad": "ビデオの読み込みに失敗しました",
    "workflow": "ワークフロー"
  },
@@ -393,6 +399,7 @@
    "resetView": "ビューをリセット",
    "selectMode": "選択モード",
    "toggleLinkVisibility": "リンクの表示切り替え",
+    "toggleMinimap": "ミニマップの切り替え",
    "zoomIn": "拡大",
    "zoomOut": "縮小"
  },
@@ -722,6 +729,7 @@
    "Bypass/Unbypass Selected Nodes": "選択したノードのバイパス/バイパス解除",
    "Canvas Toggle Link Visibility": "キャンバスのリンク表示を切り替え",
    "Canvas Toggle Lock": "キャンバスのロックを切り替え",
+    "Canvas Toggle Minimap": "キャンバス ミニマップの切り替え",
    "Check for Updates": "更新を確認する",
    "Clear Pending Tasks": "保留中のタスクをクリア",
    "Clear Workflow": "ワークフローをクリア",
@@ -1583,6 +1591,13 @@
    "prefix": "{prefix}で始める必要があります",
    "required": "必須"
  },
+  "versionMismatchWarning": {
+    "dismiss": "閉じる",
+    "frontendNewer": "フロントエンドのバージョン {frontendVersion} は、バックエンドのバージョン {backendVersion} と互換性がない可能性があります。",
+    "frontendOutdated": "フロントエンドのバージョン {frontendVersion} は古くなっています。バックエンドはバージョン {requiredVersion} 以上が必要です。",
+    "title": "バージョン互換性の警告",
+    "updateFrontend": "フロントエンドを更新"
+  },
  "welcome": {
    "getStarted": "はじめる",
    "title": "ComfyUIへようこそ"
--- a/src/locales/ja/settings.json
+++ b/src/locales/ja/settings.json
@@ -329,10 +329,6 @@
    },
    "tooltip": "メニューバーの位置。モバイルデバイスでは、メニューは常に上部に表示されます。"
  },
-  "Comfy_Validation_NodeDefs": {
-    "name": "ノード定義を検証（遅い）",
-    "tooltip": "ノード開発者に推奨されます。これにより、起動時にすべてのノード定義が検証されます。"
-  },
  "Comfy_Validation_Workflows": {
    "name": "ワークフローを検証"
  },
--- a/src/locales/ko/commands.json
+++ b/src/locales/ko/commands.json
@@ -71,6 +71,9 @@
  "Comfy_Canvas_ToggleLock": {
    "label": "캔버스 잠금 토글"
  },
+  "Comfy_Canvas_ToggleMinimap": {
+    "label": "캔버스 미니맵 전환"
+  },
  "Comfy_Canvas_ToggleSelectedNodes_Bypass": {
    "label": "선택한 노드 우회/우회 해제"
  },
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -290,6 +290,7 @@
    "devices": "장치",
    "disableAll": "모두 비활성화",
    "disabling": "비활성화 중",
+    "dismiss": "닫기",
    "download": "다운로드",
    "edit": "편집",
    "empty": "비어 있음",
@@ -304,6 +305,8 @@
    "filter": "필터",
    "findIssues": "문제 찾기",
    "firstTimeUIMessage": "새 UI를 처음 사용합니다. \"메뉴 > 새 메뉴 사용 > 비활성화\"를 선택하여 이전 UI로 복원하세요.",
+    "frontendNewer": "프론트엔드 버전 {frontendVersion}이(가) 백엔드 버전 {backendVersion}과(와) 호환되지 않을 수 있습니다.",
+    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래되었습니다. 백엔드는 {requiredVersion} 이상이 필요합니다.",
    "goToNode": "노드로 이동",
    "help": "도움말",
    "icon": "아이콘",
@@ -379,11 +382,14 @@
    "unknownError": "알 수 없는 오류",
    "update": "업데이트",
    "updateAvailable": "업데이트 가능",
+    "updateFrontend": "프론트엔드 업데이트",
    "updated": "업데이트 됨",
    "updating": "업데이트 중",
    "upload": "업로드",
    "usageHint": "사용 힌트",
    "user": "사용자",
+    "versionMismatchWarning": "버전 호환성 경고",
+    "versionMismatchWarningMessage": "{warning}: {detail} 업데이트 지침은 https://docs.comfy.org/installation/update_comfyui#common-update-issues 를 방문하세요.",
    "videoFailedToLoad": "비디오를 로드하지 못했습니다.",
    "workflow": "워크플로"
  },
@@ -393,6 +399,7 @@
    "resetView": "보기 재설정",
    "selectMode": "선택 모드",
    "toggleLinkVisibility": "링크 가시성 전환",
+    "toggleMinimap": "미니맵 전환",
    "zoomIn": "확대",
    "zoomOut": "축소"
  },
@@ -722,6 +729,7 @@
    "Bypass/Unbypass Selected Nodes": "선택한 노드 우회/우회 해제",
    "Canvas Toggle Link Visibility": "캔버스 토글 링크 가시성",
    "Canvas Toggle Lock": "캔버스 토글 잠금",
+    "Canvas Toggle Minimap": "캔버스 미니맵 전환",
    "Check for Updates": "업데이트 확인",
    "Clear Pending Tasks": "보류 중인 작업 제거하기",
    "Clear Workflow": "워크플로 지우기",
@@ -1583,6 +1591,13 @@
    "prefix": "{prefix}(으)로 시작해야 합니다",
    "required": "필수"
  },
+  "versionMismatchWarning": {
+    "dismiss": "닫기",
+    "frontendNewer": "프론트엔드 버전 {frontendVersion}이(가) 백엔드 버전 {backendVersion}과(와) 호환되지 않을 수 있습니다.",
+    "frontendOutdated": "프론트엔드 버전 {frontendVersion}이(가) 오래되었습니다. 백엔드는 {requiredVersion} 이상 버전을 필요로 합니다.",
+    "title": "버전 호환성 경고",
+    "updateFrontend": "프론트엔드 업데이트"
+  },
  "welcome": {
    "getStarted": "시작하기",
    "title": "ComfyUI에 오신 것을 환영합니다"
--- a/src/locales/ko/settings.json
+++ b/src/locales/ko/settings.json
@@ -329,10 +329,6 @@
    },
    "tooltip": "메뉴 바 위치입니다. 모바일 기기에서는 메뉴가 항상 상단에 표시됩니다."
  },
-  "Comfy_Validation_NodeDefs": {
-    "name": "노드 정의 유효성 검사 (느림)",
-    "tooltip": "노드 개발자에게 권장됩니다. 시작 시 모든 노드 정의를 유효성 검사합니다."
-  },
  "Comfy_Validation_Workflows": {
    "name": "워크플로 유효성 검사"
  },
--- a/src/locales/ru/commands.json
+++ b/src/locales/ru/commands.json
@@ -71,6 +71,9 @@
  "Comfy_Canvas_ToggleLock": {
    "label": "Переключить блокировку холста"
  },
+  "Comfy_Canvas_ToggleMinimap": {
+    "label": "Полотно: переключить миникарту"
+  },
  "Comfy_Canvas_ToggleSelectedNodes_Bypass": {
    "label": "Обход/Необход выбранных нод"
  },
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -290,6 +290,7 @@
    "devices": "Устройства",
    "disableAll": "Отключить все",
    "disabling": "Отключение",
+    "dismiss": "Закрыть",
    "download": "Скачать",
    "edit": "Редактировать",
    "empty": "Пусто",
@@ -304,6 +305,8 @@
    "filter": "Фильтр",
    "findIssues": "Найти проблемы",
    "firstTimeUIMessage": "Вы впервые используете новый интерфейс. Выберите \"Меню > Использовать новое меню > Отключено\", чтобы восстановить старый интерфейс.",
+    "frontendNewer": "Версия интерфейса {frontendVersion} может быть несовместима с версией сервера {backendVersion}.",
+    "frontendOutdated": "Версия интерфейса {frontendVersion} устарела. Требуется версия не ниже {requiredVersion} для работы с сервером.",
    "goToNode": "Перейти к ноде",
    "help": "Помощь",
    "icon": "Иконка",
@@ -379,11 +382,14 @@
    "unknownError": "Неизвестная ошибка",
    "update": "Обновить",
    "updateAvailable": "Доступно обновление",
+    "updateFrontend": "Обновить интерфейс",
    "updated": "Обновлено",
    "updating": "Обновление",
    "upload": "Загрузить",
    "usageHint": "Подсказка по использованию",
    "user": "Пользователь",
+    "versionMismatchWarning": "Предупреждение о несовместимости версий",
+    "versionMismatchWarningMessage": "{warning}: {detail} Посетите https://docs.comfy.org/installation/update_comfyui#common-update-issues для инструкций по обновлению.",
    "videoFailedToLoad": "Не удалось загрузить видео",
    "workflow": "Рабочий процесс"
  },
@@ -393,6 +399,7 @@
    "resetView": "Сбросить вид",
    "selectMode": "Выбрать режим",
    "toggleLinkVisibility": "Переключить видимость ссылок",
+    "toggleMinimap": "Показать/скрыть миникарту",
    "zoomIn": "Увеличить",
    "zoomOut": "Уменьшить"
  },
@@ -722,6 +729,7 @@
    "Bypass/Unbypass Selected Nodes": "Обойти/восстановить выбранные ноды",
    "Canvas Toggle Link Visibility": "Переключение видимости ссылки на холст",
    "Canvas Toggle Lock": "Переключение блокировки холста",
+    "Canvas Toggle Minimap": "Показать/скрыть миникарту на холсте",
    "Check for Updates": "Проверить наличие обновлений",
    "Clear Pending Tasks": "Очистить ожидающие задачи",
    "Clear Workflow": "Очистить рабочий процесс",
@@ -1583,6 +1591,13 @@
    "prefix": "Должно начинаться с {prefix}",
    "required": "Обязательно"
  },
+  "versionMismatchWarning": {
+    "dismiss": "Закрыть",
+    "frontendNewer": "Версия интерфейса {frontendVersion} может быть несовместима с версией сервера {backendVersion}.",
+    "frontendOutdated": "Версия интерфейса {frontendVersion} устарела. Для работы с сервером требуется версия {requiredVersion} или новее.",
+    "title": "Предупреждение о несовместимости версий",
+    "updateFrontend": "Обновить интерфейс"
+  },
  "welcome": {
    "getStarted": "Начать",
    "title": "Добро пожаловать в ComfyUI"
--- a/src/locales/ru/settings.json
+++ b/src/locales/ru/settings.json
@@ -329,10 +329,6 @@
    },
    "tooltip": "Расположение панели меню. На мобильных устройствах меню всегда отображается вверху."
  },
-  "Comfy_Validation_NodeDefs": {
-    "name": "Проверка определений нод (медленно)",
-    "tooltip": "Рекомендуется для разработчиков нод. Это проверит все определения нод при запуске."
-  },
  "Comfy_Validation_Workflows": {
    "name": "Проверка рабочих процессов"
  },
--- a/src/locales/zh-TW/commands.json
+++ b/src/locales/zh-TW/commands.json
@@ -71,6 +71,9 @@
  "Comfy_Canvas_ToggleLock": {
    "label": "畫布切換鎖定"
  },
+  "Comfy_Canvas_ToggleMinimap": {
+    "label": "畫布切換小地圖"
+  },
  "Comfy_Canvas_ToggleSelectedNodes_Bypass": {
    "label": "略過/取消略過選取的節點"
  },
--- a/src/locales/zh-TW/main.json
+++ b/src/locales/zh-TW/main.json
@@ -290,6 +290,7 @@
    "devices": "裝置",
    "disableAll": "全部停用",
    "disabling": "停用中",
+    "dismiss": "關閉",
    "download": "下載",
    "edit": "編輯",
    "empty": "空",
@@ -304,6 +305,8 @@
    "filter": "篩選",
    "findIssues": "尋找問題",
    "firstTimeUIMessage": "這是您第一次使用新介面。若要返回舊介面，請前往「選單」>「使用新介面」>「關閉」。",
+    "frontendNewer": "前端版本 {frontendVersion} 可能與後端版本 {backendVersion} 不相容。",
+    "frontendOutdated": "前端版本 {frontendVersion} 已過時。後端需要 {requiredVersion} 或更高版本。",
    "goToNode": "前往節點",
    "help": "說明",
    "icon": "圖示",
@@ -379,11 +382,14 @@
    "unknownError": "未知錯誤",
    "update": "更新",
    "updateAvailable": "有可用更新",
+    "updateFrontend": "更新前端",
    "updated": "已更新",
    "updating": "更新中",
    "upload": "上傳",
    "usageHint": "使用提示",
    "user": "使用者",
+    "versionMismatchWarning": "版本相容性警告",
+    "versionMismatchWarningMessage": "{warning}：{detail} 請參閱 https://docs.comfy.org/installation/update_comfyui#common-update-issues 以取得更新說明。",
    "videoFailedToLoad": "無法載入影片",
    "workflow": "工作流程"
  },
@@ -393,6 +399,7 @@
    "resetView": "重設視圖",
    "selectMode": "選取模式",
    "toggleLinkVisibility": "切換連結顯示",
+    "toggleMinimap": "切換小地圖",
    "zoomIn": "放大",
    "zoomOut": "縮小"
  },
@@ -722,6 +729,7 @@
    "Bypass/Unbypass Selected Nodes": "繞過/取消繞過選取節點",
    "Canvas Toggle Link Visibility": "切換連結可見性",
    "Canvas Toggle Lock": "切換畫布鎖定",
+    "Canvas Toggle Minimap": "畫布切換小地圖",
    "Check for Updates": "檢查更新",
    "Clear Pending Tasks": "清除待處理任務",
    "Clear Workflow": "清除工作流程",
@@ -1583,6 +1591,13 @@
    "prefix": "必須以 {prefix} 開頭",
    "required": "必填"
  },
+  "versionMismatchWarning": {
+    "dismiss": "關閉",
+    "frontendNewer": "前端版本 {frontendVersion} 可能與後端版本 {backendVersion} 不相容。",
+    "frontendOutdated": "前端版本 {frontendVersion} 已過時。後端需要版本 {requiredVersion} 或更高版本。",
+    "title": "版本相容性警告",
+    "updateFrontend": "更新前端"
+  },
  "welcome": {
    "getStarted": "開始使用",
    "title": "歡迎使用 ComfyUI"
--- a/src/locales/zh/commands.json
+++ b/src/locales/zh/commands.json
@@ -71,6 +71,9 @@
  "Comfy_Canvas_ToggleLock": {
    "label": "锁定视图"
  },
+  "Comfy_Canvas_ToggleMinimap": {
+    "label": "畫布切換小地圖"
+  },
  "Comfy_Canvas_ToggleSelectedNodes_Bypass": {
    "label": "忽略/取消忽略选中节点"
  },
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -290,6 +290,7 @@
    "devices": "设备",
    "disableAll": "禁用全部",
    "disabling": "禁用中",
+    "dismiss": "關閉",
    "download": "下载",
    "edit": "编辑",
    "empty": "空",
@@ -304,6 +305,8 @@
    "filter": "过滤",
    "findIssues": "查找问题",
    "firstTimeUIMessage": "这是您第一次使用新界面。选择 \"菜单 > 使用新菜单 > 禁用\" 来恢复旧界面。",
+    "frontendNewer": "前端版本 {frontendVersion} 可能與後端版本 {backendVersion} 不相容。",
+    "frontendOutdated": "前端版本 {frontendVersion} 已過時。後端需要 {requiredVersion} 或更高版本。",
    "goToNode": "转到节点",
    "help": "帮助",
    "icon": "图标",
@@ -379,11 +382,14 @@
    "unknownError": "未知错误",
    "update": "更新",
    "updateAvailable": "有更新可用",
+    "updateFrontend": "更新前端",
    "updated": "已更新",
    "updating": "更新中",
    "upload": "上传",
    "usageHint": "使用提示",
    "user": "用户",
+    "versionMismatchWarning": "版本相容性警告",
+    "versionMismatchWarningMessage": "{warning}：{detail} 請參閱 https://docs.comfy.org/installation/update_comfyui#common-update-issues 以取得更新說明。",
    "videoFailedToLoad": "视频加载失败",
    "workflow": "工作流"
  },
@@ -393,6 +399,7 @@
    "resetView": "重置视图",
    "selectMode": "选择模式",
    "toggleLinkVisibility": "切换连线可见性",
+    "toggleMinimap": "切換小地圖",
    "zoomIn": "放大",
    "zoomOut": "缩小"
  },
@@ -722,6 +729,7 @@
    "Bypass/Unbypass Selected Nodes": "忽略/取消忽略选定节点",
    "Canvas Toggle Link Visibility": "切换连线可见性",
    "Canvas Toggle Lock": "切换视图锁定",
+    "Canvas Toggle Minimap": "畫布切換小地圖",
    "Check for Updates": "检查更新",
    "Clear Pending Tasks": "清除待处理任务",
    "Clear Workflow": "清除工作流",
@@ -1583,6 +1591,13 @@
    "prefix": "必须以 {prefix} 开头",
    "required": "必填"
  },
+  "versionMismatchWarning": {
+    "dismiss": "關閉",
+    "frontendNewer": "前端版本 {frontendVersion} 可能與後端版本 {backendVersion} 不相容。",
+    "frontendOutdated": "前端版本 {frontendVersion} 已過時。後端需要 {requiredVersion} 版或更高版本。",
+    "title": "版本相容性警告",
+    "updateFrontend": "更新前端"
+  },
  "welcome": {
    "getStarted": "开始使用",
    "title": "欢迎使用 ComfyUI"
--- a/src/locales/zh/settings.json
+++ b/src/locales/zh/settings.json
@@ -329,10 +329,6 @@
    },
    "tooltip": "選單列位置。在行動裝置上，選單始終顯示於頂端。"
  },
-  "Comfy_Validation_NodeDefs": {
-    "name": "校验节点定义（慢）",
-    "tooltip": "推荐给节点开发者。开启后会在 ComfyUI 启动时校验全部节点定义。"
-  },
  "Comfy_Validation_Workflows": {
    "name": "校验工作流"
  },
--- a/src/schemas/apiSchema.ts
+++ b/src/schemas/apiSchema.ts
@@ -475,6 +475,8 @@ const zSettings = z.object({
  'Comfy.TutorialCompleted': z.boolean(),
  'Comfy.InstalledVersion': z.string().nullable(),
  'Comfy.Node.AllowImageSizeDraw': z.boolean(),
+  'Comfy.Minimap.Visible': z.boolean(),
+  'Comfy.Canvas.NavigationMode': z.string(),
  'Comfy-Desktop.AutoUpdate': z.boolean(),
  'Comfy-Desktop.SendStatistics': z.boolean(),
  'Comfy-Desktop.WindowStyle': z.string(),
--- a/src/schemas/comfyWorkflowSchema.ts
+++ b/src/schemas/comfyWorkflowSchema.ts
@@ -458,6 +458,24 @@ export type WorkflowJSON10 = z.infer<typeof zComfyWorkflow1>
 export type ComfyWorkflowJSON = z.infer<
  typeof zComfyWorkflow | typeof zComfyWorkflow1
 >
+export type SubgraphDefinition = z.infer<typeof zSubgraphDefinition>
+
+/**
+ * Type guard to check if an object is a SubgraphDefinition.
+ * This helps TypeScript understand the type when z.lazy() breaks inference.
+ */
+export function isSubgraphDefinition(obj: any): obj is SubgraphDefinition {
+  return (
+    obj &&
+    typeof obj === 'object' &&
+    'id' in obj &&
+    'name' in obj &&
+    'nodes' in obj &&
+    Array.isArray(obj.nodes) &&
+    'inputNode' in obj &&
+    'outputNode' in obj
+  )
+}

 const zWorkflowVersion = z.object({
  version: z.number()
--- a/src/scripts/api.ts
+++ b/src/scripts/api.ts
@@ -34,15 +34,14 @@ import type {
  ComfyWorkflowJSON,
  NodeId
 } from '@/schemas/comfyWorkflowSchema'
-import {
-  type ComfyNodeDef,
-  validateComfyNodeDef
-} from '@/schemas/nodeDefSchema'
+import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
+import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { WorkflowTemplates } from '@/types/workflowTemplateTypes'

 interface QueuePromptRequestBody {
  client_id: string
  prompt: ComfyApiWorkflow
+  partial_execution_targets?: NodeExecutionId[]
  extra_data: {
    extra_pnginfo: {
      workflow: ComfyWorkflowJSON
@@ -83,6 +82,18 @@ interface QueuePromptRequestBody {
  number?: number
 }

+/**
+ * Options for queuePrompt method
+ */
+interface QueuePromptOptions {
+  /**
+   * Optional list of node execution IDs to execute (partial execution).
+   * Each ID represents a node's position in nested subgraphs.
+   * Format: Colon-separated path of node IDs (e.g., "123:456:789")
+   */
+  partialExecutionTargets?: NodeExecutionId[]
+}
+
 /** Dictionary of Frontend-generated API calls */
 interface FrontendApiCalls {
  graphChanged: ComfyWorkflowJSON
@@ -605,48 +616,31 @@ export class ComfyApi extends EventTarget {
   * Loads node object definitions for the graph
   * @returns The node definitions
   */
-  async getNodeDefs({ validate = false }: { validate?: boolean } = {}): Promise<
-    Record<string, ComfyNodeDef>
-  > {
+  async getNodeDefs(): Promise<Record<string, ComfyNodeDef>> {
    const resp = await this.fetchApi('/object_info', { cache: 'no-store' })
-    const objectInfoUnsafe = await resp.json()
-    if (!validate) {
-      return objectInfoUnsafe
-    }
-    // Validate node definitions against zod schema. (slow)
-    const objectInfo: Record<string, ComfyNodeDef> = {}
-    for (const key in objectInfoUnsafe) {
-      const validatedDef = validateComfyNodeDef(
-        objectInfoUnsafe[key],
-        /* onError=*/ (errorMessage: string) => {
-          console.warn(
-            `Skipping invalid node definition: ${key}. See debug log for more information.`
-          )
-          console.debug(errorMessage)
-        }
-      )
-      if (validatedDef !== null) {
-        objectInfo[key] = validatedDef
-      }
-    }
-    return objectInfo
+    return await resp.json()
  }

  /**
   * Queues a prompt to be executed
   * @param {number} number The index at which to queue the prompt, passing -1 will insert the prompt at the front of the queue
-   * @param {object} prompt The prompt data to queue
+   * @param {object} data The prompt data to queue
+   * @param {QueuePromptOptions} options Optional execution options
   * @throws {PromptExecutionError} If the prompt fails to execute
   */
  async queuePrompt(
    number: number,
-    data: { output: ComfyApiWorkflow; workflow: ComfyWorkflowJSON }
+    data: { output: ComfyApiWorkflow; workflow: ComfyWorkflowJSON },
+    options?: QueuePromptOptions
  ): Promise<PromptResponse> {
    const { output: prompt, workflow } = data

    const body: QueuePromptRequestBody = {
      client_id: this.clientId ?? '', // TODO: Unify clientId access
      prompt,
+      ...(options?.partialExecutionTargets && {
+        partial_execution_targets: options.partialExecutionTargets
+      }),
      extra_data: {
        auth_token_comfy_org: this.authToken,
        api_key_comfy_org: this.apiKey,
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -23,7 +23,8 @@ import {
  ComfyApiWorkflow,
  type ComfyWorkflowJSON,
  type ModelFile,
-  type NodeId
+  type NodeId,
+  isSubgraphDefinition
 } from '@/schemas/comfyWorkflowSchema'
 import {
  type ComfyNodeDef as ComfyNodeDefV1,
@@ -59,6 +60,7 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import { ExtensionManager } from '@/types/extensionTypes'
+import type { NodeExecutionId } from '@/types/nodeIdentification'
 import { ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 import { graphToPrompt } from '@/utils/executionUtil'
 import {
@@ -124,7 +126,7 @@ export class ComfyApp {
  #queueItems: {
    number: number
    batchCount: number
-    queueNodeIds?: NodeId[]
+    queueNodeIds?: NodeExecutionId[]
  }[] = []
  /**
   * If the queue is currently being processed
@@ -720,16 +722,12 @@ export class ComfyApp {
      fixLinkInputSlots(this)

      // Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
-      for (const node of graph.nodes) {
-        node.onGraphConfigured?.()
-      }
+      triggerCallbackOnAllNodes(this, 'onGraphConfigured')

      const r = onConfigure?.apply(this, args)

      // Fire after onConfigure, used by primitives to generate widget using input nodes config
-      for (const node of graph.nodes) {
-        node.onAfterGraphConfigured?.()
-      }
+      triggerCallbackOnAllNodes(this, 'onAfterGraphConfigured')

      return r
    }
@@ -855,26 +853,33 @@ export class ComfyApp {
  private updateVueAppNodeDefs(defs: Record<string, ComfyNodeDefV1>) {
    // Frontend only nodes registered by custom nodes.
    // Example: https://github.com/rgthree/rgthree-comfy/blob/dd534e5384be8cf0c0fa35865afe2126ba75ac55/src_web/comfyui/fast_groups_bypasser.ts#L10
-    const rawDefs: Record<string, ComfyNodeDefV1> = Object.fromEntries(
-      Object.entries(LiteGraph.registered_node_types).map(([name, node]) => [
+
+    // Only create frontend_only definitions for nodes that don't have backend definitions
+    const frontendOnlyDefs: Record<string, ComfyNodeDefV1> = {}
+    for (const [name, node] of Object.entries(
+      LiteGraph.registered_node_types
+    )) {
+      // Skip if we already have a backend definition or system definition
+      if (name in defs || name in SYSTEM_NODE_DEFS) {
+        continue
+      }
+
+      frontendOnlyDefs[name] = {
        name,
-        {
-          name,
-          display_name: name,
-          category: node.category || '__frontend_only__',
-          input: { required: {}, optional: {} },
-          output: [],
-          output_name: [],
-          output_is_list: [],
-          output_node: false,
-          python_module: 'custom_nodes.frontend_only',
-          description: `Frontend only node for ${name}`
-        } as ComfyNodeDefV1
-      ])
-    )
+        display_name: name,
+        category: node.category || '__frontend_only__',
+        input: { required: {}, optional: {} },
+        output: [],
+        output_name: [],
+        output_is_list: [],
+        output_node: false,
+        python_module: 'custom_nodes.frontend_only',
+        description: `Frontend only node for ${name}`
+      } as ComfyNodeDefV1
+    }

    const allNodeDefs = {
-      ...rawDefs,
+      ...frontendOnlyDefs,
      ...defs,
      ...SYSTEM_NODE_DEFS
    }
@@ -905,12 +910,7 @@ export class ComfyApp {
        .join('/')
    })

-    return _.mapValues(
-      await api.getNodeDefs({
-        validate: useSettingStore().get('Comfy.Validation.NodeDefs')
-      }),
-      (def) => translateNodeDef(def)
-    )
+    return _.mapValues(await api.getNodeDefs(), (def) => translateNodeDef(def))
  }

  /**
@@ -1061,23 +1061,51 @@ export class ComfyApp {

    const embeddedModels: ModelFile[] = []

-    for (let n of graphData.nodes) {
-      // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
-      if (n.type == 'T2IAdapterLoader') n.type = 'ControlNetLoader'
-      if (n.type == 'ConditioningAverage ') n.type = 'ConditioningAverage' //typo fix
-      if (n.type == 'SDV_img2vid_Conditioning')
-        n.type = 'SVD_img2vid_Conditioning' //typo fix
+    const collectMissingNodesAndModels = (
+      nodes: ComfyWorkflowJSON['nodes'],
+      path: string = ''
+    ) => {
+      for (let n of nodes) {
+        // Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
+        if (n.type == 'T2IAdapterLoader') n.type = 'ControlNetLoader'
+        if (n.type == 'ConditioningAverage ') n.type = 'ConditioningAverage' //typo fix
+        if (n.type == 'SDV_img2vid_Conditioning')
+          n.type = 'SVD_img2vid_Conditioning' //typo fix

-      // Find missing node types
-      if (!(n.type in LiteGraph.registered_node_types)) {
-        missingNodeTypes.push(n.type)
-        n.type = sanitizeNodeName(n.type)
+        // Find missing node types
+        if (!(n.type in LiteGraph.registered_node_types)) {
+          // Include context about subgraph location if applicable
+          if (path) {
+            missingNodeTypes.push({
+              type: n.type,
+              hint: `in subgraph '${path}'`
+            })
+          } else {
+            missingNodeTypes.push(n.type)
+          }
+          n.type = sanitizeNodeName(n.type)
+        }
+
+        // Collect models metadata from node
+        const selectedModels = getSelectedModelsMetadata(n)
+        if (selectedModels?.length) {
+          embeddedModels.push(...selectedModels)
+        }
      }
+    }

-      // Collect models metadata from node
-      const selectedModels = getSelectedModelsMetadata(n)
-      if (selectedModels?.length) {
-        embeddedModels.push(...selectedModels)
+    // Process nodes at the top level
+    collectMissingNodesAndModels(graphData.nodes)
+
+    // 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
+          )
+        }
      }
    }

@@ -1209,20 +1237,16 @@ export class ComfyApp {
    })
  }

-  async graphToPrompt(
-    graph = this.graph,
-    options: { queueNodeIds?: NodeId[] } = {}
-  ) {
+  async graphToPrompt(graph = this.graph) {
    return graphToPrompt(graph, {
-      sortNodes: useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave'),
-      queueNodeIds: options.queueNodeIds
+      sortNodes: useSettingStore().get('Comfy.Workflow.SortNodeIdOnSave')
    })
  }

  async queuePrompt(
    number: number,
    batchCount: number = 1,
-    queueNodeIds?: NodeId[]
+    queueNodeIds?: NodeExecutionId[]
  ): Promise<boolean> {
    this.#queueItems.push({ number, batchCount, queueNodeIds })

@@ -1251,11 +1275,13 @@ export class ComfyApp {
            executeWidgetsCallback(subgraph.nodes, 'beforeQueued')
          }

-          const p = await this.graphToPrompt(this.graph, { queueNodeIds })
+          const p = await this.graphToPrompt(this.graph)
          try {
            api.authToken = comfyOrgAuthToken
            api.apiKey = comfyOrgApiKey ?? undefined
-            const res = await api.queuePrompt(number, p)
+            const res = await api.queuePrompt(number, p, {
+              partialExecutionTargets: queueNodeIds
+            })
            delete api.authToken
            delete api.apiKey
            executionStore.lastNodeErrors = res.node_errors ?? null
--- a/src/scripts/changeTracker.ts
+++ b/src/scripts/changeTracker.ts
@@ -73,7 +73,8 @@ export class ChangeTracker {
      offset: [app.canvas.ds.offset[0], app.canvas.ds.offset[1]]
    }
    const navigation = useSubgraphNavigationStore().exportState()
-    this.subgraphState = navigation.length ? { navigation } : undefined
+    // Always store the navigation state, even if empty (root level)
+    this.subgraphState = { navigation }
  }

  restore() {
@@ -90,8 +91,14 @@ export class ChangeTracker {

      const activeId = navigation.at(-1)
      if (activeId) {
+        // Navigate to the saved subgraph
        const subgraph = app.graph.subgraphs.get(activeId)
-        if (subgraph) app.canvas.setGraph(subgraph)
+        if (subgraph) {
+          app.canvas.setGraph(subgraph)
+        }
+      } else {
+        // Empty navigation array means root level
+        app.canvas.setGraph(app.graph)
      }
    }
  }
--- a/src/scripts/domWidget.ts
+++ b/src/scripts/domWidget.ts
@@ -186,6 +186,9 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
      options: this.options
    })
    cloned.value = this.value
+    // Preserve the Y position from the original widget to maintain proper positioning
+    // when widgets are promoted through subgraph nesting
+    cloned.y = this.y
    return cloned
  }
 }
@@ -217,6 +220,9 @@ export class DOMWidgetImpl<T extends HTMLElement, V extends object | string>
      options: this.options
    })
    cloned.value = this.value
+    // Preserve the Y position from the original widget to maintain proper positioning
+    // when widgets are promoted through subgraph nesting
+    cloned.y = this.y
    return cloned
  }

--- a/src/scripts/utils.ts
+++ b/src/scripts/utils.ts
@@ -21,7 +21,7 @@ export function clone<T>(obj: T): T {
 * There are external callers to this function, so we need to keep it for now
 */
 export function applyTextReplacements(app: ComfyApp, value: string): string {
-  return _applyTextReplacements(app.graph.nodes, value)
+  return _applyTextReplacements(app.graph, value)
 }

 export async function addStylesheet(
--- a/src/services/litegraphService.ts
+++ b/src/services/litegraphService.ts
@@ -129,9 +129,15 @@ export const useLitegraphService = () => {
        void extensionService.invokeExtensionsAsync('nodeCreated', this)
        this.badges.push(
          new LGraphBadge({
-            text: '⇌',
-            fgColor: '#dad0de',
-            bgColor: '#b3b'
+            text: '',
+            iconOptions: {
+              unicode: '\ue96e',
+              fontFamily: 'PrimeIcons',
+              color: '#ffffff',
+              fontSize: 12
+            },
+            fgColor: '#ffffff',
+            bgColor: '#3b82f6'
          })
        )
      }
--- a/src/stores/nodeDefStore.ts
+++ b/src/stores/nodeDefStore.ts
@@ -334,8 +334,10 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
  }
  function fromLGraphNode(node: LGraphNode): ComfyNodeDefImpl | null {
    // Frontend-only nodes don't have nodeDef
-    // @ts-expect-error Optional chaining used in index
-    return nodeDefsByName.value[node.constructor?.nodeData?.name] ?? null
+    const nodeTypeName = node.constructor?.nodeData?.name
+    if (!nodeTypeName) return null
+    const nodeDef = nodeDefsByName.value[nodeTypeName] ?? null
+    return nodeDef
  }

  /**
--- a/src/stores/subgraphNavigationStore.ts
+++ b/src/stores/subgraphNavigationStore.ts
@@ -1,10 +1,14 @@
+import QuickLRU from '@alloc/quick-lru'
 import type { Subgraph } from '@comfyorg/litegraph'
+import type { DragAndScaleState } from '@comfyorg/litegraph/dist/DragAndScale'
 import { defineStore } from 'pinia'
-import { computed, shallowReactive, shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'

 import { app } from '@/scripts/app'
+import { findSubgraphPathById } from '@/utils/graphTraversalUtil'
 import { isNonNullish } from '@/utils/typeGuardUtil'

+import { useCanvasStore } from './graphStore'
 import { useWorkflowStore } from './workflowStore'

 /**
@@ -16,19 +20,38 @@ export const useSubgraphNavigationStore = defineStore(
  'subgraphNavigation',
  () => {
    const workflowStore = useWorkflowStore()
+    const canvasStore = useCanvasStore()

    /** The currently opened subgraph. */
    const activeSubgraph = shallowRef<Subgraph>()

    /** The stack of subgraph IDs from the root graph to the currently opened subgraph. */
-    const idStack = shallowReactive<string[]>([])
+    const idStack = ref<string[]>([])
+
+    /** LRU cache for viewport states. Key: subgraph ID or 'root' for root graph */
+    const viewportCache = new QuickLRU<string, DragAndScaleState>({
+      maxSize: 32
+    })
+
+    /**
+     * Get the ID of the root graph for the currently active workflow.
+     * @returns The ID of the root graph for the currently active workflow.
+     */
+    const getCurrentRootGraphId = () => {
+      const canvas = canvasStore.getCanvas()
+      if (!canvas) return 'root'
+
+      return canvas.graph?.rootGraph?.id ?? 'root'
+    }

    /**
     * A stack representing subgraph navigation history from the root graph to
     * the current opened subgraph.
     */
    const navigationStack = computed(() =>
-      idStack.map((id) => app.graph.subgraphs.get(id)).filter(isNonNullish)
+      idStack.value
+        .map((id) => app.graph.subgraphs.get(id))
+        .filter(isNonNullish)
    )

    /**
@@ -37,8 +60,8 @@ export const useSubgraphNavigationStore = defineStore(
     * @see exportState
     */
    const restoreState = (subgraphIds: string[]) => {
-      idStack.length = 0
-      for (const id of subgraphIds) idStack.push(id)
+      idStack.value.length = 0
+      for (const id of subgraphIds) idStack.value.push(id)
    }

    /**
@@ -46,34 +69,93 @@ export const useSubgraphNavigationStore = defineStore(
     * @returns The list of subgraph IDs, ending with the currently active subgraph.
     * @see restoreState
     */
-    const exportState = () => [...idStack]
+    const exportState = () => [...idStack.value]

-    // Reset on workflow change
-    watch(
-      () => workflowStore.activeWorkflow,
-      () => (idStack.length = 0)
-    )
+    /**
+     * Get the current viewport state.
+     * @returns The current viewport state, or null if the canvas is not available.
+     */
+    const getCurrentViewport = (): DragAndScaleState | null => {
+      const canvas = canvasStore.getCanvas()
+      if (!canvas) return null

-    // Update navigation stack when opened subgraph changes
+      return {
+        scale: canvas.ds.state.scale,
+        offset: [...canvas.ds.state.offset]
+      }
+    }
+
+    /**
+     * Save the current viewport state.
+     * @param graphId The graph ID to save for. Use 'root' for root graph, or omit to use current context.
+     */
+    const saveViewport = (graphId: string) => {
+      const viewport = getCurrentViewport()
+      if (!viewport) return
+
+      viewportCache.set(graphId, viewport)
+    }
+
+    /**
+     * Restore viewport state for a graph.
+     * @param graphId The graph ID to restore. Use 'root' for root graph, or omit to use current context.
+     */
+    const restoreViewport = (graphId: string) => {
+      const viewport = viewportCache.get(graphId)
+      if (!viewport) return
+
+      const canvas = app.canvas
+      if (!canvas) return
+
+      canvas.ds.scale = viewport.scale
+      canvas.ds.offset[0] = viewport.offset[0]
+      canvas.ds.offset[1] = viewport.offset[1]
+      canvas.setDirty(true, true)
+    }
+
+    /**
+     * Update the navigation stack when the active subgraph changes.
+     * @param subgraph The new active subgraph.
+     * @param prevSubgraph The previous active subgraph.
+     */
+    const onNavigated = (
+      subgraph: Subgraph | undefined,
+      prevSubgraph: Subgraph | undefined
+    ) => {
+      // Save viewport state for the graph we're leaving
+      if (prevSubgraph) {
+        // Leaving a subgraph
+        saveViewport(prevSubgraph.id)
+      } else if (!prevSubgraph && subgraph) {
+        // Leaving root graph to enter a subgraph
+        saveViewport(getCurrentRootGraphId())
+      }
+
+      const isInRootGraph = !subgraph
+      if (isInRootGraph) {
+        idStack.value.length = 0
+        restoreViewport(getCurrentRootGraphId())
+        return
+      }
+
+      const path = findSubgraphPathById(subgraph.rootGraph, subgraph.id)
+      const isInReachableSubgraph = !!path
+      if (isInReachableSubgraph) {
+        idStack.value = [...path]
+      } else {
+        // Treat as if opening a new subgraph
+        idStack.value = [subgraph.id]
+      }
+
+      // Always try to restore viewport for the target subgraph
+      restoreViewport(subgraph.id)
+    }
+
+    // Update navigation stack when opened subgraph changes (also triggers when switching workflows)
    watch(
      () => workflowStore.activeSubgraph,
-      (subgraph) => {
-        // Navigated back to the root graph
-        if (!subgraph) {
-          idStack.length = 0
-          return
-        }
-
-        const index = idStack.lastIndexOf(subgraph.id)
-        const lastIndex = idStack.length - 1
-
-        if (index === -1) {
-          // Opened a new subgraph
-          idStack.push(subgraph.id)
-        } else if (index !== lastIndex) {
-          // Navigated to a different subgraph
-          idStack.splice(index + 1, lastIndex - index)
-        }
+      (newValue, oldValue) => {
+        onNavigated(newValue, oldValue)
      }
    )

@@ -81,7 +163,10 @@ export const useSubgraphNavigationStore = defineStore(
      activeSubgraph,
      navigationStack,
      restoreState,
-      exportState
+      exportState,
+      saveViewport,
+      restoreViewport,
+      viewportCache
    }
  }
 )
--- a/src/utils/executionUtil.ts
+++ b/src/utils/executionUtil.ts
@@ -1,8 +1,7 @@
 import type {
  ExecutableLGraphNode,
  ExecutionId,
-  LGraph,
-  NodeId
+  LGraph
 } from '@comfyorg/litegraph'
 import {
  ExecutableNodeDTO,
@@ -18,31 +17,6 @@ import type {
 import { ExecutableGroupNodeDTO, isGroupNode } from './executableGroupNodeDto'
 import { compressWidgetInputSlots } from './litegraphUtil'

-/**
- * Recursively target node's parent nodes to the new output.
- * @param nodeId The node id to add.
- * @param oldOutput The old output.
- * @param newOutput The new output.
- * @returns The new output.
- */
-function recursiveAddNodes(
-  nodeId: NodeId,
-  oldOutput: ComfyApiWorkflow,
-  newOutput: ComfyApiWorkflow
-) {
-  const currentId = String(nodeId)
-  const currentNode = oldOutput[currentId]!
-  if (newOutput[currentId] == null) {
-    newOutput[currentId] = currentNode
-    for (const inputValue of Object.values(currentNode.inputs || [])) {
-      if (Array.isArray(inputValue)) {
-        recursiveAddNodes(inputValue[0], oldOutput, newOutput)
-      }
-    }
-  }
-  return newOutput
-}
-
 /**
 * Converts the current graph workflow for sending to the API.
 * @note Node widgets are updated before serialization to prepare queueing.
@@ -50,14 +24,13 @@ function recursiveAddNodes(
 * @param graph The graph to convert.
 * @param options The options for the conversion.
 *  - `sortNodes`: Whether to sort the nodes by execution order.
- *  - `queueNodeIds`: The output nodes to execute. Execute all output nodes if not provided.
 * @returns The workflow and node links
 */
 export const graphToPrompt = async (
  graph: LGraph,
-  options: { sortNodes?: boolean; queueNodeIds?: NodeId[] } = {}
+  options: { sortNodes?: boolean } = {}
 ): Promise<{ workflow: ComfyWorkflowJSON; output: ComfyApiWorkflow }> => {
-  const { sortNodes = false, queueNodeIds } = options
+  const { sortNodes = false } = options

  for (const node of graph.computeExecutionOrder(false)) {
    const innerNodes = node.getInnerNodes
@@ -104,7 +77,7 @@ export const graphToPrompt = async (
    nodeDtoMap.set(dto.id, dto)
  }

-  let output: ComfyApiWorkflow = {}
+  const output: ComfyApiWorkflow = {}
  // Process nodes in order of execution
  for (const node of nodeDtoMap.values()) {
    // Don't serialize muted nodes
@@ -180,14 +153,5 @@ export const graphToPrompt = async (
    }
  }

-  // Partial execution
-  if (queueNodeIds?.length) {
-    const newOutput = {}
-    for (const queueNodeId of queueNodeIds) {
-      recursiveAddNodes(queueNodeId, output, newOutput)
-    }
-    output = newOutput
-  }
-
  return { workflow: workflow as ComfyWorkflowJSON, output }
 }
--- a/src/utils/graphTraversalUtil.ts
+++ b/src/utils/graphTraversalUtil.ts
@@ -1,8 +1,10 @@
 import type { LGraph, LGraphNode, Subgraph } from '@comfyorg/litegraph'

-import type { NodeLocatorId } from '@/types/nodeIdentification'
+import type { NodeExecutionId, NodeLocatorId } from '@/types/nodeIdentification'
 import { parseNodeLocatorId } from '@/types/nodeIdentification'

+import { isSubgraphIoNode } from './typeGuardUtil'
+
 /**
 * Parses an execution ID into its component parts.
 *
@@ -86,13 +88,7 @@ export function triggerCallbackOnAllNodes(
  graph: LGraph | Subgraph,
  callbackProperty: keyof LGraphNode
 ): void {
-  visitGraphNodes(graph, (node) => {
-    // Recursively process subgraphs first
-    if (node.isSubgraphNode?.() && node.subgraph) {
-      triggerCallbackOnAllNodes(node.subgraph, callbackProperty)
-    }
-
-    // Invoke callback if it exists on the node
+  forEachNode(graph, (node) => {
    const callback = node[callbackProperty]
    if (typeof callback === 'function') {
      callback.call(node)
@@ -100,6 +96,58 @@ export function triggerCallbackOnAllNodes(
  })
 }

+/**
+ * Maps a function over all nodes in a graph hierarchy (including subgraphs).
+ * This is a pure functional traversal that doesn't mutate the graph.
+ *
+ * @param graph - The root graph to traverse
+ * @param mapFn - Function to apply to each node
+ * @returns Array of mapped results (excluding undefined values)
+ */
+export function mapAllNodes<T>(
+  graph: LGraph | Subgraph,
+  mapFn: (node: LGraphNode) => T | undefined
+): T[] {
+  const results: T[] = []
+
+  visitGraphNodes(graph, (node) => {
+    // Recursively map over subgraphs first
+    if (node.isSubgraphNode?.() && node.subgraph) {
+      results.push(...mapAllNodes(node.subgraph, mapFn))
+    }
+
+    // Apply map function to current node
+    const result = mapFn(node)
+    if (result !== undefined) {
+      results.push(result)
+    }
+  })
+
+  return results
+}
+
+/**
+ * Executes a side-effect function on all nodes in a graph hierarchy.
+ * This is for operations that modify nodes or perform side effects.
+ *
+ * @param graph - The root graph to traverse
+ * @param fn - Function to execute on each node
+ */
+export function forEachNode(
+  graph: LGraph | Subgraph,
+  fn: (node: LGraphNode) => void
+): void {
+  visitGraphNodes(graph, (node) => {
+    // Recursively process subgraphs first
+    if (node.isSubgraphNode?.() && node.subgraph) {
+      forEachNode(node.subgraph, fn)
+    }
+
+    // Execute function on current node
+    fn(node)
+  })
+}
+
 /**
 * Collects all nodes in a graph hierarchy (including subgraphs) into a flat array.
 *
@@ -111,21 +159,12 @@ export function collectAllNodes(
  graph: LGraph | Subgraph,
  filter?: (node: LGraphNode) => boolean
 ): LGraphNode[] {
-  const nodes: LGraphNode[] = []
-
-  visitGraphNodes(graph, (node) => {
-    // Recursively collect from subgraphs
-    if (node.isSubgraphNode?.() && node.subgraph) {
-      nodes.push(...collectAllNodes(node.subgraph, filter))
-    }
-
-    // Add node if it passes the filter (or no filter provided)
+  return mapAllNodes(graph, (node) => {
    if (!filter || filter(node)) {
-      nodes.push(node)
+      return node
    }
+    return undefined
  })
-
-  return nodes
 }

 /**
@@ -166,7 +205,7 @@ export function findSubgraphByUuid(
  targetUuid: string
 ): Subgraph | null {
  // Check all nodes in the current graph
-  for (const node of graph._nodes) {
+  for (const node of graph.nodes) {
    if (node.isSubgraphNode?.() && node.subgraph) {
      if (node.subgraph.id === targetUuid) {
        return node.subgraph
@@ -179,6 +218,42 @@ export function findSubgraphByUuid(
  return null
 }

+/**
+ * Iteratively finds the path of subgraph IDs to a target subgraph.
+ * @param rootGraph The graph to start searching from.
+ * @param targetId The ID of the subgraph to find.
+ * @returns An array of subgraph IDs representing the path, or `null` if not found.
+ */
+export function findSubgraphPathById(
+  rootGraph: LGraph,
+  targetId: string
+): string[] | null {
+  const stack: { graph: LGraph | Subgraph; path: string[] }[] = [
+    { graph: rootGraph, path: [] }
+  ]
+
+  while (stack.length > 0) {
+    const { graph, path } = stack.pop()!
+
+    // Check if graph exists and has _nodes property
+    if (!graph || !graph._nodes || !Array.isArray(graph._nodes)) {
+      continue
+    }
+
+    for (const node of graph._nodes) {
+      if (node.isSubgraphNode?.() && node.subgraph) {
+        const newPath = [...path, String(node.subgraph.id)]
+        if (node.subgraph.id === targetId) {
+          return newPath
+        }
+        stack.push({ graph: node.subgraph, path: newPath })
+      }
+    }
+  }
+
+  return null
+}
+
 /**
 * Get a node by its execution ID from anywhere in the graph hierarchy.
 * Execution IDs use hierarchical format like "123:456:789" for nested nodes.
@@ -241,3 +316,202 @@ export function getNodeByLocatorId(

  return targetSubgraph.getNodeById(localNodeId) || null
 }
+
+/**
+ * Finds the root graph from any graph in the hierarchy.
+ *
+ * @param graph - Any graph or subgraph in the hierarchy
+ * @returns The root graph
+ */
+export function getRootGraph(graph: LGraph | Subgraph): LGraph | Subgraph {
+  let current: LGraph | Subgraph = graph
+  while ('rootGraph' in current && current.rootGraph) {
+    current = current.rootGraph
+  }
+  return current
+}
+
+/**
+ * Applies a function to all nodes whose type matches a subgraph ID.
+ * Operates on the entire graph hierarchy starting from the root.
+ *
+ * @param rootGraph - The root graph to search in
+ * @param subgraphId - The ID/type of the subgraph to match nodes against
+ * @param fn - Function to apply to each matching node
+ */
+export function forEachSubgraphNode(
+  rootGraph: LGraph | Subgraph | null | undefined,
+  subgraphId: string | null | undefined,
+  fn: (node: LGraphNode) => void
+): void {
+  if (!rootGraph || !subgraphId) return
+
+  forEachNode(rootGraph, (node) => {
+    if (node.type === subgraphId) {
+      fn(node)
+    }
+  })
+}
+
+/**
+ * Maps a function over all nodes whose type matches a subgraph ID.
+ * Operates on the entire graph hierarchy starting from the root.
+ *
+ * @param rootGraph - The root graph to search in
+ * @param subgraphId - The ID/type of the subgraph to match nodes against
+ * @param mapFn - Function to apply to each matching node
+ * @returns Array of mapped results
+ */
+export function mapSubgraphNodes<T>(
+  rootGraph: LGraph | Subgraph | null | undefined,
+  subgraphId: string | null | undefined,
+  mapFn: (node: LGraphNode) => T
+): T[] {
+  if (!rootGraph || !subgraphId) return []
+
+  return mapAllNodes(rootGraph, (node) => {
+    if (node.type === subgraphId) {
+      return mapFn(node)
+    }
+    return undefined
+  })
+}
+
+/**
+ * Gets all non-IO nodes from a subgraph (excludes SubgraphInputNode and SubgraphOutputNode).
+ * These are the user-created nodes that can be safely removed when clearing a subgraph.
+ *
+ * @param subgraph - The subgraph to get non-IO nodes from
+ * @returns Array of non-IO nodes (user-created nodes)
+ */
+export function getAllNonIoNodesInSubgraph(subgraph: Subgraph): LGraphNode[] {
+  return subgraph.nodes.filter((node) => !isSubgraphIoNode(node))
+}
+
+/**
+ * Options for traverseNodesDepthFirst function
+ */
+export interface TraverseNodesOptions<T> {
+  /** Function called for each node during traversal */
+  visitor?: (node: LGraphNode, context: T) => T
+  /** Initial context value */
+  initialContext?: T
+  /** Whether to traverse into subgraph nodes (default: true) */
+  expandSubgraphs?: boolean
+}
+
+/**
+ * Performs depth-first traversal of nodes and their subgraphs.
+ * Generic visitor pattern that can be used for various node processing tasks.
+ *
+ * @param nodes - Starting nodes for traversal
+ * @param options - Optional traversal configuration
+ */
+export function traverseNodesDepthFirst<T = void>(
+  nodes: LGraphNode[],
+  options?: TraverseNodesOptions<T>
+): void {
+  const {
+    visitor = () => undefined as T,
+    initialContext = undefined as T,
+    expandSubgraphs = true
+  } = options || {}
+  type StackItem = { node: LGraphNode; context: T }
+  const stack: StackItem[] = []
+
+  // Initialize stack with starting nodes
+  for (const node of nodes) {
+    stack.push({ node, context: initialContext })
+  }
+
+  // Process stack iteratively (DFS)
+  while (stack.length > 0) {
+    const { node, context } = stack.pop()!
+
+    // Visit node and get updated context for children
+    const childContext = visitor(node, context)
+
+    // If it's a subgraph and we should expand, add children to stack
+    if (expandSubgraphs && node.isSubgraphNode?.() && node.subgraph) {
+      // Process children in reverse order to maintain left-to-right DFS processing
+      // when popping from stack (LIFO). Iterate backwards to avoid array reversal.
+      const children = node.subgraph.nodes
+      for (let i = children.length - 1; i >= 0; i--) {
+        stack.push({ node: children[i], context: childContext })
+      }
+    }
+  }
+}
+
+/**
+ * Options for collectFromNodes function
+ */
+export interface CollectFromNodesOptions<T, C> {
+  /** Function that returns data to collect for each node */
+  collector?: (node: LGraphNode, context: C) => T | null
+  /** Function that builds context for child nodes */
+  contextBuilder?: (node: LGraphNode, parentContext: C) => C
+  /** Initial context value */
+  initialContext?: C
+  /** Whether to traverse into subgraph nodes (default: true) */
+  expandSubgraphs?: boolean
+}
+
+/**
+ * Collects nodes with custom data during depth-first traversal.
+ * Generic collector that can gather any type of data per node.
+ *
+ * @param nodes - Starting nodes for traversal
+ * @param options - Optional collection configuration
+ * @returns Array of collected data
+ */
+export function collectFromNodes<T = LGraphNode, C = void>(
+  nodes: LGraphNode[],
+  options?: CollectFromNodesOptions<T, C>
+): T[] {
+  const {
+    collector = (node: LGraphNode) => node as unknown as T,
+    contextBuilder = () => undefined as C,
+    initialContext = undefined as C,
+    expandSubgraphs = true
+  } = options || {}
+  const results: T[] = []
+
+  traverseNodesDepthFirst(nodes, {
+    visitor: (node, context) => {
+      const data = collector(node, context)
+      if (data !== null) {
+        results.push(data)
+      }
+      return contextBuilder(node, context)
+    },
+    initialContext,
+    expandSubgraphs
+  })
+
+  return results
+}
+
+/**
+ * Collects execution IDs for selected nodes and all their descendants.
+ * Uses the generic DFS traversal with optimized string building.
+ *
+ * @param selectedNodes - The selected nodes to process
+ * @returns Array of execution IDs for selected nodes and all nodes within selected subgraphs
+ */
+export function getExecutionIdsForSelectedNodes(
+  selectedNodes: LGraphNode[]
+): NodeExecutionId[] {
+  return collectFromNodes<NodeExecutionId, string>(selectedNodes, {
+    collector: (node, parentExecutionId) => {
+      const nodeId = String(node.id)
+      return parentExecutionId ? `${parentExecutionId}:${nodeId}` : nodeId
+    },
+    contextBuilder: (node, parentExecutionId) => {
+      const nodeId = String(node.id)
+      return parentExecutionId ? `${parentExecutionId}:${nodeId}` : nodeId
+    },
+    initialContext: '',
+    expandSubgraphs: true
+  })
+}
--- a/src/utils/litegraphUtil.ts
+++ b/src/utils/litegraphUtil.ts
@@ -153,7 +153,10 @@ export function migrateWidgetsValues<TWidgetValue>(
 * @param graph - The graph to fix links for.
 */
 export function fixLinkInputSlots(graph: LGraph) {
+  // Note: We can't use forEachNode here because we need access to the graph's
+  // links map at each level. Links are stored in their respective graph/subgraph.
  for (const node of graph.nodes) {
+    // Fix links for the current node
    for (const [inputIndex, input] of node.inputs.entries()) {
      const linkId = input.link
      if (!linkId) continue
@@ -163,6 +166,11 @@ export function fixLinkInputSlots(graph: LGraph) {

      link.target_slot = inputIndex
    }
+
+    // Recursively fix links in subgraphs
+    if (node.isSubgraphNode?.() && node.subgraph) {
+      fixLinkInputSlots(node.subgraph)
+    }
  }
 }

--- a/src/utils/nodeFilterUtil.ts
+++ b/src/utils/nodeFilterUtil.ts
@@ -0,0 +1,21 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+
+/**
+ * Checks if a node is an output node.
+ * Output nodes are nodes that have the output_node flag set in their nodeData.
+ *
+ * @param node - The node to check
+ * @returns True if the node is an output node, false otherwise
+ */
+export const isOutputNode = (node: LGraphNode) =>
+  node.constructor.nodeData?.output_node
+
+/**
+ * Filters nodes to find only output nodes.
+ * Output nodes are nodes that have the output_node flag set in their nodeData.
+ *
+ * @param nodes - Array of nodes to filter
+ * @returns Array of output nodes only
+ */
+export const filterOutputNodes = (nodes: LGraphNode[]): LGraphNode[] =>
+  nodes.filter(isOutputNode)
--- a/src/utils/searchAndReplace.ts
+++ b/src/utils/searchAndReplace.ts
@@ -1,11 +1,14 @@
-import type { LGraphNode } from '@comfyorg/litegraph'
+import type { LGraph, Subgraph } from '@comfyorg/litegraph'

 import { formatDate } from '@/utils/formatUtil'
+import { collectAllNodes } from '@/utils/graphTraversalUtil'

 export function applyTextReplacements(
-  allNodes: LGraphNode[],
+  graph: LGraph | Subgraph,
  value: string
 ): string {
+  const allNodes = collectAllNodes(graph)
+
  return value.replace(/%([^%]+)%/g, function (match, text) {
    const split = text.split('.')
    if (split.length !== 2) {
--- a/src/utils/typeGuardUtil.ts
+++ b/src/utils/typeGuardUtil.ts
@@ -27,3 +27,16 @@ export const isSubgraph = (
 */
 export const isNonNullish = <T>(item: T | undefined | null): item is T =>
  item != null
+
+/**
+ * Type guard to check if a node is a subgraph input/output node.
+ * These nodes are essential to subgraph structure and should not be removed.
+ */
+export const isSubgraphIoNode = (
+  node: LGraphNode
+): node is LGraphNode & {
+  constructor: { comfyClass: 'SubgraphInputNode' | 'SubgraphOutputNode' }
+} => {
+  const nodeClass = node.constructor?.comfyClass
+  return nodeClass === 'SubgraphInputNode' || nodeClass === 'SubgraphOutputNode'
+}