From 261fb1b34d138d32a6b743f9a7251fe0ea239f4b Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Mon, 19 Jan 2026 16:33:16 -0800
Subject: [PATCH] fix: use directory path instead of glob for oxfmt

---
 .claude/commands/create-hotfix-release.md     |  1 +
 .github/workflows/ci-lint-format.yaml         |  6 +--
 .../tabs/terminal/BaseTerminal.vue            | 13 +++---
 .../components/common/LanguageSelector.vue    | 12 ++++--
 .../src/components/common/RefreshButton.vue   | 12 ++++--
 .../src/components/common/StartupDisplay.vue  |  9 +++--
 .../src/components/common/UrlInput.vue        |  4 +-
 .../install/DesktopSettingsConfiguration.vue  | 26 +++++++-----
 .../src/components/install/HardwareOption.vue | 22 ++++++----
 .../src/components/install/InstallFooter.vue  | 25 ++++++++----
 .../install/InstallLocationPicker.vue         | 40 +++++++++++++------
 .../components/install/MigrationPicker.vue    | 36 ++++++++++++-----
 .../components/install/mirror/MirrorItem.vue  | 24 +++++++----
 .../src/components/maintenance/TaskCard.vue   |  4 +-
 .../components/maintenance/TaskListItem.vue   | 18 ++++++---
 .../components/maintenance/TaskListPanel.vue  |  4 +-
 .../src/views/DesktopDialogView.vue           |  6 +--
 .../src/views/DesktopUpdateView.vue           |  6 +--
 apps/desktop-ui/src/views/DownloadGitView.vue |  4 +-
 apps/desktop-ui/src/views/InstallView.vue     | 15 ++++---
 apps/desktop-ui/src/views/MaintenanceView.vue | 28 ++++++++-----
 .../src/views/ManualConfigurationView.vue     |  6 ++-
 .../src/views/MetricsConsentView.vue          | 21 ++++++----
 .../desktop-ui/src/views/NotSupportedView.vue |  6 +--
 apps/desktop-ui/src/views/ServerStartView.vue | 20 ++++++----
 apps/desktop-ui/src/views/WelcomeView.vue     |  6 +--
 .../src/views/layouts/LayoutDefault.vue       |  2 +-
 .../src/views/templates/BaseViewTemplate.vue  | 15 ++++---
 package.json                                  | 12 ++----
 packages/design-system/src/icons/README.md    | 12 +++---
 .../dialog/content/MissingNodesFooter.vue     |  8 +---
 .../sidebar/tabs/AssetsSidebarTab.vue         |  8 +---
 .../UploadModelUpgradeModalFooter.vue         |  4 +-
 33 files changed, 267 insertions(+), 168 deletions(-)

diff --git a/.claude/commands/create-hotfix-release.md b/.claude/commands/create-hotfix-release.md
index 247c86e59..8c68ef888 100644
--- a/.claude/commands/create-hotfix-release.md
+++ b/.claude/commands/create-hotfix-release.md
@@ -353,6 +353,7 @@ python main.py --front-end-version Comfy-Org/ComfyUI_frontend@${NEW_VERSION}
 - Fix: [Brief description of hotfixes included]
   EOF
   )"
+
   ```
 
   ```
diff --git a/.github/workflows/ci-lint-format.yaml b/.github/workflows/ci-lint-format.yaml
index 3224fa926..ad5bd4e93 100644
--- a/.github/workflows/ci-lint-format.yaml
+++ b/.github/workflows/ci-lint-format.yaml
@@ -42,7 +42,7 @@ jobs:
       - name: Run Stylelint with auto-fix
         run: pnpm stylelint:fix
 
-      - name: Run Prettier with auto-format
+      - name: Run oxfmt with auto-format
         run: pnpm format
 
       - name: Check for changes
@@ -60,7 +60,7 @@ jobs:
           git config --local user.email "action@github.com"
           git config --local user.name "GitHub Action"
           git add .
-          git commit -m "[automated] Apply ESLint and Prettier fixes"
+          git commit -m "[automated] Apply ESLint and oxfmt fixes"
           git push
 
       - name: Final validation
@@ -80,7 +80,7 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Prettier formatting'
+              body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- oxfmt formatting'
             })
 
       - name: Comment on PR about manual fix needed
diff --git a/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index ca0dcf34e..f0b71307d 100644
--- a/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -1,10 +1,13 @@
 <template>
   <div
     ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
+    class="relative h-full w-full overflow-hidden bg-neutral-900"
   >
-    <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
+    <div class="p-terminal h-full w-full rounded-none p-2">
+      <div
+        ref="terminalEl"
+        class="terminal-host h-full"
+      />
     </div>
     <Button
       v-tooltip.left="{
@@ -16,7 +19,7 @@
       size="small"
       :class="
         cn('absolute top-2 right-8 transition-opacity', {
-          'opacity-0 pointer-events-none select-none': !isHovered
+          'pointer-events-none opacity-0 select-none': !isHovered
         })
       "
       :aria-label="tooltipText"
@@ -108,6 +111,6 @@ onUnmounted(() => {
 }
 
 :deep(.p-terminal) .xterm-screen {
-  @apply bg-neutral-900 overflow-hidden;
+  @apply overflow-hidden bg-neutral-900;
 }
 </style>
diff --git a/apps/desktop-ui/src/components/common/LanguageSelector.vue b/apps/desktop-ui/src/components/common/LanguageSelector.vue
index 55703930c..20d566db5 100644
--- a/apps/desktop-ui/src/components/common/LanguageSelector.vue
+++ b/apps/desktop-ui/src/components/common/LanguageSelector.vue
@@ -13,13 +13,19 @@
   >
     <template #value="{ value }">
       <span :class="valueClass">
-        <i class="pi pi-language" :class="iconClass" />
+        <i
+          class="pi pi-language"
+          :class="iconClass"
+        />
         <span>{{ displayLabel(value as SupportedLocale) }}</span>
       </span>
     </template>
     <template #option="{ option }">
       <span :class="optionClass">
-        <i class="pi pi-language" :class="iconClass" />
+        <i
+          class="pi pi-language"
+          :class="iconClass"
+        />
         <span class="leading-none">{{ option.label }}</span>
       </span>
     </template>
@@ -202,6 +208,6 @@ async function onLocaleChange(event: SelectChangeEvent) {
 }
 
 :deep(.p-dropdown) {
-  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2;
+  @apply focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2 focus-visible:outline-none;
 }
 </style>
diff --git a/apps/desktop-ui/src/components/common/RefreshButton.vue b/apps/desktop-ui/src/components/common/RefreshButton.vue
index 2569d0fbd..282244589 100644
--- a/apps/desktop-ui/src/components/common/RefreshButton.vue
+++ b/apps/desktop-ui/src/components/common/RefreshButton.vue
@@ -12,7 +12,7 @@
 -->
 <template>
   <Button
-    class="relative p-button-icon-only"
+    class="p-button-icon-only relative"
     :outlined="outlined"
     :severity="severity"
     :disabled="active || disabled"
@@ -23,8 +23,14 @@
       :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" />
+    <span
+      class="p-button-label"
+      data-pc-section="label"
+    >&nbsp;</span>
+    <ProgressSpinner
+      v-show="active"
+      class="absolute h-1/2 w-1/2"
+    />
   </Button>
 </template>
 
diff --git a/apps/desktop-ui/src/components/common/StartupDisplay.vue b/apps/desktop-ui/src/components/common/StartupDisplay.vue
index 7bde5ec86..f6109b45b 100644
--- a/apps/desktop-ui/src/components/common/StartupDisplay.vue
+++ b/apps/desktop-ui/src/components/common/StartupDisplay.vue
@@ -7,7 +7,7 @@
           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">
@@ -16,10 +16,13 @@
           :mode="progressMode"
           :value="progressPercentage ?? 0"
           :show-value="false"
-          class="w-90 h-2 mt-8"
+          class="mt-8 h-2 w-90"
           :pt="{ value: { class: 'bg-brand-yellow' } }"
         />
-        <h1 v-if="title" class="font-inter font-bold text-3xl text-neutral-300">
+        <h1
+          v-if="title"
+          class="font-inter text-3xl font-bold text-neutral-300"
+        >
           {{ title }}
         </h1>
         <p
diff --git a/apps/desktop-ui/src/components/common/UrlInput.vue b/apps/desktop-ui/src/components/common/UrlInput.vue
index 91f8cfe56..2d3a815ed 100644
--- a/apps/desktop-ui/src/components/common/UrlInput.vue
+++ b/apps/desktop-ui/src/components/common/UrlInput.vue
@@ -12,9 +12,9 @@
       :class="{
         'pi pi-spin pi-spinner text-neutral-400':
           validationState === ValidationState.LOADING,
-        'pi pi-check text-green-500 cursor-pointer':
+        'pi pi-check cursor-pointer text-green-500':
           validationState === ValidationState.VALID,
-        'pi pi-times text-red-500 cursor-pointer':
+        'pi pi-times cursor-pointer text-red-500':
           validationState === ValidationState.INVALID
       }"
       @click="validateUrl(props.modelValue)"
diff --git a/apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue b/apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue
index f1caa62fa..57e093bac 100644
--- a/apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue
+++ b/apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue
@@ -1,23 +1,23 @@
 <template>
-  <div class="flex flex-col gap-6 w-[600px]">
+  <div class="flex w-[600px] flex-col gap-6">
     <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">
+      <p class="my-0 text-neutral-400">
         {{ $t('install.desktopAppSettingsDescription') }}
       </p>
     </div>
 
-    <div class="flex flex-col bg-neutral-800 p-4 rounded-lg text-sm">
+    <div class="flex flex-col rounded-lg bg-neutral-800 p-4 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">
+          <p class="mt-1 text-neutral-400">
             {{ $t('install.settings.autoUpdateDescription') }}
           </p>
         </div>
@@ -35,7 +35,10 @@
           <p class="text-neutral-400">
             {{ $t('install.settings.allowMetricsDescription') }}
           </p>
-          <a href="#" @click.prevent="showMetricsInfo">
+          <a
+            href="#"
+            @click.prevent="showMetricsInfo"
+          >
             {{ $t('install.settings.learnMoreAboutData') }}
           </a>
         </div>
@@ -52,10 +55,10 @@
       class="select-none"
     >
       <div class="text-neutral-300">
-        <h4 class="font-medium mb-2">
+        <h4 class="mb-2 font-medium">
           {{ $t('install.settings.dataCollectionDialog.whatWeCollect') }}
         </h4>
-        <ul class="list-disc pl-6 space-y-1">
+        <ul class="list-disc space-y-1 pl-6">
           <li>
             {{
               $t('install.settings.dataCollectionDialog.collect.errorReports')
@@ -73,10 +76,10 @@
           </li>
         </ul>
 
-        <h4 class="font-medium mt-4 mb-2">
+        <h4 class="mt-4 mb-2 font-medium">
           {{ $t('install.settings.dataCollectionDialog.whatWeDoNotCollect') }}
         </h4>
-        <ul class="list-disc pl-6 space-y-1">
+        <ul class="list-disc space-y-1 pl-6">
           <li>
             {{
               $t(
@@ -108,7 +111,10 @@
         </ul>
 
         <div class="mt-4">
-          <a href="https://comfy.org/privacy" target="_blank">
+          <a
+            href="https://comfy.org/privacy"
+            target="_blank"
+          >
             {{ $t('install.settings.dataCollectionDialog.viewFullPolicy') }}
           </a>
         </div>
diff --git a/apps/desktop-ui/src/components/install/HardwareOption.vue b/apps/desktop-ui/src/components/install/HardwareOption.vue
index 9acc9e79c..0ac141c82 100644
--- a/apps/desktop-ui/src/components/install/HardwareOption.vue
+++ b/apps/desktop-ui/src/components/install/HardwareOption.vue
@@ -4,7 +4,7 @@
     <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',
+          'hardware-option flex h-[190px] w-[170px] flex-col items-center rounded-3xl border-4 bg-neutral-900/70 p-5 transition-all duration-200',
           selected ? 'border-solid border-brand-yellow' : 'border-transparent'
         )
       "
@@ -12,24 +12,32 @@
     >
       <!-- 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"
+        class="icon-container flex h-[110px] w-[110px] shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-neutral-800"
       >
         <img
           v-if="imagePath"
           :src="imagePath"
           :alt="placeholderText"
-          class="w-full h-full object-cover"
+          class="h-full w-full object-cover"
           style="object-position: 57% center"
           draggable="false"
-        />
-        <span v-else class="text-xl font-medium text-neutral-400">
+        >
+        <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
+        v-if="subtitle"
+        class="mt-4 text-center"
+      >
+        <div class="text-sm text-neutral-500">
+          {{ subtitle }}
+        </div>
       </div>
     </button>
   </div>
diff --git a/apps/desktop-ui/src/components/install/InstallFooter.vue b/apps/desktop-ui/src/components/install/InstallFooter.vue
index 5cd71356e..1fbf550aa 100644
--- a/apps/desktop-ui/src/components/install/InstallFooter.vue
+++ b/apps/desktop-ui/src/components/install/InstallFooter.vue
@@ -6,20 +6,31 @@
       :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"
+      class="justify-self-start rounded-lg border-0 px-6 py-2 font-inter"
       @click="$emit('previous')"
     />
-    <div v-else></div>
+    <div v-else />
 
     <!-- Step indicators in center -->
-    <StepList class="flex justify-center items-center gap-3 select-none">
-      <Step value="1" :pt="stepPassthrough">
+    <StepList class="flex items-center justify-center gap-3 select-none">
+      <Step
+        value="1"
+        :pt="stepPassthrough"
+      >
         {{ $t('install.gpu') }}
       </Step>
-      <Step value="2" :disabled="disableLocationStep" :pt="stepPassthrough">
+      <Step
+        value="2"
+        :disabled="disableLocationStep"
+        :pt="stepPassthrough"
+      >
         {{ $t('install.installLocation') }}
       </Step>
-      <Step value="3" :disabled="disableSettingsStep" :pt="stepPassthrough">
+      <Step
+        value="3"
+        :disabled="disableSettingsStep"
+        :pt="stepPassthrough"
+      >
         {{ $t('install.desktopSettings') }}
       </Step>
     </StepList>
@@ -27,7 +38,7 @@
     <!-- 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"
+      class="justify-self-end rounded-lg border-0 bg-brand-yellow px-8 py-2 font-inter transition-colors hover:bg-brand-yellow/90"
       :pt="{
         label: { class: 'text-neutral-900 font-inter font-black' }
       }"
diff --git a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
index f962ca56c..5d75b1533 100644
--- a/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
+++ b/apps/desktop-ui/src/components/install/InstallLocationPicker.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
+  <div class="mx-auto flex w-full max-w-3xl flex-col gap-8 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">
+    <div class="flex grow flex-col gap-6 text-neutral-300">
+      <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
         {{ $t('install.locationPicker.title') }}
       </h2>
 
-      <p class="text-center text-neutral-400 px-12">
+      <p class="px-12 text-center text-neutral-400">
         {{ $t('install.locationPicker.subtitle') }}
       </p>
 
@@ -15,7 +15,7 @@
         <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="flex-1 border-neutral-700 bg-neutral-800/50 text-neutral-200 placeholder:text-neutral-500"
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validatePath"
           @focus="onFocus"
@@ -23,24 +23,35 @@
         <Button
           icon="pi pi-folder-open"
           severity="secondary"
-          class="bg-neutral-700 hover:bg-neutral-600 border-0"
+          class="border-0 bg-neutral-700 hover:bg-neutral-600"
           @click="browsePath"
         />
       </div>
 
       <!-- Error Messages -->
-      <div v-if="pathError || pathExists || nonDefaultDrive" class="px-12">
+      <div
+        v-if="pathError || pathExists || nonDefaultDrive"
+        class="px-12"
+      >
         <Message
           v-if="pathError"
           severity="error"
-          class="whitespace-pre-line w-full"
+          class="w-full whitespace-pre-line"
         >
           {{ pathError }}
         </Message>
-        <Message v-if="pathExists" severity="warn" class="w-full">
+        <Message
+          v-if="pathExists"
+          severity="warn"
+          class="w-full"
+        >
           {{ $t('install.pathExists') }}
         </Message>
-        <Message v-if="nonDefaultDrive" severity="warn" class="w-full">
+        <Message
+          v-if="nonDefaultDrive"
+          severity="warn"
+          class="w-full"
+        >
           {{ $t('install.nonDefaultDrive') }}
         </Message>
       </div>
@@ -88,7 +99,10 @@
               v-for="([item, modelValue], index) in mirrors"
               :key="item.settingId + item.mirror"
             >
-              <Divider v-if="index > 0" class="my-8" />
+              <Divider
+                v-if="index > 0"
+                class="my-8"
+              />
 
               <MirrorItem
                 v-model="modelValue.value"
@@ -279,7 +293,7 @@ const onFocus = async () => {
   }
 
   .p-accordionheader {
-    @apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
+    @apply mt-2 rounded-xl border-0 bg-neutral-800/50 hover:bg-neutral-700/50;
     transition:
       background-color 0.2s ease,
       border-radius 0.5s ease;
@@ -299,7 +313,7 @@ const onFocus = async () => {
   }
 
   .p-accordioncontent {
-    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
+    @apply rounded-t-none rounded-b-xl border-0 bg-neutral-800/50;
   }
 
   .p-accordioncontent-content {
diff --git a/apps/desktop-ui/src/components/install/MigrationPicker.vue b/apps/desktop-ui/src/components/install/MigrationPicker.vue
index ba542ca69..9813cd255 100644
--- a/apps/desktop-ui/src/components/install/MigrationPicker.vue
+++ b/apps/desktop-ui/src/components/install/MigrationPicker.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-col gap-6 w-[600px]">
+  <div class="flex w-[600px] flex-col gap-6">
     <!-- Source Location Section -->
     <div class="flex flex-col gap-4">
-      <p class="text-neutral-400 my-0">
+      <p class="my-0 text-neutral-400">
         {{ $t('install.migrationSourcePathDescription') }}
       </p>
 
@@ -14,17 +14,27 @@
           :class="{ 'p-invalid': pathError }"
           @update:model-value="validateSource"
         />
-        <Button icon="pi pi-folder" class="w-12" @click="browsePath" />
+        <Button
+          icon="pi pi-folder"
+          class="w-12"
+          @click="browsePath"
+        />
       </div>
 
-      <Message v-if="pathError" severity="error">
+      <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">
+    <div
+      v-if="isValidSource"
+      class="flex flex-col gap-4 rounded-lg p-4"
+    >
+      <h3 class="mt-0 text-lg font-medium text-neutral-100">
         {{ $t('install.selectItemsToMigrate') }}
       </h3>
 
@@ -32,7 +42,7 @@
         <div
           v-for="item in migrationItems"
           :key="item.id"
-          class="flex items-center gap-3 p-2 hover:bg-neutral-700 rounded"
+          class="flex items-center gap-3 rounded p-2 hover:bg-neutral-700"
           @click="item.selected = !item.selected"
         >
           <Checkbox
@@ -42,10 +52,13 @@
             @click.stop
           />
           <div>
-            <label :for="item.id" class="text-neutral-200 font-medium">
+            <label
+              :for="item.id"
+              class="font-medium text-neutral-200"
+            >
               {{ item.label }}
             </label>
-            <p class="text-sm text-neutral-400 my-1">
+            <p class="my-1 text-sm text-neutral-400">
               {{ item.description }}
             </p>
           </div>
@@ -54,7 +67,10 @@
     </div>
 
     <!-- Skip Migration -->
-    <div v-else class="text-neutral-400 italic">
+    <div
+      v-else
+      class="text-neutral-400 italic"
+    >
       {{ $t('install.migrationOptional') }}
     </div>
   </div>
diff --git a/apps/desktop-ui/src/components/install/mirror/MirrorItem.vue b/apps/desktop-ui/src/components/install/mirror/MirrorItem.vue
index 457940127..ce88c1cc3 100644
--- a/apps/desktop-ui/src/components/install/mirror/MirrorItem.vue
+++ b/apps/desktop-ui/src/components/install/mirror/MirrorItem.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col gap-4 text-neutral-400 text-sm">
+  <div class="flex flex-col gap-4 text-sm text-neutral-400">
     <div>
-      <h3 class="text-lg font-medium text-neutral-100 mb-3 mt-0">
+      <h3 class="mt-0 mb-3 text-lg font-medium text-neutral-100">
         {{ $t(`settings.${normalizedSettingId}.name`) }}
       </h3>
       <p class="my-1">
@@ -16,8 +16,14 @@
       "
       @state-change="validationState = $event"
     />
-    <div v-if="secondParagraph" class="mt-2">
-      <a href="#" @click.prevent="showDialog = true">
+    <div
+      v-if="secondParagraph"
+      class="mt-2"
+    >
+      <a
+        href="#"
+        @click.prevent="showDialog = true"
+      >
         {{ $t('g.learnMore') }}
       </a>
 
@@ -26,12 +32,14 @@
         modal
         dismissable-mask
         :header="$t(`settings.${normalizedSettingId}.urlFormatTitle`)"
-        class="select-none max-w-3xl"
+        class="max-w-3xl select-none"
       >
         <div class="text-neutral-300">
-          <p class="mt-1 whitespace-pre-wrap">{{ secondParagraph }}</p>
+          <p class="mt-1 whitespace-pre-wrap">
+            {{ secondParagraph }}
+          </p>
           <div class="mt-2 break-all">
-            <span class="text-neutral-300 font-semibold">
+            <span class="font-semibold text-neutral-300">
               {{ EXAMPLE_URL_FIRST_PART }}
             </span>
             <span>{{ EXAMPLE_URL_SECOND_PART }}</span>
@@ -40,7 +48,7 @@
           <p>
             {{ $t(`settings.${normalizedSettingId}.fileUrlDescription`) }}
           </p>
-          <span class="text-neutral-300 font-semibold">
+          <span class="font-semibold text-neutral-300">
             {{ FILE_URL_SCHEME }}
           </span>
           <span>
diff --git a/apps/desktop-ui/src/components/maintenance/TaskCard.vue b/apps/desktop-ui/src/components/maintenance/TaskCard.vue
index e7d24d100..49bf335cb 100644
--- a/apps/desktop-ui/src/components/maintenance/TaskCard.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskCard.vue
@@ -18,7 +18,7 @@
           v-if="task.headerImg"
           :src="task.headerImg"
           class="h-full w-full object-contain px-4 pt-4 opacity-25"
-        />
+        >
       </template>
       <template #title>
         {{ task.name }}
@@ -89,7 +89,7 @@ const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
 @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;
+  @apply absolute -right-4 -bottom-4 col-span-full row-span-full text-green-500 opacity-100 transition-opacity;
 
   font-size: 4rem;
   text-shadow: 0.25rem 0 0.5rem black;
diff --git a/apps/desktop-ui/src/components/maintenance/TaskListItem.vue b/apps/desktop-ui/src/components/maintenance/TaskListItem.vue
index 0762bbd05..e851c7783 100644
--- a/apps/desktop-ui/src/components/maintenance/TaskListItem.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListItem.vue
@@ -1,20 +1,23 @@
 <template>
   <tr
-    class="border-neutral-700 border-solid border-y"
+    class="border-y border-solid border-neutral-700"
     :class="{
       'opacity-50': runner.resolved,
       'opacity-75': isLoading && runner.resolved
     }"
   >
-    <td class="text-center w-16">
-      <TaskListStatusIcon :state="runner.state" :loading="isLoading" />
+    <td class="w-16 text-center">
+      <TaskListStatusIcon
+        :state="runner.state"
+        :loading="isLoading"
+      />
     </td>
     <td>
       <p class="inline-block">
         {{ task.name }}
       </p>
       <Button
-        class="inline-block mx-2"
+        class="mx-2 inline-block"
         type="button"
         :icon="PrimeIcons.INFO_CIRCLE"
         severity="secondary"
@@ -22,11 +25,14 @@
         @click="toggle"
       />
 
-      <Popover ref="infoPopover" class="block m-1 max-w-64 min-w-32">
+      <Popover
+        ref="infoPopover"
+        class="m-1 block max-w-64 min-w-32"
+      >
         <span class="whitespace-pre-line">{{ task.description }}</span>
       </Popover>
     </td>
-    <td class="text-right px-4">
+    <td class="px-4 text-right">
       <Button
         :icon="task.button?.icon"
         :label="task.button?.text"
diff --git a/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue b/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
index 2d8fd7484..5ca9263d3 100644
--- a/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
+++ b/apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
@@ -4,7 +4,7 @@
     <template v-if="filter.tasks.length === 0">
       <!-- Empty filter -->
       <Divider />
-      <p class="text-neutral-400 w-full text-center">
+      <p class="w-full text-center text-neutral-400">
         {{ $t('maintenance.allOk') }}
       </p>
     </template>
@@ -25,7 +25,7 @@
 
       <!-- Display: Cards -->
       <template v-else>
-        <div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
+        <div class="pad-y my-4 flex flex-wrap justify-evenly gap-8">
           <TaskCard
             v-for="task in filter.tasks"
             :key="task.id"
diff --git a/apps/desktop-ui/src/views/DesktopDialogView.vue b/apps/desktop-ui/src/views/DesktopDialogView.vue
index 105117cab..ae4cc1904 100644
--- a/apps/desktop-ui/src/views/DesktopDialogView.vue
+++ b/apps/desktop-ui/src/views/DesktopDialogView.vue
@@ -1,6 +1,6 @@
 <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">
+  <div class="flex h-full w-full flex-col justify-between rounded-lg p-6">
+    <h1 class="m-0 font-inter text-xl font-semibold italic">
       {{ t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">
@@ -46,7 +46,7 @@ const handleButtonClick = async (button: DialogAction) => {
 @reference '../assets/css/style.css';
 
 .p-button-secondary {
-  @apply text-white border-none bg-neutral-600;
+  @apply border-none bg-neutral-600 text-white;
 }
 
 .p-button-secondary:hover {
diff --git a/apps/desktop-ui/src/views/DesktopUpdateView.vue b/apps/desktop-ui/src/views/DesktopUpdateView.vue
index 1cb9135e1..d46d6a9d2 100644
--- a/apps/desktop-ui/src/views/DesktopUpdateView.vue
+++ b/apps/desktop-ui/src/views/DesktopUpdateView.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseViewTemplate dark>
     <div
-      class="h-screen w-screen grid items-center justify-around overflow-y-auto"
+      class="grid h-screen w-screen items-center justify-around overflow-y-auto"
     >
       <div class="relative m-8 text-center">
         <!-- Header -->
@@ -13,7 +13,7 @@
           <span>{{ t('desktopUpdate.description') }}</span>
         </div>
 
-        <ProgressSpinner class="m-8 w-48 h-48" />
+        <ProgressSpinner class="m-8 h-48 w-48" />
 
         <!-- Console button -->
         <Button
@@ -64,7 +64,7 @@ onUnmounted(() => electron.Validation.dispose())
 @reference '../assets/css/style.css';
 
 .download-bg::before {
-  @apply m-0 absolute text-muted;
+  @apply absolute m-0 text-muted;
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;
diff --git a/apps/desktop-ui/src/views/DownloadGitView.vue b/apps/desktop-ui/src/views/DownloadGitView.vue
index 12c116ad8..d18ef8953 100644
--- a/apps/desktop-ui/src/views/DownloadGitView.vue
+++ b/apps/desktop-ui/src/views/DownloadGitView.vue
@@ -1,7 +1,7 @@
 <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"
+      class="flex max-w-(--breakpoint-sm) flex-col gap-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-top-right bg-no-repeat bg-origin-padding p-8"
     >
       <!-- Header -->
       <h1 class="mt-24 text-4xl font-bold text-red-500">
@@ -22,7 +22,7 @@
       </div>
 
       <!-- Actions -->
-      <div class="flex gap-4 flex-row-reverse">
+      <div class="flex flex-row-reverse gap-4">
         <Button
           :label="$t('downloadGit.gitWebsite')"
           icon="pi pi-external-link"
diff --git a/apps/desktop-ui/src/views/InstallView.vue b/apps/desktop-ui/src/views/InstallView.vue
index 055b1f027..9da248f27 100644
--- a/apps/desktop-ui/src/views/InstallView.vue
+++ b/apps/desktop-ui/src/views/InstallView.vue
@@ -1,10 +1,10 @@
 <template>
   <BaseViewTemplate dark>
     <!-- Fixed height container with flexbox layout for proper content management -->
-    <div class="w-full h-full flex flex-col">
+    <div class="flex h-full w-full flex-col">
       <Stepper
         v-model:value="currentStep"
-        class="flex flex-col h-full"
+        class="flex h-full flex-col"
         @update:value="handleStepChange"
       >
         <!-- Main content area that grows to fill available space -->
@@ -12,7 +12,10 @@
           class="flex-1 overflow-auto"
           :style="{ scrollbarGutter: 'stable' }"
         >
-          <StepPanel value="1" class="flex">
+          <StepPanel
+            value="1"
+            class="flex"
+          >
             <GpuPicker v-model:device="device" />
           </StepPanel>
           <StepPanel value="2">
@@ -37,7 +40,7 @@
 
         <!-- Install footer with navigation -->
         <InstallFooter
-          class="w-full max-w-2xl my-6 mx-auto"
+          class="mx-auto my-6 w-full max-w-2xl"
           :current-step
           :can-proceed
           :disable-location-step="noGpu"
@@ -191,7 +194,7 @@ onMounted(async () => {
 
 /* Remove default padding/margin from StepPanels to make scrollbar flush */
 :deep(.p-steppanels) {
-  @apply p-0 m-0;
+  @apply m-0 p-0;
 }
 
 /* Ensure StepPanel content container has no top/bottom padding */
@@ -209,7 +212,7 @@ onMounted(async () => {
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-thumb) {
-  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
+  @apply rounded-lg border-[4px] border-transparent bg-white/20;
   background-clip: content-box;
 }
 </style>
diff --git a/apps/desktop-ui/src/views/MaintenanceView.vue b/apps/desktop-ui/src/views/MaintenanceView.vue
index 0733f80fc..f46924397 100644
--- a/apps/desktop-ui/src/views/MaintenanceView.vue
+++ b/apps/desktop-ui/src/views/MaintenanceView.vue
@@ -1,21 +1,24 @@
 <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"
+      class="dark-theme grid h-screen min-h-full w-screen min-w-full justify-around overflow-y-auto bg-neutral-900 font-sans text-neutral-300"
     >
-      <div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
+      <div class="relative m-8 w-screen max-w-(--breakpoint-sm)">
         <!-- 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">
+        <div class="flex w-full flex-wrap items-center gap-4">
           <span class="grow">
             {{ t('maintenance.status') }}:
-            <StatusTag :refreshing="isRefreshing" :error="anyErrors" />
+            <StatusTag
+              :refreshing="isRefreshing"
+              :error="anyErrors"
+            />
           </span>
-          <div class="flex gap-4 items-center">
+          <div class="flex items-center gap-4">
             <SelectButton
               v-model="displayAsList"
               :options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
@@ -48,7 +51,10 @@
         </div>
 
         <!-- Unsafe migration warning -->
-        <div v-if="taskStore.unsafeBasePath" class="my-4">
+        <div
+          v-if="taskStore.unsafeBasePath"
+          class="my-4"
+        >
           <p class="flex items-start gap-3 text-neutral-300">
             <Tag
               icon="pi pi-exclamation-triangle"
@@ -56,10 +62,10 @@
               :value="t('icon.exclamation-triangle')"
             />
             <span>
-              <strong class="block mb-1">
+              <strong class="mb-1 block">
                 {{ t('maintenance.unsafeMigration.title') }}
               </strong>
-              <span class="block mb-1">
+              <span class="mb-1 block">
                 {{ unsafeReasonText }}
               </span>
               <span class="block text-sm text-neutral-400">
@@ -71,13 +77,13 @@
 
         <!-- Tasks -->
         <TaskListPanel
-          class="border-neutral-700 border-solid border-x-0 border-y"
+          class="border-x-0 border-y border-solid border-neutral-700"
           :filter
           :display-as-list
         />
 
         <!-- Actions -->
-        <div class="flex justify-between gap-4 flex-row">
+        <div class="flex flex-row justify-between gap-4">
           <Button
             :label="t('maintenance.consoleLogs')"
             icon="pi pi-desktop"
@@ -227,7 +233,7 @@ onUnmounted(() => electron.Validation.dispose())
 }
 
 .backspan::before {
-  @apply m-0 absolute text-muted;
+  @apply absolute m-0 text-muted;
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: -2rem;
diff --git a/apps/desktop-ui/src/views/ManualConfigurationView.vue b/apps/desktop-ui/src/views/ManualConfigurationView.vue
index 5a79514b8..468f78fd3 100644
--- a/apps/desktop-ui/src/views/ManualConfigurationView.vue
+++ b/apps/desktop-ui/src/views/ManualConfigurationView.vue
@@ -2,7 +2,7 @@
   <BaseViewTemplate dark>
     <!-- Installation Path Section -->
     <div
-      class="comfy-installer grow flex flex-col gap-4 text-neutral-300 max-w-110"
+      class="comfy-installer flex max-w-110 grow flex-col gap-4 text-neutral-300"
     >
       <h2 class="text-2xl font-semibold text-neutral-100">
         {{ $t('install.manualConfiguration.title') }}
@@ -29,7 +29,9 @@
         </ul>
       </div>
 
-      <p class="m-1">{{ $t('install.manualConfiguration.createVenv') }}:</p>
+      <p class="m-1">
+        {{ $t('install.manualConfiguration.createVenv') }}:
+      </p>
 
       <Panel :header="t('install.manualConfiguration.virtualEnvironmentPath')">
         <span class="font-mono">{{ `${basePath}${sep}.venv${sep}` }}</span>
diff --git a/apps/desktop-ui/src/views/MetricsConsentView.vue b/apps/desktop-ui/src/views/MetricsConsentView.vue
index 11bb10aec..a4a395488 100644
--- a/apps/desktop-ui/src/views/MetricsConsentView.vue
+++ b/apps/desktop-ui/src/views/MetricsConsentView.vue
@@ -1,8 +1,11 @@
 <template>
-  <BaseViewTemplate dark hide-language-selector>
-    <div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
+  <BaseViewTemplate
+    dark
+    hide-language-selector
+  >
+    <div class="flex h-full flex-col items-center justify-center p-8 2xl:p-16">
       <div
-        class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
+        class="flex w-full max-w-[600px] flex-col gap-6 rounded-lg bg-neutral-800 p-6 shadow-lg"
       >
         <h2 class="text-3xl font-semibold text-neutral-100">
           {{ $t('install.helpImprove') }}
@@ -15,17 +18,19 @@
           <a
             href="https://comfy.org/privacy"
             target="_blank"
-            class="text-blue-400 hover:text-blue-300 underline"
+            class="text-blue-400 underline hover:text-blue-300"
           >
-            {{ $t('install.privacyPolicy') }} </a
-          >.
+            {{ $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">
+          <span
+            id="metricsDescription"
+            class="text-neutral-100"
+          >
             {{
               allowMetrics
                 ? $t('install.metricsEnabled')
@@ -33,7 +38,7 @@
             }}
           </span>
         </div>
-        <div class="flex pt-6 justify-end">
+        <div class="flex justify-end pt-6">
           <Button
             :label="$t('g.ok')"
             icon="pi pi-check"
diff --git a/apps/desktop-ui/src/views/NotSupportedView.vue b/apps/desktop-ui/src/views/NotSupportedView.vue
index bb50a65ee..ba89ce7dc 100644
--- a/apps/desktop-ui/src/views/NotSupportedView.vue
+++ b/apps/desktop-ui/src/views/NotSupportedView.vue
@@ -6,10 +6,10 @@
         class="sad-girl"
         src="/assets/images/sad_girl.png"
         :alt="$t('notSupported.illustrationAlt')"
-      />
+      >
 
       <div class="no-drag sad-text flex items-center">
-        <div class="flex flex-col gap-8 p-8 min-w-110">
+        <div class="flex min-w-110 flex-col gap-8 p-8">
           <!-- Header -->
           <h1 class="text-4xl font-bold text-red-500">
             {{ $t('notSupported.title') }}
@@ -20,7 +20,7 @@
             <p class="text-xl">
               {{ $t('notSupported.message') }}
             </p>
-            <ul class="list-disc list-inside space-y-1 text-neutral-800">
+            <ul class="list-inside list-disc space-y-1 text-neutral-800">
               <li>{{ $t('notSupported.supportedDevices.macos') }}</li>
               <li>{{ $t('notSupported.supportedDevices.windows') }}</li>
             </ul>
diff --git a/apps/desktop-ui/src/views/ServerStartView.vue b/apps/desktop-ui/src/views/ServerStartView.vue
index f799b119b..90a186f04 100644
--- a/apps/desktop-ui/src/views/ServerStartView.vue
+++ b/apps/desktop-ui/src/views/ServerStartView.vue
@@ -2,14 +2,20 @@
   <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
+        v-if="!isError"
+        class="fixed inset-0 z-0 overflow-hidden"
+      >
         <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>
+      <div
+        v-if="!isError"
+        class="fixed inset-0 z-5 bg-neutral-900/80"
+      />
 
       <!-- Smooth radial gradient overlay -->
       <div
@@ -31,7 +37,7 @@
             transparent 100%
           );
         "
-      ></div>
+      />
 
       <div class="relative z-10">
         <!-- Main startup display using StartupDisplay component -->
@@ -45,9 +51,9 @@
         <!-- Error Section (positioned at bottom) -->
         <div
           v-if="isError"
-          class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
+          class="absolute right-0 bottom-20 left-0 flex flex-col items-center gap-4"
         >
-          <div class="flex gap-4 justify-center">
+          <div class="flex justify-center gap-4">
             <Button
               icon="pi pi-flag"
               :label="$t('serverStart.reportIssue')"
@@ -71,10 +77,10 @@
         <!-- 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"
+          class="absolute right-4 bottom-4 left-4 z-10 mx-auto max-w-4xl"
         >
           <div
-            class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
+            class="h-[300px] rounded-lg border border-neutral-700 bg-neutral-900/95 p-4"
           >
             <BaseTerminal @created="terminalCreated" />
           </div>
diff --git a/apps/desktop-ui/src/views/WelcomeView.vue b/apps/desktop-ui/src/views/WelcomeView.vue
index 07a03f42b..60afeca66 100644
--- a/apps/desktop-ui/src/views/WelcomeView.vue
+++ b/apps/desktop-ui/src/views/WelcomeView.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseViewTemplate dark>
-    <div class="flex items-center justify-center min-h-screen">
+    <div class="flex min-h-screen items-center justify-center">
       <div class="grid gap-8">
         <!-- Top container: Logo -->
         <div class="flex items-end justify-center">
@@ -8,13 +8,13 @@
             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"
+            class="mt-4 rounded-lg border-0 bg-brand-yellow px-8 transition-colors hover:bg-brand-yellow/90"
             :pt="{
               label: { class: 'font-inter text-neutral-900 font-black' }
             }"
diff --git a/apps/desktop-ui/src/views/layouts/LayoutDefault.vue b/apps/desktop-ui/src/views/layouts/LayoutDefault.vue
index 748e4c249..cbe0e3408 100644
--- a/apps/desktop-ui/src/views/layouts/LayoutDefault.vue
+++ b/apps/desktop-ui/src/views/layouts/LayoutDefault.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="w-full h-full overflow-hidden relative">
+  <main class="relative h-full w-full overflow-hidden">
     <router-view />
   </main>
 </template>
diff --git a/apps/desktop-ui/src/views/templates/BaseViewTemplate.vue b/apps/desktop-ui/src/views/templates/BaseViewTemplate.vue
index 8a531e134..eeb6d52f0 100644
--- a/apps/desktop-ui/src/views/templates/BaseViewTemplate.vue
+++ b/apps/desktop-ui/src/views/templates/BaseViewTemplate.vue
@@ -1,22 +1,25 @@
 <template>
   <div
-    class="font-sans w-screen h-screen flex flex-col relative"
+    class="relative flex h-screen w-screen flex-col font-sans"
     :class="[
       dark
-        ? 'text-neutral-300 bg-neutral-900 dark-theme'
-        : 'text-neutral-900 bg-neutral-300'
+        ? 'dark-theme bg-neutral-900 text-neutral-300'
+        : 'bg-neutral-300 text-neutral-900'
     ]"
   >
-    <div v-if="showLanguageSelector" class="absolute top-6 right-6 z-10">
+    <div
+      v-if="showLanguageSelector"
+      class="absolute top-6 right-6 z-10"
+    >
       <LanguageSelector :variant="variant" />
     </div>
     <!-- Virtual top menu for native window (drag handle) -->
     <div
       v-show="isNativeWindow()"
       ref="topMenuRef"
-      class="app-drag w-full h-(--comfy-topbar-height)"
+      class="app-drag h-(--comfy-topbar-height) w-full"
     />
-    <div class="grow w-full flex items-center justify-center overflow-auto">
+    <div class="flex w-full grow items-center justify-center overflow-auto">
       <slot />
     </div>
   </div>
diff --git a/package.json b/package.json
index c8dcc5d51..fc6a4b32d 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,10 @@
     "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
-    "format:check:no-cache": "oxfmt './**/*.{js,ts,tsx,vue,mts}' --check",
-    "format:check": "oxfmt './**/*.{js,ts,tsx,vue,mts}' --check",
-    "format:no-cache": "oxfmt './**/*.{js,ts,tsx,vue,mts}'",
-    "format": "oxfmt './**/*.{js,ts,tsx,vue,mts}'",
+    "format:check:no-cache": "oxfmt . --check",
+    "format:check": "oxfmt . --check",
+    "format:no-cache": "oxfmt .",
+    "format": "oxfmt .",
     "json-schema": "tsx scripts/generate-json-schema.ts",
     "knip:no-cache": "knip",
     "knip": "knip --cache",
@@ -125,14 +125,12 @@
     "@nx/vite": "catalog:",
     "@pinia/testing": "catalog:",
     "@playwright/test": "catalog:",
-
     "@sentry/vite-plugin": "catalog:",
     "@storybook/addon-docs": "catalog:",
     "@storybook/addon-mcp": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
     "@tailwindcss/vite": "catalog:",
-
     "@types/fs-extra": "catalog:",
     "@types/jsdom": "catalog:",
     "@types/node": "catalog:",
@@ -145,7 +143,6 @@
     "@webgpu/types": "catalog:",
     "cross-env": "catalog:",
     "eslint": "catalog:",
-
     "eslint-import-resolver-typescript": "catalog:",
     "eslint-plugin-import-x": "catalog:",
     "eslint-plugin-oxlint": "catalog:",
@@ -168,7 +165,6 @@
     "oxlint-tsgolint": "catalog:",
     "picocolors": "catalog:",
     "postcss-html": "catalog:",
-
     "pretty-bytes": "catalog:",
     "rollup-plugin-visualizer": "catalog:",
     "storybook": "catalog:",
diff --git a/packages/design-system/src/icons/README.md b/packages/design-system/src/icons/README.md
index 4c98b95aa..5db452423 100644
--- a/packages/design-system/src/icons/README.md
+++ b/packages/design-system/src/icons/README.md
@@ -41,7 +41,7 @@ ComfyUI supports three types of icons that can be used throughout the interface.
   <!-- Carbon Icons -->
 
   <!-- With styling -->
-  <i class="icon-[lucide--save]" class="w-6 h-6 text-blue-500" />
+  <i class="icon-[lucide--save]" class="h-6 w-6 text-blue-500" />
 </template>
 ```
 
@@ -176,11 +176,11 @@ No imports needed - icons are auto-discovered!
 ```vue
 <template>
   <!-- Size with Tailwind classes -->
-  <i class="icon-[lucide--plus]" class="w-4 h-4" />
+  <i class="icon-[lucide--plus]" class="h-4 w-4" />
   <!-- 16px -->
-  <i class="icon-[lucide--plus]" class="w-6 h-6" />
+  <i class="icon-[lucide--plus]" class="h-6 w-6" />
   <!-- 24px (default) -->
-  <i class="icon-[lucide--plus]" class="w-8 h-8" />
+  <i class="icon-[lucide--plus]" class="h-8 w-8" />
   <!-- 32px -->
 
   <!-- Or text size -->
@@ -232,12 +232,12 @@ Always use `currentColor` in SVGs for automatic theme adaptation:
 ```vue
 <template>
   <!-- Before: Inline SVG -->
-  <svg class="w-6 h-6" viewBox="0 0 24 24">
+  <svg class="h-6 w-6" viewBox="0 0 24 24">
     <path d="..." />
   </svg>
 
   <!-- After: Save as custom/my-icon.svg and use -->
-  <i-comfy:my-icon class="w-6 h-6" />
+  <i-comfy:my-icon class="h-6 w-6" />
 </template>
 ```
 
diff --git a/src/components/dialog/content/MissingNodesFooter.vue b/src/components/dialog/content/MissingNodesFooter.vue
index a25b37703..d3eb9fad2 100644
--- a/src/components/dialog/content/MissingNodesFooter.vue
+++ b/src/components/dialog/content/MissingNodesFooter.vue
@@ -20,9 +20,7 @@
       size="md"
       @click="handleGotItClick"
     >
-      {{
-        $t('missingNodes.cloud.gotIt')
-      }}
+      {{ $t('missingNodes.cloud.gotIt') }}
     </Button>
   </div>
 
@@ -35,9 +33,7 @@
       variant="textonly"
       @click="openManager"
     >
-      {{
-        $t('g.openManager')
-      }}
+      {{ $t('g.openManager') }}
     </Button>
     <PackInstallButton
       v-if="showInstallAllButton"
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
index 5444b2a6f..772c88b77 100644
--- a/src/components/sidebar/tabs/AssetsSidebarTab.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -33,17 +33,13 @@
           class="font-inter"
           value="output"
         >
-          {{
-            $t('sideToolbar.labels.generated')
-          }}
+          {{ $t('sideToolbar.labels.generated') }}
         </Tab>
         <Tab
           class="font-inter"
           value="input"
         >
-          {{
-            $t('sideToolbar.labels.imported')
-          }}
+          {{ $t('sideToolbar.labels.imported') }}
         </Tab>
       </TabList>
     </template>
diff --git a/src/platform/assets/components/UploadModelUpgradeModalFooter.vue b/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
index 79ae60796..86f51d0da 100644
--- a/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
+++ b/src/platform/assets/components/UploadModelUpgradeModalFooter.vue
@@ -13,9 +13,7 @@
       variant="textonly"
       @click="emit('close')"
     >
-      {{
-        $t('g.close')
-      }}
+      {{ $t('g.close') }}
     </Button>
     <Button
       variant="secondary"