Decouple Desktop UI into monorepo app (#5912)

## Summary Extracts desktop UI into apps/desktop-ui package with minimal changes. ## Changes - **What**: - Separates desktop-specific code into standalone package with independent Vite config, router, and i18n - Drastically simplifies the main app router by removing all desktop routes - Adds a some code duplication, most due to the existing design - Some duplication can be refactored to be *simpler* on either side - no need to split things by `isElectron()` - Rudimentary storybook support has been added - **Breaking**: Stacked PR for publishing must be merged before this PR makes it to stable core (but publishing _could_ be done manually) - #5915 - **Dependencies**: Takes full advantage of pnpm catalog. No additional dependencies added. ## Review Focus - Should be no changes to normal frontend operation - Scripts added to root package.json are acceptable - The duplication in this PR is copied as is, wherever possible. Any corrections or fix-ups beyond the scope of simply migrating the functionality as-is, can be addressed in later PRs. That said, if any changes are made, it instantly becomes more difficult to separate the duplicated code out into a shared utility. - Tracking issue to address concerns: #5925 ### i18n Fixing i18n is out of scope for this PR. It is a larger task that we should consider carefully and implement properly. Attempting to isolate the desktop i18n and duplicate the _current_ localisation scripts would be wasted energy.
2026-01-26 19:09:52 +00:00 · 2025-10-05 16:04:27 +11:00
parent ac9ebe1266
commit 07a74e3cdc
72 changed files with 1213 additions and 101 deletions
--- a/apps/desktop-ui/.storybook/main.ts
+++ b/apps/desktop-ui/.storybook/main.ts
@@ -0,0 +1,103 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import IconsResolver from 'unplugin-icons/resolver'
+import Icons from 'unplugin-icons/vite'
+import Components from 'unplugin-vue-components/vite'
+import type { InlineConfig } from 'vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  staticDirs: [{ from: '../public', to: '/' }],
+  async viteFinal(config) {
+    // Use dynamic import to avoid CJS deprecation warning
+    const { mergeConfig } = await import('vite')
+    const { default: tailwindcss } = await import('@tailwindcss/vite')
+
+    // Filter out any plugins that might generate import maps
+    if (config.plugins) {
+      config.plugins = config.plugins
+        // Type guard: ensure we have valid plugin objects with names
+        .filter(
+          (plugin): plugin is NonNullable<typeof plugin> & { name: string } => {
+            return (
+              plugin !== null &&
+              plugin !== undefined &&
+              typeof plugin === 'object' &&
+              'name' in plugin &&
+              typeof plugin.name === 'string'
+            )
+          }
+        )
+        // Business logic: filter out import-map plugins
+        .filter((plugin) => !plugin.name.includes('import-map'))
+    }
+
+    return mergeConfig(config, {
+      // Replace plugins entirely to avoid inheritance issues
+      plugins: [
+        // Only include plugins we explicitly need for Storybook
+        tailwindcss(),
+        Icons({
+          compiler: 'vue3',
+          customCollections: {
+            comfy: FileSystemIconLoader(
+              process.cwd() + '/../../packages/design-system/src/icons'
+            )
+          }
+        }),
+        Components({
+          dts: false, // Disable dts generation in Storybook
+          resolvers: [
+            IconsResolver({
+              customCollections: ['comfy']
+            })
+          ],
+          dirs: [
+            process.cwd() + '/src/components',
+            process.cwd() + '/src/views'
+          ],
+          deep: true,
+          extensions: ['vue'],
+          directoryAsNamespace: true
+        })
+      ],
+      server: {
+        allowedHosts: true
+      },
+      resolve: {
+        alias: {
+          '@': process.cwd() + '/src',
+          '@frontend-locales': process.cwd() + '/../../src/locales'
+        }
+      },
+      build: {
+        rollupOptions: {
+          onwarn: (warning, warn) => {
+            // Suppress specific warnings
+            if (
+              warning.code === 'UNUSED_EXTERNAL_IMPORT' &&
+              warning.message?.includes('resolveComponent')
+            ) {
+              return
+            }
+            // Suppress Storybook font asset warnings
+            if (
+              warning.code === 'UNRESOLVED_IMPORT' &&
+              warning.message?.includes('nunito-sans')
+            ) {
+              return
+            }
+            warn(warning)
+          }
+        },
+        chunkSizeWarningLimit: 1000
+      }
+    } satisfies InlineConfig)
+  }
+}
+export default config
--- a/apps/desktop-ui/.storybook/preview.ts
+++ b/apps/desktop-ui/.storybook/preview.ts
@@ -0,0 +1,88 @@
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
+import { setup } from '@storybook/vue3'
+import type { Preview, StoryContext, StoryFn } from '@storybook/vue3-vite'
+import { createPinia } from 'pinia'
+import 'primeicons/primeicons.css'
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+import Tooltip from 'primevue/tooltip'
+
+import '@/assets/css/style.css'
+import { i18n } from '@/i18n'
+
+const ComfyUIPreset = definePreset(Aura, {
+  semantic: {
+    // @ts-expect-error prime type quirk
+    primary: Aura['primitive'].blue
+  }
+})
+
+setup((app) => {
+  app.directive('tooltip', Tooltip)
+
+  const pinia = createPinia()
+
+  app.use(pinia)
+  app.use(i18n)
+  app.use(PrimeVue, {
+    theme: {
+      preset: ComfyUIPreset,
+      options: {
+        prefix: 'p',
+        cssLayer: { name: 'primevue', order: 'primevue, tailwind-utilities' },
+        darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
+      }
+    }
+  })
+  app.use(ConfirmationService)
+  app.use(ToastService)
+})
+
+export const withTheme = (Story: StoryFn, context: StoryContext) => {
+  const theme = context.globals.theme || 'light'
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark-theme')
+    document.body.classList.add('dark-theme')
+  } else {
+    document.documentElement.classList.remove('dark-theme')
+    document.body.classList.remove('dark-theme')
+  }
+
+  return Story(context.args, context)
+}
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: { color: /(background|color)$/i, date: /Date$/i }
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        { name: 'light', value: '#ffffff' },
+        { name: 'dark', value: '#0a0a0a' }
+      ]
+    }
+  },
+  globalTypes: {
+    theme: {
+      name: 'Theme',
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        icon: 'circlehollow',
+        items: [
+          { value: 'light', icon: 'sun', title: 'Light' },
+          { value: 'dark', icon: 'moon', title: 'Dark' }
+        ],
+        showName: true,
+        dynamicTitle: true
+      }
+    }
+  },
+  decorators: [withTheme]
+}
+
+export default preview
--- a/apps/desktop-ui/index.html
+++ b/apps/desktop-ui/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ComfyUI Desktop</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+  </head>
+  <body>
+    <div id="desktop-app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>
--- a/apps/desktop-ui/package.json
+++ b/apps/desktop-ui/package.json
@@ -0,0 +1,117 @@
+{
+  "name": "@comfyorg/desktop-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "nx": {
+    "tags": [
+      "scope:desktop",
+      "type:app"
+    ],
+    "targets": {
+      "dev": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite --config vite.config.mts"
+        }
+      },
+      "serve": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite --config vite.config.mts"
+        }
+      },
+      "build": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "dependsOn": [
+          "^build"
+        ],
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite build --config vite.config.mts"
+        },
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      },
+      "preview": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "dependsOn": [
+          "build"
+        ],
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vite preview --config vite.config.mts"
+        }
+      },
+      "storybook": {
+        "executor": "nx:run-commands",
+        "continuous": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "storybook dev -p 6007"
+        }
+      },
+      "build-storybook": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "storybook build -o dist/storybook"
+        },
+        "outputs": [
+          "{projectRoot}/dist/storybook"
+        ]
+      },
+      "lint": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "eslint src --cache"
+        }
+      },
+      "typecheck": {
+        "executor": "nx:run-commands",
+        "cache": true,
+        "options": {
+          "cwd": "apps/desktop-ui",
+          "command": "vue-tsc --noEmit -p tsconfig.json"
+        }
+      }
+    }
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build -o dist/storybook"
+  },
+  "dependencies": {
+    "@comfyorg/comfyui-electron-types": "0.4.73-0",
+    "@comfyorg/shared-frontend-utils": "workspace:*",
+    "@primevue/core": "catalog:",
+    "@primevue/themes": "catalog:",
+    "@vueuse/core": "catalog:",
+    "pinia": "catalog:",
+    "primeicons": "catalog:",
+    "primevue": "catalog:",
+    "vue": "catalog:",
+    "vue-i18n": "catalog:",
+    "vue-router": "catalog:"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "catalog:",
+    "@vitejs/plugin-vue": "catalog:",
+    "dotenv": "catalog:",
+    "unplugin-icons": "catalog:",
+    "unplugin-vue-components": "catalog:",
+    "vite": "catalog:",
+    "vite-plugin-html": "catalog:",
+    "vite-plugin-vue-devtools": "catalog:",
+    "vue-tsc": "catalog:"
+  }
+}
--- a/apps/desktop-ui/public/assets/images/Git-Logo-White.svg
+++ b/apps/desktop-ui/public/assets/images/Git-Logo-White.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="292" height="92pt" viewBox="0 0 219 92"><defs><clipPath id="a"><path d="M159 .79h25V69h-25Zm0 0"/></clipPath><clipPath id="b"><path d="M183 9h35.371v60H183Zm0 0"/></clipPath><clipPath id="c"><path d="M0 .79h92V92H0Zm0 0"/></clipPath></defs><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M130.871 31.836c-4.785 0-8.351 2.352-8.351 8.008 0 4.261 2.347 7.222 8.093 7.222 4.871 0 8.18-2.867 8.18-7.398 0-5.133-2.961-7.832-7.922-7.832Zm-9.57 39.95c-1.133 1.39-2.262 2.87-2.262 4.612 0 3.48 4.434 4.524 10.527 4.524 5.051 0 11.926-.352 11.926-5.043 0-2.793-3.308-2.965-7.488-3.227Zm25.761-39.688c1.563 2.004 3.22 4.789 3.22 8.793 0 9.656-7.571 15.316-18.536 15.316-2.789 0-5.312-.348-6.879-.785l-2.87 4.613 8.526.52c15.059.96 23.934 1.398 23.934 12.968 0 10.008-8.789 15.665-23.934 15.665-15.75 0-21.757-4.004-21.757-10.88 0-3.917 1.742-6 4.789-8.878-2.875-1.211-3.828-3.387-3.828-5.739 0-1.914.953-3.656 2.523-5.312 1.566-1.652 3.305-3.305 5.395-5.219-4.262-2.09-7.485-6.617-7.485-13.058 0-10.008 6.613-16.88 19.93-16.88 3.742 0 6.004.344 8.008.872h16.972v7.394l-8.007.61"/><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M170.379 16.281c-4.961 0-7.832-2.87-7.832-7.836 0-4.957 2.871-7.656 7.832-7.656 5.05 0 7.922 2.7 7.922 7.656 0 4.965-2.871 7.836-7.922 7.836Zm-11.227 52.305V61.71l4.438-.606c1.219-.175 1.394-.437 1.394-1.746V33.773c0-.953-.261-1.566-1.132-1.824l-4.7-1.656.957-7.047h18.016V59.36c0 1.399.086 1.57 1.395 1.746l4.437.606v6.875h-24.805"/></g><g clip-path="url(#b)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M218.371 65.21c-3.742 1.825-9.223 3.481-14.187 3.481-10.356 0-14.27-4.175-14.27-14.015V31.879c0-.524 0-.871-.7-.871h-6.093v-7.746c7.664-.871 10.707-4.703 11.664-14.188h8.27v12.36c0 .609 0 .87.695.87h12.27v8.704h-12.965v20.797c0 5.136 1.218 7.136 5.918 7.136 2.437 0 4.96-.609 7.047-1.39l2.351 7.66"/></g><g clip-path="url(#c)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M89.422 42.371 49.629 2.582a5.868 5.868 0 0 0-8.3 0l-8.263 8.262 10.48 10.484a6.965 6.965 0 0 1 7.173 1.668 6.98 6.98 0 0 1 1.656 7.215l10.102 10.105a6.963 6.963 0 0 1 7.214 1.657 6.976 6.976 0 0 1 0 9.875 6.98 6.98 0 0 1-9.879 0 6.987 6.987 0 0 1-1.519-7.594l-9.422-9.422v24.793a6.979 6.979 0 0 1 1.848 1.32 6.988 6.988 0 0 1 0 9.88c-2.73 2.726-7.153 2.726-9.875 0a6.98 6.98 0 0 1 0-9.88 6.893 6.893 0 0 1 2.285-1.523V34.398a6.893 6.893 0 0 1-2.285-1.523 6.988 6.988 0 0 1-1.508-7.637L29.004 14.902 1.719 42.187a5.868 5.868 0 0 0 0 8.301l39.793 39.793a5.868 5.868 0 0 0 8.3 0l39.61-39.605a5.873 5.873 0 0 0 0-8.305"/></g></svg>
--- a/apps/desktop-ui/public/assets/images/apple-mps-logo.png
+++ b/apps/desktop-ui/public/assets/images/apple-mps-logo.png
--- a/apps/desktop-ui/public/assets/images/comfy-brand-mark.svg
+++ b/apps/desktop-ui/public/assets/images/comfy-brand-mark.svg
--- a/apps/desktop-ui/public/assets/images/nvidia-logo-square.jpg
+++ b/apps/desktop-ui/public/assets/images/nvidia-logo-square.jpg
--- a/apps/desktop-ui/public/assets/images/sad_girl.png
+++ b/apps/desktop-ui/public/assets/images/sad_girl.png
--- a/apps/desktop-ui/src/App.vue
+++ b/apps/desktop-ui/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
--- a/apps/desktop-ui/src/assets/css/style.css
+++ b/apps/desktop-ui/src/assets/css/style.css
@@ -0,0 +1,6 @@
+@import '@comfyorg/design-system/css/style.css';
+
+#desktop-app {
+  position: absolute;
+  inset: 0;
+}
--- a/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -0,0 +1,113 @@
+<template>
+  <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>
+    <Button
+      v-tooltip.left="{
+        value: tooltipText,
+        showDelay: 300
+      }"
+      icon="pi pi-copy"
+      severity="secondary"
+      size="small"
+      :class="
+        cn('absolute top-2 right-8 transition-opacity', {
+          'opacity-0 pointer-events-none select-none': !isHovered
+        })
+      "
+      :aria-label="tooltipText"
+      @click="handleCopy"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useElementHover, useEventListener } from '@vueuse/core'
+import type { IDisposable } from '@xterm/xterm'
+import Button from 'primevue/button'
+import type { Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import { electronAPI, isElectron } from '@/utils/envUtil'
+import { cn } from '@/utils/tailwindUtil'
+
+const { t } = useI18n()
+
+const emit = defineEmits<{
+  created: [ReturnType<typeof useTerminal>, Ref<HTMLElement | undefined>]
+  unmounted: []
+}>()
+const terminalEl = ref<HTMLElement | undefined>()
+const rootEl = ref<HTMLElement | undefined>()
+const hasSelection = ref(false)
+
+const isHovered = useElementHover(rootEl)
+
+const terminalData = useTerminal(terminalEl)
+emit('created', terminalData, ref(rootEl))
+
+const { terminal } = terminalData
+let selectionDisposable: IDisposable | undefined
+
+const tooltipText = computed(() => {
+  return hasSelection.value
+    ? t('serverStart.copySelectionTooltip')
+    : t('serverStart.copyAllTooltip')
+})
+
+const handleCopy = async () => {
+  const existingSelection = terminal.getSelection()
+  const shouldSelectAll = !existingSelection
+  if (shouldSelectAll) terminal.selectAll()
+
+  const selectedText = shouldSelectAll
+    ? terminal.getSelection()
+    : existingSelection
+
+  if (selectedText) {
+    await navigator.clipboard.writeText(selectedText)
+
+    if (shouldSelectAll) {
+      terminal.clearSelection()
+    }
+  }
+}
+
+const showContextMenu = (event: MouseEvent) => {
+  event.preventDefault()
+  electronAPI()?.showContextMenu({ type: 'text' })
+}
+
+if (isElectron()) {
+  useEventListener(terminalEl, 'contextmenu', showContextMenu)
+}
+
+onMounted(() => {
+  selectionDisposable = terminal.onSelectionChange(() => {
+    hasSelection.value = terminal.hasSelection()
+  })
+})
+
+onUnmounted(() => {
+  selectionDisposable?.dispose()
+  emit('unmounted')
+})
+</script>
+
+<style scoped>
+@reference '../../../../assets/css/style.css';
+
+:deep(.p-terminal) .xterm {
+  @apply overflow-hidden;
+}
+
+:deep(.p-terminal) .xterm-screen {
+  @apply bg-neutral-900 overflow-hidden;
+}
+</style>
--- a/apps/desktop-ui/src/components/common/RefreshButton.vue
+++ b/apps/desktop-ui/src/components/common/RefreshButton.vue
@@ -0,0 +1,52 @@
+<!--
+  A refresh button that disables and shows a progress spinner whilst active.
+
+  Usage:
+  ```vue
+    <RefreshButton
+      v-model="isRefreshing"
+      :outlined="false"
+      @refresh="refresh"
+    />
+  ```
+-->
+<template>
+  <Button
+    class="relative p-button-icon-only"
+    :outlined="outlined"
+    :severity="severity"
+    :disabled="active || disabled"
+    @click="(event) => $emit('refresh', event)"
+  >
+    <span
+      class="p-button-icon pi pi-refresh transition-all"
+      :class="{ 'opacity-0': active }"
+      data-pc-section="icon"
+    />
+    <span class="p-button-label" data-pc-section="label">&nbsp;</span>
+    <ProgressSpinner v-show="active" class="absolute w-1/2 h-1/2" />
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'
+
+const {
+  disabled,
+  outlined = true,
+  severity = 'secondary'
+} = defineProps<{
+  disabled?: boolean
+  outlined?: boolean
+  severity?: PrimeVueSeverity
+}>()
+
+// Model
+const active = defineModel<boolean>({ required: true })
+
+// Emits
+defineEmits(['refresh'])
+</script>
--- a/apps/desktop-ui/src/components/common/StartupDisplay.vue
+++ b/apps/desktop-ui/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>
--- a/apps/desktop-ui/src/components/common/UrlInput.vue
+++ b/apps/desktop-ui/src/components/common/UrlInput.vue
@@ -0,0 +1,129 @@
+<template>
+  <IconField class="w-full">
+    <InputText
+      v-bind="$attrs"
+      :model-value="internalValue"
+      class="w-full"
+      :invalid="validationState === ValidationState.INVALID"
+      @update:model-value="handleInput"
+      @blur="handleBlur"
+    />
+    <InputIcon
+      :class="{
+        'pi pi-spin pi-spinner text-neutral-400':
+          validationState === ValidationState.LOADING,
+        'pi pi-check text-green-500 cursor-pointer':
+          validationState === ValidationState.VALID,
+        'pi pi-times text-red-500 cursor-pointer':
+          validationState === ValidationState.INVALID
+      }"
+      @click="validateUrl(props.modelValue)"
+    />
+  </IconField>
+</template>
+
+<script setup lang="ts">
+import { isValidUrl } from '@comfyorg/shared-frontend-utils/formatUtil'
+import { checkUrlReachable } from '@comfyorg/shared-frontend-utils/networkUtil'
+import IconField from 'primevue/iconfield'
+import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
+import { onMounted, ref, watch } from 'vue'
+
+import { ValidationState } from '@/utils/validationUtil'
+
+const props = defineProps<{
+  modelValue: string
+  validateUrlFn?: (url: string) => Promise<boolean>
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'state-change': [state: ValidationState]
+}>()
+
+const validationState = ref<ValidationState>(ValidationState.IDLE)
+
+const cleanInput = (value: string): string =>
+  value ? value.replace(/\s+/g, '') : ''
+
+// Add internal value state
+const internalValue = ref(cleanInput(props.modelValue))
+
+// Watch for external modelValue changes
+watch(
+  () => props.modelValue,
+  async (newValue: string) => {
+    internalValue.value = cleanInput(newValue)
+    await validateUrl(newValue)
+  }
+)
+
+watch(validationState, (newState) => {
+  emit('state-change', newState)
+})
+
+// Validate on mount
+onMounted(async () => {
+  await validateUrl(props.modelValue)
+})
+
+const handleInput = (value: string | undefined) => {
+  // Update internal value without emitting
+  internalValue.value = cleanInput(value ?? '')
+  // Reset validation state when user types
+  validationState.value = ValidationState.IDLE
+}
+
+const handleBlur = async () => {
+  const input = cleanInput(internalValue.value)
+
+  let normalizedUrl = input
+  try {
+    const url = new URL(input)
+    normalizedUrl = url.toString()
+  } catch {
+    // If URL parsing fails, just use the cleaned input
+  }
+
+  // Emit the update only on blur
+  emit('update:modelValue', normalizedUrl)
+}
+
+// Default validation implementation
+const defaultValidateUrl = async (url: string): Promise<boolean> => {
+  if (!isValidUrl(url)) return false
+  try {
+    return await checkUrlReachable(url)
+  } catch {
+    return false
+  }
+}
+
+const validateUrl = async (value: string) => {
+  if (validationState.value === ValidationState.LOADING) return
+
+  const url = cleanInput(value)
+
+  // Reset state
+  validationState.value = ValidationState.IDLE
+
+  // Skip validation if empty
+  if (!url) return
+
+  validationState.value = ValidationState.LOADING
+  try {
+    const isValid = await (props.validateUrlFn ?? defaultValidateUrl)(url)
+    validationState.value = isValid
+      ? ValidationState.VALID
+      : ValidationState.INVALID
+  } catch {
+    validationState.value = ValidationState.INVALID
+  }
+}
+
+// Add inheritAttrs option to prevent attrs from being applied to root element
+defineOptions({
+  inheritAttrs: false
+})
+</script>
--- a/apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue
+++ b/apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="flex flex-col gap-6 w-[600px]">
+    <div class="flex flex-col gap-4">
+      <h2 class="text-2xl font-semibold text-neutral-100">
+        {{ $t('install.desktopAppSettings') }}
+      </h2>
+
+      <p class="text-neutral-400 my-0">
+        {{ $t('install.desktopAppSettingsDescription') }}
+      </p>
+    </div>
+
+    <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-neutral-400 mt-1">
+            {{ $t('install.settings.autoUpdateDescription') }}
+          </p>
+        </div>
+        <ToggleSwitch v-model="autoUpdate" />
+      </div>
+
+      <Divider />
+
+      <!-- Metrics Collection Setting -->
+      <div class="flex items-center gap-4">
+        <div class="flex-1">
+          <h3 class="text-lg font-medium text-neutral-100">
+            {{ $t('install.settings.allowMetrics') }}
+          </h3>
+          <p class="text-neutral-400">
+            {{ $t('install.settings.allowMetricsDescription') }}
+          </p>
+          <a href="#" @click.prevent="showMetricsInfo">
+            {{ $t('install.settings.learnMoreAboutData') }}
+          </a>
+        </div>
+        <ToggleSwitch v-model="allowMetrics" />
+      </div>
+    </div>
+
+    <!-- Info Dialog -->
+    <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">
+          {{ $t('install.settings.dataCollectionDialog.whatWeCollect') }}
+        </h4>
+        <ul class="list-disc pl-6 space-y-1">
+          <li>
+            {{
+              $t('install.settings.dataCollectionDialog.collect.errorReports')
+            }}
+          </li>
+          <li>
+            {{ $t('install.settings.dataCollectionDialog.collect.systemInfo') }}
+          </li>
+          <li>
+            {{
+              $t(
+                'install.settings.dataCollectionDialog.collect.userJourneyEvents'
+              )
+            }}
+          </li>
+        </ul>
+
+        <h4 class="font-medium mt-4 mb-2">
+          {{ $t('install.settings.dataCollectionDialog.whatWeDoNotCollect') }}
+        </h4>
+        <ul class="list-disc pl-6 space-y-1">
+          <li>
+            {{
+              $t(
+                'install.settings.dataCollectionDialog.doNotCollect.personalInformation'
+              )
+            }}
+          </li>
+          <li>
+            {{
+              $t(
+                'install.settings.dataCollectionDialog.doNotCollect.workflowContents'
+              )
+            }}
+          </li>
+          <li>
+            {{
+              $t(
+                'install.settings.dataCollectionDialog.doNotCollect.fileSystemInformation'
+              )
+            }}
+          </li>
+          <li>
+            {{
+              $t(
+                'install.settings.dataCollectionDialog.doNotCollect.customNodeConfigurations'
+              )
+            }}
+          </li>
+        </ul>
+
+        <div class="mt-4">
+          <a href="https://comfy.org/privacy" target="_blank">
+            {{ $t('install.settings.dataCollectionDialog.viewFullPolicy') }}
+          </a>
+        </div>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Dialog from 'primevue/dialog'
+import Divider from 'primevue/divider'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { ref } from 'vue'
+
+const showDialog = ref(false)
+const autoUpdate = defineModel<boolean>('autoUpdate', { required: true })
+const allowMetrics = defineModel<boolean>('allowMetrics', { required: true })
+
+const showMetricsInfo = () => {
+  showDialog.value = true
+}
+</script>
--- a/apps/desktop-ui/src/components/install/GpuPicker.vue
+++ b/apps/desktop-ui/src/components/install/GpuPicker.vue
@@ -0,0 +1,103 @@
+<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>
+
+    <!-- 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>
+
+    <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="text-neutral-300 px-24">
+      <p v-show="descriptionText" class="leading-relaxed">
+        {{ descriptionText }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
+import Tag from 'primevue/tag'
+import { computed } from 'vue'
+
+import HardwareOption from '@/components/install/HardwareOption.vue'
+import { st } from '@/i18n'
+import { electronAPI } from '@/utils/envUtil'
+
+const selected = defineModel<TorchDeviceType | null>('device', {
+  required: true
+})
+
+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
+}
+</script>
--- a/apps/desktop-ui/src/components/install/HardwareOption.stories.ts
+++ b/apps/desktop-ui/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
+  }
+}
--- a/apps/desktop-ui/src/components/install/HardwareOption.vue
+++ b/apps/desktop-ui/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>
--- a/apps/desktop-ui/src/components/install/InstallFooter.vue
+++ b/apps/desktop-ui/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>
--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.stories.ts
+++ b/apps/desktop-ui/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>
+    `
+  })
+}
--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
+++ b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
@@ -0,0 +1,314 @@
+<template>
+  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
+    <!-- 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') }}
+      </h2>
+
+      <p class="text-center text-neutral-400 px-12">
+        {{ $t('install.locationPicker.subtitle') }}
+      </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>
+
+      <!-- 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 { isInChina } from '@comfyorg/shared-frontend-utils/networkUtil'
+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 InputText from 'primevue/inputtext'
+import Message from 'primevue/message'
+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 { 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 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
+onMounted(async () => {
+  const paths = await electron.getSystemPaths()
+  installPath.value = paths.defaultInstallPath
+  await validatePath(paths.defaultInstallPath)
+  userIsInChina.value = await isInChina()
+})
+
+const validatePath = async (path: string | undefined) => {
+  try {
+    pathError.value = ''
+    pathExists.value = false
+    nonDefaultDrive.value = false
+    const validation = await electron.validateInstallPath(path ?? '')
+
+    // Create a pre-formatted list of errors
+    if (!validation.isValid) {
+      const errors: string[] = []
+      if (validation.cannotWrite) errors.push(t('install.cannotWrite'))
+      if (validation.freeSpace < validation.requiredSpace) {
+        const requiredGB = validation.requiredSpace / 1024 / 1024 / 1024
+        errors.push(`${t('install.insufficientFreeSpace')}: ${requiredGB} GB`)
+      }
+      if (validation.parentMissing) errors.push(t('install.parentMissing'))
+      if (validation.isOneDrive) errors.push(t('install.isOneDrive'))
+
+      if (validation.error)
+        errors.push(`${t('install.unhandledError')}: ${validation.error}`)
+      pathError.value = errors.join('\n')
+    }
+
+    if (validation.isNonDefaultDrive) nonDefaultDrive.value = true
+    if (validation.exists) pathExists.value = true
+  } catch (error) {
+    pathError.value = t('install.pathValidationFailed')
+  }
+}
+
+const browsePath = async () => {
+  try {
+    const result = await electron.showDirectoryPicker()
+    if (result) {
+      installPath.value = result
+      await validatePath(result)
+    }
+  } catch (error) {
+    pathError.value = t('install.failedToSelectDirectory')
+  }
+}
+
+const onFocus = async () => {
+  if (!inputTouched.value) {
+    inputTouched.value = true
+    return
+  }
+  // Refresh validation on re-focus
+  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>
--- a/apps/desktop-ui/src/components/install/MigrationPicker.stories.ts
+++ b/apps/desktop-ui/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" />'
+  })
+}
--- a/apps/desktop-ui/src/components/install/MigrationPicker.vue
+++ b/apps/desktop-ui/src/components/install/MigrationPicker.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="flex flex-col gap-6 w-[600px]">
+    <!-- Source Location Section -->
+    <div class="flex flex-col gap-4">
+      <p class="text-neutral-400 my-0">
+        {{ $t('install.migrationSourcePathDescription') }}
+      </p>
+
+      <div class="flex gap-2">
+        <InputText
+          v-model="sourcePath"
+          :placeholder="$t('install.locationPicker.migrationPathPlaceholder')"
+          class="flex-1"
+          :class="{ 'p-invalid': pathError }"
+          @update:model-value="validateSource"
+        />
+        <Button icon="pi pi-folder" class="w-12" @click="browsePath" />
+      </div>
+
+      <Message v-if="pathError" severity="error">
+        {{ pathError }}
+      </Message>
+    </div>
+
+    <!-- Migration Options -->
+    <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>
+
+      <div class="flex flex-col gap-3">
+        <div
+          v-for="item in migrationItems"
+          :key="item.id"
+          class="flex items-center gap-3 p-2 hover:bg-neutral-700 rounded"
+          @click="item.selected = !item.selected"
+        >
+          <Checkbox
+            v-model="item.selected"
+            :input-id="item.id"
+            :binary="true"
+            @click.stop
+          />
+          <div>
+            <label :for="item.id" class="text-neutral-200 font-medium">
+              {{ item.label }}
+            </label>
+            <p class="text-sm text-neutral-400 my-1">
+              {{ item.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Skip Migration -->
+    <div v-else class="text-neutral-400 italic">
+      {{ $t('install.migrationOptional') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MigrationItems } from '@comfyorg/comfyui-electron-types'
+import Button from 'primevue/button'
+import Checkbox from 'primevue/checkbox'
+import InputText from 'primevue/inputtext'
+import Message from 'primevue/message'
+import { computed, ref, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { electronAPI } from '@/utils/envUtil'
+
+const { t } = useI18n()
+
+const electron = electronAPI()
+
+const sourcePath = defineModel<string>('sourcePath', { required: false })
+const migrationItemIds = defineModel<string[]>('migrationItemIds', {
+  required: false
+})
+
+const migrationItems = ref(
+  MigrationItems.map((item) => ({
+    ...item,
+    selected: true
+  }))
+)
+
+const pathError = ref('')
+const isValidSource = computed(
+  () => sourcePath.value !== '' && pathError.value === ''
+)
+
+const validateSource = async (sourcePath: string | undefined) => {
+  if (!sourcePath) {
+    pathError.value = ''
+    return
+  }
+
+  try {
+    pathError.value = ''
+    const validation = await electron.validateComfyUISource(sourcePath)
+
+    if (!validation.isValid) pathError.value = validation.error ?? 'ERROR'
+  } catch (error) {
+    console.error(error)
+    pathError.value = t('install.pathValidationFailed')
+  }
+}
+
+const browsePath = async () => {
+  try {
+    const result = await electron.showDirectoryPicker()
+    if (result) {
+      sourcePath.value = result
+      await validateSource(result)
+    }
+  } catch (error) {
+    console.error(error)
+    pathError.value = t('install.failedToSelectDirectory')
+  }
+}
+
+watchEffect(() => {
+  migrationItemIds.value = migrationItems.value
+    .filter((item) => item.selected)
+    .map((item) => item.id)
+})
+</script>
--- a/apps/desktop-ui/src/components/install/mirror/MirrorItem.vue
+++ b/apps/desktop-ui/src/components/install/mirror/MirrorItem.vue
@@ -0,0 +1,109 @@
+<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">
+        {{ $t(`settings.${normalizedSettingId}.name`) }}
+      </h3>
+      <p class="my-1">
+        {{ $t(`settings.${normalizedSettingId}.tooltip`) }}
+      </p>
+    </div>
+    <UrlInput
+      v-model="modelValue"
+      :validate-url-fn="
+        (mirror: string) =>
+          checkMirrorReachable(mirror + (item.validationPathSuffix ?? ''))
+      "
+      @state-change="validationState = $event"
+    />
+    <div 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 { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
+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 { checkMirrorReachable } from '@/utils/electronMirrorCheck'
+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
+}>()
+
+const emit = defineEmits<{
+  'state-change': [state: ValidationState]
+}>()
+
+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
+})
+
+watch(validationState, (newState) => {
+  emit('state-change', newState)
+
+  // Set fallback mirror if default mirror is invalid
+  if (
+    newState === ValidationState.INVALID &&
+    modelValue.value === item.mirror
+  ) {
+    modelValue.value = item.fallbackMirror
+  }
+})
+</script>
--- a/apps/desktop-ui/src/components/maintenance/StatusTag.vue
+++ b/apps/desktop-ui/src/components/maintenance/StatusTag.vue
@@ -0,0 +1,36 @@
+<template>
+  <Tag :icon :severity :value />
+</template>
+
+<script setup lang="ts">
+import { PrimeIcons } from '@primevue/core/api'
+import Tag from 'primevue/tag'
+import { computed } from 'vue'
+
+import { t } from '@/i18n'
+
+// Properties
+const props = defineProps<{
+  error: boolean
+  refreshing?: boolean
+}>()
+
+// Bindings
+const icon = computed(() => {
+  if (props.refreshing) return PrimeIcons.QUESTION
+  if (props.error) return PrimeIcons.TIMES
+  return PrimeIcons.CHECK
+})
+
+const severity = computed(() => {
+  if (props.refreshing) return 'info'
+  if (props.error) return 'danger'
+  return 'success'
+})
+
+const value = computed(() => {
+  if (props.refreshing) return t('maintenance.refreshing')
+  if (props.error) return t('g.error')
+  return t('maintenance.OK')
+})
+</script>
--- a/apps/desktop-ui/src/components/maintenance/TaskCard.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskCard.vue
@@ -0,0 +1,133 @@
+<template>
+  <div
+    class="task-div max-w-48 min-h-52 grid relative"
+    :class="{ 'opacity-75': isLoading }"
+  >
+    <Card
+      class="max-w-48 relative h-full overflow-hidden"
+      :class="{ 'opacity-65': runner.state !== 'error' }"
+      v-bind="(({ onClick, ...rest }) => rest)($attrs)"
+    >
+      <template #header>
+        <i
+          v-if="runner.state === 'error'"
+          class="pi pi-exclamation-triangle text-red-500 absolute m-2 top-0 -right-14 opacity-15"
+          style="font-size: 10rem"
+        />
+        <img
+          v-if="task.headerImg"
+          :src="task.headerImg"
+          class="object-contain w-full h-full opacity-25 pt-4 px-4"
+        />
+      </template>
+      <template #title>
+        {{ task.name }}
+      </template>
+      <template #content>
+        {{ description }}
+      </template>
+      <template #footer>
+        <div class="flex gap-4 mt-1">
+          <Button
+            :icon="task.button?.icon"
+            :label="task.button?.text"
+            class="w-full"
+            raised
+            icon-pos="right"
+            :loading="isExecuting"
+            @click="(event) => $emit('execute', event)"
+          />
+        </div>
+      </template>
+    </Card>
+
+    <i
+      v-if="!isLoading && runner.state === 'OK'"
+      class="task-card-ok pi pi-check"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Card from 'primevue/card'
+import { computed } from 'vue'
+
+import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
+import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+import { useMinLoadingDurationRef } from '@/utils/refUtil'
+
+const taskStore = useMaintenanceTaskStore()
+const runner = computed(() => taskStore.getRunner(props.task))
+
+// Properties
+const props = defineProps<{
+  task: MaintenanceTask
+}>()
+
+// Events
+defineEmits<{
+  execute: [event: MouseEvent]
+}>()
+
+// Bindings
+const description = computed(() =>
+  runner.value.state === 'error'
+    ? props.task.errorDescription ?? props.task.shortDescription
+    : props.task.shortDescription
+)
+
+// Use a minimum run time to ensure tasks "feel" like they have run
+const reactiveLoading = computed(() => !!runner.value.refreshing)
+const reactiveExecuting = computed(() => !!runner.value.executing)
+
+const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
+const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
+</script>
+
+<style scoped>
+@reference '../../assets/css/style.css';
+
+.task-card-ok {
+  @apply text-green-500 absolute -right-4 -bottom-4 opacity-100 row-span-full col-span-full transition-opacity;
+
+  font-size: 4rem;
+  text-shadow: 0.25rem 0 0.5rem black;
+  z-index: 10;
+}
+
+.p-card {
+  @apply transition-opacity;
+
+  --p-card-background: var(--p-button-secondary-background);
+  opacity: 0.9;
+
+  &.opacity-65 {
+    opacity: 0.4;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+:deep(.p-card-header) {
+  z-index: 0;
+}
+
+:deep(.p-card-body) {
+  z-index: 1;
+  flex-grow: 1;
+  justify-content: space-between;
+}
+
+.task-div {
+  > i {
+    pointer-events: none;
+  }
+
+  &:hover > i {
+    opacity: 0.2;
+  }
+}
+</style>
--- a/apps/desktop-ui/src/components/maintenance/TaskListItem.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListItem.vue
@@ -0,0 +1,88 @@
+<template>
+  <tr
+    class="border-neutral-700 border-solid border-y"
+    :class="{
+      'opacity-50': runner.resolved,
+      'opacity-75': isLoading && runner.resolved
+    }"
+  >
+    <td class="text-center w-16">
+      <TaskListStatusIcon :state="runner.state" :loading="isLoading" />
+    </td>
+    <td>
+      <p class="inline-block">
+        {{ task.name }}
+      </p>
+      <Button
+        class="inline-block mx-2"
+        type="button"
+        :icon="PrimeIcons.INFO_CIRCLE"
+        severity="secondary"
+        :text="true"
+        @click="toggle"
+      />
+
+      <Popover ref="infoPopover" class="block m-1 max-w-64 min-w-32">
+        <span class="whitespace-pre-line">{{ task.description }}</span>
+      </Popover>
+    </td>
+    <td class="text-right px-4">
+      <Button
+        :icon="task.button?.icon"
+        :label="task.button?.text"
+        :severity
+        icon-pos="right"
+        :loading="isExecuting"
+        @click="(event) => $emit('execute', event)"
+      />
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import { PrimeIcons } from '@primevue/core/api'
+import Button from 'primevue/button'
+import Popover from 'primevue/popover'
+import { computed, ref } from 'vue'
+
+import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
+import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+import type { PrimeVueSeverity } from '@/types/primeVueTypes'
+import { useMinLoadingDurationRef } from '@/utils/refUtil'
+
+import TaskListStatusIcon from './TaskListStatusIcon.vue'
+
+const taskStore = useMaintenanceTaskStore()
+const runner = computed(() => taskStore.getRunner(props.task))
+
+// Properties
+const props = defineProps<{
+  task: MaintenanceTask
+}>()
+
+// Events
+defineEmits<{
+  execute: [event: MouseEvent]
+}>()
+
+// Binding
+const severity = computed<PrimeVueSeverity>(() =>
+  runner.value.state === 'error' || runner.value.state === 'warning'
+    ? 'primary'
+    : 'secondary'
+)
+
+// Use a minimum run time to ensure tasks "feel" like they have run
+const reactiveLoading = computed(() => !!runner.value.refreshing)
+const reactiveExecuting = computed(() => !!runner.value.executing)
+
+const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
+const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
+
+// Popover
+const infoPopover = ref<InstanceType<typeof Popover> | null>(null)
+
+const toggle = (event: Event) => {
+  infoPopover.value?.toggle(event)
+}
+</script>
--- a/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
@@ -0,0 +1,115 @@
+<template>
+  <!-- Tasks -->
+  <section class="my-4">
+    <template v-if="filter.tasks.length === 0">
+      <!-- Empty filter -->
+      <Divider />
+      <p class="text-neutral-400 w-full text-center">
+        {{ $t('maintenance.allOk') }}
+      </p>
+    </template>
+
+    <template v-else>
+      <!-- Display: List -->
+      <table
+        v-if="displayAsList === PrimeIcons.LIST"
+        class="w-full border-collapse border-hidden"
+      >
+        <TaskListItem
+          v-for="task in filter.tasks"
+          :key="task.id"
+          :task
+          @execute="(event) => confirmButton(event, task)"
+        />
+      </table>
+
+      <!-- Display: Cards -->
+      <template v-else>
+        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
+          <TaskCard
+            v-for="task in filter.tasks"
+            :key="task.id"
+            :task
+            @execute="(event) => confirmButton(event, task)"
+          />
+        </div>
+      </template>
+    </template>
+    <ConfirmPopup />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { PrimeIcons } from '@primevue/core/api'
+import { useConfirm, useToast } from 'primevue'
+import ConfirmPopup from 'primevue/confirmpopup'
+import Divider from 'primevue/divider'
+
+import { t } from '@/i18n'
+import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
+import type {
+  MaintenanceFilter,
+  MaintenanceTask
+} from '@/types/desktop/maintenanceTypes'
+
+import TaskCard from './TaskCard.vue'
+import TaskListItem from './TaskListItem.vue'
+
+const toast = useToast()
+const confirm = useConfirm()
+const taskStore = useMaintenanceTaskStore()
+
+// Properties
+defineProps<{
+  displayAsList: string
+  filter: MaintenanceFilter
+  isRefreshing: boolean
+}>()
+
+const executeTask = async (task: MaintenanceTask) => {
+  let message: string | undefined
+
+  try {
+    // Success
+    if ((await taskStore.execute(task)) === true) return
+
+    message = t('maintenance.error.taskFailed')
+  } catch (error) {
+    message = (error as Error)?.message
+  }
+
+  toast.add({
+    severity: 'error',
+    summary: t('maintenance.error.toastTitle'),
+    detail: message ?? t('maintenance.error.defaultDescription'),
+    life: 10_000
+  })
+}
+
+// Commands
+const confirmButton = async (event: MouseEvent, task: MaintenanceTask) => {
+  if (!task.requireConfirm) {
+    await executeTask(task)
+    return
+  }
+
+  confirm.require({
+    target: event.currentTarget as HTMLElement,
+    message: task.confirmText ?? t('maintenance.confirmTitle'),
+    icon: 'pi pi-exclamation-circle',
+    rejectProps: {
+      label: t('g.cancel'),
+      severity: 'secondary',
+      outlined: true
+    },
+    acceptProps: {
+      label: task.button?.text ?? t('g.save'),
+      severity: task.severity ?? 'primary'
+    },
+    // TODO: Not awaited.
+    accept: async () => {
+      await executeTask(task)
+    }
+  })
+}
+</script>
--- a/apps/desktop-ui/src/components/maintenance/TaskListStatusIcon.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListStatusIcon.vue
@@ -0,0 +1,45 @@
+<template>
+  <ProgressSpinner v-if="!state || loading" class="h-8 w-8" />
+  <template v-else>
+    <i v-tooltip.top="{ value: tooltip, showDelay: 250 }" :class="cssClasses" />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { PrimeIcons } from '@primevue/core/api'
+import ProgressSpinner from 'primevue/progressspinner'
+import type { MaybeRef } from 'vue'
+import { computed } from 'vue'
+
+import { t } from '@/i18n'
+
+// Properties
+const tooltip = computed(() => {
+  if (props.state === 'error') {
+    return t('g.error')
+  } else if (props.state === 'OK') {
+    return t('maintenance.OK')
+  } else {
+    return t('maintenance.Skipped')
+  }
+})
+
+const cssClasses = computed(() => {
+  let classes: string
+  if (props.state === 'error') {
+    classes = `${PrimeIcons.EXCLAMATION_TRIANGLE} text-red-500`
+  } else if (props.state === 'OK') {
+    classes = `${PrimeIcons.CHECK} text-green-500`
+  } else {
+    classes = PrimeIcons.MINUS
+  }
+
+  return `text-3xl pi ${classes}`
+})
+
+// Model
+const props = defineProps<{
+  state: 'warning' | 'error' | 'resolved' | 'OK' | 'skipped' | undefined
+  loading?: MaybeRef<boolean>
+}>()
+</script>
--- a/apps/desktop-ui/src/components/maintenance/TerminalOutputDrawer.vue
+++ b/apps/desktop-ui/src/components/maintenance/TerminalOutputDrawer.vue
@@ -0,0 +1,62 @@
+<template>
+  <Drawer
+    v-model:visible="terminalVisible"
+    :header
+    position="bottom"
+    style="height: max(50vh, 34rem)"
+  >
+    <BaseTerminal @created="terminalCreated" @unmounted="terminalUnmounted" />
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+import type { Terminal } from '@xterm/xterm'
+import Drawer from 'primevue/drawer'
+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'
+import { useTerminalBuffer } from '@/composables/bottomPanelTabs/useTerminalBuffer'
+import { electronAPI } from '@/utils/envUtil'
+
+// Model
+const terminalVisible = defineModel<boolean>({ required: true })
+const props = defineProps<{
+  header: string
+  defaultMessage: string
+}>()
+
+const electron = electronAPI()
+
+/** The actual output of all terminal commands - not rendered */
+const buffer = useTerminalBuffer()
+let xterm: Terminal | null = null
+
+// Created and destroyed with the Drawer - contents copied from hidden buffer
+const terminalCreated = (
+  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
+  root: Ref<HTMLElement | undefined>
+) => {
+  xterm = terminal
+  useAutoSize({ root, autoRows: true, autoCols: true })
+  terminal.write(props.defaultMessage)
+  buffer.copyTo(terminal)
+
+  terminal.options.cursorBlink = false
+  terminal.options.cursorStyle = 'bar'
+  terminal.options.cursorInactiveStyle = 'bar'
+  terminal.options.disableStdin = true
+}
+
+const terminalUnmounted = () => {
+  xterm = null
+}
+
+onMounted(async () => {
+  electron.onLogMessage((message: string) => {
+    buffer.write(message)
+    xterm?.write(message)
+  })
+})
+</script>
--- a/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminal.ts
+++ b/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminal.ts
@@ -0,0 +1,105 @@
+import { FitAddon } from '@xterm/addon-fit'
+import { Terminal } from '@xterm/xterm'
+import '@xterm/xterm/css/xterm.css'
+import { debounce } from 'es-toolkit/compat'
+import type { Ref } from 'vue'
+import { markRaw, onMounted, onUnmounted } from 'vue'
+
+export function useTerminal(element: Ref<HTMLElement | undefined>) {
+  const fitAddon = new FitAddon()
+  const terminal = markRaw(
+    new Terminal({
+      convertEol: true,
+      theme: { background: '#171717' }
+    })
+  )
+  terminal.loadAddon(fitAddon)
+
+  terminal.attachCustomKeyEventHandler((event) => {
+    // Allow default browser copy/paste handling
+    if (
+      event.type === 'keydown' &&
+      (event.ctrlKey || event.metaKey) &&
+      ((event.key === 'c' && terminal.hasSelection()) || event.key === 'v')
+    ) {
+      // TODO: Deselect text after copy/paste; use IPC.
+      return false
+    }
+    return true
+  })
+
+  onMounted(async () => {
+    if (element.value) {
+      terminal.open(element.value)
+    }
+  })
+
+  onUnmounted(() => {
+    terminal.dispose()
+  })
+
+  return {
+    terminal,
+    useAutoSize({
+      root,
+      autoRows = true,
+      autoCols = true,
+      minCols = Number.NEGATIVE_INFINITY,
+      minRows = Number.NEGATIVE_INFINITY,
+      onResize
+    }: {
+      root: Ref<HTMLElement | undefined>
+      autoRows?: boolean
+      autoCols?: boolean
+      minCols?: number
+      minRows?: number
+      onResize?: () => void
+    }) {
+      const ensureValidRows = (rows: number | undefined): number => {
+        if (rows == null || isNaN(rows)) {
+          return (root.value?.clientHeight ?? 80) / 20
+        }
+        return rows
+      }
+
+      const ensureValidCols = (cols: number | undefined): number => {
+        if (cols == null || isNaN(cols)) {
+          // Sometimes this is NaN if so, estimate.
+          return (root.value?.clientWidth ?? 80) / 8
+        }
+        return cols
+      }
+
+      const resize = () => {
+        const dims = fitAddon.proposeDimensions()
+        // Sometimes propose returns NaN, so we may need to estimate.
+        terminal.resize(
+          Math.max(
+            autoCols ? ensureValidCols(dims?.cols) : terminal.cols,
+            minCols
+          ),
+          Math.max(
+            autoRows ? ensureValidRows(dims?.rows) : terminal.rows,
+            minRows
+          )
+        )
+        onResize?.()
+      }
+
+      const resizeObserver = new ResizeObserver(debounce(resize, 25))
+
+      onMounted(async () => {
+        if (root.value) {
+          resizeObserver.observe(root.value)
+          resize()
+        }
+      })
+
+      onUnmounted(() => {
+        resizeObserver.disconnect()
+      })
+
+      return { resize }
+    }
+  }
+}
--- a/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminalBuffer.ts
+++ b/apps/desktop-ui/src/composables/bottomPanelTabs/useTerminalBuffer.ts
@@ -0,0 +1,30 @@
+import { SerializeAddon } from '@xterm/addon-serialize'
+import { Terminal } from '@xterm/xterm'
+import { markRaw, onMounted, onUnmounted } from 'vue'
+
+export function useTerminalBuffer() {
+  const serializeAddon = new SerializeAddon()
+  const terminal = markRaw(new Terminal({ convertEol: true }))
+
+  const copyTo = (destinationTerminal: Terminal) => {
+    destinationTerminal.write(serializeAddon.serialize())
+  }
+
+  const write = (message: string) => terminal.write(message)
+
+  const serialize = () => serializeAddon.serialize()
+
+  onMounted(() => {
+    terminal.loadAddon(serializeAddon)
+  })
+
+  onUnmounted(() => {
+    terminal.dispose()
+  })
+
+  return {
+    copyTo,
+    serialize,
+    write
+  }
+}
--- a/apps/desktop-ui/src/constants/desktopDialogs.ts
+++ b/apps/desktop-ui/src/constants/desktopDialogs.ts
@@ -0,0 +1,75 @@
+export interface DialogAction {
+  readonly label: string
+  readonly action: 'openUrl' | 'close' | 'cancel'
+  readonly url?: string
+  readonly severity?: 'danger' | 'primary' | 'secondary' | 'warn'
+  readonly returnValue: string
+}
+
+interface DesktopDialog {
+  readonly title: string
+  readonly message: string
+  readonly buttons: DialogAction[]
+}
+
+export const DESKTOP_DIALOGS = {
+  /** Shown when a corrupt venv is detected. */
+  reinstallVenv: {
+    title: 'Reinstall ComfyUI (Fresh Start)?',
+    message: `Sorry, we can't launch ComfyUI because some installed packages aren't compatible.
+
+Click Reinstall to restore ComfyUI and get back up and running.
+
+Please note: if you've added custom nodes, you'll need to reinstall them after this process.`,
+    buttons: [
+      {
+        label: 'Learn More',
+        action: 'openUrl',
+        url: 'https://docs.comfy.org',
+        returnValue: 'openDocs'
+      },
+      {
+        label: 'Reinstall',
+        action: 'close',
+        severity: 'danger',
+        returnValue: 'resetVenv'
+      }
+    ]
+  },
+  /** A dialog that is shown when an invalid dialog ID is provided. */
+  invalidDialog: {
+    title: 'Invalid Dialog',
+    message: `Invalid dialog ID was provided.`,
+    buttons: [
+      {
+        label: 'Close',
+        action: 'cancel',
+        returnValue: 'cancel'
+      }
+    ]
+  }
+} as const satisfies { [K: string]: DesktopDialog }
+
+/** The ID of a desktop dialog. */
+type DesktopDialogId = keyof typeof DESKTOP_DIALOGS
+
+/**
+ * Checks if {@link id} is a valid dialog ID.
+ * @param id The string to check
+ * @returns `true` if the ID is a valid dialog ID, otherwise `false`
+ */
+function isDialogId(id: unknown): id is DesktopDialogId {
+  return typeof id === 'string' && id in DESKTOP_DIALOGS
+}
+
+/**
+ * Gets the dialog with the given ID.
+ * @param dialogId The ID of the dialog to get
+ * @returns The dialog with the given ID
+ */
+export function getDialog(
+  dialogId: string | string[]
+): DesktopDialog & { id: DesktopDialogId } {
+  const id = isDialogId(dialogId) ? dialogId : 'invalidDialog'
+  return { id, ...structuredClone(DESKTOP_DIALOGS[id]) }
+}
--- a/apps/desktop-ui/src/constants/desktopMaintenanceTasks.ts
+++ b/apps/desktop-ui/src/constants/desktopMaintenanceTasks.ts
@@ -0,0 +1,147 @@
+import { PrimeIcons } from '@primevue/core'
+
+import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+import { electronAPI } from '@/utils/envUtil'
+
+const electron = electronAPI()
+
+const openUrl = (url: string) => {
+  window.open(url, '_blank')
+  return true
+}
+
+export const DESKTOP_MAINTENANCE_TASKS: Readonly<MaintenanceTask>[] = [
+  {
+    id: 'basePath',
+    execute: async () => await electron.setBasePath(),
+    name: 'Base path',
+    shortDescription: 'Change the application base path.',
+    errorDescription: 'Unable to open the base path.  Please select a new one.',
+    description:
+      'The base path is the default location where ComfyUI stores data. It is the location for the python environment, and may also contain models, custom nodes, and other extensions.',
+    isInstallationFix: true,
+    button: {
+      icon: PrimeIcons.QUESTION,
+      text: 'Select'
+    }
+  },
+  {
+    id: 'git',
+    headerImg: 'assets/images/Git-Logo-White.svg',
+    execute: () => openUrl('https://git-scm.com/downloads/'),
+    name: 'Download git',
+    shortDescription: 'Open the git download page.',
+    errorDescription:
+      'Git is missing. Please download and install git, then restart ComfyUI Desktop.',
+    description:
+      'Git is required to download and manage custom nodes and other extensions. This task opens the download page in your default browser, where you can download the latest version of git. Once you have installed git, please restart ComfyUI Desktop.',
+    button: {
+      icon: PrimeIcons.EXTERNAL_LINK,
+      text: 'Download'
+    }
+  },
+  {
+    id: 'vcRedist',
+    execute: () => openUrl('https://aka.ms/vs/17/release/vc_redist.x64.exe'),
+    name: 'Download VC++ Redist',
+    shortDescription: 'Download the latest VC++ Redistributable runtime.',
+    description:
+      'The Visual C++ runtime libraries are required to run ComfyUI. You will need to download and install this file.',
+    button: {
+      icon: PrimeIcons.EXTERNAL_LINK,
+      text: 'Download'
+    }
+  },
+  {
+    id: 'reinstall',
+    severity: 'danger',
+    requireConfirm: true,
+    execute: async () => {
+      await electron.reinstall()
+      return true
+    },
+    name: 'Reinstall ComfyUI',
+    shortDescription:
+      'Deletes the desktop app config and load the welcome screen.',
+    description:
+      'Delete the desktop app config, restart the app, and load the installation screen.',
+    confirmText: 'Delete all saved config and reinstall?',
+    button: {
+      icon: PrimeIcons.EXCLAMATION_TRIANGLE,
+      text: 'Reinstall'
+    }
+  },
+  {
+    id: 'pythonPackages',
+    requireConfirm: true,
+    execute: async () => {
+      try {
+        await electron.uv.installRequirements()
+        return true
+      } catch (error) {
+        return false
+      }
+    },
+    name: 'Install python packages',
+    shortDescription:
+      'Installs the base python packages required to run ComfyUI.',
+    errorDescription:
+      'Python packages that are required to run ComfyUI are not installed.',
+    description:
+      'This will install the python packages required to run ComfyUI. This includes torch, torchvision, and other dependencies.',
+    usesTerminal: true,
+    isInstallationFix: true,
+    button: {
+      icon: PrimeIcons.DOWNLOAD,
+      text: 'Install'
+    }
+  },
+  {
+    id: 'uv',
+    execute: () =>
+      openUrl('https://docs.astral.sh/uv/getting-started/installation/'),
+    name: 'uv executable',
+    shortDescription: 'uv installs and maintains the python environment.',
+    description:
+      "This will open the download page for Astral's uv tool. uv is used to install python and manage python packages.",
+    button: {
+      icon: 'pi pi-asterisk',
+      text: 'Download'
+    }
+  },
+  {
+    id: 'uvCache',
+    severity: 'danger',
+    requireConfirm: true,
+    execute: async () => await electron.uv.clearCache(),
+    name: 'uv cache',
+    shortDescription: 'Remove the Astral uv cache of python packages.',
+    description:
+      'This will remove the uv cache directory and its contents. All downloaded python packages will need to be downloaded again.',
+    confirmText: 'Delete uv cache of python packages?',
+    usesTerminal: true,
+    isInstallationFix: true,
+    button: {
+      icon: PrimeIcons.TRASH,
+      text: 'Clear cache'
+    }
+  },
+  {
+    id: 'venvDirectory',
+    severity: 'danger',
+    requireConfirm: true,
+    execute: async () => await electron.uv.resetVenv(),
+    name: 'Reset virtual environment',
+    shortDescription:
+      'Remove and recreate the .venv directory. This removes all python packages.',
+    description:
+      'The python environment is where ComfyUI installs python and python packages. It is used to run the ComfyUI server.',
+    confirmText: 'Delete the .venv directory?',
+    usesTerminal: true,
+    isInstallationFix: true,
+    button: {
+      icon: PrimeIcons.FOLDER,
+      text: 'Recreate'
+    }
+  }
+] as const
--- a/apps/desktop-ui/src/constants/uvMirrors.ts
+++ b/apps/desktop-ui/src/constants/uvMirrors.ts
@@ -0,0 +1,34 @@
+export interface UVMirror {
+  /**
+   * The setting id defined for the mirror.
+   */
+  settingId: string
+  /**
+   * The default mirror to use.
+   */
+  mirror: string
+  /**
+   * The fallback mirror to use.
+   */
+  fallbackMirror: string
+  /**
+   * The path suffix to validate the mirror is reachable.
+   */
+  validationPathSuffix?: string
+}
+
+export const PYTHON_MIRROR: UVMirror = {
+  settingId: 'Comfy-Desktop.UV.PythonInstallMirror',
+  mirror:
+    'https://github.com/astral-sh/python-build-standalone/releases/download',
+  fallbackMirror:
+    'https://python-standalone.org/mirror/astral-sh/python-build-standalone',
+  validationPathSuffix:
+    '/20250115/cpython-3.10.16+20250115-aarch64-apple-darwin-debug-full.tar.zst.sha256'
+}
+
+export const PYPI_MIRROR: UVMirror = {
+  settingId: 'Comfy-Desktop.UV.PypiInstallMirror',
+  mirror: 'https://pypi.org/simple/',
+  fallbackMirror: 'https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple'
+}
--- a/apps/desktop-ui/src/i18n.ts
+++ b/apps/desktop-ui/src/i18n.ts
@@ -0,0 +1,88 @@
+import arCommands from '@frontend-locales/ar/commands.json' with { type: 'json' }
+import ar from '@frontend-locales/ar/main.json' with { type: 'json' }
+import arNodes from '@frontend-locales/ar/nodeDefs.json' with { type: 'json' }
+import arSettings from '@frontend-locales/ar/settings.json' with { type: 'json' }
+import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' }
+import en from '@frontend-locales/en/main.json' with { type: 'json' }
+import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
+import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
+import esCommands from '@frontend-locales/es/commands.json' with { type: 'json' }
+import es from '@frontend-locales/es/main.json' with { type: 'json' }
+import esNodes from '@frontend-locales/es/nodeDefs.json' with { type: 'json' }
+import esSettings from '@frontend-locales/es/settings.json' with { type: 'json' }
+import frCommands from '@frontend-locales/fr/commands.json' with { type: 'json' }
+import fr from '@frontend-locales/fr/main.json' with { type: 'json' }
+import frNodes from '@frontend-locales/fr/nodeDefs.json' with { type: 'json' }
+import frSettings from '@frontend-locales/fr/settings.json' with { type: 'json' }
+import jaCommands from '@frontend-locales/ja/commands.json' with { type: 'json' }
+import ja from '@frontend-locales/ja/main.json' with { type: 'json' }
+import jaNodes from '@frontend-locales/ja/nodeDefs.json' with { type: 'json' }
+import jaSettings from '@frontend-locales/ja/settings.json' with { type: 'json' }
+import koCommands from '@frontend-locales/ko/commands.json' with { type: 'json' }
+import ko from '@frontend-locales/ko/main.json' with { type: 'json' }
+import koNodes from '@frontend-locales/ko/nodeDefs.json' with { type: 'json' }
+import koSettings from '@frontend-locales/ko/settings.json' with { type: 'json' }
+import ruCommands from '@frontend-locales/ru/commands.json' with { type: 'json' }
+import ru from '@frontend-locales/ru/main.json' with { type: 'json' }
+import ruNodes from '@frontend-locales/ru/nodeDefs.json' with { type: 'json' }
+import ruSettings from '@frontend-locales/ru/settings.json' with { type: 'json' }
+import trCommands from '@frontend-locales/tr/commands.json' with { type: 'json' }
+import tr from '@frontend-locales/tr/main.json' with { type: 'json' }
+import trNodes from '@frontend-locales/tr/nodeDefs.json' with { type: 'json' }
+import trSettings from '@frontend-locales/tr/settings.json' with { type: 'json' }
+import zhTWCommands from '@frontend-locales/zh-TW/commands.json' with { type: 'json' }
+import zhTW from '@frontend-locales/zh-TW/main.json' with { type: 'json' }
+import zhTWNodes from '@frontend-locales/zh-TW/nodeDefs.json' with { type: 'json' }
+import zhTWSettings from '@frontend-locales/zh-TW/settings.json' with { type: 'json' }
+import zhCommands from '@frontend-locales/zh/commands.json' with { type: 'json' }
+import zh from '@frontend-locales/zh/main.json' with { type: 'json' }
+import zhNodes from '@frontend-locales/zh/nodeDefs.json' with { type: 'json' }
+import zhSettings from '@frontend-locales/zh/settings.json' with { type: 'json' }
+import { createI18n } from 'vue-i18n'
+
+function buildLocale<M, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
+  return {
+    ...main,
+    nodeDefs: nodes,
+    commands: commands,
+    settings: settings
+  }
+}
+
+const messages = {
+  en: buildLocale(en, enNodes, enCommands, enSettings),
+  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
+  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings),
+  ru: buildLocale(ru, ruNodes, ruCommands, ruSettings),
+  ja: buildLocale(ja, jaNodes, jaCommands, jaSettings),
+  ko: buildLocale(ko, koNodes, koCommands, koSettings),
+  fr: buildLocale(fr, frNodes, frCommands, frSettings),
+  es: buildLocale(es, esNodes, esCommands, esSettings),
+  ar: buildLocale(ar, arNodes, arCommands, arSettings),
+  tr: buildLocale(tr, trNodes, trCommands, trSettings)
+}
+
+export const i18n = createI18n({
+  // Must set `false`, as Vue I18n Legacy API is for Vue 2
+  legacy: false,
+  locale: navigator.language.split('-')[0] || 'en',
+  fallbackLocale: 'en',
+  messages,
+  // Ignore warnings for locale options as each option is in its own language.
+  // e.g. "English", "中文", "Русский", "日本語", "한국어", "Français", "Español"
+  missingWarn: /^(?!settings\.Comfy_Locale\.options\.).+/,
+  fallbackWarn: /^(?!settings\.Comfy_Locale\.options\.).+/
+})
+
+/** Convenience shorthand: i18n.global */
+export const { t, te } = i18n.global
+
+/**
+ * Safe translation function that returns the fallback message if the key is not found.
+ *
+ * @param key - The key to translate.
+ * @param fallbackMessage - The fallback message to use if the key is not found.
+ */
+export function st(key: string, fallbackMessage: string) {
+  return te(key) ? t(key) : fallbackMessage
+}
--- a/apps/desktop-ui/src/main.ts
+++ b/apps/desktop-ui/src/main.ts
@@ -0,0 +1,46 @@
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
+import { createPinia } from 'pinia'
+import 'primeicons/primeicons.css'
+import PrimeVue from 'primevue/config'
+import ConfirmationService from 'primevue/confirmationservice'
+import ToastService from 'primevue/toastservice'
+import Tooltip from 'primevue/tooltip'
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import './assets/css/style.css'
+import { i18n } from './i18n'
+import router from './router'
+
+const ComfyUIPreset = definePreset(Aura, {
+  semantic: {
+    // @ts-expect-error fixme ts strict error
+    primary: Aura['primitive'].blue
+  }
+})
+
+const app = createApp(App)
+const pinia = createPinia()
+
+app.directive('tooltip', Tooltip)
+app
+  .use(router)
+  .use(PrimeVue, {
+    theme: {
+      preset: ComfyUIPreset,
+      options: {
+        prefix: 'p',
+        cssLayer: {
+          name: 'primevue',
+          order: 'theme, base, primevue'
+        },
+        darkModeSelector: '.dark-theme, :root:has(.dark-theme)'
+      }
+    }
+  })
+  .use(ConfirmationService)
+  .use(ToastService)
+  .use(pinia)
+  .use(i18n)
+  .mount('#desktop-app')
--- a/apps/desktop-ui/src/router.ts
+++ b/apps/desktop-ui/src/router.ts
@@ -0,0 +1,92 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory
+} from 'vue-router'
+
+import { isElectron } from '@/utils/envUtil'
+import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
+
+const isFileProtocol = window.location.protocol === 'file:'
+const basePath = isElectron() ? '/' : window.location.pathname
+
+const router = createRouter({
+  history: isFileProtocol ? createWebHashHistory() : createWebHistory(basePath),
+  routes: [
+    {
+      path: '/',
+      component: LayoutDefault,
+      children: [
+        {
+          path: '',
+          name: 'WelcomeView',
+          component: () => import('@/views/WelcomeView.vue')
+        },
+        {
+          path: 'welcome',
+          name: 'WelcomeViewAlias',
+          component: () => import('@/views/WelcomeView.vue')
+        },
+        {
+          path: 'install',
+          name: 'InstallView',
+          component: () => import('@/views/InstallView.vue')
+        },
+        {
+          path: 'download-git',
+          name: 'DownloadGitView',
+          component: () => import('@/views/DownloadGitView.vue')
+        },
+        {
+          path: 'desktop-start',
+          name: 'DesktopStartView',
+          component: () => import('@/views/DesktopStartView.vue')
+        },
+        {
+          path: 'desktop-update',
+          name: 'DesktopUpdateView',
+          component: () => import('@/views/DesktopUpdateView.vue')
+        },
+        {
+          path: 'server-start',
+          name: 'ServerStartView',
+          component: () => import('@/views/ServerStartView.vue')
+        },
+        {
+          path: 'manual-configuration',
+          name: 'ManualConfigurationView',
+          component: () => import('@/views/ManualConfigurationView.vue')
+        },
+        {
+          path: 'metrics-consent',
+          name: 'MetricsConsentView',
+          component: () => import('@/views/MetricsConsentView.vue')
+        },
+        {
+          path: 'maintenance',
+          name: 'MaintenanceView',
+          component: () => import('@/views/MaintenanceView.vue')
+        },
+        {
+          path: 'not-supported',
+          name: 'NotSupportedView',
+          component: () => import('@/views/NotSupportedView.vue')
+        },
+        {
+          path: 'desktop-dialog/:dialogId',
+          name: 'DesktopDialogView',
+          component: () => import('@/views/DesktopDialogView.vue')
+        }
+      ]
+    }
+  ],
+  scrollBehavior(_to, _from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    }
+
+    return { top: 0 }
+  }
+})
+
+export default router
--- a/apps/desktop-ui/src/stores/maintenanceTaskStore.ts
+++ b/apps/desktop-ui/src/stores/maintenanceTaskStore.ts
@@ -0,0 +1,174 @@
+import type { InstallValidation } from '@comfyorg/comfyui-electron-types'
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+import { DESKTOP_MAINTENANCE_TASKS } from '@/constants/desktopMaintenanceTasks'
+import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
+import { electronAPI } from '@/utils/envUtil'
+
+/** State of a maintenance task, managed by the maintenance task store. */
+type MaintenanceTaskState = 'warning' | 'error' | 'OK' | 'skipped'
+
+// Type not exported by API
+type ValidationState = InstallValidation['basePath']
+// Add index to API type
+type IndexedUpdate = InstallValidation & Record<string, ValidationState>
+
+/** State of a maintenance task, managed by the maintenance task store. */
+export class MaintenanceTaskRunner {
+  constructor(readonly task: MaintenanceTask) {}
+
+  private _state?: MaintenanceTaskState
+  /** The current state of the task. Setter also controls {@link resolved} as a side-effect. */
+  get state() {
+    return this._state
+  }
+
+  /** Updates the task state and {@link resolved} status. */
+  setState(value: MaintenanceTaskState) {
+    // Mark resolved
+    if (this._state === 'error' && value === 'OK') this.resolved = true
+    // Mark unresolved (if previously resolved)
+    if (value === 'error') this.resolved &&= false
+
+    this._state = value
+  }
+
+  /** `true` if the task has been resolved (was `error`, now `OK`). This is a side-effect of the {@link state} setter. */
+  resolved?: boolean
+
+  /** Whether the task state is currently being refreshed. */
+  refreshing?: boolean
+  /** Whether the task is currently running. */
+  executing?: boolean
+  /** The error message that occurred when the task failed. */
+  error?: string
+
+  update(update: IndexedUpdate) {
+    const state = update[this.task.id]
+
+    this.refreshing = state === undefined
+    if (state) this.setState(state)
+  }
+
+  finaliseUpdate(update: IndexedUpdate) {
+    this.refreshing = false
+    this.setState(update[this.task.id] ?? 'skipped')
+  }
+
+  /** Wraps the execution of a maintenance task, updating state and rethrowing errors. */
+  async execute(task: MaintenanceTask) {
+    try {
+      this.executing = true
+      const success = await task.execute()
+      if (!success) return false
+
+      this.error = undefined
+      return true
+    } catch (error) {
+      this.error = (error as Error)?.message
+      throw error
+    } finally {
+      this.executing = false
+    }
+  }
+}
+
+/**
+ * User-initiated maintenance tasks.  Currently only used by the desktop app maintenance view.
+ *
+ * Includes running state, task list, and execution / refresh logic.
+ * @returns The maintenance task store
+ */
+export const useMaintenanceTaskStore = defineStore('maintenanceTask', () => {
+  /** Refresh should run for at least this long, even if it completes much faster. Ensures refresh feels like it is doing something. */
+  const electron = electronAPI()
+
+  // Reactive state
+  const isRefreshing = ref(false)
+  const isRunningTerminalCommand = computed(() =>
+    tasks.value
+      .filter((task) => task.usesTerminal)
+      .some((task) => getRunner(task)?.executing)
+  )
+  const isRunningInstallationFix = computed(() =>
+    tasks.value
+      .filter((task) => task.isInstallationFix)
+      .some((task) => getRunner(task)?.executing)
+  )
+
+  // Task list
+  const tasks = ref(DESKTOP_MAINTENANCE_TASKS)
+
+  const taskRunners = ref(
+    new Map<MaintenanceTask['id'], MaintenanceTaskRunner>(
+      DESKTOP_MAINTENANCE_TASKS.map((x) => [x.id, new MaintenanceTaskRunner(x)])
+    )
+  )
+
+  /** True if any tasks are in an error state. */
+  const anyErrors = computed(() =>
+    tasks.value.some((task) => getRunner(task).state === 'error')
+  )
+
+  /**
+   * Returns the matching state object for a task.
+   * @param task Task to get the matching state object for
+   * @returns The state object for this task
+   */
+  const getRunner = (task: MaintenanceTask) => taskRunners.value.get(task.id)!
+
+  /**
+   * Updates the task list with the latest validation state.
+   * @param validationUpdate Update details passed in by electron
+   */
+  const processUpdate = (validationUpdate: InstallValidation) => {
+    const update = validationUpdate as IndexedUpdate
+    isRefreshing.value = true
+
+    // Update each task state
+    for (const task of tasks.value) {
+      getRunner(task).update(update)
+    }
+
+    // Final update
+    if (!update.inProgress && isRefreshing.value) {
+      isRefreshing.value = false
+
+      for (const task of tasks.value) {
+        getRunner(task).finaliseUpdate(update)
+      }
+    }
+  }
+
+  /** Clears the resolved status of tasks (when changing filters) */
+  const clearResolved = () => {
+    for (const task of tasks.value) {
+      getRunner(task).resolved &&= false
+    }
+  }
+
+  /** @todo Refreshes Electron tasks only. */
+  const refreshDesktopTasks = async () => {
+    isRefreshing.value = true
+    await electron.Validation.validateInstallation(processUpdate)
+  }
+
+  const execute = async (task: MaintenanceTask) => {
+    return getRunner(task).execute(task)
+  }
+
+  return {
+    tasks,
+    isRefreshing,
+    isRunningTerminalCommand,
+    isRunningInstallationFix,
+    execute,
+    getRunner,
+    processUpdate,
+    clearResolved,
+    /** True if any tasks are in an error state. */
+    anyErrors,
+    refreshDesktopTasks
+  }
+})
--- a/apps/desktop-ui/src/types/desktop/index.d.ts
+++ b/apps/desktop-ui/src/types/desktop/index.d.ts
--- a/apps/desktop-ui/src/types/desktop/maintenanceTypes.ts
+++ b/apps/desktop-ui/src/types/desktop/maintenanceTypes.ts
@@ -0,0 +1,50 @@
+import type { PrimeVueSeverity } from '../primeVueTypes'
+
+interface MaintenanceTaskButton {
+  /** The text to display on the button. */
+  text?: string
+  /** CSS classes used for the button icon, e.g. 'pi pi-external-link' */
+  icon?: string
+}
+
+/** A maintenance task, used by the maintenance page. */
+export interface MaintenanceTask {
+  /** ID string used as i18n key */
+  id: string
+  /** The display name of the task, e.g. Git */
+  name: string
+  /** Short description of the task. */
+  shortDescription?: string
+  /** Description of the task when it is in an error state. */
+  errorDescription?: string
+  /** Description of the task when it is in a warning state. */
+  warningDescription?: string
+  /** Full description of the task when it is in an OK state. */
+  description?: string
+  /** URL to the image to show in card mode. */
+  headerImg?: string
+  /** The button to display on the task card / list item. */
+  button?: MaintenanceTaskButton
+  /** Whether to show a confirmation dialog before running the task. */
+  requireConfirm?: boolean
+  /** The text to display in the confirmation dialog. */
+  confirmText?: string
+  /** Called by onClick to run the actual task. */
+  execute: (args?: unknown[]) => boolean | Promise<boolean>
+  /** Show the button with `severity="danger"` */
+  severity?: PrimeVueSeverity
+  /** Whether this task should display the terminal window when run. */
+  usesTerminal?: boolean
+  /** If `true`, successful completion of this task will refresh install validation and automatically continue if successful. */
+  isInstallationFix?: boolean
+}
+
+/** The filter options for the maintenance task list. */
+export interface MaintenanceFilter {
+  /** CSS classes used for the filter button icon, e.g. 'pi pi-cross' */
+  icon: string
+  /** The text to display on the filter button. */
+  value: string
+  /** The tasks to display when this filter is selected. */
+  tasks: ReadonlyArray<MaintenanceTask>
+}
--- a/apps/desktop-ui/src/types/global.d.ts
+++ b/apps/desktop-ui/src/types/global.d.ts
@@ -0,0 +1,12 @@
+declare global {
+  interface Navigator {
+    /**
+     * Desktop app uses windowControlsOverlay to decide if it is in a custom window.
+     */
+    windowControlsOverlay?: {
+      visible: boolean
+    }
+  }
+}
+
+export {}
--- a/apps/desktop-ui/src/types/primeVueTypes.ts
+++ b/apps/desktop-ui/src/types/primeVueTypes.ts
@@ -0,0 +1,10 @@
+/** Button, Tag, etc severity type is 'string' instead of this list. */
+export type PrimeVueSeverity =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'info'
+  | 'warn'
+  | 'help'
+  | 'danger'
+  | 'contrast'
--- a/apps/desktop-ui/src/utils/electronMirrorCheck.ts
+++ b/apps/desktop-ui/src/utils/electronMirrorCheck.ts
@@ -0,0 +1,14 @@
+import { isValidUrl } from '@comfyorg/shared-frontend-utils/formatUtil'
+
+import { electronAPI } from './envUtil'
+
+/**
+ * Check if a mirror is reachable from the electron App.
+ * @param mirror - The mirror to check.
+ * @returns True if the mirror is reachable, false otherwise.
+ */
+export const checkMirrorReachable = async (mirror: string) => {
+  return (
+    isValidUrl(mirror) && (await electronAPI().NetWork.canAccessUrl(mirror))
+  )
+}
--- a/apps/desktop-ui/src/utils/envUtil.ts
+++ b/apps/desktop-ui/src/utils/envUtil.ts
@@ -0,0 +1,13 @@
+import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
+
+export function isElectron() {
+  return 'electronAPI' in window && window.electronAPI !== undefined
+}
+
+export function electronAPI() {
+  return (window as any).electronAPI as ElectronAPI
+}
+
+export function isNativeWindow() {
+  return isElectron() && !!window.navigator.windowControlsOverlay?.visible
+}
--- a/apps/desktop-ui/src/utils/refUtil.ts
+++ b/apps/desktop-ui/src/utils/refUtil.ts
@@ -0,0 +1,29 @@
+import { useTimeout } from '@vueuse/core'
+import { type Ref, computed, ref, watch } from 'vue'
+
+/**
+ * Vue boolean ref (writable computed) with one difference: when set to `true` it stays that way for at least {@link minDuration}.
+ * If set to `false` before {@link minDuration} has passed, it uses a timer to delay the change.
+ * @param value The default value to set on this ref
+ * @param minDuration The minimum time that this ref must be `true` for
+ * @returns A custom boolean vue ref with a minimum activation time
+ */
+export function useMinLoadingDurationRef(
+  value: Ref<boolean>,
+  minDuration = 250
+) {
+  const current = ref(value.value)
+
+  const { ready, start } = useTimeout(minDuration, {
+    controls: true,
+    immediate: false
+  })
+
+  watch(value, (newValue) => {
+    if (newValue && !current.value) start()
+
+    current.value = newValue
+  })
+
+  return computed(() => current.value || !ready.value)
+}
--- a/apps/desktop-ui/src/utils/tailwindUtil.ts
+++ b/apps/desktop-ui/src/utils/tailwindUtil.ts
@@ -0,0 +1 @@
+export { cn } from '@comfyorg/tailwind-utils'
--- a/apps/desktop-ui/src/utils/validationUtil.ts
+++ b/apps/desktop-ui/src/utils/validationUtil.ts
@@ -0,0 +1,6 @@
+export enum ValidationState {
+  IDLE = 'IDLE',
+  LOADING = 'LOADING',
+  VALID = 'VALID',
+  INVALID = 'INVALID'
+}
--- a/apps/desktop-ui/src/views/DesktopDialogView.vue
+++ b/apps/desktop-ui/src/views/DesktopDialogView.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
+    <h1 class="font-inter font-semibold text-xl m-0 italic">
+      {{ t(`desktopDialogs.${id}.title`, title) }}
+    </h1>
+    <p class="whitespace-pre-wrap">
+      {{ t(`desktopDialogs.${id}.message`, message) }}
+    </p>
+    <div class="flex w-full gap-2">
+      <Button
+        v-for="button in buttons"
+        :key="button.label"
+        class="rounded-lg first:mr-auto"
+        :label="
+          t(
+            `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
+            button.label
+          )
+        "
+        :severity="button.severity ?? 'secondary'"
+        @click="handleButtonClick(button)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
+import Button from 'primevue/button'
+import { useRoute } from 'vue-router'
+
+import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
+import { t } from '@/i18n'
+import { electronAPI } from '@/utils/envUtil'
+
+const route = useRoute()
+const { id, title, message, buttons } = getDialog(route.params.dialogId)
+
+const handleButtonClick = async (button: DialogAction) => {
+  await electronAPI().Dialog.clickButton(button.returnValue)
+}
+</script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+.p-button-secondary {
+  @apply text-white border-none bg-neutral-600;
+}
+
+.p-button-secondary:hover {
+  @apply bg-neutral-550;
+}
+
+.p-button-secondary:active {
+  @apply bg-neutral-500;
+}
+
+.p-button-danger {
+  @apply bg-coral-red-600;
+}
+
+.p-button-danger:hover {
+  @apply bg-coral-red-500;
+}
+
+.p-button-danger:active {
+  @apply bg-coral-red-400;
+}
+</style>
--- a/apps/desktop-ui/src/views/DesktopStartView.vue
+++ b/apps/desktop-ui/src/views/DesktopStartView.vue
@@ -0,0 +1,11 @@
+<template>
+  <BaseViewTemplate dark>
+    <StartupDisplay :title="$t('desktopStart.initialising')" />
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import StartupDisplay from '@/components/common/StartupDisplay.vue'
+
+import BaseViewTemplate from './templates/BaseViewTemplate.vue'
+</script>
--- a/apps/desktop-ui/src/views/DesktopUpdateView.vue
+++ b/apps/desktop-ui/src/views/DesktopUpdateView.vue
@@ -0,0 +1,83 @@
+<template>
+  <BaseViewTemplate dark>
+    <div
+      class="h-screen w-screen grid items-center justify-around overflow-y-auto"
+    >
+      <div class="relative m-8 text-center">
+        <!-- Header -->
+        <h1 class="download-bg pi-download text-4xl font-bold">
+          {{ t('desktopUpdate.title') }}
+        </h1>
+
+        <div class="m-8">
+          <span>{{ t('desktopUpdate.description') }}</span>
+        </div>
+
+        <ProgressSpinner class="m-8 w-48 h-48" />
+
+        <!-- Console button -->
+        <Button
+          style="transform: translateX(-50%)"
+          class="fixed bottom-0 left-1/2 my-8"
+          :label="t('maintenance.consoleLogs')"
+          icon="pi pi-desktop"
+          icon-pos="left"
+          severity="secondary"
+          @click="toggleConsoleDrawer"
+        />
+
+        <TerminalOutputDrawer
+          v-model="terminalVisible"
+          :header="t('g.terminal')"
+          :default-message="t('desktopUpdate.terminalDefaultMessage')"
+        />
+      </div>
+    </div>
+    <Toast />
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
+import Toast from 'primevue/toast'
+import { onUnmounted, ref } from 'vue'
+
+import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
+import { t } from '@/i18n'
+import { electronAPI } from '@/utils/envUtil'
+
+import BaseViewTemplate from './templates/BaseViewTemplate.vue'
+
+const electron = electronAPI()
+
+const terminalVisible = ref(false)
+
+const toggleConsoleDrawer = () => {
+  terminalVisible.value = !terminalVisible.value
+}
+
+onUnmounted(() => electron.Validation.dispose())
+</script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+.download-bg::before {
+  @apply m-0 absolute text-muted;
+  font-family: 'primeicons';
+  top: -2rem;
+  right: 2rem;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  opacity: 0.02;
+  font-size: min(14rem, 90vw);
+  z-index: 0;
+}
+</style>
--- a/apps/desktop-ui/src/views/DownloadGitView.vue
+++ b/apps/desktop-ui/src/views/DownloadGitView.vue
@@ -0,0 +1,59 @@
+<template>
+  <BaseViewTemplate>
+    <div
+      class="max-w-(--breakpoint-sm) flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-top-right bg-origin-padding"
+    >
+      <!-- Header -->
+      <h1 class="mt-24 text-4xl font-bold text-red-500">
+        {{ $t('downloadGit.title') }}
+      </h1>
+
+      <!-- Message -->
+      <div class="space-y-4">
+        <p class="text-xl">
+          {{ $t('downloadGit.message') }}
+        </p>
+        <p class="text-xl">
+          {{ $t('downloadGit.instructions') }}
+        </p>
+        <p class="text-m">
+          {{ $t('downloadGit.warning') }}
+        </p>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex gap-4 flex-row-reverse">
+        <Button
+          :label="$t('downloadGit.gitWebsite')"
+          icon="pi pi-external-link"
+          icon-pos="right"
+          severity="primary"
+          @click="openGitDownloads"
+        />
+        <Button
+          :label="$t('downloadGit.skip')"
+          icon="pi pi-exclamation-triangle"
+          severity="secondary"
+          @click="skipGit"
+        />
+      </div>
+    </div>
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useRouter } from 'vue-router'
+
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const openGitDownloads = () => {
+  window.open('https://git-scm.com/downloads/', '_blank')
+}
+
+const skipGit = async () => {
+  console.warn('pushing')
+  const router = useRouter()
+  await router.push('install')
+}
+</script>
--- a/apps/desktop-ui/src/views/InstallView.stories.ts
+++ b/apps/desktop-ui/src/views/InstallView.stories.ts
@@ -0,0 +1,417 @@
+// eslint-disable-next-line storybook/no-renderer-packages
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { nextTick, provide } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+import InstallView from './InstallView.vue'
+
+// Create a mock router for stories
+const createMockRouter = () =>
+  createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', component: { template: '<div>Home</div>' } },
+      {
+        path: '/server-start',
+        component: { template: '<div>Server Start</div>' }
+      },
+      {
+        path: '/manual-configuration',
+        component: { template: '<div>Manual Configuration</div>' }
+      }
+    ]
+  })
+
+const meta: Meta<typeof InstallView> = {
+  title: 'Desktop/Views/InstallView',
+  component: InstallView,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#0a0a0a' },
+        { name: 'neutral-900', value: '#171717' },
+        { name: 'neutral-950', value: '#0a0a0a' }
+      ]
+    }
+  },
+  decorators: [
+    (story) => {
+      // Create router for this story
+      const router = createMockRouter()
+
+      // Mock electron API
+      ;(window as any).electronAPI = {
+        getPlatform: () => 'darwin',
+        Config: {
+          getDetectedGpu: () => Promise.resolve('mps')
+        },
+        Events: {
+          trackEvent: (_eventName: string, _data?: any) => {}
+        },
+        installComfyUI: (_options: any) => {},
+        changeTheme: (_theme: any) => {},
+        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 {
+        setup() {
+          // Provide router for all child components
+          provide('router', router)
+          return {
+            story
+          }
+        },
+        template: '<div style="width: 100vw; height: 100vh;"><story /></div>'
+      }
+    }
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default story - start at GPU selection
+export const GpuSelection: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      // The component will automatically start at step 1
+      return {}
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story showing the install location step
+export const InstallLocation: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Select Apple Metal option to enable navigation
+      const hardwareOptions = this.$el.querySelectorAll(
+        '.p-selectbutton-option'
+      )
+      if (hardwareOptions.length > 0) {
+        hardwareOptions[0].click() // Click Apple Metal (first option)
+      }
+
+      await nextTick()
+
+      // Click Next to go to step 2
+      const buttons = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn = buttons.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn) {
+        nextBtn.click()
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story showing the migration step (currently empty)
+export const MigrationStep: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Select Apple Metal option to enable navigation
+      const hardwareOptions = this.$el.querySelectorAll(
+        '.p-selectbutton-option'
+      )
+      if (hardwareOptions.length > 0) {
+        hardwareOptions[0].click() // Click Apple Metal (first option)
+      }
+
+      await nextTick()
+
+      // Click Next to go to step 2
+      const buttons1 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn1 = buttons1.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn1) {
+        nextBtn1.click()
+      }
+
+      await nextTick()
+
+      // Click Next again to go to step 3
+      const buttons2 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn2 = buttons2.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn2) {
+        nextBtn2.click()
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story showing the desktop settings configuration
+export const DesktopSettings: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Select Apple Metal option to enable navigation
+      const hardwareOptions = this.$el.querySelectorAll(
+        '.p-selectbutton-option'
+      )
+      if (hardwareOptions.length > 0) {
+        hardwareOptions[0].click() // Click Apple Metal (first option)
+      }
+
+      await nextTick()
+
+      // Click Next to go to step 2
+      const buttons1 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn1 = buttons1.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn1) {
+        nextBtn1.click()
+      }
+
+      await nextTick()
+
+      // Click Next again to go to step 3
+      const buttons2 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn2 = buttons2.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn2) {
+        nextBtn2.click()
+      }
+
+      await nextTick()
+
+      // Click Next again to go to step 4
+      const buttons3 = Array.from(
+        this.$el.querySelectorAll('button')
+      ) as HTMLButtonElement[]
+      const nextBtn3 = buttons3.find((btn) => btn.textContent?.includes('Next'))
+      if (nextBtn3) {
+        nextBtn3.click()
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story with Windows platform (no Apple Metal option)
+export const WindowsPlatform: Story = {
+  render: () => {
+    // Override the platform to Windows
+    ;(window as any).electronAPI.getPlatform = () => 'win32'
+    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
+      Promise.resolve('nvidia')
+
+    return {
+      components: { InstallView },
+      setup() {
+        return {}
+      },
+      template: '<InstallView />'
+    }
+  }
+}
+
+// Story with macOS platform (Apple Metal option)
+export const MacOSPlatform: Story = {
+  name: 'macOS Platform',
+  render: () => {
+    // Override the platform to macOS
+    ;(window as any).electronAPI.getPlatform = () => 'darwin'
+    ;(window as any).electronAPI.Config.getDetectedGpu = () =>
+      Promise.resolve('mps')
+
+    return {
+      components: { InstallView },
+      setup() {
+        return {}
+      },
+      template: '<InstallView />'
+    }
+  }
+}
+
+// Story with CPU selected
+export const CpuSelected: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Find and click the CPU hardware option
+      const hardwareButtons = this.$el.querySelectorAll('.hardware-option')
+      // CPU is the button with "CPU" text
+      for (const button of hardwareButtons) {
+        if (button.textContent?.includes('CPU')) {
+          button.click()
+          break
+        }
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story with manual install selected
+export const ManualInstall: Story = {
+  render: () => ({
+    components: { InstallView },
+    setup() {
+      return {}
+    },
+    async mounted() {
+      // Wait for component to be fully mounted
+      await nextTick()
+
+      // Find and click the Manual Install hardware option
+      const hardwareButtons = this.$el.querySelectorAll('.hardware-option')
+      // Manual Install is the button with "Manual Install" text
+      for (const button of hardwareButtons) {
+        if (button.textContent?.includes('Manual Install')) {
+          button.click()
+          break
+        }
+      }
+    },
+    template: '<InstallView />'
+  })
+}
+
+// Story with error state (invalid install path)
+export const ErrorState: Story = {
+  render: () => {
+    // Override validation to return an error
+    ;(window as any).electronAPI.validateInstallPath = () =>
+      Promise.resolve({
+        isValid: false,
+        exists: false,
+        canWrite: false,
+        freeSpace: 100000000000,
+        requiredSpace: 10000000000,
+        isNonDefaultDrive: false,
+        error: 'Story mock: Example error state'
+      })
+
+    return {
+      components: { InstallView },
+      setup() {
+        return {}
+      },
+      async mounted() {
+        // Wait for component to be fully mounted
+        await nextTick()
+
+        // Select Apple Metal option to enable navigation
+        const hardwareOptions = this.$el.querySelectorAll(
+          '.p-selectbutton-option'
+        )
+        if (hardwareOptions.length > 0) {
+          hardwareOptions[0].click() // Click Apple Metal (first option)
+        }
+
+        await nextTick()
+
+        // Click Next to go to step 2 where error will be shown
+        const buttons = Array.from(
+          this.$el.querySelectorAll('button')
+        ) as HTMLButtonElement[]
+        const nextBtn = buttons.find((btn) => btn.textContent?.includes('Next'))
+        if (nextBtn) {
+          nextBtn.click()
+        }
+      },
+      template: '<InstallView />'
+    }
+  }
+}
+
+// Story with warning state (non-default drive)
+export const WarningState: Story = {
+  render: () => {
+    // Override validation to return a warning about non-default drive
+    ;(window as any).electronAPI.validateInstallPath = () =>
+      Promise.resolve({
+        isValid: true,
+        exists: false,
+        canWrite: true,
+        freeSpace: 500_000_000_000,
+        requiredSpace: 10_000_000_000,
+        isNonDefaultDrive: true
+      })
+
+    return {
+      components: { InstallView },
+      setup() {
+        return {}
+      },
+      async mounted() {
+        // Wait for component to be fully mounted
+        await nextTick()
+
+        // Select Apple Metal option to enable navigation
+        const hardwareOptions = this.$el.querySelectorAll('.hardware-option')
+        if (hardwareOptions.length > 0) {
+          hardwareOptions[0].click() // Click Apple Metal (first option)
+        }
+
+        await nextTick()
+
+        // Click Next to go to step 2 where warning will be shown
+        const buttons = Array.from(
+          this.$el.querySelectorAll('button')
+        ) as HTMLButtonElement[]
+        const nextBtn = buttons.find((btn) => btn.textContent?.includes('Next'))
+        if (nextBtn) {
+          nextBtn.click()
+        }
+      },
+      template: '<InstallView />'
+    }
+  }
+}
--- a/apps/desktop-ui/src/views/InstallView.vue
+++ b/apps/desktop-ui/src/views/InstallView.vue
@@ -0,0 +1,210 @@
+<template>
+  <BaseViewTemplate dark>
+    <!-- Fixed height container with flexbox layout for proper content management -->
+    <div class="w-full h-full flex flex-col">
+      <Stepper
+        v-model:value="currentStep"
+        class="flex flex-col h-full"
+        @update:value="handleStepChange"
+      >
+        <!-- Main content area that grows to fill available space -->
+        <StepPanels
+          class="flex-1 overflow-auto"
+          :style="{ scrollbarGutter: 'stable' }"
+        >
+          <StepPanel value="1" class="flex">
+            <GpuPicker v-model:device="device" />
+          </StepPanel>
+          <StepPanel value="2">
+            <InstallLocationPicker
+              v-model:install-path="installPath"
+              v-model:path-error="pathError"
+              v-model:migration-source-path="migrationSourcePath"
+              v-model:migration-item-ids="migrationItemIds"
+              v-model:python-mirror="pythonMirror"
+              v-model:pypi-mirror="pypiMirror"
+              v-model:torch-mirror="torchMirror"
+              :device="device"
+            />
+          </StepPanel>
+          <StepPanel value="3">
+            <DesktopSettingsConfiguration
+              v-model:auto-update="autoUpdate"
+              v-model:allow-metrics="allowMetrics"
+            />
+          </StepPanel>
+        </StepPanels>
+
+        <!-- Install footer with navigation -->
+        <InstallFooter
+          class="w-full max-w-2xl my-6 mx-auto"
+          :current-step
+          :can-proceed
+          :disable-location-step="noGpu"
+          :disable-migration-step="noGpu || hasError || highestStep < 2"
+          :disable-settings-step="noGpu || hasError || highestStep < 3"
+          @previous="goToPreviousStep"
+          @next="goToNextStep"
+          @install="install"
+        />
+      </Stepper>
+    </div>
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import type {
+  InstallOptions,
+  TorchDeviceType
+} from '@comfyorg/comfyui-electron-types'
+import StepPanel from 'primevue/steppanel'
+import StepPanels from 'primevue/steppanels'
+import Stepper from 'primevue/stepper'
+import { computed, onMounted, ref, toRaw } from 'vue'
+import { useRouter } from 'vue-router'
+
+import DesktopSettingsConfiguration from '@/components/install/DesktopSettingsConfiguration.vue'
+import GpuPicker from '@/components/install/GpuPicker.vue'
+import InstallFooter from '@/components/install/InstallFooter.vue'
+import InstallLocationPicker from '@/components/install/InstallLocationPicker.vue'
+import { electronAPI } from '@/utils/envUtil'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const device = ref<TorchDeviceType | null>(null)
+
+const installPath = ref('')
+const pathError = ref('')
+
+const migrationSourcePath = ref('')
+const migrationItemIds = ref<string[]>([])
+
+const autoUpdate = ref(true)
+const allowMetrics = ref(true)
+const pythonMirror = ref('')
+const pypiMirror = ref('')
+const torchMirror = ref('')
+
+/** Current step in the stepper */
+const currentStep = ref('1')
+
+/** Forces each install step to be visited at least once. */
+const highestStep = ref(0)
+
+const handleStepChange = (value: string | number) => {
+  setHighestStep(value)
+
+  electronAPI().Events.trackEvent('install_stepper_change', {
+    step: value
+  })
+}
+
+const setHighestStep = (value: string | number) => {
+  const int = typeof value === 'number' ? value : parseInt(value, 10)
+  if (!isNaN(int) && int > highestStep.value) highestStep.value = int
+}
+
+const hasError = computed(() => pathError.value !== '')
+const noGpu = computed(() => typeof device.value !== 'string')
+
+// Computed property to determine if user can proceed to next step
+const regex = /^Insufficient space - minimum free space: \d+ GB$/
+
+const canProceed = computed(() => {
+  switch (currentStep.value) {
+    case '1':
+      return typeof device.value === 'string'
+    case '2':
+      return pathError.value === '' || regex.test(pathError.value)
+    case '3':
+      return !hasError.value
+    default:
+      return false
+  }
+})
+
+// Navigation methods
+const goToNextStep = () => {
+  const nextStep = (parseInt(currentStep.value) + 1).toString()
+  currentStep.value = nextStep
+  setHighestStep(nextStep)
+  electronAPI().Events.trackEvent('install_stepper_change', {
+    step: nextStep
+  })
+}
+
+const goToPreviousStep = () => {
+  const prevStep = (parseInt(currentStep.value) - 1).toString()
+  currentStep.value = prevStep
+  electronAPI().Events.trackEvent('install_stepper_change', {
+    step: prevStep
+  })
+}
+
+const electron = electronAPI()
+const router = useRouter()
+const install = async () => {
+  const options: InstallOptions = {
+    installPath: installPath.value,
+    autoUpdate: autoUpdate.value,
+    allowMetrics: allowMetrics.value,
+    migrationSourcePath: migrationSourcePath.value,
+    migrationItemIds: toRaw(migrationItemIds.value),
+    pythonMirror: pythonMirror.value,
+    pypiMirror: pypiMirror.value,
+    torchMirror: torchMirror.value,
+    // @ts-expect-error fixme ts strict error
+    device: device.value
+  }
+  electron.installComfyUI(options)
+
+  const nextPage =
+    options.device === 'unsupported' ? '/manual-configuration' : '/server-start'
+  await router.push(nextPage)
+}
+
+onMounted(async () => {
+  if (!electron) return
+
+  const detectedGpu = await electron.Config.getDetectedGpu()
+  if (detectedGpu === 'mps' || detectedGpu === 'nvidia') {
+    device.value = detectedGpu
+  }
+
+  electronAPI().Events.trackEvent('install_stepper_change', {
+    step: currentStep.value,
+    gpu: detectedGpu
+  })
+})
+</script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+:deep(.p-steppanel) {
+  @apply mt-8 flex justify-center bg-transparent;
+}
+
+/* Remove default padding/margin from StepPanels to make scrollbar flush */
+:deep(.p-steppanels) {
+  @apply p-0 m-0;
+}
+
+/* Ensure StepPanel content container has no top/bottom padding */
+:deep(.p-steppanel-content) {
+  @apply p-0;
+}
+
+/* Custom overlay scrollbar for WebKit browsers (Electron, Chrome) */
+:deep(.p-steppanels::-webkit-scrollbar) {
+  @apply w-4;
+}
+
+:deep(.p-steppanels::-webkit-scrollbar-track) {
+  @apply bg-transparent;
+}
+
+:deep(.p-steppanels::-webkit-scrollbar-thumb) {
+  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
+  background-clip: content-box;
+}
+</style>
--- a/apps/desktop-ui/src/views/MaintenanceView.vue
+++ b/apps/desktop-ui/src/views/MaintenanceView.vue
@@ -0,0 +1,204 @@
+<template>
+  <BaseViewTemplate dark>
+    <div
+      class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
+    >
+      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
+        <!-- Header -->
+        <h1 class="backspan pi-wrench text-4xl font-bold">
+          {{ t('maintenance.title') }}
+        </h1>
+
+        <!-- Toolbar -->
+        <div class="w-full flex flex-wrap gap-4 items-center">
+          <span class="grow">
+            {{ t('maintenance.status') }}:
+            <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
+          </span>
+          <div class="flex gap-4 items-center">
+            <SelectButton
+              v-model="displayAsList"
+              :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
+              :allow-empty="false"
+            >
+              <template #option="opts">
+                <i :class="opts.option" />
+              </template>
+            </SelectButton>
+            <SelectButton
+              v-model="filter"
+              :options="filterOptions"
+              :allow-empty="false"
+              option-label="value"
+              data-key="value"
+              area-labelledby="custom"
+              @change="clearResolved"
+            >
+              <template #option="opts">
+                <i :class="opts.option.icon" />
+                <span class="max-sm:hidden">{{ opts.option.value }}</span>
+              </template>
+            </SelectButton>
+            <RefreshButton
+              v-model="isRefreshing"
+              severity="secondary"
+              @refresh="refreshDesktopTasks"
+            />
+          </div>
+        </div>
+
+        <!-- Tasks -->
+        <TaskListPanel
+          class="border-neutral-700 border-solid border-x-0 border-y"
+          :filter
+          :display-as-list
+          :is-refreshing
+        />
+
+        <!-- Actions -->
+        <div class="flex justify-between gap-4 flex-row">
+          <Button
+            :label="t('maintenance.consoleLogs')"
+            icon="pi pi-desktop"
+            icon-pos="left"
+            severity="secondary"
+            @click="toggleConsoleDrawer"
+          />
+          <Button
+            :label="t('g.continue')"
+            icon="pi pi-arrow-right"
+            icon-pos="left"
+            :severity="anyErrors ? 'secondary' : 'primary'"
+            :loading="isRefreshing"
+            @click="() => completeValidation()"
+          />
+        </div>
+      </div>
+
+      <TerminalOutputDrawer
+        v-model="terminalVisible"
+        :header="t('g.terminal')"
+        :default-message="t('maintenance.terminalDefaultMessage')"
+      />
+      <Toast />
+    </div>
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import { PrimeIcons } from '@primevue/core/api'
+import Button from 'primevue/button'
+import SelectButton from 'primevue/selectbutton'
+import Toast from 'primevue/toast'
+import { useToast } from 'primevue/usetoast'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { watch } from 'vue'
+
+import RefreshButton from '@/components/common/RefreshButton.vue'
+import StatusTag from '@/components/maintenance/StatusTag.vue'
+import TaskListPanel from '@/components/maintenance/TaskListPanel.vue'
+import TerminalOutputDrawer from '@/components/maintenance/TerminalOutputDrawer.vue'
+import { t } from '@/i18n'
+import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
+import type { MaintenanceFilter } from '@/types/desktop/maintenanceTypes'
+import { electronAPI } from '@/utils/envUtil'
+import { useMinLoadingDurationRef } from '@/utils/refUtil'
+
+import BaseViewTemplate from './templates/BaseViewTemplate.vue'
+
+const electron = electronAPI()
+const toast = useToast()
+const taskStore = useMaintenanceTaskStore()
+const { clearResolved, processUpdate, refreshDesktopTasks } = taskStore
+
+const terminalVisible = ref(false)
+
+// Use a minimum run time to ensure tasks "feel" like they have run
+const reactiveIsRefreshing = computed(() => taskStore.isRefreshing)
+/** `true` when waiting on tasks to complete. */
+const isRefreshing = useMinLoadingDurationRef(reactiveIsRefreshing, 250)
+
+/** True if any tasks are in an error state. */
+const anyErrors = computed(() => taskStore.anyErrors)
+
+/** Whether to display tasks as a list or cards. */
+const displayAsList = ref(PrimeIcons.TH_LARGE)
+
+const errorFilter = computed(() =>
+  taskStore.tasks.filter((x) => {
+    const { state, resolved } = taskStore.getRunner(x)
+    return state === 'error' || resolved
+  })
+)
+
+const filterOptions = ref([
+  { icon: PrimeIcons.FILTER_FILL, value: 'All', tasks: taskStore.tasks },
+  { icon: PrimeIcons.EXCLAMATION_TRIANGLE, value: 'Errors', tasks: errorFilter }
+])
+
+/** Filter binding; can be set to show all tasks, or only errors. */
+const filter = ref<MaintenanceFilter>(filterOptions.value[0])
+
+/** If valid, leave the validation window. */
+const completeValidation = async () => {
+  const isValid = await electron.Validation.complete()
+  if (!isValid) {
+    toast.add({
+      severity: 'error',
+      summary: t('g.error'),
+      detail: t('maintenance.error.cannotContinue'),
+      life: 5_000
+    })
+  }
+}
+
+const toggleConsoleDrawer = () => {
+  terminalVisible.value = !terminalVisible.value
+}
+
+// Show terminal when in use
+watch(
+  () => taskStore.isRunningTerminalCommand,
+  (value) => {
+    terminalVisible.value = value
+  }
+)
+
+onMounted(async () => {
+  electron.Validation.onUpdate(processUpdate)
+
+  const update = await electron.Validation.getStatus()
+  if (Object.values(update).some((x) => x === 'error')) {
+    filter.value = filterOptions.value[1]
+  }
+  processUpdate(update)
+})
+
+onUnmounted(() => electron.Validation.dispose())
+</script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+:deep(.p-tag) {
+  --p-tag-gap: 0.375rem;
+}
+
+.backspan::before {
+  @apply m-0 absolute text-muted;
+  font-family: 'primeicons';
+  top: -2rem;
+  right: -2rem;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  -webkit-font-smoothing: antialiased;
+  opacity: 0.02;
+  font-size: min(14rem, 90vw);
+  z-index: 0;
+}
+</style>
--- a/apps/desktop-ui/src/views/ManualConfigurationView.vue
+++ b/apps/desktop-ui/src/views/ManualConfigurationView.vue
@@ -0,0 +1,86 @@
+<template>
+  <BaseViewTemplate dark>
+    <!-- Installation Path Section -->
+    <div
+      class="comfy-installer grow flex flex-col gap-4 text-neutral-300 max-w-110"
+    >
+      <h2 class="text-2xl font-semibold text-neutral-100">
+        {{ $t('install.manualConfiguration.title') }}
+      </h2>
+
+      <p class="m-1 text-neutral-300">
+        <Tag
+          icon="pi pi-exclamation-triangle"
+          severity="warn"
+          :value="t('icon.exclamation-triangle')"
+        />
+        <strong class="ml-2">{{
+          $t('install.gpuSelection.customComfyNeedsPython')
+        }}</strong>
+      </p>
+
+      <div>
+        <p class="m-1 mb-4">
+          {{ $t('install.manualConfiguration.requirements') }}:
+        </p>
+        <ul class="m-0">
+          <li>{{ $t('install.gpuSelection.customManualVenv') }}</li>
+          <li>{{ $t('install.gpuSelection.customInstallRequirements') }}</li>
+        </ul>
+      </div>
+
+      <p class="m-1">{{ $t('install.manualConfiguration.createVenv') }}:</p>
+
+      <Panel :header="t('install.manualConfiguration.virtualEnvironmentPath')">
+        <span class="font-mono">{{ `${basePath}${sep}.venv${sep}` }}</span>
+      </Panel>
+
+      <p class="m-1">
+        {{ $t('install.manualConfiguration.restartWhenFinished') }}
+      </p>
+
+      <Button
+        class="place-self-end"
+        :label="t('menuLabels.Restart')"
+        severity="warn"
+        icon="pi pi-refresh"
+        @click="restartApp('Manual configuration complete')"
+      />
+    </div>
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Panel from 'primevue/panel'
+import Tag from 'primevue/tag'
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { electronAPI } from '@/utils/envUtil'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const { t } = useI18n()
+
+const electron = electronAPI()
+
+const basePath = ref<string | null>(null)
+const sep = ref<'\\' | '/'>('/')
+
+const restartApp = (message?: string) => electron.restartApp(message)
+
+onMounted(async () => {
+  basePath.value = await electron.getBasePath()
+  if (basePath.value.indexOf('/') === -1) sep.value = '\\'
+})
+</script>
+
+<style scoped>
+.p-tag {
+  --p-tag-gap: 0.5rem;
+}
+
+.comfy-installer {
+  margin-top: max(1rem, max(0px, calc((100vh - 42rem) * 0.5)));
+}
+</style>
--- a/apps/desktop-ui/src/views/MetricsConsentView.vue
+++ b/apps/desktop-ui/src/views/MetricsConsentView.vue
@@ -0,0 +1,83 @@
+<template>
+  <BaseViewTemplate dark>
+    <div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
+      <div
+        class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
+      >
+        <h2 class="text-3xl font-semibold text-neutral-100">
+          {{ $t('install.helpImprove') }}
+        </h2>
+        <p class="text-neutral-400">
+          {{ $t('install.updateConsent') }}
+        </p>
+        <p class="text-neutral-400">
+          {{ $t('install.moreInfo') }}
+          <a
+            href="https://comfy.org/privacy"
+            target="_blank"
+            class="text-blue-400 hover:text-blue-300 underline"
+          >
+            {{ $t('install.privacyPolicy') }} </a
+          >.
+        </p>
+        <div class="flex items-center gap-4">
+          <ToggleSwitch
+            v-model="allowMetrics"
+            aria-describedby="metricsDescription"
+          />
+          <span id="metricsDescription" class="text-neutral-100">
+            {{
+              allowMetrics
+                ? $t('install.metricsEnabled')
+                : $t('install.metricsDisabled')
+            }}
+          </span>
+        </div>
+        <div class="flex pt-6 justify-end">
+          <Button
+            :label="$t('g.ok')"
+            icon="pi pi-check"
+            :loading="isUpdating"
+            icon-pos="right"
+            @click="updateConsent"
+          />
+        </div>
+      </div>
+    </div>
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { useToast } from 'primevue/usetoast'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+import { electronAPI } from '@/utils/envUtil'
+
+const toast = useToast()
+const { t } = useI18n()
+
+const allowMetrics = ref(true)
+const router = useRouter()
+const isUpdating = ref(false)
+
+const updateConsent = async () => {
+  isUpdating.value = true
+  try {
+    await electronAPI().setMetricsConsent(allowMetrics.value)
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('install.errorUpdatingConsent'),
+      detail: t('install.errorUpdatingConsentDetail'),
+      life: 3000
+    })
+  } finally {
+    isUpdating.value = false
+  }
+  await router.push('/')
+}
+</script>
--- a/apps/desktop-ui/src/views/NotSupportedView.vue
+++ b/apps/desktop-ui/src/views/NotSupportedView.vue
@@ -0,0 +1,101 @@
+<template>
+  <BaseViewTemplate>
+    <div class="sad-container">
+      <!-- Right side image -->
+      <img
+        class="sad-girl"
+        src="/assets/images/sad_girl.png"
+        alt="Sad girl illustration"
+      />
+
+      <div class="no-drag sad-text flex items-center">
+        <div class="flex flex-col gap-8 p-8 min-w-110">
+          <!-- Header -->
+          <h1 class="text-4xl font-bold text-red-500">
+            {{ $t('notSupported.title') }}
+          </h1>
+
+          <!-- Message -->
+          <div class="space-y-4">
+            <p class="text-xl">
+              {{ $t('notSupported.message') }}
+            </p>
+            <ul class="list-disc list-inside space-y-1 text-neutral-800">
+              <li>{{ $t('notSupported.supportedDevices.macos') }}</li>
+              <li>{{ $t('notSupported.supportedDevices.windows') }}</li>
+            </ul>
+          </div>
+
+          <!-- Actions -->
+          <div class="flex gap-4">
+            <Button
+              :label="$t('notSupported.learnMore')"
+              icon="pi pi-github"
+              severity="secondary"
+              @click="openDocs"
+            />
+            <Button
+              :label="$t('notSupported.reportIssue')"
+              icon="pi pi-flag"
+              severity="secondary"
+              @click="reportIssue"
+            />
+            <Button
+              v-tooltip="$t('notSupported.continueTooltip')"
+              :label="$t('notSupported.continue')"
+              icon="pi pi-arrow-right"
+              icon-pos="right"
+              severity="danger"
+              @click="continueToInstall"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useRouter } from 'vue-router'
+
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const openDocs = () => {
+  window.open(
+    'https://github.com/Comfy-Org/desktop#currently-supported-platforms',
+    '_blank'
+  )
+}
+
+const reportIssue = () => {
+  window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
+}
+
+const router = useRouter()
+const continueToInstall = async () => {
+  await router.push('/install')
+}
+</script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+.sad-container {
+  @apply grid items-center justify-evenly;
+  grid-template-columns: 25rem 1fr;
+
+  & > * {
+    grid-row: 1;
+  }
+}
+
+.sad-text {
+  grid-column: 1/3;
+}
+
+.sad-girl {
+  grid-column: 2/3;
+  width: min(75vw, 100vh);
+}
+</style>
--- a/apps/desktop-ui/src/views/ServerStartView.vue
+++ b/apps/desktop-ui/src/views/ServerStartView.vue
@@ -0,0 +1,253 @@
+<template>
+  <BaseViewTemplate dark>
+    <div class="relative min-h-screen">
+      <!-- Terminal Background Layer (always visible during loading) -->
+      <div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
+        <div class="h-full w-full">
+          <BaseTerminal @created="terminalCreated" />
+        </div>
+      </div>
+
+      <!-- Semi-transparent overlay -->
+      <div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
+
+      <!-- Smooth radial gradient overlay -->
+      <div
+        v-if="!isError"
+        class="fixed inset-0 z-8"
+        style="
+          background: radial-gradient(
+            ellipse 800px 600px at center,
+            rgba(23, 23, 23, 0.95) 0%,
+            rgba(23, 23, 23, 0.93) 10%,
+            rgba(23, 23, 23, 0.9) 20%,
+            rgba(23, 23, 23, 0.85) 30%,
+            rgba(23, 23, 23, 0.75) 40%,
+            rgba(23, 23, 23, 0.6) 50%,
+            rgba(23, 23, 23, 0.4) 60%,
+            rgba(23, 23, 23, 0.2) 70%,
+            rgba(23, 23, 23, 0.1) 80%,
+            rgba(23, 23, 23, 0.05) 90%,
+            transparent 100%
+          );
+        "
+      ></div>
+
+      <div class="relative z-10">
+        <!-- Main startup display using StartupDisplay component -->
+        <StartupDisplay
+          :title="displayTitle"
+          :status-text="displayStatusText"
+          :progress-percentage="installStageProgress"
+          :hide-progress="isError"
+        />
+
+        <!-- Error Section (positioned at bottom) -->
+        <div
+          v-if="isError"
+          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
+        >
+          <div class="flex gap-4 justify-center">
+            <Button
+              icon="pi pi-flag"
+              :label="$t('serverStart.reportIssue')"
+              severity="secondary"
+              @click="reportIssue"
+            />
+            <Button
+              icon="pi pi-file"
+              :label="$t('serverStart.openLogs')"
+              severity="secondary"
+              @click="openLogs"
+            />
+            <Button
+              icon="pi pi-wrench"
+              :label="$t('serverStart.troubleshoot')"
+              @click="troubleshoot"
+            />
+          </div>
+
+          <div class="text-center">
+            <button
+              v-if="!terminalVisible"
+              class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors flex items-center gap-2 mx-auto"
+              @click="terminalVisible = true"
+            >
+              <i class="pi pi-search"></i>
+              {{ $t('serverStart.showTerminal') }}
+            </button>
+          </div>
+        </div>
+
+        <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
+        <div
+          v-if="terminalVisible && isError"
+          class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
+        >
+          <div
+            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
+          >
+            <BaseTerminal @created="terminalCreated" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import {
+  InstallStage,
+  type InstallStageInfo,
+  type InstallStageName,
+  ProgressStatus
+} from '@comfyorg/comfyui-electron-types'
+import type { Terminal } from '@xterm/xterm'
+import Button from 'primevue/button'
+import type { Ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
+import StartupDisplay from '@/components/common/StartupDisplay.vue'
+import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
+import { electronAPI } from '@/utils/envUtil'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const { t } = useI18n()
+const electron = electronAPI()
+
+const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
+const electronVersion = ref<string>('')
+const terminalVisible = ref(false)
+
+const installStage = ref<InstallStageName | null>(null)
+const installStageMessage = ref<string>('')
+const installStageProgress = ref<number | undefined>(undefined)
+
+let xterm: Terminal | undefined
+
+/**
+ * Handles installation stage updates from the desktop
+ */
+const updateInstallStage = (stageInfo: InstallStageInfo) => {
+  console.warn('[InstallStage.onUpdate] Received:', {
+    stage: stageInfo.stage,
+    progress: stageInfo.progress,
+    message: stageInfo.message,
+    error: stageInfo.error,
+    timestamp: stageInfo.timestamp,
+    fullInfo: stageInfo
+  })
+
+  installStage.value = stageInfo.stage
+  installStageMessage.value = stageInfo.message || ''
+  installStageProgress.value = stageInfo.progress
+}
+
+const currentStatusLabel = computed(() => {
+  // Use the message from the Electron API if available
+  if (installStageMessage.value) {
+    return installStageMessage.value
+  }
+  return t(`serverStart.process.${status.value}`)
+})
+
+const isError = computed(
+  () =>
+    status.value === ProgressStatus.ERROR ||
+    installStage.value === InstallStage.ERROR
+)
+
+const isInstallationStage = computed(() => {
+  const installationStages: InstallStageName[] = [
+    InstallStage.WELCOME_SCREEN,
+    InstallStage.INSTALL_OPTIONS_SELECTION,
+    InstallStage.CREATING_DIRECTORIES,
+    InstallStage.INITIALIZING_CONFIG,
+    InstallStage.PYTHON_ENVIRONMENT_SETUP,
+    InstallStage.INSTALLING_REQUIREMENTS,
+    InstallStage.INSTALLING_PYTORCH,
+    InstallStage.INSTALLING_COMFYUI_REQUIREMENTS,
+    InstallStage.INSTALLING_MANAGER_REQUIREMENTS,
+    InstallStage.MIGRATING_CUSTOM_NODES
+  ]
+  return (
+    installStage.value !== null &&
+    installationStages.includes(installStage.value)
+  )
+})
+
+const displayTitle = computed(() => {
+  if (isError.value) {
+    return t('serverStart.errorMessage')
+  }
+  if (isInstallationStage.value) {
+    return t('serverStart.installation.title')
+  }
+  return t('serverStart.title')
+})
+
+const displayStatusText = computed(() => {
+  if (isError.value && electronVersion.value) {
+    return `v${electronVersion.value}`
+  }
+  return currentStatusLabel.value
+})
+
+const updateProgress = ({ status: newStatus }: { status: ProgressStatus }) => {
+  status.value = newStatus
+
+  // Make critical error screen more obvious.
+  if (newStatus === ProgressStatus.ERROR) terminalVisible.value = false
+}
+
+const terminalCreated = (
+  { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
+  root: Ref<HTMLElement | undefined>
+) => {
+  xterm = terminal
+
+  useAutoSize({ root, autoRows: true, autoCols: true })
+  electron.onLogMessage((message: string) => {
+    terminal.write(message)
+  })
+
+  terminal.options.cursorBlink = false
+  terminal.options.disableStdin = true
+  terminal.options.cursorInactiveStyle = 'block'
+}
+
+const troubleshoot = () => electron.startTroubleshooting()
+const reportIssue = () => {
+  window.open('https://forum.comfy.org/c/v1-feedback/', '_blank')
+}
+const openLogs = () => electron.openLogsFolder()
+
+let cleanupInstallStageListener: (() => void) | undefined
+
+onMounted(async () => {
+  electron.sendReady()
+  electron.onProgressUpdate(updateProgress)
+  cleanupInstallStageListener =
+    electron.InstallStage.onUpdate(updateInstallStage)
+
+  const stageInfo = await electron.InstallStage.getCurrent()
+  updateInstallStage(stageInfo)
+  electronVersion.value = await electron.getElectronVersion()
+})
+
+onUnmounted(() => {
+  xterm?.dispose()
+  cleanupInstallStageListener?.()
+})
+</script>
+
+<style scoped>
+@reference '../assets/css/style.css';
+
+/* Hide the xterm scrollbar completely */
+:deep(.p-terminal) .xterm-viewport {
+  overflow: hidden !important;
+}
+</style>
--- a/apps/desktop-ui/src/views/WelcomeView.vue
+++ b/apps/desktop-ui/src/views/WelcomeView.vue
@@ -0,0 +1,39 @@
+<template>
+  <BaseViewTemplate dark>
+    <div class="flex items-center justify-center min-h-screen">
+      <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: Title and button -->
+        <div class="flex flex-col items-center justify-center gap-4">
+          <Button
+            :label="$t('welcome.getStarted')"
+            class="px-8 mt-4 bg-brand-yellow hover:bg-brand-yellow/90 border-0 rounded-lg transition-colors"
+            :pt="{
+              label: { class: 'font-inter text-neutral-900 font-black' }
+            }"
+            @click="navigateTo('/install')"
+          />
+        </div>
+      </div>
+    </div>
+  </BaseViewTemplate>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useRouter } from 'vue-router'
+
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
+
+const router = useRouter()
+const navigateTo = async (path: string) => {
+  await router.push(path)
+}
+</script>
--- a/apps/desktop-ui/src/views/layouts/LayoutDefault.vue
+++ b/apps/desktop-ui/src/views/layouts/LayoutDefault.vue
@@ -0,0 +1,11 @@
+<template>
+  <main class="w-full h-full overflow-hidden relative">
+    <router-view />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { useFavicon } from '@vueuse/core'
+
+useFavicon('/assets/favicon.ico')
+</script>
--- a/apps/desktop-ui/src/views/templates/BaseViewTemplate.vue
+++ b/apps/desktop-ui/src/views/templates/BaseViewTemplate.vue
@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="font-sans w-screen h-screen flex flex-col"
+    :class="[
+      dark
+        ? 'text-neutral-300 bg-neutral-900 dark-theme'
+        : 'text-neutral-900 bg-neutral-300'
+    ]"
+  >
+    <!-- Virtual top menu for native window (drag handle) -->
+    <div
+      v-show="isNativeWindow()"
+      ref="topMenuRef"
+      class="app-drag w-full h-(--comfy-topbar-height)"
+    />
+    <div class="grow w-full flex items-center justify-center overflow-auto">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue'
+
+import { electronAPI, isElectron, isNativeWindow } from '../../utils/envUtil'
+
+const { dark = false } = defineProps<{
+  dark?: boolean
+}>()
+
+const darkTheme = {
+  color: 'rgba(0, 0, 0, 0)',
+  symbolColor: '#d4d4d4'
+}
+
+const lightTheme = {
+  color: 'rgba(0, 0, 0, 0)',
+  symbolColor: '#171717'
+}
+
+const topMenuRef = ref<HTMLDivElement | null>(null)
+onMounted(async () => {
+  if (isElectron()) {
+    await nextTick()
+
+    electronAPI().changeTheme({
+      ...(dark ? darkTheme : lightTheme),
+      height: topMenuRef.value?.getBoundingClientRect().height ?? 0
+    })
+  }
+})
+</script>
--- a/apps/desktop-ui/tsconfig.json
+++ b/apps/desktop-ui/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@frontend-locales/*": ["../../src/locales/*"]
+    }
+  },
+  "include": [
+    ".storybook/**/*",
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "src/**/*.d.ts",
+    "vite.config.mts"
+  ],
+  "references": []
+}
--- a/apps/desktop-ui/vite.config.mts
+++ b/apps/desktop-ui/vite.config.mts
@@ -0,0 +1,72 @@
+import tailwindcss from '@tailwindcss/vite'
+import vue from '@vitejs/plugin-vue'
+import dotenv from 'dotenv'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import IconsResolver from 'unplugin-icons/resolver'
+import Icons from 'unplugin-icons/vite'
+import Components from 'unplugin-vue-components/vite'
+import { defineConfig } from 'vite'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+dotenv.config()
+
+const projectRoot = fileURLToPath(new URL('.', import.meta.url))
+
+const SHOULD_MINIFY = process.env.ENABLE_MINIFY === 'true'
+const VITE_REMOTE_DEV = process.env.VITE_REMOTE_DEV === 'true'
+const DISABLE_VUE_PLUGINS = process.env.DISABLE_VUE_PLUGINS === 'true'
+
+export default defineConfig(() => {
+  return {
+    root: projectRoot,
+    base: '',
+    publicDir: path.resolve(projectRoot, 'public'),
+    server: {
+      port: 5174,
+      host: VITE_REMOTE_DEV ? '0.0.0.0' : undefined
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(projectRoot, 'src'),
+        '@frontend-locales': path.resolve(projectRoot, '../../src/locales')
+      }
+    },
+    plugins: [
+      ...(!DISABLE_VUE_PLUGINS
+        ? [vueDevTools(), vue(), createHtmlPlugin({})]
+        : [vue()]),
+      tailwindcss(),
+      Icons({
+        compiler: 'vue3',
+        customCollections: {
+          comfy: FileSystemIconLoader(
+            path.resolve(projectRoot, '../../packages/design-system/src/icons')
+          )
+        }
+      }),
+      Components({
+        dts: path.resolve(projectRoot, 'components.d.ts'),
+        resolvers: [
+          IconsResolver({
+            customCollections: ['comfy']
+          })
+        ],
+        dirs: [
+          path.resolve(projectRoot, 'src/components'),
+          path.resolve(projectRoot, 'src/views')
+        ],
+        deep: true,
+        extensions: ['vue'],
+        directoryAsNamespace: true
+      })
+    ],
+    build: {
+      minify: SHOULD_MINIFY ? ('esbuild' as const) : false,
+      target: 'es2022',
+      sourcemap: true
+    }
+  }
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="292" height="92pt" viewBox="0 0 219 92"><defs><clipPath id="a"><path d="M159 .79h25V69h-25Zm0 0"/></clipPath><clipPath id="b"><path d="M183 9h35.371v60H183Zm0 0"/></clipPath><clipPath id="c"><path d="M0 .79h92V92H0Zm0 0"/></clipPath></defs><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M130.871 31.836c-4.785 0-8.351 2.352-8.351 8.008 0 4.261 2.347 7.222 8.093 7.222 4.871 0 8.18-2.867 8.18-7.398 0-5.133-2.961-7.832-7.922-7.832Zm-9.57 39.95c-1.133 1.39-2.262 2.87-2.262 4.612 0 3.48 4.434 4.524 10.527 4.524 5.051 0 11.926-.352 11.926-5.043 0-2.793-3.308-2.965-7.488-3.227Zm25.761-39.688c1.563 2.004 3.22 4.789 3.22 8.793 0 9.656-7.571 15.316-18.536 15.316-2.789 0-5.312-.348-6.879-.785l-2.87 4.613 8.526.52c15.059.96 23.934 1.398 23.934 12.968 0 10.008-8.789 15.665-23.934 15.665-15.75 0-21.757-4.004-21.757-10.88 0-3.917 1.742-6 4.789-8.878-2.875-1.211-3.828-3.387-3.828-5.739 0-1.914.953-3.656 2.523-5.312 1.566-1.652 3.305-3.305 5.395-5.219-4.262-2.09-7.485-6.617-7.485-13.058 0-10.008 6.613-16.88 19.93-16.88 3.742 0 6.004.344 8.008.872h16.972v7.394l-8.007.61"/><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M170.379 16.281c-4.961 0-7.832-2.87-7.832-7.836 0-4.957 2.871-7.656 7.832-7.656 5.05 0 7.922 2.7 7.922 7.656 0 4.965-2.871 7.836-7.922 7.836Zm-11.227 52.305V61.71l4.438-.606c1.219-.175 1.394-.437 1.394-1.746V33.773c0-.953-.261-1.566-1.132-1.824l-4.7-1.656.957-7.047h18.016V59.36c0 1.399.086 1.57 1.395 1.746l4.437.606v6.875h-24.805"/></g><g clip-path="url(#b)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M218.371 65.21c-3.742 1.825-9.223 3.481-14.187 3.481-10.356 0-14.27-4.175-14.27-14.015V31.879c0-.524 0-.871-.7-.871h-6.093v-7.746c7.664-.871 10.707-4.703 11.664-14.188h8.27v12.36c0 .609 0 .87.695.87h12.27v8.704h-12.965v20.797c0 5.136 1.218 7.136 5.918 7.136 2.437 0 4.96-.609 7.047-1.39l2.351 7.66"/></g><g clip-path="url(#c)"><path style="stroke:none;fill-rule:nonzero;fill:#fff;fill-opacity:1" d="M89.422 42.371 49.629 2.582a5.868 5.868 0 0 0-8.3 0l-8.263 8.262 10.48 10.484a6.965 6.965 0 0 1 7.173 1.668 6.98 6.98 0 0 1 1.656 7.215l10.102 10.105a6.963 6.963 0 0 1 7.214 1.657 6.976 6.976 0 0 1 0 9.875 6.98 6.98 0 0 1-9.879 0 6.987 6.987 0 0 1-1.519-7.594l-9.422-9.422v24.793a6.979 6.979 0 0 1 1.848 1.32 6.988 6.988 0 0 1 0 9.88c-2.73 2.726-7.153 2.726-9.875 0a6.98 6.98 0 0 1 0-9.88 6.893 6.893 0 0 1 2.285-1.523V34.398a6.893 6.893 0 0 1-2.285-1.523 6.988 6.988 0 0 1-1.508-7.637L29.004 14.902 1.719 42.187a5.868 5.868 0 0 0 0 8.301l39.793 39.793a5.868 5.868 0 0 0 8.3 0l39.61-39.605a5.873 5.873 0 0 0 0-8.305"/></g></svg>
				`@@ -0,0 +1 @@`
				`export { cn } from '@comfyorg/tailwind-utils'`