Remove queue overlay header more menu

Backport of #7470 to `core/1.35`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7492-backport-core-1-35-fix-convert-to-subgraph-not-shown-in-context-menu-if-subgraph-ins-2ca6d73d365081f2a76de1b4fee31744)
by [Unito](https://www.unito.io)

Co-authored-by: Christian Byrne <cbyrne@comfy.org>

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/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 })
+  })
 })

package.json

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

src/components/TopMenuSection.vue

@@ -10,48 +10,66 @@
     </div>
 
     <div class="mx-1 flex flex-col items-end gap-1">
-      <div
-        class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-interface-stroke px-2 shadow-interface"
-      >
-        <ActionBarButtons />
-        <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
+      <div class="flex items-center gap-2">
         <div
-          ref="legacyCommandsContainerRef"
-          class="[&:not(:has(*>*:not(:empty)))]:hidden"
-        ></div>
-        <ComfyActionbar />
-        <IconButton
-          v-tooltip.bottom="queueHistoryTooltipConfig"
-          type="transparent"
-          size="sm"
-          class="relative mr-2 text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
-          :aria-pressed="isQueueOverlayExpanded"
-          :aria-label="
-            t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-          "
-          @click="toggleQueueOverlay"
+          v-if="managerState.shouldShowManagerButtons.value && isDesktop"
+          class="pointer-events-auto flex h-12 shrink-0 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
         >
-          <i class="icon-[lucide--history] size-4" />
-          <span
-            v-if="queuedCount > 0"
-            class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-white"
+          <IconButton
+            v-tooltip.bottom="customNodesManagerTooltipConfig"
+            type="transparent"
+            size="sm"
+            class="text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
+            :aria-label="t('menu.customNodesManager')"
+            @click="openCustomNodeManager"
           >
-            {{ queuedCount }}
-          </span>
-        </IconButton>
-        <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
-        <LoginButton v-else-if="isDesktop" />
-        <IconButton
-          v-if="!isRightSidePanelOpen"
-          v-tooltip.bottom="rightSidePanelTooltipConfig"
-          type="transparent"
-          size="sm"
-          class="mr-2 text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
-          :aria-label="t('rightSidePanel.togglePanel')"
-          @click="rightSidePanelStore.togglePanel"
+            <i class="icon-[lucide--puzzle] size-4" />
+          </IconButton>
+        </div>
+
+        <div
+          class="actionbar-container pointer-events-auto flex h-12 items-center rounded-lg border border-interface-stroke bg-comfy-menu-bg px-2 shadow-interface"
         >
-          <i class="icon-[lucide--panel-right] size-4" />
-        </IconButton>
+          <ActionBarButtons />
+          <!-- Support for legacy topbar elements attached by custom scripts, hidden if no elements present -->
+          <div
+            ref="legacyCommandsContainerRef"
+            class="[&:not(:has(*>*:not(:empty)))]:hidden"
+          ></div>
+          <ComfyActionbar />
+          <IconButton
+            v-tooltip.bottom="queueHistoryTooltipConfig"
+            type="transparent"
+            size="sm"
+            class="relative mr-2 text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
+            :aria-pressed="isQueueOverlayExpanded"
+            :aria-label="
+              t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+            "
+            @click="toggleQueueOverlay"
+          >
+            <i class="icon-[lucide--history] size-4" />
+            <span
+              v-if="queuedCount > 0"
+              class="absolute -top-1 -right-1 min-w-[16px] rounded-full bg-primary-background py-0.25 text-[10px] font-medium leading-[14px] text-white"
+            >
+              {{ queuedCount }}
+            </span>
+          </IconButton>
+          <CurrentUserButton v-if="isLoggedIn" class="shrink-0" />
+          <LoginButton v-else-if="isDesktop" />
+          <IconButton
+            v-if="!isRightSidePanelOpen"
+            v-tooltip.bottom="rightSidePanelTooltipConfig"
+            type="transparent"
+            size="sm"
+            class="mr-2 text-base-foreground transition-colors duration-200 ease-in-out bg-secondary-background hover:bg-secondary-background-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-background"
+            :aria-label="t('rightSidePanel.togglePanel')"
+            @click="rightSidePanelStore.togglePanel"
+          >
+            <i class="icon-[lucide--panel-right] size-4" />
+          </IconButton>
+        </div>
       </div>
       <QueueProgressOverlay
         v-model:expanded="isQueueOverlayExpanded"
@@ -74,18 +92,23 @@ import ActionBarButtons from '@/components/topbar/ActionBarButtons.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import LoginButton from '@/components/topbar/LoginButton.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
+import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 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'
+import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
+import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
 const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
+const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
 const isDesktop = isElectron()
 const { t } = useI18n()
+const { toastErrorHandler } = useErrorHandling()
 const isQueueOverlayExpanded = ref(false)
 const queueStore = useQueueStore()
 const isTopMenuHovered = ref(false)
@@ -93,6 +116,9 @@ const queuedCount = computed(() => queueStore.pendingTasks.length)
 const queueHistoryTooltipConfig = computed(() =>
   buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
+const customNodesManagerTooltipConfig = computed(() =>
+  buildTooltipConfig(t('menu.customNodesManager'))
+)
 
 // Right side panel toggle
 const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore)
@@ -112,10 +138,20 @@ onMounted(() => {
 const toggleQueueOverlay = () => {
   isQueueOverlayExpanded.value = !isQueueOverlayExpanded.value
 }
-</script>
 
-<style scoped>
-.actionbar-container {
-  background-color: var(--comfy-menu-bg);
+const openCustomNodeManager = async () => {
+  try {
+    await managerState.openManager({
+      initialTab: ManagerTab.All,
+      showToastOnLegacyError: false
+    })
+  } catch (error) {
+    try {
+      toastErrorHandler(error)
+    } catch (toastError) {
+      console.error(error)
+      console.error(toastError)
+    }
+  }
 }
-</style>
+</script>

src/components/queue/QueueOverlayExpanded.vue

@@ -4,7 +4,6 @@
       :header-title="headerTitle"
       :show-concurrent-indicator="showConcurrentIndicator"
       :concurrent-workflow-count="concurrentWorkflowCount"
-      @clear-history="$emit('clearHistory')"
     />
 
     <div class="flex items-center justify-between px-3">
@@ -110,7 +109,6 @@ defineProps<{
 
 const emit = defineEmits<{
   (e: 'showAssets'): void
-  (e: 'clearHistory'): void
   (e: 'clearQueued'): void
   (e: 'update:selectedJobTab', value: JobTab): void
   (e: 'update:selectedWorkflowFilter', value: 'all' | 'current'): void

src/components/queue/QueueOverlayHeader.test.ts

@@ -1,47 +1,17 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
-import { defineComponent } from 'vue'
-
-const popoverToggleSpy = vi.fn()
-const popoverHideSpy = vi.fn()
-
-vi.mock('primevue/popover', () => {
-  const PopoverStub = defineComponent({
-    name: 'Popover',
-    setup(_, { slots, expose }) {
-      const toggle = (event: Event) => {
-        popoverToggleSpy(event)
-      }
-      const hide = () => {
-        popoverHideSpy()
-      }
-      expose({ toggle, hide })
-      return () => slots.default?.()
-    }
-  })
-  return { default: PopoverStub }
-})
 
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
-import * as tooltipConfig from '@/composables/useTooltipConfig'
-
-const tooltipDirectiveStub = {
-  mounted: vi.fn(),
-  updated: vi.fn()
-}
 
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
   messages: {
     en: {
-      g: { more: 'More' },
       sideToolbar: {
         queueProgressOverlay: {
-          running: 'running',
-          moreOptions: 'More options',
-          clearHistory: 'Clear history'
+          running: 'running'
         }
       }
     }
@@ -57,8 +27,7 @@ const mountHeader = (props = {}) =>
       ...props
     },
     global: {
-      plugins: [i18n],
-      directives: { tooltip: tooltipDirectiveStub }
+      plugins: [i18n]
     }
   })
 
@@ -79,20 +48,4 @@ describe('QueueOverlayHeader', () => {
     expect(wrapper.text()).toContain('Job queue')
     expect(wrapper.find('.inline-flex.items-center.gap-1').exists()).toBe(false)
   })
-
-  it('toggles popover and emits clear history', async () => {
-    const spy = vi.spyOn(tooltipConfig, 'buildTooltipConfig')
-
-    const wrapper = mountHeader()
-
-    const moreButton = wrapper.get('button[aria-label="More options"]')
-    await moreButton.trigger('click')
-    expect(popoverToggleSpy).toHaveBeenCalledTimes(1)
-    expect(spy).toHaveBeenCalledWith('More')
-
-    const clearHistoryButton = wrapper.get('button[aria-label="Clear history"]')
-    await clearHistoryButton.trigger('click')
-    expect(popoverHideSpy).toHaveBeenCalledTimes(1)
-    expect(wrapper.emitted('clearHistory')).toHaveLength(1)
-  })
 })

src/components/queue/QueueOverlayHeader.vue

@@ -17,85 +17,17 @@
         </span>
       </span>
     </div>
-    <div class="flex items-center gap-1">
-      <IconButton
-        v-tooltip.top="moreTooltipConfig"
-        type="transparent"
-        size="sm"
-        class="size-6 bg-transparent hover:bg-secondary-background hover:opacity-100"
-        :aria-label="t('sideToolbar.queueProgressOverlay.moreOptions')"
-        @click="onMoreClick"
-      >
-        <i
-          class="icon-[lucide--more-horizontal] block size-4 leading-none text-text-secondary"
-        />
-      </IconButton>
-      <Popover
-        ref="morePopoverRef"
-        :dismissable="true"
-        :close-on-escape="true"
-        unstyled
-        :pt="{
-          root: { class: 'absolute z-50' },
-          content: {
-            class: [
-              'bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg font-inter'
-            ]
-          }
-        }"
-      >
-        <div
-          class="flex flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
-        >
-          <IconTextButton
-            class="w-full justify-start gap-2 bg-transparent p-2 font-inter text-[12px] leading-none text-text-primary hover:bg-transparent hover:opacity-90"
-            type="transparent"
-            :label="t('sideToolbar.queueProgressOverlay.clearHistory')"
-            :aria-label="t('sideToolbar.queueProgressOverlay.clearHistory')"
-            @click="onClearHistoryFromMenu"
-          >
-            <template #icon>
-              <i
-                class="icon-[lucide--file-x-2] block size-4 leading-none text-text-secondary"
-              />
-            </template>
-          </IconTextButton>
-        </div>
-      </Popover>
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Popover from 'primevue/popover'
-import type { PopoverMethods } from 'primevue/popover'
-import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import IconButton from '@/components/button/IconButton.vue'
-import IconTextButton from '@/components/button/IconTextButton.vue'
-import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-
 defineProps<{
   headerTitle: string
   showConcurrentIndicator: boolean
   concurrentWorkflowCount: number
 }>()
 
-const emit = defineEmits<{
-  (e: 'clearHistory'): void
-}>()
-
 const { t } = useI18n()
-
-const morePopoverRef = ref<PopoverMethods | null>(null)
-const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
-
-const onMoreClick = (event: MouseEvent) => {
-  morePopoverRef.value?.toggle(event)
-}
-const onClearHistoryFromMenu = () => {
-  morePopoverRef.value?.hide()
-  emit('clearHistory')
-}
 </script>

src/components/queue/QueueProgressOverlay.vue

@@ -23,7 +23,6 @@
         :displayed-job-groups="displayedJobGroups"
         :has-failed-jobs="hasFailedJobs"
         @show-assets="openAssetsSidebar"
-        @clear-history="onClearHistoryFromMenu"
         @clear-queued="cancelQueuedWorkflows"
         @cancel-item="onCancelItem"
         @delete-item="onDeleteItem"
@@ -66,7 +65,6 @@ import { useI18n } from 'vue-i18n'
 import QueueOverlayActive from '@/components/queue/QueueOverlayActive.vue'
 import QueueOverlayEmpty from '@/components/queue/QueueOverlayEmpty.vue'
 import QueueOverlayExpanded from '@/components/queue/QueueOverlayExpanded.vue'
-import QueueClearHistoryDialog from '@/components/queue/dialogs/QueueClearHistoryDialog.vue'
 import ResultGallery from '@/components/sidebar/tabs/queue/ResultGallery.vue'
 import { useCompletionSummary } from '@/composables/queue/useCompletionSummary'
 import { useJobList } from '@/composables/queue/useJobList'
@@ -79,7 +77,6 @@ import { isCloud } from '@/platform/distribution/types'
 import { api } from '@/scripts/api'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useDialogStore } from '@/stores/dialogStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useQueueStore } from '@/stores/queueStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
@@ -105,7 +102,6 @@ const queueStore = useQueueStore()
 const commandStore = useCommandStore()
 const executionStore = useExecutionStore()
 const sidebarTabStore = useSidebarTabStore()
-const dialogStore = useDialogStore()
 const assetsStore = useAssetsStore()
 const assetSelectionStore = useAssetSelectionStore()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
@@ -280,29 +276,4 @@ const interruptAll = wrapWithErrorHandlingAsync(async () => {
 
   await Promise.all(promptIds.map((id) => api.interrupt(id)))
 })
-
-const showClearHistoryDialog = () => {
-  dialogStore.showDialog({
-    key: 'queue-clear-history',
-    component: QueueClearHistoryDialog,
-    dialogComponentProps: {
-      headless: true,
-      closable: false,
-      closeOnEscape: true,
-      dismissableMask: true,
-      pt: {
-        root: {
-          class: 'max-w-[360px] w-auto bg-transparent border-none shadow-none'
-        },
-        content: {
-          class: '!p-0 bg-transparent'
-        }
-      }
-    }
-  })
-}
-
-const onClearHistoryFromMenu = () => {
-  showClearHistoryDialog()
-}
 </script>

src/components/queue/dialogs/QueueClearHistoryDialog.vue

@@ -1,90 +0,0 @@
-<template>
-  <section
-    class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface text-text-primary shadow-interface font-inter"
-  >
-    <header
-      class="flex items-center justify-between border-b border-interface-stroke px-4 py-4"
-    >
-      <p class="m-0 text-[14px] font-normal leading-none">
-        {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
-      </p>
-      <IconButton
-        type="transparent"
-        size="sm"
-        class="size-6 bg-transparent text-text-secondary hover:bg-secondary-background hover:opacity-100"
-        :aria-label="t('g.close')"
-        @click="onCancel"
-      >
-        <i class="icon-[lucide--x] block size-4 leading-none" />
-      </IconButton>
-    </header>
-
-    <div class="flex flex-col gap-4 px-4 py-4 text-[14px] text-text-secondary">
-      <p class="m-0">
-        {{
-          t('sideToolbar.queueProgressOverlay.clearHistoryDialogDescription')
-        }}
-      </p>
-      <p class="m-0">
-        {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogAssetsNote') }}
-      </p>
-    </div>
-
-    <footer class="flex items-center justify-end px-4 py-4">
-      <div class="flex items-center gap-4 text-[14px] leading-none">
-        <TextButton
-          class="min-h-[24px] px-1 py-1 text-[14px] leading-[1] text-text-secondary hover:text-text-primary"
-          type="transparent"
-          :label="t('g.cancel')"
-          @click="onCancel"
-        />
-        <TextButton
-          class="min-h-[32px] px-4 py-2 text-[12px] font-normal leading-[1]"
-          type="secondary"
-          :label="t('g.clear')"
-          :disabled="isClearing"
-          @click="onConfirm"
-        />
-      </div>
-    </footer>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import IconButton from '@/components/button/IconButton.vue'
-import TextButton from '@/components/button/TextButton.vue'
-import { useErrorHandling } from '@/composables/useErrorHandling'
-import { useDialogStore } from '@/stores/dialogStore'
-import { useQueueStore } from '@/stores/queueStore'
-
-const dialogStore = useDialogStore()
-const queueStore = useQueueStore()
-const { t } = useI18n()
-const { wrapWithErrorHandlingAsync } = useErrorHandling()
-
-const isClearing = ref(false)
-
-const clearHistory = wrapWithErrorHandlingAsync(
-  async () => {
-    await queueStore.clear(['history'])
-    dialogStore.closeDialog()
-  },
-  undefined,
-  () => {
-    isClearing.value = false
-  }
-)
-
-const onConfirm = async () => {
-  if (isClearing.value) return
-  isClearing.value = true
-  await clearHistory()
-}
-
-const onCancel = () => {
-  dialogStore.closeDialog()
-}
-</script>

src/composables/graph/useMoreOptionsMenu.ts

@@ -173,7 +173,12 @@ export function useMoreOptionsMenu() {
     }
 
     // Section 5: Subgraph operations
-    options.push(...getSubgraphOptions(hasSubgraphsSelected))
+    options.push(
+      ...getSubgraphOptions({
+        hasSubgraphs: hasSubgraphsSelected,
+        hasMultipleSelection: hasMultipleNodes.value
+      })
+    )
 
     // Section 6: Multiple nodes operations
     if (hasMultipleNodes.value) {

src/composables/graph/useSelectionMenuOptions.test.ts

@@ -0,0 +1,106 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useSelectionMenuOptions } from '@/composables/graph/useSelectionMenuOptions'
+
+const subgraphMocks = vi.hoisted(() => ({
+  convertToSubgraph: vi.fn(),
+  unpackSubgraph: vi.fn(),
+  addSubgraphToLibrary: vi.fn(),
+  createI18nMock: vi.fn(() => ({
+    global: {
+      t: vi.fn(),
+      te: vi.fn(),
+      d: vi.fn()
+    }
+  }))
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string) => key
+  }),
+  createI18n: subgraphMocks.createI18nMock
+}))
+
+vi.mock('@/composables/graph/useSelectionOperations', () => ({
+  useSelectionOperations: () => ({
+    copySelection: vi.fn(),
+    duplicateSelection: vi.fn(),
+    deleteSelection: vi.fn(),
+    renameSelection: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/graph/useNodeArrangement', () => ({
+  useNodeArrangement: () => ({
+    alignOptions: [{ localizedName: 'align-left', icon: 'align-left' }],
+    distributeOptions: [{ localizedName: 'distribute', icon: 'distribute' }],
+    applyAlign: vi.fn(),
+    applyDistribute: vi.fn()
+  })
+}))
+
+vi.mock('@/composables/graph/useSubgraphOperations', () => ({
+  useSubgraphOperations: () => ({
+    convertToSubgraph: subgraphMocks.convertToSubgraph,
+    unpackSubgraph: subgraphMocks.unpackSubgraph,
+    addSubgraphToLibrary: subgraphMocks.addSubgraphToLibrary
+  })
+}))
+
+vi.mock('@/composables/graph/useFrameNodes', () => ({
+  useFrameNodes: () => ({
+    frameNodes: vi.fn()
+  })
+}))
+
+describe('useSelectionMenuOptions - subgraph options', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns only convert option when no subgraphs are selected', () => {
+    const { getSubgraphOptions } = useSelectionMenuOptions()
+    const options = getSubgraphOptions({
+      hasSubgraphs: false,
+      hasMultipleSelection: true
+    })
+
+    expect(options).toHaveLength(1)
+    expect(options[0]?.label).toBe('contextMenu.Convert to Subgraph')
+    expect(options[0]?.action).toBe(subgraphMocks.convertToSubgraph)
+  })
+
+  it('includes convert, add to library, and unpack when subgraphs are selected', () => {
+    const { getSubgraphOptions } = useSelectionMenuOptions()
+    const options = getSubgraphOptions({
+      hasSubgraphs: true,
+      hasMultipleSelection: true
+    })
+    const labels = options.map((option) => option.label)
+
+    expect(labels).toContain('contextMenu.Convert to Subgraph')
+    expect(labels).toContain('contextMenu.Add Subgraph to Library')
+    expect(labels).toContain('contextMenu.Unpack Subgraph')
+
+    const convertOption = options.find(
+      (option) => option.label === 'contextMenu.Convert to Subgraph'
+    )
+    expect(convertOption?.action).toBe(subgraphMocks.convertToSubgraph)
+  })
+
+  it('hides convert option when only a single subgraph is selected', () => {
+    const { getSubgraphOptions } = useSelectionMenuOptions()
+    const options = getSubgraphOptions({
+      hasSubgraphs: true,
+      hasMultipleSelection: false
+    })
+
+    const labels = options.map((option) => option.label)
+    expect(labels).not.toContain('contextMenu.Convert to Subgraph')
+    expect(labels).toEqual([
+      'contextMenu.Add Subgraph to Library',
+      'contextMenu.Unpack Subgraph'
+    ])
+  })
+})

src/composables/graph/useSelectionMenuOptions.ts

@@ -63,9 +63,29 @@ export function useSelectionMenuOptions() {
     }
   ]
 
-  const getSubgraphOptions = (hasSubgraphs: boolean): MenuOption[] => {
+  const getSubgraphOptions = ({
+    hasSubgraphs,
+    hasMultipleSelection
+  }: {
+    hasSubgraphs: boolean
+    hasMultipleSelection: boolean
+  }): MenuOption[] => {
+    const convertOption: MenuOption = {
+      label: t('contextMenu.Convert to Subgraph'),
+      icon: 'icon-[lucide--shrink]',
+      action: convertToSubgraph,
+      badge: BadgeVariant.NEW
+    }
+
+    const options: MenuOption[] = []
+    const showConvertOption = !hasSubgraphs || hasMultipleSelection
+
+    if (showConvertOption) {
+      options.push(convertOption)
+    }
+
     if (hasSubgraphs) {
-      return [
+      options.push(
         {
           label: t('contextMenu.Add Subgraph to Library'),
           icon: 'icon-[lucide--folder-plus]',
@@ -76,17 +96,10 @@ export function useSelectionMenuOptions() {
           icon: 'icon-[lucide--expand]',
           action: unpackSubgraph
         }
-      ]
-    } else {
-      return [
-        {
-          label: t('contextMenu.Convert to Subgraph'),
-          icon: 'icon-[lucide--shrink]',
-          action: convertToSubgraph,
-          badge: BadgeVariant.NEW
-        }
-      ]
+      )
     }
+
+    return options
   }
 
   const getMultipleNodesOptions = (): MenuOption[] => {

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/lib/litegraph/src/LGraphCanvas.ts

@@ -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/locales/en/main.json

@@ -807,6 +807,7 @@
     "dark": "Dark",
     "light": "Light",
     "manageExtensions": "Manage Extensions",
+    "customNodesManager": "Custom Nodes Manager",
     "settings": "Settings",
     "help": "Help",
     "queue": "Queue Panel"
@@ -1333,6 +1334,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."
     },
@@ -2444,4 +2449,4 @@
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
   }
-}
+}

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/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -297,19 +297,26 @@ const handleContextMenu = (event: MouseEvent) => {
 }
 
 onMounted(() => {
-  // Set initial DOM size from layout store, but respect intrinsic content minimum
-  if (size.value && nodeContainerRef.value) {
-    nodeContainerRef.value.style.setProperty(
-      '--node-width',
-      `${size.value.width}px`
-    )
-    nodeContainerRef.value.style.setProperty(
-      '--node-height',
-      `${size.value.height}px`
-    )
-  }
+  initSizeStyles()
 })
 
+/**
+ * Set initial DOM size from layout store, but respect intrinsic content minimum.
+ * Important: nodes can mount in a collapsed state, and the collapse watcher won't
+ * run initially. Match the collapsed runtime behavior by writing to the correct
+ * CSS variables on mount.
+ */
+function initSizeStyles() {
+  const el = nodeContainerRef.value
+  const { width, height } = size.value
+  if (!el) return
+
+  const suffix = isCollapsed.value ? '-x' : ''
+
+  el.style.setProperty(`--node-width${suffix}`, `${width}px`)
+  el.style.setProperty(`--node-height${suffix}`, `${height}px`)
+}
+
 const baseResizeHandleClasses =
   'absolute h-3 w-3 opacity-0 pointer-events-auto focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/40'
 
@@ -327,6 +334,7 @@ const { startResize } = useNodeResize((result, element) => {
 })
 
 const handleResizePointerDown = (event: PointerEvent) => {
+  if (event.button !== 0) return
   if (nodeData.flags?.pinned) return
   startResize(event)
 }

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)
   }

tests-ui/tests/renderer/extensions/vueNodes/components/LGraphNode.test.ts

@@ -60,7 +60,7 @@ vi.mock('@/composables/useErrorHandling', () => ({
 vi.mock('@/renderer/extensions/vueNodes/layout/useNodeLayout', () => ({
   useNodeLayout: () => ({
     position: { x: 100, y: 50 },
-    size: { width: 200, height: 100 },
+    size: computed(() => ({ width: 200, height: 100 })),
     zIndex: 0,
     startDrag: vi.fn(),
     handleDrag: vi.fn(),
@@ -201,4 +201,32 @@ describe('LGraphNode', () => {
 
     expect(wrapper.classes()).toContain('outline-node-stroke-executing')
   })
+
+  it('should initialize height CSS vars for collapsed nodes', () => {
+    const wrapper = mountLGraphNode({
+      nodeData: {
+        ...mockNodeData,
+        flags: { collapsed: true }
+      }
+    })
+
+    expect(wrapper.element.style.getPropertyValue('--node-height')).toBe('')
+    expect(wrapper.element.style.getPropertyValue('--node-height-x')).toBe(
+      '100px'
+    )
+  })
+
+  it('should initialize height CSS vars for expanded nodes', () => {
+    const wrapper = mountLGraphNode({
+      nodeData: {
+        ...mockNodeData,
+        flags: { collapsed: false }
+      }
+    })
+
+    expect(wrapper.element.style.getPropertyValue('--node-height')).toBe(
+      '100px'
+    )
+    expect(wrapper.element.style.getPropertyValue('--node-height-x')).toBe('')
+  })
 })