fix(node-help): refetch on locale or node change with last-write-wins guard

- Watch both currentHelpNode and i18n.locale
- Add requestId guard to ignore stale fetches
- Keep UX responsive without debounce

This eliminates the help locale race and updates content when switching language while help is open.

.gitignore

@@ -22,6 +22,8 @@ dist-ssr
 *.local
 # Claude configuration
 .claude/*.local.json
+.claude/*.local.md
+.claude/*.local.txt
 CLAUDE.local.md
 
 # Editor directories and files

browser_tests/README.md

@@ -56,14 +56,6 @@ TEST_COMFYUI_DIR=/path/to/your/ComfyUI
 
 ### Common Setup Issues
 
-**Most tests require the new menu system** - Add to your test:
-
-```typescript
-test.beforeEach(async ({ comfyPage }) => {
-  await comfyPage.setSetting('Comfy.UseNewMenu', 'Top')
-})
-```
-
 ### Release API Mocking
 
 By default, all tests mock the release API (`api.comfy.org/releases`) to prevent release notification popups from interfering with test execution. This is necessary because the release notifications can appear over UI elements and block test interactions.

browser_tests/fixtures/ComfyPage.ts

@@ -1643,7 +1643,7 @@ export const comfyPageFixture = base.extend<{
 
     try {
       await comfyPage.setupSettings({
-        'Comfy.UseNewMenu': 'Disabled',
+        'Comfy.UseNewMenu': 'Top',
         // Hide canvas menu/info/selection toolbox by default.
         'Comfy.Graph.CanvasInfo': false,
         'Comfy.Graph.CanvasMenu': false,

browser_tests/fixtures/VueNodeHelpers.ts

@@ -22,6 +22,13 @@ export class VueNodeHelpers {
     )
   }
 
+  /**
+   * Get locator for a Vue node by the node's title (displayed name in the header)
+   */
+  getNodeByTitle(title: string): Locator {
+    return this.page.locator(`[data-node-id]`).filter({ hasText: title })
+  }
+
   /**
    * Get total count of Vue nodes in the DOM
    */

browser_tests/tests/backgroundImageUpload.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Background Image Upload', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Reset the background image setting before each test

browser_tests/tests/changeTracker.spec.ts

@@ -15,6 +15,10 @@ async function afterChange(comfyPage: ComfyPage) {
   })
 }
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Change Tracker', () => {
   test.describe('Undo/Redo', () => {
     test.beforeEach(async ({ comfyPage }) => {

browser_tests/tests/chatHistory.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 interface ChatHistoryEntry {
   prompt: string
   response: string

browser_tests/tests/colorPalette.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import type { Palette } from '../../src/schemas/colorPaletteSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 const customColorPalettes: Record<string, Palette> = {
   obsidian: {
     version: 102,

browser_tests/tests/commands.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Keybindings', () => {
   test('Should execute command', async ({ comfyPage }) => {
     await comfyPage.registerCommand('TestCommand', () => {

browser_tests/tests/copyPaste.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Copy Paste', () => {
   test('Can copy and paste node', async ({ comfyPage }) => {
     await comfyPage.clickEmptyLatentNode()

browser_tests/tests/dialog.spec.ts

@@ -4,6 +4,10 @@ import { expect } from '@playwright/test'
 import type { Keybinding } from '../../src/schemas/keyBindingSchema'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Load workflow warning', () => {
   test('Should display a warning when loading a workflow with missing nodes', async ({
     comfyPage

browser_tests/tests/domWidget.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('DOM Widget', () => {
   test('Collapsed multiline textarea is not visible', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/collapsed_multiline')

browser_tests/tests/execution.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Execution', () => {
   test('Report error on unconnected slot', async ({ comfyPage }) => {
     await comfyPage.disconnectEdge()

browser_tests/tests/featureFlags.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Feature Flags', () => {
   test('Client and server exchange feature flags on connection', async ({
     comfyPage

browser_tests/tests/graph.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Graph', () => {
   // Should be able to fix link input slot index after swap the input order
   // Ref: https://github.com/Comfy-Org/ComfyUI_frontend/issues/3348

browser_tests/tests/graphCanvasMenu.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Graph Canvas Menu', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Set link render mode to spline to make sure it's not affected by other tests'

browser_tests/tests/groupNode.spec.ts

@@ -4,6 +4,10 @@ import type { ComfyPage } from '../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Group Node', () => {
   test.describe('Node library sidebar', () => {
     const groupNodeName = 'DefautWorkflowGroupNode'

browser_tests/tests/interaction.spec.ts

@@ -9,6 +9,10 @@ import {
 } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Item Interaction', () => {
   test('Can select/delete all items', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('groups/mixed_graph_items')

browser_tests/tests/keybindings.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Keybindings', () => {
   test('Should not trigger non-modifier keybinding when typing in input fields', async ({
     comfyPage

browser_tests/tests/litegraphEvent.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 function listenForEvent(): Promise<Event> {
   return new Promise<Event>((resolve) => {
     document.addEventListener('litegraph:canvas', (e) => resolve(e), {

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Load Workflow in Media', () => {
   const fileNames = [
     'workflow.webp',

browser_tests/tests/lodThreshold.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('LOD Threshold', () => {
   test('Should switch to low quality mode at correct zoom threshold', async ({
     comfyPage

browser_tests/tests/nodeBadge.spec.ts

@@ -4,6 +4,10 @@ import type { ComfyApp } from '../../src/scripts/app'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Node Badge', () => {
   test('Can add badge', async ({ comfyPage }) => {
     await comfyPage.page.evaluate(() => {

browser_tests/tests/nodeDisplay.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 // If an input is optional by node definition, it should be shown as
 // a hollow circle no matter what shape it was defined in the workflow JSON.
 test.describe('Optional input', () => {

browser_tests/tests/nodeSearchBox.spec.ts

@@ -3,6 +3,10 @@ import {
   comfyPageFixture as test
 } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Node search box', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.LinkRelease.Action', 'search box')

browser_tests/tests/noteNode.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Note Node', () => {
   test('Can load node nodes', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('nodes/note_nodes')

browser_tests/tests/primitiveNode.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 import type { NodeReference } from '../fixtures/utils/litegraphUtils'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Primitive Node', () => {
   test('Can load with correct size', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('primitive/primitive_node')

browser_tests/tests/rerouteNode.spec.ts

@@ -40,6 +40,7 @@ test.describe('Reroute Node', () => {
 
 test.describe('LiteGraph Native Reroute Node', () => {
   test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
     await comfyPage.setSetting('LiteGraph.Reroute.SplineOffset', 80)
   })
 

browser_tests/tests/rightClickMenu.spec.ts

@@ -3,6 +3,10 @@ import { expect } from '@playwright/test'
 import { NodeBadgeMode } from '../../src/types/nodeSource'
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Canvas Right Click Menu', () => {
   test('Can add node', async ({ comfyPage }) => {
     await comfyPage.rightClickCanvas()

browser_tests/tests/selectionToolbox.spec.ts

@@ -4,6 +4,9 @@ import { comfyPageFixture } from '../fixtures/ComfyPage'
 
 const test = comfyPageFixture
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
 const BLUE_COLOR = 'rgb(51, 51, 85)'
 const RED_COLOR = 'rgb(85, 51, 51)'
 

browser_tests/tests/selectionToolboxSubmenus.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Selection Toolbox - More Options Submenus', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.Canvas.SelectionToolbox', true)

browser_tests/tests/useSettingSearch.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Settings Search functionality', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Register test settings to verify hidden/deprecated filtering

browser_tests/tests/versionMismatchWarnings.spec.ts

@@ -106,6 +106,11 @@ test.describe('Version Mismatch Warnings', () => {
     const dismissButton = warningToast.getByRole('button', { name: 'Close' })
     await dismissButton.click()
 
+    // Wait for the dismissed state to be persisted
+    await comfyPage.page.waitForFunction(
+      () => !!localStorage.getItem('comfy.versionMismatch.dismissals')
+    )
+
     // Reload the page, keeping local storage
     await comfyPage.setup({ clearStorage: false })
 

browser_tests/tests/vueNodes/deleteKeyInteraction.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Vue Nodes - Delete Key Interaction', () => {
   test.beforeEach(async ({ comfyPage }) => {
     // Enable Vue nodes rendering

browser_tests/tests/vueNodes/lod.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Vue Nodes - LOD', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)

browser_tests/tests/vueNodes/nodeInteractions/selectionState.spec.ts

@@ -3,6 +3,10 @@ import {
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Vue Node Selection', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)

browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts

@@ -15,11 +15,10 @@ test.describe('Vue Node Bypass', () => {
   test('should allow toggling bypass on a selected node with hotkey', async ({
     comfyPage
   }) => {
-    const checkpointNode = comfyPage.page.locator('[data-node-id]').filter({
-      hasText: 'Load Checkpoint'
-    })
-    await checkpointNode.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('Load Checkpoint').click()
     await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
     await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
 
     await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
@@ -29,15 +28,12 @@ test.describe('Vue Node Bypass', () => {
   test('should allow toggling bypass on multiple selected nodes with hotkey', async ({
     comfyPage
   }) => {
-    const checkpointNode = comfyPage.page.locator('[data-node-id]').filter({
-      hasText: 'Load Checkpoint'
-    })
-    const ksamplerNode = comfyPage.page.locator('[data-node-id]').filter({
-      hasText: 'KSampler'
-    })
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
 
-    await checkpointNode.getByText('Load Checkpoint').click()
-    await ksamplerNode.getByText('KSampler').click({ modifiers: ['Control'] })
     await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
     await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
     await expect(ksamplerNode).toHaveClass(BYPASS_CLASS)

browser_tests/tests/vueNodes/nodeStates/error.spec.ts

@@ -0,0 +1,32 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const ERROR_CLASS = /border-error/
+
+test.describe('Vue Node Error', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should display error state when node is missing (node from workflow is not installed)', async ({
+    comfyPage
+  }) => {
+    await comfyPage.setup()
+    await comfyPage.loadWorkflow('missing/missing_nodes')
+
+    // Close missing nodes warning dialog
+    await comfyPage.page.getByRole('button', { name: 'Close' }).click()
+    await comfyPage.page.waitForSelector('.comfy-missing-nodes', {
+      state: 'hidden'
+    })
+
+    // Expect error state on missing unknown node
+    const unknownNode = comfyPage.page.locator('[data-node-id]').filter({
+      hasText: 'UNKNOWN NODE'
+    })
+    await expect(unknownNode).toHaveClass(ERROR_CLASS)
+  })
+})

browser_tests/tests/vueNodes/nodeStates/mute.spec.ts

@@ -0,0 +1,45 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../../fixtures/ComfyPage'
+
+const MUTE_HOTKEY = 'Control+m'
+const MUTE_CLASS = /opacity-50/
+
+test.describe('Vue Node Mute', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test('should allow toggling mute on a selected node with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+  })
+
+  test('should allow toggling mute on multiple selected nodes with hotkey', async ({
+    comfyPage
+  }) => {
+    await comfyPage.page.getByText('Load Checkpoint').click()
+    await comfyPage.page.getByText('KSampler').click({ modifiers: ['Control'] })
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const ksamplerNode = comfyPage.vueNodes.getNodeByTitle('KSampler')
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).toHaveClass(MUTE_CLASS)
+    await expect(ksamplerNode).toHaveClass(MUTE_CLASS)
+
+    await comfyPage.page.keyboard.press(MUTE_HOTKEY)
+    await expect(checkpointNode).not.toHaveClass(MUTE_CLASS)
+    await expect(ksamplerNode).not.toHaveClass(MUTE_CLASS)
+  })
+})

browser_tests/tests/widget.spec.ts

@@ -2,6 +2,10 @@ import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '../fixtures/ComfyPage'
 
+test.beforeEach(async ({ comfyPage }) => {
+  await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+})
+
 test.describe('Combo text widget', () => {
   test('Truncates text when resized', async ({ comfyPage }) => {
     await comfyPage.resizeLoadCheckpointNode(0.2, 1)
@@ -318,6 +322,9 @@ test.describe('Animated image widget', () => {
 test.describe('Load audio widget', () => {
   test('Can load audio', async ({ comfyPage }) => {
     await comfyPage.loadWorkflow('widgets/load_audio_widget')
+    // Wait for the audio widget to be rendered in the DOM
+    await comfyPage.page.waitForSelector('.comfy-audio', { state: 'attached' })
+    await comfyPage.nextFrame()
     await expect(comfyPage.canvas).toHaveScreenshot('load_audio_widget.png')
   })
 })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.28.1",
+  "version": "1.28.2",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -18,10 +18,11 @@
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
     "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
+    "test:all": "nx run test",
     "test:browser": "npx nx e2e",
-    "test:unit": "nx run test tests-ui/tests",
     "test:component": "nx run test src/components/",
     "test:litegraph": "vitest run --config vitest.litegraph.config.ts",
+    "test:unit": "nx run test tests-ui/tests",
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky || true && git config blame.ignoreRevsFile .git-blame-ignore-revs || true",
     "preview": "nx preview",
@@ -106,6 +107,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "0.4.73-0",
+    "@comfyorg/tailwind-utils": "workspace:*",
     "@iconify/json": "^2.2.380",
     "@primeuix/forms": "0.0.2",
     "@primeuix/styled": "0.3.2",
@@ -129,7 +131,6 @@
     "algoliasearch": "^5.21.0",
     "axios": "^1.8.2",
     "chart.js": "^4.5.0",
-    "clsx": "^2.1.1",
     "dompurify": "^3.2.5",
     "dotenv": "^16.4.5",
     "es-toolkit": "^1.39.9",
@@ -147,7 +148,6 @@
     "primevue": "^4.2.5",
     "reka-ui": "^2.5.0",
     "semver": "^7.7.2",
-    "tailwind-merge": "^3.3.1",
     "three": "^0.170.0",
     "tiptap-markdown": "^0.8.10",
     "vue": "^3.5.13",

packages/tailwind-utils/README.md

@@ -0,0 +1,31 @@
+# @comfyorg/tailwind-utils
+
+Shared Tailwind CSS utility functions for the ComfyUI Frontend monorepo.
+
+## Usage
+
+The `cn` function combines `clsx` and `tailwind-merge` to handle conditional classes and resolve Tailwind conflicts.
+
+```typescript
+import { cn } from '@comfyorg/tailwind-utils'
+
+// Use with conditional classes (object)
+<div :class="cn('transition-opacity', { 'opacity-75': !isHovered })" />
+
+// Use with conditional classes (ternary)
+<button
+  :class="cn('px-4 py-2', isActive ? 'bg-blue-500' : 'bg-gray-500')"
+/>
+```
+
+## Installation
+
+This package is part of the ComfyUI Frontend monorepo and is automatically available to all workspace packages.
+
+```json
+{
+  "dependencies": {
+    "@comfyorg/tailwind-utils": "workspace:*"
+  }
+}
+```

packages/tailwind-utils/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@comfyorg/tailwind-utils",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Shared Tailwind CSS utilities for ComfyUI Frontend",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "nx": {
+    "tags": [
+      "scope:shared",
+      "type:util"
+    ]
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  }
+}

packages/tailwind-utils/src/index.ts

@@ -0,0 +1,8 @@
+import clsx, { type ClassArray } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export type { ClassValue } from 'clsx'
+
+export function cn(...inputs: ClassArray) {
+  return twMerge(clsx(inputs))
+}

packages/tailwind-utils/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"]
+}

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@comfyorg/comfyui-electron-types':
         specifier: 0.4.73-0
         version: 0.4.73-0
+      '@comfyorg/tailwind-utils':
+        specifier: workspace:*
+        version: link:packages/tailwind-utils
       '@iconify/json':
         specifier: ^2.2.380
         version: 2.2.380
@@ -86,9 +89,6 @@ importers:
       chart.js:
         specifier: ^4.5.0
         version: 4.5.0
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
       dompurify:
         specifier: ^3.2.5
         version: 3.2.5
@@ -140,9 +140,6 @@ importers:
       semver:
         specifier: ^7.7.2
         version: 7.7.2
-      tailwind-merge:
-        specifier: ^3.3.1
-        version: 3.3.1
       three:
         specifier: ^0.170.0
         version: 0.170.0
@@ -355,6 +352,19 @@ importers:
         specifier: ^3.24.1
         version: 3.24.1(zod@3.24.1)
 
+  packages/tailwind-utils:
+    dependencies:
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      tailwind-merge:
+        specifier: ^2.2.0
+        version: 2.6.0
+    devDependencies:
+      typescript:
+        specifier: ^5.4.5
+        version: 5.9.2
+
 packages:
 
   '@adobe/css-tools@4.4.3':
@@ -5888,8 +5898,8 @@ packages:
     resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  tailwind-merge@3.3.1:
-    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
+  tailwind-merge@2.6.0:
+    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
   tailwindcss-primeui@0.6.1:
     resolution: {integrity: sha512-T69Rylcrmnt8zy9ik+qZvsLuRIrS9/k6rYJSIgZ1trnbEzGDDQSCIdmfyZknevqiHwpSJHSmQ9XT2C+S/hJY4A==}
@@ -6323,6 +6333,9 @@ packages:
   vue-component-type-helpers@3.0.7:
     resolution: {integrity: sha512-TvyUcFXmjZcXUvU+r1MOyn4/vv4iF+tPwg5Ig33l/FJ3myZkxeQpzzQMLMFWcQAjr6Xs7BRwVy/TwbmNZUA/4w==}
 
+  vue-component-type-helpers@3.0.8:
+    resolution: {integrity: sha512-WyR30Eq15Y/+odrUUMax6FmPbZwAp/HnC7qgR1r3lVFAcqwQ4wUoV79Mbh4SxDy3NiqDa+G4TOKD5xXSgBHo5A==}
+
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
     engines: {node: '>=12'}
@@ -8879,7 +8892,7 @@ snapshots:
       storybook: 9.1.6(@testing-library/dom@10.4.1)(prettier@3.3.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2))
       type-fest: 2.19.0
       vue: 3.5.13(typescript@5.9.2)
-      vue-component-type-helpers: 3.0.7
+      vue-component-type-helpers: 3.0.8
 
   '@swc/helpers@0.5.17':
     dependencies:
@@ -13075,7 +13088,7 @@ snapshots:
     dependencies:
       '@pkgr/core': 0.2.9
 
-  tailwind-merge@3.3.1: {}
+  tailwind-merge@2.6.0: {}
 
   tailwindcss-primeui@0.6.1(tailwindcss@4.1.12):
     dependencies:
@@ -13545,6 +13558,8 @@ snapshots:
 
   vue-component-type-helpers@3.0.7: {}
 
+  vue-component-type-helpers@3.0.8: {}
+
   vue-demi@0.14.10(vue@3.5.13(typescript@5.9.2)):
     dependencies:
       vue: 3.5.13(typescript@5.9.2)

src/App.vue

@@ -17,8 +17,8 @@ import { computed, onMounted } from 'vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
-import { useConflictDetection } from './composables/useConflictDetection'
 import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()

src/assets/css/style.css

@@ -89,6 +89,8 @@
   --color-sand-200: #d6cfc2;
   --color-sand-300: #888682;
 
+  --color-pure-white: #ffffff;
+
   --color-slate-100: #9c9eab;
   --color-slate-200: #9fa2bd;
   --color-slate-300: #5b5e7d;
@@ -970,10 +972,9 @@ audio.comfy-audio.empty-audio-widget {
   border-radius: 0;
   contain: layout style;
   transition: none;
- 
 }
 
-.isLOD .lg-node > * {
+.isLOD .lg-node-widgets {
   pointer-events: none;
 }
 

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

@@ -1,5 +1,8 @@
 <template>
-  <div ref="rootEl" class="relative overflow-hidden h-full w-full bg-black">
+  <div
+    ref="rootEl"
+    class="relative overflow-hidden h-full w-full bg-neutral-900"
+  >
     <div class="p-terminal rounded-none h-full w-full p-2">
       <div ref="terminalEl" class="h-full terminal-host" />
     </div>
@@ -98,12 +101,13 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+@reference '../../../../assets/css/style.css';
+
 :deep(.p-terminal) .xterm {
-  overflow-x: auto;
+  @apply overflow-hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  background-color: black;
-  overflow-y: hidden;
+  @apply bg-neutral-900 overflow-hidden;
 }
 </style>

src/components/common/StartupDisplay.vue

@@ -0,0 +1,71 @@
+<template>
+  <div :class="wrapperClass">
+    <div class="grid grid-rows-2 gap-8">
+      <!-- Top container: Logo -->
+      <div class="flex items-end justify-center">
+        <img
+          src="/assets/images/comfy-brand-mark.svg"
+          :alt="t('g.logoAlt')"
+          class="w-60"
+        />
+      </div>
+      <!-- Bottom container: Progress and text -->
+      <div class="flex flex-col items-center justify-center gap-4">
+        <ProgressBar
+          v-if="!hideProgress"
+          :mode="progressMode"
+          :value="progressPercentage ?? 0"
+          :show-value="false"
+          class="w-90 h-2 mt-8"
+          :pt="{ value: { class: 'bg-brand-yellow' } }"
+        />
+        <h1 v-if="title" class="font-inter font-bold text-3xl text-neutral-300">
+          {{ title }}
+        </h1>
+        <p v-if="statusText" class="text-lg text-neutral-400">
+          {{ statusText }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProgressBar from 'primevue/progressbar'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+/** Props for the StartupDisplay component */
+interface StartupDisplayProps {
+  /** Progress: 0-100 for determinate, undefined for indeterminate */
+  progressPercentage?: number
+  /** Main title text */
+  title?: string
+  /** Status text shown below the title */
+  statusText?: string
+  /** Hide the progress bar */
+  hideProgress?: boolean
+  /** Use full screen wrapper (default: true) */
+  fullScreen?: boolean
+}
+
+const {
+  progressPercentage,
+  title,
+  statusText,
+  hideProgress = false,
+  fullScreen = true
+} = defineProps<StartupDisplayProps>()
+
+const progressMode = computed(() =>
+  progressPercentage === undefined ? 'indeterminate' : 'determinate'
+)
+
+const wrapperClass = computed(() =>
+  fullScreen
+    ? 'flex items-center justify-center min-h-screen'
+    : 'flex items-center justify-center'
+)
+</script>

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -58,11 +58,11 @@ import { useI18n } from 'vue-i18n'
 
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
-import { useMissingNodes } from '@/composables/nodePack/useMissingNodes'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogStore } from '@/stores/dialogStore'
 import type { MissingNodeType } from '@/types/comfy'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
+import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'

src/components/graph/GraphCanvas.vue

@@ -165,7 +165,7 @@ const { shouldRenderVueNodes } = useVueFeatureFlags()
 
 // Vue node system
 const vueNodeLifecycle = useVueNodeLifecycle()
-const viewportCulling = useViewportCulling()
+const { handleTransformUpdate } = useViewportCulling()
 
 const handleVueNodeLifecycleReset = async () => {
   if (shouldRenderVueNodes.value) {
@@ -187,8 +187,9 @@ watch(
   }
 )
 
-const allNodes = viewportCulling.allNodes
-const handleTransformUpdate = viewportCulling.handleTransformUpdate
+const allNodes = computed(() =>
+  Array.from(vueNodeLifecycle.vueNodeData.value.values())
+)
 
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
@@ -307,13 +308,27 @@ watch(
       removeSlotError(node)
       const nodeErrors = lastNodeErrors?.[node.id]
       if (!nodeErrors) continue
-      for (const error of nodeErrors.errors) {
-        if (error.extra_info && error.extra_info.input_name) {
-          const inputIndex = node.findInputSlot(error.extra_info.input_name)
+
+      const validErrors = nodeErrors.errors.filter(
+        (error) => error.extra_info?.input_name !== undefined
+      )
+      const slotErrorsChanged =
+        validErrors.length > 0 &&
+        validErrors.some((error) => {
+          const inputName = error.extra_info!.input_name!
+          const inputIndex = node.findInputSlot(inputName)
           if (inputIndex !== -1) {
             node.inputs[inputIndex].hasErrors = true
+            return true
           }
-        }
+          return false
+        })
+
+      // Trigger Vue node data update if slot errors changed
+      if (slotErrorsChanged && comfyApp.graph.onTrigger) {
+        comfyApp.graph.onTrigger('node:slot-errors:changed', {
+          nodeId: node.id
+        })
       }
     }
 

src/components/graph/SelectionToolbox.spec.ts

@@ -450,9 +450,9 @@ describe('SelectionToolbox', () => {
   describe('Event Handling', () => {
     it('should handle wheel events', async () => {
       const mockCanvasInteractions = vi.mocked(useCanvasInteractions)
-      const handleWheelSpy = vi.fn()
+      const forwardEventToCanvasSpy = vi.fn()
       mockCanvasInteractions.mockReturnValue({
-        handleWheel: handleWheelSpy
+        forwardEventToCanvas: forwardEventToCanvasSpy
       } as any)
 
       const mockExtensionService = vi.mocked(useExtensionService)
@@ -467,7 +467,7 @@ describe('SelectionToolbox', () => {
       const panel = wrapper.find('.panel')
       await panel.trigger('wheel')
 
-      expect(handleWheelSpy).toHaveBeenCalled()
+      expect(forwardEventToCanvasSpy).toHaveBeenCalled()
     })
   })
 

src/components/graph/SelectionToolbox.vue

@@ -13,7 +13,7 @@
           header: 'hidden',
           content: 'p-1 h-10 flex flex-row gap-1'
         }"
-        @wheel="canvasInteractions.handleWheel"
+        @wheel="canvasInteractions.forwardEventToCanvas"
       >
         <DeleteButton v-if="showDelete" />
         <VerticalDivider v-if="showInfoButton && showAnyPrimaryActions" />

src/components/graph/selectionToolbox/MoreOptions.vue

@@ -26,6 +26,7 @@
       :pt="pt"
       @show="onPopoverShow"
       @hide="onPopoverHide"
+      @wheel="canvasInteractions.forwardEventToCanvas"
     >
       <div class="flex flex-col p-2 min-w-48">
         <MenuOptionItem
@@ -49,11 +50,11 @@
 </template>
 
 <script setup lang="ts">
+import { useRafFn } from '@vueuse/core'
 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,
@@ -66,6 +67,7 @@ import {
   useMoreOptionsMenu
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useSubmenuPositioning } from '@/composables/graph/useSubmenuPositioning'
+import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 
 import MenuOptionItem from './MenuOptionItem.vue'
@@ -84,7 +86,7 @@ const currentSubmenu = ref<string | null>(null)
 
 const { menuOptions, menuOptionsWithSubmenu, bump } = useMoreOptionsMenu()
 const { toggleSubmenu, hideAllSubmenus } = useSubmenuPositioning()
-
+const canvasInteractions = useCanvasInteractions()
 const minimap = useMinimap()
 const containerStyles = minimap.containerStyles
 
@@ -152,9 +154,7 @@ const repositionPopover = () => {
   }
 }
 
-const { startSync, stopSync } = useCanvasTransformSync(repositionPopover, {
-  autoStart: false
-})
+const { resume: startSync, pause: stopSync } = useRafFn(repositionPopover)
 
 function openPopover(triggerEvent?: Event): boolean {
   const el = getButtonEl()

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -141,13 +141,13 @@ import {
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
-import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
 import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
 
@@ -168,7 +168,8 @@ const EXTERNAL_LINKS = {
   DOCS: 'https://docs.comfy.org/',
   DISCORD: 'https://www.comfy.org/discord',
   GITHUB: 'https://github.com/comfyanonymous/ComfyUI',
-  DESKTOP_GUIDE: 'https://comfyorg.notion.site/',
+  DESKTOP_GUIDE_WINDOWS: 'https://docs.comfy.org/installation/desktop/windows',
+  DESKTOP_GUIDE_MACOS: 'https://docs.comfy.org/installation/desktop/macos',
   UPDATE_GUIDE: 'https://docs.comfy.org/installation/update_comfyui'
 } as const
 
@@ -222,7 +223,11 @@ const moreItems = computed<MenuItem[]>(() => {
       label: t('helpCenter.desktopUserGuide'),
       visible: isElectron(),
       action: () => {
-        openExternalLink(EXTERNAL_LINKS.DESKTOP_GUIDE)
+        const docsUrl =
+          electronAPI().getPlatform() === 'darwin'
+            ? EXTERNAL_LINKS.DESKTOP_GUIDE_MACOS
+            : EXTERNAL_LINKS.DESKTOP_GUIDE_WINDOWS
+        openExternalLink(docsUrl)
         emit('close')
       }
     },

src/components/install/DesktopSettingsConfiguration.vue

@@ -10,14 +10,14 @@
       </p>
     </div>
 
-    <div class="flex flex-col bg-neutral-800 p-4 rounded-lg">
+    <div class="flex flex-col bg-neutral-800 p-4 rounded-lg text-sm">
       <!-- Auto Update Setting -->
       <div class="flex items-center gap-4">
         <div class="flex-1">
           <h3 class="text-lg font-medium text-neutral-100">
             {{ $t('install.settings.autoUpdate') }}
           </h3>
-          <p class="text-sm text-neutral-400 mt-1">
+          <p class="text-neutral-400 mt-1">
             {{ $t('install.settings.autoUpdateDescription') }}
           </p>
         </div>
@@ -32,14 +32,10 @@
           <h3 class="text-lg font-medium text-neutral-100">
             {{ $t('install.settings.allowMetrics') }}
           </h3>
-          <p class="text-sm text-neutral-400 mt-1">
+          <p class="text-neutral-400">
             {{ $t('install.settings.allowMetricsDescription') }}
           </p>
-          <a
-            href="#"
-            class="text-sm text-blue-400 hover:text-blue-300 mt-1 inline-block"
-            @click.prevent="showMetricsInfo"
-          >
+          <a href="#" @click.prevent="showMetricsInfo">
             {{ $t('install.settings.learnMoreAboutData') }}
           </a>
         </div>
@@ -51,7 +47,9 @@
     <Dialog
       v-model:visible="showDialog"
       modal
+      dismissable-mask
       :header="$t('install.settings.dataCollectionDialog.title')"
+      class="select-none"
     >
       <div class="text-neutral-300">
         <h4 class="font-medium mb-2">
@@ -110,11 +108,7 @@
         </ul>
 
         <div class="mt-4">
-          <a
-            href="https://comfy.org/privacy"
-            target="_blank"
-            class="text-blue-400 hover:text-blue-300 underline"
-          >
+          <a href="https://comfy.org/privacy" target="_blank">
             {{ $t('install.settings.dataCollectionDialog.viewFullPolicy') }}
           </a>
         </div>

src/components/install/GpuPicker.vue

@@ -1,130 +1,66 @@
 <template>
-  <div class="flex flex-col gap-6 w-[600px] h-[30rem] select-none">
-    <!-- Installation Path Section -->
-    <div class="grow flex flex-col gap-4 text-neutral-300">
-      <h2 class="text-2xl font-semibold text-neutral-100">
-        {{ $t('install.gpuSelection.selectGpu') }}
-      </h2>
+  <div
+    class="grid grid-rows-[1fr_auto_auto_1fr] w-full max-w-3xl mx-auto h-[40rem] select-none"
+  >
+    <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+      {{ $t('install.gpuPicker.title') }}
+    </h2>
 
-      <p class="m-1 text-neutral-400">
-        {{ $t('install.gpuSelection.selectGpuDescription') }}:
-      </p>
+    <!-- GPU Selection buttons - takes up remaining space and centers content -->
+    <div class="flex-1 flex gap-8 justify-center items-center">
+      <!-- Apple Metal / NVIDIA -->
+      <HardwareOption
+        v-if="platform === 'darwin'"
+        :image-path="'/assets/images/apple-mps-logo.png'"
+        placeholder-text="Apple Metal"
+        subtitle="Apple Metal"
+        :value="'mps'"
+        :selected="selected === 'mps'"
+        :recommended="true"
+        @click="pickGpu('mps')"
+      />
+      <HardwareOption
+        v-else
+        :image-path="'/assets/images/nvidia-logo-square.jpg'"
+        placeholder-text="NVIDIA"
+        :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
+        :value="'nvidia'"
+        :selected="selected === 'nvidia'"
+        :recommended="true"
+        @click="pickGpu('nvidia')"
+      />
+      <!-- CPU -->
+      <HardwareOption
+        placeholder-text="CPU"
+        :subtitle="$t('install.gpuPicker.cpuSubtitle')"
+        :value="'cpu'"
+        :selected="selected === 'cpu'"
+        @click="pickGpu('cpu')"
+      />
+      <!-- Manual Install -->
+      <HardwareOption
+        placeholder-text="Manual Install"
+        :subtitle="$t('install.gpuPicker.manualSubtitle')"
+        :value="'unsupported'"
+        :selected="selected === 'unsupported'"
+        @click="pickGpu('unsupported')"
+      />
+    </div>
 
-      <!-- GPU Selection buttons -->
-      <div
-        class="flex gap-2 text-center transition-opacity"
-        :class="{ selected: selected }"
-      >
-        <!-- NVIDIA -->
-        <div
-          v-if="platform !== 'darwin'"
-          class="gpu-button"
-          :class="{ selected: selected === 'nvidia' }"
-          role="button"
-          @click="pickGpu('nvidia')"
-        >
-          <img
-            class="m-12"
-            alt="NVIDIA logo"
-            width="196"
-            height="32"
-            src="/assets/images/nvidia-logo.svg"
-          />
-        </div>
-        <!-- MPS -->
-        <div
-          v-if="platform === 'darwin'"
-          class="gpu-button"
-          :class="{ selected: selected === 'mps' }"
-          role="button"
-          @click="pickGpu('mps')"
-        >
-          <img
-            class="rounded-lg hover-brighten"
-            alt="Apple Metal Performance Shaders Logo"
-            width="292"
-            ratio
-            src="/assets/images/apple-mps-logo.png"
-          />
-        </div>
-        <!-- Manual configuration -->
-        <div
-          class="gpu-button"
-          :class="{ selected: selected === 'unsupported' }"
-          role="button"
-          @click="pickGpu('unsupported')"
-        >
-          <img
-            class="m-12"
-            alt="Manual configuration"
-            width="196"
-            src="/assets/images/manual-configuration.svg"
-          />
-        </div>
-      </div>
-
-      <!-- Details on selected GPU -->
-      <p v-if="selected === 'nvidia'" class="m-1">
-        <Tag icon="pi pi-check" severity="success" :value="'CUDA'" />
-        {{ $t('install.gpuSelection.nvidiaDescription') }}
-      </p>
-
-      <p v-if="selected === 'mps'" class="m-1">
-        <Tag icon="pi pi-check" severity="success" :value="'MPS'" />
-        {{ $t('install.gpuSelection.mpsDescription') }}
-      </p>
-
-      <div v-if="selected === 'unsupported'" class="text-neutral-300">
-        <p class="m-1">
-          <Tag
-            icon="pi pi-exclamation-triangle"
-            severity="warn"
-            :value="t('icon.exclamation-triangle')"
-          />
-          {{ $t('install.gpuSelection.customSkipsPython') }}
-        </p>
-
-        <ul>
-          <li>
-            <strong>
-              {{ $t('install.gpuSelection.customComfyNeedsPython') }}
-            </strong>
-          </li>
-          <li>{{ $t('install.gpuSelection.customManualVenv') }}</li>
-          <li>{{ $t('install.gpuSelection.customInstallRequirements') }}</li>
-          <li>{{ $t('install.gpuSelection.customMayNotWork') }}</li>
-        </ul>
-      </div>
-
-      <div v-if="selected === 'cpu'">
-        <p class="m-1">
-          <Tag
-            icon="pi pi-exclamation-triangle"
-            severity="warn"
-            :value="t('icon.exclamation-triangle')"
-          />
-          {{ $t('install.gpuSelection.cpuModeDescription') }}
-        </p>
-        <p class="m-1">
-          {{ $t('install.gpuSelection.cpuModeDescription2') }}
-        </p>
+    <div class="pt-12 px-24 h-16">
+      <div v-show="showRecommendedBadge" class="flex items-center gap-2">
+        <Tag
+          :value="$t('install.gpuPicker.recommended')"
+          class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]"
+        />
+        <i-lucide:badge-check class="text-neutral-300 text-lg" />
       </div>
     </div>
 
-    <div
-      class="transition-opacity flex gap-3 h-0"
-      :class="{
-        'opacity-40': selected && selected !== 'cpu'
-      }"
-    >
-      <ToggleSwitch
-        v-model="cpuMode"
-        input-id="cpu-mode"
-        class="-translate-y-40"
-      />
-      <label for="cpu-mode" class="select-none">
-        {{ $t('install.gpuSelection.enableCpuMode') }}
-      </label>
+    <div class="text-neutral-300 px-24">
+      <p v-show="descriptionText" class="leading-relaxed">
+        {{ descriptionText }}
+      </p>
     </div>
   </div>
 </template>
@@ -132,20 +68,12 @@
 <script setup lang="ts">
 import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
 import Tag from 'primevue/tag'
-import ToggleSwitch from 'primevue/toggleswitch'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
+import HardwareOption from '@/components/install/HardwareOption.vue'
+import { st } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
-const { t } = useI18n()
-
-const cpuMode = computed({
-  get: () => selected.value === 'cpu',
-  set: (value) => {
-    selected.value = value ? 'cpu' : null
-  }
-})
 const selected = defineModel<TorchDeviceType | null>('device', {
   required: true
 })
@@ -153,55 +81,23 @@ const selected = defineModel<TorchDeviceType | null>('device', {
 const electron = electronAPI()
 const platform = electron.getPlatform()
 
-const pickGpu = (value: typeof selected.value) => {
-  const newValue = selected.value === value ? null : value
-  selected.value = newValue
+const showRecommendedBadge = computed(
+  () => selected.value === 'mps' || selected.value === 'nvidia'
+)
+
+const descriptionKeys = {
+  mps: 'appleMetal',
+  nvidia: 'nvidia',
+  cpu: 'cpu',
+  unsupported: 'manual'
+} as const
+
+const descriptionText = computed(() => {
+  const key = selected.value ? descriptionKeys[selected.value] : undefined
+  return st(`install.gpuPicker.${key}Description`, '')
+})
+
+const pickGpu = (value: TorchDeviceType) => {
+  selected.value = value
 }
 </script>
-
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.p-tag {
-  --p-tag-gap: 0.5rem;
-}
-
-.hover-brighten {
-  @apply transition-colors;
-  transition-property: filter, box-shadow;
-
-  &:hover {
-    filter: brightness(107%) contrast(105%);
-    box-shadow: 0 0 0.25rem #ffffff79;
-  }
-}
-.p-accordioncontent-content {
-  @apply bg-neutral-900 rounded-lg transition-colors;
-}
-
-div.selected {
-  .gpu-button:not(.selected) {
-    @apply opacity-50 hover:opacity-100;
-  }
-}
-
-.gpu-button {
-  @apply w-1/2 m-0 cursor-pointer rounded-lg flex flex-col items-center justify-around bg-neutral-800/50 hover:bg-neutral-800/75 transition-colors;
-
-  &.selected {
-    @apply opacity-100 bg-neutral-700/50 hover:bg-neutral-700/60;
-  }
-}
-
-.disabled {
-  @apply pointer-events-none opacity-40;
-}
-
-.p-card-header {
-  @apply text-center grow;
-}
-
-.p-card-body {
-  @apply text-center pt-0;
-}
-</style>

src/components/install/HardwareOption.stories.ts

@@ -0,0 +1,73 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import HardwareOption from './HardwareOption.vue'
+
+const meta: Meta<typeof HardwareOption> = {
+  title: 'Desktop/Components/HardwareOption',
+  component: HardwareOption,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+      values: [{ name: 'dark', value: '#1a1a1a' }]
+    }
+  },
+  argTypes: {
+    selected: { control: 'boolean' },
+    imagePath: { control: 'text' },
+    placeholderText: { control: 'text' },
+    subtitle: { control: 'text' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const AppleMetalSelected: Story = {
+  args: {
+    imagePath: '/assets/images/apple-mps-logo.png',
+    placeholderText: 'Apple Metal',
+    subtitle: 'Apple Metal',
+    value: 'mps',
+    selected: true
+  }
+}
+
+export const AppleMetalUnselected: Story = {
+  args: {
+    imagePath: '/assets/images/apple-mps-logo.png',
+    placeholderText: 'Apple Metal',
+    subtitle: 'Apple Metal',
+    value: 'mps',
+    selected: false
+  }
+}
+
+export const CPUOption: Story = {
+  args: {
+    placeholderText: 'CPU',
+    subtitle: 'Subtitle',
+    value: 'cpu',
+    selected: false
+  }
+}
+
+export const ManualInstall: Story = {
+  args: {
+    placeholderText: 'Manual Install',
+    subtitle: 'Subtitle',
+    value: 'unsupported',
+    selected: false
+  }
+}
+
+export const NvidiaSelected: Story = {
+  args: {
+    imagePath: '/assets/images/nvidia-logo-square.jpg',
+    placeholderText: 'NVIDIA',
+    subtitle: 'NVIDIA',
+    value: 'nvidia',
+    selected: true
+  }
+}

src/components/install/HardwareOption.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="relative">
+    <!-- Recommended Badge -->
+    <button
+      :class="
+        cn(
+          'hardware-option w-[170px] h-[190px] p-5 flex flex-col items-center rounded-3xl transition-all duration-200 bg-neutral-900/70 border-4',
+          selected ? 'border-solid border-brand-yellow' : 'border-transparent'
+        )
+      "
+      @click="$emit('click')"
+    >
+      <!-- Icon/Logo Area - Rounded square container -->
+      <div
+        class="icon-container w-[110px] h-[110px] shrink-0 rounded-2xl bg-neutral-800 flex items-center justify-center overflow-hidden"
+      >
+        <img
+          v-if="imagePath"
+          :src="imagePath"
+          :alt="placeholderText"
+          class="w-full h-full object-cover"
+          style="object-position: 57% center"
+          draggable="false"
+        />
+        <span v-else class="text-xl font-medium text-neutral-400">
+          {{ placeholderText }}
+        </span>
+      </div>
+
+      <!-- Text Content -->
+      <div v-if="subtitle" class="text-center mt-4">
+        <div class="text-sm text-neutral-500">{{ subtitle }}</div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+
+import { cn } from '@/utils/tailwindUtil'
+
+interface Props {
+  imagePath?: string
+  placeholderText: string
+  subtitle?: string
+  value: TorchDeviceType
+  selected?: boolean
+  recommended?: boolean
+}
+
+defineProps<Props>()
+
+defineEmits<{ click: [] }>()
+</script>

src/components/install/InstallFooter.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="grid grid-cols-[1fr_auto_1fr] items-center gap-4">
+    <!-- Back button -->
+    <Button
+      v-if="currentStep !== '1'"
+      :label="$t('g.back')"
+      severity="secondary"
+      icon="pi pi-arrow-left"
+      class="font-inter rounded-lg border-0 px-6 py-2 justify-self-start"
+      @click="$emit('previous')"
+    />
+    <div v-else></div>
+
+    <!-- Step indicators in center -->
+    <StepList class="flex justify-center items-center gap-3 select-none">
+      <Step value="1" :pt="stepPassthrough">
+        {{ $t('install.gpu') }}
+      </Step>
+      <Step value="2" :disabled="disableLocationStep" :pt="stepPassthrough">
+        {{ $t('install.installLocation') }}
+      </Step>
+      <Step value="3" :disabled="disableSettingsStep" :pt="stepPassthrough">
+        {{ $t('install.desktopSettings') }}
+      </Step>
+    </StepList>
+
+    <!-- Next/Install button -->
+    <Button
+      :label="currentStep !== '3' ? $t('g.next') : $t('g.install')"
+      class="px-8 py-2 bg-brand-yellow hover:bg-brand-yellow/90 font-inter rounded-lg border-0 transition-colors justify-self-end"
+      :pt="{
+        label: { class: 'text-neutral-900 font-inter font-black' }
+      }"
+      :disabled="!canProceed"
+      @click="currentStep !== '3' ? $emit('next') : $emit('install')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PassThrough } from '@primevue/core'
+import Button from 'primevue/button'
+import Step, { type StepPassThroughOptions } from 'primevue/step'
+import StepList from 'primevue/steplist'
+
+defineProps<{
+  /** Current step index as string ('1', '2', '3', '4') */
+  currentStep: string
+  /** Whether the user can proceed to the next step */
+  canProceed: boolean
+  /** Whether the location step should be disabled */
+  disableLocationStep: boolean
+  /** Whether the migration step should be disabled */
+  disableMigrationStep: boolean
+  /** Whether the settings step should be disabled */
+  disableSettingsStep: boolean
+}>()
+
+defineEmits<{
+  previous: []
+  next: []
+  install: []
+}>()
+
+const stepPassthrough: PassThrough<StepPassThroughOptions> = {
+  root: { class: 'flex-none p-0 m-0' },
+  header: ({ context }) => ({
+    class: [
+      'h-2.5 p-0 m-0 border-0 rounded-full transition-all duration-300',
+      context.active
+        ? 'bg-brand-yellow w-8 rounded-sm'
+        : 'bg-neutral-700 w-2.5',
+      context.disabled ? 'opacity-60 cursor-not-allowed' : ''
+    ].join(' ')
+  }),
+  number: { class: 'hidden' },
+  title: { class: 'hidden' }
+}
+</script>

src/components/install/InstallLocationPicker.stories.ts

@@ -0,0 +1,148 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+
+import InstallLocationPicker from './InstallLocationPicker.vue'
+
+const meta: Meta<typeof InstallLocationPicker> = {
+  title: 'Desktop/Components/InstallLocationPicker',
+  component: InstallLocationPicker,
+  parameters: {
+    layout: 'padded',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  },
+  decorators: [
+    () => {
+      // Mock electron API
+      ;(window as any).electronAPI = {
+        getSystemPaths: () =>
+          Promise.resolve({
+            defaultInstallPath: '/Users/username/ComfyUI'
+          }),
+        validateInstallPath: () =>
+          Promise.resolve({
+            isValid: true,
+            exists: false,
+            canWrite: true,
+            freeSpace: 100000000000,
+            requiredSpace: 10000000000,
+            isNonDefaultDrive: false
+          }),
+        validateComfyUISource: () =>
+          Promise.resolve({
+            isValid: true
+          }),
+        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
+      }
+      return { template: '<story />' }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default story with accordion expanded
+export const Default: Story = {
+  render: (args) => ({
+    components: { InstallLocationPicker },
+    setup() {
+      const installPath = ref('/Users/username/ComfyUI')
+      const pathError = ref('')
+      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
+      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
+
+      return {
+        args,
+        installPath,
+        pathError,
+        migrationSourcePath,
+        migrationItemIds
+      }
+    },
+    template: `
+      <div class="min-h-screen bg-neutral-950 p-8">
+        <InstallLocationPicker
+          v-model:installPath="installPath"
+          v-model:pathError="pathError"
+          v-model:migrationSourcePath="migrationSourcePath"
+          v-model:migrationItemIds="migrationItemIds"
+        />
+      </div>
+    `
+  })
+}
+
+// Story with different background to test transparency
+export const OnNeutral900: Story = {
+  render: (args) => ({
+    components: { InstallLocationPicker },
+    setup() {
+      const installPath = ref('/Users/username/ComfyUI')
+      const pathError = ref('')
+      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
+      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
+
+      return {
+        args,
+        installPath,
+        pathError,
+        migrationSourcePath,
+        migrationItemIds
+      }
+    },
+    template: `
+      <div class="min-h-screen bg-neutral-900 p-8">
+        <InstallLocationPicker
+          v-model:installPath="installPath"
+          v-model:pathError="pathError"
+          v-model:migrationSourcePath="migrationSourcePath"
+          v-model:migrationItemIds="migrationItemIds"
+        />
+      </div>
+    `
+  })
+}
+
+// Story with debug overlay showing background colors
+export const DebugBackgrounds: Story = {
+  render: (args) => ({
+    components: { InstallLocationPicker },
+    setup() {
+      const installPath = ref('/Users/username/ComfyUI')
+      const pathError = ref('')
+      const migrationSourcePath = ref('/Users/username/ComfyUI-old')
+      const migrationItemIds = ref<string[]>(['models', 'custom_nodes'])
+
+      return {
+        args,
+        installPath,
+        pathError,
+        migrationSourcePath,
+        migrationItemIds
+      }
+    },
+    template: `
+      <div class="min-h-screen bg-neutral-950 p-8 relative">
+        <div class="absolute top-4 right-4 text-white text-xs space-y-2 z-50">
+          <div>Parent bg: neutral-950 (#0a0a0a)</div>
+          <div>Accordion content: bg-transparent</div>
+          <div>Migration options: bg-transparent + p-4 rounded-lg</div>
+        </div>
+        <InstallLocationPicker
+          v-model:installPath="installPath"
+          v-model:pathError="pathError"
+          v-model:migrationSourcePath="migrationSourcePath"
+          v-model:migrationItemIds="migrationItemIds"
+        />
+      </div>
+    `
+  })
+}

src/components/install/InstallLocationPicker.vue

@@ -1,103 +1,215 @@
 <template>
-  <div class="flex flex-col gap-6 w-[600px]">
+  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
     <!-- Installation Path Section -->
-    <div class="flex flex-col gap-4">
-      <h2 class="text-2xl font-semibold text-neutral-100">
-        {{ $t('install.chooseInstallationLocation') }}
+    <div class="grow flex flex-col gap-6 text-neutral-300">
+      <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+        {{ $t('install.locationPicker.title') }}
       </h2>
 
-      <p class="text-neutral-400 my-0">
-        {{ $t('install.installLocationDescription') }}
+      <p class="text-center text-neutral-400 px-12">
+        {{ $t('install.locationPicker.subtitle') }}
       </p>
 
-      <div class="flex gap-2">
-        <IconField class="flex-1">
-          <InputText
-            v-model="installPath"
-            class="w-full"
-            :class="{ 'p-invalid': pathError }"
-            @update:model-value="validatePath"
-            @focus="onFocus"
-          />
-          <InputIcon
-            v-tooltip.top="$t('install.installLocationTooltip')"
-            class="pi pi-info-circle"
-          />
-        </IconField>
-        <Button icon="pi pi-folder" class="w-12" @click="browsePath" />
+      <!-- Path Input -->
+      <div class="flex gap-2 px-12">
+        <InputText
+          v-model="installPath"
+          :placeholder="$t('install.locationPicker.pathPlaceholder')"
+          class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
+          :class="{ 'p-invalid': pathError }"
+          @update:model-value="validatePath"
+          @focus="onFocus"
+        />
+        <Button
+          icon="pi pi-folder-open"
+          severity="secondary"
+          class="bg-neutral-700 hover:bg-neutral-600 border-0"
+          @click="browsePath"
+        />
       </div>
 
-      <Message v-if="pathError" severity="error" class="whitespace-pre-line">
-        {{ pathError }}
-      </Message>
-      <Message v-if="pathExists" severity="warn">
-        {{ $t('install.pathExists') }}
-      </Message>
-      <Message v-if="nonDefaultDrive" severity="warn">
-        {{ $t('install.nonDefaultDrive') }}
-      </Message>
-    </div>
-
-    <!-- System Paths Info -->
-    <div class="bg-neutral-800 p-4 rounded-lg">
-      <h3 class="text-lg font-medium mt-0 mb-3 text-neutral-100">
-        {{ $t('install.systemLocations') }}
-      </h3>
-      <div class="flex flex-col gap-2">
-        <div class="flex items-center gap-2">
-          <i class="pi pi-folder text-neutral-400" />
-          <span class="text-neutral-400">App Data:</span>
-          <span class="text-neutral-200">{{ appData }}</span>
-          <span
-            v-tooltip="$t('install.appDataLocationTooltip')"
-            class="pi pi-info-circle"
-          />
-        </div>
-        <div class="flex items-center gap-2">
-          <i class="pi pi-desktop text-neutral-400" />
-          <span class="text-neutral-400">App Path:</span>
-          <span class="text-neutral-200">{{ appPath }}</span>
-          <span
-            v-tooltip="$t('install.appPathLocationTooltip')"
-            class="pi pi-info-circle"
-          />
-        </div>
+      <!-- Error Messages -->
+      <div v-if="pathError || pathExists || nonDefaultDrive" class="px-12">
+        <Message
+          v-if="pathError"
+          severity="error"
+          class="whitespace-pre-line w-full"
+        >
+          {{ pathError }}
+        </Message>
+        <Message v-if="pathExists" severity="warn" class="w-full">
+          {{ $t('install.pathExists') }}
+        </Message>
+        <Message v-if="nonDefaultDrive" severity="warn" class="w-full">
+          {{ $t('install.nonDefaultDrive') }}
+        </Message>
       </div>
+
+      <!-- Collapsible Sections using PrimeVue Accordion -->
+      <Accordion
+        v-model:value="activeAccordionIndex"
+        :multiple="true"
+        class="location-picker-accordion"
+        :pt="{
+          root: 'bg-transparent border-0',
+          panel: {
+            root: 'border-0 mb-0'
+          },
+          header: {
+            root: 'border-0',
+            content:
+              'text-neutral-400 hover:text-neutral-300 px-4 py-2 flex items-center gap-3',
+            toggleicon: 'text-xs order-first mr-0'
+          },
+          content: {
+            root: 'bg-transparent border-0',
+            content: 'text-neutral-500 text-sm pl-11 pb-3 pt-0'
+          }
+        }"
+      >
+        <AccordionPanel value="0">
+          <AccordionHeader>
+            {{ $t('install.locationPicker.migrateFromExisting') }}
+          </AccordionHeader>
+          <AccordionContent>
+            <MigrationPicker
+              v-model:source-path="migrationSourcePath"
+              v-model:migration-item-ids="migrationItemIds"
+            />
+          </AccordionContent>
+        </AccordionPanel>
+
+        <AccordionPanel value="1">
+          <AccordionHeader>
+            {{ $t('install.locationPicker.chooseDownloadServers') }}
+          </AccordionHeader>
+          <AccordionContent>
+            <template
+              v-for="([item, modelValue], index) in mirrors"
+              :key="item.settingId + item.mirror"
+            >
+              <Divider v-if="index > 0" class="my-8" />
+
+              <MirrorItem
+                v-model="modelValue.value"
+                :item="item"
+                @state-change="validationStates[index] = $event"
+              />
+            </template>
+          </AccordionContent>
+        </AccordionPanel>
+      </Accordion>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+import { TorchMirrorUrl } from '@comfyorg/comfyui-electron-types'
+import Accordion from 'primevue/accordion'
+import AccordionContent from 'primevue/accordioncontent'
+import AccordionHeader from 'primevue/accordionheader'
+import AccordionPanel from 'primevue/accordionpanel'
 import Button from 'primevue/button'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
+import Divider from 'primevue/divider'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
-import { onMounted, ref } from 'vue'
+import { type ModelRef, computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import MigrationPicker from '@/components/install/MigrationPicker.vue'
+import MirrorItem from '@/components/install/mirror/MirrorItem.vue'
+import {
+  PYPI_MIRROR,
+  PYTHON_MIRROR,
+  type UVMirror
+} from '@/constants/uvMirrors'
 import { electronAPI } from '@/utils/envUtil'
+import { isInChina } from '@/utils/networkUtil'
+import { ValidationState } from '@/utils/validationUtil'
 
 const { t } = useI18n()
 
 const installPath = defineModel<string>('installPath', { required: true })
 const pathError = defineModel<string>('pathError', { required: true })
+const migrationSourcePath = defineModel<string>('migrationSourcePath')
+const migrationItemIds = defineModel<string[]>('migrationItemIds')
+const pythonMirror = defineModel<string>('pythonMirror', {
+  default: ''
+})
+const pypiMirror = defineModel<string>('pypiMirror', {
+  default: ''
+})
+const torchMirror = defineModel<string>('torchMirror', {
+  default: ''
+})
+
+const { device } = defineProps<{ device: TorchDeviceType | null }>()
+
 const pathExists = ref(false)
 const nonDefaultDrive = ref(false)
-const appData = ref('')
-const appPath = ref('')
 const inputTouched = ref(false)
 
+// Accordion state - array of active panel values
+const activeAccordionIndex = ref<string[] | undefined>(undefined)
+
 const electron = electronAPI()
 
-// Get system paths on component mount
+// Mirror configuration logic
+const getTorchMirrorItem = (device: TorchDeviceType): UVMirror => {
+  const settingId = 'Comfy-Desktop.UV.TorchInstallMirror'
+  switch (device) {
+    case 'mps':
+      return {
+        settingId,
+        mirror: TorchMirrorUrl.NightlyCpu,
+        fallbackMirror: TorchMirrorUrl.NightlyCpu
+      }
+    case 'nvidia':
+      return {
+        settingId,
+        mirror: TorchMirrorUrl.Cuda,
+        fallbackMirror: TorchMirrorUrl.Cuda
+      }
+    case 'cpu':
+    default:
+      return {
+        settingId,
+        mirror: PYPI_MIRROR.mirror,
+        fallbackMirror: PYPI_MIRROR.fallbackMirror
+      }
+  }
+}
+
+const userIsInChina = ref(false)
+const useFallbackMirror = (mirror: UVMirror) => ({
+  ...mirror,
+  mirror: mirror.fallbackMirror
+})
+
+const mirrors = computed<[UVMirror, ModelRef<string>][]>(() =>
+  (
+    [
+      [PYTHON_MIRROR, pythonMirror],
+      [PYPI_MIRROR, pypiMirror],
+      [getTorchMirrorItem(device ?? 'cpu'), torchMirror]
+    ] as [UVMirror, ModelRef<string>][]
+  ).map(([item, modelValue]) => [
+    userIsInChina.value ? useFallbackMirror(item) : item,
+    modelValue
+  ])
+)
+
+const validationStates = ref<ValidationState[]>(
+  mirrors.value.map(() => ValidationState.IDLE)
+)
+
+// Get default install path on component mount
 onMounted(async () => {
   const paths = await electron.getSystemPaths()
-  appData.value = paths.appData
-  appPath.value = paths.appPath
   installPath.value = paths.defaultInstallPath
-
   await validatePath(paths.defaultInstallPath)
+  userIsInChina.value = await isInChina()
 })
 
 const validatePath = async (path: string | undefined) => {
@@ -151,3 +263,52 @@ const onFocus = async () => {
   await validatePath(installPath.value)
 }
 </script>
+
+<style scoped>
+@reference '../../assets/css/style.css';
+
+:deep(.location-picker-accordion) {
+  @apply px-12;
+
+  .p-accordionpanel {
+    @apply border-0 bg-transparent;
+  }
+
+  .p-accordionheader {
+    @apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
+    transition:
+      background-color 0.2s ease,
+      border-radius 0.5s ease;
+  }
+
+  /* When panel is expanded, adjust header border radius */
+  .p-accordionpanel-active {
+    .p-accordionheader {
+      @apply rounded-t-xl rounded-b-none;
+    }
+  }
+
+  .p-accordioncontent {
+    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
+  }
+
+  .p-accordioncontent-content {
+    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
+  }
+
+  /* Override default chevron icons to use up/down */
+  .p-accordionheader-toggle-icon {
+    &::before {
+      content: '\e933';
+    }
+  }
+
+  .p-accordionpanel-active {
+    .p-accordionheader-toggle-icon {
+      &::before {
+        content: '\e902';
+      }
+    }
+  }
+}
+</style>

src/components/install/MigrationPicker.stories.ts

@@ -0,0 +1,45 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref } from 'vue'
+
+import MigrationPicker from './MigrationPicker.vue'
+
+const meta: Meta<typeof MigrationPicker> = {
+  title: 'Desktop/Components/MigrationPicker',
+  component: MigrationPicker,
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' }
+      ]
+    }
+  },
+  decorators: [
+    () => {
+      ;(window as any).electronAPI = {
+        validateComfyUISource: () => Promise.resolve({ isValid: true }),
+        showDirectoryPicker: () => Promise.resolve('/Users/username/ComfyUI')
+      }
+
+      return { template: '<story />' }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { MigrationPicker },
+    setup() {
+      const sourcePath = ref('')
+      const migrationItemIds = ref<string[]>([])
+      return { sourcePath, migrationItemIds }
+    },
+    template:
+      '<MigrationPicker v-model:sourcePath="sourcePath" v-model:migrationItemIds="migrationItemIds" />'
+  })
+}

src/components/install/MigrationPicker.vue

@@ -2,10 +2,6 @@
   <div class="flex flex-col gap-6 w-[600px]">
     <!-- Source Location Section -->
     <div class="flex flex-col gap-4">
-      <h2 class="text-2xl font-semibold text-neutral-100">
-        {{ $t('install.migrateFromExistingInstallation') }}
-      </h2>
-
       <p class="text-neutral-400 my-0">
         {{ $t('install.migrationSourcePathDescription') }}
       </p>
@@ -13,7 +9,7 @@
       <div class="flex gap-2">
         <InputText
           v-model="sourcePath"
-          placeholder="Select existing ComfyUI installation (optional)"
+          :placeholder="$t('install.locationPicker.migrationPathPlaceholder')"
           class="flex-1"
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validateSource"
@@ -27,10 +23,7 @@
     </div>
 
     <!-- Migration Options -->
-    <div
-      v-if="isValidSource"
-      class="flex flex-col gap-4 bg-neutral-800 p-4 rounded-lg"
-    >
+    <div v-if="isValidSource" class="flex flex-col gap-4 p-4 rounded-lg">
       <h3 class="text-lg mt-0 font-medium text-neutral-100">
         {{ $t('install.selectItemsToMigrate') }}
       </h3>

src/components/install/MirrorsConfiguration.vue

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

src/components/install/mirror/MirrorItem.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col items-center gap-4">
-    <div class="w-full">
-      <h3 class="text-lg font-medium text-neutral-100">
+  <div class="flex flex-col gap-4 text-neutral-400 text-sm">
+    <div>
+      <h3 class="text-lg font-medium text-neutral-100 mb-3 mt-0">
         {{ $t(`settings.${normalizedSettingId}.name`) }}
       </h3>
-      <p class="text-sm text-neutral-400 mt-1">
+      <p class="my-1">
         {{ $t(`settings.${normalizedSettingId}.tooltip`) }}
       </p>
     </div>
@@ -16,18 +16,61 @@
       "
       @state-change="validationState = $event"
     />
+    <div v-if="secondParagraph" class="mt-2">
+      <a href="#" @click.prevent="showDialog = true">
+        {{ $t('g.learnMore') }}
+      </a>
+
+      <Dialog
+        v-model:visible="showDialog"
+        modal
+        dismissable-mask
+        :header="$t(`settings.${normalizedSettingId}.urlFormatTitle`)"
+        class="select-none max-w-3xl"
+      >
+        <div class="text-neutral-300">
+          <p class="mt-1 whitespace-pre-wrap">{{ secondParagraph }}</p>
+          <div class="mt-2 break-all">
+            <span class="text-neutral-300 font-semibold">
+              {{ EXAMPLE_URL_FIRST_PART }}
+            </span>
+            <span>{{ EXAMPLE_URL_SECOND_PART }}</span>
+          </div>
+          <Divider />
+          <p>
+            {{ $t(`settings.${normalizedSettingId}.fileUrlDescription`) }}
+          </p>
+          <span class="text-neutral-300 font-semibold">
+            {{ FILE_URL_SCHEME }}
+          </span>
+          <span>
+            {{ EXAMPLE_FILE_URL }}
+          </span>
+        </div>
+      </Dialog>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import Dialog from 'primevue/dialog'
+import Divider from 'primevue/divider'
 import { computed, onMounted, ref, watch } from 'vue'
 
 import UrlInput from '@/components/common/UrlInput.vue'
 import type { UVMirror } from '@/constants/uvMirrors'
+import { st } from '@/i18n'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { checkMirrorReachable } from '@/utils/networkUtil'
 import { ValidationState } from '@/utils/validationUtil'
 
+const FILE_URL_SCHEME = 'file://'
+const EXAMPLE_FILE_URL = '/C:/MyPythonInstallers/'
+const EXAMPLE_URL_FIRST_PART =
+  'https://github.com/astral-sh/python-build-standalone/releases/download'
+const EXAMPLE_URL_SECOND_PART =
+  '/20250902/cpython-3.12.11+20250902-x86_64-pc-windows-msvc-install_only.tar.gz'
+
 const { item } = defineProps<{
   item: UVMirror
 }>()
@@ -38,11 +81,16 @@ const emit = defineEmits<{
 
 const modelValue = defineModel<string>('modelValue', { required: true })
 const validationState = ref<ValidationState>(ValidationState.IDLE)
+const showDialog = ref(false)
 
 const normalizedSettingId = computed(() => {
   return normalizeI18nKey(item.settingId)
 })
 
+const secondParagraph = computed(() =>
+  st(`settings.${normalizedSettingId.value}.urlDescription`, '')
+)
+
 onMounted(() => {
   modelValue.value = item.mirror
 })

src/components/node/NodePreview.vue

@@ -1,9 +1,9 @@
 <!-- Reference:
 https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c683087a3e168db/app/js/functions/sb_fn.js#L149
 -->
-
 <template>
-  <div class="_sb_node_preview">
+  <LGraphNodePreview v-if="shouldRenderVueNodes" :node-def="nodeDef" />
+  <div v-else class="_sb_node_preview">
     <div class="_sb_table">
       <div
         class="node_header text-ellipsis mr-4"
@@ -85,6 +85,8 @@ https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c6830
 import _ from 'es-toolkit/compat'
 import { computed } from 'vue'
 
+import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
+import LGraphNodePreview from '@/renderer/extensions/vueNodes/components/LGraphNodePreview.vue'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useWidgetStore } from '@/stores/widgetStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
@@ -94,6 +96,8 @@ const { nodeDef } = defineProps<{
   nodeDef: ComfyNodeDefV2
 }>()
 
+const { shouldRenderVueNodes } = useVueFeatureFlags()
+
 const colorPaletteStore = useColorPaletteStore()
 const litegraphColors = computed(
   () => colorPaletteStore.completedActivePalette.colors.litegraph_base

src/components/sidebar/SidebarHelpCenterIcon.vue

@@ -62,14 +62,14 @@ import { storeToRefs } from 'pinia'
 import { computed, onMounted } from 'vue'
 
 import HelpCenterMenuContent from '@/components/helpcenter/HelpCenterMenuContent.vue'
-import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
-import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import ReleaseNotificationToast from '@/platform/updates/components/ReleaseNotificationToast.vue'
 import WhatsNewPopup from '@/platform/updates/components/WhatsNewPopup.vue'
 import { useDialogService } from '@/services/dialogService'
 import { useHelpCenterStore } from '@/stores/helpCenterStore'
+import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
+import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
 import SidebarIcon from './SidebarIcon.vue'
 

src/components/topbar/WorkflowTab.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="workflowTabRef"
-    class="flex p-2 gap-2 workflow-tab"
+    class="flex p-2 gap-2 workflow-tab group"
     v-bind="$attrs"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
@@ -11,9 +11,13 @@
       {{ workflowOption.workflow.filename }}
     </span>
     <div class="relative">
-      <span v-if="shouldShowStatusIndicator" class="status-indicator">•</span>
+      <span
+        v-if="shouldShowStatusIndicator"
+        class="group-hover:hidden absolute font-bold text-2xl top-1/2 left-1/2 -translate-1/2 z-10 bg-(--comfy-menu-secondary-bg) w-4"
+        >•</span
+      >
       <Button
-        class="close-button p-0 w-auto"
+        class="close-button p-0 w-auto invisible"
         icon="pi pi-times"
         text
         severity="secondary"
@@ -174,18 +178,6 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped>
-@reference '../../assets/css/style.css';
-
-.status-indicator {
-  @apply absolute font-bold;
-  font-size: 1.5rem;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-</style>
-
 <style>
 .p-tooltip.workflow-tab-tooltip {
   z-index: 1200 !important;

src/components/topbar/WorkflowTabs.vue

@@ -358,14 +358,6 @@ onUpdated(() => {
   @apply visible;
 }
 
-:deep(.p-togglebutton:hover) .status-indicator {
-  @apply hidden;
-}
-
-:deep(.p-togglebutton) .close-button {
-  @apply invisible;
-}
-
 :deep(.p-scrollpanel-content) {
   @apply h-full;
 }

src/components/widget/layout/BaseModalLayout.vue

@@ -127,7 +127,7 @@ const toggleRightPanel = () => {
 const layoutClasses = cn(
   'base-widget-layout',
   'rounded-2xl overflow-hidden relative',
-  'bg-zinc-50 dark-theme:bg-zinc-800'
+  'bg-gray-50 dark-theme:bg-gray-800'
 )
 
 const rightPanelButtonClasses = computed(() => {
@@ -144,7 +144,7 @@ const closeButtonClasses = cn(
 
 const mainContainerClasses = cn(
   'flex-1 flex',
-  'bg-zinc-100 dark-theme:bg-neutral-900'
+  'bg-gray-100 dark-theme:bg-neutral-900'
 )
 
 const headerClasses = cn(

src/components/widget/nav/NavItem.vue

@@ -3,8 +3,8 @@
     class="flex items-center gap-2 px-4 py-3 text-sm rounded-md transition-colors cursor-pointer"
     :class="
       active
-        ? 'bg-neutral-100 dark-theme:bg-zinc-700 text-neutral'
-        : 'text-neutral hover:bg-zinc-100 dark-theme:hover:bg-zinc-700/50'
+        ? 'bg-white dark-theme:bg-charcoal-600 text-neutral'
+        : 'text-neutral hover:bg-gray-100 dark-theme:hover:bg-charcoal-300'
     "
     role="button"
     @click="onClick"

src/components/widget/panel/LeftSidePanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-zinc-800">
+  <div class="flex flex-col h-full w-full bg-white dark-theme:bg-charcoal-600">
     <PanelHeader>
       <template #icon>
         <slot name="header-icon"></slot>

src/components/widget/panel/RightSidePanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-zinc-800">
+  <div class="w-full h-full pl-4 pr-6 pb-8 bg-white dark-theme:bg-charcoal-600">
     <slot></slot>
   </div>
 </template>

src/composables/README.md

@@ -103,14 +103,22 @@ Utility composables for common patterns:
 | `useChainCallback` | Chains multiple callbacks together |
 
 ### Manager
-Composables for ComfyUI Manager integration:
+Composables for ComfyUI Manager integration (located in
+`@/workbench/extensions/manager/composables`):
 
 | Composable | Description |
 |------------|-------------|
 | `useManagerStatePersistence` | Persists manager UI state |
+| `useManagerState` | Determines availability of manager UI modes |
+| `useManagerQueue` | Handles manager task queue state |
+| `useConflictAcknowledgment` | Tracks conflict dismissal state |
+| `useConflictDetection` | Orchestrates conflict detection workflow |
+| `useImportFailedDetection` | Handles import-failed conflict dialogs |
+| `useRegistrySearch` | Manages registry search UI state |
 
-### Node Pack
-Composables for node package management:
+#### Node Pack
+Node package helpers live under
+`@/workbench/extensions/manager/composables/nodePack`:
 
 | Composable | Description |
 |------------|-------------|
@@ -118,6 +126,9 @@ Composables for node package management:
 | `useMissingNodes` | Detects and handles missing nodes |
 | `useNodePacks` | Core node package functionality |
 | `usePackUpdateStatus` | Tracks package update availability |
+| `usePacksSelection` | Provides selection helpers for pack lists |
+| `usePacksStatus` | Aggregates status across multiple packs |
+| `useUpdateAvailableNodes` | Detects available updates for nodes |
 | `useWorkflowPacks` | Manages packages used in workflows |
 
 ### Node
@@ -408,4 +419,4 @@ export function useFetchData(url) {
 }
 ```
 
-For more information on Vue composables, refer to the [Vue.js Composition API documentation](https://vuejs.org/guide/reusability/composables.html) and the [VueUse documentation](https://vueuse.org/).
+For more information on Vue composables, refer to the [Vue.js Composition API documentation](https://vuejs.org/guide/reusability/composables.html) and the [VueUse documentation](https://vueuse.org/).

src/composables/bottomPanelTabs/useTerminal.ts

@@ -9,7 +9,8 @@ export function useTerminal(element: Ref<HTMLElement | undefined>) {
   const fitAddon = new FitAddon()
   const terminal = markRaw(
     new Terminal({
-      convertEol: true
+      convertEol: true,
+      theme: { background: '#171717' }
     })
   )
   terminal.loadAddon(fitAddon)

src/composables/canvas/useCanvasTransformSync.ts

@@ -1,136 +0,0 @@
-import { onUnmounted, ref } from 'vue'
-
-import type { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-
-interface CanvasTransformSyncOptions {
-  /**
-   * Whether to automatically start syncing when canvas is available
-   * @default true
-   */
-  autoStart?: boolean
-  /**
-   * Called when sync starts
-   */
-  onStart?: () => void
-  /**
-   * Called when sync stops
-   */
-  onStop?: () => void
-}
-
-interface CanvasTransform {
-  scale: number
-  offsetX: number
-  offsetY: number
-}
-
-/**
- * Manages requestAnimationFrame-based synchronization with LiteGraph canvas transforms.
- *
- * This composable provides a clean way to sync Vue transform state with LiteGraph canvas
- * on every frame. It handles RAF lifecycle management, and ensures proper cleanup.
- *
- * The sync function typically reads canvas.ds properties like offset and scale to keep
- * Vue components aligned with the canvas coordinate system.
- *
- * @example
- * ```ts
- * const syncWithCanvas = (canvas: LGraphCanvas) => {
- *   canvas.ds.scale
- *   canvas.ds.offset
- * }
- *
- * const { isActive, startSync, stopSync } = useCanvasTransformSync(
- *   syncWithCanvas,
- *   {
- *     autoStart: false,
- *     onStart: () => emit('rafStatusChange', true),
- *     onStop: () => emit('rafStatusChange', false)
- *   }
- * )
- * ```
- */
-export function useCanvasTransformSync(
-  syncFn: (canvas: LGraphCanvas) => void,
-  options: CanvasTransformSyncOptions = {}
-) {
-  const { onStart, onStop, autoStart = true } = options
-  const { getCanvas } = useCanvasStore()
-
-  const isActive = ref(false)
-  let rafId: number | null = null
-  let lastTransform: CanvasTransform = {
-    scale: 0,
-    offsetX: 0,
-    offsetY: 0
-  }
-
-  const hasTransformChanged = (canvas: LGraphCanvas): boolean => {
-    const ds = canvas.ds
-    return (
-      ds.scale !== lastTransform.scale ||
-      ds.offset[0] !== lastTransform.offsetX ||
-      ds.offset[1] !== lastTransform.offsetY
-    )
-  }
-
-  const sync = () => {
-    if (!isActive.value) return
-
-    const canvas = getCanvas()
-    if (!canvas) return
-
-    try {
-      // Only run sync if transform actually changed
-      if (hasTransformChanged(canvas)) {
-        lastTransform = {
-          scale: canvas.ds.scale,
-          offsetX: canvas.ds.offset[0],
-          offsetY: canvas.ds.offset[1]
-        }
-
-        syncFn(canvas)
-      }
-    } catch (error) {
-      console.error('Canvas transform sync error:', error)
-    }
-
-    rafId = requestAnimationFrame(sync)
-  }
-
-  const startSync = () => {
-    if (isActive.value) return
-
-    isActive.value = true
-    onStart?.()
-
-    // Reset last transform to force initial sync
-    lastTransform = { scale: 0, offsetX: 0, offsetY: 0 }
-
-    sync()
-  }
-
-  const stopSync = () => {
-    isActive.value = false
-
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-      rafId = null
-    }
-
-    onStop?.()
-  }
-
-  onUnmounted(stopSync)
-
-  if (autoStart) {
-    startSync()
-  }
-
-  return {
-    isActive,
-    startSync,
-    stopSync
-  }
-}

src/composables/canvas/useSelectionToolboxPosition.ts

@@ -1,7 +1,7 @@
+import { useRafFn } from '@vueuse/core'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
-import { useCanvasTransformSync } from '@/composables/canvas/useCanvasTransformSync'
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
@@ -128,9 +128,7 @@ export function useSelectionToolboxPosition(
   }
 
   // Sync with canvas transform
-  const { startSync, stopSync } = useCanvasTransformSync(updateTransform, {
-    autoStart: false
-  })
+  const { resume: startSync, pause: stopSync } = useRafFn(updateTransform)
 
   // Watch for selection changes
   watch(

src/composables/graph/useGraphNodeManager.ts

@@ -5,6 +5,8 @@
 import { reactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import type { INodeOutputSlot } from '@/lib/litegraph/src/interfaces'
+import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { LayoutSource } from '@/renderer/core/layout/types'
 import type { WidgetValue } from '@/types/simplifiedWidget'
@@ -15,6 +17,7 @@ export interface SafeWidgetData {
   name: string
   type: string
   value: WidgetValue
+  label?: string
   options?: Record<string, unknown>
   callback?: ((value: unknown) => void) | undefined
 }
@@ -28,8 +31,8 @@ export interface VueNodeData {
   executing: boolean
   subgraphId?: string | null
   widgets?: SafeWidgetData[]
-  inputs?: unknown[]
-  outputs?: unknown[]
+  inputs?: INodeInputSlot[]
+  outputs?: INodeOutputSlot[]
   hasErrors?: boolean
   flags?: {
     collapsed?: boolean
@@ -84,6 +87,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
           name: widget.name,
           type: widget.type,
           value: value,
+          label: widget.label,
           options: widget.options ? { ...widget.options } : undefined,
           callback: widget.callback
         }
@@ -433,6 +437,28 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
               })
           }
         }
+      } else if (
+        action === 'node:slot-errors:changed' &&
+        param &&
+        typeof param === 'object'
+      ) {
+        const event = param as { nodeId: string | number }
+        const nodeId = String(event.nodeId)
+        const litegraphNode = nodeRefs.get(nodeId)
+        const currentData = vueNodeData.get(nodeId)
+
+        if (litegraphNode && currentData) {
+          // Re-extract slot data with updated hasErrors properties
+          vueNodeData.set(nodeId, {
+            ...currentData,
+            inputs: litegraphNode.inputs
+              ? [...litegraphNode.inputs]
+              : undefined,
+            outputs: litegraphNode.outputs
+              ? [...litegraphNode.outputs]
+              : undefined
+          })
+        }
       }
 
       // Call original trigger handler if it exists

src/composables/graph/useViewportCulling.ts

@@ -6,78 +6,98 @@
  * 2. Set display none on element to avoid cascade resolution overhead
  * 3. Only run when transform changes (event driven)
  */
-import { useThrottleFn } from '@vueuse/core'
+import { createSharedComposable, useThrottleFn } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { app as comfyApp } from '@/scripts/app'
+import { app } from '@/scripts/app'
 
-export function useViewportCulling() {
+type Bounds = [left: number, right: number, top: number, bottom: number]
+
+function getNodeBounds(node: LGraphNode): Bounds {
+  const [nodeLeft, nodeTop] = node.pos
+  const nodeRight = nodeLeft + node.size[0]
+  const nodeBottom = nodeTop + node.size[1]
+  return [nodeLeft, nodeRight, nodeTop, nodeBottom]
+}
+
+function viewportEdges(
+  canvas: ReturnType<typeof useCanvasStore>['canvas']
+): Bounds | undefined {
+  if (!canvas) {
+    return
+  }
+  const ds = canvas.ds
+  const viewport_width = canvas.canvas.width
+  const viewport_height = canvas.canvas.height
+  const margin = 500 * ds.scale
+
+  const [xOffset, yOffset] = ds.offset
+
+  const leftEdge = -margin / ds.scale - xOffset
+  const rightEdge = (viewport_width + margin) / ds.scale - xOffset
+  const topEdge = -margin / ds.scale - yOffset
+  const bottomEdge = (viewport_height + margin) / ds.scale - yOffset
+  return [leftEdge, rightEdge, topEdge, bottomEdge]
+}
+
+function boundsIntersect(boxA: Bounds, boxB: Bounds): boolean {
+  const [aLeft, aRight, aTop, aBottom] = boxA
+  const [bLeft, bRight, bTop, bBottom] = boxB
+
+  const leftOf = aRight < bLeft
+  const rightOf = aLeft > bRight
+  const above = aBottom < bTop
+  const below = aTop > bBottom
+  return !(leftOf || rightOf || above || below)
+}
+
+function useViewportCullingIndividual() {
   const canvasStore = useCanvasStore()
-  const { vueNodeData, nodeManager } = useVueNodeLifecycle()
+  const { nodeManager } = useVueNodeLifecycle()
 
-  const allNodes = computed(() => {
-    return Array.from(vueNodeData.value.values())
-  })
+  const viewport = computed(() => viewportEdges(canvasStore.canvas))
+
+  function inViewport(node: LGraphNode | undefined): boolean {
+    if (!viewport.value || !node) {
+      return true
+    }
+    const nodeBounds = getNodeBounds(node)
+    return boundsIntersect(nodeBounds, viewport.value)
+  }
 
   /**
    * Update visibility of all nodes based on viewport
    * Queries DOM directly - no cache maintenance needed
    */
   function updateVisibility() {
-    if (!nodeManager.value || !canvasStore.canvas || !comfyApp.canvas) return
+    if (!nodeManager.value || !app.canvas) return // load bearing app.canvas check for workflows being loaded.
 
-    const canvas = canvasStore.canvas
-    const manager = nodeManager.value
-    const ds = canvas.ds
-
-    // Viewport bounds
-    const viewport_width = canvas.canvas.width
-    const viewport_height = canvas.canvas.height
-    const margin = 500 * ds.scale
-
-    // Get all node elements at once
     const nodeElements = document.querySelectorAll('[data-node-id]')
-
-    // Update each element's visibility
     for (const element of nodeElements) {
       const nodeId = element.getAttribute('data-node-id')
       if (!nodeId) continue
 
-      const node = manager.getNode(nodeId)
+      const node = nodeManager.value.getNode(nodeId)
       if (!node) continue
 
-      // Calculate if node is outside viewport
-      const screen_x = (node.pos[0] + ds.offset[0]) * ds.scale
-      const screen_y = (node.pos[1] + ds.offset[1]) * ds.scale
-      const screen_width = node.size[0] * ds.scale
-      const screen_height = node.size[1] * ds.scale
-
-      const isNodeOutsideViewport =
-        screen_x + screen_width < -margin ||
-        screen_x > viewport_width + margin ||
-        screen_y + screen_height < -margin ||
-        screen_y > viewport_height + margin
-
-      // Setting display none directly avoid potential cascade resolution
-      if (element instanceof HTMLElement) {
-        element.style.display = isNodeOutsideViewport ? 'none' : ''
+      const displayValue = inViewport(node) ? '' : 'none'
+      if (
+        element instanceof HTMLElement &&
+        element.style.display !== displayValue
+      ) {
+        element.style.display = displayValue
       }
     }
   }
 
-  const updateVisibilityDebounced = useThrottleFn(updateVisibility, 20)
+  const handleTransformUpdate = useThrottleFn(() => updateVisibility, 100, true)
 
-  // RAF throttling for smooth updates during continuous panning
-  function handleTransformUpdate() {
-    requestAnimationFrame(async () => {
-      await updateVisibilityDebounced()
-    })
-  }
-
-  return {
-    allNodes,
-    handleTransformUpdate
-  }
+  return { handleTransformUpdate }
 }
+
+export const useViewportCulling = createSharedComposable(
+  useViewportCullingIndividual
+)

src/extensions/core/electronAdapter.ts

@@ -9,6 +9,12 @@ import { useDialogService } from '@/services/dialogService'
 import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
 import { checkMirrorReachable } from '@/utils/networkUtil'
 
+// Desktop documentation URLs
+const DESKTOP_DOCS = {
+  WINDOWS: 'https://docs.comfy.org/installation/desktop/windows',
+  MACOS: 'https://docs.comfy.org/installation/desktop/macos'
+} as const
+
 ;(async () => {
   if (!isElectron()) return
 
@@ -159,7 +165,11 @@ import { checkMirrorReachable } from '@/utils/networkUtil'
         label: 'Desktop User Guide',
         icon: 'pi pi-book',
         function() {
-          window.open('https://comfyorg.notion.site/', '_blank')
+          const docsUrl =
+            electronAPI.getPlatform() === 'darwin'
+              ? DESKTOP_DOCS.MACOS
+              : DESKTOP_DOCS.WINDOWS
+          window.open(docsUrl, '_blank')
         }
       },
       {

src/extensions/core/maskeditor.ts

@@ -3901,6 +3901,19 @@ class UIManager {
         this.paintBucketSettingsHTML.style.display = 'none'
       }
     }
+    if (tool === Tools.MaskColorFill) {
+      this.brushSettingsHTML.style.display = 'none'
+      this.colorSelectSettingsHTML.style.display = 'flex'
+      this.paintBucketSettingsHTML.style.display = 'none'
+    } else if (tool === Tools.MaskBucket) {
+      this.brushSettingsHTML.style.display = 'none'
+      this.colorSelectSettingsHTML.style.display = 'none'
+      this.paintBucketSettingsHTML.style.display = 'flex'
+    } else {
+      this.brushSettingsHTML.style.display = 'flex'
+      this.colorSelectSettingsHTML.style.display = 'none'
+      this.paintBucketSettingsHTML.style.display = 'none'
+    }
     this.messageBroker.publish('setTool', tool)
     this.onToolChange()
     const newActiveLayer = this.toolSettings[tool].newActiveLayerOnSet

src/locales/en/main.json

@@ -18,6 +18,7 @@
     "calculatingDimensions": "Calculating dimensions",
     "import": "Import",
     "loadAllFolders": "Load All Folders",
+    "logoAlt": "ComfyUI Logo",
     "refresh": "Refresh",
     "refreshNode": "Refresh Node",
     "terminal": "Terminal",
@@ -406,6 +407,27 @@
     "migration": "Migration",
     "desktopSettings": "Desktop Settings",
     "chooseInstallationLocation": "Choose Installation Location",
+    "gpuPicker": {
+      "title": "Choose your hardware setup",
+      "recommended": "RECOMMENDED",
+      "nvidiaSubtitle": "NVIDIA CUDA",
+      "cpuSubtitle": "CPU Mode",
+      "manualSubtitle": "Manual Setup",
+      "appleMetalDescription": "Leverages your Mac's GPU for faster speed and a better overall experience",
+      "nvidiaDescription": "Use your NVIDIA GPU with CUDA acceleration for the best performance.",
+      "cpuDescription": "Use CPU mode for compatibility when GPU acceleration is not available",
+      "manualDescription": "Configure ComfyUI manually for advanced setups or unsupported hardware"
+    },
+    "locationPicker": {
+      "title": "Choose where to install ComfyUI",
+      "subtitle": "Pick a folder for ComfyUI's files. We'll also set up Python there automatically.",
+      "pathPlaceholder": "/Users/username/Documents/ComfyUI",
+      "migrationPathPlaceholder": "Select existing ComfyUI installation (optional)",
+      "migrateFromExisting": "Migrate from existing installation",
+      "migrateDescription": "Copy or link your existing models, custom nodes, and configurations from a previous ComfyUI installation.",
+      "chooseDownloadServers": "Choose download servers manually",
+      "downloadServersDescription": "Select specific mirror servers for downloading Python, PyPI packages, and PyTorch based on your location."
+    },
     "systemLocations": "System Locations",
     "failedToSelectDirectory": "Failed to select directory",
     "pathValidationFailed": "Failed to validate path",
@@ -490,18 +512,26 @@
     "metricsDisabled": "Metrics Disabled",
     "updateConsent": "You previously opted in to reporting crashes. We are now tracking event-based metrics to help identify bugs and improve the app. No personal identifiable information is collected."
   },
+  "desktopStart": {
+    "initialising": "Initialising..."
+  },
   "serverStart": {
+    "title": "Starting ComfyUI",
     "troubleshoot": "Troubleshoot",
     "reportIssue": "Report Issue",
     "openLogs": "Open Logs",
     "showTerminal": "Show Terminal",
     "copySelectionTooltip": "Copy selection",
     "copyAllTooltip": "Copy all",
+    "errorMessage": "Unable to start ComfyUI Desktop",
+    "installation": {
+      "title": "Installing ComfyUI"
+    },
     "process": {
       "initial-state": "Loading...",
       "python-setup": "Setting up Python Environment...",
       "starting-server": "Starting ComfyUI server...",
-      "ready": "Finishing...",
+      "ready": "Loading Human Interface",
       "error": "Unable to start ComfyUI Desktop"
     }
   },

src/locales/en/settings.json

@@ -6,12 +6,15 @@
     "name": "Send anonymous usage metrics"
   },
   "Comfy-Desktop_UV_PypiInstallMirror": {
-    "name": "Pypi Install Mirror",
+    "name": "PyPI Install Mirror",
     "tooltip": "Default pip install mirror"
   },
   "Comfy-Desktop_UV_PythonInstallMirror": {
     "name": "Python Install Mirror",
-    "tooltip": "Managed Python installations are downloaded from the Astral python-build-standalone project. This variable can be set to a mirror URL to use a different source for Python installations. The provided URL will replace https://github.com/astral-sh/python-build-standalone/releases/download in, e.g., https://github.com/astral-sh/python-build-standalone/releases/download/20240713/cpython-3.12.4%2B20240713-aarch64-apple-darwin-install_only.tar.gz. Distributions can be read from a local directory by using the file:// URL scheme."
+    "tooltip": "Managed Python installations are downloaded from the Astral python-build-standalone project. To use a different source for Python installations, enter a mirror URL.",
+    "urlFormatTitle": "Mirror URL Format",
+    "urlDescription": "This is an example python download URL.\n\nThe mirror URL is the first half, including everything before the date (20250902):",
+    "fileUrlDescription": "To install from a file you downloaded earlier, you may use a file URL:"
   },
   "Comfy-Desktop_UV_TorchInstallMirror": {
     "name": "Torch Install Mirror",
@@ -421,4 +424,4 @@
   "pysssss_SnapToGrid": {
     "name": "Always snap to grid"
   }
-}
+}

src/platform/assets/components/AssetBrowserModal.stories.ts

@@ -52,7 +52,7 @@ export const Default: Story = {
     nodeType: 'CheckpointLoaderSimple',
     inputName: 'ckpt_name',
     currentValue: '',
-    showLeftPanel: false
+    showLeftPanel: true
   },
   render: (args) => ({
     components: { AssetBrowserModal },

src/platform/assets/components/AssetBrowserModal.vue

@@ -27,6 +27,10 @@
       />
     </template>
 
+    <template #contentFilter>
+      <AssetFilterBar :assets="assets" @filter-change="updateFilters" />
+    </template>
+
     <template #content>
       <AssetGrid
         :assets="filteredAssets"
@@ -42,6 +46,7 @@ import { computed, provide } from 'vue'
 import SearchBox from '@/components/input/SearchBox.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
+import AssetFilterBar from '@/platform/assets/components/AssetFilterBar.vue'
 import AssetGrid from '@/platform/assets/components/AssetGrid.vue'
 import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBrowser'
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
@@ -70,19 +75,20 @@ const {
   availableCategories,
   contentTitle,
   filteredAssets,
-  selectAssetWithCallback
+  selectAssetWithCallback,
+  updateFilters
 } = useAssetBrowser(props.assets)
 
 const shouldShowLeftPanel = computed(() => {
   return props.showLeftPanel ?? true
 })
 
-const handleClose = () => {
+function handleClose() {
   props.onClose?.()
   emit('close')
 }
 
-const handleAssetSelectAndEmit = async (asset: AssetDisplayItem) => {
+async function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
   emit('asset-select', asset)
   await selectAssetWithCallback(asset.id, props.onSelect)
 }

src/platform/assets/components/AssetCard.vue

@@ -8,19 +8,17 @@
       cn(
         // Base layout and container styles (always applied)
         'rounded-xl overflow-hidden transition-all duration-200',
+        interactive && 'group',
         // Button-specific styles
         interactive && [
           'appearance-none bg-transparent p-0 m-0 font-inherit text-inherit outline-none cursor-pointer text-left',
-          'bg-ivory-100 border border-gray-300 dark-theme:bg-charcoal-400 dark-theme:border-charcoal-600',
-          'hover:transform hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/10 hover:border-gray-400',
-          'dark-theme:hover:shadow-lg dark-theme:hover:shadow-black/30 dark-theme:hover:border-charcoal-700',
-          'focus:outline-none focus:transform focus:-translate-y-0.5 focus:shadow-lg focus:shadow-black/10 dark-theme:focus:shadow-black/30'
+          'bg-gray-100 dark-theme:bg-charcoal-800',
+          'hover:bg-gray-200 dark-theme:hover:bg-charcoal-600',
+          'border-none',
+          'focus:outline-solid outline-blue-100 outline-4'
         ],
         // Div-specific styles
-        !interactive && [
-          'bg-ivory-100 border border-gray-300',
-          'dark-theme:bg-charcoal-400 dark-theme:border-charcoal-600'
-        ]
+        !interactive && 'bg-gray-100 dark-theme:bg-charcoal-800'
       )
     "
     @click="interactive && $emit('select', asset)"
@@ -32,7 +30,7 @@
       ></div>
       <AssetBadgeGroup :badges="asset.badges" />
     </div>
-    <div class="p-4 h-32 flex flex-col justify-between">
+    <div :class="cn('p-4 h-32 flex flex-col justify-between')">
       <div>
         <h3
           :class="
@@ -49,8 +47,8 @@
           :class="
             cn(
               'm-0 text-sm leading-6 overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:2] [display:-webkit-box]',
-              'text-stone-300',
-              'dark-theme:text-stone-200'
+              'text-stone-100',
+              'dark-theme:text-slate-100'
             )
           "
           :title="asset.description"

src/platform/assets/components/AssetFilterBar.stories.ts

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import {
+  createAssetWithSpecificBaseModel,
+  createAssetWithSpecificExtension,
+  createAssetWithoutBaseModel,
+  createAssetWithoutExtension
+} from '@/platform/assets/fixtures/ui-mock-assets'
+
+import AssetFilterBar from './AssetFilterBar.vue'
+
+const meta: Meta<typeof AssetFilterBar> = {
+  title: 'Platform/Assets/AssetFilterBar',
+  component: AssetFilterBar,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Filter bar for asset browser that dynamically shows/hides filters based on available options.'
+      }
+    }
+  },
+  decorators: [
+    () => ({
+      template: `
+        <div class="min-h-screen bg-white dark-theme:bg-charcoal-900">
+          <div class="bg-gray-50 dark-theme:bg-charcoal-800 border-b border-gray-200 dark-theme:border-charcoal-600">
+            <story />
+          </div>
+          <div class="p-6 text-sm text-gray-600 dark-theme:text-gray-400">
+            <p>Filter bar with proper chrome styling showing contextual background and borders.</p>
+          </div>
+        </div>
+      `
+    })
+  ],
+  argTypes: {
+    assets: {
+      description: 'Array of assets to generate filter options from'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const BothFiltersVisible: Story = {
+  args: {
+    assets: [
+      createAssetWithSpecificExtension('safetensors'),
+      createAssetWithSpecificExtension('ckpt'),
+      createAssetWithSpecificBaseModel('sd15'),
+      createAssetWithSpecificBaseModel('sdxl')
+    ]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows both file format and base model filters when assets contain both types of options.'
+      }
+    }
+  }
+}
+
+export const OnlyFileFormatFilter: Story = {
+  args: {
+    assets: [
+      // Assets with extensions but explicitly NO base models
+      {
+        ...createAssetWithSpecificExtension('safetensors'),
+        user_metadata: undefined
+      },
+      { ...createAssetWithSpecificExtension('ckpt'), user_metadata: undefined }
+    ]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows only file format filter when assets have file extensions but no base model metadata.'
+      }
+    }
+  }
+}
+
+export const OnlyBaseModelFilter: Story = {
+  args: {
+    assets: [
+      // Assets with base models but no recognizable extensions
+      {
+        ...createAssetWithSpecificBaseModel('sd15'),
+        name: 'model_without_extension'
+      },
+      { ...createAssetWithSpecificBaseModel('sdxl'), name: 'another_model' }
+    ]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows only base model filter when assets have base model metadata but no recognizable file extensions.'
+      }
+    }
+  }
+}
+
+export const NoFiltersVisible: Story = {
+  args: {
+    assets: []
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows no filters when no assets are provided or assets contain no filterable options.'
+      }
+    }
+  }
+}
+
+export const NoFiltersFromAssetsWithoutOptions: Story = {
+  args: {
+    assets: [createAssetWithoutExtension(), createAssetWithoutBaseModel()]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Shows no filters when assets are provided but contain no filterable options (no extensions or base models).'
+      }
+    }
+  }
+}

src/platform/assets/components/AssetFilterBar.vue

@@ -2,18 +2,20 @@
   <div :class="containerClasses" data-component-id="asset-filter-bar">
     <div :class="leftSideClasses" data-component-id="asset-filter-bar-left">
       <MultiSelect
+        v-if="availableFileFormats.length > 0"
         v-model="fileFormats"
         :label="$t('assetBrowser.fileFormats')"
-        :options="fileFormatOptions"
+        :options="availableFileFormats"
         :class="selectClasses"
         data-component-id="asset-filter-file-formats"
         @update:model-value="handleFilterChange"
       />
 
       <MultiSelect
+        v-if="availableBaseModels.length > 0"
         v-model="baseModels"
         :label="$t('assetBrowser.baseModels')"
-        :options="baseModelOptions"
+        :options="availableBaseModels"
         :class="selectClasses"
         data-component-id="asset-filter-base-models"
         @update:model-value="handleFilterChange"
@@ -44,6 +46,8 @@ import MultiSelect from '@/components/input/MultiSelect.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
 import type { SelectOption } from '@/components/input/types'
 import { t } from '@/i18n'
+import { useAssetFilterOptions } from '@/platform/assets/composables/useAssetFilterOptions'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { cn } from '@/utils/tailwindUtil'
 
 export interface FilterState {
@@ -52,25 +56,16 @@ export interface FilterState {
   sortBy: string
 }
 
+const { assets = [] } = defineProps<{
+  assets?: AssetItem[]
+}>()
+
 const fileFormats = ref<SelectOption[]>([])
 const baseModels = ref<SelectOption[]>([])
 const sortBy = ref('name-asc')
 
-// TODO: Make fileFormatOptions configurable via props or assetService
-// Should support dynamic file formats based on available assets or server capabilities
-const fileFormatOptions = [
-  { name: '.ckpt', value: 'ckpt' },
-  { name: '.safetensors', value: 'safetensors' },
-  { name: '.pt', value: 'pt' }
-]
-
-// TODO: Make baseModelOptions configurable via props or assetService
-// Should support dynamic base models based on available assets or server detection
-const baseModelOptions = [
-  { name: 'SD 1.5', value: 'sd15' },
-  { name: 'SD XL', value: 'sdxl' },
-  { name: 'SD 3.5', value: 'sd35' }
-]
+const { availableFileFormats, availableBaseModels } =
+  useAssetFilterOptions(assets)
 
 // TODO: Make sortOptions configurable via props
 // Different asset types might need different sorting options