code improve

* lint: turn on type import rules setting up for verbatimModuleSyntax

* lint: --fix for type imports

.github/workflows/json-validate.yaml

@@ -1,15 +0,0 @@
-name: Validate JSON
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-
-jobs:
-  json-lint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - name: Validate JSON syntax
-        run: ./scripts/cicd/check-json.sh

eslint.config.ts

@@ -33,16 +33,7 @@ export default defineConfig([
       },
       parserOptions: {
         parser: tseslint.parser,
-        projectService: {
-          allowDefaultProject: [
-            'vite.config.mts',
-            'vite.electron.config.mts',
-            'vite.types.config.mts',
-            'playwright.config.ts',
-            'playwright.i18n.config.ts',
-            'scripts/collect-i18n-node-defs.ts'
-          ]
-        },
+        projectService: true,
         tsConfigRootDir: import.meta.dirname,
         ecmaVersion: 2020,
         sourceType: 'module',
@@ -84,6 +75,8 @@ export default defineConfig([
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/prefer-as-const': 'off',
+      '@typescript-eslint/consistent-type-imports': 'error',
+      '@typescript-eslint/no-import-type-side-effects': 'error',
       'unused-imports/no-unused-imports': 'error',
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix

knip.config.ts

@@ -27,7 +27,8 @@ const config: KnipConfig = {
     // Used by a custom node (that should move off of this)
     'src/scripts/ui/components/splitButton.ts',
     // Staged for for use with subgraph widget promotion
-    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts'
+    'src/lib/litegraph/src/widgets/DisconnectedWidget.ts',
+    'src/core/graph/operations/types.ts'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.27.10",
+  "version": "1.27.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

playwright.i18n.config.ts

@@ -7,7 +7,6 @@ export default defineConfig({
     headless: true
   },
   reporter: 'list',
-  workers: 1,
   timeout: 60000,
   testMatch: /collect-i18n-.*\.ts/
 })

scripts/cicd/check-json.sh

@@ -1,77 +0,0 @@
-#!/bin/bash
-set -euo pipefail
-
-usage() {
-  echo "Usage: $0 [--debug]" >&2
-}
-
-debug=0
-
-while [ "$#" -gt 0 ]; do
-  case "$1" in
-    --debug)
-      debug=1
-      ;;
-    -h|--help)
-      usage
-      exit 0
-      ;;
-    *)
-      echo "Unknown option: $1" >&2
-      usage
-      exit 2
-      ;;
-  esac
-  shift
-done
-
-# Validate JSON syntax in tracked files using jq
-if ! command -v jq >/dev/null 2>&1; then
-  echo "Error: jq is required but not installed" >&2
-  exit 127
-fi
-
-EXCLUDE_PATTERNS=(
-  '**/tsconfig*.json'
-)
-
-if [ -n "${JSON_LINT_EXCLUDES:-}" ]; then
-  # shellcheck disable=SC2206
-  EXCLUDE_PATTERNS+=( ${JSON_LINT_EXCLUDES} )
-fi
-
-pathspecs=(-- '*.json')
-for pattern in "${EXCLUDE_PATTERNS[@]}"; do
-  if [[ ${pattern:0:1} == ':' ]]; then
-    pathspecs+=("$pattern")
-  else
-    pathspecs+=(":(glob,exclude)${pattern}")
-  fi
-done
-
-mapfile -t json_files < <(git ls-files "${pathspecs[@]}")
-
-if [ "${#json_files[@]}" -eq 0 ]; then
-  echo 'No JSON files found.'
-  exit 0
-fi
-
-if [ "$debug" -eq 1 ]; then
-  echo 'JSON files to validate:'
-  printf '  %s\n' "${json_files[@]}"
-fi
-
-failed=0
-for file in "${json_files[@]}"; do
-  if ! jq -e . "$file" >/dev/null; then
-    echo "Invalid JSON syntax: $file" >&2
-    failed=1
-  fi
-done
-
-if [ "$failed" -ne 0 ]; then
-  echo 'JSON validation failed.' >&2
-  exit 1
-fi
-
-echo 'All JSON files are valid.'

scripts/collect-i18n-general.ts

@@ -2,7 +2,6 @@ import * as fs from 'fs'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
-import { DESKTOP_DIALOGS } from '../src/constants/desktopDialogs'
 import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
 import type { FormItem, SettingParams } from '../src/platform/settings/types'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
@@ -132,23 +131,6 @@ test('collect-i18n-general', async ({ comfyPage }) => {
     ])
   )
 
-  // Desktop Dialogs
-  const allDesktopDialogsLocale = Object.fromEntries(
-    Object.values(DESKTOP_DIALOGS).map((dialog) => [
-      normalizeI18nKey(dialog.id),
-      {
-        title: dialog.title,
-        message: dialog.message,
-        buttons: Object.fromEntries(
-          dialog.buttons.map((button) => [
-            normalizeI18nKey(button.label),
-            button.label
-          ])
-        )
-      }
-    ])
-  )
-
   fs.writeFileSync(
     localePath,
     JSON.stringify(
@@ -162,8 +144,7 @@ test('collect-i18n-general', async ({ comfyPage }) => {
           ...allSettingCategoriesLocale
         },
         serverConfigItems: allServerConfigsLocale,
-        serverConfigCategories: allServerConfigCategoriesLocale,
-        desktopDialogs: allDesktopDialogsLocale
+        serverConfigCategories: allServerConfigCategoriesLocale
       },
       null,
       2

scripts/collect-i18n-node-defs.ts

@@ -1,9 +1,9 @@
 import * as fs from 'fs'
 
-import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
-
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
-import type { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
+import type { ComfyNodeDef } from '../src/schemas/nodeDefSchema'
+import type { ComfyApi } from '../src/scripts/api'
+import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
 import { normalizeI18nKey } from '../src/utils/formatUtil'
 
 const localePath = './src/locales/en/main.json'
@@ -11,28 +11,23 @@ const nodeDefsPath = './src/locales/en/nodeDefs.json'
 
 test('collect-i18n-node-defs', async ({ comfyPage }) => {
   // Mock view route
-  await comfyPage.page.route('**/view**', async (route) => {
+  comfyPage.page.route('**/view**', async (route) => {
     await route.fulfill({
       body: JSON.stringify({})
     })
   })
 
-  // Note: Don't mock the object_info API endpoint - let it hit the actual backend
-
-  const nodeDefs: ComfyNodeDefImpl[] = await comfyPage.page.evaluate(
-    async () => {
-      const api = window['app'].api
-      const rawNodeDefs = await api.getNodeDefs()
-      const { ComfyNodeDefImpl } = await import('../src/stores/nodeDefStore')
-
-      return (
-        Object.values(rawNodeDefs)
-          // Ignore DevTools nodes (used for internal testing)
-          .filter((def: ComfyNodeDef) => !def.name.startsWith('DevTools'))
-          .map((def: ComfyNodeDef) => new ComfyNodeDefImpl(def))
-      )
-    }
+  const nodeDefs: ComfyNodeDefImpl[] = (
+    Object.values(
+      await comfyPage.page.evaluate(async () => {
+        const api = window['app'].api as ComfyApi
+        return await api.getNodeDefs()
+      })
+    ) as ComfyNodeDef[]
   )
+    // Ignore DevTools nodes (used for internal testing)
+    .filter((def) => !def.name.startsWith('DevTools'))
+    .map((def) => new ComfyNodeDefImpl(def))
 
   console.log(`Collected ${nodeDefs.length} node definitions`)
 

src/assets/css/style.css

@@ -66,8 +66,6 @@
   --color-charcoal-700: #202121;
   --color-charcoal-800: #171718;
 
-  --color-neutral-550: #636363;
-
   --color-stone-100: #444444;
   --color-stone-200: #828282;
   --color-stone-300: #bbbbbb;
@@ -105,10 +103,6 @@
   --color-danger-100: #c02323;
   --color-danger-200: #d62952;
 
-  --color-coral-red-600: #973a40;
-  --color-coral-red-500: #c53f49;
-  --color-coral-red-400: #dd424e;
-
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 

src/components/MenuHamburger.vue

@@ -21,7 +21,8 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { CSSProperties, computed, watchEffect } from 'vue'
+import type { CSSProperties } from 'vue'
+import { computed, watchEffect } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'

src/components/actionbar/ComfyActionbar.vue

@@ -22,7 +22,8 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import Panel from 'primevue/panel'
-import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useSettingStore } from '@/platform/settings/settingStore'
 

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

@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
-  >
+  <div ref="rootEl" class="relative overflow-hidden h-full w-full bg-black">
     <div class="p-terminal rounded-none h-full w-full p-2">
       <div ref="terminalEl" class="h-full terminal-host" />
     </div>
@@ -29,7 +26,8 @@
 import { useElementHover, useEventListener } from '@vueuse/core'
 import type { IDisposable } from '@xterm/xterm'
 import Button from 'primevue/button'
-import { Ref, computed, onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
@@ -100,13 +98,12 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@reference '../../../../assets/css/style.css';
-
 :deep(.p-terminal) .xterm {
-  @apply overflow-hidden;
+  overflow-x: auto;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  @apply bg-neutral-900 overflow-hidden;
+  background-color: black;
+  overflow-y: hidden;
 }
 </style>

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

@@ -3,8 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { IDisposable } from '@xterm/xterm'
-import { Ref, onMounted, onUnmounted } from 'vue'
+import type { IDisposable } from '@xterm/xterm'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'

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

@@ -15,10 +15,11 @@
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import ProgressSpinner from 'primevue/progressspinner'
-import { Ref, onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
+import type { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { useExecutionStore } from '@/stores/executionStore'
 

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -47,7 +47,8 @@
 
 <script setup lang="ts">
 import InputText from 'primevue/inputtext'
-import Menu, { MenuState } from 'primevue/menu'
+import type { MenuState } from 'primevue/menu'
+import Menu from 'primevue/menu'
 import type { MenuItem } from 'primevue/menuitem'
 import Tag from 'primevue/tag'
 import { computed, nextTick, ref } from 'vue'

src/components/common/ExtensionSlot.vue

@@ -17,7 +17,7 @@
 <script setup lang="ts">
 import { onBeforeUnmount } from 'vue'
 
-import { CustomExtension, VueExtension } from '@/types/extensionTypes'
+import type { CustomExtension, VueExtension } from '@/types/extensionTypes'
 
 const props = defineProps<{
   extension: VueExtension | CustomExtension

src/components/common/FormItem.vue

@@ -44,7 +44,7 @@ import FormRadioGroup from '@/components/common/FormRadioGroup.vue'
 import InputKnob from '@/components/common/InputKnob.vue'
 import InputSlider from '@/components/common/InputSlider.vue'
 import UrlInput from '@/components/common/UrlInput.vue'
-import { FormItem } from '@/platform/settings/types'
+import type { FormItem } from '@/platform/settings/types'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{

src/components/common/RefreshButton.vue

@@ -32,7 +32,7 @@
 import Button from 'primevue/button'
 import ProgressSpinner from 'primevue/progressspinner'
 
-import { PrimeVueSeverity } from '@/types/primeVueTypes'
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'
 
 const {
   disabled,

src/components/common/StartupDisplay.vue

@@ -1,71 +0,0 @@
-<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/common/TreeExplorerTreeNode.spec.ts

@@ -9,10 +9,8 @@ import { createI18n } from 'vue-i18n'
 
 import EditableText from '@/components/common/EditableText.vue'
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import {
-  InjectKeyHandleEditLabelFunction,
-  RenderedTreeExplorerNode
-} from '@/types/treeExplorerTypes'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'
 
 // Create a mock i18n instance
 const i18n = createI18n({

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -138,7 +138,7 @@ const allMissingNodesInstalled = computed(() => {
 })
 // Watch for completion and close dialog
 watch(allMissingNodesInstalled, async (allInstalled) => {
-  if (allInstalled && showInstallAllButton.value) {
+  if (allInstalled) {
     // Use nextTick to ensure state updates are complete
     await nextTick()
 

src/components/dialog/content/ManagerProgressDialogContent.test.ts

@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'

src/components/dialog/content/SignInContent.vue

@@ -148,7 +148,7 @@ import { useI18n } from 'vue-i18n'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
-import { SignInData, SignUpData } from '@/schemas/signInSchema'
+import type { SignInData, SignUpData } from '@/schemas/signInSchema'
 import { isInChina } from '@/utils/networkUtil'
 
 import ApiKeyForm from './signin/ApiKeyForm.vue'

src/components/dialog/content/UpdatePasswordContent.vue

@@ -17,7 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import { ref } from 'vue'

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

@@ -160,7 +160,7 @@ import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { TabItem } from '@/types/comfyManagerTypes'
 import { ManagerTab } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 
 const { initialTab } = defineProps<{
   initialTab?: ManagerTab

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

@@ -169,7 +169,7 @@ import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
-import {
+import type {
   ConflictDetail,
   ConflictDetectionResult
 } from '@/types/conflictDetectionTypes'

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

@@ -19,7 +19,7 @@
 import Message from 'primevue/message'
 import { computed, inject } from 'vue'
 
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 
 type PackVersionStatus = components['schemas']['NodeVersionStatus']

src/components/dialog/content/manager/PackVersionBadge.test.ts

@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import Tooltip from 'primevue/tooltip'

src/components/dialog/content/manager/PackVersionSelectorPopover.test.ts

@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'

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

@@ -93,8 +93,8 @@ import VerifiedIcon from '@/components/icons/VerifiedIcon.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyRegistryService } from '@/services/comfyRegistryService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { components } from '@/types/comfyRegistryTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
 import { getJoinedConflictMessages } from '@/utils/conflictMessageUtil'
 import { isSemVer } from '@/utils/formatUtil'
 

src/components/dialog/content/manager/button/PackEnableToggle.test.ts

@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import ToggleSwitch from 'primevue/toggleswitch'

src/components/dialog/content/manager/button/PackEnableToggle.vue

@@ -39,7 +39,7 @@ import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import type { components } from '@/types/comfyRegistryTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 const TOGGLE_DEBOUNCE_MS = 256
 

src/components/dialog/content/manager/button/PackInstallButton.vue

@@ -31,13 +31,11 @@ import { useConflictDetection } from '@/composables/useConflictDetection'
 import { t } from '@/i18n'
 import { useDialogService } from '@/services/dialogService'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { ButtonSize } from '@/types/buttonTypes'
+import type { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import {
-  type ConflictDetail,
-  ConflictDetectionResult
-} from '@/types/conflictDetectionTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import type { ConflictDetail } from '@/types/conflictDetectionTypes'
+import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 

src/components/dialog/content/manager/button/PackUninstallButton.vue

@@ -17,9 +17,9 @@
 <script setup lang="ts">
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { ButtonSize } from '@/types/buttonTypes'
+import type { ButtonSize } from '@/types/buttonTypes'
 import type { components } from '@/types/comfyRegistryTypes'
-import { components as ManagerComponents } from '@/types/generatedManagerTypes'
+import type { components as ManagerComponents } from '@/types/generatedManagerTypes'
 
 type NodePack = components['schemas']['Node']
 

src/components/dialog/content/manager/infoPanel/InfoPanel.vue

@@ -75,7 +75,7 @@ import { useImportFailedDetection } from '@/composables/useImportFailedDetection
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
 import { useConflictDetectionStore } from '@/stores/conflictDetectionStore'
 import { IsInstallingKey } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 

src/components/dialog/content/manager/infoPanel/InfoPanelHeader.vue

@@ -50,7 +50,7 @@ import PackUninstallButton from '@/components/dialog/content/manager/button/Pack
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
 import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyManagerStore } from '@/stores/comfyManagerStore'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetail } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 

src/components/dialog/content/manager/infoPanel/InfoPanelMultiItem.vue

@@ -67,7 +67,7 @@ import { usePacksSelection } from '@/composables/nodePack/usePacksSelection'
 import { usePacksStatus } from '@/composables/nodePack/usePacksStatus'
 import { useConflictDetection } from '@/composables/useConflictDetection'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetail } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 

src/components/dialog/content/manager/infoPanel/InfoTabs.vue

@@ -48,7 +48,7 @@ import { computed, inject, ref, watchEffect } from 'vue'
 import DescriptionTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue'
 import NodesTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue'
 import WarningTabPanel from '@/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
 import { ImportFailedKey } from '@/types/importFailedTypes'
 

src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.test.ts

@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest'
 import { createI18n } from 'vue-i18n'
 
 import enMessages from '@/locales/en/main.json' with { type: 'json' }
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 
 import DescriptionTabPanel from './DescriptionTabPanel.vue'
 

src/components/dialog/content/manager/infoPanel/tabs/DescriptionTabPanel.vue

@@ -29,7 +29,7 @@ import { useI18n } from 'vue-i18n'
 import InfoTextSection, {
   type TextSection
 } from '@/components/dialog/content/manager/infoPanel/InfoTextSection.vue'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import { isValidUrl } from '@/utils/formatUtil'
 
 const { t } = useI18n()

src/components/dialog/content/manager/infoPanel/tabs/NodesTabPanel.vue

@@ -34,7 +34,7 @@ import { computed, ref, shallowRef, useId } from 'vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
-import { components, operations } from '@/types/comfyRegistryTypes'
+import type { components, operations } from '@/types/comfyRegistryTypes'
 import { registryToFrontendV2NodeDef } from '@/utils/mapperUtil'
 
 type ListComfyNodesResponse =

src/components/dialog/content/manager/infoPanel/tabs/WarningTabPanel.vue

@@ -29,8 +29,8 @@ import { computed } from 'vue'
 
 import { useImportFailedDetection } from '@/composables/useImportFailedDetection'
 import { t } from '@/i18n'
-import { components } from '@/types/comfyRegistryTypes'
-import { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
+import type { components } from '@/types/comfyRegistryTypes'
+import type { ConflictDetectionResult } from '@/types/conflictDetectionTypes'
 import { getConflictMessage } from '@/utils/conflictMessageUtil'
 
 const { nodePack, conflictResult } = defineProps<{

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

@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 
 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 

src/components/dialog/content/manager/packIcon/PackIcon.vue

@@ -37,7 +37,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 
 const DEFAULT_BANNER = '/assets/images/fallback-gradient-avatar.svg'
 

src/components/dialog/content/manager/packIcon/PackIconStacked.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
 import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 
 const {
   nodePacks,

src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue

@@ -62,9 +62,8 @@
 
 <script setup lang="ts">
 import { stubTrue } from 'es-toolkit/compat'
-import AutoComplete, {
-  AutoCompleteOptionSelectEvent
-} from 'primevue/autocomplete'
+import type { AutoCompleteOptionSelectEvent } from 'primevue/autocomplete'
+import AutoComplete from 'primevue/autocomplete'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -77,7 +76,7 @@ import {
   type SearchOption,
   SortableAlgoliaField
 } from '@/types/comfyManagerTypes'
-import { components } from '@/types/comfyRegistryTypes'
+import type { components } from '@/types/comfyRegistryTypes'
 import type {
   QuerySuggestion,
   SearchMode,

src/components/dialog/content/manager/skeleton/PackCardGridSkeleton.test.ts

@@ -1,4 +1,5 @@
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
 import { describe, expect, it } from 'vitest'

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

@@ -96,8 +96,8 @@ import Message from 'primevue/message'
 import ProgressSpinner from 'primevue/progressspinner'
 import { computed, ref } from 'vue'
 
+import type { AuditLog } from '@/services/customerEventsService'
 import {
-  AuditLog,
   EventType,
   useCustomerEventsService
 } from '@/services/customerEventsService'

src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue

@@ -13,7 +13,7 @@
 import Tag from 'primevue/tag'
 import { computed } from 'vue'
 
-import { KeyComboImpl } from '@/stores/keybindingStore'
+import type { KeyComboImpl } from '@/stores/keybindingStore'
 
 const { keyCombo, isModified = false } = defineProps<{
   keyCombo: KeyComboImpl

src/components/dialog/content/signin/ApiKeyForm.vue

@@ -79,7 +79,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'

src/components/dialog/content/signin/SignInForm.spec.ts

@@ -1,5 +1,6 @@
 import { Form } from '@primevue/forms'
-import { VueWrapper, mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import Button from 'primevue/button'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'

src/components/dialog/content/signin/SignInForm.vue

@@ -71,7 +71,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import InputText from 'primevue/inputtext'

src/components/dialog/content/signin/SignUpForm.vue

@@ -59,7 +59,8 @@
 </template>
 
 <script setup lang="ts">
-import { Form, FormField, FormSubmitEvent } from '@primevue/forms'
+import type { FormSubmitEvent } from '@primevue/forms'
+import { Form, FormField } from '@primevue/forms'
 import { zodResolver } from '@primevue/forms/resolvers/zod'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'

src/components/graph/modals/ZoomControlsModal.vue

@@ -135,7 +135,8 @@
 </template>
 
 <script setup lang="ts">
-import { Button, InputNumber, InputNumberInputEvent } from 'primevue'
+import type { InputNumberInputEvent } from 'primevue'
+import { Button, InputNumber } from 'primevue'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -50,7 +50,8 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import SelectButton from 'primevue/selectbutton'
-import { Raw, computed, ref, watch } from 'vue'
+import type { Raw } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import type {

src/components/graph/selectionToolbox/DeleteButton.vue

@@ -20,7 +20,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useSelectionState } from '@/composables/graph/useSelectionState'
-import { Positionable } from '@/lib/litegraph/src/interfaces'
+import type { Positionable } from '@/lib/litegraph/src/interfaces'
 import { useCommandStore } from '@/stores/commandStore'
 
 const { t } = useI18n()

src/components/graph/selectionToolbox/ExtensionCommandButton.vue

@@ -17,7 +17,8 @@
 import Button from 'primevue/button'
 
 import { st } from '@/i18n'
-import { ComfyCommand, useCommandStore } from '@/stores/commandStore'
+import type { ComfyCommand } from '@/stores/commandStore'
+import { useCommandStore } from '@/stores/commandStore'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 defineProps<{

src/components/graph/selectionToolbox/SubmenuPopover.vue

@@ -48,9 +48,9 @@
 import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
-import {
-  type MenuOption,
-  type SubMenuOption
+import type {
+  MenuOption,
+  SubMenuOption
 } from '@/composables/graph/useMoreOptionsMenu'
 import { useNodeCustomization } from '@/composables/graph/useNodeCustomization'
 

src/components/graph/widgets/ChatHistoryWidget.vue

@@ -56,7 +56,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 
 import CopyButton from '@/components/graph/widgets/chatHistory/CopyButton.vue'
 import ResponseBlurb from '@/components/graph/widgets/chatHistory/ResponseBlurb.vue'
-import { ComponentWidget } from '@/scripts/domWidget'
+import type { ComponentWidget } from '@/scripts/domWidget'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 
 const { widget, history } = defineProps<{

src/components/graph/widgets/DomWidget.vue

@@ -19,14 +19,15 @@
 
 <script setup lang="ts">
 import { useElementBounding, useEventListener } from '@vueuse/core'
-import { CSSProperties, computed, nextTick, onMounted, ref, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { useDomClipping } from '@/composables/element/useDomClipping'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { isComponentWidget, isDOMWidget } from '@/scripts/domWidget'
-import { DomWidgetState } from '@/stores/domWidgetStore'
+import type { DomWidgetState } from '@/stores/domWidgetStore'
 
 const { widgetState } = defineProps<{
   widgetState: DomWidgetState
@@ -124,43 +125,50 @@ watch(
     }
   }
 )
-useEventListener(document, 'mousedown', (event) => {
-  if (!isDOMWidget(widget) || !widgetState.visible || !widget.element.blur) {
-    return
-  }
-  if (!widget.element.contains(event.target as HTMLElement)) {
-    widget.element.blur()
-  }
-})
 
-onMounted(() => {
-  if (!isDOMWidget(widget)) {
-    return
+// Set up event listeners only after the widget is mounted and visible
+const setupDOMEventListeners = () => {
+  if (!isDOMWidget(widget) || !widgetState.visible) return
+
+  if (widget.element.blur) {
+    useEventListener(document, 'mousedown', (event) => {
+      if (!widget.element.contains(event.target as HTMLElement)) {
+        widget.element.blur()
+      }
+    })
   }
-  useEventListener(
-    widget.element,
-    widget.options.selectOn ?? ['focus', 'click'],
-    () => {
+
+  for (const evt of widget.options.selectOn ?? ['focus', 'click']) {
+    useEventListener(widget.element, evt, () => {
       const lgCanvas = canvasStore.canvas
       lgCanvas?.selectNode(widget.node)
       lgCanvas?.bringToFront(widget.node)
+    })
+  }
+}
+
+// Set up event listeners when widget becomes visible
+watch(
+  () => widgetState.visible,
+  (visible) => {
+    if (visible) {
+      setupDOMEventListeners()
     }
-  )
-})
+  },
+  { immediate: true }
+)
 
 const inputSpec = widget.node.constructor.nodeData
 const tooltip = inputSpec?.inputs?.[widget.name]?.tooltip
 
 // Mount DOM element when widget is or becomes visible
 const mountElementIfVisible = () => {
-  if (!(widgetState.visible && isDOMWidget(widget) && widgetElement.value)) {
-    return
+  if (widgetState.visible && isDOMWidget(widget) && widgetElement.value) {
+    // Only append if not already a child
+    if (!widgetElement.value.contains(widget.element)) {
+      widgetElement.value.appendChild(widget.element)
+    }
   }
-  // Only append if not already a child
-  if (widgetElement.value.contains(widget.element)) {
-    return
-  }
-  widgetElement.value.appendChild(widget.element)
 }
 
 // Check on mount - but only after next tick to ensure visibility is calculated

src/components/graph/widgets/TextPreviewWidget.vue

@@ -15,7 +15,7 @@
 import Skeleton from 'primevue/skeleton'
 import { computed, onMounted, ref, watch } from 'vue'
 
-import { NodeId } from '@/lib/litegraph/src/litegraph'
+import type { NodeId } from '@/lib/litegraph/src/litegraph'
 import { useExecutionStore } from '@/stores/executionStore'
 import { linkifyHtml, nl2br } from '@/utils/formatUtil'
 

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -144,7 +144,7 @@ import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
 import { useConflictAcknowledgment } from '@/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/composables/useManagerState'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { type ReleaseNote } from '@/platform/updates/common/releaseService'
+import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { ManagerTab } from '@/types/comfyManagerTypes'

src/components/input/MultiSelect.accessibility.stories.ts

@@ -3,7 +3,7 @@ import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'
 
 // Combine our component props with PrimeVue MultiSelect props
 interface ExtendedProps extends Partial<MultiSelectProps> {

src/components/input/MultiSelect.stories.ts

@@ -3,7 +3,7 @@ import type { MultiSelectProps } from 'primevue/multiselect'
 import { ref } from 'vue'
 
 import MultiSelect from './MultiSelect.vue'
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'
 
 // Combine our component props with PrimeVue MultiSelect props
 // Since we use v-bind="$attrs", all PrimeVue props are available

src/components/input/MultiSelect.vue

@@ -106,9 +106,8 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import MultiSelect, {
-  MultiSelectPassThroughMethodOptions
-} from 'primevue/multiselect'
+import type { MultiSelectPassThroughMethodOptions } from 'primevue/multiselect'
+import MultiSelect from 'primevue/multiselect'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -117,7 +116,7 @@ import { usePopoverSizing } from '@/composables/usePopoverSizing'
 import { cn } from '@/utils/tailwindUtil'
 
 import TextButton from '../button/TextButton.vue'
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'
 
 type Option = SelectOption
 

src/components/input/SingleSelect.vue

@@ -58,13 +58,14 @@
 </template>
 
 <script setup lang="ts">
-import Select, { SelectPassThroughMethodOptions } from 'primevue/select'
+import type { SelectPassThroughMethodOptions } from 'primevue/select'
+import Select from 'primevue/select'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { cn } from '@/utils/tailwindUtil'
 
-import { type SelectOption } from './types'
+import type { SelectOption } from './types'
 
 defineOptions({
   inheritAttrs: false

src/components/install/DesktopSettingsConfiguration.vue

@@ -10,14 +10,14 @@
       </p>
     </div>
 
-    <div class="flex flex-col bg-neutral-800 p-4 rounded-lg text-sm">
+    <div class="flex flex-col bg-neutral-800 p-4 rounded-lg">
       <!-- 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-neutral-400 mt-1">
+          <p class="text-sm text-neutral-400 mt-1">
             {{ $t('install.settings.autoUpdateDescription') }}
           </p>
         </div>
@@ -32,10 +32,14 @@
           <h3 class="text-lg font-medium text-neutral-100">
             {{ $t('install.settings.allowMetrics') }}
           </h3>
-          <p class="text-neutral-400">
+          <p class="text-sm text-neutral-400 mt-1">
             {{ $t('install.settings.allowMetricsDescription') }}
           </p>
-          <a href="#" @click.prevent="showMetricsInfo">
+          <a
+            href="#"
+            class="text-sm text-blue-400 hover:text-blue-300 mt-1 inline-block"
+            @click.prevent="showMetricsInfo"
+          >
             {{ $t('install.settings.learnMoreAboutData') }}
           </a>
         </div>
@@ -47,9 +51,7 @@
     <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">
@@ -108,7 +110,11 @@
         </ul>
 
         <div class="mt-4">
-          <a href="https://comfy.org/privacy" target="_blank">
+          <a
+            href="https://comfy.org/privacy"
+            target="_blank"
+            class="text-blue-400 hover:text-blue-300 underline"
+          >
             {{ $t('install.settings.dataCollectionDialog.viewFullPolicy') }}
           </a>
         </div>

src/components/install/GpuPicker.vue

@@ -1,66 +1,130 @@
 <template>
-  <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>
+  <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>
 
-    <!-- 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>
+      <p class="m-1 text-neutral-400">
+        {{ $t('install.gpuSelection.selectGpuDescription') }}:
+      </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" />
+      <!-- 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>
     </div>
 
-    <div class="text-neutral-300 px-24">
-      <p v-show="descriptionText" class="leading-relaxed">
-        {{ descriptionText }}
-      </p>
+    <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>
   </div>
 </template>
@@ -68,12 +132,20 @@
 <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
 })
@@ -81,23 +153,55 @@ const selected = defineModel<TorchDeviceType | null>('device', {
 const electron = electronAPI()
 const platform = electron.getPlatform()
 
-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
+const pickGpu = (value: typeof selected.value) => {
+  const newValue = selected.value === value ? null : value
+  selected.value = newValue
 }
 </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

@@ -1,73 +0,0 @@
-// 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

@@ -1,55 +0,0 @@
-<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

@@ -1,79 +0,0 @@
-<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

@@ -1,148 +0,0 @@
-// 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,215 +1,103 @@
 <template>
-  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
+  <div class="flex flex-col gap-6 w-[600px]">
     <!-- Installation Path Section -->
-    <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') }}
+    <div class="flex flex-col gap-4">
+      <h2 class="text-2xl font-semibold text-neutral-100">
+        {{ $t('install.chooseInstallationLocation') }}
       </h2>
 
-      <p class="text-center text-neutral-400 px-12">
-        {{ $t('install.locationPicker.subtitle') }}
+      <p class="text-neutral-400 my-0">
+        {{ $t('install.installLocationDescription') }}
       </p>
 
-      <!-- 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 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" />
       </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>
+      <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>
       </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 Divider from 'primevue/divider'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
-import { type ModelRef, computed, onMounted, ref } from 'vue'
+import { 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()
 
-// 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
+// Get system paths 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) => {
@@ -263,52 +151,3 @@ 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

@@ -1,45 +0,0 @@
-// 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,6 +2,10 @@
   <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>
@@ -9,7 +13,7 @@
       <div class="flex gap-2">
         <InputText
           v-model="sourcePath"
-          :placeholder="$t('install.locationPicker.migrationPathPlaceholder')"
+          placeholder="Select existing ComfyUI installation (optional)"
           class="flex-1"
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validateSource"
@@ -23,7 +27,10 @@
     </div>
 
     <!-- Migration Options -->
-    <div v-if="isValidSource" class="flex flex-col gap-4 p-4 rounded-lg">
+    <div
+      v-if="isValidSource"
+      class="flex flex-col gap-4 bg-neutral-800 p-4 rounded-lg"
+    >
       <h3 class="text-lg mt-0 font-medium text-neutral-100">
         {{ $t('install.selectItemsToMigrate') }}
       </h3>

src/components/install/MirrorsConfiguration.vue

@@ -0,0 +1,121 @@
+<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 gap-4 text-neutral-400 text-sm">
-    <div>
-      <h3 class="text-lg font-medium text-neutral-100 mb-3 mt-0">
+  <div class="flex flex-col items-center gap-4">
+    <div class="w-full">
+      <h3 class="text-lg font-medium text-neutral-100">
         {{ $t(`settings.${normalizedSettingId}.name`) }}
       </h3>
-      <p class="my-1">
+      <p class="text-sm text-neutral-400 mt-1">
         {{ $t(`settings.${normalizedSettingId}.tooltip`) }}
       </p>
     </div>
@@ -16,61 +16,18 @@
       "
       @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 { UVMirror } from '@/constants/uvMirrors'
-import { st } from '@/i18n'
+import type { UVMirror } from '@/constants/uvMirrors'
 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
 }>()
@@ -81,16 +38,11 @@ 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/load3d/Load3D.vue

@@ -95,7 +95,7 @@ import Load3DScene from '@/components/load3d/Load3DScene.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
 import ViewerControls from '@/components/load3d/controls/ViewerControls.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import {
+import type {
   CameraType,
   Load3DNodeType,
   MaterialMode,

src/components/load3d/Load3DAnimation.vue

@@ -93,7 +93,7 @@ import Load3DAnimationScene from '@/components/load3d/Load3DAnimationScene.vue'
 import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import RecordingControls from '@/components/load3d/controls/RecordingControls.vue'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
-import {
+import type {
   AnimationItem,
   CameraType,
   Load3DAnimationNodeType,

src/components/load3d/Load3DAnimationScene.vue

@@ -27,13 +27,13 @@
 import { ref, watch } from 'vue'
 
 import Load3DScene from '@/components/load3d/Load3DScene.vue'
-import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import {
+import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import type {
   CameraType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
-import { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 
 const props = defineProps<{
   node: any

src/components/load3d/Load3DControls.vue

@@ -99,7 +99,7 @@ import ExportControls from '@/components/load3d/controls/ExportControls.vue'
 import LightControls from '@/components/load3d/controls/LightControls.vue'
 import ModelControls from '@/components/load3d/controls/ModelControls.vue'
 import SceneControls from '@/components/load3d/controls/SceneControls.vue'
-import {
+import type {
   CameraType,
   MaterialMode,
   UpDirection

src/components/load3d/Load3DScene.vue

@@ -8,15 +8,15 @@
 import { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
-import Load3d from '@/extensions/core/load3d/Load3d'
-import Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import {
+import type Load3d from '@/extensions/core/load3d/Load3d'
+import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
+import type {
   CameraType,
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useLoad3dService } from '@/services/load3dService'
 

src/components/load3d/Load3dViewerContent.vue

@@ -76,7 +76,7 @@ import LightControls from '@/components/load3d/controls/viewer/ViewerLightContro
 import ModelControls from '@/components/load3d/controls/viewer/ViewerModelControls.vue'
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 

src/components/load3d/controls/CameraControls.vue

@@ -40,7 +40,7 @@ import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { CameraType } from '@/extensions/core/load3d/interfaces'
+import type { CameraType } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
 const vTooltip = Tooltip

src/components/load3d/controls/ModelControls.vue

@@ -99,7 +99,10 @@ import Button from 'primevue/button'
 import Slider from 'primevue/slider'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
+import type {
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 

src/components/load3d/controls/RecordingControls.vue

@@ -79,7 +79,7 @@ import { Tooltip } from 'primevue'
 import Button from 'primevue/button'
 
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { useLoad3dService } from '@/services/load3dService'
 
 const vTooltip = Tooltip

src/components/load3d/controls/ViewerControls.vue

@@ -20,7 +20,7 @@ import Button from 'primevue/button'
 
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import { t } from '@/i18n'
-import { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 

src/components/load3d/controls/viewer/ViewerCameraControls.vue

@@ -23,7 +23,7 @@ import Select from 'primevue/select'
 import Slider from 'primevue/slider'
 import { computed } from 'vue'
 
-import { CameraType } from '@/extensions/core/load3d/interfaces'
+import type { CameraType } from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
 const cameras = [

src/components/load3d/controls/viewer/ViewerModelControls.vue

@@ -26,7 +26,10 @@
 import Select from 'primevue/select'
 import { computed } from 'vue'
 
-import { MaterialMode, UpDirection } from '@/extensions/core/load3d/interfaces'
+import type {
+  MaterialMode,
+  UpDirection
+} from '@/extensions/core/load3d/interfaces'
 import { t } from '@/i18n'
 
 const upDirection = defineModel<UpDirection>('upDirection')

src/components/maintenance/TaskListItem.vue

@@ -47,7 +47,7 @@ import { computed, ref } from 'vue'
 
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { PrimeVueSeverity } from '@/types/primeVueTypes'
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 import TaskListStatusIcon from './TaskListStatusIcon.vue'

src/components/maintenance/TaskListStatusIcon.vue

@@ -8,7 +8,8 @@
 <script setup lang="ts">
 import { PrimeIcons } from '@primevue/core/api'
 import ProgressSpinner from 'primevue/progressspinner'
-import { MaybeRef, computed } from 'vue'
+import type { MaybeRef } from 'vue'
+import { computed } from 'vue'
 
 import { t } from '@/i18n'
 

src/components/maintenance/TerminalOutputDrawer.vue

@@ -10,9 +10,10 @@
 </template>
 
 <script setup lang="ts">
-import { Terminal } from '@xterm/xterm'
+import type { Terminal } from '@xterm/xterm'
 import Drawer from 'primevue/drawer'
-import { Ref, onMounted } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted } from 'vue'
 
 import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
 import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'

src/components/searchbox/NodeSearchBox.vue

@@ -88,11 +88,8 @@ import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue
 import NodeSearchFilter from '@/components/searchbox/NodeSearchFilter.vue'
 import NodeSearchItem from '@/components/searchbox/NodeSearchItem.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import {
-  ComfyNodeDefImpl,
-  useNodeDefStore,
-  useNodeFrequencyStore
-} from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore, useNodeFrequencyStore } from '@/stores/nodeDefStore'
 import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import SearchFilterChip from '../common/SearchFilterChip.vue'

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -38,21 +38,19 @@ import { storeToRefs } from 'pinia'
 import Dialog from 'primevue/dialog'
 import { computed, ref, toRaw, watch, watchEffect } from 'vue'
 
-import { Point } from '@/lib/litegraph/src/interfaces'
-import {
-  LGraphNode,
-  LiteGraph,
-  LiteGraphCanvasEvent
-} from '@/lib/litegraph/src/litegraph'
+import type { Point } from '@/lib/litegraph/src/interfaces'
+import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
+import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useLitegraphService } from '@/services/litegraphService'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { LinkReleaseTriggerAction } from '@/types/searchBoxTypes'
-import { FuseFilterWithValue } from '@/utils/fuseUtil'
+import type { FuseFilterWithValue } from '@/utils/fuseUtil'
 
 import NodeSearchBox from './NodeSearchBox.vue'
 

src/components/searchbox/NodeSearchFilter.vue

@@ -27,8 +27,9 @@ import Select from 'primevue/select'
 import SelectButton from 'primevue/selectbutton'
 import { computed, onMounted, ref } from 'vue'
 
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+import type { FuseFilter, FuseFilterWithValue } from '@/utils/fuseUtil'
 
 const filters = computed(() => nodeDefStore.nodeSearchService.nodeFilters)
 const selectedFilter = ref<FuseFilter<ComfyNodeDefImpl, string>>()