chore(i18n.yaml): update job condition to include sno-fix-playwright-babel branch for temporary Playwright issue fix

Refactored preprocessLitegraph() to read each file only once instead of twice.
Previously files were read once to check for 'declare' keywords and again to
process them. Now files are read once and processed inline if they contain
'declare' keywords, improving performance.

.git-blame-ignore-revs

@@ -7,21 +7,3 @@ c53f197de2a3e0fa66b16dedc65c131235c1c4b6
 
 # Reorganize renderer components into domain-driven folder structure
 c8a83a9caede7bdb5f8598c5492b07d08c339d49
-
-# Domain-driven design (DDD) refactors - September 2025
-# These commits reorganized the codebase into domain-driven architecture
-
-# [refactor] Improve renderer domain organization (#5552)
-6349ceee6c0a57fc7992e85635def9b6e22eaeb2
-
-# [refactor] Improve settings domain organization (#5550)  
-4c8c4a1ad4f53354f700a33ea1b95262aeda2719
-
-# [refactor] Improve workflow domain organization (#5584)
-ca312fd1eab540cc4ddc0e3d244d38b3858574f0
-
-# [refactor] Move thumbnail functionality to renderer/core domain (#5586)
-e3bb29ceb8174b8bbca9e48ec7d42cd540f40efa
-
-# [refactor] Improve updates/notifications domain organization (#5590)
-27ab355f9c73415dc39f4d3f512b02308f847801

.github/workflows/i18n.yaml

@@ -11,7 +11,13 @@ on:
 jobs:
   update-locales:
     # Branch detection: Only run for manual dispatch or version-bump-* branches from main repo
-    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
+    # add sno-fix-playwright-babel temporarily to fix playwright issue with babel
+    if: >
+      github.event_name == 'workflow_dispatch' || 
+      (github.event.pull_request.head.repo.full_name == github.repository && 
+       startsWith(github.head_ref, 'version-bump-')) || 
+      startsWith(github.head_ref, 'sno-fix-playwright-babel')
+
     runs-on: ubuntu-latest
     steps:
     - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3

.github/workflows/test-ui.yaml

@@ -229,13 +229,7 @@ jobs:
 
       - name: Run Playwright tests (${{ matrix.browser }})
         id: playwright
-        run: |
-          # Run tests with both HTML and JSON reporters
-          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          npx playwright test --project=${{ matrix.browser }} \
-            --reporter=list \
-            --reporter=html \
-            --reporter=json
+        run: npx playwright test --project=${{ matrix.browser }} --reporter=html
         working-directory: ComfyUI_frontend
 
       - uses: actions/upload-artifact@v4
@@ -281,12 +275,7 @@ jobs:
           merge-multiple: true
 
       - name: Merge into HTML Report
-        run: |
-          # Generate HTML report
-          npx playwright merge-reports --reporter=html ./all-blob-reports
-          # Generate JSON report separately with explicit output path
-          PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-report/report.json \
-          npx playwright merge-reports --reporter=json ./all-blob-reports
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
         working-directory: ComfyUI_frontend
 
       - name: Upload HTML report

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

@@ -40,7 +40,7 @@ jobs:
       - name: Get new version
         id: get-version
         run: |
-          NEW_VERSION=$(pnpm list @comfyorg/comfyui-electron-types --json --depth=0 | jq -r '.[0].dependencies."@comfyorg/comfyui-electron-types".version')
+          NEW_VERSION=$(pnpm list @comfyorg/comfyui-electron-types --json --depth=0 | jq -r '.[0].version')
           echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request

.npmrc

@@ -1 +0,0 @@
-ignore-workspace-root-check=true

browser_tests/fixtures/ComfyPage.ts

@@ -5,14 +5,13 @@ import dotenv from 'dotenv'
 import * as fs from 'fs'
 
 import type { LGraphNode } from '../../src/lib/litegraph/src/litegraph'
-import type { NodeId } from '../../src/platform/workflow/validation/schemas/workflowSchema'
+import type { NodeId } from '../../src/schemas/comfyWorkflowSchema'
 import type { KeyCombo } from '../../src/schemas/keyBindingSchema'
 import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { ComfyActionbar } from '../helpers/actionbar'
 import { ComfyTemplates } from '../helpers/templates'
 import { ComfyMouse } from './ComfyMouse'
-import { VueNodeHelpers } from './VueNodeHelpers'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
 import { SettingDialog } from './components/SettingDialog'
 import {
@@ -145,7 +144,6 @@ export class ComfyPage {
   public readonly templates: ComfyTemplates
   public readonly settingDialog: SettingDialog
   public readonly confirmDialog: ConfirmDialog
-  public readonly vueNodes: VueNodeHelpers
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -174,7 +172,6 @@ export class ComfyPage {
     this.templates = new ComfyTemplates(page)
     this.settingDialog = new SettingDialog(page, this)
     this.confirmDialog = new ConfirmDialog(page)
-    this.vueNodes = new VueNodeHelpers(page)
   }
 
   convertLeafToContent(structure: FolderStructure): FolderStructure {
@@ -1424,7 +1421,7 @@ export class ComfyPage {
   }
 
   async closeDialog() {
-    await this.page.locator('.p-dialog-close-button').click({ force: true })
+    await this.page.locator('.p-dialog-close-button').click()
     await expect(this.page.locator('.p-dialog')).toBeHidden()
   }
 

browser_tests/fixtures/VueNodeHelpers.ts

@@ -1,110 +0,0 @@
-/**
- * Vue Node Test Helpers
- */
-import type { Locator, Page } from '@playwright/test'
-
-export class VueNodeHelpers {
-  constructor(private page: Page) {}
-
-  /**
-   * Get locator for all Vue node components in the DOM
-   */
-  get nodes(): Locator {
-    return this.page.locator('[data-node-id]')
-  }
-
-  /**
-   * Get locator for selected Vue node components (using visual selection indicators)
-   */
-  get selectedNodes(): Locator {
-    return this.page.locator(
-      '[data-node-id].outline-black, [data-node-id].outline-white'
-    )
-  }
-
-  /**
-   * Get total count of Vue nodes in the DOM
-   */
-  async getNodeCount(): Promise<number> {
-    return await this.nodes.count()
-  }
-
-  /**
-   * Get count of selected Vue nodes
-   */
-  async getSelectedNodeCount(): Promise<number> {
-    return await this.selectedNodes.count()
-  }
-
-  /**
-   * Get all Vue node IDs currently in the DOM
-   */
-  async getNodeIds(): Promise<string[]> {
-    return await this.nodes.evaluateAll((nodes) =>
-      nodes
-        .map((n) => n.getAttribute('data-node-id'))
-        .filter((id): id is string => id !== null)
-    )
-  }
-
-  /**
-   * Select a specific Vue node by ID
-   */
-  async selectNode(nodeId: string): Promise<void> {
-    await this.page.locator(`[data-node-id="${nodeId}"]`).click()
-  }
-
-  /**
-   * Select multiple Vue nodes by IDs using Ctrl+click
-   */
-  async selectNodes(nodeIds: string[]): Promise<void> {
-    if (nodeIds.length === 0) return
-
-    // Select first node normally
-    await this.selectNode(nodeIds[0])
-
-    // Add additional nodes with Ctrl+click
-    for (let i = 1; i < nodeIds.length; i++) {
-      await this.page.locator(`[data-node-id="${nodeIds[i]}"]`).click({
-        modifiers: ['Control']
-      })
-    }
-  }
-
-  /**
-   * Clear all selections by clicking empty space
-   */
-  async clearSelection(): Promise<void> {
-    await this.page.mouse.click(50, 50)
-  }
-
-  /**
-   * Delete selected Vue nodes using Delete key
-   */
-  async deleteSelected(): Promise<void> {
-    await this.page.locator('#graph-canvas').focus()
-    await this.page.keyboard.press('Delete')
-  }
-
-  /**
-   * Delete selected Vue nodes using Backspace key
-   */
-  async deleteSelectedWithBackspace(): Promise<void> {
-    await this.page.locator('#graph-canvas').focus()
-    await this.page.keyboard.press('Backspace')
-  }
-
-  /**
-   * Wait for Vue nodes to be rendered
-   */
-  async waitForNodes(expectedCount?: number): Promise<void> {
-    if (expectedCount !== undefined) {
-      await this.page.waitForFunction(
-        (count) => document.querySelectorAll('[data-node-id]').length >= count,
-        expectedCount
-      )
-    } else {
-      await this.page.waitForSelector('[data-node-id]')
-    }
-  }
-}

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,6 +1,6 @@
 import type { Page } from '@playwright/test'
 
-import type { NodeId } from '../../../src/platform/workflow/validation/schemas/workflowSchema'
+import type { NodeId } from '../../../src/schemas/comfyWorkflowSchema'
 import { ManageGroupNode } from '../../helpers/manageGroupNode'
 import type { ComfyPage } from '../ComfyPage'
 import type { Position, Size } from '../types'

browser_tests/globalSetupWithI18n.ts

@@ -0,0 +1,7 @@
+import type { FullConfig } from '@playwright/test'
+
+import { preprocessLitegraph } from './i18nSetup'
+
+export default async function globalSetup(config: FullConfig) {
+  await preprocessLitegraph()
+}

browser_tests/globalTeardownWithI18n.ts

@@ -0,0 +1,7 @@
+import type { FullConfig } from '@playwright/test'
+
+import { restoreLitegraph } from './i18nSetup'
+
+export default async function globalTeardown(config: FullConfig) {
+  await restoreLitegraph()
+}

browser_tests/helpers/templates.ts

@@ -4,7 +4,7 @@ import path from 'path'
 import {
   TemplateInfo,
   WorkflowTemplates
-} from '../../src/platform/workflow/templates/types/template'
+} from '../../src/types/workflowTemplateTypes'
 
 export class ComfyTemplates {
   readonly content: Locator

browser_tests/i18nSetup.ts

@@ -0,0 +1,81 @@
+/**
+ * Setup for i18n collection tests
+ * Handles preprocessing of litegraph files that contain TypeScript 'declare' keywords
+ */
+import { promises as fs } from 'fs'
+import { glob } from 'glob'
+import * as path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const rootDir = path.resolve(__dirname, '..')
+const litegraphSrcDir = path.join(rootDir, 'src/lib/litegraph/src')
+
+const backupMap = new Map<string, string>()
+
+export async function preprocessLitegraph() {
+  console.log('Preprocessing litegraph files for i18n collection...')
+
+  // Search for all .ts files in litegraph src directory
+  const pattern = path.join(litegraphSrcDir, '**/*.ts')
+  const files = await glob(pattern, {
+    ignore: ['**/*.test.ts', '**/*.spec.ts', '**/node_modules/**']
+  })
+
+  let processedCount = 0
+
+  // Process files in parallel - read once and process if needed
+  await Promise.all(
+    files.map(async (filePath) => {
+      try {
+        const originalContent = await fs.readFile(filePath, 'utf-8')
+
+        // Check for class property declarations with 'declare' keyword
+        if (!/^\s*declare\s+/m.test(originalContent)) {
+          return // Skip files without declare keywords
+        }
+
+        // Store original content in memory
+        backupMap.set(filePath, originalContent)
+
+        // Remove 'declare' keyword from class properties
+        const modifiedContent = originalContent.replace(
+          /^(\s*)declare\s+/gm,
+          '$1// @ts-ignore - removed declare for Playwright\n$1'
+        )
+
+        // Write modified content
+        await fs.writeFile(filePath, modifiedContent)
+        console.log(`  ✓ Processed ${path.relative(litegraphSrcDir, filePath)}`)
+        processedCount++
+      } catch (error: unknown) {
+        console.warn(
+          `  ⚠ Could not preprocess file for litegraph ${filePath}: ${String((error as Error)?.message || error)}`
+        )
+      }
+    })
+  )
+
+  if (processedCount === 0) {
+    console.log('  ℹ No files with declare keywords found')
+  } else {
+    console.log(`  Processed ${processedCount} files with declare keywords`)
+  }
+}
+
+export async function restoreLitegraph() {
+  if (backupMap.size === 0) {
+    return
+  }
+
+  console.log('Restoring original litegraph files...')
+
+  await Promise.all(
+    Array.from(backupMap.entries()).map(async ([filePath, originalContent]) => {
+      await fs.writeFile(filePath, originalContent)
+      console.log(`  ✓ Restored ${path.relative(litegraphSrcDir, filePath)}`)
+    })
+  )
+
+  backupMap.clear()
+}

browser_tests/tests/extensionAPI.spec.ts

@@ -1,6 +1,6 @@
 import { expect } from '@playwright/test'
 
-import { SettingParams } from '../../src/platform/settings/types'
+import { SettingParams } from '../../src/types/settingTypes'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
 test.describe('Topbar commands', () => {
@@ -247,7 +247,7 @@ test.describe('Topbar commands', () => {
   test.describe('Dialog', () => {
     test('Should allow showing a prompt dialog', async ({ comfyPage }) => {
       await comfyPage.page.evaluate(() => {
-        void window['app'].extensionManager.dialog
+        window['app'].extensionManager.dialog
           .prompt({
             title: 'Test Prompt',
             message: 'Test Prompt Message'
@@ -267,7 +267,7 @@ test.describe('Topbar commands', () => {
       comfyPage
     }) => {
       await comfyPage.page.evaluate(() => {
-        void window['app'].extensionManager.dialog
+        window['app'].extensionManager.dialog
           .confirm({
             title: 'Test Confirm',
             message: 'Test Confirm Message'
@@ -284,7 +284,7 @@ test.describe('Topbar commands', () => {
     test('Should allow dismissing a dialog', async ({ comfyPage }) => {
       await comfyPage.page.evaluate(() => {
         window['value'] = 'foo'
-        void window['app'].extensionManager.dialog
+        window['app'].extensionManager.dialog
           .confirm({
             title: 'Test Confirm',
             message: 'Test Confirm Message'

browser_tests/tests/nodeHelp.spec.ts

@@ -46,7 +46,7 @@ test.describe('Node Help', () => {
 
       // Click the help button in the selection toolbox
       const helpButton = comfyPage.selectionToolbox.locator(
-        'button[data-testid="info-button"]'
+        'button:has(.pi-question-circle)'
       )
       await expect(helpButton).toBeVisible()
       await helpButton.click()
@@ -164,7 +164,7 @@ test.describe('Node Help', () => {
 
       // Click help button
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -194,7 +194,7 @@ test.describe('Node Help', () => {
 
       // Click help button
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -228,7 +228,7 @@ test.describe('Node Help', () => {
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -276,7 +276,7 @@ test.describe('Node Help', () => {
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -348,7 +348,7 @@ This is documentation for a custom node.
       }
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       if (await helpButton.isVisible()) {
         await helpButton.click()
@@ -389,7 +389,7 @@ This is documentation for a custom node.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -456,7 +456,7 @@ This is English documentation.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -479,7 +479,7 @@ This is English documentation.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -522,7 +522,7 @@ This is English documentation.
       await selectNodeWithPan(comfyPage, ksamplerNodes[0])
 
       const helpButton = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton.click()
 
@@ -538,7 +538,7 @@ This is English documentation.
 
       // Click help button again
       const helpButton2 = comfyPage.page.locator(
-        '.selection-toolbox button[data-testid="info-button"]'
+        '.selection-toolbox button:has(.pi-question-circle)'
       )
       await helpButton2.click()
 

browser_tests/tests/remoteWidgets.spec.ts

@@ -190,9 +190,7 @@ test.describe('Remote COMBO Widget', () => {
       await comfyPage.page.keyboard.press('Control+A')
 
       await expect(
-        comfyPage.page.locator(
-          '.selection-toolbox button[data-testid="refresh-button"]'
-        )
+        comfyPage.page.locator('.selection-toolbox .pi-refresh')
       ).toBeVisible()
     })
 

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -1,177 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Selection Toolbox - More Options Submenus', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)
-    await comfyPage.loadWorkflow('nodes/single_ksampler')
-    await comfyPage.nextFrame()
-    await comfyPage.selectNodes(['KSampler'])
-    await comfyPage.nextFrame()
-  })
-
-  const openMoreOptions = async (comfyPage: any) => {
-    const ksamplerNodes = await comfyPage.getNodeRefsByTitle('KSampler')
-    if (ksamplerNodes.length === 0) {
-      throw new Error('No KSampler nodes found')
-    }
-
-    // Drag the KSampler to the center of the screen
-    const nodePos = await ksamplerNodes[0].getPosition()
-    const viewportSize = comfyPage.page.viewportSize()
-    const centerX = viewportSize.width / 3
-    const centerY = viewportSize.height / 2
-    await comfyPage.dragAndDrop(
-      { x: nodePos.x, y: nodePos.y },
-      { x: centerX, y: centerY }
-    )
-    await comfyPage.nextFrame()
-
-    await ksamplerNodes[0].click('title')
-    await comfyPage.nextFrame()
-    await comfyPage.page.waitForTimeout(500)
-
-    await expect(comfyPage.page.locator('.selection-toolbox')).toBeVisible({
-      timeout: 5000
-    })
-
-    const moreOptionsBtn = comfyPage.page.locator(
-      '[data-testid="more-options-button"]'
-    )
-    await expect(moreOptionsBtn).toBeVisible({ timeout: 3000 })
-
-    await comfyPage.page.click('[data-testid="more-options-button"]')
-
-    await comfyPage.nextFrame()
-
-    const menuOptionsVisible = await comfyPage.page
-      .getByText('Rename')
-      .isVisible({ timeout: 2000 })
-      .catch(() => false)
-    if (menuOptionsVisible) {
-      return
-    }
-
-    await moreOptionsBtn.click({ force: true })
-    await comfyPage.nextFrame()
-    await comfyPage.page.waitForTimeout(2000)
-
-    const menuOptionsVisibleAfterClick = await comfyPage.page
-      .getByText('Rename')
-      .isVisible({ timeout: 2000 })
-      .catch(() => false)
-    if (menuOptionsVisibleAfterClick) {
-      return
-    }
-
-    throw new Error('Could not open More Options menu - popover not showing')
-  }
-
-  test('opens Node Info from More Options menu', async ({ comfyPage }) => {
-    await openMoreOptions(comfyPage)
-    const nodeInfoButton = comfyPage.page.getByText('Node Info', {
-      exact: true
-    })
-    await expect(nodeInfoButton).toBeVisible()
-    await nodeInfoButton.click()
-    await comfyPage.nextFrame()
-  })
-
-  test('changes node shape via Shape submenu', async ({ comfyPage }) => {
-    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-    const initialShape = await nodeRef.getProperty<number>('shape')
-
-    await openMoreOptions(comfyPage)
-    await comfyPage.page.getByText('Shape', { exact: true }).click()
-    await expect(comfyPage.page.getByText('Box', { exact: true })).toBeVisible({
-      timeout: 5000
-    })
-    await comfyPage.page.getByText('Box', { exact: true }).click()
-    await comfyPage.nextFrame()
-
-    const newShape = await nodeRef.getProperty<number>('shape')
-    expect(newShape).not.toBe(initialShape)
-    expect(newShape).toBe(1)
-  })
-
-  test('changes node color via Color submenu swatch', async ({ comfyPage }) => {
-    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-    const initialColor = await nodeRef.getProperty<string | undefined>('color')
-
-    await openMoreOptions(comfyPage)
-    await comfyPage.page.getByText('Color', { exact: true }).click()
-    const blueSwatch = comfyPage.page.locator('[title="Blue"]')
-    await expect(blueSwatch.first()).toBeVisible({ timeout: 5000 })
-    await blueSwatch.first().click()
-    await comfyPage.nextFrame()
-
-    const newColor = await nodeRef.getProperty<string | undefined>('color')
-    expect(newColor).toBe('#223')
-    if (initialColor) {
-      expect(newColor).not.toBe(initialColor)
-    }
-  })
-
-  test('renames a node using Rename action', async ({ comfyPage }) => {
-    const nodeRef = (await comfyPage.getNodeRefsByTitle('KSampler'))[0]
-    await openMoreOptions(comfyPage)
-    await comfyPage.page
-      .getByText('Rename', { exact: true })
-      .click({ force: true })
-    const input = comfyPage.page.locator(
-      '.group-title-editor.node-title-editor .editable-text input'
-    )
-    await expect(input).toBeVisible()
-    await input.fill('RenamedNode')
-    await input.press('Enter')
-    await comfyPage.nextFrame()
-    const newTitle = await nodeRef.getProperty<string>('title')
-    expect(newTitle).toBe('RenamedNode')
-  })
-
-  test('closes More Options menu when clicking outside', async ({
-    comfyPage
-  }) => {
-    await openMoreOptions(comfyPage)
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).toBeVisible({ timeout: 5000 })
-
-    await comfyPage.page
-      .locator('#graph-canvas')
-      .click({ position: { x: 0, y: 50 }, force: true })
-    await comfyPage.nextFrame()
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).not.toBeVisible()
-  })
-
-  test('closes More Options menu when clicking the button again (toggle)', async ({
-    comfyPage
-  }) => {
-    await openMoreOptions(comfyPage)
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).toBeVisible({ timeout: 5000 })
-
-    await comfyPage.page.evaluate(() => {
-      const btn = document.querySelector('[data-testid="more-options-button"]')
-      if (btn) {
-        const event = new MouseEvent('click', {
-          bubbles: true,
-          cancelable: true,
-          view: window,
-          detail: 1
-        })
-        btn.dispatchEvent(event)
-      }
-    })
-    await comfyPage.nextFrame()
-    await comfyPage.page.waitForTimeout(500)
-
-    await expect(
-      comfyPage.page.getByText('Rename', { exact: true })
-    ).not.toBeVisible()
-  })
-})

browser_tests/tests/vueNodes/deleteKeyInteraction.spec.ts

@@ -1,141 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Vue Nodes - Delete Key Interaction', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    // Enable Vue nodes rendering
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.setSetting('Comfy.Graph.CanvasMenu', false)
-    await comfyPage.setup()
-  })
-
-  test('Can select all and delete Vue nodes with Delete key', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    // Get initial Vue node count
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialNodeCount).toBeGreaterThan(0)
-
-    // Select all Vue nodes
-    await comfyPage.ctrlA()
-
-    // Verify all Vue nodes are selected
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(initialNodeCount)
-
-    // Delete with Delete key
-    await comfyPage.vueNodes.deleteSelected()
-
-    // Verify all Vue nodes were deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(0)
-  })
-
-  test('Can select specific Vue node and delete it', async ({ comfyPage }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    // Get initial Vue node count
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(initialNodeCount).toBeGreaterThan(0)
-
-    // Get first Vue node ID and select it
-    const nodeIds = await comfyPage.vueNodes.getNodeIds()
-    await comfyPage.vueNodes.selectNode(nodeIds[0])
-
-    // Verify selection
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(1)
-
-    // Delete with Delete key
-    await comfyPage.vueNodes.deleteSelected()
-
-    // Verify one Vue node was deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(initialNodeCount - 1)
-  })
-
-  test('Can select and delete Vue node with Backspace key', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-
-    // Select first Vue node
-    const nodeIds = await comfyPage.vueNodes.getNodeIds()
-    await comfyPage.vueNodes.selectNode(nodeIds[0])
-
-    // Delete with Backspace key instead of Delete
-    await comfyPage.vueNodes.deleteSelectedWithBackspace()
-
-    // Verify Vue node was deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(initialNodeCount - 1)
-  })
-
-  test('Delete key does not delete node when typing in Vue node widgets', async ({
-    comfyPage
-  }) => {
-    const initialNodeCount = await comfyPage.getGraphNodesCount()
-
-    // Find a text input widget in a Vue node
-    const textWidget = comfyPage.page
-      .locator('input[type="text"], textarea')
-      .first()
-
-    // Click on text widget to focus it
-    await textWidget.click()
-    await textWidget.fill('test text')
-
-    // Press Delete while focused on widget - should delete text, not node
-    await textWidget.press('Delete')
-
-    // Node count should remain the same
-    const finalNodeCount = await comfyPage.getGraphNodesCount()
-    expect(finalNodeCount).toBe(initialNodeCount)
-  })
-
-  test('Delete key does not delete node when nothing is selected', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
-
-    // Ensure no Vue nodes are selected
-    await comfyPage.vueNodes.clearSelection()
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(0)
-
-    // Press Delete key - should not crash and should handle gracefully
-    await comfyPage.page.keyboard.press('Delete')
-
-    // Vue node count should remain the same
-    const nodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(nodeCount).toBeGreaterThan(0)
-  })
-
-  test('Can multi-select with Ctrl+click and delete multiple Vue nodes', async ({
-    comfyPage
-  }) => {
-    await comfyPage.vueNodes.waitForNodes()
-    const initialNodeCount = await comfyPage.vueNodes.getNodeCount()
-
-    // Multi-select first two Vue nodes using Ctrl+click
-    const nodeIds = await comfyPage.vueNodes.getNodeIds()
-    const nodesToSelect = nodeIds.slice(0, 2)
-    await comfyPage.vueNodes.selectNodes(nodesToSelect)
-
-    // Verify expected nodes are selected
-    const selectedCount = await comfyPage.vueNodes.getSelectedNodeCount()
-    expect(selectedCount).toBe(nodesToSelect.length)
-
-    // Delete selected Vue nodes
-    await comfyPage.vueNodes.deleteSelected()
-
-    // Verify expected nodes were deleted
-    const finalNodeCount = await comfyPage.vueNodes.getNodeCount()
-    expect(finalNodeCount).toBe(initialNodeCount - nodesToSelect.length)
-  })
-})

browser_tests/tests/widget.spec.ts

@@ -264,13 +264,7 @@ test.describe('Animated image widget', () => {
     expect(filename).toContain('animated_webp.webp')
   })
 
-  // FIXME: This test keeps flip-flopping because it relies on animated webp timing,
-  // which is inherently unreliable in CI environments. The test asset is an animated
-  // webp with 2 frames, and the test depends on animation frame timing to verify that
-  // animated webp images are properly displayed (as opposed to being treated as static webp).
-  // While the underlying functionality works (animated webp are correctly distinguished
-  // from static webp), the test is flaky due to timing dependencies with webp animation frames.
-  test.fixme('Can preview saved animated webp image', async ({ comfyPage }) => {
+  test('Can preview saved animated webp image', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/save_animated_webp')
 
     // Get position of the load animated webp node

components.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "new-york",
-  "typescript": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/assets/css/style.css",
-    "baseColor": "stone",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "composables": "@/composables",
-    "utils": "@/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib"
-  },
-  "iconLibrary": "lucide"
-}

docs/adr/0004-fork-primevue-ui-library.md

@@ -1,62 +0,0 @@
-# 4. Fork PrimeVue UI Library
-
-Date: 2025-08-27
-
-## Status
-
-Rejected
-
-## Context
-
-ComfyUI's frontend requires modifications to PrimeVue components that cannot be achieved through the library's customization APIs. Two specific technical incompatibilities have been identified with the transform-based canvas architecture:
-
-**Screen Coordinate Hit-Testing Conflicts:**
-- PrimeVue components use `getBoundingClientRect()` for screen coordinate calculations that don't account for CSS transforms
-- The Slider component directly uses raw `pageX/pageY` coordinates ([lines 102-103](https://github.com/primefaces/primevue/blob/master/packages/primevue/src/slider/Slider.vue#L102-L103)) without transform-aware positioning
-- This breaks interaction in transformed coordinate spaces where screen coordinates don't match logical element positions
-
-**Virtual Canvas Scroll Interference:**
-- LiteGraph's infinite canvas uses scroll coordinates semantically for graph navigation via the `DragAndScale` coordinate system
-- PrimeVue overlay components automatically trigger `scrollIntoView` behavior which interferes with this virtual positioning
-- This issue is documented in [PrimeVue discussion #4270](https://github.com/orgs/primefaces/discussions/4270) where the feature request was made to disable this behavior
-
-**Historical Overlay Issues:**
-- Previous z-index positioning conflicts required manual workarounds (commit `6d4eafb0`) where PrimeVue Dialog components needed `autoZIndex: false` and custom mask styling, later resolved by removing PrimeVue's automatic z-index management entirely
-
-**Minimal Update Overhead:**
-- Analysis of git history shows only 2 PrimeVue version updates in 2+ years, indicating that upstream sync overhead is negligible for this project
-
-**Future Interaction System Requirements:**
-- The ongoing canvas architecture evolution will require more granular control over component interaction and event handling as the transform-based system matures
-- Predictable need for additional component modifications beyond current identified issues
-
-## Decision
-
-We will **NOT** fork PrimeVue. After evaluation, forking was determined to be unnecessarily complex and costly.
-
-**Rationale for Rejection:**
-
-- **Significant Implementation Complexity**: PrimeVue is structured as a monorepo ([primefaces/primevue](https://github.com/primefaces/primevue)) with significant code in a separate monorepo ([PrimeUIX](https://github.com/primefaces/primeuix)). Forking would require importing both repositories whole and selectively pruning or exempting components from our workspace tooling, adding substantial complexity.
-
-- **Alternative Solutions Available**: The modifications we identified (e.g., scroll interference issues, coordinate system conflicts) have less costly solutions that don't require maintaining a full fork. For example, coordinate issues could be addressed through event interception and synthetic event creation with scaled values.
-
-- **Maintenance Burden**: Ongoing maintenance and upgrades would be very painful, requiring manual conflict resolution and keeping pace with upstream changes across multiple repositories.
-
-- **Limited Tooling Support**: There isn't adequate tooling that provides the granularity needed to cleanly manage a PrimeVue fork within our existing infrastructure.
-
-## Consequences
-
-### Alternative Approach
-
-- **Use PrimeVue as External Dependency**: Continue using PrimeVue as a standard npm dependency
-- **Targeted Workarounds**: Implement specific solutions for identified issues (coordinate system conflicts, scroll interference) without forking the entire library
-- **Selective Component Replacement**: Use libraries like shadcn/ui to replace specific problematic PrimeVue components and adjust them to match our design system
-- **Upstream Engagement**: Continue engaging with PrimeVue community for feature requests and bug reports
-- **Maintain Flexibility**: Preserve ability to upgrade PrimeVue versions without fork maintenance overhead
-
-## Notes
-
-- Technical issues documented in the Context section remain valid concerns
-- Solutions will be pursued through targeted fixes rather than wholesale forking
-- Future re-evaluation possible if PrimeVue's architecture significantly changes or if alternative tooling becomes available
-- This decision prioritizes maintainability and development velocity over maximum customization control

docs/adr/README.md

@@ -13,7 +13,6 @@ An Architecture Decision Record captures an important architectural decision mad
 | [0001](0001-merge-litegraph-into-frontend.md) | Merge LiteGraph.js into ComfyUI Frontend | Accepted | 2025-08-05 |
 | [0002](0002-monorepo-conversion.md) | Restructure as a Monorepo | Accepted | 2025-08-25 |
 | [0003](0003-crdt-based-layout-system.md) | Centralized Layout Management with CRDT | Proposed | 2025-08-27 |
-| [0004](0004-fork-primevue-ui-library.md) | Fork PrimeVue UI Library | Rejected | 2025-08-27 |
 
 ## Creating a New ADR
 

eslint.config.js

@@ -64,9 +64,6 @@ export default [
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
-      'vue/multi-word-component-names': 'off', // TODO: fix
-      'vue/no-template-shadow': 'off', // TODO: fix
-      'vue/one-component-per-file': 'off', // TODO: fix
       // Restrict deprecated PrimeVue components
       'no-restricted-imports': [
         'error',

knip.config.ts

@@ -18,7 +18,9 @@ const config: KnipConfig = {
     '@primeuix/utils',
     '@primevue/icons',
     // Dev
-    '@trivago/prettier-plugin-sort-imports'
+    '@trivago/prettier-plugin-sort-imports',
+    'tailwindcss',
+    'tailwindcss-primeui'
   ],
   ignore: [
     // Auto generated manager types

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.27.4",
+  "version": "1.27.3",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -83,7 +83,6 @@
     "tailwindcss": "^4.1.12",
     "tailwindcss-primeui": "^0.6.1",
     "tsx": "^4.15.6",
-    "tw-animate-css": "^1.3.8",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.42.0",
     "unplugin-icons": "^0.22.0",
@@ -101,7 +100,7 @@
   "dependencies": {
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.4.72",
+    "@comfyorg/comfyui-electron-types": "^0.4.69",
     "@iconify/json": "^2.2.380",
     "@primeuix/forms": "0.0.2",
     "@primeuix/styled": "0.3.2",
@@ -141,7 +140,6 @@
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
     "primevue": "^4.2.5",
-    "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
     "tailwind-merge": "^3.3.1",
     "three": "^0.170.0",

playwright.i18n.config.ts

@@ -8,5 +8,11 @@ export default defineConfig({
   },
   reporter: 'list',
   timeout: 60000,
-  testMatch: /collect-i18n-.*\.ts/
+  testMatch: /collect-i18n-.*\.ts/,
+  // Run tests sequentially to avoid conflicts
+  workers: 1,
+  fullyParallel: false,
+  // Use combined setup that includes litegraph preprocessing
+  globalSetup: './browser_tests/globalSetupWithI18n.ts',
+  globalTeardown: './browser_tests/globalTeardownWithI18n.ts'
 })

scripts/cicd/extract-playwright-counts.ts

@@ -1,183 +0,0 @@
-#!/usr/bin/env tsx
-import fs from 'fs'
-import path from 'path'
-
-interface TestStats {
-  expected?: number
-  unexpected?: number
-  flaky?: number
-  skipped?: number
-  finished?: number
-}
-
-interface ReportData {
-  stats?: TestStats
-}
-
-interface TestCounts {
-  passed: number
-  failed: number
-  flaky: number
-  skipped: number
-  total: number
-}
-
-/**
- * Extract test counts from Playwright HTML report
- * @param reportDir - Path to the playwright-report directory
- * @returns Test counts { passed, failed, flaky, skipped, total }
- */
-function extractTestCounts(reportDir: string): TestCounts {
-  const counts: TestCounts = {
-    passed: 0,
-    failed: 0,
-    flaky: 0,
-    skipped: 0,
-    total: 0
-  }
-
-  try {
-    // First, try to find report.json which Playwright generates with JSON reporter
-    const jsonReportFile = path.join(reportDir, 'report.json')
-    if (fs.existsSync(jsonReportFile)) {
-      const reportJson: ReportData = JSON.parse(
-        fs.readFileSync(jsonReportFile, 'utf-8')
-      )
-      if (reportJson.stats) {
-        const stats = reportJson.stats
-        counts.total = stats.expected || 0
-        counts.passed =
-          (stats.expected || 0) -
-          (stats.unexpected || 0) -
-          (stats.flaky || 0) -
-          (stats.skipped || 0)
-        counts.failed = stats.unexpected || 0
-        counts.flaky = stats.flaky || 0
-        counts.skipped = stats.skipped || 0
-        return counts
-      }
-    }
-
-    // Try index.html - Playwright HTML report embeds data in a script tag
-    const indexFile = path.join(reportDir, 'index.html')
-    if (fs.existsSync(indexFile)) {
-      const content = fs.readFileSync(indexFile, 'utf-8')
-
-      // Look for the embedded report data in various formats
-      // Format 1: window.playwrightReportBase64
-      let dataMatch = content.match(
-        /window\.playwrightReportBase64\s*=\s*["']([^"']+)["']/
-      )
-      if (dataMatch) {
-        try {
-          const decodedData = Buffer.from(dataMatch[1], 'base64').toString(
-            'utf-8'
-          )
-          const reportData: ReportData = JSON.parse(decodedData)
-
-          if (reportData.stats) {
-            const stats = reportData.stats
-            counts.total = stats.expected || 0
-            counts.passed =
-              (stats.expected || 0) -
-              (stats.unexpected || 0) -
-              (stats.flaky || 0) -
-              (stats.skipped || 0)
-            counts.failed = stats.unexpected || 0
-            counts.flaky = stats.flaky || 0
-            counts.skipped = stats.skipped || 0
-            return counts
-          }
-        } catch (e) {
-          // Continue to try other formats
-        }
-      }
-
-      // Format 2: window.playwrightReport
-      dataMatch = content.match(/window\.playwrightReport\s*=\s*({[\s\S]*?});/)
-      if (dataMatch) {
-        try {
-          // Use Function constructor instead of eval for safety
-          const reportData = new Function(
-            'return ' + dataMatch[1]
-          )() as ReportData
-
-          if (reportData.stats) {
-            const stats = reportData.stats
-            counts.total = stats.expected || 0
-            counts.passed =
-              (stats.expected || 0) -
-              (stats.unexpected || 0) -
-              (stats.flaky || 0) -
-              (stats.skipped || 0)
-            counts.failed = stats.unexpected || 0
-            counts.flaky = stats.flaky || 0
-            counts.skipped = stats.skipped || 0
-            return counts
-          }
-        } catch (e) {
-          // Continue to try other formats
-        }
-      }
-
-      // Format 3: Look for stats in the HTML content directly
-      // Playwright sometimes renders stats in the UI
-      const statsMatch = content.match(
-        /(\d+)\s+passed[^0-9]*(\d+)\s+failed[^0-9]*(\d+)\s+flaky[^0-9]*(\d+)\s+skipped/i
-      )
-      if (statsMatch) {
-        counts.passed = parseInt(statsMatch[1]) || 0
-        counts.failed = parseInt(statsMatch[2]) || 0
-        counts.flaky = parseInt(statsMatch[3]) || 0
-        counts.skipped = parseInt(statsMatch[4]) || 0
-        counts.total =
-          counts.passed + counts.failed + counts.flaky + counts.skipped
-        return counts
-      }
-
-      // Format 4: Try to extract from summary text patterns
-      const passedMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+passed/i)
-      const failedMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+failed/i)
-      const flakyMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+flaky/i)
-      const skippedMatch = content.match(/(\d+)\s+(?:tests?|specs?)\s+skipped/i)
-      const totalMatch = content.match(
-        /(\d+)\s+(?:tests?|specs?)\s+(?:total|ran)/i
-      )
-
-      if (passedMatch) counts.passed = parseInt(passedMatch[1]) || 0
-      if (failedMatch) counts.failed = parseInt(failedMatch[1]) || 0
-      if (flakyMatch) counts.flaky = parseInt(flakyMatch[1]) || 0
-      if (skippedMatch) counts.skipped = parseInt(skippedMatch[1]) || 0
-      if (totalMatch) {
-        counts.total = parseInt(totalMatch[1]) || 0
-      } else if (
-        counts.passed ||
-        counts.failed ||
-        counts.flaky ||
-        counts.skipped
-      ) {
-        counts.total =
-          counts.passed + counts.failed + counts.flaky + counts.skipped
-      }
-    }
-  } catch (error) {
-    console.error(`Error reading report from ${reportDir}:`, error)
-  }
-
-  return counts
-}
-
-// Main execution
-const reportDir = process.argv[2]
-
-if (!reportDir) {
-  console.error('Usage: extract-playwright-counts.ts <report-directory>')
-  process.exit(1)
-}
-
-const counts = extractTestCounts(reportDir)
-
-// Output as JSON for easy parsing in shell script
-console.log(JSON.stringify(counts))
-
-export { extractTestCounts }

scripts/cicd/pr-playwright-deploy-and-comment.sh

@@ -58,12 +58,6 @@ if ! command -v wrangler > /dev/null 2>&1; then
     }
 fi
 
-# Check if tsx is available, install if not
-if ! command -v tsx > /dev/null 2>&1; then
-    echo "Installing tsx..." >&2
-    npm install -g tsx >&2 || echo "Failed to install tsx" >&2
-fi
-
 # Deploy a single browser report, WARN: ensure inputs are sanitized before calling this function
 deploy_report() {
     dir="$1"
@@ -165,16 +159,12 @@ else
     echo "Available reports:"
     ls -la reports/ 2>/dev/null || echo "Reports directory not found"
     
-    # Deploy all reports in parallel and collect URLs + test counts
+    # Deploy all reports in parallel and collect URLs
     temp_dir=$(mktemp -d)
     pids=""
     i=0
     
-    # Store current working directory for absolute paths
-    SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
-    BASE_DIR="$(pwd)"
-    
-    # Start parallel deployments and count extractions
+    # Start parallel deployments
     for browser in $BROWSERS; do
         if [ -d "reports/playwright-report-$browser" ]; then
             echo "Found report for $browser, deploying in parallel..."
@@ -182,26 +172,11 @@ else
                 url=$(deploy_report "reports/playwright-report-$browser" "$browser" "$cloudflare_branch")
                 echo "$url" > "$temp_dir/$i.url"
                 echo "Deployment result for $browser: $url"
-                
-                # Extract test counts using tsx (TypeScript executor)
-                EXTRACT_SCRIPT="$SCRIPT_DIR/extract-playwright-counts.ts"
-                REPORT_DIR="$BASE_DIR/reports/playwright-report-$browser"
-                
-                if command -v tsx > /dev/null 2>&1 && [ -f "$EXTRACT_SCRIPT" ]; then
-                    echo "Extracting counts from $REPORT_DIR using $EXTRACT_SCRIPT" >&2
-                    counts=$(tsx "$EXTRACT_SCRIPT" "$REPORT_DIR" 2>&1 || echo '{}')
-                    echo "Extracted counts for $browser: $counts" >&2
-                    echo "$counts" > "$temp_dir/$i.counts"
-                else
-                    echo "Script not found or tsx not available: $EXTRACT_SCRIPT" >&2
-                    echo '{}' > "$temp_dir/$i.counts"
-                fi
             ) &
             pids="$pids $!"
         else
             echo "Report not found for $browser at reports/playwright-report-$browser"
             echo "failed" > "$temp_dir/$i.url"
-            echo '{}' > "$temp_dir/$i.counts"
         fi
         i=$((i + 1))
     done
@@ -211,9 +186,8 @@ else
         wait $pid
     done
     
-    # Collect URLs and counts in order
+    # Collect URLs in order
     urls=""
-    all_counts=""
     i=0
     for browser in $BROWSERS; do
         if [ -f "$temp_dir/$i.url" ]; then
@@ -226,147 +200,37 @@ else
         else
             urls="$urls $url"
         fi
-        
-        if [ -f "$temp_dir/$i.counts" ]; then
-            counts=$(cat "$temp_dir/$i.counts")
-            echo "Read counts for $browser from $temp_dir/$i.counts: $counts" >&2
-        else
-            counts="{}"
-            echo "No counts file found for $browser at $temp_dir/$i.counts" >&2
-        fi
-        if [ -z "$all_counts" ]; then
-            all_counts="$counts"
-        else
-            all_counts="$all_counts|$counts"
-        fi
-        
         i=$((i + 1))
     done
     
     # Clean up temp directory
     rm -rf "$temp_dir"
     
-    # Calculate total test counts across all browsers
-    total_passed=0
-    total_failed=0
-    total_flaky=0
-    total_skipped=0
-    total_tests=0
-    
-    # Parse counts and calculate totals
-    IFS='|'
-    set -- $all_counts
-    for counts_json; do
-        if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
-            # Parse JSON counts using simple grep/sed if jq is not available
-            if command -v jq > /dev/null 2>&1; then
-                passed=$(echo "$counts_json" | jq -r '.passed // 0')
-                failed=$(echo "$counts_json" | jq -r '.failed // 0')
-                flaky=$(echo "$counts_json" | jq -r '.flaky // 0')
-                skipped=$(echo "$counts_json" | jq -r '.skipped // 0')
-                total=$(echo "$counts_json" | jq -r '.total // 0')
-            else
-                # Fallback parsing without jq
-                passed=$(echo "$counts_json" | sed -n 's/.*"passed":\([0-9]*\).*/\1/p')
-                failed=$(echo "$counts_json" | sed -n 's/.*"failed":\([0-9]*\).*/\1/p')
-                flaky=$(echo "$counts_json" | sed -n 's/.*"flaky":\([0-9]*\).*/\1/p')
-                skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
-                total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
-            fi
-            
-            total_passed=$((total_passed + ${passed:-0}))
-            total_failed=$((total_failed + ${failed:-0}))
-            total_flaky=$((total_flaky + ${flaky:-0}))
-            total_skipped=$((total_skipped + ${skipped:-0}))
-            total_tests=$((total_tests + ${total:-0}))
-        fi
-    done
-    unset IFS
-    
-    # Determine overall status
-    if [ $total_failed -gt 0 ]; then
-        status_icon="❌"
-        status_text="Some tests failed"
-    elif [ $total_flaky -gt 0 ]; then
-        status_icon="⚠️"
-        status_text="Tests passed with flaky tests"
-    elif [ $total_tests -gt 0 ]; then
-        status_icon="✅"
-        status_text="All tests passed!"
-    else
-        status_icon="🕵🏻"
-        status_text="No test results found"
-    fi
-    
     # Generate completion comment
     comment="$COMMENT_MARKER
 ## 🎭 Playwright Test Results
 
-$status_icon **$status_text**
+✅ **Tests completed successfully!**
 
-⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC"
-
-    # Add summary counts if we have test data
-    if [ $total_tests -gt 0 ]; then
-        comment="$comment
-
-### 📈 Summary
-- **Total Tests:** $total_tests
-- **Passed:** $total_passed ✅
-- **Failed:** $total_failed $([ $total_failed -gt 0 ] && echo '❌' || echo '')
-- **Flaky:** $total_flaky $([ $total_flaky -gt 0 ] && echo '⚠️' || echo '')
-- **Skipped:** $total_skipped $([ $total_skipped -gt 0 ] && echo '⏭️' || echo '')"
-    fi
-    
-    comment="$comment
+⏰ Completed at: $(date -u '+%m/%d/%Y, %I:%M:%S %p') UTC
 
 ### 📊 Test Reports by Browser"
     
-    # Add browser results with individual counts
+    # Add browser results
     i=0
-    IFS='|'
-    set -- $all_counts
-    for counts_json; do
-        # Get browser name
-        browser=$(echo "$BROWSERS" | cut -d' ' -f$((i + 1)))
+    for browser in $BROWSERS; do
         # Get URL at position i
         url=$(echo "$urls" | cut -d' ' -f$((i + 1)))
         
         if [ "$url" != "failed" ] && [ -n "$url" ]; then
-            # Parse individual browser counts
-            if [ "$counts_json" != "{}" ] && [ -n "$counts_json" ]; then
-                if command -v jq > /dev/null 2>&1; then
-                    b_passed=$(echo "$counts_json" | jq -r '.passed // 0')
-                    b_failed=$(echo "$counts_json" | jq -r '.failed // 0')
-                    b_flaky=$(echo "$counts_json" | jq -r '.flaky // 0')
-                    b_skipped=$(echo "$counts_json" | jq -r '.skipped // 0')
-                    b_total=$(echo "$counts_json" | jq -r '.total // 0')
-                else
-                    b_passed=$(echo "$counts_json" | sed -n 's/.*"passed":\([0-9]*\).*/\1/p')
-                    b_failed=$(echo "$counts_json" | sed -n 's/.*"failed":\([0-9]*\).*/\1/p')
-                    b_flaky=$(echo "$counts_json" | sed -n 's/.*"flaky":\([0-9]*\).*/\1/p')
-                    b_skipped=$(echo "$counts_json" | sed -n 's/.*"skipped":\([0-9]*\).*/\1/p')
-                    b_total=$(echo "$counts_json" | sed -n 's/.*"total":\([0-9]*\).*/\1/p')
-                fi
-                
-                if [ -n "$b_total" ] && [ "$b_total" != "0" ]; then
-                    counts_str=" • ✅ $b_passed / ❌ $b_failed / ⚠️ $b_flaky / ⏭️ $b_skipped"
-                else
-                    counts_str=""
-                fi
-            else
-                counts_str=""
-            fi
-            
             comment="$comment
-- ✅ **${browser}**: [View Report](${url})${counts_str}"
+- ✅ **${browser}**: [View Report](${url})"
         else
             comment="$comment
 - ❌ **${browser}**: Deployment failed"
         fi
         i=$((i + 1))
     done
-    unset IFS
     
     comment="$comment
 

scripts/collect-i18n-general.ts

@@ -3,8 +3,8 @@ import * as fs from 'fs'
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
 import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
-import type { FormItem, SettingParams } from '../src/platform/settings/types'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
+import type { FormItem, SettingParams } from '../src/types/settingTypes'
 import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
 
 const localePath = './src/locales/en/main.json'

scripts/collect-i18n-node-defs.ts

@@ -11,7 +11,7 @@ const nodeDefsPath = './src/locales/en/nodeDefs.json'
 
 test('collect-i18n-node-defs', async ({ comfyPage }) => {
   // Mock view route
-  comfyPage.page.route('**/view**', async (route) => {
+  await comfyPage.page.route('**/view**', async (route) => {
     await route.fulfill({
       body: JSON.stringify({})
     })

scripts/generate-json-schema.ts

@@ -5,7 +5,7 @@ import { zodToJsonSchema } from 'zod-to-json-schema'
 import {
   zComfyWorkflow,
   zComfyWorkflow1
-} from '../src/platform/workflow/validation/schemas/workflowSchema'
+} from '../src/schemas/comfyWorkflowSchema'
 import { zComfyNodeDef as zComfyNodeDefV2 } from '../src/schemas/nodeDef/nodeDefSchemaV2'
 import { zComfyNodeDef as zComfyNodeDefV1 } from '../src/schemas/nodeDefSchema'
 

src/assets/css/style.css

@@ -2,9 +2,8 @@
 
 @import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);
-@import 'tw-animate-css';
 
-@plugin 'tailwindcss-primeui';
+@plugin "tailwindcss-primeui";
 
 @config '../../../tailwind.config.ts';
 
@@ -99,7 +98,6 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
-  --color-bypass: #6A246A;
   --color-error: #962a2a;
 
   --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 
@@ -116,14 +114,6 @@
   --color-dark-elevation-2: rgba(from white r g b / 0.03);
 }
 
-@theme inline {
-  --color-node-component-surface: var(--color-charcoal-300);
-  --color-node-component-surface-highlight: var(--color-slate-100);
-  --color-node-component-surface-hovered: var(--color-charcoal-500);
-  --color-node-component-surface-selected: var(--color-charcoal-700);
-  --color-node-stroke: var(--color-stone-100);
-}
-
 @custom-variant dark-theme {
   .dark-theme & {
     @slot;
@@ -962,7 +952,9 @@ audio.comfy-audio.empty-audio-widget {
   /* Uses default styling - no overrides needed */
 }
 
+/* Smooth transitions between LOD levels */
 .lg-node {
+  transition: min-height 0.2s ease;
   /* Disable text selection on all nodes */
   user-select: none;
   -webkit-user-select: none;

src/assets/icons/custom/mask.svg

@@ -1,14 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 16 16" fill="none">
-  <g clip-path="url(#clip0_704_2695)">
-    <path d="M6.05048 2C5.52055 7.29512 9.23033 10.4722 14 9.94267" stroke="#9C9EAB" stroke-width="1.3"/>
-    <path d="M6.5 5.5L10 2" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
-    <path d="M8 8L12.5 3.5" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="square"/>
-    <path d="M10.5 9.5L14 6" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round"/>
-    <path d="M7.99992 14.6667C11.6818 14.6667 14.6666 11.6819 14.6666 8.00004C14.6666 4.31814 11.6818 1.33337 7.99992 1.33337C4.31802 1.33337 1.33325 4.31814 1.33325 8.00004C1.33325 11.6819 4.31802 14.6667 7.99992 14.6667Z" stroke="#9C9EAB" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-  </g>
-  <defs>
-    <clipPath id="clip0_704_2695">
-      <rect width="16" height="16" fill="white"/>
-    </clipPath>
-  </defs>
-</svg>

src/base/common/downloadUtil.ts

@@ -1,41 +0,0 @@
-/**
- * Utility functions for downloading files
- */
-
-// Constants
-const DEFAULT_DOWNLOAD_FILENAME = 'download.png'
-
-/**
- * Download a file from a URL by creating a temporary anchor element
- * @param url - The URL of the file to download (must be a valid URL string)
- * @param filename - Optional filename override (will use URL filename or default if not provided)
- * @throws {Error} If the URL is invalid or empty
- */
-export const downloadFile = (url: string, filename?: string): void => {
-  if (!url || typeof url !== 'string' || url.trim().length === 0) {
-    throw new Error('Invalid URL provided for download')
-  }
-  const link = document.createElement('a')
-  link.href = url
-  link.download =
-    filename || extractFilenameFromUrl(url) || DEFAULT_DOWNLOAD_FILENAME
-
-  // Trigger download
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-}
-
-/**
- * Extract filename from a URL's query parameters
- * @param url - The URL to extract filename from
- * @returns The extracted filename or null if not found
- */
-const extractFilenameFromUrl = (url: string): string | null => {
-  try {
-    const urlObj = new URL(url, window.location.origin)
-    return urlObj.searchParams.get('filename')
-  } catch {
-    return null
-  }
-}

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -50,7 +50,7 @@ import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 

src/components/MenuHamburger.vue

@@ -23,8 +23,8 @@
 import Button from 'primevue/button'
 import { CSSProperties, computed, watchEffect } from 'vue'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
+import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { showNativeSystemMenu } from '@/utils/envUtil'
 

src/components/actionbar/BatchCountEdit.vue

@@ -37,8 +37,8 @@ import { storeToRefs } from 'pinia'
 import InputNumber from 'primevue/inputnumber'
 import { computed } from 'vue'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useQueueSettingsStore } from '@/stores/queueStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const queueSettingsStore = useQueueSettingsStore()
 const { batchCount } = storeToRefs(queueSettingsStore)

src/components/actionbar/ComfyActionbar.vue

@@ -24,7 +24,7 @@ import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
 import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 import ComfyQueueButton from './ComfyQueueButton.vue'
 
@@ -37,7 +37,7 @@ const visible = computed(() => position.value !== 'Disabled')
 const topMenuRef = inject<Ref<HTMLDivElement | null>>('topMenuRef')
 const panelRef = ref<HTMLElement | null>(null)
 const dragHandleRef = ref<HTMLElement | null>(null)
-const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
+const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', false)
 const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
   x: 0,
   y: 0

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

@@ -7,11 +7,9 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
 import { Ref, onUnmounted, ref } from 'vue'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { electronAPI, isElectron } from '@/utils/envUtil'
 
 const emit = defineEmits<{
   created: [ReturnType<typeof useTerminal>, Ref<HTMLElement | undefined>]
@@ -21,15 +19,6 @@ const terminalEl = ref<HTMLElement | undefined>()
 const rootEl = ref<HTMLElement | undefined>()
 emit('created', useTerminal(terminalEl), rootEl)
 
-const showContextMenu = (event: MouseEvent) => {
-  event.preventDefault()
-  electronAPI()?.showContextMenu({ type: 'text' })
-}
-
-if (isElectron()) {
-  useEventListener(terminalEl, 'contextmenu', showContextMenu)
-}
-
 onUnmounted(() => emit('unmounted'))
 </script>
 

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -38,10 +38,10 @@ import { computed, onUpdated, ref, watch } from 'vue'
 
 import SubgraphBreadcrumbItem from '@/components/breadcrumb/SubgraphBreadcrumbItem.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasStore } from '@/stores/graphStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 import { forEachSubgraphNode } from '@/utils/graphTraversalUtil'
 
 const MIN_WIDTH = 28

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -53,14 +53,11 @@ import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import {
-  ComfyWorkflow,
-  useWorkflowStore
-} from '@/platform/workflow/management/stores/workflowStore'
 import { useDialogService } from '@/services/dialogService'
+import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
+import { ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import { appendJsonExt } from '@/utils/formatUtil'
 
 interface Props {

src/components/common/BackgroundImageUpload.vue

@@ -36,8 +36,8 @@ import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
 
-import { useToastStore } from '@/platform/updates/common/toastStore'
 import { api } from '@/scripts/api'
+import { useToastStore } from '@/stores/toastStore'
 
 const modelValue = defineModel<string>()
 

src/components/common/FormItem.vue

@@ -40,11 +40,10 @@ import BackgroundImageUpload from '@/components/common/BackgroundImageUpload.vue
 import CustomFormValue from '@/components/common/CustomFormValue.vue'
 import FormColorPicker from '@/components/common/FormColorPicker.vue'
 import FormImageUpload from '@/components/common/FormImageUpload.vue'
-import FormRadioGroup from '@/components/common/FormRadioGroup.vue'
 import InputKnob from '@/components/common/InputKnob.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
 import UrlInput from '@/components/common/UrlInput.vue'
-import { FormItem } from '@/platform/settings/types'
+import { FormItem } from '@/types/settingTypes'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{
@@ -67,7 +66,6 @@ function getFormAttrs(item: FormItem) {
   }
   switch (item.type) {
     case 'combo':
-    case 'radio':
       attrs['options'] =
         typeof item.options === 'function'
           ? // @ts-expect-error: Audit and deprecate usage of legacy options type:
@@ -99,8 +97,6 @@ function getFormComponent(item: FormItem): Component {
       return InputKnob
     case 'combo':
       return Select
-    case 'radio':
-      return FormRadioGroup
     case 'image':
       return FormImageUpload
     case 'color':

src/components/common/FormRadioGroup.spec.ts

@@ -1,245 +0,0 @@
-import { mount } from '@vue/test-utils'
-import PrimeVue from 'primevue/config'
-import RadioButton from 'primevue/radiobutton'
-import { beforeAll, describe, expect, it } from 'vitest'
-import { createApp } from 'vue'
-
-import type { SettingOption } from '@/platform/settings/types'
-
-import FormRadioGroup from './FormRadioGroup.vue'
-
-describe('FormRadioGroup', () => {
-  beforeAll(() => {
-    const app = createApp({})
-    app.use(PrimeVue)
-  })
-
-  const mountComponent = (props: any, options = {}) => {
-    return mount(FormRadioGroup, {
-      global: {
-        plugins: [PrimeVue],
-        components: { RadioButton }
-      },
-      props,
-      ...options
-    })
-  }
-
-  describe('normalizedOptions computed property', () => {
-    it('handles string array options', () => {
-      const wrapper = mountComponent({
-        modelValue: 'option1',
-        options: ['option1', 'option2', 'option3'],
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
-
-      expect(radioButtons[0].props('value')).toBe('option1')
-      expect(radioButtons[1].props('value')).toBe('option2')
-      expect(radioButtons[2].props('value')).toBe('option3')
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('option1')
-      expect(labels[1].text()).toBe('option2')
-      expect(labels[2].text()).toBe('option3')
-    })
-
-    it('handles SettingOption array', () => {
-      const options: SettingOption[] = [
-        { text: 'Small', value: 'sm' },
-        { text: 'Medium', value: 'md' },
-        { text: 'Large', value: 'lg' }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'md',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
-
-      expect(radioButtons[0].props('value')).toBe('sm')
-      expect(radioButtons[1].props('value')).toBe('md')
-      expect(radioButtons[2].props('value')).toBe('lg')
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('Small')
-      expect(labels[1].text()).toBe('Medium')
-      expect(labels[2].text()).toBe('Large')
-    })
-
-    it('handles SettingOption with undefined value (uses text as value)', () => {
-      const options: SettingOption[] = [
-        { text: 'Option A', value: undefined },
-        { text: 'Option B' }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'Option A',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-
-      expect(radioButtons[0].props('value')).toBe('Option A')
-      expect(radioButtons[1].props('value')).toBe('Option B')
-    })
-
-    it('handles custom object with optionLabel and optionValue', () => {
-      const options = [
-        { name: 'First Option', id: 1 },
-        { name: 'Second Option', id: 2 },
-        { name: 'Third Option', id: 3 }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 2,
-        options,
-        optionLabel: 'name',
-        optionValue: 'id',
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
-
-      expect(radioButtons[0].props('value')).toBe(1)
-      expect(radioButtons[1].props('value')).toBe(2)
-      expect(radioButtons[2].props('value')).toBe(3)
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('First Option')
-      expect(labels[1].text()).toBe('Second Option')
-      expect(labels[2].text()).toBe('Third Option')
-    })
-
-    it('handles mixed array with strings and SettingOptions', () => {
-      const options: (string | SettingOption)[] = [
-        'Simple String',
-        { text: 'Complex Option', value: 'complex' },
-        'Another String'
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'complex',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(3)
-
-      expect(radioButtons[0].props('value')).toBe('Simple String')
-      expect(radioButtons[1].props('value')).toBe('complex')
-      expect(radioButtons[2].props('value')).toBe('Another String')
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('Simple String')
-      expect(labels[1].text()).toBe('Complex Option')
-      expect(labels[2].text()).toBe('Another String')
-    })
-
-    it('handles empty options array', () => {
-      const wrapper = mountComponent({
-        modelValue: null,
-        options: [],
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(0)
-    })
-
-    it('handles undefined options gracefully', () => {
-      const wrapper = mountComponent({
-        modelValue: null,
-        options: undefined,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(0)
-    })
-
-    it('handles object with missing properties gracefully', () => {
-      const options = [
-        { label: 'Option 1', val: 'opt1' },
-        { text: 'Option 2', value: 'opt2' }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'opt1',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-      expect(radioButtons).toHaveLength(2)
-
-      const labels = wrapper.findAll('label')
-      expect(labels[0].text()).toBe('Unknown')
-      expect(labels[1].text()).toBe('Option 2')
-    })
-  })
-
-  describe('component functionality', () => {
-    it('sets correct input-id and name attributes', () => {
-      const options = ['A', 'B']
-
-      const wrapper = mountComponent({
-        modelValue: 'A',
-        options,
-        id: 'my-radio-group'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-
-      expect(radioButtons[0].props('inputId')).toBe('my-radio-group-A')
-      expect(radioButtons[0].props('name')).toBe('my-radio-group')
-      expect(radioButtons[1].props('inputId')).toBe('my-radio-group-B')
-      expect(radioButtons[1].props('name')).toBe('my-radio-group')
-    })
-
-    it('associates labels with radio buttons correctly', () => {
-      const options = ['Yes', 'No']
-
-      const wrapper = mountComponent({
-        modelValue: 'Yes',
-        options,
-        id: 'confirm-radio'
-      })
-
-      const labels = wrapper.findAll('label')
-
-      expect(labels[0].attributes('for')).toBe('confirm-radio-Yes')
-      expect(labels[1].attributes('for')).toBe('confirm-radio-No')
-    })
-
-    it('sets aria-describedby attribute correctly', () => {
-      const options: SettingOption[] = [
-        { text: 'Option 1', value: 'opt1' },
-        { text: 'Option 2', value: 'opt2' }
-      ]
-
-      const wrapper = mountComponent({
-        modelValue: 'opt1',
-        options,
-        id: 'test-radio'
-      })
-
-      const radioButtons = wrapper.findAllComponents(RadioButton)
-
-      expect(radioButtons[0].attributes('aria-describedby')).toBe(
-        'Option 1-label'
-      )
-      expect(radioButtons[1].attributes('aria-describedby')).toBe(
-        'Option 2-label'
-      )
-    })
-  })
-})

src/components/common/FormRadioGroup.vue

@@ -1,62 +0,0 @@
-<template>
-  <div class="flex flex-row gap-4">
-    <div
-      v-for="option in normalizedOptions"
-      :key="option.value"
-      class="flex items-center"
-    >
-      <RadioButton
-        :input-id="`${id}-${option.value}`"
-        :name="id"
-        :value="option.value"
-        :model-value="modelValue"
-        :aria-describedby="`${option.text}-label`"
-        @update:model-value="$emit('update:modelValue', $event)"
-      />
-      <label :for="`${id}-${option.value}`" class="ml-2 cursor-pointer">
-        {{ option.text }}
-      </label>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import RadioButton from 'primevue/radiobutton'
-import { computed } from 'vue'
-
-import type { SettingOption } from '@/platform/settings/types'
-
-const props = defineProps<{
-  modelValue: any
-  options: (SettingOption | string)[]
-  optionLabel?: string
-  optionValue?: string
-  id?: string
-}>()
-
-defineEmits<{
-  'update:modelValue': [value: any]
-}>()
-
-const normalizedOptions = computed<SettingOption[]>(() => {
-  if (!props.options) return []
-
-  return props.options.map((option) => {
-    if (typeof option === 'string') {
-      return { text: option, value: option }
-    }
-
-    if ('text' in option) {
-      return {
-        text: option.text,
-        value: option.value ?? option.text
-      }
-    }
-    // Handle optionLabel/optionValue
-    return {
-      text: option[props.optionLabel || 'text'] || 'Unknown',
-      value: option[props.optionValue || 'value']
-    }
-  })
-})
-</script>

src/components/dialog/UnloadWindowConfirmDialog.vue

@@ -12,8 +12,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted } from 'vue'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 
 const settingStore = useSettingStore()
 const workflowStore = useWorkflowStore()

src/components/dialog/content/ApiNodesSignInContent.vue

@@ -1,3 +1,4 @@
+<!-- Prompt user that the workflow contains API nodes that needs login to run -->
 <template>
   <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
     <div class="text-2xl font-medium mb-2">

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -94,9 +94,9 @@ import Message from 'primevue/message'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ConfirmationDialogType } from '@/services/dialogService'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const props = defineProps<{
   message: string

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -60,9 +60,9 @@ import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
 import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/composables/useManagerState'
-import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useToastStore } from '@/stores/toastStore'
 import type { MissingNodeType } from '@/types/comfy'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 

src/components/dialog/content/MissingModelsWarning.vue

@@ -39,7 +39,7 @@ import { useI18n } from 'vue-i18n'
 import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
 import FileDownload from '@/components/common/FileDownload.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here

src/components/dialog/content/SettingDialogContent.vue

@@ -66,17 +66,18 @@ import Tabs from 'primevue/tabs'
 import { computed, watch } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
-import CurrentUserMessage from '@/components/dialog/content/setting/CurrentUserMessage.vue'
-import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import ColorPaletteMessage from '@/platform/settings/components/ColorPaletteMessage.vue'
-import SettingsPanel from '@/platform/settings/components/SettingsPanel.vue'
-import { useSettingSearch } from '@/platform/settings/composables/useSettingSearch'
-import { useSettingUI } from '@/platform/settings/composables/useSettingUI'
-import { SettingTreeNode } from '@/platform/settings/settingStore'
-import { ISettingGroup, SettingParams } from '@/platform/settings/types'
+import { useSettingSearch } from '@/composables/setting/useSettingSearch'
+import { useSettingUI } from '@/composables/setting/useSettingUI'
+import { SettingTreeNode } from '@/stores/settingStore'
+import { ISettingGroup, SettingParams } from '@/types/settingTypes'
 import { flattenTree } from '@/utils/treeUtil'
 
+import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
+import CurrentUserMessage from './setting/CurrentUserMessage.vue'
+import PanelTemplate from './setting/PanelTemplate.vue'
+import SettingsPanel from './setting/SettingsPanel.vue'
+
 const { defaultPanel } = defineProps<{
   defaultPanel?:
     | 'about'
@@ -112,12 +113,7 @@ const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
     .sort((a, b) => a.label.localeCompare(b.label))
     .map((group) => ({
       label: group.label,
-      settings: flattenTree<SettingParams>(group).sort((a, b) => {
-        const sortOrderA = a.sortOrder ?? 0
-        const sortOrderB = b.sortOrder ?? 0
-
-        return sortOrderB - sortOrderA
-      })
+      settings: flattenTree<SettingParams>(group)
     }))
 }
 

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

@@ -43,8 +43,8 @@ import Button from 'primevue/button'
 import Message from 'primevue/message'
 import Select from 'primevue/select'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 const settingStore = useSettingStore()

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

@@ -92,9 +92,10 @@ import ToggleSwitch from 'primevue/toggleswitch'
 import { computed, onMounted, ref } from 'vue'
 
 import SearchBox from '@/components/common/SearchBox.vue'
-import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { useExtensionStore } from '@/stores/extensionStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+import PanelTemplate from './PanelTemplate.vue'
 
 const filterTypes = ['All', 'Core', 'Custom']
 const filterType = ref('All')

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

@@ -74,14 +74,15 @@ import { watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
-import PanelTemplate from '@/components/dialog/content/setting/PanelTemplate.vue'
 import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
 import type { ServerConfig } from '@/constants/serverConfig'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import type { FormItem as FormItemType } from '@/platform/settings/types'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
+import { useSettingStore } from '@/stores/settingStore'
+import type { FormItem as FormItemType } from '@/types/settingTypes'
 import { electronAPI } from '@/utils/envUtil'
 
+import PanelTemplate from './PanelTemplate.vue'
+
 const settingStore = useSettingStore()
 const serverConfigStore = useServerConfigStore()
 const {

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

@@ -19,8 +19,8 @@
 <script setup lang="ts">
 import Divider from 'primevue/divider'
 
-import SettingItem from '@/platform/settings/components/SettingItem.vue'
-import { SettingParams } from '@/platform/settings/types'
+import SettingItem from '@/components/dialog/content/setting/SettingItem.vue'
+import { SettingParams } from '@/types/settingTypes'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 defineProps<{

src/components/dialog/content/setting/SettingItem.spec.ts

@@ -6,7 +6,7 @@ import Tooltip from 'primevue/tooltip'
 import { describe, expect, it, vi } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
-import SettingItem from '@/platform/settings/components/SettingItem.vue'
+import SettingItem from './SettingItem.vue'
 
 const i18n = createI18n({
   legacy: false,

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

@@ -29,8 +29,8 @@ import { useI18n } from 'vue-i18n'
 
 import FormItem from '@/components/common/FormItem.vue'
 import { st } from '@/i18n'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import type { SettingOption, SettingParams } from '@/platform/settings/types'
+import { useSettingStore } from '@/stores/settingStore'
+import type { SettingOption, SettingParams } from '@/types/settingTypes'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 const props = defineProps<{

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

@@ -17,8 +17,9 @@
 
 <script setup lang="ts">
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SettingGroup from '@/platform/settings/components/SettingGroup.vue'
-import { ISettingGroup } from '@/platform/settings/types'
+import { ISettingGroup } from '@/types/settingTypes'
+
+import SettingGroup from './SettingGroup.vue'
 
 const props = defineProps<{
   settingGroups: ISettingGroup[]

src/components/dialog/footer/ManagerProgressFooter.vue

@@ -75,16 +75,16 @@ import { useI18n } from 'vue-i18n'
 
 import DotSpinner from '@/components/common/DotSpinner.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { api } from '@/scripts/api'
 import { useComfyManagerService } from '@/services/comfyManagerService'
+import { useWorkflowService } from '@/services/workflowService'
 import {
   useComfyManagerStore,
   useManagerProgressDialogStore
 } from '@/stores/comfyManagerStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useDialogStore } from '@/stores/dialogStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const { t } = useI18n()
 const dialogStore = useDialogStore()

src/components/graph/DomWidgets.vue

@@ -16,8 +16,8 @@ import { computed } from 'vue'
 
 import DomWidget from '@/components/graph/widgets/DomWidget.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useDomWidgetStore } from '@/stores/domWidgetStore'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const domWidgetStore = useDomWidgetStore()
 

src/components/graph/GraphCanvas.vue

@@ -40,12 +40,13 @@
   >
     <!-- Vue nodes rendered based on graph nodes -->
     <VueGraphNode
-      v-for="nodeData in allNodes"
+      v-for="nodeData in nodesToRender"
       :key="nodeData.id"
       :node-data="nodeData"
       :position="nodePositions.get(nodeData.id)"
       :size="nodeSizes.get(nodeData.id)"
       :readonly="false"
+      :executing="executionStore.executingNodeId === nodeData.id"
       :error="
         executionStore.lastExecutionError?.node_id === nodeData.id
           ? 'Execution error'
@@ -104,34 +105,33 @@ import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
+import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
+import { useWorkflowAutoSave } from '@/composables/useWorkflowAutoSave'
+import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
+import { CORE_SETTINGS } from '@/constants/coreSettings'
 import { i18n, t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
-import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useToastStore } from '@/platform/updates/common/toastStore'
-import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useWorkflowAutoSave } from '@/platform/workflow/persistence/composables/useWorkflowAutoSave'
-import { useWorkflowPersistence } from '@/platform/workflow/persistence/composables/useWorkflowPersistence'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
-import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
+import TransformPane from '@/renderer/core/layout/TransformPane.vue'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
 import { useNodeEventHandlers } from '@/renderer/extensions/vueNodes/composables/useNodeEventHandlers'
-import { useExecutionStateProvider } from '@/renderer/extensions/vueNodes/execution/useExecutionStateProvider'
 import { UnauthorizedError, api } from '@/scripts/api'
 import { app as comfyApp } from '@/scripts/app'
 import { ChangeTracker } from '@/scripts/changeTracker'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { newUserService } from '@/services/newUserService'
+import { useWorkflowService } from '@/services/workflowService'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
+import { useCanvasStore } from '@/stores/graphStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { useToastStore } from '@/stores/toastStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
@@ -183,12 +183,12 @@ const nodeEventHandlers = useNodeEventHandlers(vueNodeLifecycle.nodeManager)
 
 const nodePositions = vueNodeLifecycle.nodePositions
 const nodeSizes = vueNodeLifecycle.nodeSizes
-const allNodes = viewportCulling.allNodes
+const nodesToRender = viewportCulling.nodesToRender
 
 const handleTransformUpdate = () => {
-  viewportCulling.handleTransformUpdate()
-  // TODO: Fix paste position sync in separate PR
-  vueNodeLifecycle.detectChangesInRAF.value()
+  viewportCulling.handleTransformUpdate(
+    vueNodeLifecycle.detectChangesInRAF.value
+  )
 }
 const handleNodeSelect = nodeEventHandlers.handleNodeSelect
 const handleNodeCollapse = nodeEventHandlers.handleNodeCollapse
@@ -205,9 +205,6 @@ const selectedNodeIds = computed(
 )
 provide(SelectedNodeIdsKey, selectedNodeIds)
 
-// Provide execution state to all Vue nodes
-useExecutionStateProvider()
-
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })
@@ -431,9 +428,7 @@ onMounted(async () => {
   workflowPersistence.restoreWorkflowTabsState()
 
   // Initialize release store to fetch releases from comfy-api (fire-and-forget)
-  const { useReleaseStore } = await import(
-    '@/platform/updates/common/releaseStore'
-  )
+  const { useReleaseStore } = await import('@/stores/releaseStore')
   const releaseStore = useReleaseStore()
   void releaseStore.initialize()
 

src/components/graph/GraphCanvasMenu.vue

@@ -127,10 +127,10 @@ import { useI18n } from 'vue-i18n'
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useZoomControls } from '@/composables/useZoomControls'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 import ZoomControlsModal from './modals/ZoomControlsModal.vue'

src/components/graph/NodeTooltip.vue

@@ -19,10 +19,10 @@ import {
   isOverNodeInput,
   isOverNodeOutput
 } from '@/lib/litegraph/src/litegraph'
-import { useSettingStore } from '@/platform/settings/settingStore'
 import { app as comfyApp } from '@/scripts/app'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 let idleTimeout: number

src/components/graph/SelectionToolbox.spec.ts

@@ -1,500 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import SelectionToolbox from '@/components/graph/SelectionToolbox.vue'
-import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useExtensionService } from '@/services/extensionService'
-
-// Mock the composables and services
-vi.mock('@/composables/graph/useCanvasInteractions', () => ({
-  useCanvasInteractions: vi.fn(() => ({
-    handleWheel: vi.fn()
-  }))
-}))
-
-vi.mock('@/composables/canvas/useSelectionToolboxPosition', () => ({
-  useSelectionToolboxPosition: vi.fn(() => ({
-    visible: { value: true }
-  })),
-  resetMoreOptionsState: vi.fn()
-}))
-
-vi.mock('@/composables/element/useRetriggerableAnimation', () => ({
-  useRetriggerableAnimation: vi.fn(() => ({
-    shouldAnimate: { value: false }
-  }))
-}))
-
-vi.mock('@/renderer/extensions/minimap/composables/useMinimap', () => ({
-  useMinimap: vi.fn(() => ({
-    containerStyles: {
-      value: {
-        backgroundColor: '#ffffff'
-      }
-    }
-  }))
-}))
-
-vi.mock('@/services/extensionService', () => ({
-  useExtensionService: vi.fn(() => ({
-    extensionCommands: { value: new Map() },
-    invokeExtensions: vi.fn(() => [])
-  }))
-}))
-
-vi.mock('@/utils/litegraphUtil', () => ({
-  isLGraphNode: vi.fn(() => true),
-  isImageNode: vi.fn(() => false),
-  isLoad3dNode: vi.fn(() => false)
-}))
-
-vi.mock('@/utils/nodeFilterUtil', () => ({
-  isOutputNode: vi.fn(() => false),
-  filterOutputNodes: vi.fn((nodes) => nodes.filter(() => false))
-}))
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({
-    get: vi.fn((key: string) => {
-      if (key === 'Comfy.Load3D.3DViewerEnable') return true
-      return null
-    })
-  })
-}))
-
-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: () => ({
-    getCommand: vi.fn(() => ({ id: 'test-command', title: 'Test Command' }))
-  })
-}))
-
-let nodeDefMock = {
-  type: 'TestNode',
-  title: 'Test Node'
-} as unknown
-
-vi.mock('@/stores/nodeDefStore', () => ({
-  useNodeDefStore: () => ({
-    fromLGraphNode: vi.fn(() => nodeDefMock)
-  })
-}))
-
-describe('SelectionToolbox', () => {
-  let canvasStore: ReturnType<typeof useCanvasStore>
-
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-      en: {
-        g: {
-          info: 'Node Info',
-          bookmark: 'Save to Library',
-          frameNodes: 'Frame Nodes',
-          moreOptions: 'More Options',
-          refreshNode: 'Refresh Node'
-        }
-      }
-    }
-  })
-
-  const mockProvide = {
-    isVisible: { value: true },
-    selectedItems: []
-  }
-
-  beforeEach(() => {
-    setActivePinia(createPinia())
-    canvasStore = useCanvasStore()
-
-    // Mock the canvas to avoid "getCanvas: canvas is null" errors
-    canvasStore.canvas = {
-      setDirty: vi.fn(),
-      state: {
-        selectionChanged: false
-      }
-    } as any
-
-    vi.resetAllMocks()
-  })
-
-  const mountComponent = (props = {}) => {
-    return mount(SelectionToolbox, {
-      props,
-      global: {
-        plugins: [i18n, PrimeVue],
-        provide: {
-          [Symbol.for('SelectionOverlay')]: mockProvide
-        },
-        stubs: {
-          Panel: {
-            template:
-              '<div class="panel selection-toolbox absolute left-1/2 rounded-lg"><slot /></div>',
-            props: ['pt', 'style', 'class']
-          },
-          InfoButton: { template: '<div class="info-button" />' },
-          ColorPickerButton: {
-            template:
-              '<button data-testid="color-picker-button" class="color-picker-button" />'
-          },
-          FrameNodes: { template: '<div class="frame-nodes" />' },
-          PublishButton: {
-            template:
-              '<button data-testid="add-to-library" class="bookmark-button" />'
-          },
-          BypassButton: {
-            template:
-              '<button data-testid="bypass-button" class="bypass-button" />'
-          },
-          PinButton: { template: '<div class="pin-button" />' },
-          Load3DViewerButton: {
-            template: '<div class="load-3d-viewer-button" />'
-          },
-          MaskEditorButton: { template: '<div class="mask-editor-button" />' },
-          DeleteButton: {
-            template:
-              '<button data-testid="delete-button" class="delete-button" />'
-          },
-          RefreshSelectionButton: {
-            template: '<div class="refresh-button" />'
-          },
-          ExecuteButton: { template: '<div class="execute-button" />' },
-          ConvertToSubgraphButton: {
-            template:
-              '<button data-testid="convert-to-subgraph-button" class="convert-to-subgraph-button" />'
-          },
-          ExtensionCommandButton: {
-            template: '<div class="extension-command-button" />'
-          },
-          MoreOptions: {
-            template:
-              '<button data-testid="more-options-button" class="more-options" />'
-          },
-          VerticalDivider: { template: '<div class="vertical-divider" />' }
-        }
-      }
-    })
-  }
-
-  describe('Button Visibility Logic', () => {
-    beforeEach(() => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
-    })
-
-    it('should show info button only for single selections', () => {
-      // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-      expect(wrapper.find('.info-button').exists()).toBe(true)
-
-      // Multiple node selection
-      canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.info-button').exists()).toBe(false)
-    })
-
-    it('should not show info button when node definition is not found', () => {
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      // mock nodedef and return null
-      nodeDefMock = null
-      // remount component
-      const wrapper = mountComponent()
-      expect(wrapper.find('.info-button').exists()).toBe(false)
-    })
-
-    it('should show color picker for all selections', () => {
-      // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-      expect(wrapper.find('[data-testid="color-picker-button"]').exists()).toBe(
-        true
-      )
-
-      // Multiple node selection
-      canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(
-        wrapper2.find('[data-testid="color-picker-button"]').exists()
-      ).toBe(true)
-    })
-
-    it('should show frame nodes only for multiple selections', () => {
-      // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-      expect(wrapper.find('.frame-nodes').exists()).toBe(false)
-
-      // Multiple node selection
-      canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.frame-nodes').exists()).toBe(true)
-    })
-
-    it('should show bypass button for appropriate selections', () => {
-      // Single node selection
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-      expect(wrapper.find('[data-testid="bypass-button"]').exists()).toBe(true)
-
-      // Multiple node selection
-      canvasStore.selectedItems = [
-        { type: 'TestNode1' },
-        { type: 'TestNode2' }
-      ] as any
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('[data-testid="bypass-button"]').exists()).toBe(true)
-    })
-
-    it('should show common buttons for all selections', () => {
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-
-      expect(wrapper.find('[data-testid="delete-button"]').exists()).toBe(true)
-      expect(
-        wrapper.find('[data-testid="convert-to-subgraph-button"]').exists()
-      ).toBe(true)
-      expect(wrapper.find('[data-testid="more-options-button"]').exists()).toBe(
-        true
-      )
-    })
-
-    it('should show mask editor only for single image nodes', async () => {
-      const mockUtils = await import('@/utils/litegraphUtil')
-      const isImageNodeSpy = vi.spyOn(mockUtils, 'isImageNode')
-
-      // Single image node
-      isImageNodeSpy.mockReturnValue(true)
-      canvasStore.selectedItems = [{ type: 'ImageNode' }] as any
-      const wrapper = mountComponent()
-      expect(wrapper.find('.mask-editor-button').exists()).toBe(true)
-
-      // Single non-image node
-      isImageNodeSpy.mockReturnValue(false)
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.mask-editor-button').exists()).toBe(false)
-    })
-
-    it('should show Color picker button only for single Load3D nodes', async () => {
-      const mockUtils = await import('@/utils/litegraphUtil')
-      const isLoad3dNodeSpy = vi.spyOn(mockUtils, 'isLoad3dNode')
-
-      // Single Load3D node
-      isLoad3dNodeSpy.mockReturnValue(true)
-      canvasStore.selectedItems = [{ type: 'Load3DNode' }] as any
-      const wrapper = mountComponent()
-      expect(wrapper.find('.load-3d-viewer-button').exists()).toBe(true)
-
-      // Single non-Load3D node
-      isLoad3dNodeSpy.mockReturnValue(false)
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.load-3d-viewer-button').exists()).toBe(false)
-    })
-
-    it('should show ExecuteButton only when output nodes are selected', async () => {
-      const mockNodeFilterUtil = await import('@/utils/nodeFilterUtil')
-      const isOutputNodeSpy = vi.spyOn(mockNodeFilterUtil, 'isOutputNode')
-      const filterOutputNodesSpy = vi.spyOn(
-        mockNodeFilterUtil,
-        'filterOutputNodes'
-      )
-
-      // With output node selected
-      isOutputNodeSpy.mockReturnValue(true)
-      filterOutputNodesSpy.mockReturnValue([{ type: 'SaveImage' }] as any)
-      canvasStore.selectedItems = [
-        { type: 'SaveImage', constructor: { nodeData: { output_node: true } } }
-      ] as any
-      const wrapper = mountComponent()
-      expect(wrapper.find('.execute-button').exists()).toBe(true)
-
-      // Without output node selected
-      isOutputNodeSpy.mockReturnValue(false)
-      filterOutputNodesSpy.mockReturnValue([])
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      wrapper.unmount()
-      const wrapper2 = mountComponent()
-      expect(wrapper2.find('.execute-button').exists()).toBe(false)
-
-      // No selection at all
-      canvasStore.selectedItems = []
-      wrapper2.unmount()
-      const wrapper3 = mountComponent()
-      expect(wrapper3.find('.execute-button').exists()).toBe(false)
-    })
-  })
-
-  describe('Divider Visibility Logic', () => {
-    it('should show dividers between button groups when both groups have buttons', () => {
-      // Setup single node to show info + other buttons
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-
-      const dividers = wrapper.findAll('.vertical-divider')
-      expect(dividers.length).toBeGreaterThan(0)
-    })
-
-    it('should not show dividers when adjacent groups are empty', () => {
-      // No selection should show minimal buttons and dividers
-      canvasStore.selectedItems = []
-      const wrapper = mountComponent()
-
-      const buttons = wrapper.find('.panel').element.children
-      expect(buttons.length).toBeGreaterThan(0) // At least MoreOptions should show
-    })
-  })
-
-  describe('Extension Commands', () => {
-    it('should render extension command buttons when available', () => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: {
-          value: new Map([
-            ['test-command', { id: 'test-command', title: 'Test Command' }]
-          ])
-        },
-        invokeExtensions: vi.fn(() => ['test-command'])
-      } as any)
-
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-
-      expect(wrapper.find('.extension-command-button').exists()).toBe(true)
-    })
-
-    it('should not render extension commands when none available', () => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
-
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-
-      expect(wrapper.find('.extension-command-button').exists()).toBe(false)
-    })
-  })
-
-  describe('Container Styling', () => {
-    it('should apply minimap container styles', () => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
-
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-
-      const panel = wrapper.find('.panel')
-      expect(panel.exists()).toBe(true)
-    })
-
-    it('should have correct CSS classes', () => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
-
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-
-      const panel = wrapper.find('.panel')
-      expect(panel.classes()).toContain('selection-toolbox')
-      expect(panel.classes()).toContain('absolute')
-      expect(panel.classes()).toContain('left-1/2')
-      expect(panel.classes()).toContain('rounded-lg')
-    })
-
-    it('should handle animation class conditionally', () => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
-
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-
-      const panel = wrapper.find('.panel')
-      expect(panel.exists()).toBe(true)
-    })
-  })
-
-  describe('Event Handling', () => {
-    it('should handle wheel events', async () => {
-      const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
-      const handleWheelSpy = vi.fn()
-      mockCanvasInteractions.mockReturnValue({
-        handleWheel: handleWheelSpy
-      } as any)
-
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
-
-      canvasStore.selectedItems = [{ type: 'TestNode' }] as any
-      const wrapper = mountComponent()
-
-      const panel = wrapper.find('.panel')
-      await panel.trigger('wheel')
-
-      expect(handleWheelSpy).toHaveBeenCalled()
-    })
-  })
-
-  describe('No Selection State', () => {
-    beforeEach(() => {
-      const mockExtensionService = vi.mocked(useExtensionService)
-      mockExtensionService.mockReturnValue({
-        extensionCommands: { value: new Map() },
-        invokeExtensions: vi.fn(() => [])
-      } as any)
-    })
-
-    it('should still show MoreOptions when no items selected', () => {
-      canvasStore.selectedItems = []
-      const wrapper = mountComponent()
-
-      expect(wrapper.find('.more-options').exists()).toBe(true)
-    })
-
-    it('should hide most buttons when no items selected', () => {
-      canvasStore.selectedItems = []
-      const wrapper = mountComponent()
-
-      expect(wrapper.find('.info-button').exists()).toBe(false)
-      expect(wrapper.find('.color-picker-button').exists()).toBe(false)
-      expect(wrapper.find('.frame-nodes').exists()).toBe(false)
-      expect(wrapper.find('.bookmark-button').exists()).toBe(false)
-    })
-  })
-})

src/components/graph/SelectionToolbox.vue

@@ -8,37 +8,28 @@
       <Panel
         v-if="visible"
         class="rounded-lg selection-toolbox pointer-events-auto"
-        :style="`backgroundColor: ${containerStyles.backgroundColor};`"
         :pt="{
           header: 'hidden',
-          content: 'px-1 py-1 h-10 px-1 flex flex-row gap-1'
+          content: 'p-0 flex flex-row'
         }"
         @wheel="canvasInteractions.handleWheel"
       >
-        <DeleteButton v-if="showDelete" />
-        <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />
-        <InfoButton v-if="showInfoButton" />
-
-        <ColorPickerButton v-if="showColorPicker" />
-        <FrameNodes v-if="showFrameNodes" />
-        <ConvertToSubgraphButton v-if="showConvertToSubgraph" />
-        <PublishSubgraphButton v-if="showPublishSubgraph" />
-        <MaskEditorButton v-if="showMaskEditor" />
-        <VerticalDivider
-          v-if="showAnyPrimaryActions && showAnyControlActions"
-        />
-
-        <BypassButton v-if="showBypass" />
-        <RefreshSelectionButton v-if="showRefresh" />
-        <Load3DViewerButton v-if="showLoad3DViewer" />
-
+        <ExecuteButton />
+        <ColorPickerButton />
+        <BypassButton />
+        <PinButton />
+        <Load3DViewerButton />
+        <MaskEditorButton />
+        <ConvertToSubgraphButton />
+        <PublishSubgraphButton />
+        <DeleteButton />
+        <RefreshSelectionButton />
         <ExtensionCommandButton
           v-for="command in extensionToolboxCommands"
           :key="command.id"
           :command="command"
         />
-        <ExecuteButton v-if="showExecute" />
-        <MoreOptions />
+        <HelpButton />
       </Panel>
     </Transition>
   </div>
@@ -54,29 +45,22 @@ import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/Convert
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
 import ExtensionCommandButton from '@/components/graph/selectionToolbox/ExtensionCommandButton.vue'
-import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
+import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
 import Load3DViewerButton from '@/components/graph/selectionToolbox/Load3DViewerButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
+import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
 import PublishSubgraphButton from '@/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue'
 import { useSelectionToolboxPosition } from '@/composables/canvas/useSelectionToolboxPosition'
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
-import { useSelectionState } from '@/composables/graph/useSelectionState'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
-
-import FrameNodes from './selectionToolbox/FrameNodes.vue'
-import MoreOptions from './selectionToolbox/MoreOptions.vue'
-import VerticalDivider from './selectionToolbox/VerticalDivider.vue'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
 const canvasInteractions = useCanvasInteractions()
-const minimap = useMinimap()
-const containerStyles = minimap.containerStyles
 
 const toolboxRef = ref<HTMLElement | undefined>()
 const { visible } = useSelectionToolboxPosition(toolboxRef)
@@ -96,44 +80,6 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
     .map((commandId) => commandStore.getCommand(commandId))
     .filter((command): command is ComfyCommandImpl => command !== undefined)
 })
-
-const {
-  hasAnySelection,
-  hasMultipleSelection,
-  isSingleNode,
-  isSingleSubgraph,
-  isSingleImageNode,
-  hasAny3DNodeSelected,
-  hasOutputNodesSelected,
-  nodeDef
-} = useSelectionState()
-const showInfoButton = computed(() => !!nodeDef.value)
-
-const showColorPicker = computed(() => hasAnySelection.value)
-const showConvertToSubgraph = computed(() => hasAnySelection.value)
-const showFrameNodes = computed(() => hasMultipleSelection.value)
-const showPublishSubgraph = computed(() => isSingleSubgraph.value)
-
-const showBypass = computed(
-  () =>
-    isSingleNode.value || isSingleSubgraph.value || hasMultipleSelection.value
-)
-const showLoad3DViewer = computed(() => hasAny3DNodeSelected.value)
-const showMaskEditor = computed(() => isSingleImageNode.value)
-
-const showDelete = computed(() => hasAnySelection.value)
-const showRefresh = computed(() => hasAnySelection.value)
-const showExecute = computed(() => hasOutputNodesSelected.value)
-
-const showAnyPrimaryActions = computed(
-  () =>
-    showColorPicker.value ||
-    showConvertToSubgraph.value ||
-    showFrameNodes.value ||
-    showPublishSubgraph.value
-)
-
-const showAnyControlActions = computed(() => showBypass.value)
 </script>
 
 <style scoped>

src/components/graph/TitleEditor.vue

@@ -24,12 +24,9 @@ import {
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
 import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import {
-  useCanvasStore,
-  useTitleEditorStore
-} from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
+import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const settingStore = useSettingStore()
 

src/components/graph/modals/ZoomControlsModal.vue

@@ -139,10 +139,10 @@ import { Button, InputNumber, InputNumberInputEvent } from 'primevue'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const { t } = useI18n()
 const minimap = useMinimap()

src/components/graph/selectionToolbox/BypassButton.spec.ts

@@ -1,120 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import Tooltip from 'primevue/tooltip'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
-import { LGraphEventMode } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCommandStore } from '@/stores/commandStore'
-
-const mockLGraphNode = {
-  type: 'TestNode',
-  title: 'Test Node',
-  mode: LGraphEventMode.ALWAYS
-}
-
-vi.mock('@/utils/litegraphUtil', () => ({
-  isLGraphNode: vi.fn(() => true)
-}))
-
-describe('BypassButton', () => {
-  let canvasStore: ReturnType<typeof useCanvasStore>
-  let commandStore: ReturnType<typeof useCommandStore>
-
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-      en: {
-        selectionToolbox: {
-          bypassButton: {
-            tooltip: 'Toggle bypass mode'
-          }
-        }
-      }
-    }
-  })
-
-  beforeEach(() => {
-    setActivePinia(createPinia())
-    canvasStore = useCanvasStore()
-    commandStore = useCommandStore()
-
-    vi.clearAllMocks()
-  })
-
-  const mountComponent = () => {
-    return mount(BypassButton, {
-      global: {
-        plugins: [i18n, PrimeVue],
-        directives: { tooltip: Tooltip },
-        stubs: {
-          'i-lucide:ban': true
-        }
-      }
-    })
-  }
-
-  it('should render bypass button', () => {
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-    expect(button.exists()).toBe(true)
-  })
-
-  it('should have correct test id', () => {
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    const wrapper = mountComponent()
-    const button = wrapper.find('[data-testid="bypass-button"]')
-    expect(button.exists()).toBe(true)
-  })
-
-  it('should execute bypass command when clicked', async () => {
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    const executeSpy = vi.spyOn(commandStore, 'execute').mockResolvedValue()
-
-    const wrapper = mountComponent()
-    await wrapper.find('button').trigger('click')
-
-    expect(executeSpy).toHaveBeenCalledWith(
-      'Comfy.Canvas.ToggleSelectedNodes.Bypass'
-    )
-  })
-
-  it('should show normal styling when node is not bypassed', () => {
-    const normalNode = { ...mockLGraphNode, mode: LGraphEventMode.ALWAYS }
-    canvasStore.selectedItems = [normalNode] as any
-
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-
-    expect(button.classes()).not.toContain(
-      'dark-theme:[&:not(:active)]:!bg-[#262729]'
-    )
-  })
-
-  it('should show bypassed styling when node is bypassed', async () => {
-    const bypassedNode = { ...mockLGraphNode, mode: LGraphEventMode.BYPASS }
-    canvasStore.selectedItems = [bypassedNode] as any
-    vi.spyOn(commandStore, 'execute').mockResolvedValue()
-    const wrapper = mountComponent()
-
-    // Click to trigger the reactivity update
-    await wrapper.find('button').trigger('click')
-    await wrapper.vm.$nextTick()
-
-    const button = wrapper.find('button')
-    expect(button.exists()).toBe(true)
-  })
-
-  it('should handle multiple selected items', () => {
-    vi.spyOn(commandStore, 'execute').mockResolvedValue()
-    canvasStore.selectedItems = [mockLGraphNode, mockLGraphNode] as any
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-    expect(button.exists()).toBe(true)
-  })
-})

src/components/graph/selectionToolbox/BypassButton.vue

@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-show="canvasStore.nodeSelected"
     v-tooltip.top="{
       value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
       showDelay: 1000
@@ -7,11 +8,12 @@
     severity="secondary"
     text
     data-testid="bypass-button"
-    class="hover:dark-theme:bg-charcoal-300 hover:bg-[#E7E6E6]"
-    @click="toggleBypass"
+    @click="
+      () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+    "
   >
     <template #icon>
-      <i-lucide:ban class="w-4 h-4" />
+      <i-game-icons:detour />
     </template>
   </Button>
 </template>
@@ -21,11 +23,9 @@ import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-
-const toggleBypass = async () => {
-  await commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
-}
+const canvasStore = useCanvasStore()
 </script>

src/components/graph/selectionToolbox/ColorPickerButton.spec.ts

@@ -7,8 +7,8 @@ import { createI18n } from 'vue-i18n'
 
 // Import after mocks
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 
 // Mock the litegraph module
 vi.mock('@/lib/litegraph/src/litegraph', async () => {
@@ -95,6 +95,17 @@ describe('ColorPickerButton', () => {
     expect(wrapper.find('button').exists()).toBe(true)
   })
 
+  it('should not render when nothing is selected', () => {
+    // Keep selectedItems empty
+    canvasStore.selectedItems = []
+    const wrapper = createWrapper()
+    // The button exists but is hidden with v-show
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.find('button').attributes('style')).toContain(
+      'display: none'
+    )
+  })
+
   it('should toggle color picker visibility on button click', async () => {
     canvasStore.selectedItems = [{ type: 'LGraphNode' } as any]
     const wrapper = createWrapper()

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -1,25 +1,21 @@
 <template>
   <div class="relative">
     <Button
+      v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
       v-tooltip.top="{
         value: localizedCurrentColorName ?? t('color.noColor'),
-        showDelay: 1000
+        showDelay: 512
       }"
-      data-testid="color-picker-button"
       severity="secondary"
       text
       @click="() => (showColorPicker = !showColorPicker)"
     >
-      <div class="flex items-center gap-1 px-0">
-        <i
-          class="w-4 h-4 pi pi-circle-fill"
-          :style="{ color: currentColor ?? '' }"
-        />
-        <i
-          class="w-4 h-4 pi pi-chevron-down py-1"
-          :style="{ fontSize: '0.5rem' }"
-        />
-      </div>
+      <template #icon>
+        <div class="flex items-center gap-1">
+          <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
+          <i class="pi pi-chevron-down" :style="{ fontSize: '0.5rem' }" />
+        </div>
+      </template>
     </Button>
     <div
       v-if="showColorPicker"
@@ -50,20 +46,17 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
-import { Raw, computed, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import type {
-  ColorOption as CanvasColorOption,
-  Positionable
-} from '@/lib/litegraph/src/litegraph'
+import type { ColorOption as CanvasColorOption } from '@/lib/litegraph/src/litegraph'
 import {
   LGraphCanvas,
   LiteGraph,
   isColorable
 } from '@/lib/litegraph/src/litegraph'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useWorkflowStore } from '@/stores/workflowStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { getItemsColorOption } from '@/utils/litegraphUtil'
@@ -147,17 +140,13 @@ const localizedCurrentColorName = computed(() => {
   )
   return colorOption?.localizedName ?? NO_COLOR_OPTION.localizedName
 })
-const updateColorSelectionFromNode = (
-  newSelectedItems: Raw<Positionable[]>
-) => {
-  showColorPicker.value = false
-  selectedColorOption.value = null
-  currentColorOption.value = getItemsColorOption(newSelectedItems)
-}
+
 watch(
   () => canvasStore.selectedItems,
   (newSelectedItems) => {
-    updateColorSelectionFromNode(newSelectedItems)
+    showColorPicker.value = false
+    selectedColorOption.value = null
+    currentColorOption.value = getItemsColorOption(newSelectedItems)
   },
   { immediate: true }
 )

src/components/graph/selectionToolbox/ConvertToSubgraphButton.vue

@@ -6,12 +6,11 @@
       showDelay: 1000
     }"
     severity="secondary"
-    data-testid="convert-to-subgraph-button"
     text
     @click="() => commandStore.execute('Comfy.Graph.UnpackSubgraph')"
   >
     <template #icon>
-      <i-lucide:expand class="w-4 h-4" />
+      <i-lucide:expand />
     </template>
   </Button>
   <Button
@@ -21,7 +20,6 @@
       showDelay: 1000
     }"
     severity="secondary"
-    data-testid="convert-to-subgraph-button"
     text
     @click="() => commandStore.execute('Comfy.Graph.ConvertToSubgraph')"
   >
@@ -36,15 +34,25 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useSelectionState } from '@/composables/graph/useSelectionState'
+import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-const { isSingleSubgraph, hasAnySelection } = useSelectionState()
+const canvasStore = useCanvasStore()
 
-const isUnpackVisible = isSingleSubgraph
-const isConvertVisible = computed(
-  () => hasAnySelection.value && !isSingleSubgraph.value
-)
+const isUnpackVisible = computed(() => {
+  return (
+    canvasStore.selectedItems?.length === 1 &&
+    canvasStore.selectedItems[0] instanceof SubgraphNode
+  )
+})
+const isConvertVisible = computed(() => {
+  return (
+    canvasStore.groupSelected ||
+    canvasStore.rerouteSelected ||
+    canvasStore.nodeSelected
+  )
+})
 </script>

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -5,11 +5,9 @@
       value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
       showDelay: 1000
     }"
-    severity="secondary"
+    severity="danger"
     text
-    icon-class="w-4 h-4"
     icon="pi pi-trash"
-    data-testid="delete-button"
     @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
   />
 </template>
@@ -19,15 +17,14 @@ import Button from 'primevue/button'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useSelectionState } from '@/composables/graph/useSelectionState'
-import { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
-const { selectedItems } = useSelectionState()
+const canvasStore = useCanvasStore()
 
 const isDeletable = computed(() =>
-  selectedItems.value.some((x: Positionable) => x.removable !== false)
+  canvasStore.selectedItems.some((x) => x.removable !== false)
 )
 </script>

src/components/graph/selectionToolbox/ExecuteButton.spec.ts

@@ -1,128 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import Tooltip from 'primevue/tooltip'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCommandStore } from '@/stores/commandStore'
-
-// Mock the stores
-vi.mock('@/renderer/core/canvas/canvasStore', () => ({
-  useCanvasStore: vi.fn()
-}))
-
-vi.mock('@/stores/commandStore', () => ({
-  useCommandStore: vi.fn()
-}))
-
-// Mock the utils
-vi.mock('@/utils/litegraphUtil', () => ({
-  isLGraphNode: vi.fn((node) => !!node?.type)
-}))
-
-vi.mock('@/utils/nodeFilterUtil', () => ({
-  isOutputNode: vi.fn((node) => !!node?.constructor?.nodeData?.output_node)
-}))
-
-// Mock the composables
-vi.mock('@/composables/graph/useSelectionState', () => ({
-  useSelectionState: vi.fn(() => ({
-    selectedNodes: {
-      value: []
-    }
-  }))
-}))
-
-describe('ExecuteButton', () => {
-  let mockCanvas: any
-  let mockCanvasStore: any
-  let mockCommandStore: any
-  let mockSelectedNodes: any[]
-
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-      en: {
-        selectionToolbox: {
-          executeButton: {
-            tooltip: 'Execute selected nodes'
-          }
-        }
-      }
-    }
-  })
-
-  beforeEach(async () => {
-    setActivePinia(createPinia())
-
-    // Reset mocks
-    mockCanvas = {
-      setDirty: vi.fn()
-    }
-
-    mockSelectedNodes = []
-
-    mockCanvasStore = {
-      getCanvas: vi.fn(() => mockCanvas),
-      selectedItems: []
-    }
-
-    mockCommandStore = {
-      execute: vi.fn()
-    }
-
-    // Setup store mocks
-    vi.mocked(useCanvasStore).mockReturnValue(mockCanvasStore as any)
-    vi.mocked(useCommandStore).mockReturnValue(mockCommandStore as any)
-
-    // Update the useSelectionState mock
-    const { useSelectionState } = vi.mocked(
-      await import('@/composables/graph/useSelectionState')
-    )
-    useSelectionState.mockReturnValue({
-      selectedNodes: {
-        value: mockSelectedNodes
-      }
-    } as any)
-
-    vi.clearAllMocks()
-  })
-
-  const mountComponent = () => {
-    return mount(ExecuteButton, {
-      global: {
-        plugins: [i18n, PrimeVue],
-        directives: { tooltip: Tooltip },
-        stubs: {
-          'i-lucide:play': { template: '<div class="play-icon" />' }
-        }
-      }
-    })
-  }
-
-  describe('Rendering', () => {
-    it('should be able to render', () => {
-      const wrapper = mountComponent()
-      const button = wrapper.find('button')
-      expect(button.exists()).toBe(true)
-    })
-  })
-
-  describe('Click Handler', () => {
-    it('should execute Comfy.QueueSelectedOutputNodes command on click', async () => {
-      const wrapper = mountComponent()
-      const button = wrapper.find('button')
-
-      await button.trigger('click')
-
-      expect(mockCommandStore.execute).toHaveBeenCalledWith(
-        'Comfy.QueueSelectedOutputNodes'
-      )
-      expect(mockCommandStore.execute).toHaveBeenCalledTimes(1)
-    })
-  })
-})

src/components/graph/selectionToolbox/ExecuteButton.vue

@@ -1,16 +1,20 @@
 <template>
   <Button
+    v-show="canvasStore.nodeSelected"
     v-tooltip.top="{
-      value: t('selectionToolbox.executeButton.tooltip'),
+      value: isDisabled
+        ? t('selectionToolbox.executeButton.disabledTooltip')
+        : t('selectionToolbox.executeButton.tooltip'),
       showDelay: 1000
     }"
-    class="dark-theme:bg-[#0B8CE9] bg-[#31B9F4] size-8 !p-0"
+    :severity="isDisabled ? 'secondary' : 'success'"
     text
+    :disabled="isDisabled"
     @mouseenter="() => handleMouseEnter()"
     @mouseleave="() => handleMouseLeave()"
     @click="handleClick"
   >
-    <i-lucide:play class="fill-path-white w-4 h-4" />
+    <i-lucide:play />
   </Button>
 </template>
 
@@ -19,24 +23,26 @@ import Button from 'primevue/button'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useSelectionState } from '@/composables/graph/useSelectionState'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
-import { isOutputNode } from '@/utils/nodeFilterUtil'
 
 const { t } = useI18n()
-const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
-const { selectedNodes } = useSelectionState()
+const commandStore = useCommandStore()
 
 const canvas = canvasStore.getCanvas()
 const buttonHovered = ref(false)
-const selectedOutputNodes = computed(() =>
-  selectedNodes.value.filter(isLGraphNode).filter(isOutputNode)
+const selectedOutputNodes = computed(
+  () =>
+    canvasStore.selectedItems.filter(
+      (item) => isLGraphNode(item) && item.constructor.nodeData?.output_node
+    ) as LGraphNode[]
 )
 
+const isDisabled = computed(() => selectedOutputNodes.value.length === 0)
+
 function outputNodeStokeStyle(this: LGraphNode) {
   if (
     this.selected &&
@@ -64,9 +70,3 @@ const handleClick = async () => {
   await commandStore.execute('Comfy.QueueSelectedOutputNodes')
 }
 </script>
-<style scoped>
-:deep.fill-path-white > path {
-  fill: white;
-  stroke: unset;
-}
-</style>

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -7,7 +7,6 @@
     }"
     severity="secondary"
     text
-    icon-class="w-4 h-4"
     :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
     @click="() => commandStore.execute(command.id)"
   />

src/components/graph/selectionToolbox/FrameNodes.vue

@@ -1,22 +0,0 @@
-<template>
-  <Button
-    v-tooltip.top="{
-      value: $t('g.frameNodes'),
-      showDelay: 1000
-    }"
-    class="frame-nodes-button"
-    text
-    severity="secondary"
-    @click="frameNodes"
-  >
-    <i-lucide:frame class="w-4 h-4" />
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-import { useFrameNodes } from '@/composables/graph/useFrameNodes'
-
-const { frameNodes } = useFrameNodes()
-</script>

src/components/graph/selectionToolbox/HelpButton.vue

@@ -0,0 +1,49 @@
+<template>
+  <Button
+    v-show="nodeDef"
+    v-tooltip.top="{
+      value: $t('g.help'),
+      showDelay: 1000
+    }"
+    class="help-button"
+    text
+    icon="pi pi-question-circle"
+    severity="secondary"
+    @click="showHelp"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { computed } from 'vue'
+
+import { useNodeLibrarySidebarTab } from '@/composables/sidebarTabs/useNodeLibrarySidebarTab'
+import { useCanvasStore } from '@/stores/graphStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+import { isLGraphNode } from '@/utils/litegraphUtil'
+
+const canvasStore = useCanvasStore()
+const nodeDefStore = useNodeDefStore()
+const sidebarTabStore = useSidebarTabStore()
+const nodeHelpStore = useNodeHelpStore()
+const { id: nodeLibraryTabId } = useNodeLibrarySidebarTab()
+
+const nodeDef = computed<ComfyNodeDefImpl | null>(() => {
+  if (canvasStore.selectedItems.length !== 1) return null
+  const item = canvasStore.selectedItems[0]
+  if (!isLGraphNode(item)) return null
+  return nodeDefStore.fromLGraphNode(item)
+})
+
+const showHelp = () => {
+  const def = nodeDef.value
+  if (!def) return
+  if (sidebarTabStore.activeSidebarTabId !== nodeLibraryTabId) {
+    sidebarTabStore.toggleSidebarTab(nodeLibraryTabId)
+  }
+  nodeHelpStore.openHelp(def)
+}
+</script>

src/components/graph/selectionToolbox/InfoButton.spec.ts

@@ -1,149 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { createPinia, setActivePinia } from 'pinia'
-import PrimeVue from 'primevue/config'
-import Tooltip from 'primevue/tooltip'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createI18n } from 'vue-i18n'
-
-import InfoButton from '@/components/graph/selectionToolbox/InfoButton.vue'
-// NOTE: The component import must come after mocks so they take effect.
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useNodeDefStore } from '@/stores/nodeDefStore'
-
-const mockLGraphNode = {
-  type: 'TestNode',
-  title: 'Test Node'
-}
-
-vi.mock('@/utils/litegraphUtil', () => ({
-  isLGraphNode: vi.fn(() => true)
-}))
-
-vi.mock('@/composables/sidebarTabs/useNodeLibrarySidebarTab', () => ({
-  useNodeLibrarySidebarTab: () => ({
-    id: 'node-library'
-  })
-}))
-
-const openHelpMock = vi.fn()
-const closeHelpMock = vi.fn()
-const nodeHelpState: { currentHelpNode: any } = { currentHelpNode: null }
-vi.mock('@/stores/workspace/nodeHelpStore', () => ({
-  useNodeHelpStore: () => ({
-    openHelp: (def: any) => {
-      nodeHelpState.currentHelpNode = def
-      openHelpMock(def)
-    },
-    closeHelp: () => {
-      nodeHelpState.currentHelpNode = null
-      closeHelpMock()
-    },
-    get currentHelpNode() {
-      return nodeHelpState.currentHelpNode
-    },
-    get isHelpOpen() {
-      return nodeHelpState.currentHelpNode !== null
-    }
-  })
-}))
-
-const toggleSidebarTabMock = vi.fn((id: string) => {
-  sidebarState.activeSidebarTabId =
-    sidebarState.activeSidebarTabId === id ? null : id
-})
-const sidebarState: { activeSidebarTabId: string | null } = {
-  activeSidebarTabId: 'other-tab'
-}
-vi.mock('@/stores/workspace/sidebarTabStore', () => ({
-  useSidebarTabStore: () => ({
-    get activeSidebarTabId() {
-      return sidebarState.activeSidebarTabId
-    },
-    toggleSidebarTab: toggleSidebarTabMock
-  })
-}))
-
-describe('InfoButton', () => {
-  let canvasStore: ReturnType<typeof useCanvasStore>
-  let nodeDefStore: ReturnType<typeof useNodeDefStore>
-
-  const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    messages: {
-      en: {
-        g: {
-          info: 'Node Info'
-        }
-      }
-    }
-  })
-
-  beforeEach(() => {
-    setActivePinia(createPinia())
-    canvasStore = useCanvasStore()
-    nodeDefStore = useNodeDefStore()
-
-    vi.clearAllMocks()
-  })
-
-  const mountComponent = () => {
-    return mount(InfoButton, {
-      global: {
-        plugins: [i18n, PrimeVue],
-        directives: { tooltip: Tooltip },
-        stubs: {
-          'i-lucide:info': true,
-          Button: {
-            template:
-              '<button class="help-button" severity="secondary"><slot /></button>',
-            props: ['severity', 'text', 'class'],
-            emits: ['click']
-          }
-        }
-      }
-    })
-  }
-
-  it('should handle click without errors', async () => {
-    const mockNodeDef = {
-      nodePath: 'test/node',
-      display_name: 'Test Node'
-    }
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-    await button.trigger('click')
-    expect(button.exists()).toBe(true)
-  })
-
-  it('should have correct CSS classes', () => {
-    const mockNodeDef = {
-      nodePath: 'test/node',
-      display_name: 'Test Node'
-    }
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
-
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-
-    expect(button.classes()).toContain('help-button')
-    expect(button.attributes('severity')).toBe('secondary')
-  })
-
-  it('should have correct tooltip', () => {
-    const mockNodeDef = {
-      nodePath: 'test/node',
-      display_name: 'Test Node'
-    }
-    canvasStore.selectedItems = [mockLGraphNode] as any
-    vi.spyOn(nodeDefStore, 'fromLGraphNode').mockReturnValue(mockNodeDef as any)
-
-    const wrapper = mountComponent()
-    const button = wrapper.find('button')
-
-    expect(button.exists()).toBe(true)
-  })
-})

src/components/graph/selectionToolbox/InfoButton.vue

@@ -1,22 +0,0 @@
-<template>
-  <Button
-    v-tooltip.top="{
-      value: $t('g.info'),
-      showDelay: 1000
-    }"
-    data-testid="info-button"
-    text
-    severity="secondary"
-    @click="toggleHelp"
-  >
-    <i-lucide:info class="w-4 h-4" />
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-import { useSelectionState } from '@/composables/graph/useSelectionState'
-
-const { showNodeHelp: toggleHelp } = useSelectionState()
-</script>

src/components/graph/selectionToolbox/Load3DViewerButton.vue

@@ -1,5 +1,6 @@
 <template>
   <Button
+    v-show="is3DNode"
     v-tooltip.top="{
       value: t('commands.Comfy_3DViewer_Open3DViewer.label'),
       showDelay: 1000
@@ -7,18 +8,29 @@
     severity="secondary"
     text
     icon="pi pi-pencil"
-    icon-class="w-4 h-4"
     @click="open3DViewer"
   />
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { computed } from 'vue'
 
 import { t } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
+import { isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
 
 const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+
+const is3DNode = computed(() => {
+  const enable3DViewer = useSettingStore().get('Comfy.Load3D.3DViewerEnable')
+  const nodes = canvasStore.selectedItems.filter(isLGraphNode)
+
+  return nodes.length === 1 && nodes.some(isLoad3dNode) && enable3DViewer
+})
 
 const open3DViewer = () => {
   void commandStore.execute('Comfy.3DViewer.Open3DViewer')

src/components/graph/selectionToolbox/MaskEditorButton.vue

@@ -7,21 +7,28 @@
     }"
     severity="secondary"
     text
+    icon="pi pi-pencil"
     @click="openMaskEditor"
-  >
-    <i-comfy:mask class="!w-4 !h-4" />
-  </Button>
+  />
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
+import { computed } from 'vue'
 
-import { useSelectionState } from '@/composables/graph/useSelectionState'
 import { t } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { isImageNode, isLGraphNode } from '@/utils/litegraphUtil'
 
 const commandStore = useCommandStore()
-const { isSingleImageNode } = useSelectionState()
+const canvasStore = useCanvasStore()
+
+const isSingleImageNode = computed(() => {
+  const { selectedItems } = canvasStore
+  const item = selectedItems[0]
+  return selectedItems.length === 1 && isLGraphNode(item) && isImageNode(item)
+})
 
 const openMaskEditor = () => {
   void commandStore.execute('Comfy.MaskEditor.OpenMaskEditor')

src/components/graph/selectionToolbox/MenuOptionItem.vue

@@ -1,59 +0,0 @@
-<template>
-  <div
-    v-if="option.type === 'divider'"
-    class="h-px bg-gray-200 dark-theme:bg-zinc-700 my-1"
-  />
-  <div
-    v-else
-    role="button"
-    class="flex items-center gap-2 px-3 py-1.5 text-sm text-left hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer"
-    @click="handleClick"
-  >
-    <i v-if="option.icon" :class="[option.icon, 'w-4 h-4']" />
-    <span class="flex-1">{{ option.label }}</span>
-    <span v-if="option.shortcut" class="text-xs opacity-60">
-      {{ option.shortcut }}
-    </span>
-    <i-lucide:chevron-right
-      v-if="option.hasSubmenu"
-      :size="14"
-      class="opacity-60"
-    />
-    <Badge
-      v-if="option.badge"
-      :severity="option.badge === 'new' ? 'info' : 'secondary'"
-      :value="t(option.badge)"
-      :class="{
-        'bg-[#31B9F4] dark-theme:bg-[#0B8CE9] rounded-4xl':
-          option.badge === 'new',
-        'bg-[#9C9EAB] dark-theme:bg-[#000] rounded-4xl':
-          option.badge === 'deprecated',
-        'text-white uppercase text-[9px] h-4 px-1 gap-2.5': true
-      }"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Badge from 'primevue/badge'
-import { useI18n } from 'vue-i18n'
-
-import type { MenuOption } from '@/composables/graph/useMoreOptionsMenu'
-
-const { t } = useI18n()
-
-interface Props {
-  option: MenuOption
-}
-
-interface Emits {
-  (e: 'click', option: MenuOption, event: Event): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const handleClick = (event: Event) => {
-  emit('click', props.option, event)
-}
-</script>

src/components/graph/selectionToolbox/MoreOptions.vue

@@ -1,316 +0,0 @@
-<template>
-  <div class="relative inline-flex items-center">
-    <Button
-      ref="buttonRef"
-      v-tooltip.top="{
-        value: $t('g.moreOptions'),
-        showDelay: 1000
-      }"
-      data-testid="more-options-button"
-      text
-      class="h-8 w-8 px-0"
-      severity="secondary"
-      @click="toggle"
-    >
-      <i-lucide:more-vertical class="w-4 h-4" />
-    </Button>
-
-    <Popover
-      ref="popover"
-      :append-to="'body'"
-      :auto-z-index="true"
-      :base-z-index="1000"
-      :dismissable="true"
-      :close-on-escape="true"
-      unstyled
-      :pt="pt"
-      @show="onPopoverShow"
-      @hide="onPopoverHide"
-    >
-      <div class="flex flex-col p-2 min-w-48">
-        <MenuOptionItem
-          v-for="(option, index) in menuOptions"
-          :key="option.label || `divider-${index}`"
-          :option="option"
-          @click="handleOptionClick"
-        />
-      </div>
-    </Popover>
-
-    <SubmenuPopover
-      v-for="option in menuOptionsWithSubmenu"
-      :key="`submenu-${option.label}`"
-      :ref="(el) => setSubmenuRef(`submenu-${option.label}`, el)"
-      :option="option"
-      :container-styles="containerStyles"
-      @submenu-click="handleSubmenuClick"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import Popover from 'primevue/popover'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
-import {
-  forceCloseMoreOptionsSignal,
-  moreOptionsOpen,
-  moreOptionsRestorePending,
-  restoreMoreOptionsSignal
-} from '@/composables/canvas/useSelectionToolboxPosition'
-import {
-  type MenuOption,
-  type SubMenuOption,
-  useMoreOptionsMenu
-} from '@/composables/graph/useMoreOptionsMenu'
-import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
-import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
-
-import MenuOptionItem from './MenuOptionItem.vue'
-import SubmenuPopover from './SubmenuPopover.vue'
-
-const popover = ref<InstanceType<typeof Popover>>()
-const buttonRef = ref<InstanceType<typeof Button> | HTMLElement | null>(null)
-// Track open state ourselves so we can restore after drag/move
-const isOpen = ref(false)
-const wasOpenBeforeHide = ref(false)
-// Track why the popover was hidden so we only auto-reopen after drag.
-type HideReason = 'manual' | 'drag'
-const lastProgrammaticHideReason = ref<HideReason | null>(null)
-const submenuRefs = ref<Record<string, InstanceType<typeof SubmenuPopover>>>({})
-const currentSubmenu = ref<string | null>(null)
-
-const { menuOptions, menuOptionsWithSubmenu, bump } = useMoreOptionsMenu()
-const { toggleSubmenu, hideAllSubmenus } = useSubmenuPositioning()
-
-const minimap = useMinimap()
-const containerStyles = minimap.containerStyles
-
-function getButtonEl(): HTMLElement | null {
-  const el = (buttonRef.value as any)?.$el || buttonRef.value
-  return el instanceof HTMLElement ? el : null
-}
-
-let lastLogTs = 0
-const LOG_INTERVAL = 120 // ms
-let overlayElCache: HTMLElement | null = null
-
-function resolveOverlayEl(): HTMLElement | null {
-  // Prefer cached element (cleared on hide)
-  if (overlayElCache && overlayElCache.isConnected) return overlayElCache
-  // PrimeVue Popover root element (component instance $el)
-  const direct = (popover.value as any)?.$el
-  if (direct instanceof HTMLElement) {
-    overlayElCache = direct
-    return direct
-  }
-  // Fallback: try to locate a recent popover root near the button (same z-index class + absolute)
-  const btn = getButtonEl()
-  if (btn) {
-    const candidates = Array.from(
-      document.querySelectorAll('div.absolute.z-50')
-    ) as HTMLElement[]
-    // Heuristic: pick the one closest (vertically) below the button
-    const rect = btn.getBoundingClientRect()
-    let best: { el: HTMLElement; dist: number } | null = null
-    for (const el of candidates) {
-      const r = el.getBoundingClientRect()
-      const dist = Math.abs(r.top - rect.bottom)
-      if (!best || dist < best.dist) best = { el, dist }
-    }
-    if (best && best.el) {
-      overlayElCache = best.el
-      return best.el
-    }
-  }
-  return null
-}
-
-const repositionPopover = () => {
-  if (!isOpen.value) return
-  const btn = getButtonEl()
-  const overlayEl = resolveOverlayEl()
-  if (!btn || !overlayEl) return
-  const rect = btn.getBoundingClientRect()
-  const marginY = 8 // tailwind mt-2 ~ 0.5rem = 8px
-  const left = rect.left + rect.width / 2
-  const top = rect.bottom + marginY
-  try {
-    overlayEl.style.position = 'fixed'
-    overlayEl.style.left = `${left}px`
-    overlayEl.style.top = `${top}px`
-    overlayEl.style.transform = 'translate(-50%, 0)'
-  } catch (e) {
-    console.warn('[MoreOptions] Failed to set overlay style', e)
-    return
-  }
-  const now = performance.now()
-  if (now - lastLogTs > LOG_INTERVAL) {
-    lastLogTs = now
-  }
-}
-
-const { startSync, stopSync } = useCanvasTransformSync(repositionPopover, {
-  autoStart: false
-})
-
-function openPopover(triggerEvent?: Event): boolean {
-  const el = getButtonEl()
-  if (!el || !el.isConnected) return false
-  bump()
-  popover.value?.show(triggerEvent ?? new Event('reopen'), el)
-  isOpen.value = true
-  moreOptionsOpen.value = true
-  moreOptionsRestorePending.value = false
-  return true
-}
-
-function closePopover(reason: HideReason = 'manual') {
-  lastProgrammaticHideReason.value = reason
-  popover.value?.hide()
-  isOpen.value = false
-  moreOptionsOpen.value = false
-  stopSync()
-  hideAll()
-  if (reason !== 'drag') {
-    wasOpenBeforeHide.value = false
-    // Natural hide: cancel any pending restore
-    moreOptionsRestorePending.value = false
-  } else {
-    if (!moreOptionsRestorePending.value) {
-      wasOpenBeforeHide.value = true
-      moreOptionsRestorePending.value = true
-    }
-  }
-}
-
-let restoreAttempts = 0
-function attemptRestore() {
-  if (isOpen.value) return
-  if (!wasOpenBeforeHide.value && !moreOptionsRestorePending.value) return
-  // Try immediately
-  if (openPopover(new Event('reopen'))) {
-    wasOpenBeforeHide.value = false
-    restoreAttempts = 0
-    return
-  }
-  // Defer with limited retries (layout / mount race)
-  if (restoreAttempts >= 5) return
-  restoreAttempts++
-  requestAnimationFrame(() => attemptRestore())
-}
-
-const toggle = (event: Event) => {
-  if (isOpen.value) closePopover('manual')
-  else openPopover(event)
-}
-
-const hide = (reason: HideReason = 'manual') => closePopover(reason)
-
-const hideAll = () => {
-  hideAllSubmenus(
-    menuOptionsWithSubmenu.value,
-    submenuRefs.value,
-    currentSubmenu
-  )
-}
-
-const handleOptionClick = (option: MenuOption, event: Event) => {
-  if (!option.hasSubmenu && option.action) {
-    option.action()
-    hide()
-  } else if (option.hasSubmenu) {
-    event.stopPropagation()
-    const submenuKey = `submenu-${option.label}`
-    const submenu = submenuRefs.value[submenuKey]
-
-    if (submenu) {
-      void toggleSubmenu(
-        option,
-        event,
-        submenu,
-        currentSubmenu,
-        menuOptionsWithSubmenu.value,
-        submenuRefs.value
-      )
-    }
-  }
-}
-
-const handleSubmenuClick = (subOption: SubMenuOption) => {
-  subOption.action()
-  hide('manual')
-}
-
-const setSubmenuRef = (key: string, el: any) => {
-  if (el) {
-    submenuRefs.value[key] = el
-  } else {
-    delete submenuRefs.value[key]
-  }
-}
-
-const pt = computed(() => ({
-  root: {
-    class: 'absolute z-50 w-[300px] px-[12]'
-  },
-  content: {
-    class: [
-      'mt-2 text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
-    ],
-    style: {
-      backgroundColor: containerStyles.value.backgroundColor
-    }
-  }
-}))
-
-// Distinguish outside click (PrimeVue dismiss) from programmatic hides.
-const onPopoverShow = () => {
-  overlayElCache = resolveOverlayEl()
-  // Delay first reposition slightly to ensure DOM fully painted
-  requestAnimationFrame(() => repositionPopover())
-  startSync()
-}
-
-const onPopoverHide = () => {
-  if (lastProgrammaticHideReason.value == null) {
-    isOpen.value = false
-    hideAll()
-    wasOpenBeforeHide.value = false
-    moreOptionsOpen.value = false
-    moreOptionsRestorePending.value = false
-  }
-  overlayElCache = null
-  stopSync()
-  lastProgrammaticHideReason.value = null
-}
-
-// Watch for forced close (drag start)
-watch(
-  () => forceCloseMoreOptionsSignal.value,
-  () => {
-    if (isOpen.value) hide('drag')
-    else
-      wasOpenBeforeHide.value =
-        wasOpenBeforeHide.value || moreOptionsRestorePending.value
-  }
-)
-
-watch(
-  () => restoreMoreOptionsSignal.value,
-  () => attemptRestore()
-)
-
-onMounted(() => {
-  if (moreOptionsRestorePending.value && !isOpen.value) {
-    requestAnimationFrame(() => attemptRestore())
-  }
-})
-
-onUnmounted(() => {
-  stopSync()
-})
-</script>

src/components/graph/selectionToolbox/PinButton.vue

@@ -0,0 +1,25 @@
+<template>
+  <Button
+    v-show="canvasStore.nodeSelected || canvasStore.groupSelected"
+    v-tooltip.top="{
+      value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="pi pi-thumbtack"
+    @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
+
+const { t } = useI18n()
+const commandStore = useCommandStore()
+const canvasStore = useCanvasStore()
+</script>

src/components/graph/selectionToolbox/RefreshSelectionButton.vue

@@ -1,22 +1,17 @@
 <template>
   <Button
     v-show="isRefreshable"
-    v-tooltip.top="t('g.refreshNode')"
-    severity="secondary"
+    severity="info"
     text
-    data-testid="refresh-button"
+    icon="pi pi-refresh"
     @click="refreshSelected"
-  >
-    <i-lucide:refresh-cw class="w-4 h-4" />
-  </Button>
+  />
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { useI18n } from 'vue-i18n'
 
 import { useRefreshableSelection } from '@/composables/useRefreshableSelection'
 
-const { t } = useI18n()
 const { isRefreshable, refreshSelected } = useRefreshableSelection()
 </script>

src/components/graph/selectionToolbox/SaveToSubgraphLibrary.vue

@@ -21,8 +21,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { SubgraphNode } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -1,127 +0,0 @@
-<template>
-  <Popover
-    ref="popover"
-    :auto-z-index="true"
-    :base-z-index="1100"
-    :dismissable="true"
-    :close-on-escape="true"
-    unstyled
-    :pt="submenuPt"
-  >
-    <div
-      :class="
-        isColorSubmenu
-          ? 'flex flex-col gap-1 p-2'
-          : 'flex flex-col p-2 min-w-40'
-      "
-    >
-      <div
-        v-for="subOption in option.submenu"
-        :key="subOption.label"
-        :class="
-          isColorSubmenu
-            ? 'w-7 h-7 flex items-center justify-center hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
-            : 'flex items-center gap-2 px-3 py-1.5 text-sm hover:bg-gray-100 dark-theme:hover:bg-zinc-700 rounded cursor-pointer'
-        "
-        :title="subOption.label"
-        @click="handleSubmenuClick(subOption)"
-      >
-        <div
-          v-if="subOption.color"
-          class="w-5 h-5 rounded-full border border-gray-300 dark-theme:border-zinc-600"
-          :style="{ backgroundColor: subOption.color }"
-        />
-        <template v-else-if="!subOption.color">
-          <i-lucide:check
-            v-if="isShapeSelected(subOption)"
-            class="w-4 h-4 flex-shrink-0"
-          />
-          <div v-else class="w-4 flex-shrink-0" />
-          <span>{{ subOption.label }}</span>
-        </template>
-      </div>
-    </div>
-  </Popover>
-</template>
-
-<script setup lang="ts">
-import Popover from 'primevue/popover'
-import { computed, ref } from 'vue'
-
-import {
-  type MenuOption,
-  type SubMenuOption
-} from '@/composables/graph/useMoreOptionsMenu'
-import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
-
-interface Props {
-  option: MenuOption
-  containerStyles: {
-    width: string
-    height: string
-    backgroundColor: string
-    border: string
-    borderRadius: string
-  }
-}
-
-interface Emits {
-  (e: 'submenu-click', subOption: SubMenuOption): void
-}
-
-const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
-
-const { getCurrentShape } = useNodeCustomization()
-
-const popover = ref<InstanceType<typeof Popover>>()
-
-const show = (event: Event, target?: HTMLElement) => {
-  popover.value?.show(event, target)
-}
-
-const hide = () => {
-  popover.value?.hide()
-}
-
-defineExpose({
-  show,
-  hide
-})
-
-const handleSubmenuClick = (subOption: SubMenuOption) => {
-  emit('submenu-click', subOption)
-}
-
-const isShapeSelected = (subOption: SubMenuOption): boolean => {
-  if (subOption.color) return false
-
-  const currentShape = getCurrentShape()
-  if (!currentShape) return false
-
-  return currentShape.localizedName === subOption.label
-}
-
-const isColorSubmenu = computed(() => {
-  return (
-    props.option.submenu &&
-    props.option.submenu.length > 0 &&
-    props.option.submenu.every((item) => item.color && !item.icon)
-  )
-})
-
-const submenuPt = computed(() => ({
-  root: {
-    class: 'absolute z-[60]'
-  },
-  content: {
-    class: [
-      'text-neutral dark-theme:text-white rounded-lg',
-      'shadow-lg border border-zinc-200 dark-theme:border-zinc-700'
-    ],
-    style: {
-      backgroundColor: props.containerStyles.backgroundColor
-    }
-  }
-}))
-</script>

src/components/graph/selectionToolbox/VerticalDivider.vue

@@ -1,3 +0,0 @@
-<template>
-  <div class="h-6 w-px bg-gray-300/10 dark-theme:bg-gray-600/10 self-center" />
-</template>

src/components/graph/widgets/DomWidget.vue

@@ -23,10 +23,10 @@ import { CSSProperties, computed, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { useDomClipping } from '@/composables/element/useDomClipping'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { isComponentWidget, isDOMWidget } from '@/scripts/domWidget'
 import { DomWidgetState } from '@/stores/domWidgetStore'
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const { widgetState } = defineProps<{
   widgetState: DomWidgetState

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -143,10 +143,10 @@ import { useI18n } from 'vue-i18n'
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/composables/useManagerState'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { type ReleaseNote } from '@/platform/updates/common/releaseService'
-import { useReleaseStore } from '@/platform/updates/common/releaseStore'
+import { type ReleaseNote } from '@/services/releaseService'
 import { useCommandStore } from '@/stores/commandStore'
+import { useReleaseStore } from '@/stores/releaseStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'

src/components/helpcenter/ReleaseNotificationToast.vue

@@ -48,11 +48,10 @@
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { ReleaseNote } from '@/services/releaseService'
+import { useReleaseStore } from '@/stores/releaseStore'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 
-import type { ReleaseNote } from '../common/releaseService'
-import { useReleaseStore } from '../common/releaseStore'
-
 const { locale } = useI18n()
 const releaseStore = useReleaseStore()
 

src/components/helpcenter/WhatsNewPopup.vue

@@ -68,11 +68,10 @@ import { marked } from 'marked'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { ReleaseNote } from '@/services/releaseService'
+import { useReleaseStore } from '@/stores/releaseStore'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 
-import type { ReleaseNote } from '../common/releaseService'
-import { useReleaseStore } from '../common/releaseStore'
-
 const { locale, t } = useI18n()
 const releaseStore = useReleaseStore()