fix: sync state

src/composables/graph/useVueNodeLifecycle.ts

@@ -8,6 +8,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import { patchLGraphNodeMode } from '@/renderer/core/layout/sync/patchLGraphNodeMode'
 import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync'
 import { removeNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil'
 import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale'
@@ -36,7 +37,8 @@ function useVueNodeLifecycleIndividual() {
       size: [node.size[0], removeNodeTitleHeight(node.size[1])] as [
         number,
         number
-      ]
+      ],
+      mode: node.mode
     }))
     layoutStore.initializeFromLiteGraph(nodes)
 
@@ -59,6 +61,9 @@ function useVueNodeLifecycleIndividual() {
       )
     }
 
+    // Patch LGraphNode.changeMode to sync with layoutStore
+    patchLGraphNodeMode()
+
     // Initialize layout sync (one-way: Layout Store → LiteGraph)
     startSync(canvasStore.canvas)
   }

src/extensions/core/groupOptions.ts

@@ -7,14 +7,14 @@ import {
   LGraphGroup,
   type LGraphNode
 } from '@/lib/litegraph/src/litegraph'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ComfyExtension } from '@/types/comfy'
 
 import { app } from '../../scripts/app'
 
 function setNodeMode(node: LGraphNode, mode: number) {
-  node.mode = mode
-  node.graph?.change()
+  layoutStore.setNodeMode(node.id.toString(), mode)
 }
 
 function addNodesToGroup(group: LGraphGroup, items: Iterable<Positionable>) {

src/lib/litegraph/src/LGraphNode.ts

@@ -1325,6 +1325,9 @@ export class LGraphNode
       case LGraphEventMode.ALWAYS:
         break
 
+      case LGraphEventMode.BYPASS:
+        break
+
       // @ts-expect-error Not impl.
       case LiteGraph.ON_REQUEST:
         break

src/renderer/core/layout/sync/patchLGraphNodeMode.ts

@@ -0,0 +1,33 @@
+/**
+ * Patches LGraphNode.changeMode to sync with layoutStore
+ * This ensures that mode changes from LiteGraph (e.g., keyboard shortcuts, context menus)
+ * are properly synchronized to the layout store.
+ */
+import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+
+let isPatched = false
+
+/**
+ * Patches LGraphNode.prototype.changeMode to sync with layoutStore.
+ * Should be called once during application initialization.
+ */
+export function patchLGraphNodeMode(): void {
+  if (isPatched) return
+
+  const originalChangeMode = LGraphNode.prototype.changeMode
+
+  LGraphNode.prototype.changeMode = function (modeTo: number): boolean {
+    const previousMode = this.mode
+    const result = originalChangeMode.call(this, modeTo)
+
+    // Sync to layoutStore if mode actually changed and the call succeeded
+    if (result && previousMode !== this.mode) {
+      layoutStore.setNodeMode(this.id.toString(), this.mode)
+    }
+
+    return result
+  }
+
+  isPatched = true
+}

src/renderer/core/layout/sync/useLayoutSync.ts

@@ -53,6 +53,11 @@ export function useLayoutSync() {
           // Use setSize() to trigger onResize callback
           liteNode.setSize([layout.size.width, layout.size.height])
         }
+
+        // Sync mode to LiteGraph node
+        if (liteNode.mode !== layout.mode) {
+          liteNode.changeMode(layout.mode)
+        }
       }
 
       // Trigger single redraw for all changes