[fix] Prevent error when deleting nodes with missing definitions

Adds defensive array access checks in widgetInputs.ts to handle cases where
customSpec is not a valid array when merging widget configurations. This
resolves the 'Cannot read properties of null (reading "1")' error that
occurs when attempting to delete nodes whose definitions have been removed.

Fixes #8338

.cursorrules

@@ -1,26 +1,25 @@
-// Vue 3 Composition API .cursorrules
+# Vue 3 Composition API Project Rules
 
-// Vue 3 Composition API best practices
-const vue3CompositionApiBestPractices = [
-  "Use setup() function for component logic",
-  "Utilize ref and reactive for reactive state",
-  "Implement computed properties with computed()",
-  "Use watch and watchEffect for side effects",
-  "Implement lifecycle hooks with onMounted, onUpdated, etc.",
-  "Utilize provide/inject for dependency injection",
-  "Use vue 3.5 style of default prop declaration. Example:
+## Vue 3 Composition API Best Practices
+- Use setup() function for component logic
+- Utilize ref and reactive for reactive state
+- Implement computed properties with computed()
+- Use watch and watchEffect for side effects
+- Implement lifecycle hooks with onMounted, onUpdated, etc.
+- Utilize provide/inject for dependency injection
+- Use vue 3.5 style of default prop declaration. Example:
 
+```typescript
 const { nodes, showTotal = true } = defineProps<{
   nodes: ApiNodeCost[]
   showTotal?: boolean
 }>()
+```
 
-",
-  "Organize vue component in <template> <script> <style> order",
-]
+- Organize vue component in <template> <script> <style> order
 
-// Folder structure
-const folderStructure = `
+## Project Structure
+```
 src/
   components/
   constants/
@@ -30,16 +29,25 @@ src/
   services/
   App.vue
   main.ts
-`;
+```
 
-// Tailwind CSS best practices
-const tailwindCssBestPractices = [
-  "Use Tailwind CSS for styling",
-  "Implement responsive design with Tailwind CSS",
-]
+## Styling Guidelines
+- Use Tailwind CSS for styling
+- Implement responsive design with Tailwind CSS
 
-// Additional instructions
-const additionalInstructions = `
+## PrimeVue Component Guidelines
+DO NOT use deprecated PrimeVue components. Use these replacements instead:
+- Dropdown → Use Select (import from 'primevue/select')
+- OverlayPanel → Use Popover (import from 'primevue/popover')
+- Calendar → Use DatePicker (import from 'primevue/datepicker')
+- InputSwitch → Use ToggleSwitch (import from 'primevue/toggleswitch')
+- Sidebar → Use Drawer (import from 'primevue/drawer')
+- Chips → Use AutoComplete with multiple enabled and typeahead disabled
+- TabMenu → Use Tabs without panels
+- Steps → Use Stepper without panels
+- InlineMessage → Use Message component
+
+## Development Guidelines
 1. Leverage VueUse functions for performance-enhancing styles
 2. Use lodash for utility functions
 3. Use TypeScript for type safety
@@ -49,6 +57,5 @@ const additionalInstructions = `
 7. Implement proper error handling
 8. Follow Vue 3 style guide and naming conventions
 9. Use Vite for fast development and building
-10. Use vue-i18n in composition API for any string literals. Place new translation
-entries in src/locales/en/main.json.
-`;
+10. Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
+11. Never use deprecated PrimeVue components listed above

.env_example

@@ -29,3 +29,7 @@ DISABLE_TEMPLATES_PROXY=false
 # If playwright tests are being run via vite dev server, Vue plugins will
 # invalidate screenshots.  When `true`, vite plugins will not be loaded.
 DISABLE_VUE_PLUGINS=false
+
+# Algolia credentials required for developing with the new custom node manager.
+ALGOLIA_APP_ID=4E0RO38HS8
+ALGOLIA_API_KEY=684d998c36b67a9a9fce8fc2d8860579

.github/workflows/dev-release.yaml

@@ -66,7 +66,7 @@ jobs:
         env:
           COMFYUI_FRONTEND_VERSION: ${{ format('{0}.dev{1}', needs.build.outputs.version, inputs.devVersion) }}
       - name: Publish pypi package
-        uses: pypa/gh-action-pypi-publish@release/v1
+        uses: pypa/gh-action-pypi-publish@76f52bc884231f62b9a034ebfe128415bbaabdfc
         with:
           password: ${{ secrets.PYPI_TOKEN }}
           packages-dir: comfyui_frontend_package/dist

.github/workflows/i18n-custom-nodes.yaml

@@ -136,7 +136,7 @@ jobs:
         git commit -m "Update locales"
 
     - name: Install SSH key For PUSH
-      uses: shimataro/ssh-key-action@v2
+      uses: shimataro/ssh-key-action@d4fffb50872869abe2d9a9098a6d9c5aa7d16be4
       with:
         # PR private key from action server
         key: ${{ secrets.PR_SSH_PRIVATE_KEY }}

.github/workflows/i18n-node-defs.yaml

@@ -33,7 +33,7 @@ jobs:
         OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
       working-directory: ComfyUI_frontend
     - name: Create Pull Request
-      uses: peter-evans/create-pull-request@v7
+      uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
       with:
         token: ${{ secrets.PR_GH_TOKEN }}
         commit-message: "Update locales for node definitions"

.github/workflows/release.yaml

@@ -54,7 +54,7 @@ jobs:
           name: dist-files
       - name: Create release
         id: create_release
-        uses: softprops/action-gh-release@v2
+        uses: softprops/action-gh-release@da05d552573ad5aba039eaac05058a918a7bf631
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
@@ -93,7 +93,7 @@ jobs:
         env:
           COMFYUI_FRONTEND_VERSION: ${{ needs.build.outputs.version }}
       - name: Publish pypi package
-        uses: pypa/gh-action-pypi-publish@release/v1
+        uses: pypa/gh-action-pypi-publish@76f52bc884231f62b9a034ebfe128415bbaabdfc
         with:
           password: ${{ secrets.PYPI_TOKEN }}
           packages-dir: comfyui_frontend_package/dist

.github/workflows/update-electron-types.yaml

@@ -30,7 +30,7 @@ jobs:
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update electron-types to ${{ steps.get-version.outputs.NEW_VERSION }}'

.github/workflows/update-litegraph.yaml

@@ -29,7 +29,7 @@ jobs:
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update litegraph to ${{ steps.get-version.outputs.NEW_VERSION }}'

.github/workflows/update-manager-types.yaml

@@ -0,0 +1,92 @@
+name: Update ComfyUI-Manager API Types
+
+on:
+  # Manual trigger
+  workflow_dispatch:
+
+jobs:
+  update-manager-types:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Checkout ComfyUI-Manager repository
+        uses: actions/checkout@v4
+        with:
+          repository: Comfy-Org/ComfyUI-Manager
+          path: ComfyUI-Manager
+          clean: true
+
+      - name: Get Manager commit information
+        id: manager-info
+        run: |
+          cd ComfyUI-Manager
+          MANAGER_COMMIT=$(git rev-parse --short HEAD)
+          echo "commit=${MANAGER_COMMIT}" >> $GITHUB_OUTPUT
+          cd ..
+
+      - name: Generate Manager API types
+        run: |
+          echo "Generating TypeScript types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}..."
+          npx openapi-typescript ./ComfyUI-Manager/openapi.yaml --output ./src/types/generatedManagerTypes.ts
+
+      - name: Validate generated types
+        run: |
+          if [ ! -f ./src/types/generatedManagerTypes.ts ]; then
+            echo "Error: Types file was not generated."
+            exit 1
+          fi
+
+          # Check if file is not empty
+          if [ ! -s ./src/types/generatedManagerTypes.ts ]; then
+            echo "Error: Generated types file is empty."
+            exit 1
+          fi
+
+      - name: Check for changes
+        id: check-changes
+        run: |
+          if [[ -z $(git status --porcelain ./src/types/generatedManagerTypes.ts) ]]; then
+            echo "No changes to ComfyUI-Manager API types detected."
+            echo "changed=false" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Changes detected in ComfyUI-Manager API types."
+            echo "changed=true" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Create Pull Request
+        if: steps.check-changes.outputs.changed == 'true'
+        uses: peter-evans/create-pull-request@v7
+        with:
+          token: ${{ secrets.PR_GH_TOKEN }}
+          commit-message: '[chore] Update ComfyUI-Manager API types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}'
+          title: '[chore] Update ComfyUI-Manager API types from ComfyUI-Manager@${{ steps.manager-info.outputs.commit }}'
+          body: |
+            ## Automated API Type Update
+
+            This PR updates the ComfyUI-Manager API types from the latest ComfyUI-Manager OpenAPI specification.
+
+            - Manager commit: ${{ steps.manager-info.outputs.commit }}
+            - Generated on: ${{ github.event.repository.updated_at }}
+
+            These types are automatically generated using openapi-typescript.
+          branch: update-manager-types-${{ steps.manager-info.outputs.commit }}
+          base: main
+          labels: Manager
+          delete-branch: true
+          add-paths: |
+            src/types/generatedManagerTypes.ts

.github/workflows/update-registry-types.yaml

@@ -75,7 +75,7 @@ jobs:
 
       - name: Create Pull Request
         if: steps.check-changes.outputs.changed == 'true'
-        uses: peter-evans/create-pull-request@v7
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[chore] Update Comfy Registry API types from comfy-api@${{ steps.api-info.outputs.commit }}'

.github/workflows/version-bump.yaml

@@ -38,7 +38,7 @@ jobs:
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v7
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
         with:
           token: ${{ secrets.PR_GH_TOKEN }}
           commit-message: '[release] Bump version to ${{ steps.bump-version.outputs.NEW_VERSION }}'

CLAUDE.md

@@ -36,3 +36,13 @@
 - Use Vite for fast development and building
 - Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json.
 - Avoid using `@ts-expect-error` to work around type issues. We needed to employ it to migrate to TypeScript, but it should not be viewed as an accepted practice or standard.
+- DO NOT use deprecated PrimeVue components. Use these replacements instead:
+  * `Dropdown` → Use `Select` (import from 'primevue/select')
+  * `OverlayPanel` → Use `Popover` (import from 'primevue/popover') 
+  * `Calendar` → Use `DatePicker` (import from 'primevue/datepicker')
+  * `InputSwitch` → Use `ToggleSwitch` (import from 'primevue/toggleswitch')
+  * `Sidebar` → Use `Drawer` (import from 'primevue/drawer')
+  * `Chips` → Use `AutoComplete` with multiple enabled and typeahead disabled
+  * `TabMenu` → Use `Tabs` without panels
+  * `Steps` → Use `Stepper` without panels
+  * `InlineMessage` → Use `Message` component

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.22.0-sub.4",
+  "version": "1.22.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@comfyorg/comfyui-frontend",
-      "version": "1.22.0-sub.4",
+      "version": "1.22.0",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.43",
-        "@comfyorg/litegraph": "^0.16.0-sub.10",
+        "@comfyorg/litegraph": "^0.15.15",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -791,9 +791,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.16.0-sub.10",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.16.0-sub.10.tgz",
-      "integrity": "sha512-RjgFWCPa49ppgby8LacqZ91U8OcvsP20qGB9WkHYqDhyr1jOmjognM5KsZNINuKPyc0GzGeyQT8Wj2z8Pw/dPg==",
+      "version": "0.15.15",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.15.15.tgz",
+      "integrity": "sha512-otOKgTxNPV6gEa6PW1fHGMMF8twjnZkP0vWQhGsRISK4vN8tPfX8O9sC9Hnq3nV8axaMv4/Ff49+7mMVcFEKeA==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.22.0-sub.4",
+  "version": "1.22.0",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -75,7 +75,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.43",
-    "@comfyorg/litegraph": "^0.16.0-sub.10",
+    "@comfyorg/litegraph": "^0.15.15",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="workflowStore.isSubgraphActive" class="p-2 subgraph-breadcrumb">
+  <div
+    v-if="workflowStore.isSubgraphActive"
+    class="fixed top-[var(--comfy-topbar-height)] left-[var(--sidebar-width)] p-2 subgraph-breadcrumb"
+  >
     <Breadcrumb
       class="bg-transparent"
       :home="home"
@@ -11,30 +14,28 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, whenever } from '@vueuse/core'
 import Breadcrumb from 'primevue/breadcrumb'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import { computed } from 'vue'
 
+import { useWorkflowService } from '@/services/workflowService'
 import { useCanvasStore } from '@/stores/graphStore'
-import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
 
+const workflowService = useWorkflowService()
 const workflowStore = useWorkflowStore()
-const navigationStore = useSubgraphNavigationStore()
 
 const workflowName = computed(() => workflowStore.activeWorkflow?.filename)
 
 const items = computed(() => {
-  if (!navigationStore.navigationStack.length) return []
+  if (!workflowStore.subgraphNamePath.length) return []
 
-  return navigationStore.navigationStack.map<MenuItem>((subgraph) => ({
-    label: subgraph.name,
-    command: () => {
-      const canvas = useCanvasStore().getCanvas()
-      if (!canvas.graph) throw new TypeError('Canvas has no graph')
-
-      canvas.setGraph(subgraph)
+  return workflowStore.subgraphNamePath.map<MenuItem>((name) => ({
+    label: name,
+    command: async () => {
+      const workflow = workflowStore.getWorkflowByPath(name)
+      if (workflow) await workflowService.openWorkflow(workflow)
     }
   }))
 })
@@ -42,7 +43,7 @@ const items = computed(() => {
 const home = computed(() => ({
   label: workflowName.value,
   icon: 'pi pi-home',
-  command: () => {
+  command: async () => {
     const canvas = useCanvasStore().getCanvas()
     if (!canvas.graph) throw new TypeError('Canvas has no graph')
 
@@ -54,17 +55,14 @@ const handleItemClick = (event: MenuItemCommandEvent) => {
   event.item.command?.(event)
 }
 
-// Escape exits from the current subgraph.
-useEventListener(document, 'keydown', (event) => {
-  if (event.key === 'Escape') {
-    const canvas = useCanvasStore().getCanvas()
-    if (!canvas.graph) throw new TypeError('Canvas has no graph')
-
-    canvas.setGraph(
-      navigationStore.navigationStack.at(-2) ?? canvas.graph.rootGraph
-    )
+whenever(
+  () => useCanvasStore().canvas,
+  (canvas) => {
+    useEventListener(canvas.canvas, 'litegraph:set-graph', () => {
+      useWorkflowStore().updateActiveGraph()
+    })
   }
-})
+)
 </script>
 
 <style>

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -408,19 +408,30 @@ const handleGridContainerClick = (event: MouseEvent) => {
 
 const hasMultipleSelections = computed(() => selectedNodePacks.value.length > 1)
 
+// Track the last pack ID for which we've fetched full registry data
+const lastFetchedPackId = ref<string | null>(null)
+
+// Whenever a single pack is selected, fetch its full info once
 whenever(selectedNodePack, async () => {
   // Cancel any in-flight requests from previously selected node pack
   getPackById.cancel()
-
-  if (!selectedNodePack.value?.id) return
-
   // If only a single node pack is selected, fetch full node pack info from registry
+  const pack = selectedNodePack.value
+  if (!pack?.id) return
   if (hasMultipleSelections.value) return
-  const data = await getPackById.call(selectedNodePack.value.id)
-
-  if (data?.id === selectedNodePack.value?.id) {
-    // If selected node hasn't changed since request, merge registry & Algolia data
-    selectedNodePacks.value = [merge(selectedNodePack.value, data)]
+  // Only fetch if we haven't already for this pack
+  if (lastFetchedPackId.value === pack.id) return
+  const data = await getPackById.call(pack.id)
+  // If selected node hasn't changed since request, merge registry & Algolia data
+  if (data?.id === pack.id) {
+    lastFetchedPackId.value = pack.id
+    const mergedPack = merge({}, pack, data)
+    selectedNodePacks.value = [mergedPack]
+    // Replace pack in displayPacks so that children receive a fresh prop reference
+    const idx = displayPacks.value.findIndex((p) => p.id === mergedPack.id)
+    if (idx !== -1) {
+      displayPacks.value.splice(idx, 1, mergedPack)
+    }
   }
 })
 

src/components/dialog/content/manager/packBanner/PackBanner.vue

@@ -0,0 +1,41 @@
+<template>
+  <img
+    :src="isImageError ? DEFAULT_BANNER : imgSrc"
+    :alt="nodePack.name + ' banner'"
+    class="object-cover"
+    :style="{ width: cssWidth, height: cssHeight }"
+    @error="isImageError = true"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { components } from '@/types/comfyRegistryTypes'
+
+const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
+
+const {
+  nodePack,
+  width = '100%',
+  height = '12rem'
+} = defineProps<{
+  nodePack: components['schemas']['Node'] & { banner?: string } // Temporary measure until banner is in backend
+  width?: string
+  height?: string
+}>()
+
+const isImageError = ref(false)
+const shouldShowFallback = computed(
+  () => !nodePack.banner || nodePack.banner.trim() === '' || isImageError.value
+)
+const imgSrc = computed(() =>
+  shouldShowFallback.value ? DEFAULT_BANNER : nodePack.banner
+)
+
+const convertToCssValue = (value: string | number) =>
+  typeof value === 'number' ? `${value}rem` : value
+
+const cssWidth = computed(() => convertToCssValue(width))
+const cssHeight = computed(() => convertToCssValue(height))
+</script>

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -7,19 +7,15 @@
     }"
     :pt="{
       body: { class: 'p-0 flex flex-col w-full h-full rounded-2xl gap-0' },
-      content: { class: 'flex-1 flex flex-col rounded-2xl' },
-      title: {
-        class:
-          'self-stretch w-full px-4 py-3 inline-flex justify-start items-center gap-6'
-      },
+      content: { class: 'flex-1 flex flex-col rounded-2xl min-h-0' },
+      title: { class: 'w-full h-full rounded-t-lg cursor-pointer' },
       footer: { class: 'p-0 m-0' }
     }"
   >
     <template #title>
-      <PackCardHeader :node-pack="nodePack" />
+      <PackBanner :node-pack="nodePack" />
     </template>
     <template #content>
-      <ContentDivider />
       <template v-if="isInstalling">
         <div
           class="self-stretch inline-flex flex-col justify-center items-center gap-2 h-full"
@@ -34,46 +30,63 @@
       </template>
       <template v-else>
         <div
-          class="self-stretch px-4 py-3 inline-flex justify-start items-start cursor-pointer"
+          class="self-stretch inline-flex flex-col justify-start items-start"
         >
-          <PackIcon :node-pack="nodePack" />
           <div
-            class="px-4 inline-flex flex-col justify-start items-start overflow-hidden"
+            class="px-4 py-3 inline-flex justify-start items-start cursor-pointer w-full"
           >
-            <span
-              class="text-sm font-bold truncate overflow-hidden text-ellipsis"
-            >
-              {{ nodePack.name }}
-            </span>
             <div
-              class="self-stretch inline-flex justify-center items-center gap-2.5"
+              class="inline-flex flex-col justify-start items-start overflow-hidden gap-y-3 w-full"
             >
+              <span
+                class="text-base font-bold truncate overflow-hidden text-ellipsis"
+              >
+                {{ nodePack.name }}
+              </span>
               <p
                 v-if="nodePack.description"
-                class="flex-1 justify-start text-muted text-sm font-medium leading-3 break-words overflow-hidden min-h-12 line-clamp-3"
+                class="flex-1 justify-start text-muted text-sm font-medium break-words overflow-hidden min-h-12 line-clamp-3 my-0 leading-5"
               >
                 {{ nodePack.description }}
               </p>
-            </div>
-            <div
-              class="self-stretch inline-flex justify-start items-center gap-2"
-            >
-              <div
-                v-if="nodesCount"
-                class="px-2 py-1 flex justify-center text-sm items-center gap-1"
-              >
-                <div class="text-center justify-center font-medium leading-3">
-                  {{ nodesCount }} {{ $t('g.nodes') }}
-                </div>
-              </div>
-              <div class="px-2 py-1 flex justify-center items-center gap-1">
+              <div class="flex flex-col gap-y-2">
                 <div
-                  v-if="isUpdateAvailable"
-                  class="w-4 h-4 relative overflow-hidden"
+                  class="self-stretch inline-flex justify-start items-center gap-1"
                 >
-                  <i class="pi pi-arrow-circle-up text-blue-600" />
+                  <div
+                    v-if="nodesCount"
+                    class="pr-2 py-1 flex justify-center text-sm items-center gap-1"
+                  >
+                    <div
+                      class="text-center justify-center font-medium leading-3"
+                    >
+                      {{ nodesCount }} {{ $t('g.nodes') }}
+                    </div>
+                  </div>
+                  <div class="px-2 py-1 flex justify-center items-center gap-1">
+                    <div
+                      v-if="isUpdateAvailable"
+                      class="w-4 h-4 relative overflow-hidden"
+                    >
+                      <i class="pi pi-arrow-circle-up text-blue-600" />
+                    </div>
+                    <PackVersionBadge :node-pack="nodePack" />
+                  </div>
+                  <div
+                    v-if="formattedLatestVersionDate"
+                    class="px-2 py-1 flex justify-center items-center gap-1 text-xs text-muted font-medium"
+                  >
+                    {{ formattedLatestVersionDate }}
+                  </div>
+                </div>
+                <div class="flex">
+                  <span
+                    v-if="publisherName"
+                    class="text-xs text-muted font-medium leading-3 max-w-40 truncate"
+                  >
+                    {{ publisherName }}
+                  </span>
                 </div>
-                <PackVersionBadge :node-pack="nodePack" />
               </div>
             </div>
           </div>
@@ -92,11 +105,12 @@ import { whenever } from '@vueuse/core'
 import Card from 'primevue/card'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, provide, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import PackVersionBadge from '@/components/dialog/content/manager/PackVersionBadge.vue'
+import PackBanner from '@/components/dialog/content/manager/packBanner/PackBanner.vue'
 import PackCardFooter from '@/components/dialog/content/manager/packCard/PackCardFooter.vue'
-import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
 import { usePackUpdateStatus } from '@/composables/nodePack/usePackUpdateStatus'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { IsInstallingKey } from '@/types/comfyManagerTypes'
@@ -107,6 +121,8 @@ const { nodePack, isSelected = false } = defineProps<{
   isSelected?: boolean
 }>()
 
+const { d } = useI18n()
+
 const isInstalling = ref(false)
 provide(IsInstallingKey, isInstalling)
 
@@ -122,4 +138,19 @@ whenever(isInstalled, () => (isInstalling.value = false))
 
 // TODO: remove type assertion once comfy_nodes is added to node (pack) info type in backend
 const nodesCount = computed(() => (nodePack as any).comfy_nodes?.length)
+
+const publisherName = computed(() => {
+  if (!nodePack) return null
+
+  const { publisher, author } = nodePack
+  return publisher?.name ?? publisher?.id ?? author
+})
+
+const formattedLatestVersionDate = computed(() => {
+  if (!nodePack.latest_version?.createdAt) return null
+
+  return d(new Date(nodePack.latest_version.createdAt), {
+    dateStyle: 'medium'
+  })
+})
 </script>

src/components/dialog/content/manager/packCard/PackCardFooter.vue

@@ -1,39 +1,29 @@
 <template>
   <div
-    class="flex justify-between px-5 py-4 text-xs text-muted font-medium leading-3"
+    class="flex justify-between items-center px-4 py-2 text-xs text-muted font-medium leading-3"
   >
-    <div class="flex items-center gap-2 cursor-pointer">
-      <span v-if="publisherName" class="max-w-40 truncate">
-        {{ publisherName }}
-      </span>
-    </div>
-    <div
-      v-if="nodePack.latest_version?.createdAt"
-      class="flex items-center gap-2 truncate"
-    >
-      {{ $t('g.updated') }}
-      {{
-        $d(new Date(nodePack.latest_version.createdAt), {
-          dateStyle: 'medium'
-        })
-      }}
+    <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
+      <i class="pi pi-download text-muted"></i>
+      <span>{{ formattedDownloads }}</span>
     </div>
+    <PackInstallButton :node-packs="[nodePack]" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
+import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
 import type { components } from '@/types/comfyRegistryTypes'
 
 const { nodePack } = defineProps<{
   nodePack: components['schemas']['Node']
 }>()
 
-const publisherName = computed(() => {
-  if (!nodePack) return null
+const { n } = useI18n()
 
-  const { publisher, author } = nodePack
-  return publisher?.name ?? publisher?.id ?? author
-})
+const formattedDownloads = computed(() =>
+  nodePack.downloads ? n(nodePack.downloads) : ''
+)
 </script>

src/components/graph/DomWidgets.vue

@@ -21,14 +21,16 @@ import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
-const widgetStates = computed(() => domWidgetStore.activeWidgetStates)
+const widgetStates = computed(() =>
+  Array.from(domWidgetStore.widgetStates.values())
+)
 
 const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
 
   const lowQuality = lgCanvas.low_quality
-  for (const widgetState of widgetStates.value) {
+  for (const widgetState of domWidgetStore.widgetStates.values()) {
     const widget = widgetState.widget
     const node = widget.node as LGraphNode
 

src/components/graph/GraphCanvas.vue

@@ -12,12 +12,10 @@
       <BottomPanel />
     </template>
     <template #graph-canvas-panel>
-      <div class="absolute top-0 left-0 w-auto max-w-full pointer-events-auto">
-        <SecondRowWorkflowTabs
-          v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
-        />
-        <SubgraphBreadcrumb />
-      </div>
+      <SecondRowWorkflowTabs
+        v-if="workflowTabsPosition === 'Topbar (2nd-row)'"
+        class="pointer-events-auto"
+      />
       <GraphCanvasMenu v-if="canvasMenuEnabled" class="pointer-events-auto" />
     </template>
   </LiteGraphCanvasSplitterOverlay>
@@ -41,11 +39,12 @@
     </SelectionOverlay>
     <DomWidgets />
   </template>
+  <SubgraphBreadcrumb />
 </template>
 
 <script setup lang="ts">
 import type { LGraphNode } from '@comfyorg/litegraph'
-import { useEventListener, whenever } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -85,7 +84,6 @@ import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
@@ -194,10 +192,10 @@ watch(
 // Update the progress of the executing node
 watch(
   () =>
-    [
-      executionStore.executingNodeId,
-      executionStore.executingNodeProgress
-    ] satisfies [NodeId | null, number | null],
+    [executionStore.executingNodeId, executionStore.executingNodeProgress] as [
+      NodeId | null,
+      number | null
+    ],
   ([executingNodeId, executingNodeProgress]) => {
     for (const node of comfyApp.graph.nodes) {
       if (node.id == executingNodeId) {
@@ -336,16 +334,6 @@ onMounted(async () => {
     }
   )
 
-  whenever(
-    () => useCanvasStore().canvas,
-    (canvas) => {
-      useEventListener(canvas.canvas, 'litegraph:set-graph', () => {
-        useWorkflowStore().updateActiveGraph()
-      })
-    },
-    { immediate: true }
-  )
-
   emit('ready')
 })
 </script>

src/components/graph/SelectionToolbox.vue

@@ -11,7 +11,6 @@
     <BypassButton />
     <PinButton />
     <MaskEditorButton />
-    <ConvertToSubgraphButton />
     <DeleteButton />
     <RefreshButton />
     <ExtensionCommandButton
@@ -29,7 +28,6 @@ import { computed } from 'vue'
 
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
-import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/ConvertToSubgraphButton.vue'
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -1,34 +0,0 @@
-<template>
-  <Button
-    v-show="isVisible"
-    v-tooltip.top="{
-      value: t('commands.Comfy_Graph_ConvertToSubgraph.label'),
-      showDelay: 1000
-    }"
-    severity="secondary"
-    text
-    icon="pi pi-box"
-    @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
-
-const { t } = useI18n()
-const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-
-const isVisible = computed(() => {
-  return (
-    canvasStore.groupSelected ||
-    canvasStore.rerouteSelected ||
-    canvasStore.nodeSelected
-  )
-})
-</script>

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -1,6 +1,5 @@
 <template>
   <Button
-    v-show="isDeletable"
     v-tooltip.top="{
       value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
@@ -14,17 +13,10 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCommandStore } from '@/stores/commandStore'
-import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-const canvasStore = useCanvasStore()
-
-const isDeletable = computed(() =>
-  canvasStore.selectedItems.some((x) => x.removable !== false)
-)
 </script>

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -25,9 +25,8 @@ const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 
 const isSingleImageNode = computed(() => {
-  const { selectedItems } = canvasStore
-  const item = selectedItems[0]
-  return selectedItems.length === 1 && isLGraphNode(item) && isImageNode(item)
+  const nodes = canvasStore.selectedItems.filter(isLGraphNode)
+  return nodes.length === 1 && nodes.some(isImageNode)
 })
 
 const openMaskEditor = () => {

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -95,14 +95,12 @@ const addNode = (nodeDef: ComfyNodeDefImpl) => {
     return
   }
 
+  disconnectOnReset = false
   const node = litegraphService.addNodeOnGraph(nodeDef, {
     pos: getNewNodeLocation()
   })
 
-  if (disconnectOnReset) {
-    canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
-  }
-  disconnectOnReset = false
+  canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
 
   // Notify changeTracker - new step should be added
   useWorkflowStore().activeWorkflow?.changeTracker?.checkState()

src/components/templates/TemplateWorkflowCard.spec.ts

@@ -46,10 +46,68 @@ vi.mock('@vueuse/core', () => ({
 vi.mock('@/scripts/api', () => ({
   api: {
     fileURL: (path: string) => `/fileURL${path}`,
-    apiURL: (path: string) => `/apiURL${path}`
+    apiURL: (path: string) => `/apiURL${path}`,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn()
   }
 }))
 
+vi.mock('@/scripts/app', () => ({
+  app: {
+    loadGraphData: vi.fn()
+  }
+}))
+
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: () => ({
+    closeDialog: vi.fn()
+  })
+}))
+
+vi.mock('@/stores/workflowTemplatesStore', () => ({
+  useWorkflowTemplatesStore: () => ({
+    isLoaded: true,
+    loadWorkflowTemplates: vi.fn().mockResolvedValue(true),
+    groupedTemplates: []
+  })
+}))
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key: string, fallback: string) => fallback || key
+  })
+}))
+
+vi.mock('@/composables/useTemplateWorkflows', () => ({
+  useTemplateWorkflows: () => ({
+    getTemplateThumbnailUrl: (
+      template: TemplateInfo,
+      sourceModule: string,
+      index = ''
+    ) => {
+      const basePath =
+        sourceModule === 'default'
+          ? `/fileURL/templates/${template.name}`
+          : `/apiURL/workflow_templates/${sourceModule}/${template.name}`
+      const indexSuffix = sourceModule === 'default' && index ? `-${index}` : ''
+      return `${basePath}${indexSuffix}.${template.mediaSubtype}`
+    },
+    getTemplateTitle: (template: TemplateInfo, sourceModule: string) => {
+      const fallback =
+        template.title ?? template.name ?? `${sourceModule} Template`
+      return sourceModule === 'default'
+        ? template.localizedTitle ?? fallback
+        : fallback
+    },
+    getTemplateDescription: (template: TemplateInfo, sourceModule: string) => {
+      return sourceModule === 'default'
+        ? template.localizedDescription ?? ''
+        : template.description?.replace(/[-_]/g, ' ').trim() ?? ''
+    },
+    loadWorkflowTemplate: vi.fn()
+  })
+}))
+
 describe('TemplateWorkflowCard', () => {
   const createTemplate = (overrides = {}): TemplateInfo => ({
     name: 'test-template',

src/components/templates/TemplateWorkflowCard.vue

@@ -86,7 +86,7 @@ import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue
 import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
 import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
 import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
-import { api } from '@/scripts/api'
+import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
 import { TemplateInfo } from '@/types/workflowTemplateTypes'
 
 const UPSCALE_ZOOM_SCALE = 16 // for upscale templates, exaggerate the hover zoom
@@ -102,36 +102,36 @@ const { sourceModule, loading, template } = defineProps<{
 const cardRef = ref<HTMLElement | null>(null)
 const isHovered = useElementHover(cardRef)
 
-const getThumbnailUrl = (index = '') => {
-  const basePath =
-    sourceModule === 'default'
-      ? api.fileURL(`/templates/${template.name}`)
-      : api.apiURL(`/workflow_templates/${sourceModule}/${template.name}`)
+const { getTemplateThumbnailUrl, getTemplateTitle, getTemplateDescription } =
+  useTemplateWorkflows()
 
-  // For templates from custom nodes, multiple images is not yet supported
-  const indexSuffix = sourceModule === 'default' && index ? `-${index}` : ''
-
-  return `${basePath}${indexSuffix}.${template.mediaSubtype}`
-}
+// Determine the effective source module to use (from template or prop)
+const effectiveSourceModule = computed(
+  () => template.sourceModule || sourceModule
+)
 
 const baseThumbnailSrc = computed(() =>
-  getThumbnailUrl(sourceModule === 'default' ? '1' : '')
+  getTemplateThumbnailUrl(
+    template,
+    effectiveSourceModule.value,
+    effectiveSourceModule.value === 'default' ? '1' : ''
+  )
 )
+
 const overlayThumbnailSrc = computed(() =>
-  getThumbnailUrl(sourceModule === 'default' ? '2' : '')
+  getTemplateThumbnailUrl(
+    template,
+    effectiveSourceModule.value,
+    effectiveSourceModule.value === 'default' ? '2' : ''
+  )
 )
 
-const description = computed(() => {
-  return sourceModule === 'default'
-    ? template.localizedDescription ?? ''
-    : template.description.replace(/[-_]/g, ' ').trim()
-})
-
-const title = computed(() => {
-  return sourceModule === 'default'
-    ? template.localizedTitle ?? ''
-    : template.name
-})
+const description = computed(() =>
+  getTemplateDescription(template, effectiveSourceModule.value)
+)
+const title = computed(() =>
+  getTemplateTitle(template, effectiveSourceModule.value)
+)
 
 defineEmits<{
   loadWorkflow: [name: string]

src/components/templates/TemplateWorkflowList.vue

@@ -1,21 +1,19 @@
 <template>
   <DataTable
     v-model:selection="selectedTemplate"
-    :value="templates"
+    :value="enrichedTemplates"
     striped-rows
     selection-mode="single"
   >
     <Column field="title" :header="$t('g.title')">
       <template #body="slotProps">
-        <span :title="getTemplateTitle(slotProps.data)">{{
-          getTemplateTitle(slotProps.data)
-        }}</span>
+        <span :title="slotProps.data.title">{{ slotProps.data.title }}</span>
       </template>
     </Column>
     <Column field="description" :header="$t('g.description')">
       <template #body="slotProps">
-        <span :title="getTemplateDescription(slotProps.data)">
-          {{ getTemplateDescription(slotProps.data) }}
+        <span :title="slotProps.data.description">
+          {{ slotProps.data.description }}
         </span>
       </template>
     </Column>
@@ -38,8 +36,9 @@
 import Button from 'primevue/button'
 import Column from 'primevue/column'
 import DataTable from 'primevue/datatable'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
+import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
 import type { TemplateInfo } from '@/types/workflowTemplateTypes'
 
 const { sourceModule, loading, templates } = defineProps<{
@@ -50,21 +49,20 @@ const { sourceModule, loading, templates } = defineProps<{
 }>()
 
 const selectedTemplate = ref(null)
+const { getTemplateTitle, getTemplateDescription } = useTemplateWorkflows()
+
+const enrichedTemplates = computed(() => {
+  return templates.map((template) => {
+    const actualSourceModule = template.sourceModule || sourceModule
+    return {
+      ...template,
+      title: getTemplateTitle(template, actualSourceModule),
+      description: getTemplateDescription(template, actualSourceModule)
+    }
+  })
+})
 
 const emit = defineEmits<{
   loadWorkflow: [name: string]
 }>()
-
-const getTemplateTitle = (template: TemplateInfo) => {
-  const fallback = template.title ?? template.name ?? `${sourceModule} Template`
-  return sourceModule === 'default'
-    ? template.localizedTitle ?? fallback
-    : fallback
-}
-
-const getTemplateDescription = (template: TemplateInfo) => {
-  return sourceModule === 'default'
-    ? template.localizedDescription ?? ''
-    : template.description.replace(/[-_]/g, ' ').trim()
-}
 </script>

src/components/templates/TemplateWorkflowsContent.vue

@@ -20,12 +20,12 @@
         class="absolute translate-x-0 top-0 left-0 h-full w-80 shadow-md z-5 transition-transform duration-300 ease-in-out"
       >
         <ProgressSpinner
-          v-if="!workflowTemplatesStore.isLoaded || !isReady"
+          v-if="!isTemplatesLoaded || !isReady"
           class="absolute w-8 h-full inset-0"
         />
         <TemplateWorkflowsSideNav
-          :tabs="tabs"
-          :selected-tab="selectedTab"
+          :tabs="allTemplateGroups"
+          :selected-tab="selectedTemplate"
           @update:selected-tab="handleTabSelection"
         />
       </aside>
@@ -37,14 +37,14 @@
         }"
       >
         <TemplateWorkflowView
-          v-if="isReady && selectedTab"
+          v-if="isReady && selectedTemplate"
           class="px-12 py-4"
-          :title="selectedTab.title"
-          :source-module="selectedTab.moduleName"
-          :templates="selectedTab.templates"
-          :loading="workflowLoading"
-          :category-title="selectedTab.title"
-          @load-workflow="loadWorkflow"
+          :title="selectedTemplate.title"
+          :source-module="selectedTemplate.moduleName"
+          :templates="selectedTemplate.templates"
+          :loading="loadingTemplateId"
+          :category-title="selectedTemplate.title"
+          @load-workflow="handleLoadWorkflow"
         />
       </div>
     </div>
@@ -56,47 +56,46 @@ import { useAsyncState } from '@vueuse/core'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { watch } from 'vue'
 
 import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
 import TemplateWorkflowsSideNav from '@/components/templates/TemplateWorkflowsSideNav.vue'
 import { useResponsiveCollapse } from '@/composables/element/useResponsiveCollapse'
-import { api } from '@/scripts/api'
-import { app } from '@/scripts/app'
-import { useDialogStore } from '@/stores/dialogStore'
-import { useWorkflowTemplatesStore } from '@/stores/workflowTemplatesStore'
+import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
 import type { WorkflowTemplates } from '@/types/workflowTemplateTypes'
 
-const { t } = useI18n()
-
 const {
   isSmallScreen,
   isOpen: isSideNavOpen,
   toggle: toggleSideNav
 } = useResponsiveCollapse()
 
-const workflowTemplatesStore = useWorkflowTemplatesStore()
-const { isReady } = useAsyncState(
-  workflowTemplatesStore.loadWorkflowTemplates,
-  null
+const {
+  selectedTemplate,
+  loadingTemplateId,
+  isTemplatesLoaded,
+  allTemplateGroups,
+  loadTemplates,
+  selectFirstTemplateCategory,
+  selectTemplateCategory,
+  loadWorkflowTemplate
+} = useTemplateWorkflows()
+
+const { isReady } = useAsyncState(loadTemplates, null)
+
+watch(
+  isReady,
+  () => {
+    if (isReady.value) {
+      selectFirstTemplateCategory()
+    }
+  },
+  { once: true }
 )
 
-const selectedTab = ref<WorkflowTemplates | null>(null)
-const selectFirstTab = () => {
-  const firstTab = workflowTemplatesStore.groupedTemplates[0].modules[0]
-  handleTabSelection(firstTab)
-}
-watch(isReady, selectFirstTab, { once: true })
-
-const workflowLoading = ref<string | null>(null)
-
-const tabs = computed(() => workflowTemplatesStore.groupedTemplates)
-
 const handleTabSelection = (selection: WorkflowTemplates | null) => {
-  //Listbox allows deselecting so this special case is ignored here
-  if (selection !== selectedTab.value && selection !== null) {
-    selectedTab.value = selection
+  if (selection !== null) {
+    selectTemplateCategory(selection)
 
     // On small screens, close the sidebar when a category is selected
     if (isSmallScreen.value) {
@@ -105,30 +104,9 @@ const handleTabSelection = (selection: WorkflowTemplates | null) => {
   }
 }
 
-const loadWorkflow = async (id: string) => {
-  if (!isReady.value) return
+const handleLoadWorkflow = async (id: string) => {
+  if (!isReady.value || !selectedTemplate.value) return false
 
-  workflowLoading.value = id
-  let json
-  if (selectedTab.value?.moduleName === 'default') {
-    // Default templates provided by frontend are served on this separate endpoint
-    json = await fetch(api.fileURL(`/templates/${id}.json`)).then((r) =>
-      r.json()
-    )
-  } else {
-    json = await fetch(
-      api.apiURL(
-        `/workflow_templates/${selectedTab.value?.moduleName}/${id}.json`
-      )
-    ).then((r) => r.json())
-  }
-  useDialogStore().closeDialog()
-  const workflowName =
-    selectedTab.value?.moduleName === 'default'
-      ? t(`templateWorkflows.template.${id}`, id)
-      : id
-  await app.loadGraphData(json, true, true, workflowName)
-
-  return false
+  return loadWorkflowTemplate(id, selectedTemplate.value.moduleName)
 }
 </script>

src/components/topbar/SecondRowWorkflowTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-auto max-w-full">
+  <div class="absolute top-0 left-0 w-auto max-w-full">
     <WorkflowTabs />
   </div>
 </template>

src/composables/README.md

@@ -101,6 +101,7 @@ Composables for sidebar functionality:
 - `useNodeLibrarySidebarTab` - Manages the node library sidebar tab
 - `useQueueSidebarTab` - Manages the queue sidebar tab
 - `useWorkflowsSidebarTab` - Manages the workflows sidebar tab
+- `useTemplateWorkflows` - Manages template workflow loading, selection, and display
 
 ### Widgets
 

src/composables/node/useNodeBadge.ts

@@ -7,6 +7,7 @@ import _ from 'lodash'
 import { computed, onMounted, watch } from 'vue'
 
 import { useNodePricing } from '@/composables/node/useNodePricing'
+import { useComputedWithWidgetWatch } from '@/composables/node/useWatchWidget'
 import { app } from '@/scripts/app'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
@@ -111,10 +112,15 @@ export const useNodeBadge = () => {
         node.badges.push(() => badge.value)
 
         if (node.constructor.nodeData?.api_node && showApiPricingBadge.value) {
-          const price = nodePricing.getNodeDisplayPrice(node)
-          // Always add the badge for API nodes, with or without price text
-          const creditsBadge = computed(() => {
-            // Use dynamic background color based on the theme
+          // Get the pricing function to determine if this node has dynamic pricing
+          const pricingConfig = nodePricing.getNodePricingConfig(node)
+          const hasDynamicPricing =
+            typeof pricingConfig?.displayPrice === 'function'
+
+          let creditsBadge
+          const createBadge = () => {
+            const price = nodePricing.getNodeDisplayPrice(node)
+
             const isLightTheme =
               colorPaletteStore.completedActivePalette.light_theme
             return new LGraphBadge({
@@ -137,7 +143,24 @@ export const useNodeBadge = () => {
                 ? adjustColor('#8D6932', { lightness: 0.5 })
                 : '#8D6932'
             })
-          })
+          }
+
+          if (hasDynamicPricing) {
+            // For dynamic pricing nodes, use computed that watches widget changes
+            const relevantWidgetNames = nodePricing.getRelevantWidgetNames(
+              node.constructor.nodeData?.name
+            )
+
+            const computedWithWidgetWatch = useComputedWithWidgetWatch(node, {
+              widgetNames: relevantWidgetNames,
+              triggerCanvasRedraw: true
+            })
+
+            creditsBadge = computedWithWidgetWatch(createBadge)
+          } else {
+            // For static pricing nodes, use regular computed
+            creditsBadge = computed(createBadge)
+          }
 
           node.badges.push(() => creditsBadge.value)
         }

src/composables/node/useWatchWidget.ts

@@ -0,0 +1,85 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { computedWithControl } from '@vueuse/core'
+import { type ComputedRef, ref } from 'vue'
+
+import { useChainCallback } from '@/composables/functional/useChainCallback'
+
+export interface UseComputedWithWidgetWatchOptions {
+  /**
+   * Names of widgets to observe for changes.
+   * If not provided, all widgets will be observed.
+   */
+  widgetNames?: string[]
+
+  /**
+   * Whether to trigger a canvas redraw when widget values change.
+   * @default false
+   */
+  triggerCanvasRedraw?: boolean
+}
+
+/**
+ * A composable that creates a computed that has a node's widget values as a dependencies.
+ * Essentially `computedWithControl` (https://vueuse.org/shared/computedWithControl/) where
+ * the explicitly defined extra dependencies are LGraphNode widgets.
+ *
+ * @param node - The LGraphNode whose widget values are to be watched
+ * @param options - Configuration options for the watcher
+ * @returns A function to create computed that responds to widget changes
+ *
+ * @example
+ * ```ts
+ * const computedWithWidgetWatch = useComputedWithWidgetWatch(node, {
+ *   widgetNames: ['width', 'height'],
+ *   triggerCanvasRedraw: true
+ * })
+ *
+ * const dynamicPrice = computedWithWidgetWatch(() => {
+ *   return calculatePrice(node)
+ * })
+ * ```
+ */
+export const useComputedWithWidgetWatch = (
+  node: LGraphNode,
+  options: UseComputedWithWidgetWatchOptions = {}
+) => {
+  const { widgetNames, triggerCanvasRedraw = false } = options
+
+  // Create a reactive trigger based on widget values
+  const widgetValues = ref<Record<string, any>>({})
+
+  // Initialize widget observers
+  if (node.widgets) {
+    const widgetsToObserve = widgetNames
+      ? node.widgets.filter((widget) => widgetNames.includes(widget.name))
+      : node.widgets
+
+    // Initialize current values
+    const currentValues: Record<string, any> = {}
+    widgetsToObserve.forEach((widget) => {
+      currentValues[widget.name] = widget.value
+    })
+    widgetValues.value = currentValues
+
+    widgetsToObserve.forEach((widget) => {
+      widget.callback = useChainCallback(widget.callback, () => {
+        // Update the reactive widget values
+        widgetValues.value = {
+          ...widgetValues.value,
+          [widget.name]: widget.value
+        }
+
+        // Optionally trigger a canvas redraw
+        if (triggerCanvasRedraw) {
+          node.graph?.setDirtyCanvas(true, true)
+        }
+      })
+    })
+  }
+
+  // Returns a function that creates a computed that responds to widget changes.
+  // The computed will be re-evaluated whenever any observed widget changes.
+  return <T>(computeFn: () => T): ComputedRef<T> => {
+    return computedWithControl(widgetValues, computeFn)
+  }
+}

src/composables/useCoreCommands.ts

@@ -17,7 +17,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
-import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
+import { useTitleEditorStore } from '@/stores/graphStore'
 import { useQueueSettingsStore, useQueueStore } from '@/stores/queueStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
@@ -34,7 +34,6 @@ export function useCoreCommands(): ComfyCommand[] {
   const colorPaletteStore = useColorPaletteStore()
   const firebaseAuthActions = useFirebaseAuthActions()
   const toastStore = useToastStore()
-  const canvasStore = useCanvasStore()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
 
   const getSelectedNodes = (): LGraphNode[] => {
@@ -674,30 +673,6 @@ export function useCoreCommands(): ComfyCommand[] {
       function: async () => {
         await firebaseAuthActions.logout()
       }
-    },
-    {
-      id: 'Comfy.Graph.ConvertToSubgraph',
-      icon: 'pi pi-sitemap',
-      label: 'Convert Selection to Subgraph',
-      versionAdded: '1.20.1',
-      function: () => {
-        const canvas = canvasStore.getCanvas()
-        const graph = canvas.subgraph ?? canvas.graph
-        if (!graph) throw new TypeError('Canvas has no graph or subgraph set.')
-
-        const res = graph.convertToSubgraph(canvas.selectedItems)
-        if (!res) {
-          toastStore.add({
-            severity: 'error',
-            summary: t('toastMessages.cannotCreateSubgraph'),
-            detail: t('toastMessages.failedToConvertToSubgraph'),
-            life: 3000
-          })
-          return
-        }
-        const { node } = res
-        canvas.select(node)
-      }
     }
   ]
 

src/composables/useTemplateWorkflows.ts

@@ -0,0 +1,190 @@
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
+import { useDialogStore } from '@/stores/dialogStore'
+import { useWorkflowTemplatesStore } from '@/stores/workflowTemplatesStore'
+import type {
+  TemplateGroup,
+  TemplateInfo,
+  WorkflowTemplates
+} from '@/types/workflowTemplateTypes'
+
+export function useTemplateWorkflows() {
+  const { t } = useI18n()
+  const workflowTemplatesStore = useWorkflowTemplatesStore()
+  const dialogStore = useDialogStore()
+
+  // State
+  const selectedTemplate = ref<WorkflowTemplates | null>(null)
+  const loadingTemplateId = ref<string | null>(null)
+
+  // Computed
+  const isTemplatesLoaded = computed(() => workflowTemplatesStore.isLoaded)
+  const allTemplateGroups = computed<TemplateGroup[]>(
+    () => workflowTemplatesStore.groupedTemplates
+  )
+
+  /**
+   * Loads all template workflows from the API
+   */
+  const loadTemplates = async () => {
+    if (!workflowTemplatesStore.isLoaded) {
+      await workflowTemplatesStore.loadWorkflowTemplates()
+    }
+    return workflowTemplatesStore.isLoaded
+  }
+
+  /**
+   * Selects the first template category as default
+   */
+  const selectFirstTemplateCategory = () => {
+    if (allTemplateGroups.value.length > 0) {
+      const firstCategory = allTemplateGroups.value[0].modules[0]
+      selectTemplateCategory(firstCategory)
+    }
+  }
+
+  /**
+   * Selects a template category
+   */
+  const selectTemplateCategory = (category: WorkflowTemplates | null) => {
+    selectedTemplate.value = category
+    return category !== null
+  }
+
+  /**
+   * Gets template thumbnail URL
+   */
+  const getTemplateThumbnailUrl = (
+    template: TemplateInfo,
+    sourceModule: string,
+    index = ''
+  ) => {
+    const basePath =
+      sourceModule === 'default'
+        ? api.fileURL(`/templates/${template.name}`)
+        : api.apiURL(`/workflow_templates/${sourceModule}/${template.name}`)
+
+    const indexSuffix = sourceModule === 'default' && index ? `-${index}` : ''
+    return `${basePath}${indexSuffix}.${template.mediaSubtype}`
+  }
+
+  /**
+   * Gets formatted template title
+   */
+  const getTemplateTitle = (template: TemplateInfo, sourceModule: string) => {
+    const fallback =
+      template.title ?? template.name ?? `${sourceModule} Template`
+    return sourceModule === 'default'
+      ? template.localizedTitle ?? fallback
+      : fallback
+  }
+
+  /**
+   * Gets formatted template description
+   */
+  const getTemplateDescription = (
+    template: TemplateInfo,
+    sourceModule: string
+  ) => {
+    return sourceModule === 'default'
+      ? template.localizedDescription ?? ''
+      : template.description?.replace(/[-_]/g, ' ').trim() ?? ''
+  }
+
+  /**
+   * Loads a workflow template
+   */
+  const loadWorkflowTemplate = async (id: string, sourceModule: string) => {
+    if (!isTemplatesLoaded.value) return false
+
+    loadingTemplateId.value = id
+    let json
+
+    try {
+      // Handle "All" category as a special case
+      if (sourceModule === 'all') {
+        // Find "All" category in the ComfyUI Examples group
+        const comfyExamplesGroup = allTemplateGroups.value.find(
+          (g) =>
+            g.label ===
+            t('templateWorkflows.category.ComfyUI Examples', 'ComfyUI Examples')
+        )
+        const allCategory = comfyExamplesGroup?.modules.find(
+          (m) => m.moduleName === 'all'
+        )
+        const template = allCategory?.templates.find((t) => t.name === id)
+
+        if (!template || !template.sourceModule) return false
+
+        // Use the stored source module for loading
+        const actualSourceModule = template.sourceModule
+        json = await fetchTemplateJson(id, actualSourceModule)
+
+        // Use source module for name
+        const workflowName =
+          actualSourceModule === 'default'
+            ? t(`templateWorkflows.template.${id}`, id)
+            : id
+
+        dialogStore.closeDialog()
+        await app.loadGraphData(json, true, true, workflowName)
+
+        return true
+      }
+
+      // Regular case for normal categories
+      json = await fetchTemplateJson(id, sourceModule)
+
+      const workflowName =
+        sourceModule === 'default'
+          ? t(`templateWorkflows.template.${id}`, id)
+          : id
+
+      dialogStore.closeDialog()
+      await app.loadGraphData(json, true, true, workflowName)
+
+      return true
+    } catch (error) {
+      console.error('Error loading workflow template:', error)
+      return false
+    } finally {
+      loadingTemplateId.value = null
+    }
+  }
+
+  /**
+   * Fetches template JSON from the appropriate endpoint
+   */
+  const fetchTemplateJson = async (id: string, sourceModule: string) => {
+    if (sourceModule === 'default') {
+      // Default templates provided by frontend are served on this separate endpoint
+      return fetch(api.fileURL(`/templates/${id}.json`)).then((r) => r.json())
+    } else {
+      return fetch(
+        api.apiURL(`/workflow_templates/${sourceModule}/${id}.json`)
+      ).then((r) => r.json())
+    }
+  }
+
+  return {
+    // State
+    selectedTemplate,
+    loadingTemplateId,
+
+    // Computed
+    isTemplatesLoaded,
+    allTemplateGroups,
+
+    // Methods
+    loadTemplates,
+    selectFirstTemplateCategory,
+    selectTemplateCategory,
+    getTemplateThumbnailUrl,
+    getTemplateTitle,
+    getTemplateDescription,
+    loadWorkflowTemplate
+  }
+}

src/constants/coreKeybindings.ts

@@ -173,13 +173,5 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       key: 'f'
     },
     commandId: 'Workspace.ToggleFocusMode'
-  },
-  {
-    combo: {
-      key: 'e',
-      ctrl: true,
-      shift: true
-    },
-    commandId: 'Comfy.Graph.ConvertToSubgraph'
   }
 ]

src/extensions/core/groupNode.ts

@@ -1,4 +1,4 @@
-import { LiteGraph } from '@comfyorg/litegraph'
+import { LGraphCanvas, LiteGraph } from '@comfyorg/litegraph'
 import { LGraphNode, type NodeId } from '@comfyorg/litegraph/dist/LGraphNode'
 
 import { t } from '@/i18n'
@@ -1583,6 +1583,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`,
+      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/')) {
@@ -1672,6 +1723,9 @@ const ext: ComfyExtension = {
       }
     }
   ],
+  setup() {
+    addConvertToGroupOptions()
+  },
   async beforeConfigureGraph(
     graphData: ComfyWorkflowJSON,
     missingNodeTypes: string[]

src/extensions/core/load3d/Load3d.ts

@@ -160,22 +160,48 @@ class Load3d {
     this.viewHelperManager.update(delta)
     this.controlsManager.update()
 
+    this.renderMainScene()
+
+    if (this.previewManager.showPreview) {
+      this.renderPreviewScene()
+    }
+
+    this.resetViewport()
+
+    if (this.viewHelperManager.viewHelper.render) {
+      this.viewHelperManager.viewHelper.render(this.renderer)
+    }
+
+    this.INITIAL_RENDER_DONE = true
+  }
+
+  renderMainScene(): void {
+    const width = this.renderer.domElement.clientWidth
+    const height = this.renderer.domElement.clientHeight
+
+    this.renderer.setViewport(0, 0, width, height)
+    this.renderer.setScissor(0, 0, width, height)
+    this.renderer.setScissorTest(true)
+
     this.renderer.clear()
     this.sceneManager.renderBackground()
     this.renderer.render(
       this.sceneManager.scene,
       this.cameraManager.activeCamera
     )
+  }
 
-    if (this.viewHelperManager.viewHelper.render) {
-      this.viewHelperManager.viewHelper.render(this.renderer)
-    }
+  renderPreviewScene(): void {
+    this.previewManager.renderPreview()
+  }
 
-    if (this.previewManager.showPreview) {
-      this.previewManager.updatePreviewRender()
-    }
+  resetViewport(): void {
+    const width = this.renderer.domElement.clientWidth
+    const height = this.renderer.domElement.clientHeight
 
-    this.INITIAL_RENDER_DONE = true
+    this.renderer.setViewport(0, 0, width, height)
+    this.renderer.setScissor(0, 0, width, height)
+    this.renderer.setScissorTest(false)
   }
 
   private getActiveCamera(): THREE.Camera {
@@ -198,20 +224,17 @@ class Load3d {
         return
       }
 
-      if (this.previewManager.showPreview) {
-        this.previewManager.updatePreviewRender()
-      }
-
       const delta = this.clock.getDelta()
       this.viewHelperManager.update(delta)
       this.controlsManager.update()
 
-      this.renderer.clear()
-      this.sceneManager.renderBackground()
-      this.renderer.render(
-        this.sceneManager.scene,
-        this.cameraManager.activeCamera
-      )
+      this.renderMainScene()
+
+      if (this.previewManager.showPreview) {
+        this.renderPreviewScene()
+      }
+
+      this.resetViewport()
 
       if (this.viewHelperManager.viewHelper.render) {
         this.viewHelperManager.viewHelper.render(this.renderer)
@@ -304,11 +327,9 @@ class Load3d {
   async setBackgroundImage(uploadPath: string): Promise<void> {
     await this.sceneManager.setBackgroundImage(uploadPath)
 
-    if (this.previewManager.previewRenderer) {
-      this.previewManager.updateBackgroundTexture(
-        this.sceneManager.backgroundTexture
-      )
-    }
+    this.previewManager.updateBackgroundTexture(
+      this.sceneManager.backgroundTexture
+    )
 
     this.forceRender()
   }
@@ -316,10 +337,7 @@ class Load3d {
   removeBackgroundImage(): void {
     this.sceneManager.removeBackgroundImage()
 
-    if (
-      this.previewManager.previewRenderer &&
-      this.previewManager.previewCamera
-    ) {
+    if (this.previewManager.previewCamera) {
       this.previewManager.updateBackgroundTexture(null)
     }
 

src/extensions/core/load3d/Load3dAnimation.ts

@@ -42,10 +42,6 @@ class Load3dAnimation extends Load3d {
         return
       }
 
-      if (this.previewManager.showPreview) {
-        this.previewManager.updatePreviewRender()
-      }
-
       const delta = this.clock.getDelta()
 
       this.animationManager.update(delta)
@@ -54,12 +50,13 @@ class Load3dAnimation extends Load3d {
 
       this.controlsManager.update()
 
-      this.renderer.clear()
-      this.sceneManager.renderBackground()
-      this.renderer.render(
-        this.sceneManager.scene,
-        this.cameraManager.activeCamera
-      )
+      this.renderMainScene()
+
+      if (this.previewManager.showPreview) {
+        this.renderPreviewScene()
+      }
+
+      this.resetViewport()
 
       if (this.viewHelperManager.viewHelper.render) {
         this.viewHelperManager.viewHelper.render(this.renderer)

src/extensions/core/load3d/PreviewManager.ts

@@ -4,7 +4,6 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { EventManagerInterface, PreviewManagerInterface } from './interfaces'
 
 export class PreviewManager implements PreviewManagerInterface {
-  previewRenderer: THREE.WebGLRenderer | null = null
   previewCamera: THREE.Camera
   previewContainer: HTMLDivElement = {} as HTMLDivElement
   showPreview: boolean = true
@@ -17,7 +16,6 @@ export class PreviewManager implements PreviewManagerInterface {
   private getControls: () => OrbitControls
   private eventManager: EventManagerInterface
 
-  // @ts-expect-error unused variable
   private getRenderer: () => THREE.WebGLRenderer
 
   private previewBackgroundScene: THREE.Scene
@@ -25,6 +23,8 @@ export class PreviewManager implements PreviewManagerInterface {
   private previewBackgroundMesh: THREE.Mesh | null = null
   private previewBackgroundTexture: THREE.Texture | null = null
 
+  private previewBackgroundColor: THREE.Color = new THREE.Color(0x282828)
+
   constructor(
     scene: THREE.Scene,
     getActiveCamera: () => THREE.Camera,
@@ -61,18 +61,6 @@ export class PreviewManager implements PreviewManagerInterface {
   init(): void {}
 
   dispose(): void {
-    if (this.previewRenderer) {
-      this.previewRenderer.forceContextLoss()
-      const canvas = this.previewRenderer.domElement
-      const event = new Event('webglcontextlost', {
-        bubbles: true,
-        cancelable: true
-      })
-      canvas.dispatchEvent(event)
-
-      this.previewRenderer.dispose()
-    }
-
     if (this.previewBackgroundTexture) {
       this.previewBackgroundTexture.dispose()
     }
@@ -84,17 +72,6 @@ export class PreviewManager implements PreviewManagerInterface {
   }
 
   createCapturePreview(container: Element | HTMLElement): void {
-    this.previewRenderer = new THREE.WebGLRenderer({
-      alpha: true,
-      antialias: true,
-      preserveDrawingBuffer: true
-    })
-
-    this.previewRenderer.setSize(this.targetWidth, this.targetHeight)
-    this.previewRenderer.setClearColor(0x282828)
-    this.previewRenderer.autoClear = false
-    this.previewRenderer.outputColorSpace = THREE.SRGBColorSpace
-
     this.previewContainer = document.createElement('div')
     this.previewContainer.style.cssText = `
       position: absolute;
@@ -104,7 +81,6 @@ export class PreviewManager implements PreviewManagerInterface {
       display: block;
       transition: border-color 0.1s ease;
     `
-    this.previewContainer.appendChild(this.previewRenderer.domElement)
 
     const MIN_PREVIEW_WIDTH = 120
     const MAX_PREVIEW_WIDTH = 240
@@ -131,7 +107,6 @@ export class PreviewManager implements PreviewManagerInterface {
       }
 
       this.updatePreviewSize()
-      this.updatePreviewRender()
     })
 
     this.previewContainer.style.display = this.showPreview ? 'block' : 'none'
@@ -159,13 +134,48 @@ export class PreviewManager implements PreviewManagerInterface {
 
     const previewHeight =
       (this.previewWidth * this.targetHeight) / this.targetWidth
-    this.previewRenderer?.setSize(this.previewWidth, previewHeight, false)
+
+    this.previewContainer.style.width = `${this.previewWidth}px`
+    this.previewContainer.style.height = `${previewHeight}px`
+  }
+
+  getPreviewViewport(): {
+    left: number
+    bottom: number
+    width: number
+    height: number
+  } | null {
+    if (!this.showPreview || !this.previewContainer) {
+      return null
+    }
+
+    const renderer = this.getRenderer()
+    const canvas = renderer.domElement
+
+    const containerRect = this.previewContainer.getBoundingClientRect()
+    const canvasRect = canvas.getBoundingClientRect()
+
+    if (
+      containerRect.bottom < canvasRect.top ||
+      containerRect.top > canvasRect.bottom ||
+      containerRect.right < canvasRect.left ||
+      containerRect.left > canvasRect.right
+    ) {
+      return null
+    }
+
+    const width = parseFloat(this.previewContainer.style.width)
+    const height = parseFloat(this.previewContainer.style.height)
+
+    const left = this.getRenderer().domElement.clientWidth - width
+
+    const bottom = 0
+
+    return { left, bottom, width, height }
   }
 
   syncWithMainCamera(): void {
-    if (!this.previewRenderer || !this.previewContainer || !this.showPreview) {
-      return
-    }
+    if (!this.showPreview) return
 
     this.previewCamera = this.getActiveCamera().clone()
 
@@ -203,85 +213,73 @@ export class PreviewManager implements PreviewManagerInterface {
     }
 
     this.previewCamera.lookAt(this.getControls().target)
-
-    this.updatePreviewRender()
   }
 
-  updatePreviewRender(): void {
-    if (!this.previewRenderer || !this.previewContainer || !this.showPreview)
-      return
+  renderPreview(): void {
+    const viewport = this.getPreviewViewport()
+    if (!viewport) return
 
-    if (
-      !this.previewCamera ||
-      (this.getActiveCamera() instanceof THREE.PerspectiveCamera &&
-        !(this.previewCamera instanceof THREE.PerspectiveCamera)) ||
-      (this.getActiveCamera() instanceof THREE.OrthographicCamera &&
-        !(this.previewCamera instanceof THREE.OrthographicCamera))
-    ) {
-      this.previewCamera = this.getActiveCamera().clone()
-    }
+    const renderer = this.getRenderer()
 
-    this.previewCamera.position.copy(this.getActiveCamera().position)
-    this.previewCamera.rotation.copy(this.getActiveCamera().rotation)
+    const originalClearColor = renderer.getClearColor(new THREE.Color())
+    const originalClearAlpha = renderer.getClearAlpha()
 
-    const aspect = this.targetWidth / this.targetHeight
+    this.syncWithMainCamera()
 
-    if (this.getActiveCamera() instanceof THREE.OrthographicCamera) {
-      const activeOrtho = this.getActiveCamera() as THREE.OrthographicCamera
-      const previewOrtho = this.previewCamera as THREE.OrthographicCamera
+    renderer.setViewport(
+      viewport.left,
+      viewport.bottom,
+      viewport.width,
+      viewport.height
+    )
+    renderer.setScissor(
+      viewport.left,
+      viewport.bottom,
+      viewport.width,
+      viewport.height
+    )
 
-      const frustumHeight =
-        (activeOrtho.top - activeOrtho.bottom) / activeOrtho.zoom
-
-      const frustumWidth = frustumHeight * aspect
-
-      previewOrtho.top = frustumHeight / 2
-      previewOrtho.left = -frustumWidth / 2
-      previewOrtho.right = frustumWidth / 2
-      previewOrtho.bottom = -frustumHeight / 2
-      previewOrtho.zoom = 1
-
-      previewOrtho.updateProjectionMatrix()
-    } else {
-      ;(this.previewCamera as THREE.PerspectiveCamera).aspect = aspect
-      ;(this.previewCamera as THREE.PerspectiveCamera).fov = (
-        this.getActiveCamera() as THREE.PerspectiveCamera
-      ).fov
-      ;(this.previewCamera as THREE.PerspectiveCamera).updateProjectionMatrix()
-    }
-
-    this.previewCamera.lookAt(this.getControls().target)
-
-    const previewHeight =
-      (this.previewWidth * this.targetHeight) / this.targetWidth
-    this.previewRenderer.setSize(this.previewWidth, previewHeight, false)
-    this.previewRenderer.outputColorSpace = THREE.SRGBColorSpace
-    this.previewRenderer.clear()
+    renderer.setClearColor(this.previewBackgroundColor, 1.0)
+    renderer.clear()
 
     if (this.previewBackgroundMesh && this.previewBackgroundTexture) {
       const material = this.previewBackgroundMesh
         .material as THREE.MeshBasicMaterial
       if (material.map) {
-        const currentToneMapping = this.previewRenderer.toneMapping
-        const currentExposure = this.previewRenderer.toneMappingExposure
+        const currentToneMapping = renderer.toneMapping
+        const currentExposure = renderer.toneMappingExposure
 
-        this.previewRenderer.toneMapping = THREE.NoToneMapping
-        this.previewRenderer.render(
+        renderer.toneMapping = THREE.NoToneMapping
+        renderer.render(
           this.previewBackgroundScene,
           this.previewBackgroundCamera
         )
 
-        this.previewRenderer.toneMapping = currentToneMapping
-        this.previewRenderer.toneMappingExposure = currentExposure
+        renderer.toneMapping = currentToneMapping
+        renderer.toneMappingExposure = currentExposure
       }
     }
 
-    this.previewRenderer.render(this.scene, this.previewCamera)
+    renderer.render(this.scene, this.previewCamera)
+
+    renderer.setClearColor(originalClearColor, originalClearAlpha)
+  }
+
+  setPreviewBackgroundColor(color: string | number): void {
+    this.previewBackgroundColor.set(color)
+  }
+
+  getPreviewBackgroundColor(): THREE.Color {
+    return this.previewBackgroundColor.clone()
+  }
+
+  updatePreviewRender(): void {
+    this.syncWithMainCamera()
   }
 
   togglePreview(showPreview: boolean): void {
-    if (this.previewRenderer) {
-      this.showPreview = showPreview
+    this.showPreview = showPreview
+    if (this.previewContainer) {
       this.previewContainer.style.display = this.showPreview ? 'block' : 'none'
     }
 
@@ -306,7 +304,7 @@ export class PreviewManager implements PreviewManagerInterface {
       )
     }
 
-    if (this.previewRenderer && this.previewCamera) {
+    if (this.previewCamera) {
       if (this.previewCamera instanceof THREE.PerspectiveCamera) {
         this.previewCamera.aspect = width / height
         this.previewCamera.updateProjectionMatrix()
@@ -322,7 +320,6 @@ export class PreviewManager implements PreviewManagerInterface {
 
   handleResize(): void {
     this.updatePreviewSize()
-    this.updatePreviewRender()
   }
 
   updateBackgroundTexture(texture: THREE.Texture | null): void {

src/extensions/core/load3d/interfaces.ts

@@ -100,7 +100,6 @@ export interface ViewHelperManagerInterface extends BaseManager {
 }
 
 export interface PreviewManagerInterface extends BaseManager {
-  previewRenderer: THREE.WebGLRenderer | null
   previewCamera: THREE.Camera
   previewContainer: HTMLDivElement
   showPreview: boolean
@@ -112,6 +111,14 @@ export interface PreviewManagerInterface extends BaseManager {
   setTargetSize(width: number, height: number): void
   handleResize(): void
   updateBackgroundTexture(texture: THREE.Texture | null): void
+  getPreviewViewport(): {
+    left: number
+    bottom: number
+    width: number
+    height: number
+  } | null
+  renderPreview(): void
+  syncWithMainCamera(): void
 }
 
 export interface EventManagerInterface {

src/extensions/core/widgetInputs.ts

@@ -506,7 +506,12 @@ export function mergeIfValid(
     }
   }
 
-  return { customConfig: customSpec?.[1] ?? {} }
+  return {
+    customConfig:
+      customSpec && Array.isArray(customSpec) && customSpec[1]
+        ? customSpec[1]
+        : {}
+  }
 }
 
 app.registerExtension({

src/locales/en/commands.json

@@ -98,9 +98,6 @@
   "Comfy_Feedback": {
     "label": "Give Feedback"
   },
-  "Comfy_Graph_ConvertToSubgraph": {
-    "label": "Convert Selection to Subgraph"
-  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Fit Group To Contents"
   },

src/locales/en/main.json

@@ -514,7 +514,8 @@
       "3D": "3D",
       "Audio": "Audio",
       "Image API": "Image API",
-      "Video API": "Video API"
+      "Video API": "Video API",
+      "All": "All Templates"
     },
     "templateDescription": {
       "Basics": {
@@ -811,7 +812,6 @@
     "Export": "Export",
     "Export (API)": "Export (API)",
     "Give Feedback": "Give Feedback",
-    "Convert Selection to Subgraph": "Convert Selection to Subgraph",
     "Fit Group To Contents": "Fit Group To Contents",
     "Group Selected Nodes": "Group Selected Nodes",
     "Convert selected nodes to group node": "Convert selected nodes to group node",
@@ -1292,9 +1292,7 @@
     "failedToPurchaseCredits": "Failed to purchase credits: {error}",
     "unauthorizedDomain": "Your domain {domain} is not authorized to use this service. Please contact {email} to add your domain to the whitelist.",
     "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
-    "nothingSelected": "Nothing selected",
-    "cannotCreateSubgraph": "Cannot create subgraph",
-    "failedToConvertToSubgraph": "Failed to convert items to subgraph"
+    "nothingSelected": "Nothing selected"
   },
   "auth": {
     "apiKey": {

src/locales/es/commands.json

@@ -98,9 +98,6 @@
   "Comfy_Feedback": {
     "label": "Dar retroalimentación"
   },
-  "Comfy_Graph_ConvertToSubgraph": {
-    "label": "Convertir selección en subgrafo"
-  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Ajustar grupo al contenido"
   },

src/locales/es/main.json

@@ -693,7 +693,6 @@
     "ComfyUI Forum": "Foro de ComfyUI",
     "ComfyUI Issues": "Problemas de ComfyUI",
     "Contact Support": "Contactar soporte",
-    "Convert Selection to Subgraph": "Convertir selección en subgrafo",
     "Convert selected nodes to group node": "Convertir nodos seleccionados en nodo de grupo",
     "Custom Nodes Manager": "Gestor de nodos personalizados",
     "Delete Selected Items": "Eliminar elementos seleccionados",
@@ -1139,6 +1138,7 @@
   "templateWorkflows": {
     "category": {
       "3D": "3D",
+      "All": "Todas las plantillas",
       "Area Composition": "Composición de Área",
       "Audio": "Audio",
       "Basics": "Básicos",
@@ -1357,7 +1357,6 @@
     "title": "Comienza con una Plantilla"
   },
   "toastMessages": {
-    "cannotCreateSubgraph": "No se puede crear el subgrafo",
     "couldNotDetermineFileType": "No se pudo determinar el tipo de archivo",
     "dropFileError": "No se puede procesar el elemento soltado: {error}",
     "emptyCanvas": "Lienzo vacío",
@@ -1366,7 +1365,6 @@
     "errorSaveSetting": "Error al guardar la configuración {id}: {err}",
     "failedToAccessBillingPortal": "No se pudo acceder al portal de facturación: {error}",
     "failedToApplyTexture": "Error al aplicar textura",
-    "failedToConvertToSubgraph": "No se pudo convertir los elementos en subgrafo",
     "failedToCreateCustomer": "No se pudo crear el cliente: {error}",
     "failedToDownloadFile": "Error al descargar el archivo",
     "failedToExportModel": "Error al exportar modelo como {format}",

src/locales/fr/commands.json

@@ -98,9 +98,6 @@
   "Comfy_Feedback": {
     "label": "Retour d'information"
   },
-  "Comfy_Graph_ConvertToSubgraph": {
-    "label": "Convertir la sélection en sous-graphe"
-  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Ajuster le groupe au contenu"
   },

src/locales/fr/main.json

@@ -693,7 +693,6 @@
     "ComfyUI Forum": "Forum ComfyUI",
     "ComfyUI Issues": "Problèmes de ComfyUI",
     "Contact Support": "Contacter le support",
-    "Convert Selection to Subgraph": "Convertir la sélection en sous-graphe",
     "Convert selected nodes to group node": "Convertir les nœuds sélectionnés en nœud de groupe",
     "Custom Nodes Manager": "Gestionnaire de Nœuds Personnalisés",
     "Delete Selected Items": "Supprimer les éléments sélectionnés",
@@ -1139,6 +1138,7 @@
   "templateWorkflows": {
     "category": {
       "3D": "3D",
+      "All": "Tous les modèles",
       "Area Composition": "Composition de zone",
       "Audio": "Audio",
       "Basics": "Basiques",
@@ -1357,7 +1357,6 @@
     "title": "Commencez avec un modèle"
   },
   "toastMessages": {
-    "cannotCreateSubgraph": "Impossible de créer le sous-graphe",
     "couldNotDetermineFileType": "Impossible de déterminer le type de fichier",
     "dropFileError": "Impossible de traiter l'élément déposé : {error}",
     "emptyCanvas": "Toile vide",
@@ -1366,7 +1365,6 @@
     "errorSaveSetting": "Erreur lors de l'enregistrement du paramètre {id}: {err}",
     "failedToAccessBillingPortal": "Échec de l'accès au portail de facturation : {error}",
     "failedToApplyTexture": "Échec de l'application de la texture",
-    "failedToConvertToSubgraph": "Échec de la conversion des éléments en sous-graphe",
     "failedToCreateCustomer": "Échec de la création du client : {error}",
     "failedToDownloadFile": "Échec du téléchargement du fichier",
     "failedToExportModel": "Échec de l'exportation du modèle en {format}",

src/locales/ja/commands.json

@@ -98,9 +98,6 @@
   "Comfy_Feedback": {
     "label": "フィードバック"
   },
-  "Comfy_Graph_ConvertToSubgraph": {
-    "label": "選択範囲をサブグラフに変換"
-  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "グループを内容に合わせて調整"
   },

src/locales/ja/main.json

@@ -693,7 +693,6 @@
     "ComfyUI Forum": "ComfyUI フォーラム",
     "ComfyUI Issues": "ComfyUIの問題",
     "Contact Support": "サポートに連絡",
-    "Convert Selection to Subgraph": "選択範囲をサブグラフに変換",
     "Convert selected nodes to group node": "選択したノードをグループノードに変換",
     "Custom Nodes Manager": "カスタムノードマネージャ",
     "Delete Selected Items": "選択したアイテムを削除",
@@ -1139,6 +1138,7 @@
   "templateWorkflows": {
     "category": {
       "3D": "3D",
+      "All": "すべてのテンプレート",
       "Area Composition": "エリア構成",
       "Audio": "オーディオ",
       "Basics": "基本",
@@ -1357,7 +1357,6 @@
     "title": "テンプレートを利用して開始"
   },
   "toastMessages": {
-    "cannotCreateSubgraph": "サブグラフを作成できません",
     "couldNotDetermineFileType": "ファイルタイプを判断できませんでした",
     "dropFileError": "ドロップされたアイテムを処理できません: {error}",
     "emptyCanvas": "キャンバスが空です",
@@ -1366,7 +1365,6 @@
     "errorSaveSetting": "設定{id}の保存エラー: {err}",
     "failedToAccessBillingPortal": "請求ポータルへのアクセスに失敗しました: {error}",
     "failedToApplyTexture": "テクスチャの適用に失敗しました",
-    "failedToConvertToSubgraph": "アイテムをサブグラフに変換できませんでした",
     "failedToCreateCustomer": "顧客の作成に失敗しました: {error}",
     "failedToDownloadFile": "ファイルのダウンロードに失敗しました",
     "failedToExportModel": "{format}としてモデルのエクスポートに失敗しました",

src/locales/ko/commands.json

@@ -98,9 +98,6 @@
   "Comfy_Feedback": {
     "label": "피드백"
   },
-  "Comfy_Graph_ConvertToSubgraph": {
-    "label": "선택 영역을 서브그래프로 변환"
-  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "그룹을 내용에 맞게 맞추기"
   },

src/locales/ko/main.json

@@ -693,7 +693,6 @@
     "ComfyUI Forum": "ComfyUI 포럼",
     "ComfyUI Issues": "ComfyUI 이슈 페이지",
     "Contact Support": "고객 지원 문의",
-    "Convert Selection to Subgraph": "선택 영역을 서브그래프로 변환",
     "Convert selected nodes to group node": "선택한 노드를 그룹 노드로 변환",
     "Custom Nodes Manager": "사용자 정의 노드 관리자",
     "Delete Selected Items": "선택한 항목 삭제",
@@ -1139,6 +1138,7 @@
   "templateWorkflows": {
     "category": {
       "3D": "3D",
+      "All": "모든 템플릿",
       "Area Composition": "영역 구성",
       "Audio": "오디오",
       "Basics": "기본",
@@ -1357,7 +1357,6 @@
     "title": "템플릿으로 시작하기"
   },
   "toastMessages": {
-    "cannotCreateSubgraph": "서브그래프를 생성할 수 없습니다",
     "couldNotDetermineFileType": "파일 유형을 결정할 수 없습니다",
     "dropFileError": "드롭된 항목을 처리할 수 없습니다: {error}",
     "emptyCanvas": "빈 캔버스",
@@ -1366,7 +1365,6 @@
     "errorSaveSetting": "설정 {id} 저장 오류: {err}",
     "failedToAccessBillingPortal": "결제 포털에 접근하지 못했습니다: {error}",
     "failedToApplyTexture": "텍스처 적용에 실패했습니다",
-    "failedToConvertToSubgraph": "항목을 서브그래프로 변환하지 못했습니다",
     "failedToCreateCustomer": "고객 생성에 실패했습니다: {error}",
     "failedToDownloadFile": "파일 다운로드에 실패했습니다",
     "failedToExportModel": "{format} 형식으로 모델 내보내기에 실패했습니다",

src/locales/ru/commands.json

@@ -98,9 +98,6 @@
   "Comfy_Feedback": {
     "label": "Обратная связь"
   },
-  "Comfy_Graph_ConvertToSubgraph": {
-    "label": "Преобразовать выделенное в подграф"
-  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "Подогнать группу к содержимому"
   },

src/locales/ru/main.json

@@ -693,7 +693,6 @@
     "ComfyUI Forum": "Форум ComfyUI",
     "ComfyUI Issues": "Проблемы ComfyUI",
     "Contact Support": "Связаться с поддержкой",
-    "Convert Selection to Subgraph": "Преобразовать выделенное в подграф",
     "Convert selected nodes to group node": "Преобразовать выбранные ноды в групповую ноду",
     "Custom Nodes Manager": "Менеджер Пользовательских Узлов",
     "Delete Selected Items": "Удалить выбранные элементы",
@@ -1139,6 +1138,7 @@
   "templateWorkflows": {
     "category": {
       "3D": "3D",
+      "All": "Все шаблоны",
       "Area Composition": "Композиция области",
       "Audio": "Аудио",
       "Basics": "Основы",
@@ -1357,7 +1357,6 @@
     "title": "Начните с шаблона"
   },
   "toastMessages": {
-    "cannotCreateSubgraph": "Невозможно создать подграф",
     "couldNotDetermineFileType": "Не удалось определить тип файла",
     "dropFileError": "Не удалось обработать перетаскиваемый элемент: {error}",
     "emptyCanvas": "Пустой холст",
@@ -1366,7 +1365,6 @@
     "errorSaveSetting": "Ошибка сохранения настройки {id}: {err}",
     "failedToAccessBillingPortal": "Не удалось получить доступ к биллинговому порталу: {error}",
     "failedToApplyTexture": "Не удалось применить текстуру",
-    "failedToConvertToSubgraph": "Не удалось преобразовать элементы в подграф",
     "failedToCreateCustomer": "Не удалось создать клиента: {error}",
     "failedToDownloadFile": "Не удалось скачать файл",
     "failedToExportModel": "Не удалось экспортировать модель как {format}",

src/locales/zh/commands.json

@@ -98,9 +98,6 @@
   "Comfy_Feedback": {
     "label": "反馈"
   },
-  "Comfy_Graph_ConvertToSubgraph": {
-    "label": "将选区转换为子图"
-  },
   "Comfy_Graph_FitGroupToContents": {
     "label": "适应节点框到内容"
   },

src/locales/zh/main.json

@@ -693,7 +693,6 @@
     "ComfyUI Forum": "ComfyUI 论坛",
     "ComfyUI Issues": "ComfyUI 问题",
     "Contact Support": "联系支持",
-    "Convert Selection to Subgraph": "将选中内容转换为子图",
     "Convert selected nodes to group node": "将选中节点转换为组节点",
     "Custom Nodes Manager": "自定义节点管理器",
     "Delete Selected Items": "删除选定的项目",
@@ -1139,6 +1138,7 @@
   "templateWorkflows": {
     "category": {
       "3D": "3D",
+      "All": "所有模板",
       "Area Composition": "区域组成",
       "Audio": "音频",
       "Basics": "基础",
@@ -1357,7 +1357,6 @@
     "title": "从模板开始"
   },
   "toastMessages": {
-    "cannotCreateSubgraph": "无法创建子图",
     "couldNotDetermineFileType": "无法确定文件类型",
     "dropFileError": "无法处理掉落的项目：{error}",
     "emptyCanvas": "画布为空",
@@ -1366,7 +1365,6 @@
     "errorSaveSetting": "保存设置 {id} 出错：{err}",
     "failedToAccessBillingPortal": "访问账单门户失败：{error}",
     "failedToApplyTexture": "应用纹理失败",
-    "failedToConvertToSubgraph": "无法将项目转换为子图",
     "failedToCreateCustomer": "创建客户失败：{error}",
     "failedToDownloadFile": "文件下载失败",
     "failedToExportModel": "无法将模型导出为 {format}",

src/schemas/comfyWorkflowSchema.ts

@@ -41,10 +41,10 @@ const zModelFile = z.object({
 
 const zGraphState = z
   .object({
-    lastGroupId: z.number(),
-    lastNodeId: z.number(),
-    lastLinkId: z.number(),
-    lastRerouteId: z.number()
+    lastGroupid: z.number().optional(),
+    lastNodeId: z.number().optional(),
+    lastLinkId: z.number().optional(),
+    lastRerouteId: z.number().optional()
   })
   .passthrough()
 
@@ -214,32 +214,6 @@ const zComfyNode = z
   })
   .passthrough()
 
-export const zSubgraphIO = zNodeInput.extend({
-  /** Slot ID (internal; never changes once instantiated). */
-  id: z.string().uuid(),
-  /** The data type this slot uses. Unlike nodes, this does not support legacy numeric types. */
-  type: z.string(),
-  /** Links connected to this slot, or `undefined` if not connected. An ouptut slot should only ever have one link. */
-  linkIds: z.array(z.number()).optional()
-})
-
-const zSubgraphInstance = z
-  .object({
-    id: zNodeId,
-    type: z.string().uuid(),
-    pos: zVector2,
-    size: zVector2,
-    flags: zFlags,
-    order: z.number(),
-    mode: z.number(),
-    inputs: z.array(zSubgraphIO).optional(),
-    outputs: z.array(zSubgraphIO).optional(),
-    widgets_values: zWidgetValues.optional(),
-    color: z.string().optional(),
-    bgcolor: z.string().optional()
-  })
-  .passthrough()
-
 const zGroup = z
   .object({
     id: z.number().optional(),
@@ -274,22 +248,9 @@ const zExtra = z
   })
   .passthrough()
 
-export const zGraphDefinitions = z.object({
-  subgraphs: z.lazy(() => z.array(zSubgraphDefinition))
-})
-
-export const zBaseExportableGraph = z.object({
-  /** Unique graph ID.  Automatically generated if not provided. */
-  id: z.string().uuid().optional(),
-  revision: z.number().optional(),
-  config: zConfig.optional().nullable(),
-  /** Details of the appearance and location of subgraphs shown in this graph. Similar to */
-  subgraphs: z.array(zSubgraphInstance).optional()
-})
-
 /** Schema version 0.4 */
-export const zComfyWorkflow = zBaseExportableGraph
-  .extend({
+export const zComfyWorkflow = z
+  .object({
     id: z.string().uuid().optional(),
     revision: z.number().optional(),
     last_node_id: zNodeId,
@@ -301,47 +262,13 @@ export const zComfyWorkflow = zBaseExportableGraph
     config: zConfig.optional().nullable(),
     extra: zExtra.optional().nullable(),
     version: z.number(),
-    models: z.array(zModelFile).optional(),
-    definitions: zGraphDefinitions.optional()
+    models: z.array(zModelFile).optional()
   })
   .passthrough()
 
-/** Required for recursive definition of subgraphs. */
-interface ComfyWorkflow1BaseType {
-  id?: string
-  revision?: number
-  version: 1
-  models?: z.infer<typeof zModelFile>[]
-  state: z.infer<typeof zGraphState>
-}
-
-/** Required for recursive definition of subgraphs w/ZodEffects. */
-interface ComfyWorkflow1BaseInput extends ComfyWorkflow1BaseType {
-  groups?: z.input<typeof zGroup>[]
-  nodes: z.input<typeof zComfyNode>[]
-  links?: z.input<typeof zComfyLinkObject>[]
-  floatingLinks?: z.input<typeof zComfyLinkObject>[]
-  reroutes?: z.input<typeof zReroute>[]
-  definitions?: {
-    subgraphs: SubgraphDefinitionBase<ComfyWorkflow1BaseInput>[]
-  }
-}
-
-/** Required for recursive definition of subgraphs w/ZodEffects. */
-interface ComfyWorkflow1BaseOutput extends ComfyWorkflow1BaseType {
-  groups?: z.output<typeof zGroup>[]
-  nodes: z.output<typeof zComfyNode>[]
-  links?: z.output<typeof zComfyLinkObject>[]
-  floatingLinks?: z.output<typeof zComfyLinkObject>[]
-  reroutes?: z.output<typeof zReroute>[]
-  definitions?: {
-    subgraphs: SubgraphDefinitionBase<ComfyWorkflow1BaseOutput>[]
-  }
-}
-
 /** Schema version 1 */
-export const zComfyWorkflow1 = zBaseExportableGraph
-  .extend({
+export const zComfyWorkflow1 = z
+  .object({
     id: z.string().uuid().optional(),
     revision: z.number().optional(),
     version: z.literal(1),
@@ -353,96 +280,7 @@ export const zComfyWorkflow1 = zBaseExportableGraph
     floatingLinks: z.array(zComfyLinkObject).optional(),
     reroutes: z.array(zReroute).optional(),
     extra: zExtra.optional().nullable(),
-    models: z.array(zModelFile).optional(),
-    definitions: z
-      .object({
-        subgraphs: z.lazy(
-          (): z.ZodArray<
-            z.ZodType<
-              SubgraphDefinitionBase<ComfyWorkflow1BaseOutput>,
-              z.ZodTypeDef,
-              SubgraphDefinitionBase<ComfyWorkflow1BaseInput>
-            >,
-            'many'
-          > => z.array(zSubgraphDefinition)
-        )
-      })
-      .optional()
-  })
-  .passthrough()
-
-export const zExportedSubgraphIONode = z.object({
-  id: zNodeId,
-  bounding: z.tuple([z.number(), z.number(), z.number(), z.number()]),
-  pinned: z.boolean().optional()
-})
-
-export const zExposedWidget = z.object({
-  id: z.string(),
-  name: z.string()
-})
-
-interface SubgraphDefinitionBase<
-  T extends ComfyWorkflow1BaseInput | ComfyWorkflow1BaseOutput
-> {
-  /** Unique graph ID.  Automatically generated if not provided. */
-  id: string
-  revision: number
-  name: string
-
-  inputNode: T extends ComfyWorkflow1BaseInput
-    ? z.input<typeof zExportedSubgraphIONode>
-    : z.output<typeof zExportedSubgraphIONode>
-  outputNode: T extends ComfyWorkflow1BaseInput
-    ? z.input<typeof zExportedSubgraphIONode>
-    : z.output<typeof zExportedSubgraphIONode>
-  /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */
-  inputs?: T extends ComfyWorkflow1BaseInput
-    ? z.input<typeof zSubgraphIO>[]
-    : z.output<typeof zSubgraphIO>[]
-  /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */
-  outputs?: T extends ComfyWorkflow1BaseInput
-    ? z.input<typeof zSubgraphIO>[]
-    : z.output<typeof zSubgraphIO>[]
-  /** A list of node widgets displayed in the parent graph, on the subgraph object. */
-  widgets?: T extends ComfyWorkflow1BaseInput
-    ? z.input<typeof zExposedWidget>[]
-    : z.output<typeof zExposedWidget>[]
-  definitions?: {
-    subgraphs: SubgraphDefinitionBase<T>[]
-  }
-}
-
-/** A subgraph definition `worfklow.definitions.subgraphs` */
-export const zSubgraphDefinition = zComfyWorkflow1
-  .extend({
-    /** Unique graph ID.  Automatically generated if not provided. */
-    id: z.string().uuid(),
-    revision: z.number(),
-    name: z.string(),
-    inputNode: zExportedSubgraphIONode,
-    outputNode: zExportedSubgraphIONode,
-
-    /** Ordered list of inputs to the subgraph itself. Similar to a reroute, with the input side in the graph, and the output side in the subgraph. */
-    inputs: z.array(zSubgraphIO).optional(),
-    /** Ordered list of outputs from the subgraph itself. Similar to a reroute, with the input side in the subgraph, and the output side in the graph. */
-    outputs: z.array(zSubgraphIO).optional(),
-    /** A list of node widgets displayed in the parent graph, on the subgraph object. */
-    widgets: z.array(zExposedWidget).optional(),
-    definitions: z
-      .object({
-        subgraphs: z.lazy(
-          (): z.ZodArray<
-            z.ZodType<
-              SubgraphDefinitionBase<ComfyWorkflow1BaseInput>,
-              z.ZodTypeDef,
-              SubgraphDefinitionBase<ComfyWorkflow1BaseInput>
-            >,
-            'many'
-          > => zSubgraphDefinition.array()
-        )
-      })
-      .optional()
+    models: z.array(zModelFile).optional()
   })
   .passthrough()
 

src/scripts/app.ts

@@ -30,14 +30,18 @@ import {
   isComboInputSpecV1,
   isComboInputSpecV2
 } from '@/schemas/nodeDefSchema'
+import { getFromWebmFile } from '@/scripts/metadata/ebml'
+import { getGltfBinaryMetadata } from '@/scripts/metadata/gltf'
+import { getFromIsobmffFile } from '@/scripts/metadata/isobmff'
+import { getMp3Metadata } from '@/scripts/metadata/mp3'
+import { getOggMetadata } from '@/scripts/metadata/ogg'
+import { getSvgMetadata } from '@/scripts/metadata/svg'
 import { useDialogService } from '@/services/dialogService'
 import { useExtensionService } from '@/services/extensionService'
 import { useLitegraphService } from '@/services/litegraphService'
-import { useSubgraphService } from '@/services/subgraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import { useApiKeyAuthStore } from '@/stores/apiKeyAuthStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
@@ -54,7 +58,6 @@ import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
 import { ExtensionManager } from '@/types/extensionTypes'
 import { ColorAdjustOptions, adjustColor } from '@/utils/colorUtil'
 import { graphToPrompt } from '@/utils/executionUtil'
-import { getFileHandler } from '@/utils/fileHandlers'
 import {
   executeWidgetsCallback,
   fixLinkInputSlots,
@@ -69,7 +72,14 @@ import { deserialiseAndCreate } from '@/utils/vintageClipboard'
 
 import { type ComfyApi, PromptExecutionError, api } from './api'
 import { defaultGraph } from './defaultGraph'
-import { importA1111 } from './pnginfo'
+import { pruneWidgets } from './domWidget'
+import {
+  getFlacMetadata,
+  getLatentMetadata,
+  getPngMetadata,
+  getWebpMetadata,
+  importA1111
+} from './pnginfo'
 import { $el, ComfyUI } from './ui'
 import { ComfyAppMenu } from './ui/menu/index'
 import { clone } from './utils'
@@ -705,23 +715,25 @@ export class ComfyApp {
   }
 
   #addAfterConfigureHandler() {
-    const { graph } = this
-    const { onConfigure } = graph
-    graph.onConfigure = function (...args) {
+    const app = this
+    const onConfigure = app.graph.onConfigure
+    app.graph.onConfigure = function (this: LGraph, ...args) {
       fixLinkInputSlots(this)
 
       // Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
-      for (const node of graph.nodes) {
+      for (const node of app.graph.nodes) {
         node.onGraphConfigured?.()
       }
 
       const r = onConfigure?.apply(this, args)
 
       // Fire after onConfigure, used by primitives to generate widget using input nodes config
-      for (const node of graph.nodes) {
+      for (const node of app.graph.nodes) {
         node.onAfterGraphConfigured?.()
       }
 
+      pruneWidgets(this.nodes)
+
       return r
     }
   }
@@ -753,21 +765,6 @@ export class ComfyApp {
 
     this.#graph = new LGraph()
 
-    // Register the subgraph - adds type wrapper for Litegraph's `createNode` factory
-    this.graph.events.addEventListener('subgraph-created', (e) => {
-      try {
-        const { subgraph, data } = e.detail
-        useSubgraphService().registerNewSubgraph(subgraph, data)
-      } catch (err) {
-        console.error('Failed to register subgraph', err)
-        useToastStore().add({
-          severity: 'error',
-          summary: 'Failed to register subgraph',
-          detail: err instanceof Error ? err.message : String(err)
-        })
-      }
-    })
-
     this.#addAfterConfigureHandler()
 
     this.canvas = new LGraphCanvas(canvasEl, this.graph)
@@ -780,30 +777,6 @@ export class ComfyApp {
     LiteGraph.alt_drag_do_clone_nodes = true
     LiteGraph.macGesturesRequireMac = false
 
-    this.canvas.canvas.addEventListener<'litegraph:set-graph'>(
-      'litegraph:set-graph',
-      (e) => {
-        // Assertion: Not yet defined in litegraph.
-        const { newGraph } = e.detail
-
-        const nodeSet = new Set(newGraph.nodes)
-        const widgetStore = useDomWidgetStore()
-
-        // Assertions: UnwrapRef
-        for (const { widget } of widgetStore.activeWidgetStates) {
-          if (!nodeSet.has(widget.node)) {
-            widgetStore.deactivateWidget(widget.id)
-          }
-        }
-
-        for (const { widget } of widgetStore.inactiveWidgetStates) {
-          if (nodeSet.has(widget.node)) {
-            widgetStore.activateWidget(widget.id)
-          }
-        }
-      }
-    )
-
     this.graph.start()
 
     // Ensure the canvas fills the window
@@ -1040,7 +1013,6 @@ export class ComfyApp {
       })
     }
     useWorkflowService().beforeLoadNewGraph()
-    useSubgraphService().loadSubgraphs(graphData)
 
     const missingNodeTypes: MissingNodeType[] = []
     const missingModels: ModelFile[] = []
@@ -1238,9 +1210,6 @@ export class ComfyApp {
           // Allow widgets to run callbacks before a prompt has been queued
           // e.g. random seed before every gen
           executeWidgetsCallback(this.graph.nodes, 'beforeQueued')
-          for (const subgraph of this.graph.subgraphs.values()) {
-            executeWidgetsCallback(subgraph.nodes, 'beforeQueued')
-          }
 
           const p = await this.graphToPrompt(this.graph, { queueNodeIds })
           try {
@@ -1283,13 +1252,9 @@ export class ComfyApp {
           executeWidgetsCallback(
             p.workflow.nodes
               .map((n) => this.graph.getNodeById(n.id))
-              .filter((n) => !!n),
+              .filter((n) => !!n) as LGraphNode[],
             'afterQueued'
           )
-          for (const subgraph of this.graph.subgraphs.values()) {
-            executeWidgetsCallback(subgraph.nodes, 'afterQueued')
-          }
-
           this.canvas.draw(true, true)
           await this.ui.queue.update()
         }
@@ -1319,44 +1284,161 @@ export class ComfyApp {
       return f.substring(0, p)
     }
     const fileName = removeExt(file.name)
-
-    // Get the appropriate file handler for this file type
-    const fileHandler = getFileHandler(file)
-
-    if (!fileHandler) {
-      // No handler found for this file type
-      this.showErrorOnFileLoad(file)
-      return
-    }
-
-    try {
-      // Process the file using the handler
-      const { workflow, prompt, parameters, jsonTemplateData } =
-        await fileHandler(file)
-
-      if (workflow) {
-        // We have a workflow, load it
-        await this.loadGraphData(workflow, true, true, fileName)
-      } else if (prompt) {
-        // We have a prompt in API format, load it
-        this.loadApiJson(prompt, fileName)
-      } else if (parameters) {
-        // We have A1111 parameters, import them
+    if (file.type === 'image/png') {
+      const pngInfo = await getPngMetadata(file)
+      if (pngInfo?.workflow) {
+        await this.loadGraphData(
+          JSON.parse(pngInfo.workflow),
+          true,
+          true,
+          fileName
+        )
+      } else if (pngInfo?.prompt) {
+        this.loadApiJson(JSON.parse(pngInfo.prompt), fileName)
+      } else if (pngInfo?.parameters) {
+        // Note: Not putting this in `importA1111` as it is mostly not used
+        // by external callers, and `importA1111` has no access to `app`.
         useWorkflowService().beforeLoadNewGraph()
-        importA1111(this.graph, parameters)
+        importA1111(this.graph, pngInfo.parameters)
         useWorkflowService().afterLoadNewGraph(
           fileName,
           this.graph.serialize() as unknown as ComfyWorkflowJSON
         )
-      } else if (jsonTemplateData) {
-        // We have template data from JSON
-        this.loadTemplateData(jsonTemplateData)
       } else {
-        // No usable data found in the file
         this.showErrorOnFileLoad(file)
       }
-    } catch (error) {
-      console.error('Error processing file:', error)
+    } else if (file.type === 'image/webp') {
+      const pngInfo = await getWebpMetadata(file)
+      // Support loading workflows from that webp custom node.
+      const workflow = pngInfo?.workflow || pngInfo?.Workflow
+      const prompt = pngInfo?.prompt || pngInfo?.Prompt
+
+      if (workflow) {
+        this.loadGraphData(JSON.parse(workflow), true, true, fileName)
+      } else if (prompt) {
+        this.loadApiJson(JSON.parse(prompt), fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (file.type === 'audio/mpeg') {
+      const { workflow, prompt } = await getMp3Metadata(file)
+      if (workflow) {
+        this.loadGraphData(workflow, true, true, fileName)
+      } else if (prompt) {
+        this.loadApiJson(prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (file.type === 'audio/ogg') {
+      const { workflow, prompt } = await getOggMetadata(file)
+      if (workflow) {
+        this.loadGraphData(workflow, true, true, fileName)
+      } else if (prompt) {
+        this.loadApiJson(prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (file.type === 'audio/flac' || file.type === 'audio/x-flac') {
+      const pngInfo = await getFlacMetadata(file)
+      const workflow = pngInfo?.workflow || pngInfo?.Workflow
+      const prompt = pngInfo?.prompt || pngInfo?.Prompt
+
+      if (workflow) {
+        this.loadGraphData(JSON.parse(workflow), true, true, fileName)
+      } else if (prompt) {
+        this.loadApiJson(JSON.parse(prompt), fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (file.type === 'video/webm') {
+      const webmInfo = await getFromWebmFile(file)
+      if (webmInfo.workflow) {
+        this.loadGraphData(webmInfo.workflow, true, true, fileName)
+      } else if (webmInfo.prompt) {
+        this.loadApiJson(webmInfo.prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (
+      file.type === 'video/mp4' ||
+      file.name?.endsWith('.mp4') ||
+      file.name?.endsWith('.mov') ||
+      file.name?.endsWith('.m4v') ||
+      file.type === 'video/quicktime' ||
+      file.type === 'video/x-m4v'
+    ) {
+      const mp4Info = await getFromIsobmffFile(file)
+      if (mp4Info.workflow) {
+        this.loadGraphData(mp4Info.workflow, true, true, fileName)
+      } else if (mp4Info.prompt) {
+        this.loadApiJson(mp4Info.prompt, fileName)
+      }
+    } else if (file.type === 'image/svg+xml' || file.name?.endsWith('.svg')) {
+      const svgInfo = await getSvgMetadata(file)
+      if (svgInfo.workflow) {
+        this.loadGraphData(svgInfo.workflow, true, true, fileName)
+      } else if (svgInfo.prompt) {
+        this.loadApiJson(svgInfo.prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (
+      file.type === 'model/gltf-binary' ||
+      file.name?.endsWith('.glb')
+    ) {
+      const gltfInfo = await getGltfBinaryMetadata(file)
+      if (gltfInfo.workflow) {
+        this.loadGraphData(gltfInfo.workflow, true, true, fileName)
+      } else if (gltfInfo.prompt) {
+        this.loadApiJson(gltfInfo.prompt, fileName)
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else if (
+      file.type === 'application/json' ||
+      file.name?.endsWith('.json')
+    ) {
+      const reader = new FileReader()
+      reader.onload = async () => {
+        const readerResult = reader.result as string
+        const jsonContent = JSON.parse(readerResult)
+        if (jsonContent?.templates) {
+          this.loadTemplateData(jsonContent)
+        } else if (this.isApiJson(jsonContent)) {
+          this.loadApiJson(jsonContent, fileName)
+        } else {
+          await this.loadGraphData(
+            JSON.parse(readerResult),
+            true,
+            true,
+            fileName
+          )
+        }
+      }
+      reader.readAsText(file)
+    } else if (
+      file.name?.endsWith('.latent') ||
+      file.name?.endsWith('.safetensors')
+    ) {
+      const info = await getLatentMetadata(file)
+      // TODO define schema to LatentMetadata
+      // @ts-expect-error
+      if (info.workflow) {
+        await this.loadGraphData(
+          // @ts-expect-error
+          JSON.parse(info.workflow),
+          true,
+          true,
+          fileName
+        )
+        // @ts-expect-error
+      } else if (info.prompt) {
+        // @ts-expect-error
+        this.loadApiJson(JSON.parse(info.prompt))
+      } else {
+        this.showErrorOnFileLoad(file)
+      }
+    } else {
       this.showErrorOnFileLoad(file)
     }
   }
@@ -1473,7 +1555,6 @@ export class ComfyApp {
   /**
    * Registers a Comfy web extension with the app
    * @param {ComfyExtension} extension
-   * @deprecated Use useExtensionService().registerExtension instead
    */
   registerExtension(extension: ComfyExtension) {
     useExtensionService().registerExtension(extension)
@@ -1569,8 +1650,6 @@ export class ComfyApp {
     const executionStore = useExecutionStore()
     executionStore.lastNodeErrors = null
     executionStore.lastExecutionError = null
-
-    useDomWidgetStore().clear()
   }
 
   clientPosToCanvasPos(pos: Vector2): Vector2 {

src/scripts/changeTracker.ts

@@ -6,7 +6,6 @@ import log from 'loglevel'
 import type { ExecutedWsMessage } from '@/schemas/apiSchema'
 import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 
 import { api } from './api'
@@ -38,10 +37,6 @@ export class ChangeTracker {
   ds?: { scale: number; offset: [number, number] }
   nodeOutputs?: Record<string, any>
 
-  private subgraphState?: {
-    navigation: string[]
-  }
-
   constructor(
     /**
      * The workflow that this change tracker is tracking
@@ -72,8 +67,6 @@ export class ChangeTracker {
       scale: app.canvas.ds.scale,
       offset: [app.canvas.ds.offset[0], app.canvas.ds.offset[1]]
     }
-    const navigation = useSubgraphNavigationStore().exportState()
-    this.subgraphState = navigation.length ? { navigation } : undefined
   }
 
   restore() {
@@ -84,16 +77,6 @@ export class ChangeTracker {
     if (this.nodeOutputs) {
       app.nodeOutputs = this.nodeOutputs
     }
-    if (this.subgraphState) {
-      const { navigation } = this.subgraphState
-      useSubgraphNavigationStore().restoreState(navigation)
-
-      const activeId = navigation.at(-1)
-      if (activeId) {
-        const subgraph = app.graph.subgraphs.get(activeId)
-        if (subgraph) app.canvas.setGraph(subgraph)
-      }
-    }
   }
 
   updateModified() {
@@ -393,14 +376,7 @@ export class ChangeTracker {
         return false
 
       // Compare other properties normally
-      for (const key of [
-        'links',
-        'floatingLinks',
-        'reroutes',
-        'groups',
-        'definitions',
-        'subgraphs'
-      ]) {
+      for (const key of ['links', 'floatingLinks', 'reroutes', 'groups']) {
         if (!_.isEqual(a[key], b[key])) {
           return false
         }
@@ -416,12 +392,7 @@ export class ChangeTracker {
     function sortGraphNodes(graph: ComfyWorkflowJSON) {
       return {
         links: graph.links,
-        floatingLinks: graph.floatingLinks,
-        reroutes: graph.reroutes,
         groups: graph.groups,
-        extra: graph.extra,
-        definitions: graph.definitions,
-        subgraphs: graph.subgraphs,
         nodes: graph.nodes.sort((a, b) => {
           if (typeof a.id === 'number' && typeof b.id === 'number') {
             return a.id - b.id

src/scripts/domWidget.ts

@@ -11,7 +11,7 @@ import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { generateUUID } from '@/utils/formatUtil'
 
-export interface BaseDOMWidget<V extends object | string = object | string>
+export interface BaseDOMWidget<V extends object | string>
   extends IBaseWidget<V, string, DOMWidgetOptions<V>> {
   // ICustomWidget properties
   type: string
@@ -330,8 +330,9 @@ LGraphNode.prototype.addDOMWidget = function <
 export const pruneWidgets = (nodes: LGraphNode[]) => {
   const nodeSet = new Set(nodes)
   const domWidgetStore = useDomWidgetStore()
-  for (const { widget } of domWidgetStore.widgetStates.values()) {
-    if (!nodeSet.has(widget.node)) {
+  for (const widgetState of domWidgetStore.widgetStates.values()) {
+    const widget = widgetState.widget
+    if (!nodeSet.has(widget.node as LGraphNode)) {
       domWidgetStore.unregisterWidget(widget.id)
     }
   }

src/services/litegraphService.ts

@@ -5,13 +5,10 @@ import {
   LGraphNode,
   LiteGraph,
   RenderShape,
-  type Subgraph,
-  SubgraphNode,
   type Vector2,
   createBounds
 } from '@comfyorg/litegraph'
 import type {
-  ExportedSubgraphInstance,
   ISerialisableNodeInput,
   ISerialisableNodeOutput,
   ISerialisedNode
@@ -38,7 +35,6 @@ import { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import { useWidgetStore } from '@/stores/widgetStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import {
   isImageNode,
@@ -60,260 +56,6 @@ export const useLitegraphService = () => {
   const widgetStore = useWidgetStore()
   const canvasStore = useCanvasStore()
 
-  // TODO: Dedupe `registerNodeDef`; this should remain synchronous.
-  function registerSubgraphNodeDef(
-    nodeDefV1: ComfyNodeDefV1,
-    subgraph: Subgraph,
-    instanceData: ExportedSubgraphInstance
-  ) {
-    const node = class ComfyNode extends SubgraphNode {
-      static comfyClass: string
-      static override title: string
-      static override category: string
-      static nodeData: ComfyNodeDefV1 & ComfyNodeDefV2
-
-      /**
-       * @internal The initial minimum size of the node.
-       */
-      #initialMinSize = { width: 1, height: 1 }
-      /**
-       * @internal The key for the node definition in the i18n file.
-       */
-      get #nodeKey(): string {
-        return `nodeDefs.${normalizeI18nKey(ComfyNode.nodeData.name)}`
-      }
-
-      constructor() {
-        super(app.graph, subgraph, instanceData)
-
-        this.#setupStrokeStyles()
-        this.#addInputs(ComfyNode.nodeData.inputs)
-        this.#addOutputs(ComfyNode.nodeData.outputs)
-        this.#setInitialSize()
-        this.serialize_widgets = true
-        void extensionService.invokeExtensionsAsync('nodeCreated', this)
-      }
-
-      /**
-       * @internal Setup stroke styles for the node under various conditions.
-       */
-      #setupStrokeStyles() {
-        this.strokeStyles['running'] = function (this: LGraphNode) {
-          if (this.id == app.runningNodeId) {
-            return { color: '#0f0' }
-          }
-        }
-        this.strokeStyles['nodeError'] = function (this: LGraphNode) {
-          if (app.lastNodeErrors?.[this.id]?.errors) {
-            return { color: 'red' }
-          }
-        }
-        this.strokeStyles['dragOver'] = function (this: LGraphNode) {
-          if (app.dragOverNode?.id == this.id) {
-            return { color: 'dodgerblue' }
-          }
-        }
-        this.strokeStyles['executionError'] = function (this: LGraphNode) {
-          if (app.lastExecutionError?.node_id == this.id) {
-            return { color: '#f0f', lineWidth: 2 }
-          }
-        }
-      }
-
-      /**
-       * @internal Add input sockets to the node. (No widget)
-       */
-      #addInputSocket(inputSpec: InputSpec) {
-        const inputName = inputSpec.name
-        const nameKey = `${this.#nodeKey}.inputs.${normalizeI18nKey(inputName)}.name`
-        const widgetConstructor = widgetStore.widgets.get(
-          inputSpec.widgetType ?? inputSpec.type
-        )
-        if (widgetConstructor && !inputSpec.forceInput) return
-
-        this.addInput(inputName, inputSpec.type, {
-          shape: inputSpec.isOptional ? RenderShape.HollowCircle : undefined,
-          localized_name: st(nameKey, inputName)
-        })
-      }
-
-      /**
-       * @internal Add a widget to the node. For both primitive types and custom widgets
-       * (unless `socketless`), an input socket is also added.
-       */
-      #addInputWidget(inputSpec: InputSpec) {
-        const widgetInputSpec = { ...inputSpec }
-        if (inputSpec.widgetType) {
-          widgetInputSpec.type = inputSpec.widgetType
-        }
-        const inputName = inputSpec.name
-        const nameKey = `${this.#nodeKey}.inputs.${normalizeI18nKey(inputName)}.name`
-        const widgetConstructor = widgetStore.widgets.get(widgetInputSpec.type)
-        if (!widgetConstructor || inputSpec.forceInput) return
-
-        const {
-          widget,
-          minWidth = 1,
-          minHeight = 1
-        } = widgetConstructor(
-          this,
-          inputName,
-          transformInputSpecV2ToV1(widgetInputSpec),
-          app
-        ) ?? {}
-
-        if (widget) {
-          widget.label = st(nameKey, widget.label ?? inputName)
-          widget.options ??= {}
-          Object.assign(widget.options, {
-            advanced: inputSpec.advanced,
-            hidden: inputSpec.hidden
-          })
-        }
-
-        if (!widget?.options?.socketless) {
-          const inputSpecV1 = transformInputSpecV2ToV1(widgetInputSpec)
-          this.addInput(inputName, inputSpec.type, {
-            shape: inputSpec.isOptional ? RenderShape.HollowCircle : undefined,
-            localized_name: st(nameKey, inputName),
-            widget: { name: inputName, [GET_CONFIG]: () => inputSpecV1 }
-          })
-        }
-
-        this.#initialMinSize.width = Math.max(
-          this.#initialMinSize.width,
-          minWidth
-        )
-        this.#initialMinSize.height = Math.max(
-          this.#initialMinSize.height,
-          minHeight
-        )
-      }
-
-      /**
-       * @internal Add inputs to the node.
-       */
-      #addInputs(inputs: Record<string, InputSpec>) {
-        for (const inputSpec of Object.values(inputs))
-          this.#addInputSocket(inputSpec)
-        for (const inputSpec of Object.values(inputs))
-          this.#addInputWidget(inputSpec)
-      }
-
-      /**
-       * @internal Add outputs to the node.
-       */
-      #addOutputs(outputs: OutputSpec[]) {
-        for (const output of outputs) {
-          const { name, type, is_list } = output
-          const shapeOptions = is_list ? { shape: LiteGraph.GRID_SHAPE } : {}
-          const nameKey = `${this.#nodeKey}.outputs.${output.index}.name`
-          const typeKey = `dataTypes.${normalizeI18nKey(type)}`
-          const outputOptions = {
-            ...shapeOptions,
-            // If the output name is different from the output type, use the output name.
-            // e.g.
-            // - type ("INT"); name ("Positive") => translate name
-            // - type ("FLOAT"); name ("FLOAT") => translate type
-            localized_name:
-              type !== name ? st(nameKey, name) : st(typeKey, name)
-          }
-          this.addOutput(name, type, outputOptions)
-        }
-      }
-
-      /**
-       * @internal Set the initial size of the node.
-       */
-      #setInitialSize() {
-        const s = this.computeSize()
-        // Expand the width a little to fit widget values on screen.
-        const pad =
-          this.widgets?.length &&
-          !useSettingStore().get('LiteGraph.Node.DefaultPadding')
-        s[0] = Math.max(this.#initialMinSize.width, s[0] + (pad ? 60 : 0))
-        s[1] = Math.max(this.#initialMinSize.height, s[1])
-        this.setSize(s)
-      }
-
-      /**
-       * Configure the node from a serialised node. Keep 'name', 'type', 'shape',
-       * and 'localized_name' information from the original node definition.
-       */
-      override configure(data: ISerialisedNode): void {
-        const RESERVED_KEYS = ['name', 'type', 'shape', 'localized_name']
-
-        // Note: input name is unique in a node definition, so we can lookup
-        // input by name.
-        const inputByName = new Map<string, ISerialisableNodeInput>(
-          data.inputs?.map((input) => [input.name, input]) ?? []
-        )
-        // Inputs defined by the node definition.
-        const definedInputNames = new Set(
-          this.inputs.map((input) => input.name)
-        )
-        const definedInputs = this.inputs.map((input) => {
-          const inputData = inputByName.get(input.name)
-          return inputData
-            ? {
-                ...inputData,
-                // Whether the input has associated widget follows the
-                // original node definition.
-                ..._.pick(input, RESERVED_KEYS.concat('widget'))
-              }
-            : input
-        })
-        // Extra inputs that potentially dynamically added by custom js logic.
-        const extraInputs = data.inputs?.filter(
-          (input) => !definedInputNames.has(input.name)
-        )
-        data.inputs = [...definedInputs, ...(extraInputs ?? [])]
-
-        // Note: output name is not unique, so we cannot lookup output by name.
-        // Use index instead.
-        data.outputs = _.zip(this.outputs, data.outputs).map(
-          ([output, outputData]) => {
-            // If there are extra outputs in the serialised node, use them directly.
-            // There are currently custom nodes that dynamically add outputs via
-            // js logic.
-            if (!output) return outputData as ISerialisableNodeOutput
-
-            return outputData
-              ? {
-                  ...outputData,
-                  ..._.pick(output, RESERVED_KEYS)
-                }
-              : output
-          }
-        )
-
-        data.widgets_values = migrateWidgetsValues(
-          ComfyNode.nodeData.inputs,
-          this.widgets ?? [],
-          data.widgets_values ?? []
-        )
-
-        super.configure(data)
-      }
-    }
-
-    addNodeContextMenuHandler(node)
-    addDrawBackgroundHandler(node)
-    addNodeKeyHandler(node)
-    // Note: Some extensions expects node.comfyClass to be set in
-    // `beforeRegisterNodeDef`.
-    node.prototype.comfyClass = nodeDefV1.name
-    node.comfyClass = nodeDefV1.name
-
-    const nodeDef = new ComfyNodeDefImpl(nodeDefV1)
-    node.nodeData = nodeDef
-    LiteGraph.registerNodeType(subgraph.id, node)
-    // Note: Do not following assignments before `LiteGraph.registerNodeType`
-    // because `registerNodeType` will overwrite the assignments.
-    node.category = nodeDef.category
-    node.title = nodeDef.display_name || nodeDef.name
-  }
-
   async function registerNodeDef(nodeId: string, nodeDefV1: ComfyNodeDefV1) {
     const node = class ComfyNode extends LGraphNode {
       static comfyClass: string
@@ -880,10 +622,8 @@ export const useLitegraphService = () => {
       options
     )
 
-    const graph = useWorkflowStore().activeSubgraph ?? app.graph
-
     // @ts-expect-error fixme ts strict error
-    graph.add(node)
+    app.graph.add(node)
     // @ts-expect-error fixme ts strict error
     return node
   }
@@ -925,7 +665,6 @@ export const useLitegraphService = () => {
 
   return {
     registerNodeDef,
-    registerSubgraphNodeDef,
     addNodeOnGraph,
     getCanvasCenter,
     goToNode,

src/services/subgraphService.ts

@@ -1,91 +0,0 @@
-import {
-  type ExportedSubgraph,
-  type ExportedSubgraphInstance,
-  type Subgraph
-} from '@comfyorg/litegraph'
-
-import type { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
-import type { ComfyNodeDef as ComfyNodeDefV1 } from '@/schemas/nodeDefSchema'
-import { app as comfyApp } from '@/scripts/app'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-
-import { useLitegraphService } from './litegraphService'
-
-export const useSubgraphService = () => {
-  const nodeDefStore = useNodeDefStore()
-
-  /** Loads a single subgraph definition and registers it with the node def store */
-  function registerLitegraphNode(
-    nodeDef: ComfyNodeDefV1,
-    subgraph: Subgraph,
-    exportedSubgraph: ExportedSubgraph
-  ) {
-    const instanceData: ExportedSubgraphInstance = {
-      id: -1,
-      type: exportedSubgraph.id,
-      pos: [0, 0],
-      size: [100, 100],
-      inputs: [],
-      outputs: [],
-      flags: {},
-      order: 0,
-      mode: 0
-    }
-
-    useLitegraphService().registerSubgraphNodeDef(
-      nodeDef,
-      subgraph,
-      instanceData
-    )
-  }
-
-  function createNodeDef(exportedSubgraph: ExportedSubgraph) {
-    const { id, name } = exportedSubgraph
-
-    const nodeDef: ComfyNodeDefV1 = {
-      input: { required: {} },
-      output: [],
-      output_is_list: [],
-      output_name: [],
-      output_tooltips: [],
-      name: id,
-      display_name: name,
-      description: `Subgraph node for ${name}`,
-      category: 'subgraph',
-      output_node: false,
-      python_module: 'nodes'
-    }
-
-    nodeDefStore.addNodeDef(nodeDef)
-    return nodeDef
-  }
-
-  /** Loads all exported subgraph definitions from workflow */
-  function loadSubgraphs(graphData: ComfyWorkflowJSON) {
-    const subgraphs = graphData.definitions?.subgraphs
-    if (!subgraphs) return
-
-    // Assertion: overriding Zod schema
-    for (const subgraphData of subgraphs as ExportedSubgraph[]) {
-      const subgraph =
-        comfyApp.graph.subgraphs.get(subgraphData.id) ??
-        comfyApp.graph.createSubgraph(subgraphData)
-
-      registerNewSubgraph(subgraph, subgraphData)
-    }
-  }
-
-  /** Registers a new subgraph (e.g. user converted from nodes) */
-  function registerNewSubgraph(
-    subgraph: Subgraph,
-    exportedSubgraph: ExportedSubgraph
-  ) {
-    const nodeDef = createNodeDef(exportedSubgraph)
-    registerLitegraphNode(nodeDef, subgraph, exportedSubgraph)
-  }
-
-  return {
-    loadSubgraphs,
-    registerNewSubgraph
-  }
-}

src/services/workflowService.ts

@@ -7,7 +7,6 @@ import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import { app } from '@/scripts/app'
 import { blankGraph, defaultGraph } from '@/scripts/defaultGraph'
 import { downloadBlob } from '@/scripts/utils'
-import { useDomWidgetStore } from '@/stores/domWidgetStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
@@ -21,7 +20,6 @@ export const useWorkflowService = () => {
   const workflowStore = useWorkflowStore()
   const toastStore = useToastStore()
   const dialogService = useDialogService()
-  const domWidgetStore = useDomWidgetStore()
 
   async function getFilename(defaultName: string): Promise<string | null> {
     if (settingStore.get('Comfy.PromptFilename')) {
@@ -287,8 +285,11 @@ export const useWorkflowService = () => {
    */
   const beforeLoadNewGraph = () => {
     // Use workspaceStore here as it is patched in unit tests.
-    useWorkspaceStore().workflow.activeWorkflow?.changeTracker?.store()
-    domWidgetStore.clear()
+    const workflowStore = useWorkspaceStore().workflow
+    const activeWorkflow = workflowStore.activeWorkflow
+    if (activeWorkflow) {
+      activeWorkflow.changeTracker.store()
+    }
   }
 
   /**
@@ -344,7 +345,8 @@ export const useWorkflowService = () => {
     options: { position?: Vector2 } = {}
   ) => {
     const loadedWorkflow = await workflow.load()
-    const workflowJSON = toRaw(loadedWorkflow.initialState)
+    const data = loadedWorkflow.initialState
+    const workflowJSON = data
     const old = localStorage.getItem('litegrapheditor_clipboard')
     // unknown conversion: ComfyWorkflowJSON is stricter than LiteGraph's
     // serialisation schema.

src/stores/domWidgetStore.ts

@@ -2,7 +2,7 @@
  * Stores all DOM widgets that are used in the canvas.
  */
 import { defineStore } from 'pinia'
-import { type Raw, computed, markRaw, ref } from 'vue'
+import { type Raw, markRaw, ref } from 'vue'
 
 import type { PositionConfig } from '@/composables/element/useAbsolutePosition'
 import type { BaseDOMWidget } from '@/scripts/domWidget'
@@ -13,20 +13,11 @@ export interface DomWidgetState extends PositionConfig {
   visible: boolean
   readonly: boolean
   zIndex: number
-  /** If the widget belongs to the current graph/subgraph. */
-  active: boolean
 }
 
 export const useDomWidgetStore = defineStore('domWidget', () => {
   const widgetStates = ref<Map<string, DomWidgetState>>(new Map())
 
-  const activeWidgetStates = computed(() =>
-    [...widgetStates.value.values()].filter((state) => state.active)
-  )
-  const inactiveWidgetStates = computed(() =>
-    [...widgetStates.value.values()].filter((state) => !state.active)
-  )
-
   // Register a widget with the store
   const registerWidget = <V extends object | string>(
     widget: BaseDOMWidget<V>
@@ -37,8 +28,7 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
       readonly: false,
       zIndex: 0,
       pos: [0, 0],
-      size: [0, 0],
-      active: true
+      size: [0, 0]
     })
   }
 
@@ -47,28 +37,9 @@ export const useDomWidgetStore = defineStore('domWidget', () => {
     widgetStates.value.delete(widgetId)
   }
 
-  const activateWidget = (widgetId: string) => {
-    const state = widgetStates.value.get(widgetId)
-    if (state) state.active = true
-  }
-
-  const deactivateWidget = (widgetId: string) => {
-    const state = widgetStates.value.get(widgetId)
-    if (state) state.active = false
-  }
-
-  const clear = () => {
-    widgetStates.value.clear()
-  }
-
   return {
     widgetStates,
-    activeWidgetStates,
-    inactiveWidgetStates,
     registerWidget,
-    unregisterWidget,
-    activateWidget,
-    deactivateWidget,
-    clear
+    unregisterWidget
   }
 })

src/stores/executionStore.ts

@@ -1,4 +1,3 @@
-import type { LGraph, Subgraph } from '@comfyorg/litegraph'
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 
@@ -21,9 +20,9 @@ import type {
   NodeId
 } from '@/schemas/comfyWorkflowSchema'
 import { api } from '@/scripts/api'
+import { app } from '@/scripts/app'
 
-import { useCanvasStore } from './graphStore'
-import { ComfyWorkflow, useWorkflowStore } from './workflowStore'
+import { ComfyWorkflow } from './workflowStore'
 
 export interface QueuedPrompt {
   /**
@@ -38,9 +37,6 @@ export interface QueuedPrompt {
 }
 
 export const useExecutionStore = defineStore('execution', () => {
-  const workflowStore = useWorkflowStore()
-  const canvasStore = useCanvasStore()
-
   const clientId = ref<string | null>(null)
   const activePromptId = ref<string | null>(null)
   const queuedPrompts = ref<Record<NodeId, QueuedPrompt>>({})
@@ -58,64 +54,12 @@ export const useExecutionStore = defineStore('execution', () => {
     if (!canvasState) return null
 
     return (
-      canvasState.nodes.find((n) => String(n.id) === executingNodeId.value) ??
-      null
+      canvasState.nodes.find(
+        (n: ComfyNode) => String(n.id) === executingNodeId.value
+      ) ?? null
     )
   })
 
-  const subgraphNodeIdToSubgraph = (id: string, graph: LGraph | Subgraph) => {
-    const node = graph.getNodeById(id)
-    if (node?.isSubgraphNode()) return node.subgraph
-  }
-
-  /**
-   * Recursively get the subgraph objects for the given subgraph instance IDs
-   * @param currentGraph The current graph
-   * @param subgraphNodeIds The instance IDs
-   * @param subgraphs The subgraphs
-   * @returns The subgraphs that correspond to each of the instance IDs.
-   */
-  const getSubgraphsFromInstanceIds = (
-    currentGraph: LGraph | Subgraph,
-    subgraphNodeIds: string[],
-    subgraphs: Subgraph[] = []
-  ): Subgraph[] => {
-    // Last segment is the node portion; nothing to do.
-    if (subgraphNodeIds.length === 1) return subgraphs
-
-    const currentPart = subgraphNodeIds.shift()
-    if (currentPart === undefined) return subgraphs
-
-    const subgraph = subgraphNodeIdToSubgraph(currentPart, currentGraph)
-    if (!subgraph) throw new Error(`Subgraph not found: ${currentPart}`)
-
-    subgraphs.push(subgraph)
-    return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
-  }
-
-  const executionIdToCurrentId = (id: string) => {
-    const subgraph = workflowStore.activeSubgraph
-
-    // Short-circuit: ID belongs to the parent workflow / no active subgraph
-    if (!id.includes(':')) {
-      return !subgraph ? id : undefined
-    } else if (!subgraph) {
-      return
-    }
-
-    // Parse the hierarchical ID (e.g., "123:456:789")
-    const subgraphNodeIds = id.split(':')
-
-    // If the last subgraph is the active subgraph, return the node ID
-    const subgraphs = getSubgraphsFromInstanceIds(
-      subgraph.rootGraph,
-      subgraphNodeIds
-    )
-    if (subgraphs.at(-1) === subgraph) {
-      return subgraphNodeIds.at(-1)
-    }
-  }
-
   // This is the progress of the currently executing node, if any
   const _executingNodeProgress = ref<ProgressWsMessage | null>(null)
   const executingNodeProgress = computed(() =>
@@ -212,7 +156,7 @@ export const useExecutionStore = defineStore('execution', () => {
     activePrompt.value.nodes[e.detail.node] = true
   }
 
-  function handleExecuting(e: CustomEvent<NodeId | null>): void {
+  function handleExecuting(e: CustomEvent<NodeId | null>) {
     // Clear the current node progress when a new node starts executing
     _executingNodeProgress.value = null
 
@@ -222,16 +166,12 @@ export const useExecutionStore = defineStore('execution', () => {
       // Seems sometimes nodes that are cached fire executing but not executed
       activePrompt.value.nodes[executingNodeId.value] = true
     }
-    if (typeof e.detail === 'string') {
-      executingNodeId.value = executionIdToCurrentId(e.detail) ?? null
-    } else {
-      executingNodeId.value = e.detail
-      if (executingNodeId.value === null) {
-        if (activePromptId.value) {
-          delete queuedPrompts.value[activePromptId.value]
-        }
-        activePromptId.value = null
+    executingNodeId.value = e.detail
+    if (executingNodeId.value === null) {
+      if (activePromptId.value) {
+        delete queuedPrompts.value[activePromptId.value]
       }
+      activePromptId.value = null
     }
   }
 
@@ -252,31 +192,19 @@ export const useExecutionStore = defineStore('execution', () => {
     lastExecutionError.value = e.detail
   }
 
-  function getNodeIdIfExecuting(nodeId: string | number) {
-    const nodeIdStr = String(nodeId)
-    return nodeIdStr.includes(':')
-      ? workflowStore.executionIdToCurrentId(nodeIdStr)
-      : nodeIdStr
-  }
-
   function handleProgressText(e: CustomEvent<ProgressTextWsMessage>) {
     const { nodeId, text } = e.detail
     if (!text || !nodeId) return
 
-    // Handle hierarchical node IDs for subgraphs
-    const currentId = getNodeIdIfExecuting(nodeId)
-    const node = canvasStore.getCanvas().graph?.getNodeById(currentId)
+    const node = app.graph.getNodeById(nodeId)
     if (!node) return
 
     useNodeProgressText().showTextPreview(node, text)
   }
 
   function handleDisplayComponent(e: CustomEvent<DisplayComponentWsMessage>) {
-    const { node_id: nodeId, component, props = {} } = e.detail
-
-    // Handle hierarchical node IDs for subgraphs
-    const currentId = getNodeIdIfExecuting(nodeId)
-    const node = canvasStore.getCanvas().graph?.getNodeById(currentId)
+    const { node_id, component, props = {} } = e.detail
+    const node = app.graph.getNodeById(node_id)
     if (!node) return
 
     if (component === 'ChatHistoryWidget') {

src/stores/graphStore.ts

@@ -3,7 +3,7 @@ import type { Positionable } from '@comfyorg/litegraph/dist/interfaces'
 import { defineStore } from 'pinia'
 import { type Raw, computed, markRaw, ref, shallowRef } from 'vue'
 
-import { isLGraphGroup, isLGraphNode, isReroute } from '@/utils/litegraphUtil'
+import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
 
 export const useTitleEditorStore = defineStore('titleEditor', () => {
   const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
@@ -31,7 +31,6 @@ export const useCanvasStore = defineStore('canvas', () => {
 
   const nodeSelected = computed(() => selectedItems.value.some(isLGraphNode))
   const groupSelected = computed(() => selectedItems.value.some(isLGraphGroup))
-  const rerouteSelected = computed(() => selectedItems.value.some(isReroute))
 
   const getCanvas = () => {
     if (!canvas.value) throw new Error('getCanvas: canvas is null')
@@ -43,7 +42,6 @@ export const useCanvasStore = defineStore('canvas', () => {
     selectedItems,
     nodeSelected,
     groupSelected,
-    rerouteSelected,
     updateSelectedItems,
     getCanvas
   }

src/stores/nodeDefStore.ts

@@ -306,7 +306,8 @@ export const useNodeDefStore = defineStore('nodeDef', () => {
   }
   function fromLGraphNode(node: LGraphNode): ComfyNodeDefImpl | null {
     // Frontend-only nodes don't have nodeDef
-    // @ts-expect-error Optional chaining used in index
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore Optional chaining used in index
     return nodeDefsByName.value[node.constructor?.nodeData?.name] ?? null
   }
 

src/stores/subgraphNavigationStore.ts

@@ -1,87 +0,0 @@
-import type { Subgraph } from '@comfyorg/litegraph'
-import { defineStore } from 'pinia'
-import { computed, shallowReactive, shallowRef, watch } from 'vue'
-
-import { app } from '@/scripts/app'
-import { isNonNullish } from '@/utils/typeGuardUtil'
-
-import { useWorkflowStore } from './workflowStore'
-
-/**
- * Stores the current subgraph navigation state; a stack representing subgraph
- * navigation history from the root graph to the subgraph that is currently
- * open.
- */
-export const useSubgraphNavigationStore = defineStore(
-  'subgraphNavigation',
-  () => {
-    const workflowStore = useWorkflowStore()
-
-    /** The currently opened subgraph. */
-    const activeSubgraph = shallowRef<Subgraph>()
-
-    /** The stack of subgraph IDs from the root graph to the currently opened subgraph. */
-    const idStack = shallowReactive<string[]>([])
-
-    /**
-     * A stack representing subgraph navigation history from the root graph to
-     * the current opened subgraph.
-     */
-    const navigationStack = computed(() =>
-      idStack.map((id) => app.graph.subgraphs.get(id)).filter(isNonNullish)
-    )
-
-    /**
-     * Restore the navigation stack from a list of subgraph IDs.
-     * @param subgraphIds The list of subgraph IDs to restore the navigation stack from.
-     * @see exportState
-     */
-    const restoreState = (subgraphIds: string[]) => {
-      idStack.length = 0
-      for (const id of subgraphIds) idStack.push(id)
-    }
-
-    /**
-     * Export the navigation stack as a list of subgraph IDs.
-     * @returns The list of subgraph IDs, ending with the currently active subgraph.
-     * @see restoreState
-     */
-    const exportState = () => [...idStack]
-
-    // Reset on workflow change
-    watch(
-      () => workflowStore.activeWorkflow,
-      () => (idStack.length = 0)
-    )
-
-    // Update navigation stack when opened subgraph changes
-    watch(
-      () => workflowStore.activeSubgraph,
-      (subgraph) => {
-        // Navigated back to the root graph
-        if (!subgraph) {
-          idStack.length = 0
-          return
-        }
-
-        const index = idStack.lastIndexOf(subgraph.id)
-        const lastIndex = idStack.length - 1
-
-        if (index === -1) {
-          // Opened a new subgraph
-          idStack.push(subgraph.id)
-        } else if (index !== lastIndex) {
-          // Navigated to a different subgraph
-          idStack.splice(index + 1, lastIndex - index)
-        }
-      }
-    )
-
-    return {
-      activeSubgraph,
-      navigationStack,
-      restoreState,
-      exportState
-    }
-  }
-)

src/stores/workflowStore.ts

@@ -1,7 +1,6 @@
-import type { LGraph, Subgraph } from '@comfyorg/litegraph'
 import _ from 'lodash'
 import { defineStore } from 'pinia'
-import { type Raw, computed, markRaw, ref, shallowRef, watch } from 'vue'
+import { computed, markRaw, ref, watch } from 'vue'
 
 import { ComfyWorkflowJSON } from '@/schemas/comfyWorkflowSchema'
 import { api } from '@/scripts/api'
@@ -157,12 +156,12 @@ export interface WorkflowStore {
   syncWorkflows: (dir?: string) => Promise<void>
   reorderWorkflows: (from: number, to: number) => void
 
+  /** An ordered list of all parent subgraphs, ending with the current subgraph. */
+  subgraphNamePath: string[]
   /** `true` if any subgraph is currently being viewed. */
   isSubgraphActive: boolean
-  activeSubgraph: Subgraph | undefined
   /** Updates the {@link subgraphNamePath} and {@link isSubgraphActive} values. */
   updateActiveGraph: () => void
-  executionIdToCurrentId: (id: string) => any
 }
 
 export const useWorkflowStore = defineStore('workflow', () => {
@@ -428,61 +427,24 @@ export const useWorkflowStore = defineStore('workflow', () => {
     }
   }
 
+  /** @see WorkflowStore.subgraphNamePath */
+  const subgraphNamePath = ref<string[]>([])
   /** @see WorkflowStore.isSubgraphActive */
   const isSubgraphActive = ref(false)
 
-  /** @see WorkflowStore.activeSubgraph */
-  const activeSubgraph = shallowRef<Raw<Subgraph>>()
-
   /** @see WorkflowStore.updateActiveGraph */
   const updateActiveGraph = () => {
-    const subgraph = comfyApp.canvas?.subgraph
-    activeSubgraph.value = subgraph ? markRaw(subgraph) : undefined
     if (!comfyApp.canvas) return
 
+    const { subgraph } = comfyApp.canvas
     isSubgraphActive.value = isSubgraph(subgraph)
-  }
 
-  const subgraphNodeIdToSubgraph = (id: string, graph: LGraph | Subgraph) => {
-    const node = graph.getNodeById(id)
-    if (node?.isSubgraphNode()) return node.subgraph
-  }
+    if (subgraph) {
+      const [, ...pathFromRoot] = subgraph.pathToRootGraph
 
-  const getSubgraphsFromInstanceIds = (
-    currentGraph: LGraph | Subgraph,
-    subgraphNodeIds: string[],
-    subgraphs: Subgraph[] = []
-  ): Subgraph[] => {
-    const currentPart = subgraphNodeIds.shift()
-    if (currentPart === undefined) return subgraphs
-
-    const subgraph = subgraphNodeIdToSubgraph(currentPart, currentGraph)
-    if (subgraph === undefined) throw new Error('Subgraph not found')
-
-    subgraphs.push(subgraph)
-    return getSubgraphsFromInstanceIds(subgraph, subgraphNodeIds, subgraphs)
-  }
-
-  const executionIdToCurrentId = (id: string) => {
-    const subgraph = activeSubgraph.value
-
-    // Short-circuit: ID belongs to the parent workflow / no active subgraph
-    if (!id.includes(':')) {
-      return !subgraph ? id : undefined
-    } else if (!subgraph) {
-      return
-    }
-
-    // Parse the hierarchical ID (e.g., "123:456:789")
-    const subgraphNodeIds = id.split(':')
-
-    // Start from the root graph
-    const { graph } = comfyApp
-
-    // If the last subgraph is the active subgraph, return the node ID
-    const subgraphs = getSubgraphsFromInstanceIds(graph, subgraphNodeIds)
-    if (subgraphs.at(-1) === subgraph) {
-      return subgraphNodeIds.at(-1)
+      subgraphNamePath.value = pathFromRoot.map((graph) => graph.name)
+    } else {
+      subgraphNamePath.value = []
     }
   }
 
@@ -511,10 +473,9 @@ export const useWorkflowStore = defineStore('workflow', () => {
     getWorkflowByPath,
     syncWorkflows,
 
+    subgraphNamePath,
     isSubgraphActive,
-    activeSubgraph,
-    updateActiveGraph,
-    executionIdToCurrentId
+    updateActiveGraph
   }
 }) satisfies () => WorkflowStore
 

src/stores/workflowTemplatesStore.ts

@@ -101,7 +101,51 @@ export const useWorkflowTemplatesStore = defineStore(
       )
     })
 
+    // Create an "All" category that combines all templates
+    const createAllCategory = () => {
+      // First, get core templates with source module added
+      const coreTemplatesWithSourceModule = coreTemplates.value.flatMap(
+        (category) =>
+          // For each template in each category, add the sourceModule and pass through any localized fields
+          category.templates.map((template) => {
+            // Get localized template with its original category title for i18n lookup
+            const localizedTemplate = addLocalizedFieldsToTemplate(
+              template,
+              category.title
+            )
+            return {
+              ...localizedTemplate,
+              sourceModule: category.moduleName
+            }
+          })
+      )
+
+      // Now handle custom templates
+      const customTemplatesWithSourceModule = Object.entries(
+        customTemplates.value
+      ).flatMap(([moduleName, templates]) =>
+        templates.map((name) => ({
+          name,
+          mediaType: 'image',
+          mediaSubtype: 'jpg',
+          description: name,
+          sourceModule: moduleName
+        }))
+      )
+
+      return {
+        moduleName: 'all',
+        title: 'All',
+        localizedTitle: st('templateWorkflows.category.All', 'All Templates'),
+        templates: [
+          ...coreTemplatesWithSourceModule,
+          ...customTemplatesWithSourceModule
+        ]
+      }
+    }
+
     const groupedTemplates = computed<TemplateGroup[]>(() => {
+      // Get regular categories
       const allTemplates = [
         ...sortCategoryTemplates(coreTemplates.value).map(
           localizeTemplateCategory
@@ -124,7 +168,8 @@ export const useWorkflowTemplatesStore = defineStore(
         )
       ]
 
-      return Object.entries(
+      // Group templates by their main category
+      const groupedByCategory = Object.entries(
         groupBy(allTemplates, (template) =>
           template.moduleName === 'default'
             ? st(
@@ -134,6 +179,21 @@ export const useWorkflowTemplatesStore = defineStore(
             : st('templateWorkflows.category.Custom Nodes', 'Custom Nodes')
         )
       ).map(([label, modules]) => ({ label, modules }))
+
+      // Insert the "All" category at the top of the "ComfyUI Examples" group
+      const comfyExamplesGroupIndex = groupedByCategory.findIndex(
+        (group) =>
+          group.label ===
+          st('templateWorkflows.category.ComfyUI Examples', 'ComfyUI Examples')
+      )
+
+      if (comfyExamplesGroupIndex !== -1) {
+        groupedByCategory[comfyExamplesGroupIndex].modules.unshift(
+          createAllCategory()
+        )
+      }
+
+      return groupedByCategory
     })
 
     async function loadWorkflowTemplates() {

src/types/litegraph-augmentation.d.ts

@@ -75,22 +75,6 @@ declare module '@comfyorg/litegraph' {
   // eslint-disable-next-line @typescript-eslint/no-empty-object-type
   interface BaseWidget extends IBaseWidget {}
 
-  /** Actual members required for execution. */
-  type ExecutableLGraphNode = Pick<
-    LGraphNode,
-    | 'id'
-    | 'type'
-    | 'comfyClass'
-    | 'title'
-    | 'mode'
-    | 'inputs'
-    | 'widgets'
-    | 'isVirtualNode'
-    | 'applyToGraph'
-    | 'getInputNode'
-    | 'getInputLink'
-  >
-
   interface LGraphNode {
     constructor: LGraphNodeConstructor
 
@@ -104,10 +88,7 @@ declare module '@comfyorg/litegraph' {
     /** @deprecated groupNode */
     setInnerNodes?(nodes: LGraphNode[]): void
     /** Originally a group node API. */
-    getInnerNodes?(
-      nodes?: ExecutableLGraphNode[],
-      subgraphs?: WeakSet<LGraphNode>
-    ): ExecutableLGraphNode[]
+    getInnerNodes?(): LGraphNode[]
     /** @deprecated groupNode */
     convertToNodes?(): LGraphNode[]
     recreate?(): Promise<LGraphNode>

src/types/workflowTemplateTypes.ts

@@ -11,6 +11,7 @@ export interface TemplateInfo {
   description: string
   localizedTitle?: string
   localizedDescription?: string
+  sourceModule?: string
 }
 
 export interface WorkflowTemplates {

src/utils/fileHandlers.ts

@@ -1,336 +0,0 @@
-/**
- * Maps MIME types and file extensions to handler functions for extracting
- * workflow data from various file formats. Uses supportedWorkflowFormats.ts
- * as the source of truth for supported formats.
- */
-import {
-  AUDIO_WORKFLOW_FORMATS,
-  DATA_WORKFLOW_FORMATS,
-  IMAGE_WORKFLOW_FORMATS,
-  MODEL_WORKFLOW_FORMATS,
-  VIDEO_WORKFLOW_FORMATS
-} from '@/constants/supportedWorkflowFormats'
-import type {
-  ComfyApiWorkflow,
-  ComfyWorkflowJSON
-} from '@/schemas/comfyWorkflowSchema'
-import { getFromWebmFile } from '@/scripts/metadata/ebml'
-import { getGltfBinaryMetadata } from '@/scripts/metadata/gltf'
-import { getFromIsobmffFile } from '@/scripts/metadata/isobmff'
-import { getMp3Metadata } from '@/scripts/metadata/mp3'
-import { getOggMetadata } from '@/scripts/metadata/ogg'
-import { getSvgMetadata } from '@/scripts/metadata/svg'
-import {
-  getFlacMetadata,
-  getLatentMetadata,
-  getPngMetadata,
-  getWebpMetadata
-} from '@/scripts/pnginfo'
-
-/**
- * Type for the file handler function
- */
-export type WorkflowFileHandler = (file: File) => Promise<{
-  workflow?: ComfyWorkflowJSON
-  prompt?: ComfyApiWorkflow
-  parameters?: string
-  jsonTemplateData?: any // For template JSON data
-}>
-
-/**
- * Maps MIME types to file handlers for loading workflows from different file formats
- */
-export const mimeTypeHandlers = new Map<string, WorkflowFileHandler>()
-
-/**
- * Maps file extensions to file handlers for loading workflows
- * Used as a fallback when MIME type detection fails
- */
-export const extensionHandlers = new Map<string, WorkflowFileHandler>()
-
-/**
- * Handler for PNG files
- */
-const handlePngFile: WorkflowFileHandler = async (file) => {
-  const pngInfo = await getPngMetadata(file)
-  return {
-    workflow: pngInfo?.workflow ? JSON.parse(pngInfo.workflow) : undefined,
-    prompt: pngInfo?.prompt ? JSON.parse(pngInfo.prompt) : undefined,
-    parameters: pngInfo?.parameters
-  }
-}
-
-/**
- * Handler for WebP files
- */
-const handleWebpFile: WorkflowFileHandler = async (file) => {
-  const pngInfo = await getWebpMetadata(file)
-  // Support loading workflows from that webp custom node.
-  const workflow = pngInfo?.workflow || pngInfo?.Workflow
-  const prompt = pngInfo?.prompt || pngInfo?.Prompt
-
-  return {
-    workflow: workflow ? JSON.parse(workflow) : undefined,
-    prompt: prompt ? JSON.parse(prompt) : undefined
-  }
-}
-
-/**
- * Handler for SVG files
- */
-const handleSvgFile: WorkflowFileHandler = async (file) => {
-  const svgInfo = await getSvgMetadata(file)
-  return {
-    workflow: svgInfo.workflow,
-    prompt: svgInfo.prompt
-  }
-}
-
-/**
- * Handler for MP3 files
- */
-const handleMp3File: WorkflowFileHandler = async (file) => {
-  const { workflow, prompt } = await getMp3Metadata(file)
-  return { workflow, prompt }
-}
-
-/**
- * Handler for OGG files
- */
-const handleOggFile: WorkflowFileHandler = async (file) => {
-  const { workflow, prompt } = await getOggMetadata(file)
-  return { workflow, prompt }
-}
-
-/**
- * Handler for FLAC files
- */
-const handleFlacFile: WorkflowFileHandler = async (file) => {
-  const pngInfo = await getFlacMetadata(file)
-  const workflow = pngInfo?.workflow || pngInfo?.Workflow
-  const prompt = pngInfo?.prompt || pngInfo?.Prompt
-
-  return {
-    workflow: workflow ? JSON.parse(workflow) : undefined,
-    prompt: prompt ? JSON.parse(prompt) : undefined
-  }
-}
-
-/**
- * Handler for WebM files
- */
-const handleWebmFile: WorkflowFileHandler = async (file) => {
-  const webmInfo = await getFromWebmFile(file)
-  return {
-    workflow: webmInfo.workflow,
-    prompt: webmInfo.prompt
-  }
-}
-
-/**
- * Handler for MP4/MOV/M4V files
- */
-const handleMp4File: WorkflowFileHandler = async (file) => {
-  const mp4Info = await getFromIsobmffFile(file)
-  return {
-    workflow: mp4Info.workflow,
-    prompt: mp4Info.prompt
-  }
-}
-
-/**
- * Handler for GLB files
- */
-const handleGlbFile: WorkflowFileHandler = async (file) => {
-  const gltfInfo = await getGltfBinaryMetadata(file)
-  return {
-    workflow: gltfInfo.workflow,
-    prompt: gltfInfo.prompt
-  }
-}
-
-/**
- * Handler for JSON files
- */
-const handleJsonFile: WorkflowFileHandler = async (file) => {
-  // For JSON files, we need to preserve the exact behavior from app.ts
-  // This code intentionally mirrors the original implementation
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => {
-      try {
-        const readerResult = reader.result as string
-        const jsonContent = JSON.parse(readerResult)
-
-        if (jsonContent?.templates) {
-          // This case will be handled separately in handleFile
-          resolve({
-            workflow: undefined,
-            prompt: undefined,
-            jsonTemplateData: jsonContent
-          })
-        } else if (isApiJson(jsonContent)) {
-          // API JSON format
-          resolve({ workflow: undefined, prompt: jsonContent })
-        } else {
-          // Regular workflow JSON
-          resolve({ workflow: JSON.parse(readerResult), prompt: undefined })
-        }
-      } catch (error) {
-        reject(error)
-      }
-    }
-    reader.onerror = () => reject(reader.error)
-    reader.readAsText(file)
-  })
-}
-
-/**
- * Handler for .latent and .safetensors files
- */
-const handleLatentFile: WorkflowFileHandler = async (file) => {
-  // Preserve the exact behavior from app.ts for latent files
-  const info = await getLatentMetadata(file)
-
-  // Direct port of the original code, preserving behavior for TS compatibility
-  if (info && typeof info === 'object' && 'workflow' in info && info.workflow) {
-    return {
-      workflow: JSON.parse(info.workflow as string),
-      prompt: undefined
-    }
-  } else if (
-    info &&
-    typeof info === 'object' &&
-    'prompt' in info &&
-    info.prompt
-  ) {
-    return {
-      workflow: undefined,
-      prompt: JSON.parse(info.prompt as string)
-    }
-  } else {
-    return { workflow: undefined, prompt: undefined }
-  }
-}
-
-/**
- * Helper function to determine if a JSON object is in the API JSON format
- */
-function isApiJson(data: unknown) {
-  return (
-    typeof data === 'object' &&
-    data !== null &&
-    Object.values(data as Record<string, any>).every((v) => v.class_type)
-  )
-}
-
-// Register image format handlers
-IMAGE_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'image/png') {
-    mimeTypeHandlers.set(mimeType, handlePngFile)
-  } else if (mimeType === 'image/webp') {
-    mimeTypeHandlers.set(mimeType, handleWebpFile)
-  } else if (mimeType === 'image/svg+xml') {
-    mimeTypeHandlers.set(mimeType, handleSvgFile)
-  }
-})
-
-IMAGE_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.png') {
-    extensionHandlers.set(ext, handlePngFile)
-  } else if (ext === '.webp') {
-    extensionHandlers.set(ext, handleWebpFile)
-  } else if (ext === '.svg') {
-    extensionHandlers.set(ext, handleSvgFile)
-  }
-})
-
-// Register audio format handlers
-AUDIO_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'audio/mpeg') {
-    mimeTypeHandlers.set(mimeType, handleMp3File)
-  } else if (mimeType === 'audio/ogg') {
-    mimeTypeHandlers.set(mimeType, handleOggFile)
-  } else if (mimeType === 'audio/flac' || mimeType === 'audio/x-flac') {
-    mimeTypeHandlers.set(mimeType, handleFlacFile)
-  }
-})
-
-AUDIO_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.mp3') {
-    extensionHandlers.set(ext, handleMp3File)
-  } else if (ext === '.ogg') {
-    extensionHandlers.set(ext, handleOggFile)
-  } else if (ext === '.flac') {
-    extensionHandlers.set(ext, handleFlacFile)
-  }
-})
-
-// Register video format handlers
-VIDEO_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'video/webm') {
-    mimeTypeHandlers.set(mimeType, handleWebmFile)
-  } else if (
-    mimeType === 'video/mp4' ||
-    mimeType === 'video/quicktime' ||
-    mimeType === 'video/x-m4v'
-  ) {
-    mimeTypeHandlers.set(mimeType, handleMp4File)
-  }
-})
-
-VIDEO_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.webm') {
-    extensionHandlers.set(ext, handleWebmFile)
-  } else if (ext === '.mp4' || ext === '.mov' || ext === '.m4v') {
-    extensionHandlers.set(ext, handleMp4File)
-  }
-})
-
-// Register 3D model format handlers
-MODEL_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'model/gltf-binary') {
-    mimeTypeHandlers.set(mimeType, handleGlbFile)
-  }
-})
-
-MODEL_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.glb') {
-    extensionHandlers.set(ext, handleGlbFile)
-  }
-})
-
-// Register data format handlers
-DATA_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-  if (mimeType === 'application/json') {
-    mimeTypeHandlers.set(mimeType, handleJsonFile)
-  }
-})
-
-DATA_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-  if (ext === '.json') {
-    extensionHandlers.set(ext, handleJsonFile)
-  } else if (ext === '.latent' || ext === '.safetensors') {
-    extensionHandlers.set(ext, handleLatentFile)
-  }
-})
-
-/**
- * Gets the appropriate file handler for a given file based on mime type or extension
- */
-export function getFileHandler(file: File): WorkflowFileHandler | null {
-  // First try to match by MIME type
-  if (file.type && mimeTypeHandlers.has(file.type)) {
-    return mimeTypeHandlers.get(file.type) || null
-  }
-
-  // If no MIME type match, try to match by file extension
-  if (file.name) {
-    const extension = '.' + file.name.split('.').pop()?.toLowerCase()
-    if (extension && extensionHandlers.has(extension)) {
-      return extensionHandlers.get(extension) || null
-    }
-  }
-
-  return null
-}

src/utils/litegraphUtil.ts

@@ -1,4 +1,4 @@
-import { ColorOption, LGraph, Reroute } from '@comfyorg/litegraph'
+import type { ColorOption, LGraph } from '@comfyorg/litegraph'
 import { LGraphGroup, LGraphNode, isColorable } from '@comfyorg/litegraph'
 import type { ISerialisedGraph } from '@comfyorg/litegraph/dist/types/serialisation'
 import type {
@@ -50,10 +50,6 @@ export const isLGraphGroup = (item: unknown): item is LGraphGroup => {
   return item instanceof LGraphGroup
 }
 
-export const isReroute = (item: unknown): item is Reroute => {
-  return item instanceof Reroute
-}
-
 /**
  * Get the color option of all canvas items if they are all the same.
  * @param items - The items to get the color option of.

src/utils/typeGuardUtil.ts

@@ -21,9 +21,3 @@ export const isAbortError = (
 export const isSubgraph = (
   item: LGraph | Subgraph | undefined | null
 ): item is Subgraph => item?.isRootGraph === false
-
-/**
- * Check if an item is non-nullish.
- */
-export const isNonNullish = <T>(item: T | undefined | null): item is T =>
-  item != null

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

@@ -0,0 +1,802 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import type { IComboWidget } from '@comfyorg/litegraph/dist/types/widgets'
+import { describe, expect, it } from 'vitest'
+
+import { useNodePricing } from '@/composables/node/useNodePricing'
+
+// Helper function to create a mock node
+function createMockNode(
+  nodeTypeName: string,
+  widgets: Array<{ name: string; value: any }> = [],
+  isApiNode = true
+): LGraphNode {
+  const mockWidgets = widgets.map(({ name, value }) => ({
+    name,
+    value,
+    type: 'combo'
+  })) as IComboWidget[]
+
+  return {
+    id: Math.random().toString(),
+    widgets: mockWidgets,
+    constructor: {
+      nodeData: {
+        name: nodeTypeName,
+        api_node: isApiNode
+      }
+    }
+  } as unknown as LGraphNode
+}
+
+describe('useNodePricing', () => {
+  describe('static pricing', () => {
+    it('should return static price for FluxProCannyNode', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('FluxProCannyNode')
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.05/Run')
+    })
+
+    it('should return static price for StabilityStableImageUltraNode', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('StabilityStableImageUltraNode')
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.08/Run')
+    })
+
+    it('should return empty string for non-API nodes', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('RegularNode', [], false)
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('')
+    })
+
+    it('should return empty string for unknown node types', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('UnknownAPINode')
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('')
+    })
+  })
+
+  describe('dynamic pricing - KlingTextToVideoNode', () => {
+    it('should return high price for kling-v2-master model', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingTextToVideoNode', [
+        { name: 'mode', value: 'standard / 5s / v2-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('KlingTextToVideoNode', [
+        { name: 'mode', value: 'standard / 5s / v1-6' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.28/Run')
+    })
+
+    it('should return range when mode widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingTextToVideoNode', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.14-2.80/Run (varies with model, mode & duration)')
+    })
+  })
+
+  describe('dynamic pricing - KlingImage2VideoNode', () => {
+    it('should return high price for kling-v2-master model', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingImage2VideoNode', [
+        { name: 'model_name', value: 'v2-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', [
+        { name: 'model_name', value: 'v1-6' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.28/Run')
+    })
+
+    it('should return range when model_name widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingImage2VideoNode', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.14-2.80/Run (varies with model, mode & duration)')
+    })
+  })
+
+  describe('dynamic pricing - OpenAIDalle3', () => {
+    it('should return $0.04 for 1024x1024 standard quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle3', [
+        { name: 'size', value: '1024x1024' },
+        { name: 'quality', value: 'standard' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.04/Run')
+    })
+
+    it('should return $0.08 for 1024x1024 hd quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle3', [
+        { name: 'size', value: '1024x1024' },
+        { name: 'quality', value: 'hd' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.08/Run')
+    })
+
+    it('should return $0.08 for 1792x1024 standard quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle3', [
+        { name: 'size', value: '1792x1024' },
+        { name: 'quality', value: 'standard' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.08/Run')
+    })
+
+    it('should return $0.16 for 1792x1024 hd quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle3', [
+        { name: 'size', value: '1792x1024' },
+        { name: 'quality', value: 'hd' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.12/Run')
+    })
+
+    it('should return $0.08 for 1024x1792 standard quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle3', [
+        { name: 'size', value: '1024x1792' },
+        { name: 'quality', value: 'standard' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.08/Run')
+    })
+
+    it('should return $0.16 for 1024x1792 hd quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle3', [
+        { name: 'size', value: '1024x1792' },
+        { name: 'quality', value: 'hd' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.12/Run')
+    })
+
+    it('should return range when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle3', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.04-0.12/Run (varies with size & quality)')
+    })
+
+    it('should return range when size widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle3', [
+        { name: 'quality', value: 'hd' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.04-0.12/Run (varies with size & quality)')
+    })
+
+    it('should return range when quality widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle3', [
+        { name: 'size', value: '1024x1024' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.04-0.12/Run (varies with size & quality)')
+    })
+  })
+
+  describe('dynamic pricing - OpenAIDalle2', () => {
+    it('should return $0.02 for 1024x1024 size', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle2', [
+        { name: 'size', value: '1024x1024' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.02/Run')
+    })
+
+    it('should return $0.018 for 512x512 size', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle2', [
+        { name: 'size', value: '512x512' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.018/Run')
+    })
+
+    it('should return $0.016 for 256x256 size', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle2', [
+        { name: 'size', value: '256x256' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.016/Run')
+    })
+
+    it('should return range when size widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIDalle2', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.016-0.02/Run (varies with size)')
+    })
+  })
+
+  describe('dynamic pricing - OpenAIGPTImage1', () => {
+    it('should return high price range for high quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIGPTImage1', [
+        { name: 'quality', value: 'high' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.167-0.30/Run')
+    })
+
+    it('should return medium price range for medium quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIGPTImage1', [
+        { name: 'quality', value: 'medium' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.046-0.07/Run')
+    })
+
+    it('should return low price range for low quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIGPTImage1', [
+        { name: 'quality', value: 'low' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.011-0.02/Run')
+    })
+
+    it('should return range when quality widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('OpenAIGPTImage1', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.011-0.30/Run (varies with quality)')
+    })
+  })
+
+  describe('dynamic pricing - IdeogramV3', () => {
+    it('should return $0.08 for Quality rendering speed', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('IdeogramV3', [
+        { name: 'rendering_speed', value: 'Quality' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.08/Run')
+    })
+
+    it('should return $0.06 for Balanced rendering speed', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('IdeogramV3', [
+        { name: 'rendering_speed', value: 'Balanced' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.06/Run')
+    })
+
+    it('should return $0.03 for Turbo rendering speed', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('IdeogramV3', [
+        { name: 'rendering_speed', value: 'Turbo' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.03/Run')
+    })
+
+    it('should return range when rendering_speed widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('IdeogramV3', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.03-0.08/Run (varies with rendering speed)')
+    })
+  })
+
+  describe('dynamic pricing - VeoVideoGenerationNode', () => {
+    it('should return $5.00 for 10s duration', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('VeoVideoGenerationNode', [
+        { name: 'duration_seconds', value: '10' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$5.00/Run')
+    })
+
+    it('should return $2.50 for 5s duration', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('VeoVideoGenerationNode', [
+        { name: 'duration_seconds', value: '5' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$2.50/Run')
+    })
+
+    it('should return range when duration widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('VeoVideoGenerationNode', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$2.50-5.0/Run (varies with duration)')
+    })
+  })
+
+  describe('dynamic pricing - LumaVideoNode', () => {
+    it('should return $2.19 for ray-flash-2 4K 5s', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('LumaVideoNode', [
+        { name: 'model', value: 'ray-flash-2' },
+        { name: 'resolution', value: '4K' },
+        { name: 'duration', value: '5s' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$2.19/Run')
+    })
+
+    it('should return $6.37 for ray-2 4K 5s', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('LumaVideoNode', [
+        { name: 'model', value: 'ray-2' },
+        { name: 'resolution', value: '4K' },
+        { name: 'duration', value: '5s' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$6.37/Run')
+    })
+
+    it('should return $0.35 for ray-1-6 model', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('LumaVideoNode', [
+        { name: 'model', value: 'ray-1-6' },
+        { name: 'resolution', value: '1080p' },
+        { name: 'duration', value: '5s' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.35/Run')
+    })
+
+    it('should return range when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('LumaVideoNode', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(
+        '$0.14-11.47/Run (varies with model, resolution & duration)'
+      )
+    })
+  })
+
+  describe('dynamic pricing - PixverseTextToVideoNode', () => {
+    it('should return range for 5s 1080p quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PixverseTextToVideoNode', [
+        { name: 'duration', value: '5s' },
+        { name: 'quality', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(
+        '$0.45-1.2/Run (varies with duration, quality & motion mode)'
+      )
+    })
+
+    it('should return range for 5s 540p normal quality', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PixverseTextToVideoNode', [
+        { name: 'duration', value: '5s' },
+        { name: 'quality', value: '540p' },
+        { name: 'motion_mode', value: 'normal' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(
+        '$0.45-1.2/Run (varies with duration, quality & motion mode)'
+      )
+    })
+
+    it('should return range when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PixverseTextToVideoNode', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe(
+        '$0.45-1.2/Run (varies with duration, quality & motion mode)'
+      )
+    })
+  })
+
+  describe('dynamic pricing - KlingDualCharacterVideoEffectNode', () => {
+    it('should return range for v2-master 5s mode', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingDualCharacterVideoEffectNode', [
+        { name: 'mode', value: 'standard / 5s / v2-master' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.14-2.80/Run (varies with model, mode & duration)')
+    })
+
+    it('should return range for v1-6 5s mode', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingDualCharacterVideoEffectNode', [
+        { name: 'mode', value: 'standard / 5s / v1-6' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.14-2.80/Run (varies with model, mode & duration)')
+    })
+
+    it('should return range when mode widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingDualCharacterVideoEffectNode', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.14-2.80/Run (varies with model, mode & duration)')
+    })
+  })
+
+  describe('dynamic pricing - KlingSingleImageVideoEffectNode', () => {
+    it('should return $0.28 for fuzzyfuzzy effect', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingSingleImageVideoEffectNode', [
+        { name: 'effect_scene', value: 'fuzzyfuzzy' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.28/Run')
+    })
+
+    it('should return $0.49 for dizzydizzy effect', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingSingleImageVideoEffectNode', [
+        { name: 'effect_scene', value: 'dizzydizzy' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.49/Run')
+    })
+
+    it('should return range when effect_scene widget is missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('KlingSingleImageVideoEffectNode', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.28-0.49/Run (varies with effect scene)')
+    })
+  })
+
+  describe('dynamic pricing - PikaImageToVideoNode2_2', () => {
+    it('should return $0.45 for 5s 1080p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaImageToVideoNode2_2', [
+        { name: 'duration', value: '5s' },
+        { name: 'resolution', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.45/Run')
+    })
+
+    it('should return $0.2 for 5s 720p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaImageToVideoNode2_2', [
+        { name: 'duration', value: '5s' },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.2/Run')
+    })
+
+    it('should return $1.0 for 10s 1080p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaImageToVideoNode2_2', [
+        { name: 'duration', value: '10s' },
+        { name: 'resolution', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.0/Run')
+    })
+
+    it('should return range when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaImageToVideoNode2_2', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.2-1.0/Run (varies with duration & resolution)')
+    })
+  })
+
+  describe('dynamic pricing - PikaScenesV2_2', () => {
+    it('should return $0.3 for 5s 720p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaScenesV2_2', [
+        { name: 'duration', value: '5s' },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.3/Run')
+    })
+
+    it('should return $0.25 for 10s 720p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaScenesV2_2', [
+        { name: 'duration', value: '10s' },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.25/Run')
+    })
+
+    it('should return range when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaScenesV2_2', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.2-1.0/Run (varies with duration & resolution)')
+    })
+  })
+
+  describe('dynamic pricing - PikaStartEndFrameNode2_2', () => {
+    it('should return $0.2 for 5s 720p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaStartEndFrameNode2_2', [
+        { name: 'duration', value: '5s' },
+        { name: 'resolution', value: '720p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.2/Run')
+    })
+
+    it('should return $1.0 for 10s 1080p', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaStartEndFrameNode2_2', [
+        { name: 'duration', value: '10s' },
+        { name: 'resolution', value: '1080p' }
+      ])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$1.0/Run')
+    })
+
+    it('should return range when widgets are missing', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      const node = createMockNode('PikaStartEndFrameNode2_2', [])
+
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.2-1.0/Run (varies with duration & resolution)')
+    })
+  })
+
+  describe('error handling', () => {
+    it('should gracefully handle errors in dynamic pricing functions', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      // Create a node with malformed widget data that could cause errors
+      const node = {
+        id: 'test-node',
+        widgets: null, // This could cause errors when accessing .find()
+        constructor: {
+          nodeData: {
+            name: 'KlingTextToVideoNode',
+            api_node: true
+          }
+        }
+      } as unknown as LGraphNode
+
+      // Should not throw an error and return empty string as fallback
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.14-2.80/Run (varies with model, mode & duration)')
+    })
+
+    it('should handle completely broken widget structure', () => {
+      const { getNodeDisplayPrice } = useNodePricing()
+      // Create a node with no widgets property at all
+      const node = {
+        id: 'test-node',
+        // No widgets property
+        constructor: {
+          nodeData: {
+            name: 'OpenAIDalle3',
+            api_node: true
+          }
+        }
+      } as unknown as LGraphNode
+
+      // Should gracefully fall back to the default range
+      const price = getNodeDisplayPrice(node)
+      expect(price).toBe('$0.04-0.12/Run (varies with size & quality)')
+    })
+  })
+
+  describe('helper methods', () => {
+    describe('getNodePricingConfig', () => {
+      it('should return pricing config for known API nodes', () => {
+        const { getNodePricingConfig } = useNodePricing()
+        const node = createMockNode('KlingTextToVideoNode')
+
+        const config = getNodePricingConfig(node)
+        expect(config).toBeDefined()
+        expect(typeof config.displayPrice).toBe('function')
+      })
+
+      it('should return undefined for unknown nodes', () => {
+        const { getNodePricingConfig } = useNodePricing()
+        const node = createMockNode('UnknownNode')
+
+        const config = getNodePricingConfig(node)
+        expect(config).toBeUndefined()
+      })
+    })
+
+    describe('getRelevantWidgetNames', () => {
+      it('should return correct widget names for KlingTextToVideoNode', () => {
+        const { getRelevantWidgetNames } = useNodePricing()
+
+        const widgetNames = getRelevantWidgetNames('KlingTextToVideoNode')
+        expect(widgetNames).toEqual(['mode', 'model_name', 'duration'])
+      })
+
+      it('should return correct widget names for KlingImage2VideoNode', () => {
+        const { getRelevantWidgetNames } = useNodePricing()
+
+        const widgetNames = getRelevantWidgetNames('KlingImage2VideoNode')
+        expect(widgetNames).toEqual(['mode', 'model_name', 'duration'])
+      })
+
+      it('should return correct widget names for OpenAIDalle3', () => {
+        const { getRelevantWidgetNames } = useNodePricing()
+
+        const widgetNames = getRelevantWidgetNames('OpenAIDalle3')
+        expect(widgetNames).toEqual(['size', 'quality'])
+      })
+
+      it('should return correct widget names for VeoVideoGenerationNode', () => {
+        const { getRelevantWidgetNames } = useNodePricing()
+
+        const widgetNames = getRelevantWidgetNames('VeoVideoGenerationNode')
+        expect(widgetNames).toEqual(['duration_seconds'])
+      })
+
+      it('should return correct widget names for LumaVideoNode', () => {
+        const { getRelevantWidgetNames } = useNodePricing()
+
+        const widgetNames = getRelevantWidgetNames('LumaVideoNode')
+        expect(widgetNames).toEqual(['model', 'resolution', 'duration'])
+      })
+
+      it('should return correct widget names for KlingSingleImageVideoEffectNode', () => {
+        const { getRelevantWidgetNames } = useNodePricing()
+
+        const widgetNames = getRelevantWidgetNames(
+          'KlingSingleImageVideoEffectNode'
+        )
+        expect(widgetNames).toEqual(['effect_scene'])
+      })
+
+      it('should return correct widget names for PikaImageToVideoNode2_2', () => {
+        const { getRelevantWidgetNames } = useNodePricing()
+
+        const widgetNames = getRelevantWidgetNames('PikaImageToVideoNode2_2')
+        expect(widgetNames).toEqual(['duration', 'resolution'])
+      })
+
+      it('should return empty array for unknown node types', () => {
+        const { getRelevantWidgetNames } = useNodePricing()
+
+        const widgetNames = getRelevantWidgetNames('UnknownNode')
+        expect(widgetNames).toEqual([])
+      })
+
+      describe('Recraft nodes with n parameter', () => {
+        it('should return correct widget names for RecraftTextToImageNode', () => {
+          const { getRelevantWidgetNames } = useNodePricing()
+
+          const widgetNames = getRelevantWidgetNames('RecraftTextToImageNode')
+          expect(widgetNames).toEqual(['n'])
+        })
+
+        it('should return correct widget names for RecraftTextToVectorNode', () => {
+          const { getRelevantWidgetNames } = useNodePricing()
+
+          const widgetNames = getRelevantWidgetNames('RecraftTextToVectorNode')
+          expect(widgetNames).toEqual(['n'])
+        })
+      })
+    })
+
+    describe('Recraft nodes dynamic pricing', () => {
+      it('should calculate dynamic pricing for RecraftTextToImageNode based on n value', () => {
+        const { getNodeDisplayPrice } = useNodePricing()
+        const node = createMockNode('RecraftTextToImageNode', [
+          { name: 'n', value: 3 }
+        ])
+
+        const price = getNodeDisplayPrice(node)
+        expect(price).toBe('$0.12/Run') // 0.04 * 3
+      })
+
+      it('should calculate dynamic pricing for RecraftTextToVectorNode based on n value', () => {
+        const { getNodeDisplayPrice } = useNodePricing()
+        const node = createMockNode('RecraftTextToVectorNode', [
+          { name: 'n', value: 2 }
+        ])
+
+        const price = getNodeDisplayPrice(node)
+        expect(price).toBe('$0.16/Run') // 0.08 * 2
+      })
+
+      it('should fall back to static display when n widget is missing', () => {
+        const { getNodeDisplayPrice } = useNodePricing()
+        const node = createMockNode('RecraftTextToImageNode', [])
+
+        const price = getNodeDisplayPrice(node)
+        expect(price).toBe('$0.04 x n/Run')
+      })
+
+      it('should handle edge case when n value is 1', () => {
+        const { getNodeDisplayPrice } = useNodePricing()
+        const node = createMockNode('RecraftImageInpaintingNode', [
+          { name: 'n', value: 1 }
+        ])
+
+        const price = getNodeDisplayPrice(node)
+        expect(price).toBe('$0.04/Run') // 0.04 * 1
+      })
+    })
+  })
+})

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

@@ -0,0 +1,301 @@
+import { flushPromises } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { useTemplateWorkflows } from '@/composables/useTemplateWorkflows'
+import { useWorkflowTemplatesStore } from '@/stores/workflowTemplatesStore'
+
+// Mock the store
+vi.mock('@/stores/workflowTemplatesStore', () => ({
+  useWorkflowTemplatesStore: vi.fn()
+}))
+
+// Mock the API
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fileURL: vi.fn((path) => `mock-file-url${path}`),
+    apiURL: vi.fn((path) => `mock-api-url${path}`)
+  }
+}))
+
+// Mock the app
+vi.mock('@/scripts/app', () => ({
+  app: {
+    loadGraphData: vi.fn()
+  }
+}))
+
+// Mock Vue I18n
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn((key, fallback) => fallback || key)
+  })
+}))
+
+// Mock the dialog store
+vi.mock('@/stores/dialogStore', () => ({
+  useDialogStore: vi.fn(() => ({
+    closeDialog: vi.fn()
+  }))
+}))
+
+// Mock fetch
+global.fetch = vi.fn()
+
+describe('useTemplateWorkflows', () => {
+  let mockWorkflowTemplatesStore: any
+
+  beforeEach(() => {
+    mockWorkflowTemplatesStore = {
+      isLoaded: false,
+      loadWorkflowTemplates: vi.fn().mockResolvedValue(true),
+      groupedTemplates: [
+        {
+          label: 'ComfyUI Examples',
+          modules: [
+            {
+              moduleName: 'all',
+              title: 'All',
+              localizedTitle: 'All Templates',
+              templates: [
+                {
+                  name: 'template1',
+                  mediaType: 'image',
+                  mediaSubtype: 'jpg',
+                  sourceModule: 'default',
+                  localizedTitle: 'Template 1'
+                },
+                {
+                  name: 'template2',
+                  mediaType: 'image',
+                  mediaSubtype: 'jpg',
+                  sourceModule: 'custom-module',
+                  description: 'A custom template'
+                }
+              ]
+            },
+            {
+              moduleName: 'default',
+              title: 'Default',
+              localizedTitle: 'Default Templates',
+              templates: [
+                {
+                  name: 'template1',
+                  mediaType: 'image',
+                  mediaSubtype: 'jpg',
+                  localizedTitle: 'Template 1',
+                  localizedDescription: 'A default template'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+
+    vi.mocked(useWorkflowTemplatesStore).mockReturnValue(
+      mockWorkflowTemplatesStore
+    )
+
+    // Mock fetch response
+    vi.mocked(fetch).mockResolvedValue({
+      json: vi.fn().mockResolvedValue({ workflow: 'data' })
+    } as unknown as Response)
+  })
+
+  it('should load templates from store', async () => {
+    const { loadTemplates, isTemplatesLoaded } = useTemplateWorkflows()
+
+    expect(isTemplatesLoaded.value).toBe(false)
+
+    await loadTemplates()
+
+    expect(mockWorkflowTemplatesStore.loadWorkflowTemplates).toHaveBeenCalled()
+  })
+
+  it('should select the first template category', () => {
+    const { selectFirstTemplateCategory, selectedTemplate } =
+      useTemplateWorkflows()
+
+    selectFirstTemplateCategory()
+
+    expect(selectedTemplate.value).toEqual(
+      mockWorkflowTemplatesStore.groupedTemplates[0].modules[0]
+    )
+  })
+
+  it('should select a template category', () => {
+    const { selectTemplateCategory, selectedTemplate } = useTemplateWorkflows()
+    const category = mockWorkflowTemplatesStore.groupedTemplates[0].modules[1] // Default category
+
+    const result = selectTemplateCategory(category)
+
+    expect(result).toBe(true)
+    expect(selectedTemplate.value).toEqual(category)
+  })
+
+  it('should format template thumbnails correctly for default templates', () => {
+    const { getTemplateThumbnailUrl } = useTemplateWorkflows()
+    const template = {
+      name: 'test-template',
+      mediaSubtype: 'jpg',
+      mediaType: 'image',
+      description: 'Test template'
+    }
+
+    const url = getTemplateThumbnailUrl(template, 'default', '1')
+
+    expect(url).toBe('mock-file-url/templates/test-template-1.jpg')
+  })
+
+  it('should format template thumbnails correctly for custom templates', () => {
+    const { getTemplateThumbnailUrl } = useTemplateWorkflows()
+    const template = {
+      name: 'test-template',
+      mediaSubtype: 'jpg',
+      mediaType: 'image',
+      description: 'Test template'
+    }
+
+    const url = getTemplateThumbnailUrl(template, 'custom-module')
+
+    expect(url).toBe(
+      'mock-api-url/workflow_templates/custom-module/test-template.jpg'
+    )
+  })
+
+  it('should format template titles correctly', () => {
+    const { getTemplateTitle } = useTemplateWorkflows()
+
+    // Default template with localized title
+    const titleWithLocalized = getTemplateTitle(
+      {
+        name: 'test',
+        localizedTitle: 'Localized Title',
+        mediaType: 'image',
+        mediaSubtype: 'jpg',
+        description: 'Test'
+      },
+      'default'
+    )
+    expect(titleWithLocalized).toBe('Localized Title')
+
+    // Default template without localized title
+    const titleWithFallback = getTemplateTitle(
+      {
+        name: 'test',
+        title: 'Title',
+        mediaType: 'image',
+        mediaSubtype: 'jpg',
+        description: 'Test'
+      },
+      'default'
+    )
+    expect(titleWithFallback).toBe('Title')
+
+    // Custom template
+    const customTitle = getTemplateTitle(
+      {
+        name: 'test-template',
+        title: 'Custom Title',
+        mediaType: 'image',
+        mediaSubtype: 'jpg',
+        description: 'Test'
+      },
+      'custom-module'
+    )
+    expect(customTitle).toBe('Custom Title')
+
+    // Fallback to name
+    const nameOnly = getTemplateTitle(
+      {
+        name: 'name-only',
+        mediaType: 'image',
+        mediaSubtype: 'jpg',
+        description: 'Test'
+      },
+      'custom-module'
+    )
+    expect(nameOnly).toBe('name-only')
+  })
+
+  it('should format template descriptions correctly', () => {
+    const { getTemplateDescription } = useTemplateWorkflows()
+
+    // Default template with localized description
+    const descWithLocalized = getTemplateDescription(
+      {
+        name: 'test',
+        localizedDescription: 'Localized Description',
+        mediaType: 'image',
+        mediaSubtype: 'jpg',
+        description: 'Test'
+      },
+      'default'
+    )
+    expect(descWithLocalized).toBe('Localized Description')
+
+    // Custom template with description
+    const customDesc = getTemplateDescription(
+      {
+        name: 'test',
+        description: 'custom-template_description',
+        mediaType: 'image',
+        mediaSubtype: 'jpg'
+      },
+      'custom-module'
+    )
+    expect(customDesc).toBe('custom template description')
+  })
+
+  it('should load a template from the "All" category', async () => {
+    const { loadWorkflowTemplate, loadingTemplateId } = useTemplateWorkflows()
+
+    // Set the store as loaded
+    mockWorkflowTemplatesStore.isLoaded = true
+
+    // Load a template from the "All" category
+    const result = await loadWorkflowTemplate('template1', 'all')
+    await flushPromises()
+
+    expect(result).toBe(true)
+    expect(fetch).toHaveBeenCalledWith('mock-file-url/templates/template1.json')
+    expect(loadingTemplateId.value).toBe(null) // Should reset after loading
+  })
+
+  it('should load a template from a regular category', async () => {
+    const { loadWorkflowTemplate } = useTemplateWorkflows()
+
+    // Set the store as loaded
+    mockWorkflowTemplatesStore.isLoaded = true
+
+    // Load a template from the default category
+    const result = await loadWorkflowTemplate('template1', 'default')
+    await flushPromises()
+
+    expect(result).toBe(true)
+    expect(fetch).toHaveBeenCalledWith('mock-file-url/templates/template1.json')
+  })
+
+  it('should handle errors when loading templates', async () => {
+    const { loadWorkflowTemplate, loadingTemplateId } = useTemplateWorkflows()
+
+    // Set the store as loaded
+    mockWorkflowTemplatesStore.isLoaded = true
+
+    // Mock fetch to throw an error
+    vi.mocked(fetch).mockRejectedValueOnce(new Error('Failed to fetch'))
+
+    // Spy on console.error
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
+
+    // Load a template that will fail
+    const result = await loadWorkflowTemplate('error-template', 'default')
+
+    expect(result).toBe(false)
+    expect(consoleSpy).toHaveBeenCalled()
+    expect(loadingTemplateId.value).toBe(null) // Should reset even after error
+
+    // Restore console.error
+    consoleSpy.mockRestore()
+  })
+})

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

@@ -0,0 +1,183 @@
+import type { LGraphNode } from '@comfyorg/litegraph'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import { useComputedWithWidgetWatch } from '@/composables/node/useWatchWidget'
+
+// Mock useChainCallback
+vi.mock('@/composables/functional/useChainCallback', () => ({
+  useChainCallback: vi.fn((original, newCallback) => {
+    return function (this: any, ...args: any[]) {
+      original?.call(this, ...args)
+      newCallback.call(this, ...args)
+    }
+  })
+}))
+
+describe('useComputedWithWidgetWatch', () => {
+  const createMockNode = (
+    widgets: Array<{
+      name: string
+      value: any
+      callback?: (...args: any[]) => void
+    }> = []
+  ) => {
+    const mockNode = {
+      widgets: widgets.map((widget) => ({
+        name: widget.name,
+        value: widget.value,
+        callback: widget.callback
+      })),
+      graph: {
+        setDirtyCanvas: vi.fn()
+      }
+    } as unknown as LGraphNode
+
+    return mockNode
+  }
+
+  it('should create a reactive computed that responds to widget changes', async () => {
+    const mockNode = createMockNode([
+      { name: 'width', value: 100 },
+      { name: 'height', value: 200 }
+    ])
+
+    const computedWithWidgetWatch = useComputedWithWidgetWatch(mockNode)
+
+    const computedValue = computedWithWidgetWatch(() => {
+      const width =
+        (mockNode.widgets?.find((w) => w.name === 'width')?.value as number) ||
+        0
+      const height =
+        (mockNode.widgets?.find((w) => w.name === 'height')?.value as number) ||
+        0
+      return width * height
+    })
+
+    // Initial value should be computed correctly
+    expect(computedValue.value).toBe(20000)
+
+    // Change widget value and trigger callback
+    const widthWidget = mockNode.widgets?.find((w) => w.name === 'width')
+    if (widthWidget) {
+      widthWidget.value = 150
+      ;(widthWidget.callback as any)?.()
+    }
+
+    await nextTick()
+
+    // Computed should update
+    expect(computedValue.value).toBe(30000)
+  })
+
+  it('should only observe specific widgets when widgetNames is provided', async () => {
+    const mockNode = createMockNode([
+      { name: 'width', value: 100 },
+      { name: 'height', value: 200 },
+      { name: 'depth', value: 50 }
+    ])
+
+    const computedWithWidgetWatch = useComputedWithWidgetWatch(mockNode, {
+      widgetNames: ['width', 'height']
+    })
+
+    const computedValue = computedWithWidgetWatch(() => {
+      return mockNode.widgets?.map((w) => w.value).join('-') || ''
+    })
+
+    expect(computedValue.value).toBe('100-200-50')
+
+    // Change observed widget
+    const widthWidget = mockNode.widgets?.find((w) => w.name === 'width')
+    if (widthWidget) {
+      widthWidget.value = 150
+      ;(widthWidget.callback as any)?.()
+    }
+
+    await nextTick()
+    expect(computedValue.value).toBe('150-200-50')
+
+    // Change non-observed widget - should not trigger update
+    const depthWidget = mockNode.widgets?.find((w) => w.name === 'depth')
+    if (depthWidget) {
+      depthWidget.value = 75
+      // Depth widget callback should not have been modified
+      expect(depthWidget.callback).toBeUndefined()
+    }
+  })
+
+  it('should trigger canvas redraw when triggerCanvasRedraw is true', async () => {
+    const mockNode = createMockNode([{ name: 'value', value: 10 }])
+
+    const computedWithWidgetWatch = useComputedWithWidgetWatch(mockNode, {
+      triggerCanvasRedraw: true
+    })
+
+    computedWithWidgetWatch(() => mockNode.widgets?.[0]?.value || 0)
+
+    // Change widget value
+    const widget = mockNode.widgets?.[0]
+    if (widget) {
+      widget.value = 20
+      ;(widget.callback as any)?.()
+    }
+
+    await nextTick()
+
+    // Canvas redraw should have been triggered
+    expect(mockNode.graph?.setDirtyCanvas).toHaveBeenCalledWith(true, true)
+  })
+
+  it('should not trigger canvas redraw when triggerCanvasRedraw is false', async () => {
+    const mockNode = createMockNode([{ name: 'value', value: 10 }])
+
+    const computedWithWidgetWatch = useComputedWithWidgetWatch(mockNode, {
+      triggerCanvasRedraw: false
+    })
+
+    computedWithWidgetWatch(() => mockNode.widgets?.[0]?.value || 0)
+
+    // Change widget value
+    const widget = mockNode.widgets?.[0]
+    if (widget) {
+      widget.value = 20
+      ;(widget.callback as any)?.()
+    }
+
+    await nextTick()
+
+    // Canvas redraw should not have been triggered
+    expect(mockNode.graph?.setDirtyCanvas).not.toHaveBeenCalled()
+  })
+
+  it('should handle nodes without widgets gracefully', () => {
+    const mockNode = createMockNode([])
+
+    const computedWithWidgetWatch = useComputedWithWidgetWatch(mockNode)
+
+    const computedValue = computedWithWidgetWatch(() => 'no widgets')
+
+    expect(computedValue.value).toBe('no widgets')
+  })
+
+  it('should chain with existing widget callbacks', async () => {
+    const existingCallback = vi.fn()
+    const mockNode = createMockNode([
+      { name: 'value', value: 10, callback: existingCallback }
+    ])
+
+    const computedWithWidgetWatch = useComputedWithWidgetWatch(mockNode)
+    computedWithWidgetWatch(() => mockNode.widgets?.[0]?.value || 0)
+
+    // Trigger widget callback
+    const widget = mockNode.widgets?.[0]
+    if (widget) {
+      ;(widget.callback as any)?.()
+    }
+
+    await nextTick()
+
+    // Both existing callback and our callback should have been called
+    expect(existingCallback).toHaveBeenCalled()
+  })
+})

tests-ui/tests/store/workflowStore.test.ts

@@ -492,7 +492,7 @@ describe('useWorkflowStore', () => {
       // Assert
       console.debug(store.isSubgraphActive)
       expect(store.isSubgraphActive).toBe(false) // Should default to false
-      expect(store.activeSubgraph).toBeUndefined() // Should default to empty
+      expect(store.subgraphNamePath).toEqual([]) // Should default to empty
     })
 
     it('should correctly update state when the root graph is active', async () => {
@@ -505,7 +505,7 @@ describe('useWorkflowStore', () => {
 
       // Assert: Check store state
       expect(store.isSubgraphActive).toBe(false)
-      expect(store.activeSubgraph).toBeUndefined()
+      expect(store.subgraphNamePath).toEqual([]) // Path is empty for root graph
     })
 
     it('should correctly update state when a subgraph is active', async () => {
@@ -527,7 +527,10 @@ describe('useWorkflowStore', () => {
 
       // Assert: Check store state
       expect(store.isSubgraphActive).toBe(true)
-      expect(store.activeSubgraph).toEqual(mockSubgraph)
+      expect(store.subgraphNamePath).toEqual([
+        'Level 1 Subgraph',
+        'Level 2 Subgraph'
+      ]) // Path excludes the root
     })
 
     it('should update automatically when activeWorkflow changes', async () => {
@@ -545,7 +548,7 @@ describe('useWorkflowStore', () => {
 
       // Verify initial state
       expect(store.isSubgraphActive).toBe(true)
-      expect(store.activeSubgraph).toEqual(initialSubgraph)
+      expect(store.subgraphNamePath).toEqual(['Initial Subgraph'])
 
       // Act: Change the active workflow
       const workflow2 = store.createTemporary('workflow2.json')
@@ -566,7 +569,7 @@ describe('useWorkflowStore', () => {
 
       // Assert: Check that the state was updated by the watcher based on the *new* canvas state
       expect(store.isSubgraphActive).toBe(false) // Should reflect the change to undefined subgraph
-      expect(store.activeSubgraph).toBeUndefined()
+      expect(store.subgraphNamePath).toEqual([]) // Path should be empty for root
     })
   })
 })

tests-ui/tests/utils/fileHandlers.test.ts

@@ -1,127 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import {
-  AUDIO_WORKFLOW_FORMATS,
-  DATA_WORKFLOW_FORMATS,
-  IMAGE_WORKFLOW_FORMATS,
-  MODEL_WORKFLOW_FORMATS,
-  VIDEO_WORKFLOW_FORMATS
-} from '../../../src/constants/supportedWorkflowFormats'
-import {
-  extensionHandlers,
-  getFileHandler,
-  mimeTypeHandlers
-} from '../../../src/utils/fileHandlers'
-
-describe('fileHandlers', () => {
-  describe('handler registrations', () => {
-    it('should register handlers for all image MIME types', () => {
-      IMAGE_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all image extensions', () => {
-      IMAGE_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all audio MIME types', () => {
-      AUDIO_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all audio extensions', () => {
-      AUDIO_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all video MIME types', () => {
-      VIDEO_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all video extensions', () => {
-      VIDEO_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all 3D model MIME types', () => {
-      MODEL_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all 3D model extensions', () => {
-      MODEL_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all data MIME types', () => {
-      DATA_WORKFLOW_FORMATS.mimeTypes.forEach((mimeType) => {
-        expect(mimeTypeHandlers.has(mimeType)).toBe(true)
-        expect(mimeTypeHandlers.get(mimeType)).toBeTypeOf('function')
-      })
-    })
-
-    it('should register handlers for all data extensions', () => {
-      DATA_WORKFLOW_FORMATS.extensions.forEach((ext) => {
-        expect(extensionHandlers.has(ext)).toBe(true)
-        expect(extensionHandlers.get(ext)).toBeTypeOf('function')
-      })
-    })
-  })
-
-  describe('getFileHandler', () => {
-    it('should return a handler when a file with a recognized MIME type is provided', () => {
-      const file = new File(['test content'], 'test.png', { type: 'image/png' })
-      const handler = getFileHandler(file)
-      expect(handler).not.toBeNull()
-      expect(handler).toBeTypeOf('function')
-    })
-
-    it('should return a handler when a file with a recognized extension but no MIME type is provided', () => {
-      // File with empty MIME type but recognizable extension
-      const file = new File(['test content'], 'test.webp', { type: '' })
-      const handler = getFileHandler(file)
-      expect(handler).not.toBeNull()
-      expect(handler).toBeTypeOf('function')
-    })
-
-    it('should return null when no handler is found for the file type', () => {
-      const file = new File(['test content'], 'test.txt', {
-        type: 'text/plain'
-      })
-      const handler = getFileHandler(file)
-      expect(handler).toBeNull()
-    })
-
-    it('should prioritize MIME type over extension when both are present and different', () => {
-      // A file with a JSON MIME type but SVG extension
-      const file = new File(['{}'], 'test.svg', { type: 'application/json' })
-      const handler = getFileHandler(file)
-
-      // Make a shadow copy of the handlers for comparison
-      const jsonHandler = mimeTypeHandlers.get('application/json')
-      const svgHandler = extensionHandlers.get('.svg')
-
-      // The handler should match the JSON handler, not the SVG handler
-      expect(handler).toBe(jsonHandler)
-      expect(handler).not.toBe(svgHandler)
-    })
-  })
-})

tsconfig.eslint.json

@@ -13,6 +13,8 @@
     "*.mts",
     "*.config.js",
     "browser_tests/**/*.ts",
+    "scripts/**/*.js",
+    "scripts/**/*.ts",
     "tests-ui/**/*.ts"
   ]
 }