fix: nodes2.0's combo widget does not respect "scale menus" setting

## Summary
- Add `contextMenuConverter.ts` with utilities for converting LiteGraph
context menu items to Vue menu format
- Improve `contextMenuCompat.ts` with set-based diffing for more
reliable legacy extension detection
- Extend `MenuOption`/`SubMenuOption` types with `source`, `disabled`,
`isColorPicker`, and `category` type fields
- Add unit tests for converter functions

## Context
This is foundational work for migrating the node context menu from a
custom Popover-based component to PrimeVue ContextMenu.

The converter provides:
- Menu ordering and section grouping (core items first, then extensions)
- Deduplication with preference for Vue-native items over LiteGraph
items
- Extension categorization with labeled section
- Support for disabled states and color picker submenus

## Test plan
- [x] Unit tests pass for `buildStructuredMenu` (9 tests)
- [x] Unit tests pass for `convertContextMenuToOptions` (7 tests)
- [x] Typecheck passes
- [x] Lint passes
- [x] Knip passes (no unused exports)

## Related
This is PR 1 of 2 for the node context menu migration. PR 2 will wire up
the UI component.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7113-feat-Add-context-menu-converter-infrastructure-2be6d73d3650816ca6c9d2cf50f10159)
by [Unito](https://www.unito.io)

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -34,7 +34,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { electronAPI, isDesktop } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
@@ -84,7 +84,7 @@ const showContextMenu = (event: MouseEvent) => {
   electronAPI()?.showContextMenu({ type: 'text' })
 }
 
-if (isDesktop) {
+if (isElectron()) {
   useEventListener(terminalEl, 'contextmenu', showContextMenu)
 }
 

apps/desktop-ui/src/components/install/InstallFooter.vue

@@ -51,8 +51,6 @@ defineProps<{
   canProceed: boolean
   /** Whether the location step should be disabled */
   disableLocationStep: boolean
-  /** Whether the migration step should be disabled */
-  disableMigrationStep: boolean
   /** Whether the settings step should be disabled */
   disableSettingsStep: boolean
 }>()

apps/desktop-ui/src/platform/distribution/types.ts

@@ -1,16 +0,0 @@
-/**
- * Distribution types and compile-time constants for managing
- * multi-distribution builds (Desktop, Localhost, Cloud)
- */
-
-type Distribution = 'desktop' | 'localhost' | 'cloud'
-
-declare global {
-  const __DISTRIBUTION__: Distribution
-}
-
-/** Current distribution - replaced at compile time */
-const DISTRIBUTION: Distribution = __DISTRIBUTION__
-
-/** Distribution type checks */
-export const isDesktop = DISTRIBUTION === 'desktop'

apps/desktop-ui/src/router.ts

@@ -4,11 +4,11 @@ import {
   createWebHistory
 } from 'vue-router'
 
-import { isDesktop } from '@/utils/envUtil'
+import { isElectron } from '@/utils/envUtil'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
 
 const isFileProtocol = window.location.protocol === 'file:'
-const basePath = isDesktop ? '/' : window.location.pathname
+const basePath = isElectron() ? '/' : window.location.pathname
 
 const router = createRouter({
   history: isFileProtocol ? createWebHashHistory() : createWebHistory(basePath),

apps/desktop-ui/src/utils/envUtil.ts

@@ -1,14 +1,13 @@
 import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
 
-import { isDesktop } from '@/platform/distribution/types'
+export function isElectron() {
+  return 'electronAPI' in window && window.electronAPI !== undefined
+}
 
 export function electronAPI() {
   return (window as any).electronAPI as ElectronAPI
 }
 
 export function isNativeWindow() {
-  return isDesktop && !!window.navigator.windowControlsOverlay?.visible
+  return isElectron() && !!window.navigator.windowControlsOverlay?.visible
 }
-
-// Re-export for backwards compatibility
-export { isDesktop } from '@/platform/distribution/types'

apps/desktop-ui/src/views/templates/BaseViewTemplate.vue

@@ -27,7 +27,7 @@ import { computed, nextTick, onMounted, ref } from 'vue'
 
 import LanguageSelector from '@/components/common/LanguageSelector.vue'
 
-import { electronAPI, isDesktop, isNativeWindow } from '../../utils/envUtil'
+import { electronAPI, isElectron, isNativeWindow } from '../../utils/envUtil'
 
 const { dark = false, hideLanguageSelector = false } = defineProps<{
   dark?: boolean
@@ -49,7 +49,7 @@ const lightTheme = {
 
 const topMenuRef = ref<HTMLDivElement | null>(null)
 onMounted(async () => {
-  if (isDesktop) {
+  if (isElectron()) {
     await nextTick()
 
     electronAPI().changeTheme({

apps/desktop-ui/vite.config.mts

@@ -67,9 +67,6 @@ export default defineConfig(() => {
       minify: SHOULD_MINIFY ? ('esbuild' as const) : false,
       target: 'es2022',
       sourcemap: true
-    },
-    define: {
-      __DISTRIBUTION__: JSON.stringify('desktop')
     }
   }
 })

browser_tests/assets/groups/nested-groups-1-inner-node.json

@@ -0,0 +1,92 @@
+{
+  "id": "2ba0b800-2f13-4f21-b8d6-c6cdb0152cae",
+  "revision": 0,
+  "last_node_id": 17,
+  "last_link_id": 9,
+  "nodes": [
+    {
+      "id": 17,
+      "type": "VAEDecode",
+      "pos": [
+        318.8446183157076,
+        355.3961392345528
+      ],
+      "size": [
+        225,
+        102
+      ],
+      "flags": {},
+      "order": 0,
+      "mode": 0,
+      "inputs": [
+        {
+          "name": "samples",
+          "type": "LATENT",
+          "link": null
+        },
+        {
+          "name": "vae",
+          "type": "VAE",
+          "link": null
+        }
+      ],
+      "outputs": [
+        {
+          "name": "IMAGE",
+          "type": "IMAGE",
+          "links": null
+        }
+      ],
+      "properties": {
+        "Node name for S&R": "VAEDecode"
+      },
+      "widgets_values": []
+    }
+  ],
+  "links": [],
+  "groups": [
+    {
+      "id": 4,
+      "title": "Outer Group",
+      "bounding": [
+        -46.25245366331014,
+        -150.82497138023245,
+        1034.4034361963616,
+        1007.338460439933
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    },
+    {
+      "id": 3,
+      "title": "Inner Group",
+      "bounding": [
+        80.96059074101554,
+        28.123757436778178,
+        718.286373661183,
+        691.2397164539732
+      ],
+      "color": "#3f789e",
+      "font_size": 24,
+      "flags": {}
+    }
+  ],
+  "config": {},
+  "extra": {
+    "ds": {
+      "scale": 0.7121393732101533,
+      "offset": [
+        289.18242848011835,
+        367.0747755524199
+      ]
+    },
+    "frontendVersion": "1.35.5",
+    "VHS_latentpreview": false,
+    "VHS_latentpreviewrate": 0,
+    "VHS_MetadataImage": true,
+    "VHS_KeepIntermediate": true,
+    "workflowRendererVersion": "Vue"
+  },
+  "version": 0.4
+}

browser_tests/fixtures/ComfyPage.ts

@@ -1653,6 +1653,55 @@ export class ComfyPage {
     }, focusMode)
     await this.nextFrame()
   }
+
+  /**
+   * Get the position of a group by title.
+   * @param title The title of the group to find
+   * @returns The group's canvas position
+   * @throws Error if group not found
+   */
+  async getGroupPosition(title: string): Promise<Position> {
+    const pos = await this.page.evaluate((title) => {
+      const groups = window['app'].graph.groups
+      const group = groups.find((g: { title: string }) => g.title === title)
+      if (!group) return null
+      return { x: group.pos[0], y: group.pos[1] }
+    }, title)
+    if (!pos) throw new Error(`Group "${title}" not found`)
+    return pos
+  }
+
+  /**
+   * Drag a group by its title.
+   * @param options.name The title of the group to drag
+   * @param options.deltaX Horizontal drag distance in screen pixels
+   * @param options.deltaY Vertical drag distance in screen pixels
+   */
+  async dragGroup(options: {
+    name: string
+    deltaX: number
+    deltaY: number
+  }): Promise<void> {
+    const { name, deltaX, deltaY } = options
+    const screenPos = await this.page.evaluate((title) => {
+      const app = window['app']
+      const groups = app.graph.groups
+      const group = groups.find((g: { title: string }) => g.title === title)
+      if (!group) return null
+      // Position in the title area of the group
+      const clientPos = app.canvasPosToClientPos([
+        group.pos[0] + 50,
+        group.pos[1] + 15
+      ])
+      return { x: clientPos[0], y: clientPos[1] }
+    }, name)
+    if (!screenPos) throw new Error(`Group "${name}" not found`)
+
+    await this.dragAndDrop(screenPos, {
+      x: screenPos.x + deltaX,
+      y: screenPos.y + deltaY
+    })
+  }
 }
 
 export const testComfySnapToGridGridSize = 50

browser_tests/fixtures/VueNodeHelpers.ts

@@ -160,7 +160,7 @@ export class VueNodeHelpers {
     return {
       input: widget.locator('input'),
       incrementButton: widget.locator('button').first(),
-      decrementButton: widget.locator('button').last()
+      decrementButton: widget.locator('button').nth(1)
     }
   }
 }

browser_tests/tests/vueNodes/groups/groups.spec.ts

@@ -32,4 +32,42 @@ test.describe('Vue Node Groups', () => {
       'vue-groups-fit-to-contents.png'
     )
   })
+
+  test('should move nested groups together when dragging outer group', async ({
+    comfyPage
+  }) => {
+    await comfyPage.loadWorkflow('groups/nested-groups-1-inner-node')
+
+    // Get initial positions with null guards
+    const outerInitial = await comfyPage.getGroupPosition('Outer Group')
+    const innerInitial = await comfyPage.getGroupPosition('Inner Group')
+
+    const initialOffsetX = innerInitial.x - outerInitial.x
+    const initialOffsetY = innerInitial.y - outerInitial.y
+
+    // Drag the outer group
+    const dragDelta = { x: 100, y: 80 }
+    await comfyPage.dragGroup({
+      name: 'Outer Group',
+      deltaX: dragDelta.x,
+      deltaY: dragDelta.y
+    })
+
+    // Use retrying assertion to wait for positions to update
+    await expect(async () => {
+      const outerFinal = await comfyPage.getGroupPosition('Outer Group')
+      const innerFinal = await comfyPage.getGroupPosition('Inner Group')
+
+      const finalOffsetX = innerFinal.x - outerFinal.x
+      const finalOffsetY = innerFinal.y - outerFinal.y
+
+      // Both groups should have moved
+      expect(outerFinal.x).not.toBe(outerInitial.x)
+      expect(innerFinal.x).not.toBe(innerInitial.x)
+
+      // The relative offset should be maintained (inner group moved with outer)
+      expect(finalOffsetX).toBeCloseTo(initialOffsetX, 0)
+      expect(finalOffsetY).toBeCloseTo(initialOffsetY, 0)
+    }).toPass({ timeout: 5000 })
+  })
 })

browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts

@@ -15,7 +15,9 @@ test.describe('Vue Integer Widget', () => {
     await comfyPage.loadWorkflow('vueNodes/linked-int-widget')
     await comfyPage.vueNodes.waitForNodes()
 
-    const seedWidget = comfyPage.vueNodes.getWidgetByName('KSampler', 'seed')
+    const seedWidget = comfyPage.vueNodes
+      .getWidgetByName('KSampler', 'seed')
+      .first()
     const controls = comfyPage.vueNodes.getInputNumberControls(seedWidget)
     const initialValue = Number(await controls.input.inputValue())
 

docs/adr/0005-remove-importmap-for-vue-extensions.md

@@ -0,0 +1,97 @@
+# 5. Remove Import Map for Vue Extensions
+
+Date: 2025-12-13
+
+## Status
+
+Accepted
+
+## Context
+
+ComfyUI frontend previously used a Vite plugin (`generateImportMapPlugin`) to inject an HTML import map exposing shared modules to extensions. This allowed Vue-based extensions to mark dependencies as external in their Vite configs:
+
+```typescript
+// Extension vite.config.ts (old pattern)
+rollupOptions: {
+  external: ['vue', 'vue-i18n', 'pinia', /^primevue\/?.*/, ...]
+}
+```
+
+The import map resolved bare specifiers like `import { ref } from 'vue'` at runtime by mapping them to pre-built ESM files served from `/assets/lib/`.
+
+**Modules exposed via import map:**
+
+- `vue` (vue.esm-browser.prod.js)
+- `vue-i18n` (vue-i18n.esm-browser.prod.js)
+- `primevue/*` (all PrimeVue components)
+- `@primevue/themes/*`
+- `@primevue/forms/*`
+
+**Problems with import map approach:**
+
+1. **Blocked tree shaking**: Vue and PrimeVue loaded as remote modules at runtime, preventing bundler optimizations. The entire Vue runtime was loaded even if only a few APIs were used.
+
+2. **Poor code splitting**: PrimeVue's component library split into hundreds of small chunks, each requiring a separate network request on mount. This significantly impacted initial page load.
+
+3. **Cold start performance**: Each externalized module required a separate HTTP request and browser module resolution step. This compounded on lower-end systems and slower networks.
+
+4. **Version alignment complexity**: Extensions relied on the frontend's Vue version at runtime. Subtle version mismatches between build-time types and runtime code caused debugging difficulties.
+
+5. **Incompatible with Cloud distribution**: The Cloud deployment model requires fully bundled, optimized assets. Import maps added a layer of indirection incompatible with our CDN and caching strategy.
+
+## Decision
+
+Remove the `generateImportMapPlugin` and require Vue-based extensions to bundle their own Vue instance.
+
+**Implementation (PR #6899):**
+
+- Deleted `build/plugins/generateImportMapPlugin.ts`
+- Removed plugin configuration from `vite.config.mts`
+- Removed `fast-glob` dependency used by the plugin
+
+**Extension migration path:**
+
+1. Remove `external: ['vue', ...]` from Vite rollup options
+2. Vue and related dependencies will be bundled into the extension output
+3. No code changes required in extension source files
+
+The import map was already disabled for Cloud builds (PR #6559) before complete removal. Removal aligns all distribution channels on the same bundling strategy.
+
+## Consequences
+
+### Positive
+
+- **Improved page load**: Full tree shaking and optimal code splitting now apply to Vue and PrimeVue
+- **Faster development**: No import map generation step; simplified build pipeline
+- **Better debugging**: Extension's bundled Vue matches build-time expectations exactly
+- **Cloud compatibility**: All assets fully bundled and CDN-optimizable
+- **Consistent behavior**: Same bundling strategy across desktop, localhost, and cloud distributions
+- **Reduced network requests**: Fewer module fetches on initial page load
+
+### Negative
+
+- **Breaking change for existing extensions**: Extensions using `external: ['vue']` pattern fail with "Failed to resolve module specifier 'vue'" error
+- **Larger extension bundles**: Each extension now includes its own Vue instance (~30KB gzipped)
+- **Potential version fragmentation**: Different extensions may bundle different Vue versions (mitigated by Vue's stable API)
+
+### Migration Impact
+
+Extensions affected must update their build configuration. The migration is straightforward:
+
+```diff
+// vite.config.ts
+rollupOptions: {
+-  external: ['vue', 'vue-i18n', 'primevue', ...]
+}
+```
+
+Affected versions:
+
+- **v1.32.x - v1.33.8**: Import map present, external pattern works
+- **v1.33.9+**: Import map removed, bundling required
+
+## Notes
+
+- [ComfyUI_frontend_vue_basic](https://github.com/jtydhr88/ComfyUI_frontend_vue_basic) has been updated to demonstrate the new bundled pattern
+- Issue #7267 documents the user-facing impact and migration discussion
+- Future Extension API v2 (Issue #4668) may provide alternative mechanisms for shared dependencies

docs/adr/README.md

@@ -14,6 +14,7 @@ An Architecture Decision Record captures an important architectural decision mad
 | [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Accepted | 2025-08-25 |
 | [0003](0003-crdt-based-layout-system.md) | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
 | [0004](0004-fork-primevue-ui-library.md) | Fork PrimeVue UI Library | Rejected | 2025-08-27 |
+| [0005](0005-remove-importmap-for-vue-extensions.md) | Remove Import Map for Vue Extensions | Accepted | 2025-12-13 |
 
 ## Creating a New ADR
 

index.html

@@ -5,8 +5,6 @@
     <title>ComfyUI</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
-    <link rel="stylesheet" type="text/css" href="user.css" />
-    <link rel="stylesheet" type="text/css" href="api/userdata/user.css" />
     
     <!-- Fullscreen mode on mobile browsers -->
     <meta name="mobile-web-app-capable" content="yes">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.35.5",
+  "version": "1.36.1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

scripts/cicd/resolve-comfyui-release.ts

@@ -264,7 +264,7 @@ if (!releaseInfo) {
 }
 
 // Output as JSON for GitHub Actions
-// eslint-disable-next-line no-console
+
 console.log(JSON.stringify(releaseInfo, null, 2))
 
 export { resolveRelease }

src/App.vue

@@ -17,14 +17,13 @@ import { computed, onMounted } from 'vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { t } from '@/i18n'
-import { isDesktop } from '@/platform/distribution/types'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
-import { electronAPI } from './utils/envUtil'
+import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const conflictDetection = useConflictDetection()
@@ -51,7 +50,7 @@ const showContextMenu = (event: MouseEvent) => {
 onMounted(() => {
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
 
-  if (isDesktop) {
+  if (isElectron()) {
     document.addEventListener('contextmenu', showContextMenu)
   }
 

src/components/TopMenuSection.vue

@@ -75,15 +75,16 @@ import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import { isDesktop } from '@/platform/distribution/types'
 import { app } from '@/scripts/app'
 import { useQueueStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { isElectron } from '@/utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const { isLoggedIn } = useCurrentUser()
+const isDesktop = isElectron()
 const { t } = useI18n()
 const isQueueOverlayExpanded = ref(false)
 const queueStore = useQueueStore()

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -34,8 +34,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { isDesktop } from '@/platform/distribution/types'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
@@ -85,7 +84,7 @@ const showContextMenu = (event: MouseEvent) => {
   electronAPI()?.showContextMenu({ type: 'text' })
 }
 
-if (isDesktop) {
+if (isElectron()) {
   useEventListener(terminalEl, 'contextmenu', showContextMenu)
 }
 

src/components/dialog/content/MissingModelsWarning.vue

@@ -13,7 +13,7 @@
   </div>
   <ListBox :options="missingModels" class="comfy-missing-models">
     <template #option="{ option }">
-      <Suspense v-if="isDesktop">
+      <Suspense v-if="isElectron()">
         <ElectronFileDownload
           :url="option.url"
           :label="option.label"
@@ -39,8 +39,8 @@ import { useI18n } from 'vue-i18n'
 import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
+import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here
 // as some installations may wish to use custom sources

src/components/dialog/header/SettingDialogHeader.vue

@@ -15,9 +15,7 @@
 <script setup lang="ts">
 import Tag from 'primevue/tag'
 
-// Global variable from vite build defined in global.d.ts
-// eslint-disable-next-line no-undef
-const isStaging = !__USE_PROD_CONFIG__
+import { isStaging } from '@/config/staging'
 </script>
 
 <style scoped>

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -158,13 +158,13 @@ import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useExternalLink } from '@/composables/useExternalLink'
-import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
@@ -237,7 +237,7 @@ const moreItems = computed<MenuItem[]>(() => {
       key: 'desktop-guide',
       type: 'item',
       label: t('helpCenter.desktopUserGuide'),
-      visible: isDesktop,
+      visible: isElectron(),
       action: () => {
         trackResourceClick('docs', true)
         openExternalLink(
@@ -253,7 +253,7 @@ const moreItems = computed<MenuItem[]>(() => {
       key: 'dev-tools',
       type: 'item',
       label: t('helpCenter.openDevTools'),
-      visible: isDesktop,
+      visible: isElectron(),
       action: () => {
         openDevTools()
         emit('close')
@@ -262,13 +262,13 @@ const moreItems = computed<MenuItem[]>(() => {
     {
       key: 'divider-1',
       type: 'divider',
-      visible: isDesktop
+      visible: isElectron()
     },
     {
       key: 'reinstall',
       type: 'item',
       label: t('helpCenter.reinstall'),
-      visible: isDesktop,
+      visible: isElectron(),
       action: () => {
         onReinstall()
         emit('close')
@@ -534,13 +534,13 @@ const onSubmenuLeave = (): void => {
 }
 
 const openDevTools = (): void => {
-  if (isDesktop) {
+  if (isElectron()) {
     electronAPI().openDevTools()
   }
 }
 
 const onReinstall = (): void => {
-  if (isDesktop) {
+  if (isElectron()) {
     void electronAPI().reinstall()
   }
 }

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -59,12 +59,10 @@
     </template>
     <template #body>
       <Divider type="dashed" class="m-2" />
-      <!-- Loading state -->
-      <div v-if="loading">
+      <div v-if="loading && !displayAssets.length">
         <ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
       </div>
-      <!-- Empty state -->
-      <div v-else-if="!displayAssets.length">
+      <div v-else-if="!loading && !displayAssets.length">
         <NoResultsPlaceholder
           icon="pi pi-info-circle"
           :title="
@@ -77,7 +75,6 @@
           :message="$t('sideToolbar.noFilesFoundMessage')"
         />
       </div>
-      <!-- Content -->
       <div v-else class="relative size-full" @click="handleEmptySpaceClick">
         <VirtualGrid
           :items="mediaAssetsWithKey"

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -27,7 +27,7 @@
       </div>
     </template>
     <template #body>
-      <ElectronDownloadItems v-if="isDesktop" />
+      <ElectronDownloadItems v-if="isElectron()" />
 
       <Divider type="dashed" class="m-2" />
       <TreeExplorer
@@ -55,13 +55,13 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
-import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
 import { ResourceState, useModelStore } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
+import { isElectron } from '@/utils/envUtil'
 import { buildTree } from '@/utils/treeUtil'
 
 const modelStore = useModelStore()

src/components/topbar/WorkflowTabs.vue

@@ -79,7 +79,6 @@ import { useI18n } from 'vue-i18n'
 
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
-import { isDesktop } from '@/platform/distribution/types'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import {
@@ -88,6 +87,7 @@ import {
 } from '@/platform/workflow/management/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { isElectron } from '@/utils/envUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 
 import WorkflowOverflowMenu from './WorkflowOverflowMenu.vue'
@@ -114,6 +114,8 @@ const showOverflowArrows = ref(false)
 const leftArrowEnabled = ref(false)
 const rightArrowEnabled = ref(false)
 
+const isDesktop = isElectron()
+
 const workflowToOption = (workflow: ComfyWorkflow): WorkflowOption => ({
   value: workflow.path,
   workflow

src/composables/graph/contextMenuConverter.test.ts

@@ -0,0 +1,190 @@
+import { describe, it, expect } from 'vitest'
+
+import type { MenuOption } from './useMoreOptionsMenu'
+import {
+  buildStructuredMenu,
+  convertContextMenuToOptions
+} from './contextMenuConverter'
+
+describe('contextMenuConverter', () => {
+  describe('buildStructuredMenu', () => {
+    it('should order core items before extension items', () => {
+      const options: MenuOption[] = [
+        { label: 'Custom Extension Item', source: 'litegraph' },
+        { label: 'Copy', source: 'vue' },
+        { label: 'Rename', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      // Core items (Rename, Copy) should come before extension items
+      const renameIndex = result.findIndex((opt) => opt.label === 'Rename')
+      const copyIndex = result.findIndex((opt) => opt.label === 'Copy')
+      const extensionIndex = result.findIndex(
+        (opt) => opt.label === 'Custom Extension Item'
+      )
+
+      expect(renameIndex).toBeLessThan(extensionIndex)
+      expect(copyIndex).toBeLessThan(extensionIndex)
+    })
+
+    it('should add Extensions category label before extension items', () => {
+      const options: MenuOption[] = [
+        { label: 'Copy', source: 'vue' },
+        { label: 'My Custom Extension', source: 'litegraph' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      const extensionsLabel = result.find(
+        (opt) => opt.label === 'Extensions' && opt.type === 'category'
+      )
+      expect(extensionsLabel).toBeDefined()
+      expect(extensionsLabel?.disabled).toBe(true)
+    })
+
+    it('should place Delete at the very end', () => {
+      const options: MenuOption[] = [
+        { label: 'Delete', action: () => {}, source: 'vue' },
+        { label: 'Copy', source: 'vue' },
+        { label: 'Rename', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      const lastNonDivider = [...result]
+        .reverse()
+        .find((opt) => opt.type !== 'divider')
+      expect(lastNonDivider?.label).toBe('Delete')
+    })
+
+    it('should deduplicate items with same label, preferring vue source', () => {
+      const options: MenuOption[] = [
+        { label: 'Copy', action: () => {}, source: 'litegraph' },
+        { label: 'Copy', action: () => {}, source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      const copyItems = result.filter((opt) => opt.label === 'Copy')
+      expect(copyItems).toHaveLength(1)
+      expect(copyItems[0].source).toBe('vue')
+    })
+
+    it('should preserve dividers between sections', () => {
+      const options: MenuOption[] = [
+        { label: 'Rename', source: 'vue' },
+        { label: 'Copy', source: 'vue' },
+        { label: 'Pin', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      const dividers = result.filter((opt) => opt.type === 'divider')
+      expect(dividers.length).toBeGreaterThan(0)
+    })
+
+    it('should handle empty input', () => {
+      const result = buildStructuredMenu([])
+      expect(result).toEqual([])
+    })
+
+    it('should handle only dividers', () => {
+      const options: MenuOption[] = [{ type: 'divider' }, { type: 'divider' }]
+
+      const result = buildStructuredMenu(options)
+
+      // Should be empty since dividers are filtered initially
+      expect(result).toEqual([])
+    })
+
+    it('should recognize Remove as equivalent to Delete', () => {
+      const options: MenuOption[] = [
+        { label: 'Remove', action: () => {}, source: 'vue' },
+        { label: 'Copy', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      // Remove should be placed at the end like Delete
+      const lastNonDivider = [...result]
+        .reverse()
+        .find((opt) => opt.type !== 'divider')
+      expect(lastNonDivider?.label).toBe('Remove')
+    })
+
+    it('should group core items in correct section order', () => {
+      const options: MenuOption[] = [
+        { label: 'Color', source: 'vue' },
+        { label: 'Node Info', source: 'vue' },
+        { label: 'Pin', source: 'vue' },
+        { label: 'Rename', source: 'vue' }
+      ]
+
+      const result = buildStructuredMenu(options)
+
+      // Get indices of items (excluding dividers and categories)
+      const getIndex = (label: string) =>
+        result.findIndex((opt) => opt.label === label)
+
+      // Rename (section 1) should come before Pin (section 2)
+      expect(getIndex('Rename')).toBeLessThan(getIndex('Pin'))
+      // Pin (section 2) should come before Node Info (section 4)
+      expect(getIndex('Pin')).toBeLessThan(getIndex('Node Info'))
+      // Node Info (section 4) should come before or with Color (section 4)
+      expect(getIndex('Node Info')).toBeLessThanOrEqual(getIndex('Color'))
+    })
+  })
+
+  describe('convertContextMenuToOptions', () => {
+    it('should convert empty array to empty result', () => {
+      const result = convertContextMenuToOptions([])
+      expect(result).toEqual([])
+    })
+
+    it('should convert null items to dividers', () => {
+      const result = convertContextMenuToOptions([null], undefined, false)
+      expect(result).toHaveLength(1)
+      expect(result[0].type).toBe('divider')
+    })
+
+    it('should skip blacklisted items like Properties', () => {
+      const items = [{ content: 'Properties', callback: () => {} }]
+      const result = convertContextMenuToOptions(items, undefined, false)
+      expect(result.find((opt) => opt.label === 'Properties')).toBeUndefined()
+    })
+
+    it('should convert basic menu items with content', () => {
+      const items = [{ content: 'Test Item', callback: () => {} }]
+      const result = convertContextMenuToOptions(items, undefined, false)
+      expect(result).toHaveLength(1)
+      expect(result[0].label).toBe('Test Item')
+    })
+
+    it('should mark items as litegraph source', () => {
+      const items = [{ content: 'Test Item', callback: () => {} }]
+      const result = convertContextMenuToOptions(items, undefined, false)
+      expect(result[0].source).toBe('litegraph')
+    })
+
+    it('should pass through disabled state', () => {
+      const items = [{ content: 'Disabled Item', disabled: true }]
+      const result = convertContextMenuToOptions(items, undefined, false)
+      expect(result[0].disabled).toBe(true)
+    })
+
+    it('should apply structuring by default', () => {
+      const items = [
+        { content: 'Copy', callback: () => {} },
+        { content: 'Custom Extension', callback: () => {} }
+      ]
+      const result = convertContextMenuToOptions(items)
+
+      // With structuring, there should be Extensions category
+      const hasExtensionsCategory = result.some(
+        (opt) => opt.label === 'Extensions' && opt.type === 'category'
+      )
+      expect(hasExtensionsCategory).toBe(true)
+    })
+  })
+})

src/composables/graph/contextMenuConverter.ts

@@ -0,0 +1,620 @@
+import { default as DOMPurify } from 'dompurify'
+
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type {
+  IContextMenuValue,
+  LGraphNode,
+  IContextMenuOptions,
+  ContextMenu
+} from '@/lib/litegraph/src/litegraph'
+
+import type { MenuOption, SubMenuOption } from './useMoreOptionsMenu'
+import type { ContextMenuDivElement } from '@/lib/litegraph/src/interfaces'
+
+/**
+ * Hard blacklist - items that should NEVER be included
+ */
+const HARD_BLACKLIST = new Set([
+  'Properties', // Never include Properties submenu
+  'Colors', // Use singular "Color" instead
+  'Shapes', // Use singular "Shape" instead
+  'Title',
+  'Mode',
+  'Properties Panel',
+  'Copy (Clipspace)'
+])
+
+/**
+ * Core menu items - items that should appear in the main menu, not under Extensions
+ * Includes both LiteGraph base menu items and ComfyUI built-in functionality
+ */
+const CORE_MENU_ITEMS = new Set([
+  // Basic operations
+  'Rename',
+  'Copy',
+  'Duplicate',
+  'Clone',
+  // Node state operations
+  'Run Branch',
+  'Pin',
+  'Unpin',
+  'Bypass',
+  'Remove Bypass',
+  'Mute',
+  // Structure operations
+  'Convert to Subgraph',
+  'Frame selection',
+  'Minimize Node',
+  'Expand',
+  'Collapse',
+  // Info and adjustments
+  'Node Info',
+  'Resize',
+  'Title',
+  'Properties Panel',
+  'Adjust Size',
+  // Visual
+  'Color',
+  'Colors',
+  'Shape',
+  'Shapes',
+  'Mode',
+  // Built-in node operations (node-specific)
+  'Open Image',
+  'Copy Image',
+  'Save Image',
+  'Open in Mask Editor',
+  'Edit Subgraph Widgets',
+  'Unpack Subgraph',
+  'Copy (Clipspace)',
+  'Paste (Clipspace)',
+  // Selection and alignment
+  'Align Selected To',
+  'Distribute Nodes',
+  // Deletion
+  'Delete',
+  'Remove',
+  // LiteGraph base items
+  'Show Advanced',
+  'Hide Advanced'
+])
+
+/**
+ * Normalize menu item label for duplicate detection
+ * Handles variations like Colors/Color, Shapes/Shape, Pin/Unpin, Remove/Delete
+ */
+function normalizeLabel(label: string): string {
+  return label
+    .toLowerCase()
+    .replace(/^un/, '') // Remove 'un' prefix (Unpin -> Pin)
+    .trim()
+}
+
+/**
+ * Check if a similar menu item already exists in the results
+ * Returns true if an item with the same normalized label exists
+ */
+function isDuplicateItem(label: string, existingItems: MenuOption[]): boolean {
+  const normalizedLabel = normalizeLabel(label)
+
+  // Map of equivalent items
+  const equivalents: Record<string, string[]> = {
+    color: ['color', 'colors'],
+    shape: ['shape', 'shapes'],
+    pin: ['pin', 'unpin'],
+    delete: ['remove', 'delete'],
+    duplicate: ['clone', 'duplicate']
+  }
+
+  return existingItems.some((item) => {
+    if (!item.label) return false
+
+    const existingNormalized = normalizeLabel(item.label)
+
+    // Check direct match
+    if (existingNormalized === normalizedLabel) return true
+
+    // Check if they're in the same equivalence group
+    for (const values of Object.values(equivalents)) {
+      if (
+        values.includes(normalizedLabel) &&
+        values.includes(existingNormalized)
+      ) {
+        return true
+      }
+    }
+
+    return false
+  })
+}
+
+/**
+ * Check if a menu item is a core menu item (not an extension)
+ * Core items include LiteGraph base items and ComfyUI built-in functionality
+ */
+function isCoreMenuItem(label: string): boolean {
+  return CORE_MENU_ITEMS.has(label)
+}
+
+/**
+ * Filter out duplicate menu items based on label
+ * Gives precedence to Vue hardcoded options over LiteGraph options
+ */
+function removeDuplicateMenuOptions(options: MenuOption[]): MenuOption[] {
+  // Group items by label
+  const itemsByLabel = new Map<string, MenuOption[]>()
+  const itemsWithoutLabel: MenuOption[] = []
+
+  for (const opt of options) {
+    // Always keep dividers and category items
+    if (opt.type === 'divider' || opt.type === 'category') {
+      itemsWithoutLabel.push(opt)
+      continue
+    }
+
+    // Items without labels are kept as-is
+    if (!opt.label) {
+      itemsWithoutLabel.push(opt)
+      continue
+    }
+
+    // Group by label
+    if (!itemsByLabel.has(opt.label)) {
+      itemsByLabel.set(opt.label, [])
+    }
+    itemsByLabel.get(opt.label)!.push(opt)
+  }
+
+  // Select best item for each label (prefer vue over litegraph)
+  const result: MenuOption[] = []
+  const seenLabels = new Set<string>()
+
+  for (const opt of options) {
+    // Add non-labeled items in original order
+    if (opt.type === 'divider' || opt.type === 'category' || !opt.label) {
+      if (itemsWithoutLabel.includes(opt)) {
+        result.push(opt)
+        const idx = itemsWithoutLabel.indexOf(opt)
+        itemsWithoutLabel.splice(idx, 1)
+      }
+      continue
+    }
+
+    // Skip if we already processed this label
+    if (seenLabels.has(opt.label)) {
+      continue
+    }
+    seenLabels.add(opt.label)
+
+    // Get all items with this label
+    const duplicates = itemsByLabel.get(opt.label)!
+
+    // If only one item, add it
+    if (duplicates.length === 1) {
+      result.push(duplicates[0])
+      continue
+    }
+
+    // Multiple items: prefer vue source over litegraph
+    const vueItem = duplicates.find((item) => item.source === 'vue')
+    if (vueItem) {
+      result.push(vueItem)
+    } else {
+      // No vue item, just take the first one
+      result.push(duplicates[0])
+    }
+  }
+
+  return result
+}
+
+/**
+ * Order groups for menu items - defines the display order of sections
+ */
+const MENU_ORDER: string[] = [
+  // Section 1: Basic operations
+  'Rename',
+  'Copy',
+  'Duplicate',
+  // Section 2: Node actions
+  'Run Branch',
+  'Pin',
+  'Unpin',
+  'Bypass',
+  'Remove Bypass',
+  'Mute',
+  // Section 3: Structure operations
+  'Convert to Subgraph',
+  'Frame selection',
+  'Minimize Node',
+  'Expand',
+  'Collapse',
+  'Resize',
+  'Clone',
+  // Section 4: Node properties
+  'Node Info',
+  'Color',
+  // Section 5: Node-specific operations
+  'Open in Mask Editor',
+  'Open Image',
+  'Copy Image',
+  'Save Image',
+  'Copy (Clipspace)',
+  'Paste (Clipspace)',
+  // Fallback for other core items
+  'Convert to Group Node (Deprecated)'
+]
+
+/**
+ * Get the order index for a menu item (lower = earlier in menu)
+ */
+function getMenuItemOrder(label: string): number {
+  const index = MENU_ORDER.indexOf(label)
+  return index === -1 ? 999 : index
+}
+
+/**
+ * Build structured menu with core items first, then extensions under a labeled section
+ * Ensures Delete always appears at the bottom
+ */
+export function buildStructuredMenu(options: MenuOption[]): MenuOption[] {
+  // First, remove duplicates (giving precedence to Vue hardcoded options)
+  const deduplicated = removeDuplicateMenuOptions(options)
+  const coreItemsMap = new Map<string, MenuOption>()
+  const extensionItems: MenuOption[] = []
+  let deleteItem: MenuOption | undefined
+
+  // Separate items into core and extension categories
+  for (const option of deduplicated) {
+    // Skip dividers for now - we'll add them between sections later
+    if (option.type === 'divider') {
+      continue
+    }
+
+    // Skip category labels (they'll be added separately)
+    if (option.type === 'category') {
+      continue
+    }
+
+    // Check if this is the Delete/Remove item - save it for the end
+    const isDeleteItem = option.label === 'Delete' || option.label === 'Remove'
+    if (isDeleteItem && !option.hasSubmenu) {
+      deleteItem = option
+      continue
+    }
+
+    // Categorize based on label
+    if (option.label && isCoreMenuItem(option.label)) {
+      coreItemsMap.set(option.label, option)
+    } else {
+      extensionItems.push(option)
+    }
+  }
+  // Build ordered core items based on MENU_ORDER
+  const orderedCoreItems: MenuOption[] = []
+  const coreLabels = Array.from(coreItemsMap.keys())
+  coreLabels.sort((a, b) => getMenuItemOrder(a) - getMenuItemOrder(b))
+
+  // Section boundaries based on MENU_ORDER indices
+  // Section 1: 0-2 (Rename, Copy, Duplicate)
+  // Section 2: 3-8 (Run Branch, Pin, Unpin, Bypass, Remove Bypass, Mute)
+  // Section 3: 9-15 (Convert to Subgraph, Frame selection, Minimize Node, Expand, Collapse, Resize, Clone)
+  // Section 4: 16-17 (Node Info, Color)
+  // Section 5: 18+ (Image operations and fallback items)
+  const getSectionNumber = (index: number): number => {
+    if (index <= 2) return 1
+    if (index <= 8) return 2
+    if (index <= 15) return 3
+    if (index <= 17) return 4
+    return 5
+  }
+
+  let lastSection = 0
+  for (const label of coreLabels) {
+    const item = coreItemsMap.get(label)!
+    const itemIndex = getMenuItemOrder(label)
+    const currentSection = getSectionNumber(itemIndex)
+
+    // Add divider when moving to a new section
+    if (lastSection > 0 && currentSection !== lastSection) {
+      orderedCoreItems.push({ type: 'divider' })
+    }
+
+    orderedCoreItems.push(item)
+    lastSection = currentSection
+  }
+
+  // Build the final menu structure
+  const result: MenuOption[] = []
+
+  // Add ordered core items with their dividers
+  result.push(...orderedCoreItems)
+
+  // Add extensions section if there are extension items
+  if (extensionItems.length > 0) {
+    // Add divider before Extensions section
+    result.push({ type: 'divider' })
+
+    // Add non-clickable Extensions label
+    result.push({
+      label: 'Extensions',
+      type: 'category',
+      disabled: true
+    })
+
+    // Add extension items
+    result.push(...extensionItems)
+  }
+
+  // Add Delete at the bottom if it exists
+  if (deleteItem) {
+    result.push({ type: 'divider' })
+    result.push(deleteItem)
+  }
+
+  return result
+}
+
+/**
+ * Convert LiteGraph IContextMenuValue items to Vue MenuOption format
+ * Used to bridge LiteGraph context menus into Vue node menus
+ * @param items - The LiteGraph menu items to convert
+ * @param node - The node context (optional)
+ * @param applyStructuring - Whether to apply menu structuring (core/extensions separation). Defaults to true.
+ */
+export function convertContextMenuToOptions(
+  items: (IContextMenuValue | null)[],
+  node?: LGraphNode,
+  applyStructuring: boolean = true
+): MenuOption[] {
+  const result: MenuOption[] = []
+
+  for (const item of items) {
+    // Null items are separators in LiteGraph
+    if (item === null) {
+      result.push({ type: 'divider' })
+      continue
+    }
+
+    // Skip items without content (shouldn't happen, but be safe)
+    if (!item.content) {
+      continue
+    }
+
+    // Skip hard blacklisted items
+    if (HARD_BLACKLIST.has(item.content)) {
+      continue
+    }
+
+    // Skip if a similar item already exists in results
+    if (isDuplicateItem(item.content, result)) {
+      continue
+    }
+
+    const option: MenuOption = {
+      label: item.content,
+      source: 'litegraph'
+    }
+
+    // Pass through disabled state
+    if (item.disabled) {
+      option.disabled = true
+    }
+
+    // Handle submenus
+    if (item.has_submenu) {
+      // Static submenu with pre-defined options
+      if (item.submenu?.options) {
+        option.hasSubmenu = true
+        option.submenu = convertSubmenuToOptions(item.submenu.options)
+      }
+      // Dynamic submenu - callback creates it on-demand
+      else if (item.callback && !item.disabled) {
+        option.hasSubmenu = true
+        // Intercept the callback to capture dynamic submenu items
+        const capturedSubmenu = captureDynamicSubmenu(item, node)
+        if (capturedSubmenu) {
+          option.submenu = capturedSubmenu
+        } else {
+          console.warn(
+            '[ContextMenuConverter] Failed to capture submenu for:',
+            item.content
+          )
+        }
+      }
+    }
+    // Handle callback (only if not disabled and not a submenu)
+    else if (item.callback && !item.disabled) {
+      // Wrap the callback to match the () => void signature
+      option.action = () => {
+        try {
+          void item.callback?.call(
+            item as unknown as ContextMenuDivElement,
+            item.value,
+            {},
+            undefined,
+            undefined,
+            item
+          )
+        } catch (error) {
+          console.error('Error executing context menu callback:', error)
+        }
+      }
+    }
+
+    result.push(option)
+  }
+
+  // Apply structured menu with core items and extensions section (if requested)
+  if (applyStructuring) {
+    return buildStructuredMenu(result)
+  }
+
+  return result
+}
+
+/**
+ * Capture submenu items from a dynamic submenu callback
+ * Intercepts ContextMenu constructor to extract items without creating HTML menu
+ */
+function captureDynamicSubmenu(
+  item: IContextMenuValue,
+  node?: LGraphNode
+): SubMenuOption[] | undefined {
+  let capturedItems: readonly (IContextMenuValue | string | null)[] | undefined
+  let capturedOptions: IContextMenuOptions | undefined
+
+  // Store original ContextMenu constructor
+  const OriginalContextMenu = LiteGraph.ContextMenu
+
+  try {
+    // Mock ContextMenu constructor to capture submenu items and options
+    LiteGraph.ContextMenu = function (
+      items: readonly (IContextMenuValue | string | null)[],
+      options?: IContextMenuOptions
+    ) {
+      // Capture both items and options
+      capturedItems = items
+      capturedOptions = options
+      // Return a minimal mock object to prevent errors
+      return {
+        close: () => {},
+        root: document.createElement('div')
+      } as unknown as ContextMenu
+    } as unknown as typeof ContextMenu
+
+    // Execute the callback to trigger submenu creation
+    try {
+      // Create a mock MouseEvent for the callback
+      const mockEvent = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        clientX: 0,
+        clientY: 0
+      })
+
+      // Create a mock parent menu
+      const mockMenu = {
+        close: () => {},
+        root: document.createElement('div')
+      } as unknown as ContextMenu
+
+      // Call the callback which should trigger ContextMenu constructor
+      // Callback signature varies, but typically: (value, options, event, menu, node)
+      void item.callback?.call(
+        item as unknown as ContextMenuDivElement,
+        item.value,
+        {},
+        mockEvent,
+        mockMenu,
+        node // Pass the node context for callbacks that need it
+      )
+    } catch (error) {
+      console.warn(
+        '[ContextMenuConverter] Error executing callback for:',
+        item.content,
+        error
+      )
+    }
+  } finally {
+    // Always restore original constructor
+    LiteGraph.ContextMenu = OriginalContextMenu
+  }
+
+  // Convert captured items to Vue submenu format
+  if (capturedItems) {
+    const converted = convertSubmenuToOptions(capturedItems, capturedOptions)
+    return converted
+  }
+
+  console.warn('[ContextMenuConverter] No items captured for:', item.content)
+  return undefined
+}
+
+/**
+ * Convert LiteGraph submenu items to Vue SubMenuOption format
+ */
+function convertSubmenuToOptions(
+  items: readonly (IContextMenuValue | string | null)[],
+  options?: IContextMenuOptions
+): SubMenuOption[] {
+  const result: SubMenuOption[] = []
+
+  for (const item of items) {
+    // Skip null separators
+    if (item === null) {
+      continue
+    }
+
+    // Handle string items (simple labels like in Mode/Shapes menus)
+    if (typeof item === 'string') {
+      const subOption: SubMenuOption = {
+        label: item,
+        action: () => {
+          try {
+            // Call the options callback with the string value
+            if (options?.callback) {
+              void options.callback.call(
+                null,
+                item,
+                options,
+                undefined,
+                undefined,
+                options.extra
+              )
+            }
+          } catch (error) {
+            console.error('Error executing string item callback:', error)
+          }
+        }
+      }
+      result.push(subOption)
+      continue
+    }
+
+    // Handle object items
+    if (!item.content) {
+      continue
+    }
+
+    // Extract text content from HTML if present
+    const content = stripHtmlTags(item.content)
+
+    const subOption: SubMenuOption = {
+      label: content,
+      action: () => {
+        try {
+          void item.callback?.call(
+            item as unknown as ContextMenuDivElement,
+            item.value,
+            {},
+            undefined,
+            undefined,
+            item
+          )
+        } catch (error) {
+          console.error('Error executing submenu callback:', error)
+        }
+      }
+    }
+
+    // Pass through disabled state
+    if (item.disabled) {
+      subOption.disabled = true
+    }
+
+    result.push(subOption)
+  }
+  return result
+}
+
+/**
+ * Strip HTML tags from content string safely
+ * LiteGraph menu items often include HTML for styling
+ */
+function stripHtmlTags(html: string): string {
+  // Use DOMPurify to sanitize and strip all HTML tags
+  const sanitized = DOMPurify.sanitize(html, { ALLOWED_TAGS: [] })
+  const result = sanitized.trim()
+  return result || html.replace(/<[^>]*>/g, '').trim() || html
+}

src/composables/graph/useGraphNodeManager.ts

@@ -20,7 +20,8 @@ import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import type { WidgetValue } from '@/types/simplifiedWidget'
+import type { WidgetValue, SafeControlWidget } from '@/types/simplifiedWidget'
+import { normalizeControlOption } from '@/types/simplifiedWidget'
 
 import type {
   LGraph,
@@ -47,6 +48,7 @@ export interface SafeWidgetData {
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
   isDOMWidget?: boolean
+  controlWidget?: SafeControlWidget
   borderStyle?: string
 }
 
@@ -84,6 +86,17 @@ export interface GraphNodeManager {
   cleanup(): void
 }
 
+function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined {
+  const cagWidget = widget.linkedWidgets?.find(
+    (w) => w.name == 'control_after_generate'
+  )
+  if (!cagWidget) return
+  return {
+    value: normalizeControlOption(cagWidget.value),
+    update: (value) => (cagWidget.value = normalizeControlOption(value))
+  }
+}
+
 export function safeWidgetMapper(
   node: LGraphNode,
   slotMetadata: Map<string, WidgetSlotMetadata>
@@ -122,7 +135,8 @@ export function safeWidgetMapper(
         label: widget.label,
         options: widget.options,
         spec,
-        slotMetadata: slotInfo
+        slotMetadata: slotInfo,
+        controlWidget: getControlWidget(widget)
       }
     } catch (error) {
       return {

src/composables/graph/useMoreOptionsMenu.ts

@@ -15,10 +15,13 @@ export interface MenuOption {
   icon?: string
   shortcut?: string
   hasSubmenu?: boolean
-  type?: 'divider'
+  type?: 'divider' | 'category'
   action?: () => void
   submenu?: SubMenuOption[]
   badge?: BadgeVariant
+  disabled?: boolean
+  source?: 'litegraph' | 'vue'
+  isColorPicker?: boolean
 }
 
 export interface SubMenuOption {
@@ -26,6 +29,7 @@ export interface SubMenuOption {
   icon?: string
   action: () => void
   color?: string
+  disabled?: boolean
 }
 
 export enum BadgeVariant {

src/composables/sidebarTabs/useModelLibrarySidebarTab.ts

@@ -3,7 +3,7 @@ import { markRaw } from 'vue'
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
-import { isDesktop } from '@/platform/distribution/types'
+import { isElectron } from '@/utils/envUtil'
 
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   return {
@@ -15,7 +15,7 @@ export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
     component: markRaw(ModelLibrarySidebarTab),
     type: 'vue',
     iconBadge: () => {
-      if (isDesktop) {
+      if (isElectron()) {
         const electronDownloadStore = useElectronDownloadStore()
         if (electronDownloadStore.inProgressDownloads.length > 0) {
           return electronDownloadStore.inProgressDownloads.length.toString()

src/composables/useContextMenuTranslation.ts

@@ -22,7 +22,10 @@ export const useContextMenuTranslation = () => {
     this: LGraphCanvas,
     ...args: Parameters<typeof getCanvasMenuOptions>
   ) {
-    const res: IContextMenuValue[] = getCanvasMenuOptions.apply(this, args)
+    const res: (IContextMenuValue | null)[] = getCanvasMenuOptions.apply(
+      this,
+      args
+    )
 
     // Add items from new extension API
     const newApiItems = app.collectCanvasMenuItems(this)
@@ -58,13 +61,16 @@ export const useContextMenuTranslation = () => {
     LGraphCanvas.prototype
   )
 
+  // Install compatibility layer for getNodeMenuOptions
+  legacyMenuCompat.install(LGraphCanvas.prototype, 'getNodeMenuOptions')
+
   // Wrap getNodeMenuOptions to add new API items
   const nodeMenuFn = LGraphCanvas.prototype.getNodeMenuOptions
   const getNodeMenuOptionsWithExtensions = function (
     this: LGraphCanvas,
     ...args: Parameters<typeof nodeMenuFn>
   ) {
-    const res = nodeMenuFn.apply(this, args)
+    const res = nodeMenuFn.apply(this, args) as (IContextMenuValue | null)[]
 
     // Add items from new extension API
     const node = args[0]
@@ -73,11 +79,28 @@ export const useContextMenuTranslation = () => {
       res.push(item)
     }
 
+    // Add legacy monkey-patched items
+    const legacyItems = legacyMenuCompat.extractLegacyItems(
+      'getNodeMenuOptions',
+      this,
+      ...args
+    )
+    for (const item of legacyItems) {
+      res.push(item)
+    }
+
     return res
   }
 
   LGraphCanvas.prototype.getNodeMenuOptions = getNodeMenuOptionsWithExtensions
 
+  legacyMenuCompat.registerWrapper(
+    'getNodeMenuOptions',
+    getNodeMenuOptionsWithExtensions,
+    nodeMenuFn,
+    LGraphCanvas.prototype
+  )
+
   function translateMenus(
     values: readonly (IContextMenuValue | string | null)[] | undefined,
     options: IContextMenuOptions

src/composables/useExternalLink.ts

@@ -1,7 +1,6 @@
 import { computed } from 'vue'
 
-import { isDesktop } from '@/platform/distribution/types'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 import { i18n } from '@/i18n'
 
 /**
@@ -31,7 +30,7 @@ export function useExternalLink() {
   })
 
   const platform = computed(() => {
-    if (!isDesktop) {
+    if (!isElectron()) {
       return null
     }
 

src/composables/useTransformCompatOverlayProps.ts

@@ -1,6 +1,8 @@
 import type { HintedString } from '@primevue/core'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/platform/settings/settingStore'
+
 /**
  * Options for configuring transform-compatible overlay props
  */
@@ -21,8 +23,11 @@ interface TransformCompatOverlayOptions {
  *
  * Vue nodes use CSS transforms for positioning/scaling. PrimeVue overlay
  * components (Select, MultiSelect, TreeSelect, etc.) teleport to document
- * body by default, breaking transform inheritance. This composable provides
- * the necessary props to keep overlays within their component elements.
+ * body by default, breaking transform inheritance.
+ *
+ * When LiteGraph.ContextMenu.Scaling is enabled, overlays are appended to
+ * 'self' to inherit canvas transforms and scale with the canvas. When disabled,
+ * overlays are appended to 'body' to maintain fixed size regardless of canvas zoom.
  *
  * @param overrides - Optional overrides for specific use cases
  * @returns Computed props object to spread on PrimeVue overlay components
@@ -41,8 +46,15 @@ interface TransformCompatOverlayOptions {
 export function useTransformCompatOverlayProps(
   overrides: TransformCompatOverlayOptions = {}
 ) {
-  return computed(() => ({
-    appendTo: 'self' as const,
-    ...overrides
-  }))
+  const settingStore = useSettingStore()
+
+  return computed(() => {
+    const contextMenuScaling = settingStore.get('LiteGraph.ContextMenu.Scaling')
+    const appendTo = contextMenuScaling ? ('self' as const) : ('body' as const)
+
+    return {
+      appendTo,
+      ...overrides
+    }
+  })
 }

src/config/staging.ts

@@ -0,0 +1,20 @@
+import { computed } from 'vue'
+
+import { isCloud } from '@/platform/distribution/types'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+
+const BUILD_TIME_IS_STAGING = !__USE_PROD_CONFIG__
+
+/**
+ * Returns whether the current environment is staging.
+ * - Cloud builds use runtime configuration (firebase_config.projectId containing '-dev')
+ * - OSS / localhost builds fall back to the build-time config determined by __USE_PROD_CONFIG__
+ */
+export const isStaging = computed(() => {
+  if (!isCloud) {
+    return BUILD_TIME_IS_STAGING
+  }
+
+  const projectId = remoteConfig.value.firebase_config?.projectId
+  return projectId?.includes('-dev') ?? BUILD_TIME_IS_STAGING
+})

src/constants/serverConfig.ts

@@ -389,6 +389,13 @@ export const SERVER_CONFIG_ITEMS: ServerConfig<any>[] = [
     type: 'boolean',
     defaultValue: false
   },
+  {
+    id: 'enable-manager-legacy-ui',
+    name: 'Use legacy Manager UI',
+    tooltip: 'Uses the legacy ComfyUI-Manager UI instead of the new UI.',
+    type: 'boolean',
+    defaultValue: false
+  },
   {
     id: 'disable-all-custom-nodes',
     name: 'Disable loading all custom nodes.',

src/core/graph/widgets/dynamicWidgets.ts

@@ -1,5 +1,6 @@
+import { remove } from 'es-toolkit'
+
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
 import type {
   ISlotType,
   INodeInputSlot,
@@ -23,22 +24,41 @@ import type { ComfyApp } from '@/scripts/app'
 const INLINE_INPUTS = false
 
 type MatchTypeNode = LGraphNode &
-  Pick<Required<LGraphNode>, 'comfyMatchType' | 'onConnectionsChange'>
+  Pick<Required<LGraphNode>, 'onConnectionsChange'> & {
+    comfyDynamic: { matchType: Record<string, Record<string, string>> }
+  }
+type AutogrowNode = LGraphNode &
+  Pick<Required<LGraphNode>, 'onConnectionsChange' | 'widgets'> & {
+    comfyDynamic: {
+      autogrow: Record<
+        string,
+        {
+          min: number
+          max: number
+          inputSpecs: InputSpecV2[]
+          prefix?: string
+          names?: string[]
+        }
+      >
+    }
+  }
 
 function ensureWidgetForInput(node: LGraphNode, input: INodeInputSlot) {
-  if (input.widget?.name) return
   node.widgets ??= []
+  const { widget } = input
+  if (widget && node.widgets.some((w) => w.name === widget.name)) return
   node.widgets.push({
-    name: input.name,
-    y: 0,
-    type: 'shim',
-    options: {},
     draw(ctx, _n, _w, y) {
       ctx.save()
       ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR
       ctx.fillText(input.label ?? input.name, 20, y + 15)
       ctx.restore()
-    }
+    },
+    name: input.name,
+    options: {},
+    serialize: false,
+    type: 'shim',
+    y: 0
   })
   input.alwaysVisible = true
   input.widget = { name: input.name }
@@ -66,72 +86,47 @@ function dynamicComboWidget(
     appArg,
     widgetName
   )
-  let currentDynamicNames: string[] = []
+  function isInGroup(e: { name: string }): boolean {
+    return e.name.startsWith(inputName + '.')
+  }
   const updateWidgets = (value?: string) => {
     if (!node.widgets) throw new Error('Not Reachable')
     const newSpec = value ? options[value] : undefined
-    const inputsToRemove: Record<string, INodeInputSlot> = {}
-    for (const name of currentDynamicNames) {
-      const input = node.inputs.find((input) => input.name === name)
-      if (input) inputsToRemove[input.name] = input
-      const widgetIndex = node.widgets.findIndex(
-        (widget) => widget.name === name
-      )
-      if (widgetIndex === -1) continue
-      node.widgets[widgetIndex].value = undefined
-      node.widgets.splice(widgetIndex, 1)
-    }
-    currentDynamicNames = []
-    if (!newSpec) {
-      for (const input of Object.values(inputsToRemove)) {
-        const inputIndex = node.inputs.findIndex((inp) => inp === input)
-        if (inputIndex === -1) continue
-        node.removeInput(inputIndex)
-      }
-      return
-    }
+
+    const removedInputs = remove(node.inputs, isInGroup)
+    remove(node.widgets, isInGroup)
+
+    if (!newSpec) return
 
     const insertionPoint = node.widgets.findIndex((w) => w === widget) + 1
     const startingLength = node.widgets.length
-    const initialInputIndex =
-      node.inputs.findIndex((i) => i.name === widget.name) + 1
-    let startingInputLength = node.inputs.length
+    const startingInputLength = node.inputs.length
+
     if (insertionPoint === 0)
       throw new Error("Dynamic widget doesn't exist on node")
-    const inputTypes: [Record<string, InputSpec> | undefined, boolean][] = [
-      [newSpec.required, false],
-      [newSpec.optional, true]
+    const inputTypes: (Record<string, InputSpec> | undefined)[] = [
+      newSpec.required,
+      newSpec.optional
     ]
-    for (const [inputType, isOptional] of inputTypes)
+    inputTypes.forEach((inputType, idx) => {
       for (const key in inputType ?? {}) {
         const name = `${widget.name}.${key}`
         const specToAdd = transformInputSpecV1ToV2(inputType![key], {
           name,
-          isOptional
+          isOptional: idx !== 0
         })
         specToAdd.display_name = key
         addNodeInput(node, specToAdd)
-        currentDynamicNames.push(name)
-        if (INLINE_INPUTS) ensureWidgetForInput(node, node.inputs.at(-1)!)
-        if (
-          !inputsToRemove[name] ||
-          Array.isArray(inputType![key][0]) ||
-          !LiteGraph.isValidConnection(
-            inputsToRemove[name].type,
-            inputType![key][0]
-          )
-        )
-          continue
-        node.inputs.at(-1)!.link = inputsToRemove[name].link
-        inputsToRemove[name].link = null
+        const newInputs = node.inputs
+          .slice(startingInputLength)
+          .filter((inp) => inp.name.startsWith(name))
+        for (const newInput of newInputs) {
+          if (INLINE_INPUTS && !newInput.widget)
+            ensureWidgetForInput(node, newInput)
+        }
       }
+    })
 
-    for (const input of Object.values(inputsToRemove)) {
-      const inputIndex = node.inputs.findIndex((inp) => inp === input)
-      if (inputIndex === -1) continue
-      if (inputIndex < initialInputIndex) startingInputLength--
-      node.removeInput(inputIndex)
-    }
     const inputInsertionPoint =
       node.inputs.findIndex((i) => i.name === widget.name) + 1
     const addedWidgets = node.widgets.splice(startingLength)
@@ -157,6 +152,28 @@ function dynamicComboWidget(
     )
     //assume existing inputs are in correct order
     spliceInputs(node, inputInsertionPoint, 0, ...addedInputs)
+
+    for (const input of removedInputs) {
+      const inputIndex = node.inputs.findIndex((inp) => inp.name === input.name)
+      if (inputIndex === -1) {
+        node.inputs.push(input)
+        node.removeInput(node.inputs.length - 1)
+      } else {
+        node.inputs[inputIndex].link = input.link
+        if (!input.link) continue
+        const link = node.graph?.links?.[input.link]
+        if (!link) continue
+        link.target_slot = inputIndex
+        node.onConnectionsChange?.(
+          LiteGraph.INPUT,
+          inputIndex,
+          true,
+          link,
+          node.inputs[inputIndex]
+        )
+      }
+    }
+
     node.size[1] = node.computeSize([...node.size])[1]
     if (!node.graph) return
     node._setConcreteSlots()
@@ -243,8 +260,9 @@ function changeOutputType(
 }
 
 function withComfyMatchType(node: LGraphNode): asserts node is MatchTypeNode {
-  if (node.comfyMatchType) return
-  node.comfyMatchType = {}
+  if (node.comfyDynamic?.matchType) return
+  node.comfyDynamic ??= {}
+  node.comfyDynamic.matchType = {}
 
   const outputGroups = node.constructor.nodeData?.output_matchtypes
   node.onConnectionsChange = useChainCallback(
@@ -258,9 +276,9 @@ function withComfyMatchType(node: LGraphNode): asserts node is MatchTypeNode {
     ) {
       const input = this.inputs[slot]
       if (contype !== LiteGraph.INPUT || !this.graph || !input) return
-      const [matchKey, matchGroup] = Object.entries(this.comfyMatchType).find(
-        ([, group]) => input.name in group
-      ) ?? ['', undefined]
+      const [matchKey, matchGroup] = Object.entries(
+        this.comfyDynamic.matchType
+      ).find(([, group]) => input.name in group) ?? ['', undefined]
       if (!matchGroup) return
       if (iscon && linf) {
         const { output, subgraphInput } = linf.resolve(this.graph)
@@ -317,8 +335,8 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   const typedSpec = { ...inputSpec, type: allowed_types }
   addNodeInput(node, typedSpec)
   withComfyMatchType(node)
-  node.comfyMatchType[template_id] ??= {}
-  node.comfyMatchType[template_id][name] = allowed_types
+  node.comfyDynamic.matchType[template_id] ??= {}
+  node.comfyDynamic.matchType[template_id][name] = allowed_types
 
   //TODO: instead apply on output add?
   //ensure outputs get updated
@@ -329,160 +347,215 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   )
 }
 
-function applyAutogrow(node: LGraphNode, untypedInputSpec: InputSpecV2) {
+function autogrowOrdinalToName(
+  ordinal: number,
+  key: string,
+  groupName: string,
+  node: AutogrowNode
+) {
+  const {
+    names,
+    prefix = '',
+    inputSpecs
+  } = node.comfyDynamic.autogrow[groupName]
+  const baseName = names
+    ? names[ordinal]
+    : (inputSpecs.length == 1 ? prefix : key) + ordinal
+  return { name: `${groupName}.${baseName}`, display_name: baseName }
+}
+
+function addAutogrowGroup(
+  ordinal: number,
+  groupName: string,
+  node: AutogrowNode
+) {
   const { addNodeInput } = useLitegraphService()
+  const { max, min, inputSpecs } = node.comfyDynamic.autogrow[groupName]
+  if (ordinal >= max) return
 
-  const parseResult = zAutogrowOptions.safeParse(untypedInputSpec)
-  if (!parseResult.success) throw new Error('invalid Autogrow spec')
-  const inputSpec = parseResult.data
+  const namedSpecs = inputSpecs.map((input) => ({
+    ...input,
+    isOptional: ordinal >= (min ?? 0) || input.isOptional,
+    ...autogrowOrdinalToName(ordinal, input.name, groupName, node)
+  }))
 
-  const { input, min, names, prefix, max } = inputSpec.template
-  const inputTypes: [Record<string, InputSpec> | undefined, boolean][] = [
-    [input.required, false],
-    [input.optional, true]
-  ]
-  const inputsV2 = inputTypes.flatMap(([inputType, isOptional]) =>
-    Object.entries(inputType ?? {}).map(([name, v]) =>
-      transformInputSpecV1ToV2(v, { name, isOptional })
+  const newInputs = namedSpecs
+    .filter(
+      (namedSpec) => !node.inputs.some((inp) => inp.name === namedSpec.name)
     )
+    .map((namedSpec) => {
+      addNodeInput(node, namedSpec)
+      const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
+      if (inputSpecs.length !== 1 || (INLINE_INPUTS && !input.widget))
+        ensureWidgetForInput(node, input)
+      return input
+    })
+
+  const lastIndex = node.inputs.findLastIndex((inp) =>
+    inp.name.startsWith(groupName)
   )
+  const insertionIndex = lastIndex === -1 ? node.inputs.length : lastIndex + 1
+  spliceInputs(node, insertionIndex, 0, ...newInputs)
+  app.canvas?.setDirty(true, true)
+}
 
-  function nameToInputIndex(name: string) {
-    const index = node.inputs.findIndex((input) => input.name === name)
-    if (index === -1) throw new Error('Failed to find input')
-    return index
-  }
-  function nameToInput(name: string) {
-    return node.inputs[nameToInputIndex(name)]
+const ORDINAL_REGEX = /\d+$/
+function resolveAutogrowOrdinal(
+  inputName: string,
+  groupName: string,
+  node: AutogrowNode
+): number | undefined {
+  //TODO preslice groupname?
+  const name = inputName.slice(groupName.length + 1)
+  const { names } = node.comfyDynamic.autogrow[groupName]
+  if (names) {
+    const ordinal = names.findIndex((s) => s === name)
+    return ordinal === -1 ? undefined : ordinal
   }
+  const match = name.match(ORDINAL_REGEX)
+  if (!match) return undefined
+  const ordinal = parseInt(match[0])
+  return ordinal !== ordinal ? undefined : ordinal
+}
+function autogrowInputConnected(index: number, node: AutogrowNode) {
+  const input = node.inputs[index]
+  const groupName = input.name.slice(0, input.name.lastIndexOf('.'))
+  const lastInput = node.inputs.findLast((inp) =>
+    inp.name.startsWith(groupName)
+  )
+  const ordinal = resolveAutogrowOrdinal(input.name, groupName, node)
+  if (
+    !lastInput ||
+    ordinal == undefined ||
+    ordinal !== resolveAutogrowOrdinal(lastInput.name, groupName, node)
+  )
+    return
+  addAutogrowGroup(ordinal + 1, groupName, node)
+}
+function autogrowInputDisconnected(index: number, node: AutogrowNode) {
+  const input = node.inputs[index]
+  if (!input) return
+  const groupName = input.name.slice(0, input.name.lastIndexOf('.'))
+  const { min = 1, inputSpecs } = node.comfyDynamic.autogrow[groupName]
+  const ordinal = resolveAutogrowOrdinal(input.name, groupName, node)
+  if (ordinal == undefined || ordinal + 1 < min) return
 
-  //In the distance, someone shouting YAGNI
-  const trackedInputs: string[][] = []
-  function addInputGroup(insertionIndex: number) {
-    const ordinal = trackedInputs.length
-    const inputGroup = inputsV2.map((input) => ({
-      ...input,
-      name: names
-        ? names[ordinal]
-        : ((inputsV2.length == 1 ? prefix : input.name) ?? '') + ordinal,
-      isOptional: ordinal >= (min ?? 0) || input.isOptional
-    }))
-    const newInputs = inputGroup
-      .filter(
-        (namedSpec) => !node.inputs.some((inp) => inp.name === namedSpec.name)
-      )
-      .map((namedSpec) => {
-        addNodeInput(node, namedSpec)
-        const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
-        if (inputsV2.length !== 1) ensureWidgetForInput(node, input)
-        return input
-      })
-    spliceInputs(node, insertionIndex, 0, ...newInputs)
-    trackedInputs.push(inputGroup.map((inp) => inp.name))
-    app.canvas?.setDirty(true, true)
+  //resolve all inputs in group
+  const groupInputs = node.inputs.filter(
+    (inp) =>
+      inp.name.startsWith(groupName + '.') &&
+      inp.name.lastIndexOf('.') === groupName.length
+  )
+  const stride = inputSpecs.length
+  if (groupInputs.length % stride !== 0) {
+    console.error('Failed to group multi-input autogrow inputs')
+    return
   }
-  for (let i = 0; i < (min || 1); i++) addInputGroup(node.inputs.length)
-  function removeInputGroup(inputName: string) {
-    const groupIndex = trackedInputs.findIndex((ig) =>
-      ig.some((inpName) => inpName === inputName)
-    )
-    if (groupIndex == -1) throw new Error('Failed to find group')
-    const group = trackedInputs[groupIndex]
-    for (const nameToRemove of group) {
-      const inputIndex = nameToInputIndex(nameToRemove)
-      const input = spliceInputs(node, inputIndex, 1)[0]
-      if (!input.widget?.name) continue
-      const widget = node.widgets?.find((w) => w.name === input.widget!.name)
-      if (!widget) return
-      widget.value = undefined
-      node.removeWidget(widget)
-    }
-    trackedInputs.splice(groupIndex, 1)
-    node.size[1] = node.computeSize([...node.size])[1]
-    app.canvas?.setDirty(true, true)
-  }
-
-  function inputConnected(index: number) {
-    const input = node.inputs[index]
-    const groupIndex = trackedInputs.findIndex((ig) =>
-      ig.some((inputName) => inputName === input.name)
-    )
-    if (groupIndex == -1) throw new Error('Failed to find group')
-    if (
-      groupIndex + 1 === trackedInputs.length &&
-      trackedInputs.length < (max ?? names?.length ?? 100)
+  app.canvas?.setDirty(true, true)
+  //groupBy would be nice here, but may not be supported
+  for (let column = 0; column < stride; column++) {
+    for (
+      let bubbleOrdinal = ordinal * stride + column;
+      bubbleOrdinal + stride < groupInputs.length;
+      bubbleOrdinal += stride
     ) {
-      const lastInput = trackedInputs[groupIndex].at(-1)
-      if (!lastInput) return
-      const insertionIndex = nameToInputIndex(lastInput) + 1
-      if (insertionIndex === 0) throw new Error('Failed to find Input')
-      addInputGroup(insertionIndex)
+      const curInput = groupInputs[bubbleOrdinal]
+      curInput.link = groupInputs[bubbleOrdinal + stride].link
+      if (!curInput.link) continue
+      const link = node.graph?.links[curInput.link]
+      if (!link) continue
+      const curIndex = node.inputs.findIndex((inp) => inp === curInput)
+      if (curIndex === -1) throw new Error('missing input')
+      link.target_slot = curIndex
     }
+    const lastInput = groupInputs.at(column - stride)
+    if (!lastInput) continue
+    lastInput.link = null
   }
-  function inputDisconnected(index: number) {
-    const input = node.inputs[index]
-    if (trackedInputs.length === 1) return
-    const groupIndex = trackedInputs.findIndex((ig) =>
-      ig.some((inputName) => inputName === input.name)
-    )
-    if (groupIndex == -1) throw new Error('Failed to find group')
-    if (
-      trackedInputs[groupIndex].some(
-        (inputName) => nameToInput(inputName).link != null
-      )
-    )
-      return
-    if (groupIndex + 1 < (min ?? 0)) return
-    //For each group from here to last group, bubble swap links
-    for (let column = 0; column < trackedInputs[0].length; column++) {
-      let prevInput = nameToInputIndex(trackedInputs[groupIndex][column])
-      for (let i = groupIndex + 1; i < trackedInputs.length; i++) {
-        const curInput = nameToInputIndex(trackedInputs[i][column])
-        const linkId = node.inputs[curInput].link
-        node.inputs[prevInput].link = linkId
-        const link = linkId && node.graph?.links?.[linkId]
-        if (link) link.target_slot = prevInput
-        prevInput = curInput
-      }
-      node.inputs[prevInput].link = null
-    }
-    if (
-      trackedInputs.at(-2) &&
-      !trackedInputs.at(-2)?.some((name) => !!nameToInput(name).link)
-    )
-      removeInputGroup(trackedInputs.at(-1)![0])
+  const removalChecks = groupInputs.slice((min - 1) * stride)
+  let i
+  for (i = removalChecks.length - stride; i >= 0; i -= stride) {
+    if (removalChecks.slice(i, i + stride).some((inp) => inp.link)) break
   }
+  const toRemove = removalChecks.slice(i + stride * 2)
+  remove(node.inputs, (inp) => toRemove.includes(inp))
+  for (const input of toRemove) {
+    const widgetName = input?.widget?.name
+    if (!widgetName) continue
+    remove(node.widgets, (w) => w.name === widgetName)
+  }
+  node.size[1] = node.computeSize([...node.size])[1]
+}
+
+function withComfyAutogrow(node: LGraphNode): asserts node is AutogrowNode {
+  if (node.comfyDynamic?.autogrow) return
+  node.comfyDynamic ??= {}
+  node.comfyDynamic.autogrow = {}
 
   let pendingConnection: number | undefined
   let swappingConnection = false
+
   const originalOnConnectInput = node.onConnectInput
   node.onConnectInput = function (slot: number, ...args) {
     pendingConnection = slot
     requestAnimationFrame(() => (pendingConnection = undefined))
     return originalOnConnectInput?.apply(this, [slot, ...args]) ?? true
   }
+
   node.onConnectionsChange = useChainCallback(
     node.onConnectionsChange,
-    (
-      type: ISlotType,
-      index: number,
+    function (
+      this: AutogrowNode,
+      contype: ISlotType,
+      slot: number,
       iscon: boolean,
       linf: LLink | null | undefined
-    ) => {
-      if (type !== NodeSlotType.INPUT) return
-      const inputName = node.inputs[index].name
-      if (!trackedInputs.flat().some((name) => name === inputName)) return
-      if (iscon) {
+    ) {
+      const input = this.inputs[slot]
+      if (contype !== LiteGraph.INPUT || !input) return
+      //Return if input isn't known autogrow
+      const key = input.name.slice(0, input.name.lastIndexOf('.'))
+      const autogrowGroup = this.comfyDynamic.autogrow[key]
+      if (!autogrowGroup) return
+      if (app.configuringGraph && input.widget)
+        ensureWidgetForInput(node, input)
+      if (iscon && linf) {
         if (swappingConnection || !linf) return
-        inputConnected(index)
+        autogrowInputConnected(slot, this)
       } else {
-        if (pendingConnection === index) {
+        if (pendingConnection === slot) {
           swappingConnection = true
           requestAnimationFrame(() => (swappingConnection = false))
           return
         }
-        requestAnimationFrame(() => inputDisconnected(index))
+        requestAnimationFrame(() => autogrowInputDisconnected(slot, this))
       }
     }
   )
 }
+function applyAutogrow(node: LGraphNode, inputSpecV2: InputSpecV2) {
+  withComfyAutogrow(node)
+
+  const parseResult = zAutogrowOptions.safeParse(inputSpecV2)
+  if (!parseResult.success) throw new Error('invalid Autogrow spec')
+  const inputSpec = parseResult.data
+  const { input, min = 1, names, prefix, max = 100 } = inputSpec.template
+
+  const inputTypes: (Record<string, InputSpec> | undefined)[] = [
+    input.required,
+    input.optional
+  ]
+  const inputsV2 = inputTypes.flatMap((inputType, index) =>
+    Object.entries(inputType ?? {}).map(([name, v]) =>
+      transformInputSpecV1ToV2(v, { name, isOptional: index === 1 })
+    )
+  )
+  node.comfyDynamic.autogrow[inputSpecV2.name] = {
+    names,
+    min,
+    max: names?.length ?? max,
+    prefix,
+    inputSpecs: inputsV2
+  }
+  for (let i = 0; i < min; i++) addAutogrowGroup(i, inputSpecV2.name, node)
+}

src/extensions/core/electronAdapter.ts

@@ -8,10 +8,9 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { checkMirrorReachable } from '@/utils/electronMirrorCheck'
-import { isDesktop } from '@/platform/distribution/types'
-import { electronAPI as getElectronAPI } from '@/utils/envUtil'
+import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
 ;(async () => {
-  if (!isDesktop) return
+  if (!isElectron()) return
 
   const electronAPI = getElectronAPI()
   const desktopAppVersion = await electronAPI.getElectronVersion()

src/lib/litegraph/src/LGraphCanvas.ts

@@ -710,8 +710,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
   getMenuOptions?(): IContextMenuValue<string>[]
   getExtraMenuOptions?(
     canvas: LGraphCanvas,
-    options: IContextMenuValue<string>[]
-  ): IContextMenuValue<string>[]
+    options: (IContextMenuValue<string> | null)[]
+  ): (IContextMenuValue<string> | null)[]
   static active_node: LGraphNode
   /** called before modifying the graph */
   onBeforeChange?(graph: LGraph): void
@@ -8019,8 +8019,8 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
     }
   }
 
-  getCanvasMenuOptions(): IContextMenuValue[] {
-    let options: IContextMenuValue<string>[]
+  getCanvasMenuOptions(): (IContextMenuValue | null)[] {
+    let options: (IContextMenuValue<string> | null)[]
     if (this.getMenuOptions) {
       options = this.getMenuOptions()
     } else {
@@ -8564,9 +8564,11 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
           node,
           newPos: this.calculateNewPosition(node, deltaX, deltaY)
         })
-      } else {
-        // Non-node children (nested groups, reroutes)
-        child.move(deltaX, deltaY)
+      } else if (!(child instanceof LGraphGroup)) {
+        // Non-node, non-group children (reroutes, etc.)
+        // Skip groups here - they're already in allItems and will be
+        // processed in the main loop of moveChildNodesInGroupVueMode
+        child.move(deltaX, deltaY, true)
       }
     }
   }

src/lib/litegraph/src/LGraphNode.ts

@@ -416,7 +416,7 @@ export class LGraphNode
   selected?: boolean
   showAdvanced?: boolean
 
-  declare comfyMatchType?: Record<string, Record<string, string>>
+  declare comfyDynamic?: Record<string, object>
   declare comfyClass?: string
   declare isVirtualNode?: boolean
   applyToGraph?(extraLinks?: LLink[]): void

src/lib/litegraph/src/contextMenuCompat.ts

@@ -7,7 +7,9 @@ import type { IContextMenuValue } from './interfaces'
  */
 const ENABLE_LEGACY_SUPPORT = true
 
-type ContextMenuValueProvider = (...args: unknown[]) => IContextMenuValue[]
+type ContextMenuValueProvider = (
+  ...args: unknown[]
+) => (IContextMenuValue | null)[]
 
 class LegacyMenuCompat {
   private originalMethods = new Map<string, ContextMenuValueProvider>()
@@ -37,16 +39,22 @@ class LegacyMenuCompat {
    * @param preWrapperFn The method that existed before the wrapper
    * @param prototype The prototype to verify wrapper installation
    */
-  registerWrapper(
-    methodName: keyof LGraphCanvas,
-    wrapperFn: ContextMenuValueProvider,
-    preWrapperFn: ContextMenuValueProvider,
+  registerWrapper<K extends keyof LGraphCanvas>(
+    methodName: K,
+    wrapperFn: LGraphCanvas[K],
+    preWrapperFn: LGraphCanvas[K],
     prototype?: LGraphCanvas
   ) {
-    this.wrapperMethods.set(methodName, wrapperFn)
-    this.preWrapperMethods.set(methodName, preWrapperFn)
+    this.wrapperMethods.set(
+      methodName as string,
+      wrapperFn as unknown as ContextMenuValueProvider
+    )
+    this.preWrapperMethods.set(
+      methodName as string,
+      preWrapperFn as unknown as ContextMenuValueProvider
+    )
     const isInstalled = prototype && prototype[methodName] === wrapperFn
-    this.wrapperInstalled.set(methodName, !!isInstalled)
+    this.wrapperInstalled.set(methodName as string, !!isInstalled)
   }
 
   /**
@@ -54,11 +62,17 @@ class LegacyMenuCompat {
    * @param prototype The prototype to install on
    * @param methodName The method name to track
    */
-  install(prototype: LGraphCanvas, methodName: keyof LGraphCanvas) {
+  install<K extends keyof LGraphCanvas>(
+    prototype: LGraphCanvas,
+    methodName: K
+  ) {
     if (!ENABLE_LEGACY_SUPPORT) return
 
     const originalMethod = prototype[methodName]
-    this.originalMethods.set(methodName, originalMethod)
+    this.originalMethods.set(
+      methodName as string,
+      originalMethod as unknown as ContextMenuValueProvider
+    )
 
     let currentImpl = originalMethod
 
@@ -66,13 +80,13 @@ class LegacyMenuCompat {
       get() {
         return currentImpl
       },
-      set: (newImpl: ContextMenuValueProvider) => {
-        const fnKey = `${methodName}:${newImpl.toString().slice(0, 100)}`
+      set: (newImpl: LGraphCanvas[K]) => {
+        const fnKey = `${methodName as string}:${newImpl.toString().slice(0, 100)}`
         if (!this.hasWarned.has(fnKey) && this.currentExtension) {
           this.hasWarned.add(fnKey)
 
           console.warn(
-            `%c[DEPRECATED]%c Monkey-patching ${methodName} is deprecated. (Extension: "${this.currentExtension}")\n` +
+            `%c[DEPRECATED]%c Monkey-patching ${methodName as string} is deprecated. (Extension: "${this.currentExtension}")\n` +
               `Please use the new context menu API instead.\n\n` +
               `See: https://docs.comfy.org/custom-nodes/js/context-menu-migration`,
             'color: orange; font-weight: bold',
@@ -85,7 +99,15 @@ class LegacyMenuCompat {
   }
 
   /**
-   * Extract items that were added by legacy monkey patches
+   * Extract items that were added by legacy monkey patches.
+   *
+   * Uses set-based diffing by reference to reliably detect additions regardless
+   * of item reordering or replacement. Items present in patchedItems but not in
+   * originalItems (by reference equality) are considered additions.
+   *
+   * Note: If a monkey patch removes items (patchedItems has fewer unique items
+   * than originalItems), a warning is logged but we still return any new items.
+   *
    * @param methodName The method name that was monkey-patched
    * @param context The context to call methods with
    * @param args Arguments to pass to the methods
@@ -95,7 +117,7 @@ class LegacyMenuCompat {
     methodName: keyof LGraphCanvas,
     context: LGraphCanvas,
     ...args: unknown[]
-  ): IContextMenuValue[] {
+  ): (IContextMenuValue | null)[] {
     if (!ENABLE_LEGACY_SUPPORT) return []
     if (this.isExtracting) return []
 
@@ -106,7 +128,7 @@ class LegacyMenuCompat {
       this.isExtracting = true
 
       const originalItems = originalMethod.apply(context, args) as
-        | IContextMenuValue[]
+        | (IContextMenuValue | null)[]
         | undefined
       if (!originalItems) return []
 
@@ -127,15 +149,26 @@ class LegacyMenuCompat {
       const methodToCall = shouldSkipWrapper ? preWrapperMethod : currentMethod
 
       const patchedItems = methodToCall.apply(context, args) as
-        | IContextMenuValue[]
+        | (IContextMenuValue | null)[]
         | undefined
       if (!patchedItems) return []
 
-      if (patchedItems.length > originalItems.length) {
-        return patchedItems.slice(originalItems.length) as IContextMenuValue[]
+      // Use set-based diff to detect additions by reference
+      const originalSet = new Set<IContextMenuValue | null>(originalItems)
+      const addedItems = patchedItems.filter((item) => !originalSet.has(item))
+
+      // Warn if items were removed (patched has fewer original items than expected)
+      const retainedOriginalCount = patchedItems.filter((item) =>
+        originalSet.has(item)
+      ).length
+      if (retainedOriginalCount < originalItems.length) {
+        console.warn(
+          `[Context Menu Compat] Monkey patch for ${methodName} removed ${originalItems.length - retainedOriginalCount} original menu item(s). ` +
+            `This may cause unexpected behavior.`
+        )
       }
 
-      return []
+      return addedItems
     } catch (e) {
       console.error('[Context Menu Compat] Failed to extract legacy items:', e)
       return []

src/locales/en/main.json

@@ -1333,6 +1333,10 @@
     "disable-metadata": {
       "name": "Disable saving prompt metadata in files."
     },
+    "enable-manager-legacy-ui": {
+      "name": "Use legacy Manager UI",
+      "tooltip": "Uses the legacy ComfyUI-Manager UI instead of the new UI."
+    },
     "disable-all-custom-nodes": {
       "name": "Disable loading all custom nodes."
     },
@@ -2052,6 +2056,24 @@
       "placeholderVideo": "Select video...",
       "placeholderModel": "Select model...",
       "placeholderUnknown": "Select media..."
+    },
+    "numberControl": {
+      "header": {
+        "prefix": "Automatically update the value",
+        "after": "AFTER",
+        "before": "BEFORE",
+        "postfix": "running the workflow:"
+      },
+      "linkToGlobal": "Link to",
+      "linkToGlobalSeed": "Global Value",
+      "linkToGlobalDesc": "Unique value linked to the Global Value's control setting",
+      "randomize": "Randomize Value",
+      "randomizeDesc": "Shuffles the value randomly after each generation",
+      "increment": "Increment Value",
+      "incrementDesc": "Adds 1 to the value number",
+      "decrement": "Decrement Value",
+      "decrementDesc": "Subtracts 1 from the value number",
+      "editSettings": "Edit control settings"
     }
   },
   "widgetFileUpload": {
@@ -2426,4 +2448,4 @@
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
   }
-}
+}

src/locales/en/nodeDefs.json

@@ -11325,6 +11325,31 @@
       }
     }
   },
+  "SamplerSEEDS2": {
+    "display_name": "SamplerSEEDS2",
+    "inputs": {
+      "solver_type": {
+        "name": "solver_type"
+      },
+      "eta": {
+        "name": "eta",
+        "tooltip": "Stochastic strength"
+      },
+      "s_noise": {
+        "name": "s_noise",
+        "tooltip": "SDE noise multiplier"
+      },
+      "r": {
+        "name": "r",
+        "tooltip": "Relative step size for the intermediate stage (c2 node)"
+      }
+    },
+    "outputs": {
+      "0": {
+        "tooltip": null
+      }
+    }
+  },
   "SamplingPercentToSigma": {
     "display_name": "SamplingPercentToSigma",
     "inputs": {

src/platform/assets/components/MediaAssetCard.vue

@@ -55,7 +55,6 @@
               variant="gray"
               :label="formattedDuration"
             />
-            <SquareChip v-if="fileFormat" variant="gray" :label="fileFormat" />
           </div>
 
           <!-- Media actions - show on hover or when playing -->
@@ -266,12 +265,6 @@ const formattedDuration = computed(() => {
   return formatDuration(Number(duration))
 })
 
-const fileFormat = computed(() => {
-  if (!asset?.name) return ''
-  const parts = asset.name.split('.')
-  return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : ''
-})
-
 const durationChipClasses = computed(() => {
   if (fileKind.value === 'audio') {
     return '-translate-y-11'
@@ -289,7 +282,7 @@ const showStaticChips = computed(
     !!asset &&
     !isHovered.value &&
     !isVideoPlaying.value &&
-    (formattedDuration.value || fileFormat.value)
+    formattedDuration.value
 )
 
 // Show action overlay when hovered OR playing

src/platform/distribution/types.ts

@@ -1,3 +1,5 @@
+import { isElectron } from '@/utils/envUtil'
+
 /**
  * Distribution types and compile-time constants for managing
  * multi-distribution builds (Desktop, Localhost, Cloud)
@@ -13,6 +15,6 @@ declare global {
 const DISTRIBUTION: Distribution = __DISTRIBUTION__
 
 /** Distribution type checks */
-export const isDesktop = DISTRIBUTION === 'desktop'
+export const isDesktop = DISTRIBUTION === 'desktop' || isElectron() // TODO: replace with build var
 export const isCloud = DISTRIBUTION === 'cloud'
 // export const isLocalhost = DISTRIBUTION === 'localhost' || (!isDesktop && !isCloud)

src/platform/settings/composables/useSettingUI.ts

@@ -4,10 +4,11 @@ import { useI18n } from 'vue-i18n'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { isCloud } from '@/platform/distribution/types'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
+import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
@@ -160,7 +161,7 @@ export function useSettingUI(
       userPanel,
       keybindingPanel,
       extensionPanel,
-      ...(isDesktop ? [serverConfigPanel] : []),
+      ...(isElectron() ? [serverConfigPanel] : []),
       ...(shouldShowPlanCreditsPanel.value && subscriptionPanel
         ? [subscriptionPanel]
         : [])
@@ -220,7 +221,7 @@ export function useSettingUI(
         keybindingPanel.node,
         extensionPanel.node,
         aboutPanel.node,
-        ...(isDesktop ? [serverConfigPanel.node] : [])
+        ...(isElectron() ? [serverConfigPanel.node] : [])
       ].map(translateCategory)
     }
   ])

src/platform/updates/common/releaseStore.ts

@@ -3,9 +3,10 @@ import { defineStore } from 'pinia'
 import { compare, valid } from 'semver'
 import { computed, ref } from 'vue'
 
-import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import { isElectron } from '@/utils/envUtil'
 import { stringToLocale } from '@/utils/formatUtil'
 
 import { useReleaseService } from './releaseService'
@@ -94,7 +95,7 @@ export const useReleaseStore = defineStore('release', () => {
   // Show toast if needed
   const shouldShowToast = computed(() => {
     // Only show on desktop version
-    if (!isDesktop || isCloud) {
+    if (!isElectron() || isCloud) {
       return false
     }
 
@@ -126,7 +127,7 @@ export const useReleaseStore = defineStore('release', () => {
   // Show red-dot indicator
   const shouldShowRedDot = computed(() => {
     // Only show on desktop version
-    if (!isDesktop || isCloud) {
+    if (!isElectron() || isCloud) {
       return false
     }
 
@@ -171,7 +172,7 @@ export const useReleaseStore = defineStore('release', () => {
   })
 
   const shouldShowPopup = computed(() => {
-    if (!isDesktop && !isCloud) {
+    if (!isElectron() && !isCloud) {
       return false
     }
 

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

@@ -172,7 +172,8 @@ const processedWidgets = computed((): ProcessedWidget[] => {
       options: widgetOptions,
       callback: widget.callback,
       spec: widget.spec,
-      borderStyle: widget.borderStyle
+      borderStyle: widget.borderStyle,
+      controlWidget: widget.controlWidget
     }
 
     function updateHandler(value: WidgetValue) {

src/renderer/extensions/vueNodes/layout/useNodeDrag.ts

@@ -57,7 +57,10 @@ function useNodeDragIndividual() {
     const selectedNodes = toValue(selectedNodeIds)
 
     // capture the starting positions of all other selected nodes
-    if (selectedNodes?.has(nodeId) && selectedNodes.size > 1) {
+    // Only move other selected items if the dragged node is part of the selection
+    const isDraggedNodeInSelection = selectedNodes?.has(nodeId)
+
+    if (isDraggedNodeInSelection && selectedNodes.size > 1) {
       otherSelectedNodesStartPositions = new Map()
 
       for (const id of selectedNodes) {
@@ -73,9 +76,15 @@ function useNodeDragIndividual() {
       otherSelectedNodesStartPositions = null
     }
 
-    // Capture selected groups (filter from selectedItems which only contains selected items)
-    selectedGroups = toValue(selectedItems).filter(isLGraphGroup)
-    lastCanvasDelta = { x: 0, y: 0 }
+    // Capture selected groups only if the dragged node is part of the selection
+    // This prevents groups from moving when dragging an unrelated node
+    if (isDraggedNodeInSelection) {
+      selectedGroups = toValue(selectedItems).filter(isLGraphGroup)
+      lastCanvasDelta = { x: 0, y: 0 }
+    } else {
+      selectedGroups = null
+      lastCanvasDelta = null
+    }
 
     mutations.setSource(LayoutSource.Vue)
   }

src/renderer/extensions/vueNodes/widgets/components/NumberControlPopover.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed, ref } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useDialogService } from '@/services/dialogService'
+
+import { NumberControlMode } from '../composables/useStepperControl'
+
+type ControlOption = {
+  description: string
+  mode: NumberControlMode
+  icon?: string
+  text?: string
+  title: string
+}
+
+const popover = ref()
+const settingStore = useSettingStore()
+const dialogService = useDialogService()
+
+const toggle = (event: Event) => {
+  popover.value.toggle(event)
+}
+defineExpose({ toggle })
+
+const ENABLE_LINK_TO_GLOBAL = false
+
+const controlOptions: ControlOption[] = [
+  ...(ENABLE_LINK_TO_GLOBAL
+    ? ([
+        {
+          mode: NumberControlMode.LINK_TO_GLOBAL,
+          icon: 'pi pi-link',
+          title: 'linkToGlobal',
+          description: 'linkToGlobalDesc'
+        } satisfies ControlOption
+      ] as ControlOption[])
+    : []),
+  {
+    mode: NumberControlMode.RANDOMIZE,
+    icon: 'icon-[lucide--shuffle]',
+    title: 'randomize',
+    description: 'randomizeDesc'
+  },
+  {
+    mode: NumberControlMode.INCREMENT,
+    text: '+1',
+    title: 'increment',
+    description: 'incrementDesc'
+  },
+  {
+    mode: NumberControlMode.DECREMENT,
+    text: '-1',
+    title: 'decrement',
+    description: 'decrementDesc'
+  }
+]
+
+const widgetControlMode = computed(() =>
+  settingStore.get('Comfy.WidgetControlMode')
+)
+
+const props = defineProps<{
+  controlMode: NumberControlMode
+}>()
+
+const emit = defineEmits<{
+  'update:controlMode': [mode: NumberControlMode]
+}>()
+
+const handleToggle = (mode: NumberControlMode) => {
+  if (props.controlMode === mode) return
+  emit('update:controlMode', mode)
+}
+
+const isActive = (mode: NumberControlMode) => {
+  return props.controlMode === mode
+}
+
+const handleEditSettings = () => {
+  popover.value.hide()
+  dialogService.showSettingsDialog()
+}
+</script>
+
+<template>
+  <Popover
+    ref="popover"
+    class="bg-interface-panel-surface border border-interface-stroke rounded-lg"
+  >
+    <div class="w-113 max-w-md p-4 space-y-4">
+      <div class="text-sm text-muted-foreground leading-tight">
+        {{ $t('widgets.numberControl.header.prefix') }}
+        <span class="text-base-foreground font-medium">
+          {{
+            widgetControlMode === 'before'
+              ? $t('widgets.numberControl.header.before')
+              : $t('widgets.numberControl.header.after')
+          }}
+        </span>
+        {{ $t('widgets.numberControl.header.postfix') }}
+      </div>
+
+      <div class="space-y-2">
+        <div
+          v-for="option in controlOptions"
+          :key="option.mode"
+          class="flex items-center justify-between py-2 gap-7"
+        >
+          <div class="flex items-center gap-2 flex-1 min-w-0">
+            <div
+              class="flex items-center justify-center w-8 h-8 rounded-lg flex-shrink-0 bg-secondary-background border border-border-subtle"
+            >
+              <i
+                v-if="option.icon"
+                :class="option.icon"
+                class="text-base text-base-foreground"
+              />
+              <span
+                v-if="option.text"
+                class="text-xs font-normal text-base-foreground"
+              >
+                {{ option.text }}
+              </span>
+            </div>
+
+            <div class="flex flex-col gap-0.5 min-w-0 flex-1">
+              <div
+                class="text-sm font-normal text-base-foreground leading-tight"
+              >
+                <span v-if="option.mode === NumberControlMode.LINK_TO_GLOBAL">
+                  {{ $t('widgets.numberControl.linkToGlobal') }}
+                  <em>{{ $t('widgets.numberControl.linkToGlobalSeed') }}</em>
+                </span>
+                <span v-else>
+                  {{ $t(`widgets.numberControl.${option.title}`) }}
+                </span>
+              </div>
+              <div
+                class="text-sm font-normal text-muted-foreground leading-tight"
+              >
+                {{ $t(`widgets.numberControl.${option.description}`) }}
+              </div>
+            </div>
+          </div>
+
+          <ToggleSwitch
+            :model-value="isActive(option.mode)"
+            class="flex-shrink-0"
+            @update:model-value="handleToggle(option.mode)"
+          />
+        </div>
+      </div>
+      <div class="border-t border-border-subtle"></div>
+      <Button
+        class="w-full bg-secondary-background hover:bg-secondary-background-hover border-0 rounded-lg p-2 text-sm"
+        @click="handleEditSettings"
+      >
+        <div class="flex items-center justify-center gap-1">
+          <i class="pi pi-cog text-xs text-muted-foreground" />
+          <span class="font-normal text-base-foreground">{{
+            $t('widgets.numberControl.editSettings')
+          }}</span>
+        </div>
+      </Button>
+    </div>
+  </Popover>
+</template>

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue

@@ -1,22 +1,31 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 
 import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
 import WidgetInputNumberSlider from './WidgetInputNumberSlider.vue'
+import WidgetInputNumberWithControl from './WidgetInputNumberWithControl.vue'
 
-defineProps<{
+const props = defineProps<{
   widget: SimplifiedWidget<number>
 }>()
 
 const modelValue = defineModel<number>({ default: 0 })
+
+const hasControlAfterGenerate = computed(() => {
+  return !!props.widget.controlWidget
+})
 </script>
 
 <template>
   <component
     :is="
-      widget.type === 'slider'
-        ? WidgetInputNumberSlider
-        : WidgetInputNumberInput
+      hasControlAfterGenerate
+        ? WidgetInputNumberWithControl
+        : widget.type === 'slider'
+          ? WidgetInputNumberSlider
+          : WidgetInputNumberInput
     "
     v-model="modelValue"
     :widget="widget"

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue

@@ -89,8 +89,11 @@ const buttonTooltip = computed(() => {
       :show-buttons="!buttonsDisabled"
       :pt="{
         root: {
-          class:
-            '[&>input]:bg-transparent [&>input]:border-0 [&>input]:truncate [&>input]:min-w-[4ch]'
+          class: cn(
+            '[&>input]:bg-transparent [&>input]:border-0',
+            '[&>input]:truncate [&>input]:min-w-[4ch]',
+            $slots.default && '[&>input]:pr-7'
+          )
         },
         decrementButton: {
           class: 'w-8 border-0'
@@ -107,6 +110,9 @@ const buttonTooltip = computed(() => {
         <span class="pi pi-minus text-sm" />
       </template>
     </InputNumber>
+    <div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5">
+      <slot />
+    </div>
   </WidgetLayoutField>
 </template>
 

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue

@@ -39,6 +39,7 @@ import {
   filterWidgetProps
 } from '@/utils/widgetPropFilter'
 
+import { useNumberStepCalculation } from '../composables/useNumberStepCalculation'
 import { useNumberWidgetButtonPt } from '../composables/useNumberWidgetButtonPt'
 import { WidgetInputBaseClass } from './layout'
 import WidgetLayoutField from './layout/WidgetLayoutField.vue'
@@ -56,7 +57,7 @@ const updateLocalValue = (newValue: number[] | undefined): void => {
 }
 
 const handleNumberInputUpdate = (newValue: number | undefined) => {
-  if (newValue) {
+  if (newValue !== undefined) {
     updateLocalValue([newValue])
     return
   }
@@ -67,33 +68,11 @@ const filteredProps = computed(() =>
   filterWidgetProps(widget.options, STANDARD_EXCLUDED_PROPS)
 )
 
-// Get the precision value for proper number formatting
-const precision = computed(() => {
-  const p = widget.options?.precision
-  // Treat negative or non-numeric precision as undefined
-  return typeof p === 'number' && p >= 0 ? p : undefined
-})
+const p = widget.options?.precision
+const precision = typeof p === 'number' && p >= 0 ? p : undefined
 
 // Calculate the step value based on precision or widget options
-const stepValue = computed(() => {
-  // Use step2 (correct input spec value) instead of step (legacy 10x value)
-  if (widget.options?.step2 !== undefined) {
-    return widget.options.step2
-  }
-
-  // Otherwise, derive from precision
-  if (precision.value === undefined) {
-    return undefined
-  }
-
-  if (precision.value === 0) {
-    return 1
-  }
-
-  // For precision > 0, step = 1 / (10^precision)
-  // precision 1 → 0.1, precision 2 → 0.01, etc.
-  return 1 / Math.pow(10, precision.value)
-})
+const stepValue = useNumberStepCalculation(widget.options, precision, true)
 
 const sliderNumberPt = useNumberWidgetButtonPt({
   roundedLeft: true,

src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberWithControl.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { defineAsyncComponent, ref } from 'vue'
+
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import type { NumberControlMode } from '../composables/useStepperControl'
+import { useStepperControl } from '../composables/useStepperControl'
+import WidgetInputNumberInput from './WidgetInputNumberInput.vue'
+
+const NumberControlPopover = defineAsyncComponent(
+  () => import('./NumberControlPopover.vue')
+)
+
+const props = defineProps<{
+  widget: SimplifiedWidget<number>
+}>()
+
+const modelValue = defineModel<number>({ default: 0 })
+const popover = ref()
+
+const handleControlChange = (newValue: number) => {
+  modelValue.value = newValue
+}
+
+const { controlMode, controlButtonIcon } = useStepperControl(
+  modelValue,
+  {
+    ...props.widget.options,
+    onChange: handleControlChange
+  },
+  props.widget.controlWidget!.value
+)
+
+const setControlMode = (mode: NumberControlMode) => {
+  controlMode.value = mode
+  props.widget.controlWidget!.update(mode)
+}
+
+const togglePopover = (event: Event) => {
+  popover.value.toggle(event)
+}
+</script>
+
+<template>
+  <div class="relative grid grid-cols-subgrid">
+    <WidgetInputNumberInput
+      v-model="modelValue"
+      :widget
+      class="grid grid-cols-subgrid col-span-2"
+    >
+      <Button
+        variant="link"
+        size="small"
+        class="h-4 w-7 self-center rounded-xl bg-blue-100/30 p-0"
+        @click="togglePopover"
+      >
+        <i :class="`${controlButtonIcon} text-blue-100 text-xs`" />
+      </Button>
+    </WidgetInputNumberInput>
+    <NumberControlPopover
+      ref="popover"
+      :control-mode
+      @update:control-mode="setControlMode"
+    />
+  </div>
+</template>

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -146,11 +146,9 @@ const outputItems = computed<DropdownItem[]>(() => {
 })
 
 const allItems = computed<DropdownItem[]>(() => {
-  if (props.isAssetMode && assetData) {
-    return assetData.dropdownItems.value
-  }
   return [...inputItems.value, ...outputItems.value]
 })
+
 const dropdownItems = computed<DropdownItem[]>(() => {
   if (props.isAssetMode) {
     return allItems.value
@@ -163,7 +161,7 @@ const dropdownItems = computed<DropdownItem[]>(() => {
       return outputItems.value
     case 'all':
     default:
-      return allItems.value
+      return [...inputItems.value, ...outputItems.value]
   }
 })
 

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { refDebounced } from '@vueuse/core'
+import type { HintedString } from '@primevue/core'
+import { onClickOutside, refDebounced } from '@vueuse/core'
 import Popover from 'primevue/popover'
 import { computed, ref, useTemplateRef, watch } from 'vue'
 
@@ -42,6 +43,15 @@ interface Props {
     items: DropdownItem[],
     onCleanup: (cleanupFn: () => void) => void
   ) => Promise<DropdownItem[]>
+  /**
+   * Where to append the dropdown overlay. 'self' keeps it within component
+   * for transform inheritance (scales with canvas), 'body' keeps fixed size.
+   *
+   * When Popover handles appendTo set to 'self', it still tries to
+   * apply offset to the component. Therefore, if in 'self' mode,
+   * render the dropdown directly inside the component.
+   */
+  appendTo?: HintedString<'body' | 'self'> | HTMLElement
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -52,7 +62,8 @@ const props = withDefaults(defineProps<Props>(), {
   filterOptions: () => [],
   sortOptions: () => getDefaultSortOptions(),
   isSelected: (selected, item, _index) => selected.has(item.id),
-  searcher: defaultSearcher
+  searcher: defaultSearcher,
+  appendTo: 'body'
 })
 
 const selected = defineModel<Set<SelectedKey>>('selected', {
@@ -75,6 +86,7 @@ const isQuerying = ref(false)
 const toastStore = useToastStore()
 const popoverRef = ref<InstanceType<typeof Popover>>()
 const triggerRef = useTemplateRef('triggerRef')
+const dropdownContainerRef = useTemplateRef('dropdownContainerRef')
 const isOpen = ref(false)
 
 const maxSelectable = computed(() => {
@@ -132,23 +144,38 @@ const sortedItems = computed(() => {
   return selectedSorter.value({ items: filteredItems.value }) || []
 })
 
+// Close dropdown when clicking outside (only for appendTo === 'self' mode)
+onClickOutside(
+  dropdownContainerRef,
+  () => {
+    if (props.appendTo === 'self' && isOpen.value) {
+      closeDropdown()
+    }
+  },
+  { ignore: [triggerRef] }
+)
+
 function internalIsSelected(item: DropdownItem, index: number): boolean {
   return props.isSelected?.(selected.value, item, index) ?? false
 }
 
 const toggleDropdown = (event: Event) => {
   if (props.disabled) return
+  // In 'appendTo === "self"' mode, the Popover component is not used.
+  // Therefore, set isOpen directly.
   if (popoverRef.value && triggerRef.value) {
     popoverRef.value.toggle(event, triggerRef.value)
-    isOpen.value = !isOpen.value
   }
+  isOpen.value = !isOpen.value
 }
 
 const closeDropdown = () => {
+  // In 'appendTo === "self"' mode, the Popover component is not used.
+  // Therefore, set isOpen directly.
   if (popoverRef.value) {
     popoverRef.value.hide()
-    isOpen.value = false
   }
+  isOpen.value = false
 }
 
 function handleFileChange(event: Event) {
@@ -200,10 +227,41 @@ function handleSelection(item: DropdownItem, index: number) {
       @select-click="toggleDropdown"
       @file-change="handleFileChange"
     />
+
+    <template v-if="appendTo === 'self'">
+      <!--
+        When Popover handles appendTo set to 'self', it still tries to
+        apply offset to the component. Therefore, if in 'self' mode,
+        render the dropdown directly inside the div element.
+      -->
+      <div
+        v-if="isOpen"
+        ref="dropdownContainerRef"
+        class="absolute z-1001 top-8 left-0"
+      >
+        <FormDropdownMenu
+          v-model:filter-selected="filterSelected"
+          v-model:layout-mode="layoutMode"
+          v-model:sort-selected="sortSelected"
+          v-model:search-query="searchQuery"
+          :filter-options="filterOptions"
+          :sort-options="sortOptions"
+          :disabled="disabled"
+          :is-querying="isQuerying"
+          :items="sortedItems"
+          :is-selected="internalIsSelected"
+          :max-selectable="maxSelectable"
+          @close="closeDropdown"
+          @item-click="handleSelection"
+        />
+      </div>
+    </template>
     <Popover
+      v-else
       ref="popoverRef"
       :dismissable="true"
       :close-on-escape="true"
+      :append-to="appendTo"
       unstyled
       :pt="{
         root: {

src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue

@@ -28,7 +28,7 @@ const hideLayoutField = inject<boolean>('hideLayoutField', false)
       <div
         :class="
           cn(
-            'cursor-default min-w-0 rounded-lg space-y-1 focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
+            'cursor-default min-w-0 rounded-lg focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
             widget.borderStyle
           )
         "

src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts

@@ -13,16 +13,16 @@ import {
 import { assetService } from '@/platform/assets/services/assetService'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
-import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type {
   ComboInputSpec,
   InputSpec
 } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { isComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
-import { addValueControlWidgets } from '@/scripts/widgets'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { addValueControlWidgets } from '@/scripts/widgets'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { getMediaTypeFromFilename } from '@/utils/formatUtil'
 
@@ -69,6 +69,16 @@ const addMultiSelectWidget = (
   addWidget(node, widget as BaseDOMWidget<object | string>)
   // TODO: Add remote support to multi-select widget
   // https://github.com/Comfy-Org/ComfyUI_frontend/issues/3003
+  if (inputSpec.control_after_generate) {
+    widget.linkedWidgets = addValueControlWidgets(
+      node,
+      widget,
+      'fixed',
+      undefined,
+      transformInputSpecV2ToV1(inputSpec)
+    )
+  }
+
   return widget
 }
 

src/renderer/extensions/vueNodes/widgets/composables/useFloatWidget.ts

@@ -6,6 +6,8 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { isFloatInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { addValueControlWidget } from '@/scripts/widgets'
+import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 
 function onFloatValueChange(this: INumericWidget, v: number) {
   const round = this.options.round
@@ -55,7 +57,7 @@ export const useFloatWidget = () => {
 
     /** Assertion {@link inputSpec.default} */
     const defaultValue = (inputSpec.default as number | undefined) ?? 0
-    return node.addWidget(
+    const widget = node.addWidget(
       widgetType,
       inputSpec.name,
       defaultValue,
@@ -73,6 +75,20 @@ export const useFloatWidget = () => {
         precision
       }
     )
+
+    if (inputSpec.control_after_generate) {
+      const controlWidget = addValueControlWidget(
+        node,
+        widget,
+        'fixed',
+        undefined,
+        undefined,
+        transformInputSpecV2ToV1(inputSpec)
+      )
+      widget.linkedWidgets = [controlWidget]
+    }
+
+    return widget
   }
 
   return widgetConstructor

src/renderer/extensions/vueNodes/widgets/composables/useIntWidget.ts

@@ -1,11 +1,11 @@
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { INumericWidget } from '@/lib/litegraph/src/types/widgets'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
-import { isIntInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { addValueControlWidget } from '@/scripts/widgets'
+import { isIntInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import type { ComfyWidgetConstructorV2 } from '@/scripts/widgets'
+import { addValueControlWidget } from '@/scripts/widgets'
+import { transformInputSpecV2ToV1 } from '@/schemas/nodeDef/migration'
 
 function onValueChange(this: INumericWidget, v: number) {
   // For integers, always round to the nearest step
@@ -69,14 +69,10 @@ export const useIntWidget = () => {
 
     const controlAfterGenerate =
       inputSpec.control_after_generate ??
-      /**
-       * Compatibility with legacy node convention. Int input with name
-       * 'seed' or 'noise_seed' get automatically added a control widget.
-       */
       ['seed', 'noise_seed'].includes(inputSpec.name)
 
     if (controlAfterGenerate) {
-      const seedControl = addValueControlWidget(
+      const controlWidget = addValueControlWidget(
         node,
         widget,
         'randomize',
@@ -84,7 +80,7 @@ export const useIntWidget = () => {
         undefined,
         transformInputSpecV2ToV1(inputSpec)
       )
-      widget.linkedWidgets = [seedControl]
+      widget.linkedWidgets = [controlWidget]
     }
 
     return widget

src/renderer/extensions/vueNodes/widgets/composables/useNumberStepCalculation.ts

@@ -0,0 +1,35 @@
+import { computed, toValue } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+
+interface NumberWidgetOptions {
+  step2?: number
+  precision?: number
+}
+
+/**
+ * Shared composable for calculating step values in number input widgets
+ * Handles both explicit step2 values and precision-derived steps
+ */
+export function useNumberStepCalculation(
+  options: NumberWidgetOptions | undefined,
+  precisionArg: MaybeRefOrGetter<number | undefined>,
+  returnUndefinedForDefault = false
+) {
+  return computed(() => {
+    const precision = toValue(precisionArg)
+    // Use step2 (correct input spec value) instead of step (legacy 10x value)
+    if (options?.step2 !== undefined) {
+      return Number(options.step2)
+    }
+
+    if (precision === undefined) {
+      return returnUndefinedForDefault ? undefined : 0
+    }
+
+    if (precision === 0) return 1
+
+    // For precision > 0, step = 1 / (10^precision)
+    const step = 1 / Math.pow(10, precision)
+    return returnUndefinedForDefault ? step : Number(step.toFixed(precision))
+  })
+}

src/renderer/extensions/vueNodes/widgets/composables/useStepperControl.ts

@@ -0,0 +1,111 @@
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+
+import type { ControlOptions } from '@/types/simplifiedWidget'
+
+import { numberControlRegistry } from '../services/NumberControlRegistry'
+
+export enum NumberControlMode {
+  FIXED = 'fixed',
+  INCREMENT = 'increment',
+  DECREMENT = 'decrement',
+  RANDOMIZE = 'randomize',
+  LINK_TO_GLOBAL = 'linkToGlobal'
+}
+
+interface StepperControlOptions {
+  min?: number
+  max?: number
+  step?: number
+  step2?: number
+  onChange?: (value: number) => void
+}
+
+function convertToEnum(str?: ControlOptions): NumberControlMode {
+  switch (str) {
+    case 'fixed':
+      return NumberControlMode.FIXED
+    case 'increment':
+      return NumberControlMode.INCREMENT
+    case 'decrement':
+      return NumberControlMode.DECREMENT
+    case 'randomize':
+      return NumberControlMode.RANDOMIZE
+  }
+  return NumberControlMode.RANDOMIZE
+}
+
+function useControlButtonIcon(controlMode: Ref<NumberControlMode>) {
+  return computed(() => {
+    switch (controlMode.value) {
+      case NumberControlMode.INCREMENT:
+        return 'pi pi-plus'
+      case NumberControlMode.DECREMENT:
+        return 'pi pi-minus'
+      case NumberControlMode.FIXED:
+        return 'icon-[lucide--pencil-off]'
+      case NumberControlMode.LINK_TO_GLOBAL:
+        return 'pi pi-link'
+      default:
+        return 'icon-[lucide--shuffle]'
+    }
+  })
+}
+
+export function useStepperControl(
+  modelValue: Ref<number>,
+  options: StepperControlOptions,
+  defaultValue?: ControlOptions
+) {
+  const controlMode = ref<NumberControlMode>(convertToEnum(defaultValue))
+  const controlId = Symbol('numberControl')
+
+  const applyControl = () => {
+    const { min = 0, max = 1000000, step2, step = 1, onChange } = options
+    const safeMax = Math.min(2 ** 50, max)
+    const safeMin = Math.max(-(2 ** 50), min)
+    // Use step2 if available (widget context), otherwise use step as-is (direct API usage)
+    const actualStep = step2 !== undefined ? step2 : step
+
+    let newValue: number
+    switch (controlMode.value) {
+      case NumberControlMode.FIXED:
+        // Do nothing - keep current value
+        return
+      case NumberControlMode.INCREMENT:
+        newValue = Math.min(safeMax, modelValue.value + actualStep)
+        break
+      case NumberControlMode.DECREMENT:
+        newValue = Math.max(safeMin, modelValue.value - actualStep)
+        break
+      case NumberControlMode.RANDOMIZE:
+        newValue = Math.floor(Math.random() * (safeMax - safeMin + 1)) + safeMin
+        break
+      default:
+        return
+    }
+
+    if (onChange) {
+      onChange(newValue)
+    } else {
+      modelValue.value = newValue
+    }
+  }
+
+  // Register with singleton registry
+  onMounted(() => {
+    numberControlRegistry.register(controlId, applyControl)
+  })
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    numberControlRegistry.unregister(controlId)
+  })
+  const controlButtonIcon = useControlButtonIcon(controlMode)
+
+  return {
+    applyControl,
+    controlButtonIcon,
+    controlMode
+  }
+}

src/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry.ts

@@ -0,0 +1,59 @@
+import { useSettingStore } from '@/platform/settings/settingStore'
+
+/**
+ * Registry for managing Vue number controls with deterministic execution timing.
+ * Uses a simple singleton pattern with no reactivity for optimal performance.
+ */
+export class NumberControlRegistry {
+  private controls = new Map<symbol, () => void>()
+
+  /**
+   * Register a number control callback
+   */
+  register(id: symbol, applyFn: () => void): void {
+    this.controls.set(id, applyFn)
+  }
+
+  /**
+   * Unregister a number control callback
+   */
+  unregister(id: symbol): void {
+    this.controls.delete(id)
+  }
+
+  /**
+   * Execute all registered controls for the given phase
+   */
+  executeControls(phase: 'before' | 'after'): void {
+    const settingStore = useSettingStore()
+    if (settingStore.get('Comfy.WidgetControlMode') === phase) {
+      for (const applyFn of this.controls.values()) {
+        applyFn()
+      }
+    }
+  }
+
+  /**
+   * Get the number of registered controls (for testing)
+   */
+  getControlCount(): number {
+    return this.controls.size
+  }
+
+  /**
+   * Clear all registered controls (for testing)
+   */
+  clear(): void {
+    this.controls.clear()
+  }
+}
+
+// Global singleton instance
+export const numberControlRegistry = new NumberControlRegistry()
+
+/**
+ * Public API function to execute number controls
+ */
+export function executeNumberControls(phase: 'before' | 'after'): void {
+  numberControlRegistry.executeControls(phase)
+}

src/router.ts

@@ -8,10 +8,11 @@ import {
 import type { RouteLocationNormalized } from 'vue-router'
 
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { isCloud } from '@/platform/distribution/types'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import { useUserStore } from '@/stores/userStore'
+import { isElectron } from '@/utils/envUtil'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
 
 import { installPreservedQueryTracker } from '@/platform/navigation/preservedQueryTracker'
@@ -28,7 +29,7 @@ const isFileProtocol = window.location.protocol === 'file:'
  *   to support deployments like http://mysite.com/ComfyUI/
  */
 function getBasePath(): string {
-  if (isDesktop) return '/'
+  if (isElectron()) return '/'
   if (isCloud) return import.meta.env?.BASE_URL || '/'
   return window.location.pathname
 }
@@ -155,8 +156,8 @@ if (isCloud) {
 
     // Handle other protected routes
     if (!isLoggedIn) {
-      // For desktop, use dialog
-      if (isDesktop) {
+      // For Electron, use dialog
+      if (isElectron()) {
         const dialogService = useDialogService()
         const loginSuccess = await dialogService.showSignInDialog()
         return loginSuccess ? next() : next(false)
@@ -168,7 +169,7 @@ if (isCloud) {
 
     // User is logged in - check if they need onboarding (when enabled)
     // For root path, check actual user status to handle waitlisted users
-    if (!isDesktop && isLoggedIn && to.path === '/') {
+    if (!isElectron() && isLoggedIn && to.path === '/') {
       if (!flags.onboardingSurveyEnabled) {
         return next()
       }

src/scripts/app.ts

@@ -31,6 +31,7 @@ import {
   type NodeId,
   isSubgraphDefinition
 } from '@/platform/workflow/validation/schemas/workflowSchema'
+import { executeNumberControls } from '@/renderer/extensions/vueNodes/widgets/services/NumberControlRegistry'
 import type {
   ExecutionErrorWsMessage,
   NodeError,
@@ -1358,6 +1359,7 @@ export class ComfyApp {
           forEachNode(this.rootGraph, (node) => {
             for (const widget of node.widgets ?? []) widget.beforeQueued?.()
           })
+          executeNumberControls('before')
 
           const p = await this.graphToPrompt(this.rootGraph)
           const queuedNodes = collectAllNodes(this.rootGraph)
@@ -1402,6 +1404,7 @@ export class ComfyApp {
           // Allow widgets to run callbacks after a prompt has been queued
           // e.g. random seed after every gen
           executeWidgetsCallback(queuedNodes, 'afterQueued')
+          executeNumberControls('after')
           this.canvas.draw(true, true)
           await this.ui.queue.update()
         }

src/scripts/utils.ts

@@ -17,7 +17,6 @@ export function clone<T>(obj: T): T {
 }
 
 /**
- * @knipIgnoreUnusedButUsedByCustomNodes
  * @deprecated Use `applyTextReplacements` from `@/utils/searchAndReplace` instead
  * There are external callers to this function, so we need to keep it for now
  */
@@ -25,7 +24,6 @@ export function applyTextReplacements(app: ComfyApp, value: string): string {
   return _applyTextReplacements(app.rootGraph, value)
 }
 
-/** @knipIgnoreUnusedButUsedByCustomNodes */
 export async function addStylesheet(
   urlOrFile: string,
   relativeTo?: string

src/stores/aboutPanelStore.ts

@@ -2,9 +2,9 @@ import { defineStore } from 'pinia'
 import { computed } from 'vue'
 
 import { useExternalLink } from '@/composables/useExternalLink'
-import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { isCloud } from '@/platform/distribution/types'
 import type { AboutPageBadge } from '@/types/comfy'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatCommitHash } from '@/utils/formatUtil'
 
 import { useExtensionStore } from './extensionStore'
@@ -24,7 +24,7 @@ export const useAboutPanelStore = defineStore('aboutPanel', () => {
     // so the python server's API doesn't have the version info.
     {
       label: `ComfyUI ${
-        isDesktop
+        isElectron()
           ? 'v' + electronAPI().getComfyUIVersion()
           : formatCommitHash(coreVersion.value)
       }`,

src/stores/electronDownloadStore.ts

@@ -3,8 +3,7 @@ import type { DownloadState } from '@comfyorg/comfyui-electron-types'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
-import { isDesktop } from '@/platform/distribution/types'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 
 export interface ElectronDownload extends Pick<
   DownloadState,
@@ -24,7 +23,7 @@ export const useElectronDownloadStore = defineStore('downloads', () => {
     downloads.value.find((download) => url === download.url)
 
   const initialize = async () => {
-    if (isDesktop) {
+    if (isElectron()) {
       const allDownloads = await DownloadManager.getAllDownloads()
 
       for (const download of allDownloads) {

src/stores/systemStatsStore.ts

@@ -1,9 +1,10 @@
 import { useAsyncState } from '@vueuse/core'
 import { defineStore } from 'pinia'
 
-import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { isCloud } from '@/platform/distribution/types'
 import type { SystemStats } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
+import { isElectron } from '@/utils/envUtil'
 
 export const useSystemStatsStore = defineStore('systemStats', () => {
   const fetchSystemStatsData = async () => {
@@ -39,6 +40,7 @@ export const useSystemStatsStore = defineStore('systemStats', () => {
     }
 
     const os = systemStats.value.system.os.toLowerCase()
+    const isDesktop = isElectron()
 
     if (isDesktop) {
       if (os.includes('windows')) {

src/stores/workspace/bottomPanelStore.ts

@@ -9,7 +9,7 @@ import {
 import { useCommandStore } from '@/stores/commandStore'
 import type { ComfyExtension } from '@/types/comfy'
 import type { BottomPanelExtension } from '@/types/extensionTypes'
-import { isDesktop } from '@/platform/distribution/types'
+import { isElectron } from '@/utils/envUtil'
 
 type PanelType = 'terminal' | 'shortcuts'
 
@@ -123,7 +123,7 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
 
   const registerCoreBottomPanelTabs = () => {
     registerBottomPanelTab(useLogsTerminalTab())
-    if (isDesktop) {
+    if (isElectron()) {
       registerBottomPanelTab(useCommandTerminalTab())
     }
     useShortcutsTab().forEach(registerBottomPanelTab)

src/types/simplifiedWidget.ts

@@ -15,6 +15,28 @@ export type WidgetValue =
   | void
   | File[]
 
+const CONTROL_OPTIONS = [
+  'fixed',
+  'increment',
+  'decrement',
+  'randomize'
+] as const
+export type ControlOptions = (typeof CONTROL_OPTIONS)[number]
+
+function isControlOption(val: WidgetValue): val is ControlOptions {
+  return CONTROL_OPTIONS.includes(val as ControlOptions)
+}
+
+export function normalizeControlOption(val: WidgetValue): ControlOptions {
+  if (isControlOption(val)) return val
+  return 'randomize'
+}
+
+export type SafeControlWidget = {
+  value: ControlOptions
+  update: (value: WidgetValue) => void
+}
+
 export interface SimplifiedWidget<
   T extends WidgetValue = WidgetValue,
   O = Record<string, any>
@@ -47,4 +69,6 @@ export interface SimplifiedWidget<
 
   /** Optional input specification backing this widget */
   spec?: InputSpecV2
+
+  controlWidget?: SafeControlWidget
 }

src/utils/envUtil.ts

@@ -1,6 +1,8 @@
 import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
 
-import { isDesktop } from '@/platform/distribution/types'
+export function isElectron() {
+  return 'electronAPI' in window && window.electronAPI !== undefined
+}
 
 export function electronAPI() {
   return (window as any).electronAPI as ElectronAPI
@@ -11,5 +13,5 @@ export function showNativeSystemMenu() {
 }
 
 export function isNativeWindow() {
-  return isDesktop && !!window.navigator.windowControlsOverlay?.visible
+  return isElectron() && !!window.navigator.windowControlsOverlay?.visible
 }

src/views/GraphView.vue

@@ -17,8 +17,7 @@
 
   <GlobalToast />
   <RerouteMigrationToast />
-  <VueNodesMigrationToast />
-  <UnloadWindowConfirmDialog v-if="!isDesktop" />
+  <UnloadWindowConfirmDialog v-if="!isElectron()" />
   <MenuHamburger />
 </template>
 
@@ -50,7 +49,7 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import { i18n, loadLocale } from '@/i18n'
-import { isCloud, isDesktop } from '@/platform/distribution/types'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useFrontendVersionMismatchWarning } from '@/platform/updates/common/useFrontendVersionMismatchWarning'
@@ -77,7 +76,7 @@ import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 import LinearView from '@/views/LinearView.vue'
 
 setupAutoQueueHandler()
@@ -112,7 +111,7 @@ watch(
       document.body.classList.add(DARK_THEME_CLASS)
     }
 
-    if (isDesktop) {
+    if (isElectron()) {
       electronAPI().changeTheme({
         color: 'rgba(0, 0, 0, 0)',
         symbolColor: newTheme.colors.comfy_base['input-text']
@@ -122,7 +121,7 @@ watch(
   { immediate: true }
 )
 
-if (isDesktop) {
+if (isElectron()) {
   watch(
     () => queueStore.tasks,
     (newTasks, oldTasks) => {

src/views/LinearView.vue

@@ -18,7 +18,6 @@ import {
 import { useAssetsSidebarTab } from '@/composables/sidebarTabs/useAssetsSidebarTab'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
-import { isDesktop } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -28,6 +27,7 @@ import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
+import { isElectron } from '@/utils/envUtil'
 
 const nodeOutputStore = useNodeOutputStore()
 const commandStore = useCommandStore()
@@ -60,6 +60,7 @@ const nodeDatas = computed(() => {
     .map(nodeToNodeData)
 })
 const { isLoggedIn } = useCurrentUser()
+const isDesktop = isElectron()
 
 const batchCountWidget = {
   options: { step2: 1, precision: 1, min: 1, max: 100 },

src/views/templates/BaseViewTemplate.vue

@@ -22,8 +22,7 @@
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue'
 
-import { isDesktop } from '@/platform/distribution/types'
-import { electronAPI, isNativeWindow } from '@/utils/envUtil'
+import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
 
 const { dark = false } = defineProps<{
   dark?: boolean
@@ -41,7 +40,7 @@ const lightTheme = {
 
 const topMenuRef = ref<HTMLDivElement | null>(null)
 onMounted(async () => {
-  if (isDesktop) {
+  if (isElectron()) {
     await nextTick()
 
     electronAPI().changeTheme({

tests-ui/tests/components/TopMenuSection.test.ts

@@ -7,8 +7,9 @@ import { createI18n } from 'vue-i18n'
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
+import { isElectron } from '@/utils/envUtil'
 
-const mockData = vi.hoisted(() => ({ isLoggedIn: false, isDesktop: false }))
+const mockData = vi.hoisted(() => ({ isLoggedIn: false }))
 
 vi.mock('@/composables/auth/useCurrentUser', () => ({
   useCurrentUser: () => {
@@ -18,12 +19,7 @@ vi.mock('@/composables/auth/useCurrentUser', () => ({
   }
 }))
 
-vi.mock('@/platform/distribution/types', () => ({
-  isCloud: false,
-  get isDesktop() {
-    return mockData.isDesktop
-  }
-}))
+vi.mock('@/utils/envUtil')
 vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => ({
     currentUser: null,
@@ -66,8 +62,6 @@ function createWrapper() {
 describe('TopMenuSection', () => {
   beforeEach(() => {
     vi.resetAllMocks()
-    mockData.isDesktop = false
-    mockData.isLoggedIn = false
   })
 
   describe('authentication state', () => {
@@ -90,7 +84,7 @@ describe('TopMenuSection', () => {
 
       describe('on desktop platform', () => {
         it('should display LoginButton and not display CurrentUserButton', () => {
-          mockData.isDesktop = true
+          vi.mocked(isElectron).mockReturnValue(true)
           const wrapper = createWrapper()
           expect(wrapper.findComponent(LoginButton).exists()).toBe(true)
           expect(wrapper.findComponent(CurrentUserButton).exists()).toBe(false)

tests-ui/tests/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -53,11 +53,8 @@ vi.mock('@/composables/bottomPanelTabs/useTerminal', () => ({
   }))
 }))
 
-vi.mock('@/platform/distribution/types', () => ({
-  isDesktop: false
-}))
-
 vi.mock('@/utils/envUtil', () => ({
+  isElectron: vi.fn(() => false),
   electronAPI: vi.fn(() => null)
 }))
 

tests-ui/tests/composables/useExternalLink.test.ts

@@ -1,15 +1,8 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-// Mock the distribution types
-const mockData = vi.hoisted(() => ({ isDesktop: false }))
-vi.mock('@/platform/distribution/types', () => ({
-  get isDesktop() {
-    return mockData.isDesktop
-  }
-}))
-
 // Mock the environment utilities
 vi.mock('@/utils/envUtil', () => ({
+  isElectron: vi.fn(),
   electronAPI: vi.fn()
 }))
 
@@ -27,14 +20,14 @@ vi.mock('@/i18n', () => ({
 
 // Import after mocking to get the mocked versions
 import { useExternalLink } from '@/composables/useExternalLink'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 
 describe('useExternalLink', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     // Reset to default state
     i18n.global.locale.value = 'en'
-    mockData.isDesktop = false
+    vi.mocked(isElectron).mockReturnValue(false)
   })
 
   describe('staticUrls', () => {
@@ -102,7 +95,7 @@ describe('useExternalLink', () => {
 
     it('should add platform suffix when requested', () => {
       i18n.global.locale.value = 'en'
-      mockData.isDesktop = true
+      vi.mocked(isElectron).mockReturnValue(true)
       vi.mocked(electronAPI).mockReturnValue({
         getPlatform: () => 'darwin'
       } as ReturnType<typeof electronAPI>)
@@ -114,7 +107,7 @@ describe('useExternalLink', () => {
 
     it('should add platform suffix with trailing slash', () => {
       i18n.global.locale.value = 'en'
-      mockData.isDesktop = true
+      vi.mocked(isElectron).mockReturnValue(true)
       vi.mocked(electronAPI).mockReturnValue({
         getPlatform: () => 'win32'
       } as ReturnType<typeof electronAPI>)
@@ -126,7 +119,7 @@ describe('useExternalLink', () => {
 
     it('should combine locale and platform', () => {
       i18n.global.locale.value = 'zh'
-      mockData.isDesktop = true
+      vi.mocked(isElectron).mockReturnValue(true)
       vi.mocked(electronAPI).mockReturnValue({
         getPlatform: () => 'darwin'
       } as ReturnType<typeof electronAPI>)
@@ -143,7 +136,7 @@ describe('useExternalLink', () => {
 
     it('should not add platform when not desktop', () => {
       i18n.global.locale.value = 'en'
-      mockData.isDesktop = false
+      vi.mocked(isElectron).mockReturnValue(false)
 
       const { buildDocsUrl } = useExternalLink()
       const url = buildDocsUrl('/installation/desktop', { platform: true })

tests-ui/tests/litegraph/core/contextMenuCompat.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
+import type { IContextMenuValue } from '@/lib/litegraph/src/litegraph'
 import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
 
 describe('contextMenuCompat', () => {
@@ -98,13 +99,15 @@ describe('contextMenuCompat', () => {
   })
 
   describe('extractLegacyItems', () => {
+    // Cache base items to ensure reference equality for set-based diffing
+    const baseItem1 = { content: 'Item 1', callback: () => {} }
+    const baseItem2 = { content: 'Item 2', callback: () => {} }
+
     beforeEach(() => {
-      // Setup a mock original method
+      // Setup a mock original method that returns cached items
+      // This ensures reference equality when set-based diffing compares items
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [
-          { content: 'Item 1', callback: () => {} },
-          { content: 'Item 2', callback: () => {} }
-        ]
+        return [baseItem1, baseItem2]
       }
 
       // Install compatibility layer
@@ -114,12 +117,13 @@ describe('contextMenuCompat', () => {
     it('should extract items added by monkey patches', () => {
       // Monkey-patch to add items
       const original = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original as any).apply(this, args)
-        items.push({ content: 'Custom Item 1', callback: () => {} })
-        items.push({ content: 'Custom Item 2', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original.apply(this)
+          items.push({ content: 'Custom Item 1', callback: () => {} })
+          items.push({ content: 'Custom Item 2', callback: () => {} })
+          return items
+        }
 
       // Extract legacy items
       const legacyItems = legacyMenuCompat.extractLegacyItems(
@@ -142,8 +146,11 @@ describe('contextMenuCompat', () => {
       expect(legacyItems).toHaveLength(0)
     })
 
-    it('should return empty array when patched method returns same count', () => {
-      // Monkey-patch that replaces items but keeps same count
+    it('should detect replaced items as additions and warn about removed items', () => {
+      const warnSpy = vi.spyOn(console, 'warn')
+
+      // Monkey-patch that replaces items with different ones (same count)
+      // With set-based diffing, these are detected as new items since they're different references
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
         return [
           { content: 'Replaced 1', callback: () => {} },
@@ -156,7 +163,13 @@ describe('contextMenuCompat', () => {
         mockCanvas
       )
 
-      expect(legacyItems).toHaveLength(0)
+      // Set-based diffing detects the replaced items as additions
+      expect(legacyItems).toHaveLength(2)
+      expect(legacyItems[0]).toMatchObject({ content: 'Replaced 1' })
+      expect(legacyItems[1]).toMatchObject({ content: 'Replaced 2' })
+
+      // Should warn about removed original items
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('removed'))
     })
 
     it('should handle errors gracefully', () => {
@@ -181,29 +194,36 @@ describe('contextMenuCompat', () => {
   })
 
   describe('integration', () => {
+    // Cache base items to ensure reference equality for set-based diffing
+    const integrationBaseItem = { content: 'Base Item', callback: () => {} }
+    const integrationBaseItem1 = { content: 'Base Item 1', callback: () => {} }
+    const integrationBaseItem2 = { content: 'Base Item 2', callback: () => {} }
+
     it('should work with multiple extensions patching', () => {
-      // Setup base method
+      // Setup base method with cached item
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [{ content: 'Base Item', callback: () => {} }]
+        return [integrationBaseItem]
       }
 
       legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
 
       // First extension patches
       const original1 = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original1 as any).apply(this, args)
-        items.push({ content: 'Extension 1 Item', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original1.apply(this)
+          items.push({ content: 'Extension 1 Item', callback: () => {} })
+          return items
+        }
 
       // Second extension patches
       const original2 = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original2 as any).apply(this, args)
-        items.push({ content: 'Extension 2 Item', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original2.apply(this)
+          items.push({ content: 'Extension 2 Item', callback: () => {} })
+          return items
+        }
 
       // Extract legacy items
       const legacyItems = legacyMenuCompat.extractLegacyItems(
@@ -218,24 +238,22 @@ describe('contextMenuCompat', () => {
     })
 
     it('should extract legacy items only once even when called multiple times', () => {
-      // Setup base method
+      // Setup base method with cached items
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [
-          { content: 'Base Item 1', callback: () => {} },
-          { content: 'Base Item 2', callback: () => {} }
-        ]
+        return [integrationBaseItem1, integrationBaseItem2]
       }
 
       legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
 
       // Simulate legacy extension monkey-patching the prototype
       const original = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original as any).apply(this, args)
-        items.push({ content: 'Legacy Item 1', callback: () => {} })
-        items.push({ content: 'Legacy Item 2', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original.apply(this)
+          items.push({ content: 'Legacy Item 1', callback: () => {} })
+          items.push({ content: 'Legacy Item 2', callback: () => {} })
+          return items
+        }
 
       // Extract legacy items multiple times (simulating repeated menu opens)
       const legacyItems1 = legacyMenuCompat.extractLegacyItems(
@@ -268,17 +286,19 @@ describe('contextMenuCompat', () => {
     })
 
     it('should not extract items from registered wrapper methods', () => {
-      // Setup base method
+      // Setup base method with cached item
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [{ content: 'Base Item', callback: () => {} }]
+        return [integrationBaseItem]
       }
 
       legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
 
       // Create a wrapper that adds new API items (simulating useContextMenuTranslation)
       const originalMethod = LGraphCanvas.prototype.getCanvasMenuOptions
-      const wrapperMethod = function (this: LGraphCanvas) {
-        const items = (originalMethod as any).apply(this, [])
+      const wrapperMethod = function (
+        this: LGraphCanvas
+      ): (IContextMenuValue | null)[] {
+        const items = originalMethod.apply(this)
         // Add new API items
         items.push({ content: 'New API Item 1', callback: () => {} })
         items.push({ content: 'New API Item 2', callback: () => {} })
@@ -306,16 +326,16 @@ describe('contextMenuCompat', () => {
     })
 
     it('should extract legacy items even when a wrapper is registered but not active', () => {
-      // Setup base method
+      // Setup base method with cached item
       LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-        return [{ content: 'Base Item', callback: () => {} }]
+        return [integrationBaseItem]
       }
 
       legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
 
       // Register a wrapper (but don't set it as the current method)
       const originalMethod = LGraphCanvas.prototype.getCanvasMenuOptions
-      const wrapperMethod = function () {
+      const wrapperMethod = function (): (IContextMenuValue | null)[] {
         return [{ content: 'Wrapper Item', callback: () => {} }]
       }
       legacyMenuCompat.registerWrapper(
@@ -327,11 +347,12 @@ describe('contextMenuCompat', () => {
 
       // Monkey-patch with a different function (legacy extension)
       const original = LGraphCanvas.prototype.getCanvasMenuOptions
-      LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
-        const items = (original as any).apply(this, args)
-        items.push({ content: 'Legacy Item', callback: () => {} })
-        return items
-      }
+      LGraphCanvas.prototype.getCanvasMenuOptions =
+        function (): (IContextMenuValue | null)[] {
+          const items = original.apply(this)
+          items.push({ content: 'Legacy Item', callback: () => {} })
+          return items
+        }
 
       // Extract legacy items - should return the legacy item because current method is NOT the wrapper
       const legacyItems = legacyMenuCompat.extractLegacyItems(