Add key function param in node tree build

.cursorrules

@@ -1,43 +0,0 @@
-// Vue 3 Composition API .cursorrules
-
-// 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",
-]
-
-// Folder structure
-const folderStructure = `
-src/
-  components/
-  constants/
-  composables/
-  views/
-  stores/
-  services/
-  App.vue
-  main.ts
-`;
-
-// Tailwind CSS best practices
-const tailwindCssBestPractices = [
-  "Use Tailwind CSS for styling",
-  "Implement responsive design with Tailwind CSS",
-]
-
-// Additional instructions
-const additionalInstructions = `
-1. Leverage VueUse functions for performance-enhancing styles
-2. Use lodash for utility functions
-3. Use TypeScript for type safety
-4. Implement proper props and emits definitions
-5. Utilize Vue 3's Teleport component when needed
-6. Use Suspense for async components
-7. Implement proper error handling
-8. Follow Vue 3 style guide and naming conventions
-9. Use Vite for fast development and building
-`;

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

@@ -42,7 +42,6 @@ jobs:
           Automated PR to update locales for node definitions
 
           This PR was created automatically by the frontend update workflow.
-        branch: update-locales-node-defs-${{ github.event.inputs.trigger_type }}-${{ github.run_id }}
+        branch: update-locales-node-defs-{{ github.event.inputs.trigger_type }}-{{ github.run_id }}
         base: main
-        labels: dependencies
-        path: ComfyUI_frontend
+        labels: dependencies

.github/workflows/release.yaml

@@ -40,10 +40,9 @@ jobs:
           files: |
             dist.zip
           tag_name: v${{ steps.current_version.outputs.version }}
-          draft: false
+          draft: true
           prerelease: false
           make_latest: "true"
-          generate_release_notes: true
   publish_types:
     runs-on: ubuntu-latest
     if: >

.gitignore

@@ -16,9 +16,6 @@ dist-ssr
 .vscode/*
 *.code-workspace
 !.vscode/extensions.json
-!.vscode/tailwind.json
-!.vscode/settings.json.default
-!.vscode/launch.json.default
 .idea
 .DS_Store
 *.suo

.vscode/launch.json.default

@@ -1,16 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome on frontend dev",
-            "url": "http://localhost:5173",
-            "webRoot": "${workspaceFolder}/src",
-            "sourceMaps": true,
-        }
-    ]
-}

.vscode/settings.json.default

@@ -1,5 +0,0 @@
-{
-  "css.customData": [
-    ".vscode/tailwind.json"
-  ]
-}

.vscode/tailwind.json

@@ -1,55 +0,0 @@
-{
-  "version": 1.1,
-  "atDirectives": [
-    {
-      "name": "@tailwind",
-      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
-        }
-      ]
-    },
-    {
-      "name": "@apply",
-      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
-        }
-      ]
-    },
-    {
-      "name": "@responsive",
-      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
-        }
-      ]
-    },
-    {
-      "name": "@screen",
-      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
-        }
-      ]
-    },
-    {
-      "name": "@variants",
-      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
-      "references": [
-        {
-          "name": "Tailwind Documentation",
-          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
-        }
-      ]
-    }
-  ]
-}

browser_tests/assets/collapsed_multiline.json

@@ -1,37 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "CLIPTextEncode",
-      "pos": [20, 50],
-      "size": [400, 200],
-      "flags": { "collapsed": true },
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "clip",
-          "type": "CLIP",
-          "link": null,
-          "localized_name": "clip"
-        }
-      ],
-      "outputs": [
-        {
-          "name": "CONDITIONING",
-          "type": "CONDITIONING",
-          "links": null,
-          "localized_name": "CONDITIONING"
-        }
-      ],
-      "properties": {},
-      "widgets_values": ["Should not be displayed."]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "version": 0.4
-}

browser_tests/assets/group_node_identical_nodes_hidden_inputs.json

@@ -1,163 +0,0 @@
-{
-  "last_node_id": 19,
-  "last_link_id": 14,
-  "nodes": [
-    {
-      "id": 19,
-      "type": "workflow>two_VAE_decode",
-      "pos": [
-        1368.800048828125,
-        768.7999877929688
-      ],
-      "size": [
-        418.1999816894531,
-        86
-      ],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "samples",
-          "type": "LATENT",
-          "link": null
-        },
-        {
-          "name": "vae",
-          "type": "VAE",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        },
-        {
-          "name": "VAEDecode IMAGE",
-          "type": "IMAGE",
-          "links": null
-        }
-      ],
-      "properties": {}
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "scale": 1,
-      "offset": [
-        0,
-        0
-      ]
-    },
-    "node_versions": {},
-    "ue_links": [],
-    "groupNodes": {
-      "two_VAE_decode": {
-        "nodes": [
-          {
-            "id": -1,
-            "type": "VAEDecode",
-            "pos": [
-              1368.800048828125,
-              768.7999877929688
-            ],
-            "size": [
-              210,
-              46
-            ],
-            "flags": {},
-            "order": 0,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "samples",
-                "type": "LATENT",
-                "link": null,
-                "localized_name": "samples"
-              },
-              {
-                "name": "vae",
-                "type": "VAE",
-                "link": null,
-                "localized_name": "vae"
-              }
-            ],
-            "outputs": [
-              {
-                "name": "IMAGE",
-                "type": "IMAGE",
-                "links": null,
-                "localized_name": "IMAGE"
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "VAEDecode"
-            },
-            "index": 0
-          },
-          {
-            "id": -1,
-            "type": "VAEDecode",
-            "pos": [
-              1368.800048828125,
-              873.7999877929688
-            ],
-            "size": [
-              210,
-              46
-            ],
-            "flags": {},
-            "order": 1,
-            "mode": 0,
-            "inputs": [
-              {
-                "name": "samples",
-                "type": "LATENT",
-                "link": null,
-                "localized_name": "samples"
-              },
-              {
-                "name": "vae",
-                "type": "VAE",
-                "link": null,
-                "localized_name": "vae"
-              }
-            ],
-            "outputs": [
-              {
-                "name": "IMAGE",
-                "type": "IMAGE",
-                "links": null,
-                "localized_name": "IMAGE"
-              }
-            ],
-            "properties": {
-              "Node name for S&R": "VAEDecode"
-            },
-            "index": 1
-          }
-        ],
-        "links": [],
-        "external": [],
-        "config": {
-          "1": {
-            "input": {
-              "samples": {
-                "visible": false
-              },
-              "vae": {
-                "visible": false
-              }
-            }
-          }
-        }
-      }
-    }
-  },
-  "version": 0.4
-}

browser_tests/assets/widgets/boolean_widget.json

@@ -1,35 +0,0 @@
-{
-  "last_node_id": 11,
-  "last_link_id": 9,
-  "nodes": [
-    {
-      "id": 11,
-      "type": "DevToolsNodeWithBooleanInput",
-      "pos": [
-        0,
-        30
-      ],
-      "size": [
-        315,
-        58
-      ],
-      "flags": {
-        "collapsed": false
-      },
-      "order": 0,
-      "mode": 0,
-      "inputs": [],
-      "outputs": [],
-      "properties": {
-        "Node name for S&R": "DevToolsNodeWithBooleanInput"
-      },
-      "widgets_values": [
-        false
-      ]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "version": 0.4
-}

browser_tests/dialog.spec.ts

@@ -1,4 +1,4 @@
-import { Locator, expect } from '@playwright/test'
+import { expect } from '@playwright/test'
 
 import { Keybinding } from '../src/types/keyBindingTypes'
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
@@ -66,71 +66,9 @@ test.describe('Missing models warning', () => {
     }, comfyPage.url)
   })
 
-  test('Should display a warning when missing models are found', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('missing_models')
-
-    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
-    await expect(missingModelsWarning).toBeVisible()
-
-    const downloadButton = missingModelsWarning.getByLabel('Download')
-    await expect(downloadButton).toBeVisible()
-  })
-
-  test('Should not display a warning when no missing models are found', async ({
-    comfyPage
-  }) => {
-    const modelFoldersRes = {
-      status: 200,
-      body: JSON.stringify([
-        {
-          name: 'clip',
-          folders: ['ComfyUI/models/clip']
-        }
-      ])
-    }
-    comfyPage.page.route(
-      '**/api/experiment/models',
-      (route) => route.fulfill(modelFoldersRes),
-      { times: 1 }
-    )
-
-    // Reload page to trigger indexing of model folders
-    await comfyPage.setup()
-
-    const clipModelsRes = {
-      status: 200,
-      body: JSON.stringify([
-        {
-          name: 'fake_model.safetensors',
-          pathIndex: 0
-        }
-      ])
-    }
-    comfyPage.page.route(
-      '**/api/experiment/models/clip',
-      (route) => route.fulfill(clipModelsRes),
-      { times: 1 }
-    )
-
-    await comfyPage.loadWorkflow('missing_models')
-
-    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
-    await expect(missingModelsWarning).not.toBeVisible()
-  })
-
-  test('should show on tutorial workflow', async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.TutorialCompleted', false)
-    await comfyPage.setup({ clearStorage: true })
-    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
-    await expect(missingModelsWarning).toBeVisible()
-    expect(await comfyPage.getSetting('Comfy.TutorialCompleted')).toBe(true)
-  })
-
   // Flaky test after parallelization
   // https://github.com/Comfy-Org/ComfyUI_frontend/pull/1400
-  test.skip('Should download missing model when clicking download button', async ({
+  test.skip('Should display a warning when missing models are found', async ({
     comfyPage
   }) => {
     // The fake_model.safetensors is served by
@@ -148,49 +86,6 @@ test.describe('Missing models warning', () => {
     const download = await downloadPromise
     expect(download.suggestedFilename()).toBe('fake_model.safetensors')
   })
-
-  test.describe('Do not show again checkbox', () => {
-    let checkbox: Locator
-    let closeButton: Locator
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.setSetting(
-        'Comfy.Workflow.ShowMissingModelsWarning',
-        true
-      )
-      await comfyPage.loadWorkflow('missing_models')
-
-      checkbox = comfyPage.page.getByLabel("Don't show this again")
-      closeButton = comfyPage.page.getByLabel('Close')
-    })
-
-    test('Should disable warning dialog when checkbox is checked', async ({
-      comfyPage
-    }) => {
-      await checkbox.click()
-      const changeSettingPromise = comfyPage.page.waitForRequest(
-        '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
-      )
-      await closeButton.click()
-      await changeSettingPromise
-
-      const settingValue = await comfyPage.getSetting(
-        'Comfy.Workflow.ShowMissingModelsWarning'
-      )
-      expect(settingValue).toBe(false)
-    })
-
-    test('Should keep warning dialog enabled when checkbox is unchecked', async ({
-      comfyPage
-    }) => {
-      await closeButton.click()
-
-      const settingValue = await comfyPage.getSetting(
-        'Comfy.Workflow.ShowMissingModelsWarning'
-      )
-      expect(settingValue).toBe(true)
-    })
-  })
 })
 
 test.describe('Settings', () => {
@@ -253,7 +148,7 @@ test.describe('Settings', () => {
 
     // Save keybinding
     const saveButton = comfyPage.page
-      .getByLabel('New Blank Workflow')
+      .getByLabel('Comfy.NewBlankWorkflow')
       .getByLabel('Save')
     await saveButton.click()
 
@@ -270,37 +165,3 @@ test.describe('Settings', () => {
     expect(request.postData()).toContain(JSON.stringify(expectedSetting))
   })
 })
-
-test.describe('Feedback dialog', () => {
-  test('Should open from topmenu help command', async ({ comfyPage }) => {
-    // Open feedback dialog from top menu
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
-
-    // Verify feedback dialog content is visible
-    const feedbackHeader = comfyPage.page.getByRole('heading', {
-      name: 'Feedback'
-    })
-    await expect(feedbackHeader).toBeVisible()
-  })
-
-  test('Should close when close button clicked', async ({ comfyPage }) => {
-    // Open feedback dialog
-    await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-    await comfyPage.menu.topbar.triggerTopbarCommand(['Help', 'Feedback'])
-
-    const feedbackHeader = comfyPage.page.getByRole('heading', {
-      name: 'Feedback'
-    })
-
-    // Close feedback dialog
-    await comfyPage.page
-      .getByLabel('', { exact: true })
-      .getByLabel('Close')
-      .click()
-    await feedbackHeader.waitFor({ state: 'hidden' })
-
-    // Verify dialog is closed
-    await expect(feedbackHeader).not.toBeVisible()
-  })
-})

browser_tests/domWidget.spec.ts

@@ -1,27 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
-
-test.describe('DOM Widget', () => {
-  test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('collapsed_multiline')
-
-    expect(comfyPage.page.locator('.comfy-multiline-input')).not.toBeVisible()
-  })
-
-  test('Multiline textarea correctly collapses', async ({ comfyPage }) => {
-    const multilineTextAreas = comfyPage.page.locator('.comfy-multiline-input')
-    const firstMultiline = multilineTextAreas.first()
-    const lastMultiline = multilineTextAreas.last()
-
-    await expect(firstMultiline).toBeVisible()
-    await expect(lastMultiline).toBeVisible()
-
-    const nodes = await comfyPage.getNodeRefsByType('CLIPTextEncode')
-    for (const node of nodes) {
-      await node.click('collapse')
-    }
-    await expect(firstMultiline).not.toBeVisible()
-    await expect(lastMultiline).not.toBeVisible()
-  })
-})

browser_tests/fixtures/ComfyPage.ts

@@ -904,9 +904,7 @@ export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({
         'Comfy.NodeBadge.NodeSourceBadgeMode': NodeBadgeMode.None,
         // Disable tooltips by default to avoid flakiness.
         'Comfy.EnableTooltips': false,
-        'Comfy.userId': userId,
-        // Set tutorial completed to true to avoid loading the tutorial workflow.
-        'Comfy.TutorialCompleted': true
+        'Comfy.userId': userId
       })
     } catch (e) {
       console.error(e)

browser_tests/fixtures/components/SidebarTab.ts

@@ -194,10 +194,6 @@ export class QueueSidebarTab extends SidebarTab {
     return this.root.locator('.no-results-placeholder')
   }
 
-  get galleryImage() {
-    return this.page.locator('.galleria-image')
-  }
-
   private getToggleExpandButton(isExpanded: boolean) {
     const iconSelector = isExpanded ? '.pi-image' : '.pi-images'
     return this.root.locator(`.toggle-expanded-button ${iconSelector}`)
@@ -260,24 +256,14 @@ export class QueueSidebarTab extends SidebarTab {
 
   async openTaskPreview(taskIndex: number) {
     const previewButton = this.getTaskPreviewButton(taskIndex)
+    await previewButton.hover()
     await previewButton.click()
-    return this.galleryImage.waitFor({ state: 'visible' })
+    return this.getGalleryImage(taskIndex).waitFor({ state: 'visible' })
   }
 
-  getGalleryImage(imageFilename: string) {
-    return this.galleryImage.and(this.page.getByAltText(imageFilename))
-  }
-
-  getTaskImage(imageFilename: string) {
-    return this.tasks.getByAltText(imageFilename)
-  }
-
-  /** Trigger the queue store and tasks to update */
-  async triggerTasksUpdate() {
-    await this.page.evaluate(() => {
-      window['app']['api'].dispatchCustomEvent('status', {
-        exec_info: { queue_remaining: 0 }
-      })
-    })
+  getGalleryImage(galleryItemIndex: number) {
+    // Aria labels of Galleria items are 1-based indices
+    const galleryLabel = `${galleryItemIndex + 1}`
+    return this.page.getByLabel(galleryLabel).locator('.galleria-image')
   }
 }

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -83,12 +83,6 @@ export class NodeWidgetReference {
       y: pos[1]
     }
   }
-
-  async click() {
-    await this.node.comfyPage.canvas.click({
-      position: await this.getPosition()
-    })
-  }
 }
 
 export class NodeReference {

browser_tests/fixtures/utils/taskHistory.ts

@@ -132,12 +132,11 @@ export default class TaskHistory {
   private addTask(task: HistoryTaskItem) {
     setPromptId(task)
     setQueueIndex(task)
-    this.tasks.unshift(task) // Tasks are added to the front of the queue
+    this.tasks.push(task)
   }
 
-  clearTasks(): this {
+  clearTasks() {
     this.tasks = []
-    return this
   }
 
   withTask(
@@ -156,7 +155,7 @@ export default class TaskHistory {
   /** Repeats the last task in the task history a specified number of times. */
   repeat(n: number): this {
     for (let i = 0; i < n; i++)
-      this.addTask(structuredClone(this.tasks.at(0)) as HistoryTaskItem)
+      this.addTask(structuredClone(this.tasks.at(-1)) as HistoryTaskItem)
     return this
   }
 }

browser_tests/groupNode.spec.ts

@@ -134,37 +134,6 @@ test.describe('Group Node', () => {
     expect(await manage2.getSelectedNodeType()).toBe('g2')
   })
 
-  test('Preserves hidden input configuration when containing duplicate node types', async ({
-    comfyPage
-  }) => {
-    await comfyPage.loadWorkflow('group_node_identical_nodes_hidden_inputs')
-    await comfyPage.nextFrame()
-
-    const groupNodeId = 19
-    const groupNodeName = 'two_VAE_decode'
-
-    const totalInputCount = await comfyPage.page.evaluate((nodeName) => {
-      const {
-        extra: { groupNodes }
-      } = window['app'].graph
-      const { nodes } = groupNodes[nodeName]
-      return nodes.reduce((acc: number, node) => {
-        return acc + node.inputs.length
-      }, 0)
-    }, groupNodeName)
-
-    const visibleInputCount = await comfyPage.page.evaluate((id) => {
-      const node = window['app'].graph.getNodeById(id)
-      return node.inputs.length
-    }, groupNodeId)
-
-    // Verify there are 4 total inputs (2 VAE decode nodes with 2 inputs each)
-    expect(totalInputCount).toBe(4)
-
-    // Verify there are 2 visible inputs (2 have been hidden in config)
-    expect(visibleInputCount).toBe(2)
-  })
-
   test('Reconnects inputs after configuration changed via manage dialog save', async ({
     comfyPage
   }) => {

browser_tests/menu.spec.ts

@@ -1,6 +1,9 @@
-import { expect } from '@playwright/test'
+import { expect, mergeTests } from '@playwright/test'
 
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+import { comfyPageFixture } from './fixtures/ComfyPage'
+import { webSocketFixture } from './fixtures/ws'
+
+const test = mergeTests(comfyPageFixture, webSocketFixture)
 
 test.describe('Menu', () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -707,36 +710,6 @@ test.describe('Menu', () => {
         '*Unsaved Workflow.json'
       ])
     })
-
-    test('Can drop workflow from workflows sidebar', async ({ comfyPage }) => {
-      await comfyPage.setupWorkflowsDirectory({
-        'workflow1.json': 'default.json'
-      })
-      await comfyPage.setup()
-      await comfyPage.menu.workflowsTab.open()
-
-      const nodeCount = await comfyPage.getGraphNodesCount()
-
-      // Get the bounding box of the canvas element
-      const canvasBoundingBox = (await comfyPage.page
-        .locator('#graph-canvas')
-        .boundingBox())!
-
-      // Calculate the center position of the canvas
-      const targetPosition = {
-        x: canvasBoundingBox.x + canvasBoundingBox.width / 2,
-        y: canvasBoundingBox.y + canvasBoundingBox.height / 2
-      }
-
-      await comfyPage.page.dragAndDrop(
-        '.comfyui-workflows-browse .node-label:has-text("workflow1.json")',
-        '#graph-canvas',
-        { targetPosition }
-      )
-      // Wait for the workflow to be inserted
-      await comfyPage.page.waitForTimeout(200)
-      expect(await comfyPage.getGraphNodesCount()).toBe(nodeCount * 2)
-    })
   })
 
   test.describe('Workflows topbar tabs', () => {
@@ -975,61 +948,66 @@ test.describe.skip('Queue sidebar', () => {
   })
 
   test.describe('Gallery', () => {
-    const firstImage = 'example.webp'
-    const secondImage = 'image32x32.webp'
-
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage
         .setupHistory()
-        .withTask([secondImage])
-        .withTask([firstImage])
+        .withTask(['example.webp'])
+        .repeat(1)
         .setupRoutes()
       await comfyPage.menu.queueTab.open()
       await comfyPage.menu.queueTab.waitForTasks()
-      await comfyPage.menu.queueTab.openTaskPreview(0)
     })
 
     test('displays gallery image after opening task preview', async ({
       comfyPage
     }) => {
-      await comfyPage.nextFrame()
-      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
+      await comfyPage.menu.queueTab.openTaskPreview(0)
+      expect(comfyPage.menu.queueTab.getGalleryImage(0)).toBeVisible()
     })
 
-    test('maintains active gallery item when new tasks are added', async ({
-      comfyPage
+    test('should maintain active gallery item when new tasks are added', async ({
+      comfyPage,
+      ws
     }) => {
+      const initialIndex = 0
+      await comfyPage.menu.queueTab.openTaskPreview(initialIndex)
+
       // Add a new task while the gallery is still open
-      const newImage = 'image64x64.webp'
-      comfyPage.setupHistory().withTask([newImage])
-      await comfyPage.menu.queueTab.triggerTasksUpdate()
-      await comfyPage.page.waitForTimeout(500)
-      const newTask = comfyPage.menu.queueTab.tasks.getByAltText(newImage)
-      await newTask.waitFor({ state: 'visible' })
-      // The active gallery item should still be the initial image
-      expect(comfyPage.menu.queueTab.getGalleryImage(firstImage)).toBeVisible()
+      comfyPage.setupHistory().withTask(['example.webp'])
+      await ws.trigger({
+        type: 'status',
+        data: {
+          status: { exec_info: { queue_remaining: 0 } }
+        }
+      })
+      await comfyPage.menu.queueTab.waitForTasks()
+
+      // The index of all tasks increments when a new task is prepended
+      const expectIndex = initialIndex + 1
+      expect(comfyPage.menu.queueTab.getGalleryImage(expectIndex)).toBeVisible()
     })
 
     test.describe('Gallery navigation', () => {
       const paths: {
         description: string
         path: ('Right' | 'Left')[]
-        end: string
+        expectIndex: number
       }[] = [
-        { description: 'Right', path: ['Right'], end: secondImage },
-        { description: 'Left', path: ['Right', 'Left'], end: firstImage },
-        { description: 'Left wrap', path: ['Left'], end: secondImage },
-        { description: 'Right wrap', path: ['Right', 'Right'], end: firstImage }
+        { description: 'Right', path: ['Right'], expectIndex: 1 },
+        { description: 'Left', path: ['Right', 'Left'], expectIndex: 0 },
+        { description: 'Right wrap', path: ['Right', 'Right'], expectIndex: 0 },
+        { description: 'Left wrap', path: ['Left'], expectIndex: 1 }
       ]
 
-      paths.forEach(({ description, path, end }) => {
+      paths.forEach(({ description, path, expectIndex }) => {
         test(`can navigate gallery ${description}`, async ({ comfyPage }) => {
+          await comfyPage.menu.queueTab.openTaskPreview(0)
           for (const direction of path)
-            await comfyPage.page.keyboard.press(`Arrow${direction}`, {
-              delay: 256
-            })
-          await comfyPage.nextFrame()
-          expect(comfyPage.menu.queueTab.getGalleryImage(end)).toBeVisible()
+            await comfyPage.page.keyboard.press(`Arrow${direction}`)
+
+          expect(
+            comfyPage.menu.queueTab.getGalleryImage(expectIndex)
+          ).toBeVisible()
         })
       })
     })

browser_tests/nodeSearchBox.spec.ts

@@ -82,14 +82,10 @@ test.describe('Node search box', () => {
   test('Has correct aria-labels on search results', async ({ comfyPage }) => {
     const node = 'Load Checkpoint'
     await comfyPage.doubleClickCanvas()
-    await comfyPage.searchBox.input.waitFor({ state: 'visible' })
-    await comfyPage.searchBox.input.fill(node)
-    await comfyPage.searchBox.dropdown.waitFor({ state: 'visible' })
-    // Wait for some time for the auto complete list to update.
-    // The auto complete list is debounced and may take some time to update.
-    await comfyPage.page.waitForTimeout(500)
-
-    const firstResult = comfyPage.searchBox.dropdown.locator('li').first()
+    await comfyPage.searchBox.fillAndSelectFirstNode(node)
+    const firstResult = comfyPage.page
+      .locator('li.p-autocomplete-option')
+      .first()
     await expect(firstResult).toHaveAttribute('aria-label', node)
   })
 

browser_tests/rightClickMenu.spec.ts

@@ -102,18 +102,6 @@ test.describe('Node Right Click Menu', () => {
       await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
       await comfyPage.page.getByText('Convert Widget to Input').click()
       await comfyPage.nextFrame()
-      // The submenu has an identical entry as the base menu - use last
-      await comfyPage.page.getByText('Convert width to input').last().click()
-      await comfyPage.nextFrame()
-      await expect(comfyPage.canvas).toHaveScreenshot(
-        'right-click-node-widget-converted.png'
-      )
-    })
-
-    test('Can convert widget without submenu', async ({ comfyPage }) => {
-      // Right-click the width widget
-      await comfyPage.rightClickEmptyLatentNode()
-      await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')
       await comfyPage.page.getByText('Convert width to input').click()
       await comfyPage.nextFrame()
       await expect(comfyPage.canvas).toHaveScreenshot(

browser_tests/textWidgetTruncate.spec.ts

@@ -27,16 +27,3 @@ test.describe('Combo text widget', () => {
     await expect(comfyPage.canvas).toHaveScreenshot('resized-to-original.png')
   })
 })
-
-test.describe('Boolean widget', () => {
-  test('Can toggle', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('widgets/boolean_widget')
-    await expect(comfyPage.canvas).toHaveScreenshot('boolean_widget.png')
-    const node = (await comfyPage.getFirstNodeRef())!
-    const widget = await node.getWidget(0)
-    await widget.click()
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'boolean_widget_toggled.png'
-    )
-  })
-})

global.d.ts

@@ -1,15 +1,3 @@
 declare const __COMFYUI_FRONTEND_VERSION__: string
 declare const __SENTRY_ENABLED__: boolean
 declare const __SENTRY_DSN__: string
-
-interface Navigator {
-  /**
-   * Used by the electron API.  This is a WICG non-standard API, but is guaranteed to exist in Electron.
-   * It is `undefined` in Firefox and older browsers.
-   * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/windowControlsOverlay
-   */
-  windowControlsOverlay?: {
-    /** When `true`, the window is using custom window style. */
-    visible: boolean
-  }
-}

lint-staged.config.js

@@ -11,7 +11,7 @@ export default {
 
 function formatAndEslint(fileNames) {
   return [
-    `eslint --fix ${fileNames.join(' ')}`,
-    `prettier --write ${fileNames.join(' ')}`
+    `prettier --write ${fileNames.join(' ')} --plugin @trivago/prettier-plugin-sort-imports`,
+    `eslint --fix ${fileNames.join(' ')}`
   ]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.9.6",
+  "version": "1.7.10",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -76,17 +76,16 @@
     "vite": "^5.4.6",
     "vite-plugin-dts": "^4.3.0",
     "vite-plugin-static-copy": "^1.0.5",
-    "vitest": "^2.1.9",
+    "vitest": "^2.0.5",
     "vue-tsc": "^2.1.10",
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "^3.24.1"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.4.16",
-    "@comfyorg/litegraph": "^0.8.68",
-    "@primevue/forms": "^4.2.5",
-    "@primevue/themes": "^4.2.5",
+    "@comfyorg/comfyui-electron-types": "^0.4.7",
+    "@comfyorg/litegraph": "^0.8.60",
+    "@primevue/themes": "^4.0.5",
     "@sentry/vue": "^8.48.0",
     "@tiptap/core": "^2.10.4",
     "@tiptap/extension-link": "^2.10.4",
@@ -97,7 +96,6 @@
     "@tiptap/starter-kit": "^2.10.4",
     "@vueuse/core": "^11.0.0",
     "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-serialize": "^0.13.0",
     "@xterm/xterm": "^5.5.0",
     "axios": "^1.7.4",
     "dotenv": "^16.4.5",
@@ -107,10 +105,10 @@
     "loglevel": "^1.9.2",
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
-    "primevue": "^4.2.5",
+    "primevue": "^4.0.5",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
-    "vue": "^3.5.13",
+    "vue": "^3.4.31",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.4.3",
     "zod": "^3.23.8",

public/templates/default.json

@@ -266,7 +266,7 @@
       ],
       "properties": {},
       "widgets_values": [
-        "v1-5-pruned-emaonly-fp16.safetensors"
+        "v1-5-pruned-emaonly.safetensors"
       ]
     }
   ],
@@ -349,8 +349,8 @@
   "extra": {},
   "version": 0.4,
   "models": [{
-    "name": "v1-5-pruned-emaonly-fp16.safetensors",
-    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors?download=true",
+    "name": "v1-5-pruned-emaonly.safetensors",
+    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly.safetensors?download=true",
     "directory": "checkpoints"
   }]
 }

public/templates/image2image.json

@@ -330,7 +330,7 @@
         "Node name for S&R": "CheckpointLoaderSimple"
       },
       "widgets_values": [
-        "v1-5-pruned-emaonly-fp16.safetensors"
+        "v1-5-pruned-emaonly.safetensors"
       ]
     }
   ],
@@ -440,8 +440,8 @@
   "extra": {},
   "version": 0.4,
   "models": [{
-    "name": "v1-5-pruned-emaonly-fp16.safetensors",
-    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly-fp16.safetensors?download=true",
+    "name": "v1-5-pruned-emaonly.safetensors",
+    "url": "https://huggingface.co/Comfy-Org/stable-diffusion-v1-5-archive/resolve/main/v1-5-pruned-emaonly.safetensors?download=true",
     "directory": "checkpoints"
   }]
 }

scripts/update-electron-types.js

@@ -1,43 +0,0 @@
-import { execSync } from 'child_process'
-import { readFileSync } from 'fs'
-
-const packageName = '@comfyorg/comfyui-electron-types'
-const description = 'desktop API types'
-
-try {
-  // Create a new branch
-  console.log('Creating new branch...')
-  const date = new Date()
-  const isoDate = date.toISOString().split('T')[0]
-  const timestamp = date.getTime()
-  const branchName = `update-electron-types-${isoDate}-${timestamp}`
-  execSync(`git checkout -b ${branchName} -t origin/main`, { stdio: 'inherit' })
-
-  // Update npm package to latest version
-  console.log(`Updating ${description}...`)
-  execSync(`npm install ${packageName}@latest`, {
-    stdio: 'inherit'
-  })
-
-  // Get the new version from package.json
-  const packageLock = JSON.parse(readFileSync('./package-lock.json', 'utf8'))
-  const newVersion = packageLock.packages[`node_modules/${packageName}`].version
-
-  // Stage changes
-  const message = `[chore] Update electron-types to ${newVersion}`
-  execSync('git add package.json package-lock.json', { stdio: 'inherit' })
-  execSync(`git commit -m "${message}"`, { stdio: 'inherit' })
-
-  // Create the PR
-  console.log('Creating PR...')
-  execSync(
-    `gh pr create --title "${message}" --label "dependencies" --body "Automated update of ${description} to version ${newVersion}."`,
-    { stdio: 'inherit' }
-  )
-
-  console.log(
-    `✅ Successfully created PR for ${description} update to ${newVersion}`
-  )
-} catch (error) {
-  console.error('❌ Error during update process:', error.message)
-}

src/App.vue

@@ -18,7 +18,7 @@ import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
-import { electronAPI, isElectron } from './utils/envUtil'
+import { isElectron, showNativeMenu } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const isLoading = computed<boolean>(() => workspaceStore.spinner)
@@ -34,7 +34,7 @@ const showContextMenu = (event: PointerEvent) => {
     case target instanceof HTMLTextAreaElement:
     case target instanceof HTMLInputElement && target.type === 'text':
       // TODO: Context input menu explicitly for text input
-      electronAPI()?.showContextMenu({ type: 'text' })
+      showNativeMenu({ type: 'text' })
       return
   }
 }

src/assets/css/style.css

@@ -765,30 +765,6 @@ audio.comfy-audio.empty-audio-widget {
   padding: var(--comfy-tree-explorer-item-padding) !important;
 }
 
-/* Load3d styles */
-.comfy-load-3d,
-.comfy-load-3d-animation,
-.comfy-preview-3d,
-.comfy-preview-3d-animation{
-  display: flex;
-  flex-direction: column;
-  background: transparent;
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.comfy-load-3d canvas,
-.comfy-load-3d-animation canvas,
-.comfy-preview-3d canvas,
-.comfy-preview-3d-animation canvas{
-  display: flex;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-/* End of Load3d styles */
-
 /* [Desktop] Electron window specific styles */
 .app-drag {
   app-region: drag;

src/components/actionbar/ComfyQueueButton.vue

@@ -22,7 +22,7 @@
       </template>
       <template #item="{ item }">
         <Button
-          :label="String(item.label)"
+          :label="item.label"
           :icon="item.icon"
           :severity="item.key === queueMode ? 'primary' : 'secondary'"
           size="small"

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

@@ -7,19 +7,16 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, onUnmounted, ref } from 'vue'
+import { Ref, ref } from 'vue'
 
-import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
 
 const emit = defineEmits<{
   created: [ReturnType<typeof useTerminal>, Ref<HTMLElement>]
-  unmounted: []
 }>()
 const terminalEl = ref<HTMLElement>()
 const rootEl = ref<HTMLElement>()
 emit('created', useTerminal(terminalEl), rootEl)
-
-onUnmounted(() => emit('unmounted'))
 </script>
 
 <style scoped>

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

@@ -6,7 +6,7 @@
 import { IDisposable } from '@xterm/xterm'
 import { Ref, onMounted, onUnmounted } from 'vue'
 
-import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'
 
 import BaseTerminal from './BaseTerminal.vue'
@@ -20,16 +20,11 @@ const terminalCreated = (
   let offData: IDisposable
   let offOutput: () => void
 
-  useAutoSize({
-    root,
-    autoRows: true,
-    autoCols: true,
-    onResize: () => {
-      // If we aren't visible, don't resize
-      if (!terminal.element?.offsetParent) return
+  useAutoSize(root, true, true, () => {
+    // If we aren't visible, don't resize
+    if (!terminal.element?.offsetParent) return
 
-      terminalApi.resize(terminal.cols, terminal.rows)
-    }
+    terminalApi.resize(terminal.cols, terminal.rows)
   })
 
   onMounted(async () => {

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

@@ -15,7 +15,7 @@ import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
 import { Ref, onMounted, onUnmounted, ref } from 'vue'
 
-import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
 import { api } from '@/scripts/api'
 import { useExecutionStore } from '@/stores/executionStore'
 import { LogEntry, LogsWsMessage, TerminalSize } from '@/types/apiTypes'
@@ -29,12 +29,7 @@ const terminalCreated = (
   { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
   root: Ref<HTMLElement>
 ) => {
-  // `autoCols` is false because we don't want the progress bar in the terminal
-  // to render incorrectly as the progress bar is rendered based on the
-  // server's terminal size.
-  // Apply a min cols of 80 for colab environments
-  // See https://github.com/comfyanonymous/ComfyUI/issues/6396
-  useAutoSize({ root, autoRows: true, autoCols: false, minCols: 80 })
+  useAutoSize(root, true, false)
 
   const update = (entries: Array<LogEntry>, size?: TerminalSize) => {
     if (size) {

src/components/common/CheckboxGroup.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :class="['flex flex-wrap', $attrs.class]">
+    <div
+      v-for="checkbox in checkboxes"
+      :key="checkbox.value"
+      class="flex items-center gap-2"
+    >
+      <Checkbox
+        v-model="internalSelection"
+        :inputId="checkbox.value"
+        :value="checkbox.value"
+      />
+      <label :for="checkbox.value" class="ml-2">{{ checkbox.label }}</label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Checkbox from 'primevue/checkbox'
+import { computed } from 'vue'
+
+interface CheckboxItem {
+  label: string
+  value: string
+}
+
+const props = defineProps<{
+  checkboxes: CheckboxItem[]
+  modelValue: string[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string[]): void
+}>()
+
+const internalSelection = computed({
+  get: () => props.modelValue,
+  set: (value: string[]) => emit('update:modelValue', value)
+})
+</script>

src/components/common/CustomizationDialog.vue

@@ -42,7 +42,7 @@
                 v-else
                 class="pi pi-palette"
                 :style="{ fontSize: '1.2rem' }"
-                v-tooltip="$t('color.custom')"
+                v-tooltip="$t('g.customColor')"
               ></i>
             </template>
           </SelectButton>

src/components/common/ElectronFileDownload.vue

@@ -18,7 +18,7 @@
           :label="$t('g.download') + ' (' + fileSize + ')'"
           size="small"
           outlined
-          :disabled="!!props.error"
+          :disabled="props.error"
           @click="triggerDownload"
           v-if="status === null || status === 'error'"
           icon="pi pi-download"
@@ -30,7 +30,7 @@
       v-if="status === 'in_progress' || status === 'paused'"
     >
       <!-- Temporary fix for issue when % only comes into view only if the progress bar is large enough
-           https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499
+           https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499     
       -->
       <ProgressBar
         class="flex-1"
@@ -42,7 +42,7 @@
         class="file-action-button"
         size="small"
         outlined
-        :disabled="!!props.error"
+        :disabled="props.error"
         @click="triggerPauseDownload"
         v-if="status === 'in_progress'"
         icon="pi pi-pause-circle"
@@ -53,7 +53,7 @@
         class="file-action-button"
         size="small"
         outlined
-        :disabled="!!props.error"
+        :disabled="props.error"
         @click="triggerResumeDownload"
         v-if="status === 'paused'"
         icon="pi pi-play-circle"
@@ -64,7 +64,7 @@
         class="file-action-button"
         size="small"
         outlined
-        :disabled="!!props.error"
+        :disabled="props.error"
         @click="triggerCancelDownload"
         icon="pi pi-times-circle"
         severity="danger"
@@ -80,7 +80,7 @@ import ProgressBar from 'primevue/progressbar'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useDownload } from '@/composables/useDownload'
+import { useDownload } from '@/hooks/downloadHooks'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import { formatSize } from '@/utils/formatUtil'
 

src/components/common/FileDownload.vue

@@ -15,7 +15,7 @@
         :label="$t('g.download') + ' (' + fileSize + ')'"
         size="small"
         outlined
-        :disabled="!!props.error"
+        :disabled="props.error"
         :title="props.url"
         @click="download.triggerBrowserDownload"
       />
@@ -27,7 +27,7 @@
 import Button from 'primevue/button'
 import { computed } from 'vue'
 
-import { useDownload } from '@/composables/useDownload'
+import { useDownload } from '@/hooks/downloadHooks'
 import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{

src/components/common/FormColorPicker.vue

@@ -1,17 +1,35 @@
 <template>
   <div class="color-picker-wrapper flex items-center gap-2">
-    <ColorPicker v-model="modelValue" />
+    <ColorPicker v-model="modelValue">
+      <template #header>
+        <div class="flex items-center justify-between p-2">
+          <span>{{ props.label }}</span>
+          <Button
+            v-if="props.defaultValue"
+            icon="pi pi-refresh"
+            text
+            size="small"
+            @click="resetColor"
+          />
+        </div>
+      </template>
+    </ColorPicker>
     <InputText v-model="modelValue" class="w-28" :placeholder="label" />
   </div>
 </template>
 
 <script setup lang="ts">
+import Button from 'primevue/button'
 import ColorPicker from 'primevue/colorpicker'
 import InputText from 'primevue/inputtext'
 
 const modelValue = defineModel<string>('modelValue')
-defineProps<{
+const props = defineProps<{
   defaultValue?: string
   label?: string
 }>()
+
+const resetColor = () => {
+  modelValue.value = props.defaultValue || '#000000'
+}
 </script>

src/components/common/FormItem.vue

@@ -35,7 +35,6 @@ import CustomFormValue from '@/components/common/CustomFormValue.vue'
 import FormColorPicker from '@/components/common/FormColorPicker.vue'
 import FormImageUpload from '@/components/common/FormImageUpload.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
-import UrlInput from '@/components/common/UrlInput.vue'
 import { FormItem } from '@/types/settingTypes'
 
 const formValue = defineModel<any>('formValue')
@@ -92,8 +91,6 @@ function getFormComponent(item: FormItem): Component {
       return FormImageUpload
     case 'color':
       return FormColorPicker
-    case 'url':
-      return UrlInput
     default:
       return InputText
   }

src/components/common/LogTerminal.vue

@@ -0,0 +1,66 @@
+<!-- A simple read-only terminal component that displays logs. -->
+<template>
+  <div class="p-terminal rounded-none h-full w-full">
+    <ScrollPanel class="h-full w-full" ref="scrollPanelRef">
+      <pre class="px-4 whitespace-pre-wrap">{{ log }}</pre>
+    </ScrollPanel>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ScrollPanel from 'primevue/scrollpanel'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = defineProps<{
+  fetchLogs: () => Promise<string>
+  fetchInterval: number
+}>()
+
+const log = ref<string>('')
+const scrollPanelRef = ref<InstanceType<typeof ScrollPanel> | null>(null)
+/**
+ * Whether the user has scrolled to the bottom of the terminal.
+ * This is used to prevent the terminal from scrolling to the bottom
+ * when new logs are fetched.
+ */
+const scrolledToBottom = ref(false)
+
+let intervalId: number = 0
+
+onMounted(async () => {
+  const element = scrollPanelRef.value?.$el
+  const scrollContainer = element?.querySelector('.p-scrollpanel-content')
+
+  if (scrollContainer) {
+    scrollContainer.addEventListener('scroll', () => {
+      scrolledToBottom.value =
+        scrollContainer.scrollTop + scrollContainer.clientHeight ===
+        scrollContainer.scrollHeight
+    })
+  }
+
+  const scrollToBottom = () => {
+    if (scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight
+    }
+  }
+
+  watch(log, () => {
+    if (scrolledToBottom.value) {
+      scrollToBottom()
+    }
+  })
+
+  const fetchLogs = async () => {
+    log.value = await props.fetchLogs()
+  }
+
+  await fetchLogs()
+  scrollToBottom()
+  intervalId = window.setInterval(fetchLogs, props.fetchInterval)
+})
+
+onBeforeUnmount(() => {
+  window.clearInterval(intervalId)
+})
+</script>

src/components/common/RefreshButton.vue

@@ -1,53 +0,0 @@
-<!--
-  A refresh button that disables and shows a progress spinner whilst active.
-  
-  Usage:
-  ```vue
-    <RefreshButton
-      v-model="isRefreshing"
-      :outlined="false"
-      @refresh="refresh"
-    />
-  ```
--->
-<template>
-  <Button
-    class="relative p-button-icon-only"
-    :outlined="props.outlined"
-    :severity="props.severity"
-    :disabled="active || props.disabled"
-    @click="(event) => $emit('refresh', event)"
-  >
-    <span
-      class="p-button-icon pi pi-refresh transition-all"
-      :class="{ 'opacity-0': active }"
-      data-pc-section="icon"
-    ></span>
-    <span class="p-button-label" data-pc-section="label">&nbsp;</span>
-    <ProgressSpinner v-show="active" class="absolute w-1/2 h-1/2" />
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import ProgressSpinner from 'primevue/progressspinner'
-
-import { VueSeverity } from '@/types/primeVueTypes'
-
-// Properties
-interface Props {
-  outlined?: boolean
-  disabled?: boolean
-  severity?: VueSeverity
-}
-const props = withDefaults(defineProps<Props>(), {
-  outlined: true,
-  severity: 'secondary'
-})
-
-// Model
-const active = defineModel<boolean>({ required: true })
-
-// Emits
-defineEmits(['refresh'])
-</script>

src/components/common/SearchBox.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div :class="props.class">
     <IconField>
       <Button
-        v-if="filterIcon"
+        v-if="props.filterIcon"
         class="p-inputicon filter-button"
-        :icon="filterIcon"
+        :icon="props.filterIcon"
         text
         severity="contrast"
         @click="$emit('showFilter', $event)"
@@ -12,12 +12,12 @@
       <InputText
         class="search-box-input w-full"
         @input="handleInput"
-        :modelValue="modelValue"
-        :placeholder="placeholder"
+        :modelValue="props.modelValue"
+        :placeholder="props.placeholder"
       />
-      <InputIcon v-if="!modelValue" :class="icon" />
+      <InputIcon v-if="!props.modelValue" :class="props.icon" />
       <Button
-        v-if="modelValue"
+        v-if="props.modelValue"
         class="p-inputicon clear-button"
         icon="pi pi-times"
         text
@@ -47,36 +47,40 @@ import Button from 'primevue/button'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
+import { toRefs } from 'vue'
 
 import type { SearchFilter } from './SearchFilterChip.vue'
 import SearchFilterChip from './SearchFilterChip.vue'
 
-const {
-  modelValue,
-  placeholder = 'Search...',
-  icon = 'pi pi-search',
-  debounceTime = 300,
-  filterIcon,
-  filters = []
-} = defineProps<{
-  modelValue: string
-  placeholder?: string
-  icon?: string
-  debounceTime?: number
-  filterIcon?: string
-  filters?: TFilter[]
-}>()
+const props = withDefaults(
+  defineProps<{
+    class?: string
+    modelValue: string
+    placeholder?: string
+    icon?: string
+    debounceTime?: number
+    filterIcon?: string
+    filters?: TFilter[]
+  }>(),
+  {
+    placeholder: 'Search...',
+    icon: 'pi pi-search',
+    debounceTime: 300
+  }
+)
 
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-  (e: 'search', value: string, filters: TFilter[]): void
-  (e: 'showFilter', event: Event): void
-  (e: 'removeFilter', filter: TFilter): void
-}>()
+const { filters } = toRefs(props)
+
+const emit = defineEmits([
+  'update:modelValue',
+  'search',
+  'showFilter',
+  'removeFilter'
+])
 
 const emitSearch = debounce((value: string) => {
-  emit('search', value, filters)
-}, debounceTime)
+  emit('search', value, props.filters)
+}, props.debounceTime)
 
 const handleInput = (event: Event) => {
   const target = event.target as HTMLInputElement

src/components/common/SystemStatsPanel.vue

@@ -19,7 +19,6 @@
           v-for="device in props.stats.devices"
           :key="device.index"
           :header="device.name"
-          :value="device.index"
         >
           <DeviceInfo :device="device" />
         </TabPanel>

src/components/common/TreeExplorer.vue

@@ -8,12 +8,9 @@
     selectionMode="single"
     :pt="{
       nodeLabel: 'tree-explorer-node-label',
-      nodeContent: ({ context }) => ({
-        class: 'group/tree-node',
-        onClick: (e: MouseEvent) =>
-          onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
-        onContextmenu: (e: MouseEvent) =>
-          handleContextMenu(e, context.node as RenderedTreeExplorerNode)
+      nodeContent: ({ props }) => ({
+        onClick: (e: MouseEvent) => onNodeContentClick(e, props.node),
+        onContextmenu: (e: MouseEvent) => handleContextMenu(props.node, e)
       }),
       nodeToggleButton: () => ({
         onClick: (e: MouseEvent) => {
@@ -43,7 +40,7 @@ import { computed, provide, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useErrorHandling } from '@/hooks/errorHooks'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
@@ -70,7 +67,7 @@ const renderedRoots = computed<RenderedTreeExplorerNode[]>(() => {
 })
 const getTreeNodeIcon = (node: TreeExplorerNode) => {
   if (node.getIcon) {
-    const icon = node.getIcon()
+    const icon = node.getIcon(node)
     if (icon) {
       return icon
     }
@@ -95,7 +92,7 @@ const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
     children,
     type: node.leaf ? 'node' : 'folder',
     totalLeaves,
-    badgeText: node.getBadgeText ? node.getBadgeText() : null
+    badgeText: node.getBadgeText ? node.getBadgeText(node) : null
   }
 }
 const onNodeContentClick = async (
@@ -106,7 +103,7 @@ const onNodeContentClick = async (
     selectionKeys.value = {}
   }
   if (node.handleClick) {
-    await node.handleClick(e)
+    await node.handleClick(node, e)
   }
   emit('nodeClick', node, e)
 }
@@ -128,7 +125,7 @@ const renameCommand = (node: RenderedTreeExplorerNode) => {
   renameEditingNode.value = node
 }
 const deleteCommand = async (node: RenderedTreeExplorerNode) => {
-  await node.handleDelete?.()
+  await node.handleDelete?.(node)
   emit('nodeDelete', node)
 }
 const menuItems = computed<MenuItem[]>(() =>
@@ -155,7 +152,7 @@ const menuItems = computed<MenuItem[]>(() =>
   }))
 )
 
-const handleContextMenu = (e: MouseEvent, node: RenderedTreeExplorerNode) => {
+const handleContextMenu = (node: RenderedTreeExplorerNode, e: MouseEvent) => {
   menuTargetNode.value = node
   emit('contextMenu', node, e)
   if (menuItems.value.filter((item) => item.visible).length > 0) {

src/components/common/TreeExplorerTreeNode.vue

@@ -27,25 +27,19 @@
         class="leaf-count-badge"
       />
     </div>
-    <div
-      class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
-    >
+    <div class="node-actions">
       <slot name="actions" :node="props.node"></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
 import Badge from 'primevue/badge'
 import { Ref, computed, inject, ref } from 'vue'
 
 import EditableText from '@/components/common/EditableText.vue'
-import { useErrorHandling } from '@/composables/useErrorHandling'
-import {
-  usePragmaticDraggable,
-  usePragmaticDroppable
-} from '@/composables/usePragmaticDragAndDrop'
+import { usePragmaticDraggable, usePragmaticDroppable } from '@/hooks/dndHooks'
+import { useErrorHandling } from '@/hooks/errorHooks'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerDragAndDropData,
@@ -86,7 +80,7 @@ const isEditing = computed(
 const errorHandling = useErrorHandling()
 const handleRename = errorHandling.wrapWithErrorHandlingAsync(
   async (newName: string) => {
-    await props.node.handleRename(newName)
+    await props.node.handleRename(props.node, newName)
   },
   props.node.handleError,
   () => {
@@ -108,17 +102,7 @@ if (props.node.draggable) {
       }
     },
     onDragStart: () => emit('dragStart', props.node),
-    onDrop: () => emit('dragEnd', props.node),
-    onGenerateDragPreview: props.node.renderDragPreview
-      ? ({ nativeSetDragImage }) => {
-          setCustomNativeDragPreview({
-            render: ({ container }) => {
-              return props.node.renderDragPreview(container)
-            },
-            nativeSetDragImage
-          })
-        }
-      : undefined
+    onDrop: () => emit('dragEnd', props.node)
   })
 }
 
@@ -127,7 +111,7 @@ if (props.node.droppable) {
     onDrop: async (event) => {
       const dndData = event.source.data as TreeExplorerDragAndDropData
       if (dndData.type === 'tree-explorer-node') {
-        await props.node.handleDrop?.(dndData)
+        await props.node.handleDrop?.(props.node, dndData)
         canDrop.value = false
         emit('itemDropped', props.node, dndData.data)
       }

src/components/common/UrlInput.vue

@@ -1,116 +0,0 @@
-<template>
-  <IconField class="w-full">
-    <InputText
-      v-bind="$attrs"
-      :model-value="internalValue"
-      class="w-full"
-      :invalid="validationState === ValidationState.INVALID"
-      @update:model-value="handleInput"
-      @blur="handleBlur"
-    />
-    <InputIcon
-      :class="{
-        'pi pi-spin pi-spinner text-neutral-400':
-          validationState === ValidationState.LOADING,
-        'pi pi-check text-green-500 cursor-pointer':
-          validationState === ValidationState.VALID,
-        'pi pi-times text-red-500 cursor-pointer':
-          validationState === ValidationState.INVALID
-      }"
-      @click="validateUrl(props.modelValue)"
-    />
-  </IconField>
-</template>
-
-<script setup lang="ts">
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import { onMounted, ref, watch } from 'vue'
-
-import { isValidUrl } from '@/utils/formatUtil'
-import { checkUrlReachable } from '@/utils/networkUtil'
-import { ValidationState } from '@/utils/validationUtil'
-
-const props = defineProps<{
-  modelValue: string
-  validateUrlFn?: (url: string) => Promise<boolean>
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-  'state-change': [state: ValidationState]
-}>()
-
-const validationState = ref<ValidationState>(ValidationState.IDLE)
-
-// Add internal value state
-const internalValue = ref(props.modelValue)
-
-// Watch for external modelValue changes
-watch(
-  () => props.modelValue,
-  async (newValue: string) => {
-    internalValue.value = newValue
-    await validateUrl(newValue)
-  }
-)
-
-watch(validationState, (newState) => {
-  emit('state-change', newState)
-})
-
-// Validate on mount
-onMounted(async () => {
-  await validateUrl(props.modelValue)
-})
-
-const handleInput = (value: string) => {
-  // Update internal value without emitting
-  internalValue.value = value
-  // Reset validation state when user types
-  validationState.value = ValidationState.IDLE
-}
-
-const handleBlur = async () => {
-  // Emit the update only on blur
-  emit('update:modelValue', internalValue.value)
-}
-
-// Default validation implementation
-const defaultValidateUrl = async (url: string): Promise<boolean> => {
-  if (!isValidUrl(url)) return false
-  try {
-    return await checkUrlReachable(url)
-  } catch {
-    return false
-  }
-}
-
-const validateUrl = async (value: string) => {
-  if (validationState.value === ValidationState.LOADING) return
-
-  const url = value.trim()
-
-  // Reset state
-  validationState.value = ValidationState.IDLE
-
-  // Skip validation if empty
-  if (!url) return
-
-  validationState.value = ValidationState.LOADING
-  try {
-    const isValid = await (props.validateUrlFn ?? defaultValidateUrl)(url)
-    validationState.value = isValid
-      ? ValidationState.VALID
-      : ValidationState.INVALID
-  } catch {
-    validationState.value = ValidationState.INVALID
-  }
-}
-
-// Add inheritAttrs option to prevent attrs from being applied to root element
-defineOptions({
-  inheritAttrs: false
-})
-</script>

src/components/common/__tests__/UrlInput.test.ts

@@ -1,158 +0,0 @@
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
-import { beforeEach, describe, expect, it } from 'vitest'
-import { createApp, nextTick } from 'vue'
-
-import UrlInput from '../UrlInput.vue'
-
-describe('UrlInput', () => {
-  beforeEach(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
-  })
-
-  const mountComponent = (props: any, options = {}) => {
-    return mount(UrlInput, {
-      global: {
-        plugins: [PrimeVue],
-        components: { IconField, InputIcon, InputText }
-      },
-      props,
-      ...options
-    })
-  }
-
-  it('passes through additional attributes to input element', () => {
-    const wrapper = mountComponent({
-      modelValue: '',
-      placeholder: 'Enter URL',
-      disabled: true
-    })
-
-    expect(wrapper.find('input').attributes('disabled')).toBe('')
-  })
-
-  it('emits update:modelValue on blur', async () => {
-    const wrapper = mountComponent({
-      modelValue: '',
-      placeholder: 'Enter URL'
-    })
-
-    const input = wrapper.find('input')
-    await input.setValue('https://test.com')
-    await input.trigger('blur')
-
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
-      'https://test.com'
-    ])
-  })
-
-  it('renders spinner when validation is loading', async () => {
-    const wrapper = mountComponent({
-      modelValue: '',
-      placeholder: 'Enter URL',
-      validateUrlFn: () =>
-        new Promise(() => {
-          // Never resolves, simulating perpetual loading state
-        })
-    })
-
-    wrapper.setProps({ modelValue: 'https://test.com' })
-    await nextTick()
-    await nextTick()
-
-    expect(wrapper.find('.pi-spinner').exists()).toBe(true)
-  })
-
-  it('renders check icon when validation is valid', async () => {
-    const wrapper = mountComponent({
-      modelValue: '',
-      placeholder: 'Enter URL',
-      validateUrlFn: () => Promise.resolve(true)
-    })
-
-    wrapper.setProps({ modelValue: 'https://test.com' })
-    await nextTick()
-    await nextTick()
-
-    expect(wrapper.find('.pi-check').exists()).toBe(true)
-  })
-
-  it('renders cross icon when validation is invalid', async () => {
-    const wrapper = mountComponent({
-      modelValue: '',
-      placeholder: 'Enter URL',
-      validateUrlFn: () => Promise.resolve(false)
-    })
-
-    wrapper.setProps({ modelValue: 'https://test.com' })
-    await nextTick()
-    await nextTick()
-
-    expect(wrapper.find('.pi-times').exists()).toBe(true)
-  })
-
-  it('validates on mount', async () => {
-    const wrapper = mountComponent({
-      modelValue: 'https://test.com',
-      validateUrlFn: () => Promise.resolve(true)
-    })
-
-    await nextTick()
-    await nextTick()
-
-    expect(wrapper.find('.pi-check').exists()).toBe(true)
-  })
-
-  it('triggers validation when clicking the validation icon', async () => {
-    let validationCount = 0
-    const wrapper = mountComponent({
-      modelValue: 'https://test.com',
-      validateUrlFn: () => {
-        validationCount++
-        return Promise.resolve(true)
-      }
-    })
-
-    // Wait for initial validation
-    await nextTick()
-    await nextTick()
-
-    // Click the validation icon
-    await wrapper.find('.pi-check').trigger('click')
-    await nextTick()
-    await nextTick()
-
-    expect(validationCount).toBe(2) // Once on mount, once on click
-  })
-
-  it('prevents multiple simultaneous validations', async () => {
-    let validationCount = 0
-    const wrapper = mountComponent({
-      modelValue: '',
-      validateUrlFn: () => {
-        validationCount++
-        return new Promise(() => {
-          // Never resolves, simulating perpetual loading state
-        })
-      }
-    })
-
-    wrapper.setProps({ modelValue: 'https://test.com' })
-    await nextTick()
-    await nextTick()
-
-    // Trigger multiple validations in quick succession
-    wrapper.find('.pi-spinner').trigger('click')
-    wrapper.find('.pi-spinner').trigger('click')
-    wrapper.find('.pi-spinner').trigger('click')
-
-    await nextTick()
-    await nextTick()
-
-    expect(validationCount).toBe(1) // Only the initial validation should occur
-  })
-})

src/components/dialog/UnloadWindowConfirmDialog.vue

@@ -13,16 +13,11 @@
 import { onBeforeUnmount, onMounted } from 'vue'
 
 import { useSettingStore } from '@/stores/settingStore'
-import { useWorkflowStore } from '@/stores/workflowStore'
 
 const settingStore = useSettingStore()
-const workflowStore = useWorkflowStore()
 
 const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-  if (
-    settingStore.get('Comfy.Window.UnloadConfirmation') &&
-    workflowStore.modifiedWorkflows.length > 0
-  ) {
+  if (settingStore.get('Comfy.Window.UnloadConfirmation')) {
     event.preventDefault()
     return true
   }

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -28,10 +28,8 @@
     </template>
     <ReportIssuePanel
       v-if="sendReportOpen"
-      :title="$t('issueReport.submitErrorReport')"
       error-type="graphExecutionError"
       :extra-fields="[stackTraceField]"
-      :tags="{ exceptionMessage: props.error.exception_message }"
     />
     <div class="action-container">
       <FindIssueButton
@@ -59,7 +57,7 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import type { ExecutionErrorWsMessage, SystemStats } from '@/types/apiTypes'
@@ -90,10 +88,10 @@ const stackTraceField = computed<ReportField>(() => {
     label: t('issueReport.stackTrace'),
     value: 'StackTrace',
     optIn: true,
-    getData: () => ({
+    data: {
       nodeType: props.error.node_type,
       stackTrace: props.error.traceback?.join('\n')
-    })
+    }
   }
 })
 

src/components/dialog/content/IssueReportDialogContent.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="p-2 h-full" aria-labelledby="issue-report-title">
-    <Panel
-      :pt="{
-        root: 'border-none',
-        content: 'p-0'
-      }"
-    >
-      <template #header>
-        <header class="flex flex-col items-center w-full">
-          <h2 id="issue-report-title" class="text-4xl">{{ title }}</h2>
-          <span v-if="subtitle" class="text-muted mt-0">{{ subtitle }}</span>
-        </header>
-      </template>
-      <ReportIssuePanel v-bind="panelProps" :pt="{ root: 'border-none' }" />
-    </Panel>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Panel from 'primevue/panel'
-
-import ReportIssuePanel from '@/components/dialog/content/error/ReportIssuePanel.vue'
-import type { IssueReportPanelProps } from '@/types/issueReportTypes'
-
-defineProps<{
-  title: string
-  subtitle?: string
-  panelProps: IssueReportPanelProps
-}>()
-</script>

src/components/dialog/content/MissingModelsWarning.vue

@@ -2,15 +2,9 @@
   <NoResultsPlaceholder
     class="pb-0"
     icon="pi pi-exclamation-circle"
-    :title="t('missingModelsDialog.missingModels')"
-    :message="t('missingModelsDialog.missingModelsMessage')"
+    title="Missing Models"
+    message="When loading the graph, the following models were not found"
   />
-  <div class="flex gap-1 mb-4">
-    <Checkbox v-model="doNotAskAgain" binary input-id="doNotAskAgain" />
-    <label for="doNotAskAgain">{{
-      t('missingModelsDialog.doNotAskAgain')
-    }}</label>
-  </div>
   <ListBox :options="missingModels" class="comfy-missing-models">
     <template #option="{ option }">
       <Suspense v-if="isElectron()">
@@ -31,14 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import Checkbox from 'primevue/checkbox'
 import ListBox from 'primevue/listbox'
-import { computed, onBeforeUnmount, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { computed, ref } from 'vue'
 
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { useSettingStore } from '@/stores/settingStore'
 import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here
@@ -67,10 +58,6 @@ const props = defineProps<{
   paths: Record<string, string[]>
 }>()
 
-const { t } = useI18n()
-
-const doNotAskAgain = ref(false)
-
 const modelDownloads = ref<Record<string, ModelInfo>>({})
 const missingModels = computed(() => {
   return props.missingModels.map((model) => {
@@ -120,12 +107,6 @@ const missingModels = computed(() => {
     }
   })
 })
-
-onBeforeUnmount(() => {
-  if (doNotAskAgain.value) {
-    useSettingStore().set('Comfy.Workflow.ShowMissingModelsWarning', false)
-  }
-})
 </script>
 
 <style scoped>

src/components/dialog/content/error/ReportIssuePanel.vue

@@ -1,138 +1,81 @@
 <template>
-  <Form
-    v-slot="$form"
-    @submit="submit"
-    :resolver="zodResolver(issueReportSchema)"
-  >
-    <Panel :pt="$attrs.pt">
-      <template #header>
-        <div class="flex items-center gap-2">
-          <span class="font-bold">{{ title }}</span>
-        </div>
-      </template>
-      <template #footer>
-        <div class="flex justify-end gap-4">
-          <Button
-            v-tooltip="!submitted ? $t('g.reportIssueTooltip') : undefined"
-            :label="submitted ? $t('g.reportSent') : $t('g.reportIssue')"
-            :severity="submitted ? 'secondary' : 'primary'"
-            :icon="submitted ? 'pi pi-check' : 'pi pi-send'"
-            :disabled="submitted"
-            type="submit"
-          />
-        </div>
-      </template>
-      <div class="p-4 mt-2 border border-round surface-border shadow-1">
-        <div class="flex flex-row gap-3 mb-2">
-          <div v-for="field in fields" :key="field.value">
-            <FormField
-              v-if="field.optIn"
-              v-slot="$field"
-              :name="field.value"
-              class="flex space-x-1"
-            >
-              <Checkbox
-                v-bind="$field"
-                :inputId="field.value"
-                :value="field.value"
-                v-model="selection"
-              />
-              <label :for="field.value">{{ field.label }}</label>
-            </FormField>
-          </div>
-        </div>
-        <FormField class="mb-4" v-slot="$field" name="details">
-          <Textarea
-            v-bind="$field"
-            class="w-full"
-            rows="5"
-            :placeholder="$t('issueReport.provideAdditionalDetails')"
-            :aria-label="$t('issueReport.provideAdditionalDetails')"
-          />
-          <Message
-            v-if="$field?.error && $field.touched && $field.value"
-            severity="error"
-            size="small"
-            variant="simple"
-          >
-            {{ t('issueReport.validation.maxLength') }}
-          </Message>
-        </FormField>
-        <FormField v-slot="$field" name="contactInfo">
-          <InputText
-            v-bind="$field"
-            class="w-full"
-            :placeholder="$t('issueReport.provideEmail')"
-          />
-          <Message
-            v-if="$field?.error && $field.touched && $field.value !== ''"
-            severity="error"
-            size="small"
-            variant="simple"
-          >
-            {{ t('issueReport.validation.invalidEmail') }}
-          </Message>
-        </FormField>
-
-        <div class="flex flex-row gap-3 mt-2">
-          <div v-for="checkbox in contactCheckboxes" :key="checkbox.value">
-            <FormField
-              v-slot="$field"
-              :name="checkbox.value"
-              class="flex space-x-1"
-            >
-              <Checkbox
-                v-bind="$field"
-                :inputId="checkbox.value"
-                :value="checkbox.value"
-                v-model="contactPrefs"
-                :disabled="
-                  $form.contactInfo?.error || !$form.contactInfo?.value
-                "
-              />
-              <label :for="checkbox.value">{{ checkbox.label }}</label>
-            </FormField>
-          </div>
-        </div>
+  <Panel>
+    <template #header>
+      <div class="flex items-center gap-2">
+        <span class="font-bold">{{ $t('issueReport.submitErrorReport') }}</span>
       </div>
-    </Panel>
-  </Form>
+    </template>
+    <template #footer>
+      <div class="flex justify-end">
+        <Button
+          v-tooltip="$t('g.reportIssueTooltip')"
+          :label="submitted ? $t('g.reportSent') : $t('g.reportIssue')"
+          :severity="isButtonDisabled ? 'secondary' : 'primary'"
+          :icon="icon"
+          :disabled="isButtonDisabled"
+          @click="reportIssue"
+        />
+      </div>
+    </template>
+    <div class="p-4 mt-4 border border-round surface-border shadow-1">
+      <CheckboxGroup
+        v-model="selection"
+        class="gap-4 mb-4"
+        :checkboxes="reportCheckboxes"
+      />
+      <div class="mb-4">
+        <InputText
+          v-model="contactInfo"
+          class="w-full"
+          :placeholder="$t('issueReport.provideEmail')"
+          :maxlength="CONTACT_MAX_LEN"
+        />
+        <CheckboxGroup
+          v-model="contactPrefs"
+          class="gap-3 mt-2"
+          :checkboxes="contactCheckboxes"
+        />
+      </div>
+      <div class="mb-4">
+        <Textarea
+          v-model="details"
+          class="w-full"
+          rows="4"
+          :maxlength="DETAILS_MAX_LEN"
+          :placeholder="$t('issueReport.provideAdditionalDetails')"
+          :aria-label="$t('issueReport.provideAdditionalDetails')"
+        />
+      </div>
+    </div>
+  </Panel>
 </template>
 
 <script setup lang="ts">
-import { Form, FormField, type FormSubmitEvent } from '@primevue/forms'
-// @ts-expect-error https://github.com/primefaces/primevue/issues/6722
-import { zodResolver } from '@primevue/forms/resolvers/zod'
 import type { CaptureContext, User } from '@sentry/core'
 import { captureMessage } from '@sentry/core'
-import _ from 'lodash'
 import cloneDeep from 'lodash/cloneDeep'
 import Button from 'primevue/button'
-import Checkbox from 'primevue/checkbox'
 import InputText from 'primevue/inputtext'
-import Message from 'primevue/message'
 import Panel from 'primevue/panel'
 import Textarea from 'primevue/textarea'
 import { useToast } from 'primevue/usetoast'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import CheckboxGroup from '@/components/common/CheckboxGroup.vue'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
-import {
-  type IssueReportFormData,
-  type ReportField,
-  issueReportSchema
-} from '@/types/issueReportTypes'
-import type {
-  DefaultField,
-  IssueReportPanelProps
-} from '@/types/issueReportTypes'
-import { isElectron } from '@/utils/envUtil'
+import type { DefaultField, ReportField } from '@/types/issueReportTypes'
 
 const ISSUE_NAME = 'User reported issue'
+const DETAILS_MAX_LEN = 5_000
+const CONTACT_MAX_LEN = 320
 
-const props = defineProps<IssueReportPanelProps>()
+const props = defineProps<{
+  errorType: string
+  defaultFields?: DefaultField[]
+  extraFields?: ReportField[]
+}>()
 const { defaultFields = ['Workflow', 'Logs', 'SystemStats', 'Settings'] } =
   props
 
@@ -141,112 +84,114 @@ const toast = useToast()
 
 const selection = ref<string[]>([])
 const contactPrefs = ref<string[]>([])
+const contactInfo = ref('')
+const details = ref('')
+const submitting = ref(false)
 const submitted = ref(false)
 
+const followUp = computed(() => contactPrefs.value.includes('FollowUp'))
+const notifyResolve = computed(() => contactPrefs.value.includes('Resolution'))
+
+const icon = computed(() => {
+  if (submitting.value) return 'pi pi-spin pi-spinner'
+  if (submitted.value) return 'pi pi-check'
+  return 'pi pi-send'
+})
+const isFormEmpty = computed(() => !selection.value.length && !details.value)
+const isButtonDisabled = computed(
+  () => submitted.value || submitting.value || isFormEmpty.value
+)
+
 const contactCheckboxes = [
-  { label: t('issueReport.contactFollowUp'), value: 'followUp' },
-  { label: t('issueReport.notifyResolve'), value: 'notifyOnResolution' }
+  { label: t('issueReport.contactFollowUp'), value: 'FollowUp' },
+  { label: t('issueReport.notifyResolve'), value: 'Resolution' }
 ]
-
-const defaultFieldsConfig: ReportField[] = [
-  {
-    label: t('issueReport.systemStats'),
-    value: 'SystemStats',
-    getData: () => api.getSystemStats(),
-    optIn: true
-  },
-  {
-    label: t('g.workflow'),
-    value: 'Workflow',
-    getData: () => cloneDeep(app.graph.asSerialisable()),
-    optIn: true
-  },
-  {
-    label: t('g.logs'),
-    value: 'Logs',
-    getData: () => api.getLogs(),
-    optIn: true
-  },
-  {
-    label: t('g.settings'),
-    value: 'Settings',
-    getData: () => api.getSettings(),
-    optIn: true
-  }
+const defaultReportCheckboxes = [
+  { label: t('g.workflow'), value: 'Workflow' },
+  { label: t('g.logs'), value: 'Logs' },
+  { label: t('issueReport.systemStats'), value: 'SystemStats' },
+  { label: t('g.settings'), value: 'Settings' }
 ]
-
-const fields = computed(() => [
-  ...defaultFieldsConfig.filter(({ value }) =>
+const reportCheckboxes = computed(() => [
+  ...(props.extraFields?.map(({ label, value }) => ({ label, value })) ?? []),
+  ...defaultReportCheckboxes.filter(({ value }) =>
     defaultFields.includes(value as DefaultField)
-  ),
-  ...(props.extraFields ?? [])
+  )
 ])
 
-const createUser = (formData: IssueReportFormData): User => ({
-  email: formData.contactInfo || undefined
-})
+const getUserInfo = (): User => ({ email: contactInfo.value })
 
-const createExtraData = async (formData: IssueReportFormData) => {
-  const result = {}
-  const isChecked = (fieldValue: string) => formData[fieldValue]
+const getLogs = async () =>
+  selection.value.includes('Logs') ? api.getLogs() : null
 
-  await Promise.all(
-    fields.value
-      .filter((field) => !field.optIn || isChecked(field.value))
-      .map(async (field) => {
-        try {
-          result[field.value] = await field.getData()
-        } catch (error) {
-          console.error(`Failed to collect ${field.value}:`, error)
-          result[field.value] = { error: String(error) }
-        }
-      })
-  )
+const getSystemStats = async () =>
+  selection.value.includes('SystemStats') ? api.getSystemStats() : null
 
-  return result
+const getSettings = async () =>
+  selection.value.includes('Settings') ? api.getSettings() : null
+
+const getWorkflow = () =>
+  selection.value.includes('Workflow')
+    ? cloneDeep(app.graph.asSerialisable())
+    : null
+
+const createDefaultFields = async () => {
+  const [settings, systemStats, logs, workflow] = await Promise.all([
+    getSettings(),
+    getSystemStats(),
+    getLogs(),
+    getWorkflow()
+  ])
+  return { settings, systemStats, logs, workflow }
 }
 
-const createCaptureContext = async (
-  formData: IssueReportFormData
-): Promise<CaptureContext> => {
+const createExtraFields = (): Record<string, unknown> | undefined => {
+  if (!props.extraFields) return undefined
+
+  return props.extraFields
+    .filter((field) => !field.optIn || selection.value.includes(field.value))
+    .reduce((acc, field) => ({ ...acc, ...cloneDeep(field.data) }), {})
+}
+
+const createFeedback = () => {
   return {
-    user: createUser(formData),
-    level: 'error',
-    tags: {
-      errorType: props.errorType,
-      followUp: formData.contactInfo ? formData.followUp : false,
-      notifyOnResolution: formData.contactInfo
-        ? formData.notifyOnResolution
-        : false,
-      isElectron: isElectron(),
-      ..._.mapValues(props.tags, (tag) => _.trim(tag).replace(/[\n\r\t]/g, ' '))
-    },
-    extra: {
-      details: formData.details,
-      ...(await createExtraData(formData))
+    details: details.value,
+    contactPreferences: {
+      followUp: followUp.value,
+      notifyOnResolution: notifyResolve.value
     }
   }
 }
 
-const submit = async (event: FormSubmitEvent) => {
-  if (event.valid) {
-    try {
-      const captureContext = await createCaptureContext(event.values)
-      captureMessage(ISSUE_NAME, captureContext)
-      submitted.value = true
-      toast.add({
-        severity: 'success',
-        summary: t('g.reportSent'),
-        life: 3000
-      })
-    } catch (error) {
-      toast.add({
-        severity: 'error',
-        summary: t('g.error'),
-        detail: error.message,
-        life: 3000
-      })
+const createCaptureContext = async (): Promise<CaptureContext> => {
+  return {
+    user: getUserInfo(),
+    level: 'error',
+    tags: {
+      errorType: props.errorType
+    },
+    extra: {
+      ...createFeedback(),
+      ...(await createDefaultFields()),
+      ...createExtraFields()
     }
   }
 }
+
+const reportIssue = async () => {
+  if (isButtonDisabled.value) return
+
+  submitting.value = true
+  try {
+    captureMessage(ISSUE_NAME, await createCaptureContext())
+    submitted.value = true
+    toast.add({
+      severity: 'success',
+      summary: t('g.reportSent'),
+      life: 3000
+    })
+  } finally {
+    submitting.value = false
+  }
+}
 </script>

src/components/dialog/content/error/__tests__/ReportIssuePanel.spec.ts

@@ -1,51 +1,26 @@
 // @ts-strict-ignore
-import { Form } from '@primevue/forms'
+import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import Checkbox from 'primevue/checkbox'
+import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
+import Panel from 'primevue/panel'
 import Textarea from 'primevue/textarea'
 import Tooltip from 'primevue/tooltip'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeAll, describe, expect, it, vi } from 'vitest'
+import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 
+import CheckboxGroup from '@/components/common/CheckboxGroup.vue'
 import enMesages from '@/locales/en/main.json'
-import { IssueReportPanelProps } from '@/types/issueReportTypes'
+import { DefaultField, ReportField } from '@/types/issueReportTypes'
 
 import ReportIssuePanel from '../ReportIssuePanel.vue'
 
-const DEFAULT_FIELDS = ['Workflow', 'Logs', 'Settings', 'SystemStats']
-const CUSTOM_FIELDS = [
-  {
-    label: 'Custom Field',
-    value: 'CustomField',
-    optIn: true,
-    getData: () => 'mock data'
-  }
-]
-
-async function getSubmittedContext() {
-  const { captureMessage } = (await import('@sentry/core')) as any
-  return captureMessage.mock.calls[0][1]
-}
-
-async function submitForm(wrapper: any) {
-  await wrapper.findComponent(Form).trigger('submit')
-  return getSubmittedContext()
-}
-
-async function findAndUpdateCheckbox(
-  wrapper: any,
-  value: string,
-  checked = true
-) {
-  const checkbox = wrapper
-    .findAllComponents(Checkbox)
-    .find((c: any) => c.props('value') === value)
-  if (!checkbox) throw new Error(`Checkbox with value "${value}" not found`)
-
-  await checkbox.vm.$emit('update:modelValue', checked)
-  return checkbox
+type ReportIssuePanelProps = {
+  errorType: string
+  defaultFields?: DefaultField[]
+  extraFields?: ReportField[]
 }
 
 const i18n = createI18n({
@@ -82,64 +57,18 @@ vi.mock('@sentry/core', () => ({
   captureMessage: vi.fn()
 }))
 
-vi.mock('@primevue/forms', () => ({
-  Form: {
-    name: 'Form',
-    template:
-      '<form @submit.prevent="onSubmit"><slot :values="formValues" /></form>',
-    props: ['resolver'],
-    data() {
-      return {
-        formValues: {}
-      }
-    },
-    methods: {
-      onSubmit() {
-        this.$emit('submit', {
-          valid: true,
-          values: this.formValues
-        })
-      },
-      updateFieldValue(name: string, value: any) {
-        this.formValues[name] = value
-      }
-    }
-  },
-  FormField: {
-    name: 'FormField',
-    template:
-      '<div><slot :modelValue="modelValue" @update:modelValue="updateValue" /></div>',
-    props: ['name'],
-    data() {
-      return {
-        modelValue: ''
-      }
-    },
-    methods: {
-      updateValue(value) {
-        this.modelValue = value
-        let parent = this.$parent
-        while (parent && parent.$options.name !== 'Form') {
-          parent = parent.$parent
-        }
-        if (parent) {
-          parent.updateFieldValue(this.name, value)
-        }
-      }
-    }
-  }
-}))
-
 describe('ReportIssuePanel', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
+  beforeAll(() => {
+    const app = createApp({})
+    app.use(PrimeVue)
   })
 
-  const mountComponent = (props: IssueReportPanelProps, options = {}): any => {
+  const mountComponent = (props: ReportIssuePanelProps, options = {}): any => {
     return mount(ReportIssuePanel, {
       global: {
-        plugins: [PrimeVue, i18n],
-        directives: { tooltip: Tooltip }
+        plugins: [PrimeVue, createTestingPinia(), i18n],
+        directives: { tooltip: Tooltip },
+        components: { InputText, Button, Panel, Textarea, CheckboxGroup }
       },
       props,
       ...options
@@ -149,66 +78,44 @@ describe('ReportIssuePanel', () => {
   it('renders the panel with all required components', () => {
     const wrapper = mountComponent({ errorType: 'Test Error' })
     expect(wrapper.find('.p-panel').exists()).toBe(true)
-    expect(wrapper.findAllComponents(Checkbox).length).toBe(6)
+    expect(wrapper.findAllComponents(CheckboxGroup).length).toBe(2)
     expect(wrapper.findComponent(InputText).exists()).toBe(true)
     expect(wrapper.findComponent(Textarea).exists()).toBe(true)
+    expect(wrapper.findComponent(Button).exists()).toBe(true)
   })
 
   it('updates selection when checkboxes are selected', async () => {
-    const wrapper = mountComponent({
-      errorType: 'Test Error'
-    })
-
-    const checkboxes = wrapper.findAllComponents(Checkbox)
-
-    for (const field of DEFAULT_FIELDS) {
-      const checkbox = checkboxes.find(
-        (checkbox) => checkbox.props('value') === field
-      )
-      expect(checkbox).toBeDefined()
-
-      await checkbox?.vm.$emit('update:modelValue', [field])
-      expect(wrapper.vm.selection).toContain(field)
-    }
+    const wrapper = mountComponent({ errorType: 'Test Error' })
+    const checkboxes = wrapper.findAllComponents(CheckboxGroup).at(0)
+    await checkboxes?.setValue(['Workflow', 'Logs'])
+    expect(wrapper.vm.selection).toEqual(['Workflow', 'Logs'])
   })
 
   it('updates contactInfo when input is changed', async () => {
     const wrapper = mountComponent({ errorType: 'Test Error' })
     const input = wrapper.findComponent(InputText)
-
-    await input.vm.$emit('update:modelValue', 'test@example.com')
-    const context = await submitForm(wrapper)
-    expect(context.user.email).toBe('test@example.com')
+    await input.setValue('test@example.com')
+    expect(wrapper.vm.contactInfo).toBe('test@example.com')
   })
 
   it('updates additional details when textarea is changed', async () => {
     const wrapper = mountComponent({ errorType: 'Test Error' })
     const textarea = wrapper.findComponent(Textarea)
-
-    await textarea.vm.$emit('update:modelValue', 'This is a test detail.')
-    const context = await submitForm(wrapper)
-    expect(context.extra.details).toBe('This is a test detail.')
+    await textarea.setValue('This is a test detail.')
+    expect(wrapper.vm.details).toBe('This is a test detail.')
   })
 
-  it('set contact preferences back to false if email is removed', async () => {
+  it('updates contactPrefs when preferences are selected', async () => {
     const wrapper = mountComponent({ errorType: 'Test Error' })
-    const input = wrapper.findComponent(InputText)
+    const preferences = wrapper.findAllComponents(CheckboxGroup).at(1)
+    await preferences?.setValue(['FollowUp'])
+    expect(wrapper.vm.contactPrefs).toEqual(['FollowUp'])
+  })
 
-    // Set a valid email, enabling the contact preferences to be changed
-    await input.vm.$emit('update:modelValue', 'name@example.com')
-
-    // Enable both contact preferences
-    for (const pref of ['followUp', 'notifyOnResolution']) {
-      await findAndUpdateCheckbox(wrapper, pref)
-    }
-
-    // Change the email back to empty
-    await input.vm.$emit('update:modelValue', '')
-    const context = await submitForm(wrapper)
-
-    // Check that the contact preferences are back to false automatically
-    expect(context.tags.followUp).toBe(false)
-    expect(context.tags.notifyOnResolution).toBe(false)
+  it('does not allow submission if the form is empty', async () => {
+    const wrapper = mountComponent({ errorType: 'Test Error' })
+    await wrapper.vm.reportIssue()
+    expect(wrapper.vm.submitted).toBe(false)
   })
 
   it('renders with overridden default fields', () => {
@@ -216,87 +123,83 @@ describe('ReportIssuePanel', () => {
       errorType: 'Test Error',
       defaultFields: ['Settings']
     })
-
-    // Filter out the contact preferences checkboxes
-    const fieldCheckboxes = wrapper
-      .findAllComponents(Checkbox)
-      .filter(
-        (checkbox) =>
-          !['followUp', 'notifyOnResolution'].includes(checkbox.props('value'))
-      )
-    expect(fieldCheckboxes.length).toBe(1)
-    expect(fieldCheckboxes.at(0)?.props('value')).toBe('Settings')
+    const checkboxes = wrapper.findAllComponents(CheckboxGroup).at(0)
+    expect(checkboxes?.props('checkboxes')).toEqual([
+      { label: 'Settings', value: 'Settings' }
+    ])
   })
 
   it('renders additional fields when extraFields prop is provided', () => {
-    const wrapper = mountComponent({
-      errorType: 'Test Error',
-      extraFields: CUSTOM_FIELDS
+    const extraFields = [
+      { label: 'Custom Field', value: 'CustomField', optIn: true, data: {} }
+    ]
+    const wrapper = mountComponent({ errorType: 'Test Error', extraFields })
+    const checkboxes = wrapper.findAllComponents(CheckboxGroup).at(0)
+    expect(checkboxes?.props('checkboxes')).toContainEqual({
+      label: 'Custom Field',
+      value: 'CustomField'
     })
-    const customCheckbox = wrapper
-      .findAllComponents(Checkbox)
-      .find((checkbox) => checkbox.props('value') === 'CustomField')
-    expect(customCheckbox).toBeDefined()
-  })
-
-  it('allows custom fields to be selected', async () => {
-    const wrapper = mountComponent({
-      errorType: 'Test Error',
-      extraFields: CUSTOM_FIELDS
-    })
-
-    await findAndUpdateCheckbox(wrapper, 'CustomField')
-    const context = await submitForm(wrapper)
-    expect(context.extra.CustomField).toBe('mock data')
   })
 
   it('does not submit unchecked fields', async () => {
     const wrapper = mountComponent({ errorType: 'Test Error' })
     const textarea = wrapper.findComponent(Textarea)
 
-    // Set details but don't check any field checkboxes
-    await textarea.vm.$emit(
-      'update:modelValue',
-      'Report with only text but no fields selected'
-    )
-    const context = await submitForm(wrapper)
+    await textarea.setValue('Report with only text but no fields selected')
+    await wrapper.vm.reportIssue()
 
-    // Verify none of the optional fields were included
-    for (const field of DEFAULT_FIELDS) {
-      expect(context.extra[field]).toBeUndefined()
-    }
+    const { captureMessage } = (await import('@sentry/core')) as any
+    const captureContext = captureMessage.mock.calls[0][1]
+
+    expect(captureContext.extra.logs).toBeNull()
+    expect(captureContext.extra.systemStats).toBeNull()
+    expect(captureContext.extra.settings).toBeNull()
+    expect(captureContext.extra.workflow).toBeNull()
   })
 
   it.each([
     {
       checkbox: 'Logs',
       apiMethod: 'getLogs',
-      expectedKey: 'Logs',
+      expectedKey: 'logs',
       mockValue: 'mock logs'
     },
     {
       checkbox: 'SystemStats',
       apiMethod: 'getSystemStats',
-      expectedKey: 'SystemStats',
+      expectedKey: 'systemStats',
       mockValue: 'mock stats'
     },
     {
       checkbox: 'Settings',
       apiMethod: 'getSettings',
-      expectedKey: 'Settings',
+      expectedKey: 'settings',
       mockValue: 'mock settings'
     }
   ])(
-    'submits $checkbox data when checkbox is selected',
+    'submits (%s) when the (%s) checkbox is selected',
     async ({ checkbox, apiMethod, expectedKey, mockValue }) => {
       const wrapper = mountComponent({ errorType: 'Test Error' })
 
       const { api } = (await import('@/scripts/api')) as any
       vi.spyOn(api, apiMethod).mockResolvedValue(mockValue)
 
-      await findAndUpdateCheckbox(wrapper, checkbox)
-      const context = await submitForm(wrapper)
-      expect(context.extra[expectedKey]).toBe(mockValue)
+      const { captureMessage } = await import('@sentry/core')
+
+      // Select the checkbox
+      const checkboxes = wrapper.findAllComponents(CheckboxGroup).at(0)
+      await checkboxes?.vm.$emit('update:modelValue', [checkbox])
+
+      await wrapper.vm.reportIssue()
+      expect(api[apiMethod]).toHaveBeenCalled()
+
+      // Verify the message includes the associated data
+      expect(captureMessage).toHaveBeenCalledWith(
+        'User reported issue',
+        expect.objectContaining({
+          extra: expect.objectContaining({ [expectedKey]: mockValue })
+        })
+      )
     }
   )
 
@@ -304,12 +207,24 @@ describe('ReportIssuePanel', () => {
     const wrapper = mountComponent({ errorType: 'Test Error' })
 
     const { app } = (await import('@/scripts/app')) as any
+    const { captureMessage } = await import('@sentry/core')
+
     const mockWorkflow = { nodes: [], edges: [] }
     vi.spyOn(app.graph, 'asSerialisable').mockReturnValue(mockWorkflow)
 
-    await findAndUpdateCheckbox(wrapper, 'Workflow')
-    const context = await submitForm(wrapper)
+    // Select the "Workflow" checkbox
+    const checkboxes = wrapper.findAllComponents(CheckboxGroup).at(0)
+    await checkboxes?.vm.$emit('update:modelValue', ['Workflow'])
 
-    expect(context.extra.Workflow).toEqual(mockWorkflow)
+    await wrapper.vm.reportIssue()
+    expect(app.graph.asSerialisable).toHaveBeenCalled()
+
+    // Verify the message includes the workflow
+    expect(captureMessage).toHaveBeenCalledWith(
+      'User reported issue',
+      expect.objectContaining({
+        extra: expect.objectContaining({ workflow: mockWorkflow })
+      })
+    )
   })
 })

src/components/dialog/content/setting/ColorPaletteMessage.vue

@@ -13,13 +13,13 @@
           optionValue="id"
         />
         <Button
-          icon="pi pi-file-export"
+          icon="pi pi-upload"
           text
           :title="$t('g.export')"
           @click="colorPaletteService.exportColorPalette(activePaletteId)"
         />
         <Button
-          icon="pi pi-file-import"
+          icon="pi pi-download"
           text
           :title="$t('g.import')"
           @click="importCustomPalette"

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -68,7 +68,7 @@
       class="min-w-96"
       v-model:visible="editDialogVisible"
       modal
-      :header="currentEditingCommand?.label"
+      :header="currentEditingCommand?.id"
       @hide="cancelEdit"
     >
       <div>
@@ -151,7 +151,6 @@ const { t } = useI18n()
 interface ICommandData {
   id: string
   keybinding: KeybindingImpl | null
-  label: string
 }
 
 const commandsData = computed<ICommandData[]>(() => {
@@ -214,17 +213,6 @@ function removeKeybinding(commandData: ICommandData) {
 }
 
 function captureKeybinding(event: KeyboardEvent) {
-  // Allow the use of keyboard shortcuts when adding keyboard shortcuts
-  if (!event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
-    switch (event.key) {
-      case 'Escape':
-        cancelEdit()
-        return
-      case 'Enter':
-        saveKeybinding()
-        return
-    }
-  }
   const keyCombo = KeyComboImpl.fromEvent(event)
   newBindingKeyCombo.value = keyCombo
 }

src/components/dialog/content/setting/ServerConfigPanel.vue

@@ -74,8 +74,8 @@ import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import type { ServerConfig } from '@/constants/serverConfig'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { useSettingStore } from '@/stores/settingStore'
 import type { FormItem as FormItemType } from '@/types/settingTypes'

src/components/graph/GraphCanvas.vue

@@ -29,7 +29,18 @@
 </template>
 
 <script setup lang="ts">
-import { CanvasPointer, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
+import {
+  CanvasPointer,
+  ContextMenu,
+  DragAndScale,
+  LGraph,
+  LGraphBadge,
+  LGraphCanvas,
+  LGraphGroup,
+  LGraphNode,
+  LLink,
+  LiteGraph
+} from '@comfyorg/litegraph'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -41,33 +52,38 @@ import TitleEditor from '@/components/graph/TitleEditor.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
-import { useCanvasDrop } from '@/composables/useCanvasDrop'
-import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
-import { useCopy } from '@/composables/useCopy'
-import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
-import { usePaste } from '@/composables/usePaste'
-import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
-import { i18n } from '@/i18n'
+import { usePragmaticDroppable } from '@/hooks/dndHooks'
 import { api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
+import { getStorageValue, setStorageValue } from '@/scripts/utils'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useLitegraphService } from '@/services/litegraphService'
 import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { ComfyModelDef } from '@/stores/modelStore'
+import {
+  ModelNodeProvider,
+  useModelToNodeStore
+} from '@/stores/modelToNodeStore'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSettingStore } from '@/stores/settingStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
+const litegraphService = useLitegraphService()
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
 const canvasStore = useCanvasStore()
+const modelToNodeStore = useModelToNodeStore()
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
 )
@@ -79,6 +95,29 @@ const canvasMenuEnabled = computed(() =>
 )
 const tooltipEnabled = computed(() => settingStore.get('Comfy.EnableTooltips'))
 
+const storedWorkflows = JSON.parse(
+  getStorageValue('Comfy.OpenWorkflowsPaths') || '[]'
+)
+const storedActiveIndex = JSON.parse(
+  getStorageValue('Comfy.ActiveWorkflowIndex') || '-1'
+)
+const openWorkflows = computed(() => workspaceStore?.workflow?.openWorkflows)
+const activeWorkflow = computed(() => workspaceStore?.workflow?.activeWorkflow)
+const restoreState = computed<{ paths: string[]; activeIndex: number }>(() => {
+  if (!openWorkflows.value || !activeWorkflow.value) {
+    return { paths: [], activeIndex: -1 }
+  }
+
+  const paths = openWorkflows.value
+    .filter((workflow) => workflow?.isPersisted && !workflow.isModified)
+    .map((workflow) => workflow.path)
+  const activeIndex = openWorkflows.value.findIndex(
+    (workflow) => workflow.path === activeWorkflow.value?.path
+  )
+
+  return { paths, activeIndex }
+})
+
 watchEffect(() => {
   const canvasInfoEnabled = settingStore.get('Comfy.Graph.CanvasInfo')
   if (canvasStore.canvas) {
@@ -145,17 +184,6 @@ watchEffect(() => {
   }
 })
 
-watchEffect(() => {
-  const lowQualityRenderingZoomThreshold = settingStore.get(
-    'LiteGraph.Canvas.LowQualityRenderingZoomThreshold'
-  )
-  if (canvasStore.canvas) {
-    canvasStore.canvas.low_quality_zoom_threshold =
-      lowQualityRenderingZoomThreshold
-    canvasStore.canvas.setDirty(/* fg */ true, /* bg */ true)
-  }
-})
-
 watchEffect(() => {
   const linkMarkerShape = settingStore.get('Comfy.Graph.LinkMarkers')
   const { canvas } = canvasStore
@@ -241,32 +269,98 @@ watch(
   }
 )
 
-watchEffect(() => {
-  LiteGraph.context_menu_scaling = settingStore.get(
-    'LiteGraph.ContextMenu.Scaling'
-  )
-})
-
-const loadCustomNodesI18n = async () => {
-  try {
-    const i18nData = await api.getCustomNodesI18n()
-    Object.entries(i18nData).forEach(([locale, message]) => {
-      i18n.global.mergeLocaleMessage(locale, message)
-    })
-  } catch (error) {
-    console.error('Failed to load custom nodes i18n', error)
+const workflowStore = useWorkflowStore()
+const persistCurrentWorkflow = () => {
+  const workflow = JSON.stringify(comfyApp.serializeGraph())
+  localStorage.setItem('workflow', workflow)
+  if (api.clientId) {
+    sessionStorage.setItem(`workflow:${api.clientId}`, workflow)
   }
 }
 
-const comfyAppReady = ref(false)
-const workflowPersistence = useWorkflowPersistence()
-useCanvasDrop(canvasRef)
+watchEffect(() => {
+  if (workflowStore.activeWorkflow) {
+    const workflow = workflowStore.activeWorkflow
+    setStorageValue('Comfy.PreviousWorkflow', workflow.key)
+    // When the activeWorkflow changes, the graph has already been loaded.
+    // Saving the current state of the graph to the localStorage.
+    persistCurrentWorkflow()
+  }
+})
 
+api.addEventListener('graphChanged', persistCurrentWorkflow)
+
+usePragmaticDroppable(() => canvasRef.value, {
+  onDrop: (event) => {
+    const loc = event.location.current.input
+    const dndData = event.source.data
+
+    if (dndData.type === 'tree-explorer-node') {
+      const node = dndData.data as RenderedTreeExplorerNode
+      if (node.data instanceof ComfyNodeDefImpl) {
+        const nodeDef = node.data
+        // Add an offset on x to make sure after adding the node, the cursor
+        // is on the node (top left corner)
+        const pos = comfyApp.clientPosToCanvasPos([
+          loc.clientX - 20,
+          loc.clientY
+        ])
+        litegraphService.addNodeOnGraph(nodeDef, { pos })
+      } else if (node.data instanceof ComfyModelDef) {
+        const model = node.data
+        const pos = comfyApp.clientPosToCanvasPos([loc.clientX, loc.clientY])
+        const nodeAtPos = comfyApp.graph.getNodeOnPos(pos[0], pos[1])
+        let targetProvider: ModelNodeProvider | null = null
+        let targetGraphNode: LGraphNode | null = null
+        if (nodeAtPos) {
+          const providers = modelToNodeStore.getAllNodeProviders(
+            model.directory
+          )
+          for (const provider of providers) {
+            if (provider.nodeDef.name === nodeAtPos.comfyClass) {
+              targetGraphNode = nodeAtPos
+              targetProvider = provider
+            }
+          }
+        }
+        if (!targetGraphNode) {
+          const provider = modelToNodeStore.getNodeProvider(model.directory)
+          if (provider) {
+            targetGraphNode = litegraphService.addNodeOnGraph(
+              provider.nodeDef,
+              {
+                pos
+              }
+            )
+            targetProvider = provider
+          }
+        }
+        if (targetGraphNode) {
+          const widget = targetGraphNode.widgets.find(
+            (widget) => widget.name === targetProvider.key
+          )
+          if (widget) {
+            widget.value = model.file_name
+          }
+        }
+      }
+    }
+  }
+})
+
+const comfyAppReady = ref(false)
 onMounted(async () => {
-  useGlobalLitegraph()
-  useContextMenuTranslation()
-  useCopy()
-  usePaste()
+  // Backward compatible
+  // Assign all properties of lg to window
+  window['LiteGraph'] = LiteGraph
+  window['LGraph'] = LGraph
+  window['LLink'] = LLink
+  window['LGraphNode'] = LGraphNode
+  window['LGraphGroup'] = LGraphGroup
+  window['DragAndScale'] = DragAndScale
+  window['LGraphCanvas'] = LGraphCanvas
+  window['ContextMenu'] = ContextMenu
+  window['LGraphBadge'] = LGraphBadge
 
   comfyApp.vueAppReady = true
 
@@ -274,7 +368,6 @@ onMounted(async () => {
   // ChangeTracker needs to be initialized before setup, as it will overwrite
   // some listeners of litegraph canvas.
   ChangeTracker.init(comfyApp)
-  await loadCustomNodesI18n()
   await settingStore.loadSettingValues()
   CORE_SETTINGS.forEach((setting) => {
     settingStore.addSetting(setting)
@@ -294,9 +387,17 @@ onMounted(async () => {
     'Comfy.CustomColorPalettes'
   )
 
-  // Restore workflow and workflow tabs state from storage
-  await workflowPersistence.restorePreviousWorkflow()
-  workflowPersistence.restoreWorkflowTabsState()
+  const isRestorable = storedWorkflows?.length > 0 && storedActiveIndex >= 0
+  if (isRestorable)
+    workflowStore.openWorkflowsInBackground({
+      left: storedWorkflows.slice(0, storedActiveIndex),
+      right: storedWorkflows.slice(storedActiveIndex)
+    })
+
+  watch(restoreState, ({ paths, activeIndex }) => {
+    setStorageValue('Comfy.OpenWorkflowsPaths', JSON.stringify(paths))
+    setStorageValue('Comfy.ActiveWorkflowIndex', JSON.stringify(activeIndex))
+  })
 
   // Start watching for locale change after the initial value is loaded.
   watch(

src/components/graph/NodeTooltip.vue

@@ -17,12 +17,10 @@ import { nextTick, ref } from 'vue'
 import { st } from '@/i18n'
 import { app as comfyApp } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 let idleTimeout: number
 const nodeDefStore = useNodeDefStore()
-const settingStore = useSettingStore()
 const tooltipRef = ref<HTMLDivElement>()
 const tooltipText = ref('')
 const left = ref<string>()
@@ -112,10 +110,7 @@ const onMouseMove = (e: MouseEvent) => {
   clearTimeout(idleTimeout)
 
   if ((e.target as Node).nodeName !== 'CANVAS') return
-  idleTimeout = window.setTimeout(
-    onIdle,
-    settingStore.get('LiteGraph.Node.TooltipDelay')
-  )
+  idleTimeout = window.setTimeout(onIdle, 500)
 }
 
 useEventListener(window, 'mousemove', onMouseMove)

src/components/install/DesktopSettingsConfiguration.vue

@@ -72,6 +72,14 @@
                 'install.settings.dataCollectionDialog.collect.userJourneyEvents'
               )
             }}
+            <span
+              class="pi pi-info-circle text-neutral-400"
+              v-tooltip="
+                $t(
+                  'install.settings.dataCollectionDialog.collect.userJourneyTooltip'
+                )
+              "
+            />
           </li>
         </ul>
 
@@ -108,16 +116,6 @@
             }}
           </li>
         </ul>
-
-        <div class="mt-4">
-          <a
-            href="https://comfy.org/privacy"
-            target="_blank"
-            class="text-blue-400 hover:text-blue-300 underline"
-          >
-            {{ $t('install.settings.dataCollectionDialog.viewFullPolicy') }}
-          </a>
-        </div>
       </div>
     </Dialog>
   </div>
@@ -130,8 +128,8 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { ref } from 'vue'
 
 const showDialog = ref(false)
-const autoUpdate = defineModel<boolean>('autoUpdate', { required: true })
-const allowMetrics = defineModel<boolean>('allowMetrics', { required: true })
+const autoUpdate = defineModel('autoUpdate', { required: true })
+const allowMetrics = defineModel('allowMetrics', { required: true })
 
 const showMetricsInfo = () => {
   showDialog.value = true

src/components/install/GpuPicker.vue

@@ -159,8 +159,8 @@ const pickGpu = (value: typeof selected.value) => {
 }
 </script>
 
-<style scoped>
-.p-tag {
+<style lang="postcss">
+:root {
   --p-tag-gap: 0.5rem;
 }
 

src/components/install/MirrorsConfiguration.vue

@@ -1,114 +0,0 @@
-<template>
-  <Panel
-    :header="$t('install.settings.mirrorSettings')"
-    toggleable
-    :collapsed="!showMirrorInputs"
-    pt:root="bg-neutral-800 border-none w-[600px]"
-  >
-    <template
-      v-for="([item, modelValue], index) in mirrors"
-      :key="item.settingId + item.mirror"
-    >
-      <Divider v-if="index > 0" />
-
-      <MirrorItem
-        :item="item"
-        v-model="modelValue.value"
-        @state-change="validationStates[index] = $event"
-      />
-    </template>
-    <template #icons>
-      <i
-        :class="{
-          'pi pi-spin pi-spinner text-neutral-400':
-            validationState === ValidationState.LOADING,
-          'pi pi-check text-green-500':
-            validationState === ValidationState.VALID,
-          'pi pi-times text-red-500':
-            validationState === ValidationState.INVALID
-        }"
-        v-tooltip="validationStateTooltip"
-      />
-    </template>
-  </Panel>
-</template>
-
-<script setup lang="ts">
-import {
-  CUDA_TORCH_URL,
-  NIGHTLY_CPU_TORCH_URL,
-  TorchDeviceType
-} from '@comfyorg/comfyui-electron-types'
-import Divider from 'primevue/divider'
-import Panel from 'primevue/panel'
-import { ModelRef, computed, onMounted, ref } from 'vue'
-
-import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
-import { PYPI_MIRROR, PYTHON_MIRROR, UVMirror } from '@/constants/uvMirrors'
-import { t } from '@/i18n'
-import { isInChina } from '@/utils/networkUtil'
-import { ValidationState, mergeValidationStates } from '@/utils/validationUtil'
-
-const showMirrorInputs = ref(false)
-const { device } = defineProps<{ device: TorchDeviceType }>()
-const pythonMirror = defineModel<string>('pythonMirror', { required: true })
-const pypiMirror = defineModel<string>('pypiMirror', { required: true })
-const torchMirror = defineModel<string>('torchMirror', { required: true })
-
-const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
-  const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
-  switch (device) {
-    case 'mps':
-      return {
-        settingId,
-        mirror: NIGHTLY_CPU_TORCH_URL,
-        fallbackMirror: NIGHTLY_CPU_TORCH_URL
-      }
-    case 'nvidia':
-      return {
-        settingId,
-        mirror: CUDA_TORCH_URL,
-        fallbackMirror: CUDA_TORCH_URL
-      }
-    case 'cpu':
-    default:
-      return {
-        settingId,
-        mirror: PYPI_MIRROR.mirror,
-        fallbackMirror: PYPI_MIRROR.fallbackMirror
-      }
-  }
-}
-
-const mirrors = computed<[UVMirror, ModelRef<string>][]>(() => [
-  [PYTHON_MIRROR, pythonMirror],
-  [PYPI_MIRROR, pypiMirror],
-  [getTorchMirrorItem(device), torchMirror]
-])
-
-const validationStates = ref<ValidationState[]>(
-  mirrors.value.map(() => ValidationState.IDLE)
-)
-const validationState = computed(() => {
-  return mergeValidationStates(validationStates.value)
-})
-const validationStateTooltip = computed(() => {
-  switch (validationState.value) {
-    case ValidationState.INVALID:
-      return t('install.settings.mirrorsUnreachable')
-    case ValidationState.VALID:
-      return t('install.settings.mirrorsReachable')
-    default:
-      return t('install.settings.checkingMirrors')
-  }
-})
-
-onMounted(async () => {
-  // Check if user is in China and set fallback mirrors directly
-  if (await isInChina()) {
-    for (const [item, modelValue] of mirrors.value) {
-      modelValue.value = item.fallbackMirror
-    }
-  }
-})
-</script>

src/components/install/mirror/MirrorItem.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="flex flex-col items-center gap-4">
-    <div class="w-full">
-      <h3 class="text-lg font-medium text-neutral-100">
-        {{ $t(`settings.${normalizedSettingId}.name`) }}
-      </h3>
-      <p class="text-sm text-neutral-400 mt-1">
-        {{ $t(`settings.${normalizedSettingId}.tooltip`) }}
-      </p>
-    </div>
-    <UrlInput
-      v-model="modelValue"
-      :validate-url-fn="
-        (mirror: string) =>
-          checkMirrorReachable(mirror + (item.validationPathSuffix ?? ''))
-      "
-      @state-change="validationState = $event"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
-
-import UrlInput from '@/components/common/UrlInput.vue'
-import { UVMirror } from '@/constants/uvMirrors'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-import { checkMirrorReachable } from '@/utils/networkUtil'
-import { ValidationState } from '@/utils/validationUtil'
-
-const { item } = defineProps<{
-  item: UVMirror
-}>()
-
-const emit = defineEmits<{
-  'state-change': [state: ValidationState]
-}>()
-
-const modelValue = defineModel<string>('modelValue', { required: true })
-const validationState = ref<ValidationState>(ValidationState.IDLE)
-
-const normalizedSettingId = computed(() => {
-  return normalizeI18nKey(item.settingId)
-})
-
-onMounted(() => {
-  // Set mirror value if not already set
-  if (!modelValue.value) {
-    modelValue.value = item.mirror
-  }
-})
-
-watch(validationState, (newState) => {
-  emit('state-change', newState)
-
-  // Set fallback mirror if default mirror is invalid
-  if (
-    newState === ValidationState.INVALID &&
-    modelValue.value === item.mirror
-  ) {
-    modelValue.value = item.fallbackMirror
-  }
-})
-</script>

src/components/maintenance/StatusTag.vue

@@ -1,36 +0,0 @@
-<template>
-  <Tag :icon :severity :value />
-</template>
-
-<script setup lang="ts">
-import { PrimeIcons } from '@primevue/core/api'
-import Tag from 'primevue/tag'
-import { computed } from 'vue'
-
-import { t } from '@/i18n'
-
-// Properties
-const props = defineProps<{
-  error: boolean
-  refreshing?: boolean
-}>()
-
-// Bindings
-const icon = computed(() => {
-  if (props.refreshing) return PrimeIcons.QUESTION
-  if (props.error) return PrimeIcons.TIMES
-  return PrimeIcons.CHECK
-})
-
-const severity = computed(() => {
-  if (props.refreshing) return 'info'
-  if (props.error) return 'danger'
-  return 'success'
-})
-
-const value = computed(() => {
-  if (props.refreshing) return t('maintenance.refreshing')
-  if (props.error) return t('g.error')
-  return t('maintenance.OK')
-})
-</script>

src/components/maintenance/TaskCard.vue

@@ -1,127 +0,0 @@
-<template>
-  <div
-    class="task-div max-w-48 min-h-52 grid relative"
-    :class="{ 'opacity-75': isLoading }"
-  >
-    <Card
-      class="max-w-48 relative h-full overflow-hidden"
-      :class="{ 'opacity-65': runner.state !== 'error' }"
-      v-bind="(({ onClick, ...rest }) => rest)($attrs)"
-    >
-      <template #header>
-        <i
-          v-if="runner.state === 'error'"
-          class="pi pi-exclamation-triangle text-red-500 absolute m-2 top-0 -right-14 opacity-15"
-          style="font-size: 10rem"
-        />
-        <img
-          v-if="task.headerImg"
-          :src="task.headerImg"
-          class="object-contain w-full h-full opacity-25 pt-4 px-4"
-        />
-      </template>
-      <template #title>{{ task.name }}</template>
-      <template #content>{{ description }}</template>
-      <template #footer>
-        <div class="flex gap-4 mt-1">
-          <Button
-            :icon="task.button?.icon"
-            :label="task.button?.text"
-            class="w-full"
-            raised
-            icon-pos="right"
-            @click="(event) => $emit('execute', event)"
-            :loading="isExecuting"
-          />
-        </div>
-      </template>
-    </Card>
-
-    <i
-      v-if="!isLoading && runner.state === 'OK'"
-      class="task-card-ok pi pi-check"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Card from 'primevue/card'
-import { computed } from 'vue'
-
-import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
-import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { useMinLoadingDurationRef } from '@/utils/refUtil'
-
-const taskStore = useMaintenanceTaskStore()
-const runner = computed(() => taskStore.getRunner(props.task))
-
-// Properties
-const props = defineProps<{
-  task: MaintenanceTask
-}>()
-
-// Events
-defineEmits<{
-  execute: [event: MouseEvent]
-}>()
-
-// Bindings
-const description = computed(() =>
-  runner.value.state === 'error'
-    ? props.task.errorDescription ?? props.task.shortDescription
-    : props.task.shortDescription
-)
-
-// Use a minimum run time to ensure tasks "feel" like they have run
-const reactiveLoading = computed(() => runner.value.refreshing)
-const reactiveExecuting = computed(() => runner.value.executing)
-
-const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
-const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
-</script>
-
-<style scoped>
-.task-card-ok {
-  @apply text-green-500 absolute -right-4 -bottom-4 opacity-100 row-span-full col-span-full transition-opacity;
-
-  font-size: 4rem;
-  text-shadow: 0.25rem 0 0.5rem black;
-  z-index: 10;
-}
-
-.p-card {
-  @apply transition-opacity;
-
-  --p-card-background: var(--p-button-secondary-background);
-  opacity: 0.9;
-
-  &.opacity-65 {
-    opacity: 0.4;
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-:deep(.p-card-header) {
-  z-index: 0;
-}
-
-:deep(.p-card-body) {
-  z-index: 1;
-  flex-grow: 1;
-  justify-content: space-between;
-}
-
-.task-div {
-  > i {
-    pointer-events: none;
-  }
-
-  &:hover > i {
-    opacity: 0.2;
-  }
-}
-</style>

src/components/maintenance/TaskListItem.vue

@@ -1,86 +0,0 @@
-<template>
-  <tr
-    class="border-neutral-700 border-solid border-y"
-    :class="{
-      'opacity-50': runner.resolved,
-      'opacity-75': isLoading && runner.resolved
-    }"
-  >
-    <td class="text-center w-16">
-      <TaskListStatusIcon :state="runner.state" :loading="isLoading" />
-    </td>
-    <td>
-      <p class="inline-block">{{ task.name }}</p>
-      <Button
-        class="inline-block mx-2"
-        type="button"
-        :icon="PrimeIcons.INFO_CIRCLE"
-        severity="secondary"
-        :text="true"
-        @click="toggle"
-      />
-
-      <Popover ref="infoPopover" class="block m-1 max-w-64 min-w-32">
-        <span class="whitespace-pre-line">{{ task.description }}</span>
-      </Popover>
-    </td>
-    <td class="text-right px-4">
-      <Button
-        :icon="task.button?.icon"
-        :label="task.button?.text"
-        :severity
-        icon-pos="right"
-        @click="(event) => $emit('execute', event)"
-        :loading="isExecuting"
-      />
-    </td>
-  </tr>
-</template>
-
-<script setup lang="ts">
-import { PrimeIcons } from '@primevue/core/api'
-import Button from 'primevue/button'
-import Popover from 'primevue/popover'
-import { computed, ref } from 'vue'
-
-import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
-import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { VueSeverity } from '@/types/primeVueTypes'
-import { useMinLoadingDurationRef } from '@/utils/refUtil'
-
-import TaskListStatusIcon from './TaskListStatusIcon.vue'
-
-const taskStore = useMaintenanceTaskStore()
-const runner = computed(() => taskStore.getRunner(props.task))
-
-// Properties
-const props = defineProps<{
-  task: MaintenanceTask
-}>()
-
-// Events
-defineEmits<{
-  execute: [event: MouseEvent]
-}>()
-
-// Binding
-const severity = computed<VueSeverity>(() =>
-  runner.value.state === 'error' || runner.value.state === 'warning'
-    ? 'primary'
-    : 'secondary'
-)
-
-// Use a minimum run time to ensure tasks "feel" like they have run
-const reactiveLoading = computed(() => runner.value.refreshing)
-const reactiveExecuting = computed(() => runner.value.executing)
-
-const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
-const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
-
-// Popover
-const infoPopover = ref()
-
-const toggle = (event: Event) => {
-  infoPopover.value.toggle(event)
-}
-</script>

src/components/maintenance/TaskListPanel.vue

@@ -1,115 +0,0 @@
-<template>
-  <!-- Tasks -->
-  <section class="my-4">
-    <template v-if="filter.tasks.length === 0">
-      <!-- Empty filter -->
-      <Divider />
-      <p class="text-neutral-400 w-full text-center">
-        {{ $t('maintenance.allOk') }}
-      </p>
-    </template>
-
-    <template v-else>
-      <!-- Display: List -->
-      <table
-        v-if="displayAsList === PrimeIcons.LIST"
-        class="w-full border-collapse border-hidden"
-      >
-        <TaskListItem
-          v-for="task in filter.tasks"
-          :key="task.id"
-          :task
-          @execute="(event) => confirmButton(event, task)"
-        />
-      </table>
-
-      <!-- Display: Cards -->
-      <template v-else>
-        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
-          <TaskCard
-            v-for="task in filter.tasks"
-            :key="task.id"
-            :task
-            @execute="(event) => confirmButton(event, task)"
-          />
-        </div>
-      </template>
-    </template>
-    <ConfirmPopup />
-  </section>
-</template>
-
-<script setup lang="ts">
-import { PrimeIcons } from '@primevue/core/api'
-import { useConfirm, useToast } from 'primevue'
-import ConfirmPopup from 'primevue/confirmpopup'
-import Divider from 'primevue/divider'
-
-import { t } from '@/i18n'
-import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
-import type {
-  MaintenanceFilter,
-  MaintenanceTask
-} from '@/types/desktop/maintenanceTypes'
-
-import TaskCard from './TaskCard.vue'
-import TaskListItem from './TaskListItem.vue'
-
-const toast = useToast()
-const confirm = useConfirm()
-const taskStore = useMaintenanceTaskStore()
-
-// Properties
-const props = defineProps<{
-  displayAsList: string
-  filter: MaintenanceFilter
-  isRefreshing: boolean
-}>()
-
-const executeTask = async (task: MaintenanceTask) => {
-  let message: string | undefined
-
-  try {
-    // Success
-    if ((await taskStore.execute(task)) === true) return
-
-    message = t('maintenance.error.taskFailed')
-  } catch (error) {
-    message = (error as Error)?.message
-  }
-
-  toast.add({
-    severity: 'error',
-    summary: t('maintenance.error.toastTitle'),
-    detail: message ?? t('maintenance.error.defaultDescription'),
-    life: 10_000
-  })
-}
-
-// Commands
-const confirmButton = async (event: MouseEvent, task: MaintenanceTask) => {
-  if (!task.requireConfirm) {
-    await executeTask(task)
-    return
-  }
-
-  confirm.require({
-    target: event.currentTarget as HTMLElement,
-    message: task.confirmText ?? t('maintenance.confirmTitle'),
-    icon: 'pi pi-exclamation-circle',
-    rejectProps: {
-      label: t('g.cancel'),
-      severity: 'secondary',
-      outlined: true
-    },
-    acceptProps: {
-      label: task.button?.text ?? t('g.save'),
-      severity: task.severity ?? 'primary'
-    },
-    // TODO: Not awaited.
-    accept: async () => {
-      await executeTask(task)
-    }
-  })
-}
-</script>

src/components/maintenance/TaskListStatusIcon.vue

@@ -1,44 +0,0 @@
-<template>
-  <ProgressSpinner v-if="!state || loading" class="h-8 w-8" />
-  <template v-else>
-    <i :class="cssClasses" v-tooltip.top="{ value: tooltip, showDelay: 250 }" />
-  </template>
-</template>
-
-<script setup lang="ts">
-import { PrimeIcons } from '@primevue/core/api'
-import ProgressSpinner from 'primevue/progressspinner'
-import { MaybeRef, computed } from 'vue'
-
-import { t } from '@/i18n'
-
-// Properties
-const tooltip = computed(() => {
-  if (props.state === 'error') {
-    return t('g.error')
-  } else if (props.state === 'OK') {
-    return t('maintenance.OK')
-  } else {
-    return t('maintenance.Skipped')
-  }
-})
-
-const cssClasses = computed(() => {
-  let classes: string
-  if (props.state === 'error') {
-    classes = `${PrimeIcons.EXCLAMATION_TRIANGLE} text-red-500`
-  } else if (props.state === 'OK') {
-    classes = `${PrimeIcons.CHECK} text-green-500`
-  } else {
-    classes = PrimeIcons.MINUS
-  }
-
-  return `text-3xl pi ${classes}`
-})
-
-// Model
-const props = defineProps<{
-  state: 'warning' | 'error' | 'resolved' | 'OK' | 'skipped' | undefined
-  loading?: MaybeRef<boolean>
-}>()
-</script>

src/components/maintenance/TerminalOutputDrawer.vue

@@ -1,61 +0,0 @@
-<template>
-  <Drawer
-    v-model:visible="terminalVisible"
-    :header
-    position="bottom"
-    style="height: max(50vh, 34rem)"
-  >
-    <BaseTerminal @created="terminalCreated" @unmounted="terminalUnmounted" />
-  </Drawer>
-</template>
-
-<script setup lang="ts">
-import { Terminal } from '@xterm/xterm'
-import Drawer from 'primevue/drawer'
-import { Ref, onMounted } from 'vue'
-
-import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
-import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { useTerminalBuffer } from '@/composables/bottomPanelTabs/useTerminalBuffer'
-import { electronAPI } from '@/utils/envUtil'
-
-// Model
-const terminalVisible = defineModel<boolean>({ required: true })
-const props = defineProps<{
-  header: string
-  defaultMessage: string
-}>()
-
-const electron = electronAPI()
-
-/** The actual output of all terminal commands - not rendered */
-const buffer = useTerminalBuffer()
-let xterm: Terminal | null = null
-
-// Created and destroyed with the Drawer - contents copied from hidden buffer
-const terminalCreated = (
-  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
-  root: Ref<HTMLElement>
-) => {
-  xterm = terminal
-  useAutoSize({ root, autoRows: true, autoCols: true })
-  terminal.write(props.defaultMessage)
-  buffer.copyTo(terminal)
-
-  terminal.options.cursorBlink = false
-  terminal.options.cursorStyle = 'bar'
-  terminal.options.cursorInactiveStyle = 'bar'
-  terminal.options.disableStdin = true
-}
-
-const terminalUnmounted = () => {
-  xterm = null
-}
-
-onMounted(async () => {
-  electron.onLogMessage((message: string) => {
-    buffer.write(message)
-    xterm?.write(message)
-  })
-})
-</script>

src/components/primevueOverride/AutoCompletePlus.vue

@@ -6,27 +6,11 @@ export default {
   name: 'AutoCompletePlus',
   extends: AutoComplete,
   emits: ['focused-option-changed'],
-  data() {
-    return {
-      // Flag to determine if IME is active
-      isComposing: false
-    }
-  },
   mounted() {
     if (typeof AutoComplete.mounted === 'function') {
       AutoComplete.mounted.call(this)
     }
 
-    // Retrieve the actual <input> element and attach IME events
-    const inputEl = this.$el.querySelector('input')
-    if (inputEl) {
-      inputEl.addEventListener('compositionstart', () => {
-        this.isComposing = true
-      })
-      inputEl.addEventListener('compositionend', () => {
-        this.isComposing = false
-      })
-    }
     // Add a watcher on the focusedOptionIndex property
     this.$watch(
       () => this.focusedOptionIndex,
@@ -35,18 +19,6 @@ export default {
         this.$emit('focused-option-changed', newVal)
       }
     )
-  },
-  methods: {
-    // Override onKeyDown to block Enter when IME is active
-    onKeyDown(event) {
-      if (event.key === 'Enter' && this.isComposing) {
-        event.preventDefault()
-        event.stopPropagation()
-        return
-      }
-
-      AutoComplete.methods.onKeyDown.call(this, event)
-    }
   }
 }
 </script>

src/components/searchbox/NodeSearchBox.vue

@@ -60,9 +60,8 @@
       <!-- FilterAndValue -->
       <template v-slot:chip="{ value }">
         <SearchFilterChip
-          v-if="Array.isArray(value) && value.length === 2"
           :key="`${value[0].id}-${value[1]}`"
-          @remove="onRemoveFilter($event, value as FilterAndValue)"
+          @remove="onRemoveFilter($event, value)"
           :text="value[1]"
           :badge="value[0].invokeSequence.toUpperCase()"
           :badge-class="value[0].invokeSequence + '-badge'"

src/components/sidebar/SideToolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <teleport :to="teleportTarget">
-    <nav class="side-tool-bar-container" :class="{ 'small-sidebar': isSmall }">
+    <nav :class="'side-tool-bar-container' + (isSmall ? ' small-sidebar' : '')">
       <SidebarIcon
         v-for="tab in tabs"
         :key="tab.id"
@@ -69,6 +69,17 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 }
 </script>
 
+<style>
+:root {
+  --sidebar-width: 4rem;
+  --sidebar-icon-size: 1.5rem;
+}
+:root .small-sidebar {
+  --sidebar-width: 2.5rem;
+  --sidebar-icon-size: 1rem;
+}
+</style>
+
 <style scoped>
 .side-tool-bar-container {
   display: flex;
@@ -83,14 +94,6 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   background-color: var(--comfy-menu-secondary-bg);
   color: var(--fg-color);
   box-shadow: var(--bar-shadow);
-
-  --sidebar-width: 4rem;
-  --sidebar-icon-size: 1.5rem;
-}
-
-.side-tool-bar-container.small-sidebar {
-  --sidebar-width: 2.5rem;
-  --sidebar-icon-size: 1rem;
 }
 
 .side-tool-bar-end {