Merge remote-tracking branch 'origin/main' into sno-ignore-core-dump

.gitignore

@@ -7,6 +7,12 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# Package manager lockfiles (allow users to use different package managers)
+bun.lock
+bun.lockb
+pnpm-lock.yaml
+yarn.lock
+
 # ESLint cache
 .eslintcache
 

browser_tests/tests/groupNode.spec.ts

@@ -17,11 +17,11 @@ test.describe('Group Node', () => {
       await libraryTab.open()
     })
 
-    test.skip('Is added to node library sidebar', async ({ comfyPage }) => {
+    test('Is added to node library sidebar', async ({ comfyPage }) => {
       expect(await libraryTab.getFolder('group nodes').count()).toBe(1)
     })
 
-    test.skip('Can be added to canvas using node library sidebar', async ({
+    test('Can be added to canvas using node library sidebar', async ({
       comfyPage
     }) => {
       const initialNodeCount = await comfyPage.getGraphNodesCount()
@@ -34,7 +34,7 @@ test.describe('Group Node', () => {
       expect(await comfyPage.getGraphNodesCount()).toBe(initialNodeCount + 1)
     })
 
-    test.skip('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
+    test('Can be bookmarked and unbookmarked', async ({ comfyPage }) => {
       await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
         .getNode(groupNodeName)
@@ -61,7 +61,7 @@ test.describe('Group Node', () => {
       ).toHaveLength(0)
     })
 
-    test.skip('Displays preview on bookmark hover', async ({ comfyPage }) => {
+    test('Displays preview on bookmark hover', async ({ comfyPage }) => {
       await libraryTab.getFolder(groupNodeCategory).click()
       await libraryTab
         .getNode(groupNodeName)
@@ -95,7 +95,7 @@ test.describe('Group Node', () => {
     )
   })
 
-  test.skip('Displays tooltip on title hover', async ({ comfyPage }) => {
+  test('Displays tooltip on title hover', async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.EnableTooltips', true)
     await comfyPage.convertAllNodesToGroupNode('Group Node')
     await comfyPage.page.mouse.move(47, 173)
@@ -104,7 +104,7 @@ test.describe('Group Node', () => {
     await expect(comfyPage.page.locator('.node-tooltip')).toBeVisible()
   })
 
-  test.skip('Manage group opens with the correct group selected', async ({
+  test('Manage group opens with the correct group selected', async ({
     comfyPage
   }) => {
     const makeGroup = async (name, type1, type2) => {
@@ -165,7 +165,7 @@ test.describe('Group Node', () => {
     expect(visibleInputCount).toBe(2)
   })
 
-  test.skip('Reconnects inputs after configuration changed via manage dialog save', async ({
+  test('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {
     const expectSingleNode = async (type: string) => {

browser_tests/tests/rightClickMenu.spec.ts

@@ -24,11 +24,11 @@ test.describe('Canvas Right Click Menu', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('add-group-group-added.png')
   })
 
-  test.skip('Can convert to group node', async ({ comfyPage }) => {
+  test('Can convert to group node', async ({ comfyPage }) => {
     await comfyPage.select2Nodes()
     await expect(comfyPage.canvas).toHaveScreenshot('selected-2-nodes.png')
     await comfyPage.rightClickCanvas()
-    await comfyPage.clickContextMenuItem('Convert to Group Node')
+    await comfyPage.clickContextMenuItem('Convert to Group Node (Deprecated)')
     await comfyPage.promptDialogInput.fill('GroupNode2CLIP')
     await comfyPage.page.keyboard.press('Enter')
     await comfyPage.promptDialogInput.waitFor({ state: 'hidden' })

src/assets/icons/custom/ai-model.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.91396 12.7428L5.41396 10.7428C5.57175 10.1116 5.09439 9.50024 4.44382 9.50024H2.50538C2.04651 9.50024 1.64652 9.81253 1.53523 10.2577L1.03523 12.2577C0.877446 12.8888 1.3548 13.5002 2.00538 13.5002H3.94382C4.40269 13.5002 4.80267 13.1879 4.91396 12.7428Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M5.91396 6.74277L6.41396 4.74277C6.57175 4.11163 6.09439 3.50024 5.44382 3.50024H3.50538C3.04651 3.50024 2.64652 3.81253 2.53523 4.2577L2.03523 6.2577C1.87745 6.88885 2.3548 7.50024 3.00538 7.50024H4.94382C5.40269 7.50024 5.80267 7.18794 5.91396 6.74277Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M10.914 12.7428L11.414 10.7428C11.5718 10.1116 11.0944 9.50024 10.4438 9.50024H8.50538C8.04651 9.50024 7.64652 9.81253 7.53523 10.2577L7.03523 12.2577C6.87745 12.8888 7.3548 13.5002 8.00538 13.5002H9.94382C10.4027 13.5002 10.8027 13.1879 10.914 12.7428Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M12.2342 5.46739L11.5287 7.11354C11.4248 7.35597 11.0811 7.35597 10.9772 7.11354L10.2717 5.46739C10.2414 5.39659 10.185 5.34017 10.1141 5.30983L8.468 4.60433C8.22557 4.50044 8.22557 4.15675 8.468 4.05285L10.1141 3.34736C10.185 3.31701 10.2414 3.26059 10.2717 3.18979L10.9772 1.54364C11.0811 1.30121 11.4248 1.30121 11.5287 1.54364L12.2342 3.18979C12.2645 3.26059 12.3209 3.31701 12.3918 3.34736L14.0379 4.05285C14.2803 4.15675 14.2803 4.50044 14.0379 4.60433L12.3918 5.30983C12.3209 5.34017 12.2645 5.39659 12.2342 5.46739Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>

src/assets/icons/custom/node.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 10L10.598 10.2577C10.4812 10.6954 10.0848 11 9.63172 11H5.30161C4.64458 11 4.16608 10.3772 4.33538 9.74234L5.40204 5.74234C5.51878 5.30458 5.91523 5 6.36828 5H10.8286C11.4199 5 11.8505 5.56051 11.6982 6.13185L11.6736 6.22389M14 8H10M4.5 8H2" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>

src/assets/icons/custom/template.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1894 6.24254L13.6894 4.24254C13.8471 3.61139 13.3698 3 12.7192 3H3.78077C3.3219 3 2.92192 3.3123 2.81062 3.75746L2.31062 5.75746C2.15284 6.38861 2.63019 7 3.28077 7H12.2192C12.6781 7 13.0781 6.6877 13.1894 6.24254Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M13.1894 12.2425L13.6894 10.2425C13.8471 9.61139 13.3698 9 12.7192 9H8.78077C8.3219 9 7.92192 9.3123 7.81062 9.75746L7.31062 11.7575C7.15284 12.3886 7.6302 13 8.28077 13H12.2192C12.6781 13 13.0781 12.6877 13.1894 12.2425Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+<path d="M5.18936 12.2425L5.68936 10.2425C5.84714 9.61139 5.36978 9 4.71921 9H3.78077C3.3219 9 2.92192 9.3123 2.81062 9.75746L2.31062 11.7575C2.15284 12.3886 2.6302 13 3.28077 13H4.21921C4.67808 13 5.07806 12.6877 5.18936 12.2425Z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+</svg>

src/components/sidebar/SideToolbar.vue

@@ -8,10 +8,13 @@
         :icon-badge="tab.iconBadge"
         :tooltip="tab.tooltip"
         :tooltip-suffix="getTabTooltipSuffix(tab)"
+        :label="tab.label || tab.title"
+        :is-small="isSmall"
         :selected="tab.id === selectedTab?.id"
         :class="tab.id + '-tab-button'"
         @click="onTabClick(tab)"
       />
+      <SidebarTemplatesButton />
       <div class="side-tool-bar-end">
         <SidebarLogoutIcon v-if="userStore.isMultiUserServer" />
         <SidebarHelpCenterIcon />
@@ -43,6 +46,7 @@ import type { SidebarTabExtension } from '@/types/extensionTypes'
 import SidebarHelpCenterIcon from './SidebarHelpCenterIcon.vue'
 import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
+import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
@@ -86,7 +90,7 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   box-shadow: var(--bar-shadow);
 
   --sidebar-width: 4rem;
-  --sidebar-icon-size: 1.5rem;
+  --sidebar-icon-size: 1rem;
 }
 
 .side-tool-bar-container.small-sidebar {

src/components/sidebar/SidebarIcon.vue

@@ -19,12 +19,29 @@
     @click="emit('click', $event)"
   >
     <template #icon>
-      <slot name="icon">
-        <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
-          <i :class="icon + ' side-bar-button-icon'" />
-        </OverlayBadge>
-        <i v-else :class="icon + ' side-bar-button-icon'" />
-      </slot>
+      <div class="side-bar-button-content">
+        <slot name="icon">
+          <OverlayBadge v-if="shouldShowBadge" :value="overlayValue">
+            <i
+              v-if="typeof icon === 'string'"
+              :class="icon + ' side-bar-button-icon'"
+            />
+            <component :is="icon" v-else class="side-bar-button-icon" />
+          </OverlayBadge>
+          <i
+            v-else-if="typeof icon === 'string'"
+            :class="icon + ' side-bar-button-icon'"
+          />
+          <component
+            :is="icon"
+            v-else-if="typeof icon === 'object'"
+            class="side-bar-button-icon"
+          />
+        </slot>
+        <span v-if="label && !isSmall" class="side-bar-button-label">{{
+          t(label)
+        }}</span>
+      </div>
     </template>
   </Button>
 </template>
@@ -33,6 +50,7 @@
 import Button from 'primevue/button'
 import OverlayBadge from 'primevue/overlaybadge'
 import { computed } from 'vue'
+import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -41,13 +59,17 @@ const {
   selected = false,
   tooltip = '',
   tooltipSuffix = '',
-  iconBadge = ''
+  iconBadge = '',
+  label = '',
+  isSmall = false
 } = defineProps<{
-  icon?: string
+  icon?: string | Component
   selected?: boolean
   tooltip?: string
   tooltipSuffix?: string
   iconBadge?: string | (() => string | null)
+  label?: string
+  isSmall?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -74,10 +96,23 @@ const computedTooltip = computed(() => t(tooltip) + tooltipSuffix)
 <style scoped>
 .side-bar-button {
   width: var(--sidebar-width);
-  height: var(--sidebar-width);
+  height: calc(var(--sidebar-width) + 0.5rem);
   border-radius: 0;
 }
 
+.side-tool-bar-end .side-bar-button {
+  height: var(--sidebar-width);
+}
+
+.side-bar-button-content {
+  @apply flex flex-col items-center gap-2;
+}
+
+.side-bar-button-label {
+  @apply text-[10px] text-center whitespace-nowrap;
+  line-height: 1;
+}
+
 .comfyui-body-left .side-bar-button.side-bar-button-selected,
 .comfyui-body-left .side-bar-button.side-bar-button-selected:hover {
   border-left: 4px solid var(--p-button-text-primary-color);

src/components/sidebar/SidebarTemplatesButton.vue

@@ -0,0 +1,35 @@
+<template>
+  <SidebarIcon
+    :icon="TemplateIcon"
+    :tooltip="$t('sideToolbar.templates')"
+    :label="$t('sideToolbar.labels.templates')"
+    :is-small="isSmall"
+    class="templates-tab-button"
+    @click="openTemplates"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent, markRaw } from 'vue'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+import SidebarIcon from './SidebarIcon.vue'
+
+// Import the custom template icon
+const TemplateIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/template'))
+)
+
+const settingStore = useSettingStore()
+const commandStore = useCommandStore()
+
+const isSmall = computed(
+  () => settingStore.get('Comfy.Sidebar.Size') === 'small'
+)
+
+const openTemplates = () => {
+  void commandStore.execute('Comfy.BrowseTemplates')
+}
+</script>

src/composables/node/useNodePricing.ts

@@ -261,7 +261,10 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
             return '$0.14-2.80/Run (varies with model, mode & duration)'
 
           const modelValue = String(modelWidget.value)
-          if (modelValue.includes('v2-master')) {
+          if (
+            modelValue.includes('v2-1-master') ||
+            modelValue.includes('v2-master')
+          ) {
             return '$1.40/Run'
           } else if (
             modelValue.includes('v1-6') ||
@@ -280,12 +283,19 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         console.log('durationValue', durationValue)
 
         // Same pricing matrix as KlingTextToVideoNode
-        if (modelValue.includes('v2-master')) {
+        if (
+          modelValue.includes('v2-1-master') ||
+          modelValue.includes('v2-master')
+        ) {
           if (durationValue.includes('10')) {
             return '$2.80/Run'
           }
           return '$1.40/Run' // 5s default
-        } else if (modelValue.includes('v1-6') || modelValue.includes('v1-5')) {
+        } else if (
+          modelValue.includes('v2-1') ||
+          modelValue.includes('v1-6') ||
+          modelValue.includes('v1-5')
+        ) {
           if (modeValue.includes('pro')) {
             return durationValue.includes('10') ? '$0.98/Run' : '$0.49/Run'
           } else {

src/composables/sidebarTabs/useModelLibrarySidebarTab.ts

@@ -1,16 +1,21 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 import { isElectron } from '@/utils/envUtil'
 
+const AiModelIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/ai-model'))
+)
+
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'model-library',
-    icon: 'pi pi-box',
+    icon: AiModelIcon,
     title: 'sideToolbar.modelLibrary',
     tooltip: 'sideToolbar.modelLibrary',
+    label: 'sideToolbar.labels.models',
     component: markRaw(ModelLibrarySidebarTab),
     type: 'vue',
     iconBadge: () => {

src/composables/sidebarTabs/useNodeLibrarySidebarTab.ts

@@ -1,14 +1,19 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import NodeLibrarySidebarTab from '@/components/sidebar/tabs/NodeLibrarySidebarTab.vue'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const NodeIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/node'))
+)
+
 export const useNodeLibrarySidebarTab = (): SidebarTabExtension => {
   return {
     id: 'node-library',
-    icon: 'pi pi-book',
+    icon: NodeIcon,
     title: 'sideToolbar.nodeLibrary',
     tooltip: 'sideToolbar.nodeLibrary',
+    label: 'sideToolbar.labels.nodes',
     component: markRaw(NodeLibrarySidebarTab),
     type: 'vue'
   }

src/composables/sidebarTabs/useQueueSidebarTab.ts

@@ -15,6 +15,7 @@ export const useQueueSidebarTab = (): SidebarTabExtension => {
     },
     title: 'sideToolbar.queue',
     tooltip: 'sideToolbar.queue',
+    label: 'sideToolbar.labels.queue',
     component: markRaw(QueueSidebarTab),
     type: 'vue'
   }

src/composables/sidebarTabs/useWorkflowsSidebarTab.ts

@@ -1,16 +1,20 @@
-import { markRaw } from 'vue'
+import { defineAsyncComponent, markRaw } from 'vue'
 
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
 
+const WorkflowIcon = markRaw(
+  defineAsyncComponent(() => import('virtual:icons/comfy/workflow'))
+)
+
 export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
   const settingStore = useSettingStore()
   const workflowStore = useWorkflowStore()
   return {
     id: 'workflows',
-    icon: 'pi pi-folder-open',
+    icon: WorkflowIcon,
     iconBadge: () => {
       if (
         settingStore.get('Comfy.Workflow.WorkflowTabsPosition') !== 'Sidebar'
@@ -22,6 +26,7 @@ export const useWorkflowsSidebarTab = (): SidebarTabExtension => {
     },
     title: 'sideToolbar.workflows',
     tooltip: 'sideToolbar.workflows',
+    label: 'sideToolbar.labels.workflows',
     component: markRaw(WorkflowsSidebarTab),
     type: 'vue'
   }

src/composables/useMinimap.ts

@@ -102,6 +102,9 @@ export function useMinimap() {
   const groupColor = computed(() =>
     isLightTheme.value ? '#A2D3EC' : '#1F547A'
   )
+  const groupColorDefault = computed(
+    () => (isLightTheme.value ? '#283640' : '#B3C1CB') // this is the default group color when using nodeColors setting
+  )
   const bypassColor = computed(() =>
     isLightTheme.value ? '#DBDBDB' : '#4B184B'
   )
@@ -249,7 +252,17 @@ export function useMinimap() {
       const w = group.size[0] * scale.value
       const h = group.size[1] * scale.value
 
-      ctx.fillStyle = groupColor.value
+      let color = groupColor.value
+
+      if (nodeColors.value) {
+        color = group.color ?? groupColorDefault.value
+
+        if (isLightTheme.value) {
+          color = adjustColor(color, { opacity: 0.5 })
+        }
+      }
+
+      ctx.fillStyle = color
       ctx.fillRect(x, y, w, h)
     }
   }

src/extensions/core/groupNode.ts

@@ -3,6 +3,7 @@ import { type NodeId } from '@/lib/litegraph/src/LGraphNode'
 import {
   type ExecutableLGraphNode,
   type ExecutionId,
+  LGraphCanvas,
   LGraphNode,
   LiteGraph,
   SubgraphNode
@@ -1172,8 +1173,7 @@ export class GroupNodeHandler {
       // @ts-expect-error fixme ts strict error
       getExtraMenuOptions?.apply(this, arguments)
 
-      // @ts-expect-error fixme ts strict error
-      let optionIndex = options.findIndex((o) => o.content === 'Outputs')
+      let optionIndex = options.findIndex((o) => o?.content === 'Outputs')
       if (optionIndex === -1) optionIndex = options.length
       else optionIndex++
       options.splice(
@@ -1634,6 +1634,57 @@ export class GroupNodeHandler {
   }
 }
 
+function addConvertToGroupOptions() {
+  // @ts-expect-error fixme ts strict error
+  function addConvertOption(options, index) {
+    const selected = Object.values(app.canvas.selected_nodes ?? {})
+    const disabled =
+      selected.length < 2 ||
+      selected.find((n) => GroupNodeHandler.isGroupNode(n))
+    options.splice(index, null, {
+      content: `Convert to Group Node (Deprecated)`,
+      disabled,
+      callback: convertSelectedNodesToGroupNode
+    })
+  }
+
+  // @ts-expect-error fixme ts strict error
+  function addManageOption(options, index) {
+    const groups = app.graph.extra?.groupNodes
+    const disabled = !groups || !Object.keys(groups).length
+    options.splice(index, null, {
+      content: `Manage Group Nodes`,
+      disabled,
+      callback: () => manageGroupNodes()
+    })
+  }
+
+  // Add to canvas
+  const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions
+  LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+    // @ts-expect-error fixme ts strict error
+    const options = getCanvasMenuOptions.apply(this, arguments)
+    const index = options.findIndex((o) => o?.content === 'Add Group')
+    const insertAt = index === -1 ? options.length - 1 : index + 2
+    addConvertOption(options, insertAt)
+    addManageOption(options, insertAt + 1)
+    return options
+  }
+
+  // Add to nodes
+  const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions
+  LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
+    // @ts-expect-error fixme ts strict error
+    const options = getNodeMenuOptions.apply(this, arguments)
+    if (!GroupNodeHandler.isGroupNode(node)) {
+      const index = options.findIndex((o) => o?.content === 'Properties')
+      const insertAt = index === -1 ? options.length - 1 : index
+      addConvertOption(options, insertAt)
+    }
+    return options
+  }
+}
+
 const replaceLegacySeparators = (nodes: ComfyNode[]): void => {
   for (const node of nodes) {
     if (typeof node.type === 'string' && node.type.startsWith('workflow/')) {
@@ -1729,6 +1780,9 @@ const ext: ComfyExtension = {
       }
     }
   ],
+  setup() {
+    addConvertToGroupOptions()
+  },
   async beforeConfigureGraph(
     graphData: ComfyWorkflowJSON,
     missingNodeTypes: string[]

src/lib/litegraph/src/LGraph.ts

@@ -20,6 +20,7 @@ import type { SubgraphEventMap } from './infrastructure/SubgraphEventMap'
 import type {
   DefaultConnectionColors,
   Dictionary,
+  HasBoundingRect,
   IContextMenuValue,
   INodeInputSlot,
   INodeOutputSlot,
@@ -28,7 +29,8 @@ import type {
   MethodNames,
   OptionalProps,
   Point,
-  Positionable
+  Positionable,
+  Size
 } from './interfaces'
 import { LiteGraph, SubgraphNode } from './litegraph'
 import {
@@ -1569,6 +1571,9 @@ export class LGraph
       boundingRect
     )
 
+    //Correct for title height. It's included in bounding box, but not _posSize
+    subgraphNode.pos[1] += LiteGraph.NODE_TITLE_HEIGHT / 2
+
     // Add the subgraph node to the graph
     this.add(subgraphNode)
 
@@ -1668,14 +1673,21 @@ export class LGraph
     if (!(subgraphNode instanceof SubgraphNode))
       throw new Error('Can only unpack Subgraph Nodes')
     this.beforeChange()
-    const center = [0, 0]
-    for (const node of subgraphNode.subgraph.nodes) {
-      center[0] += node.pos[0] + node.size[0] / 2
-      center[1] += node.pos[1] + node.size[1] / 2
-    }
-    center[0] /= subgraphNode.subgraph.nodes.length
-    center[1] /= subgraphNode.subgraph.nodes.length
+    //NOTE: Create bounds can not be called on positionables directly as the subgraph is not being displayed and boundingRect is not initialized.
+    //NOTE: NODE_TITLE_HEIGHT is explicitly excluded here
+    const positionables = [
+      ...subgraphNode.subgraph.nodes,
+      ...subgraphNode.subgraph.reroutes.values(),
+      ...subgraphNode.subgraph.groups
+    ].map((p: { pos: Point; size?: Size }): HasBoundingRect => {
+      return {
+        boundingRect: [p.pos[0], p.pos[1], p.size?.[0] ?? 0, p.size?.[1] ?? 0]
+      }
+    })
+    const bounds = createBounds(positionables) ?? [0, 0, 0, 0]
+    const center = [bounds[0] + bounds[2] / 2, bounds[1] + bounds[3] / 2]
 
+    const toSelect: Positionable[] = []
     const offsetX = subgraphNode.pos[0] - center[0] + subgraphNode.size[0] / 2
     const offsetY = subgraphNode.pos[1] - center[1] + subgraphNode.size[1] / 2
     const movedNodes = multiClone(subgraphNode.subgraph.nodes)
@@ -1697,6 +1709,21 @@ export class LGraph
       for (const input of node.inputs) {
         input.link = null
       }
+      for (const output of node.outputs) {
+        output.links = []
+      }
+      toSelect.push(node)
+    }
+    const groups = structuredClone(
+      [...subgraphNode.subgraph.groups].map((g) => g.serialize())
+    )
+    for (const g_info of groups) {
+      const group = new LGraphGroup(g_info.title, g_info.id)
+      this.add(group, true)
+      group.configure(g_info)
+      group.pos[0] += offsetX
+      group.pos[1] += offsetY
+      toSelect.push(group)
     }
     //cleanup reoute.linkIds now, but leave link.parentIds dangling
     for (const islot of subgraphNode.inputs) {
@@ -1722,17 +1749,16 @@ export class LGraph
         }
       }
     }
-
-    const newLinks: [
-      NodeId,
-      number,
-      NodeId,
-      number,
-      LinkId,
-      RerouteId | undefined,
-      RerouteId | undefined,
-      boolean
-    ][] = []
+    const newLinks: {
+      oid: NodeId
+      oslot: number
+      tid: NodeId
+      tslot: number
+      id: LinkId
+      iparent?: RerouteId
+      eparent?: RerouteId
+      externalFirst: boolean
+    }[] = []
     for (const [, link] of subgraphNode.subgraph._links) {
       let externalParentId: RerouteId | undefined
       if (link.origin_id === SUBGRAPH_INPUT_ID) {
@@ -1757,16 +1783,16 @@ export class LGraph
         for (const linkId of subgraphNode.outputs[link.target_slot].links ??
           []) {
           const sublink = this.links[linkId]
-          newLinks.push([
-            link.origin_id,
-            link.origin_slot,
-            sublink.target_id,
-            sublink.target_slot,
-            link.id,
-            link.parentId,
-            sublink.parentId,
-            true
-          ])
+          newLinks.push({
+            oid: link.origin_id,
+            oslot: link.origin_slot,
+            tid: sublink.target_id,
+            tslot: sublink.target_slot,
+            id: link.id,
+            iparent: link.parentId,
+            eparent: sublink.parentId,
+            externalFirst: true
+          })
           sublink.parentId = undefined
         }
         continue
@@ -1778,47 +1804,47 @@ export class LGraph
         }
         link.target_id = target_id
       }
-      newLinks.push([
-        link.origin_id,
-        link.origin_slot,
-        link.target_id,
-        link.target_slot,
-        link.id,
-        link.parentId,
-        externalParentId,
-        false
-      ])
+      newLinks.push({
+        oid: link.origin_id,
+        oslot: link.origin_slot,
+        tid: link.target_id,
+        tslot: link.target_slot,
+        id: link.id,
+        iparent: link.parentId,
+        eparent: externalParentId,
+        externalFirst: false
+      })
     }
     this.remove(subgraphNode)
     this.subgraphs.delete(subgraphNode.subgraph.id)
     const linkIdMap = new Map<LinkId, LinkId[]>()
     for (const newLink of newLinks) {
       let created: LLink | null | undefined
-      if (newLink[0] == SUBGRAPH_INPUT_ID) {
+      if (newLink.oid == SUBGRAPH_INPUT_ID) {
         if (!(this instanceof Subgraph)) {
           console.error('Ignoring link to subgraph outside subgraph')
           continue
         }
-        const tnode = this._nodes_by_id[newLink[2]]
-        created = this.inputNode.slots[newLink[1]].connect(
-          tnode.inputs[newLink[3]],
+        const tnode = this._nodes_by_id[newLink.tid]
+        created = this.inputNode.slots[newLink.oslot].connect(
+          tnode.inputs[newLink.tslot],
           tnode
         )
-      } else if (newLink[2] == SUBGRAPH_OUTPUT_ID) {
+      } else if (newLink.tid == SUBGRAPH_OUTPUT_ID) {
         if (!(this instanceof Subgraph)) {
           console.error('Ignoring link to subgraph outside subgraph')
           continue
         }
-        const tnode = this._nodes_by_id[newLink[0]]
-        created = this.outputNode.slots[newLink[3]].connect(
-          tnode.outputs[newLink[1]],
+        const tnode = this._nodes_by_id[newLink.oid]
+        created = this.outputNode.slots[newLink.tslot].connect(
+          tnode.outputs[newLink.oslot],
           tnode
         )
       } else {
-        created = this._nodes_by_id[newLink[0]].connect(
-          newLink[1],
-          this._nodes_by_id[newLink[2]],
-          newLink[3]
+        created = this._nodes_by_id[newLink.oid].connect(
+          newLink.oslot,
+          this._nodes_by_id[newLink.tid],
+          newLink.tslot
         )
       }
       if (!created) {
@@ -1826,12 +1852,12 @@ export class LGraph
         continue
       }
       //This is a little unwieldy since Map.has isn't a type guard
-      const linkIds = linkIdMap.get(newLink[4]) ?? []
+      const linkIds = linkIdMap.get(newLink.id) ?? []
       linkIds.push(created.id)
-      if (!linkIdMap.has(newLink[4])) {
-        linkIdMap.set(newLink[4], linkIds)
+      if (!linkIdMap.has(newLink.id)) {
+        linkIdMap.set(newLink.id, linkIds)
       }
-      newLink[4] = created.id
+      newLink.id = created.id
     }
     const rerouteIdMap = new Map<RerouteId, RerouteId>()
     for (const reroute of subgraphNode.subgraph.reroutes.values()) {
@@ -1847,17 +1873,18 @@ export class LGraph
       ])
       rerouteIdMap.set(reroute.id, migratedReroute.id)
       this.reroutes.set(migratedReroute.id, migratedReroute)
+      toSelect.push(migratedReroute)
     }
     //iterate over newly created links to update reroute parentIds
     for (const newLink of newLinks) {
-      const linkInstance = this.links.get(newLink[4])
+      const linkInstance = this.links.get(newLink.id)
       if (!linkInstance) {
         continue
       }
       let instance: Reroute | LLink | undefined = linkInstance
-      let parentId: RerouteId | undefined = newLink[6]
-      if (newLink[7]) {
-        parentId = newLink[6]
+      let parentId: RerouteId | undefined = undefined
+      if (newLink.externalFirst) {
+        parentId = newLink.eparent
         //TODO: recursion check/helper method? Probably exists, but wouldn't mesh with the reference tracking used by this implementation
         while (parentId) {
           instance.parentId = parentId
@@ -1869,7 +1896,7 @@ export class LGraph
           parentId = instance.parentId
         }
       }
-      parentId = newLink[5]
+      parentId = newLink.iparent
       while (parentId) {
         const migratedId = rerouteIdMap.get(parentId)
         if (!migratedId) throw new Error('Broken Id link when unpacking')
@@ -1883,8 +1910,8 @@ export class LGraph
         if (!oldReroute) throw new Error('Broken Id link when unpacking')
         parentId = oldReroute.parentId
       }
-      if (!newLink[7]) {
-        parentId = newLink[6]
+      if (!newLink.externalFirst) {
+        parentId = newLink.eparent
         while (parentId) {
           instance.parentId = parentId
           instance = this.reroutes.get(parentId)
@@ -1897,18 +1924,13 @@ export class LGraph
       }
     }
 
-    const nodes: LGraphNode[] = []
     for (const nodeId of nodeIdMap.values()) {
       const node = this._nodes_by_id[nodeId]
-      nodes.push(node)
       node._setConcreteSlots()
       node.arrange()
     }
-    const reroutes = [...rerouteIdMap.values()]
-      .map((i) => this.reroutes.get(i))
-      .filter((x): x is Reroute => !!x)
 
-    this.canvasAction((c) => c.selectItems([...nodes, ...reroutes]))
+    this.canvasAction((c) => c.selectItems(toSelect))
     this.afterChange()
   }
 

src/lib/litegraph/src/subgraph/SubgraphNode.ts

@@ -171,7 +171,12 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     subgraphInput: SubgraphInput,
     input: INodeInputSlot & Partial<ISubgraphInput>
   ) {
-    input._listenerController?.abort()
+    if (
+      input._listenerController &&
+      typeof input._listenerController.abort === 'function'
+    ) {
+      input._listenerController.abort()
+    }
     input._listenerController = new AbortController()
     const { signal } = input._listenerController
 
@@ -207,7 +212,12 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
 
   override configure(info: ExportedSubgraphInstance): void {
     for (const input of this.inputs) {
-      input._listenerController?.abort()
+      if (
+        input._listenerController &&
+        typeof input._listenerController.abort === 'function'
+      ) {
+        input._listenerController.abort()
+      }
     }
 
     this.inputs.length = 0
@@ -518,7 +528,12 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     }
 
     for (const input of this.inputs) {
-      input._listenerController?.abort()
+      if (
+        input._listenerController &&
+        typeof input._listenerController.abort === 'function'
+      ) {
+        input._listenerController.abort()
+      }
     }
   }
 }

src/lib/litegraph/test/subgraph/SubgraphConversion.test.ts

@@ -3,6 +3,7 @@ import { assert, describe, expect, it } from 'vitest'
 import {
   ISlotType,
   LGraph,
+  LGraphGroup,
   LGraphNode,
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
@@ -80,7 +81,7 @@ describe('SubgraphConversion', () => {
       expect(graph.nodes.length).toBe(4)
       expect(graph.links.size).toBe(2)
     })
-    it('Should keep reroutes', () => {
+    it('Should keep reroutes and groups', () => {
       const subgraph = createTestSubgraph({
         outputs: [{ name: 'value', type: 'number' }]
       })
@@ -98,6 +99,7 @@ describe('SubgraphConversion', () => {
       const outer = createNode(graph, ['number'])
       const outerLink = subgraphNode.connect(0, outer, 0)
       assert(outerLink)
+      subgraph.add(new LGraphGroup())
 
       subgraph.createReroute([10, 10], innerLink)
       graph.createReroute([10, 10], outerLink)
@@ -105,6 +107,7 @@ describe('SubgraphConversion', () => {
       graph.unpackSubgraph(subgraphNode)
 
       expect(graph.reroutes.size).toBe(2)
+      expect(graph.groups.length).toBe(1)
     })
     it('Should map reroutes onto split outputs', () => {
       const subgraph = createTestSubgraph({

src/locales/ar/commands.json

@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "تجميع العقد المحددة"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "فك التفرع الفرعي المحدد"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "تحويل العقد المحددة إلى عقدة مجموعة"
   },

src/locales/ar/main.json

@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "تبديل شريط تقدم مدير العقد المخصصة",
     "Undo": "تراجع",
     "Ungroup selected group nodes": "فك تجميع عقد المجموعة المحددة",
+    "Unpack the selected Subgraph": "فك تجميع الرسم البياني الفرعي المحدد",
     "Workflow": "سير العمل",
     "Zoom In": "تكبير",
     "Zoom Out": "تصغير"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "تصفح القوالب المثال",
     "downloads": "التنزيلات",
     "helpCenter": "مركز المساعدة",
+    "labels": {
+      "models": "النماذج",
+      "nodes": "العُقَد",
+      "queue": "قائمة الانتظار",
+      "templates": "القوالب",
+      "workflows": "سير العمل"
+    },
     "logout": "تسجيل الخروج",
     "modelLibrary": "مكتبة النماذج",
     "newBlankWorkflow": "إنشاء سير عمل جديد فارغ",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "عرض القائمة المسطحة"
     },
+    "templates": "القوالب",
     "workflowTab": {
       "confirmDelete": "هل أنت متأكد من رغبتك في حذف هذا السير؟",
       "confirmDeleteTitle": "حذف سير العمل؟",

src/locales/en/commands.json

@@ -125,15 +125,15 @@
   "Comfy_Graph_ExitSubgraph": {
     "label": "Exit Subgraph"
   },
-  "Comfy_Graph_UnpackSubgraph": {
-    "label": "Unpack the selected Subgraph"
-  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Fit Group To Contents"
   },
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "Group Selected Nodes"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "Unpack the selected Subgraph"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "Convert selected nodes to group node"
   },

src/locales/en/main.json

@@ -437,6 +437,14 @@
     "queue": "Queue",
     "nodeLibrary": "Node Library",
     "workflows": "Workflows",
+    "templates": "Templates",
+    "labels": {
+      "queue": "Queue",
+      "nodes": "Nodes",
+      "models": "Models",
+      "workflows": "Workflows",
+      "templates": "Templates"
+    },
     "browseTemplates": "Browse example templates",
     "openWorkflow": "Open workflow in local file system",
     "newBlankWorkflow": "Create a new blank workflow",
@@ -979,6 +987,7 @@
     "Exit Subgraph": "Exit Subgraph",
     "Fit Group To Contents": "Fit Group To Contents",
     "Group Selected Nodes": "Group Selected Nodes",
+    "Unpack the selected Subgraph": "Unpack the selected Subgraph",
     "Convert selected nodes to group node": "Convert selected nodes to group node",
     "Manage group nodes": "Manage group nodes",
     "Ungroup selected group nodes": "Ungroup selected group nodes",

src/locales/es/commands.json

@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "Agrupar nodos seleccionados"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "Desempaquetar el subgrafo seleccionado"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "Convertir nodos seleccionados en nodo de grupo"
   },

src/locales/es/main.json

@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "Alternar la Barra de Progreso del Administrador de Nodos Personalizados",
     "Undo": "Deshacer",
     "Ungroup selected group nodes": "Desagrupar nodos de grupo seleccionados",
+    "Unpack the selected Subgraph": "Desempaquetar el Subgrafo seleccionado",
     "Workflow": "Flujo de trabajo",
     "Zoom In": "Acercar",
     "Zoom Out": "Alejar"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "Explorar plantillas de ejemplo",
     "downloads": "Descargas",
     "helpCenter": "Centro de ayuda",
+    "labels": {
+      "models": "Modelos",
+      "nodes": "Nodos",
+      "queue": "Cola",
+      "templates": "Plantillas",
+      "workflows": "Flujos de trabajo"
+    },
     "logout": "Cerrar sesión",
     "modelLibrary": "Biblioteca de modelos",
     "newBlankWorkflow": "Crear un nuevo flujo de trabajo en blanco",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "Mostrar lista plana"
     },
+    "templates": "Plantillas",
     "workflowTab": {
       "confirmDelete": "¿Estás seguro de que quieres eliminar este flujo de trabajo?",
       "confirmDeleteTitle": "¿Eliminar flujo de trabajo?",

src/locales/fr/commands.json

@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "Grouper les nœuds sélectionnés"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "Décompresser le sous-graphe sélectionné"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "Convertir les nœuds sélectionnés en nœud de groupe"
   },

src/locales/fr/main.json

@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "Basculer la barre de progression du gestionnaire de nœuds personnalisés",
     "Undo": "Annuler",
     "Ungroup selected group nodes": "Dégrouper les nœuds de groupe sélectionnés",
+    "Unpack the selected Subgraph": "Décompresser le Subgraph sélectionné",
     "Workflow": "Flux de travail",
     "Zoom In": "Zoom avant",
     "Zoom Out": "Zoom arrière"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "Parcourir les modèles d'exemple",
     "downloads": "Téléchargements",
     "helpCenter": "Centre d'aide",
+    "labels": {
+      "models": "Modèles",
+      "nodes": "Nœuds",
+      "queue": "File d’attente",
+      "templates": "Modèles",
+      "workflows": "Flux de travail"
+    },
     "logout": "Déconnexion",
     "modelLibrary": "Bibliothèque de modèles",
     "newBlankWorkflow": "Créer un nouveau flux de travail vierge",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "Afficher la liste plate"
     },
+    "templates": "Modèles",
     "workflowTab": {
       "confirmDelete": "Êtes-vous sûr de vouloir supprimer ce flux de travail ?",
       "confirmDeleteTitle": "Supprimer le flux de travail ?",

src/locales/ja/commands.json

@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "選択したノードをグループ化"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "選択したサブグラフを展開"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "選択したノードをグループノードに変換"
   },

src/locales/ja/main.json

@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "カスタムノードマネージャーの進行状況バーを切り替え",
     "Undo": "元に戻す",
     "Ungroup selected group nodes": "選択したグループノードのグループ解除",
+    "Unpack the selected Subgraph": "選択したサブグラフを展開",
     "Workflow": "ワークフロー",
     "Zoom In": "ズームイン",
     "Zoom Out": "ズームアウト"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "サンプルテンプレートを表示",
     "downloads": "ダウンロード",
     "helpCenter": "ヘルプセンター",
+    "labels": {
+      "models": "モデル",
+      "nodes": "ノード",
+      "queue": "キュー",
+      "templates": "テンプレート",
+      "workflows": "ワークフロー"
+    },
     "logout": "ログアウト",
     "modelLibrary": "モデルライブラリ",
     "newBlankWorkflow": "新しい空のワークフローを作成",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "フラットリストを表示"
     },
+    "templates": "テンプレート",
     "workflowTab": {
       "confirmDelete": "このワークフローを削除してもよろしいですか？",
       "confirmDeleteTitle": "ワークフローを削除しますか？",

src/locales/ko/commands.json

@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "선택한 노드 그룹화"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "선택한 서브그래프 풀기"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "선택한 노드를 그룹 노드로 변환"
   },

src/locales/ko/main.json

@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "커스텀 노드 매니저 진행률 표시줄 전환",
     "Undo": "실행 취소",
     "Ungroup selected group nodes": "선택한 그룹 노드 그룹 해제",
+    "Unpack the selected Subgraph": "선택한 서브그래프 풀기",
     "Workflow": "워크플로",
     "Zoom In": "확대",
     "Zoom Out": "축소"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "예제 템플릿 탐색",
     "downloads": "다운로드",
     "helpCenter": "도움말 센터",
+    "labels": {
+      "models": "모델",
+      "nodes": "노드",
+      "queue": "대기열",
+      "templates": "템플릿",
+      "workflows": "워크플로우"
+    },
     "logout": "로그아웃",
     "modelLibrary": "모델 라이브러리",
     "newBlankWorkflow": "새 빈 워크플로 만들기",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "평면 목록 표시"
     },
+    "templates": "템플릿",
     "workflowTab": {
       "confirmDelete": "정말로 이 워크플로를 삭제하시겠습니까?",
       "confirmDeleteTitle": "워크플로 삭제",

src/locales/ru/commands.json

@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "Группировать выбранные ноды"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "Распаковать выбранный подграф"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "Преобразовать выбранные ноды в групповую ноду"
   },

src/locales/ru/main.json

@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "Переключить индикатор выполнения менеджера пользовательских узлов",
     "Undo": "Отменить",
     "Ungroup selected group nodes": "Разгруппировать выбранные групповые ноды",
+    "Unpack the selected Subgraph": "Распаковать выбранный подграф",
     "Workflow": "Рабочий процесс",
     "Zoom In": "Увеличить",
     "Zoom Out": "Уменьшить"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "Просмотреть примеры шаблонов",
     "downloads": "Загрузки",
     "helpCenter": "Центр поддержки",
+    "labels": {
+      "models": "Модели",
+      "nodes": "Узлы",
+      "queue": "Очередь",
+      "templates": "Шаблоны",
+      "workflows": "Воркфлоу"
+    },
     "logout": "Выйти",
     "modelLibrary": "Библиотека моделей",
     "newBlankWorkflow": "Создайте новый пустой рабочий процесс",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "Показать плоский список"
     },
+    "templates": "Шаблоны",
     "workflowTab": {
       "confirmDelete": "Вы уверены, что хотите удалить этот рабочий процесс?",
       "confirmDeleteTitle": "Удалить рабочий процесс?",

src/locales/zh-TW/commands.json

@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "群組所選節點"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "解開所選子圖"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "將選取的節點轉換為群組節點"
   },

src/locales/zh-TW/main.json

@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "切換自訂節點管理器進度條",
     "Undo": "復原",
     "Ungroup selected group nodes": "取消群組選取的群組節點",
+    "Unpack the selected Subgraph": "解包所選子圖",
     "Workflow": "工作流程",
     "Zoom In": "放大",
     "Zoom Out": "縮小"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "瀏覽範例模板",
     "downloads": "下載",
     "helpCenter": "說明中心",
+    "labels": {
+      "models": "模型",
+      "nodes": "節點",
+      "queue": "佇列",
+      "templates": "範本",
+      "workflows": "工作流程"
+    },
     "logout": "登出",
     "modelLibrary": "模型庫",
     "newBlankWorkflow": "建立新的空白工作流程",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "顯示平面清單"
     },
+    "templates": "範本",
     "workflowTab": {
       "confirmDelete": "您確定要刪除這個工作流程嗎？",
       "confirmDeleteTitle": "刪除工作流程？",

src/locales/zh/commands.json

@@ -131,6 +131,9 @@
   "Comfy_Graph_GroupSelectedNodes": {
     "label": "添加框到选中节点"
   },
+  "Comfy_Graph_UnpackSubgraph": {
+    "label": "解開所選子圖"
+  },
   "Comfy_GroupNode_ConvertSelectedNodesToGroupNode": {
     "label": "将选中节点转换为组节点"
   },

src/locales/zh/main.json

@@ -849,6 +849,7 @@
     "Toggle the Custom Nodes Manager Progress Bar": "切换自定义节点管理器进度条",
     "Undo": "撤销",
     "Ungroup selected group nodes": "解散选中组节点",
+    "Unpack the selected Subgraph": "解開所選子圖",
     "Workflow": "工作流",
     "Zoom In": "放大画面",
     "Zoom Out": "缩小画面"
@@ -1196,6 +1197,13 @@
     "browseTemplates": "浏览示例模板",
     "downloads": "下载",
     "helpCenter": "帮助中心",
+    "labels": {
+      "models": "模型",
+      "nodes": "節點",
+      "queue": "佇列",
+      "templates": "範本",
+      "workflows": "工作流程"
+    },
     "logout": "登出",
     "modelLibrary": "模型库",
     "newBlankWorkflow": "创建空白工作流",
@@ -1233,6 +1241,7 @@
       },
       "showFlatList": "平铺结果"
     },
+    "templates": "範本",
     "workflowTab": {
       "confirmDelete": "您确定要删除此工作流吗？",
       "confirmDeleteTitle": "删除工作流？",

src/stores/workspace/sidebarTabStore.ts

@@ -40,7 +40,7 @@ export const useSidebarTabStore = defineStore('sidebarTab', () => {
 
     useCommandStore().registerCommand({
       id: `Workspace.ToggleSidebarTab.${tab.id}`,
-      icon: tab.icon,
+      icon: typeof tab.icon === 'string' ? tab.icon : undefined,
       label: labelFunction,
       tooltip: tooltipFunction,
       versionAdded: '1.3.9',

src/types/extensionTypes.ts

@@ -6,9 +6,10 @@ import type { ComfyCommand } from '@/stores/commandStore'
 export interface BaseSidebarTabExtension {
   id: string
   title: string
-  icon?: string
+  icon?: string | Component
   iconBadge?: string | (() => string | null)
   tooltip?: string
+  label?: string
 }
 
 export interface BaseBottomPanelExtension {

src/vite-env.d.ts

@@ -1,5 +1,17 @@
 /// <reference types="vite/client" />
 
+declare module 'virtual:icons/*' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent
+  export default component
+}
+
+declare module '~icons/*' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent
+  export default component
+}
+
 declare global {
   interface Window {
     __COMFYUI_FRONTEND_VERSION__: string

tests-ui/tests/composables/node/useNodePricing.test.ts

@@ -114,6 +114,16 @@ describe('useNodePricing', () => {
       expect(price).toBe('$1.40/Run')
     })
 
+    it('should return high price for kling-v2-1-master model', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingImage2VideoNode', [
+        { name: 'model_name', value: 'v2-1-master' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.40/Run')
+    })
+
     it('should return standard price for kling-v1-6 model', () => {
       const { getNodeDisplayPrice } = useNodePricing()
       const node = createMockNode('KlingImage2VideoNode', [

vitest.config.ts

@@ -1,8 +1,18 @@
 import vue from '@vitejs/plugin-vue'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import Icons from 'unplugin-icons/vite'
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    Icons({
+      compiler: 'vue3',
+      customCollections: {
+        comfy: FileSystemIconLoader('src/assets/icons/custom')
+      }
+    })
+  ],
   test: {
     globals: true,
     environment: 'happy-dom',