fix: prevent auth errors for API key users on local/desktop

- Guard subscription status auto-fetch with isCloud check in
  useSubscription.ts to prevent Firebase auth errors on local/desktop
- Guard fetchBalance call in CurrentUserPopoverLegacy.vue for API key
  users since fetchBalance requires Firebase auth
- Add test to verify subscription status is not fetched when not on cloud
- Update CurrentUserPopoverLegacy test mock to include isApiKeyLogin

Fixes API key authentication showing "User not authenticated" errors
when users click profile icon or try to refresh balance on
local/desktop versions.

Slack: https://comfy-organization.slack.com/archives/C0A4XMHANP3/p1771896736700429?thread_ts=1771289819.003239&cid=C0A4XMHANP3

https://claude.ai/code/session_012jjZuGQbnnfcciowSwb4dc

.github/workflows/ci-perf-report.yaml

@@ -1,110 +0,0 @@
-name: 'CI: Performance Report'
-
-on:
-  push:
-    branches: [main, core/*]
-    paths-ignore: ['**/*.md']
-  pull_request:
-    branches-ignore: [wip/*, draft/*, temp/*]
-    paths-ignore: ['**/*.md']
-
-concurrency:
-  group: perf-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-  pull-requests: write
-
-jobs:
-  perf-tests:
-    if: github.repository == 'Comfy-Org/ComfyUI_frontend'
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-    container:
-      image: ghcr.io/comfy-org/comfyui-ci-container:0.0.12
-      credentials:
-        username: ${{ github.actor }}
-        password: ${{ secrets.GITHUB_TOKEN }}
-    permissions:
-      contents: read
-      packages: read
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Setup frontend
-        uses: ./.github/actions/setup-frontend
-        with:
-          include_build_step: true
-
-      - name: Start ComfyUI server
-        uses: ./.github/actions/start-comfyui-server
-
-      - name: Run performance tests
-        id: perf
-        continue-on-error: true
-        run: pnpm exec playwright test --project=performance --workers=1
-
-      - name: Upload perf metrics
-        if: always()
-        uses: actions/upload-artifact@v6
-        with:
-          name: perf-metrics
-          path: test-results/perf-metrics.json
-          retention-days: 30
-          if-no-files-found: warn
-
-  report:
-    needs: perf-tests
-    if: github.event_name == 'pull_request'
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Setup Node
-        uses: actions/setup-node@v6
-        with:
-          node-version: 22
-
-      - name: Download PR perf metrics
-        continue-on-error: true
-        uses: actions/download-artifact@v7
-        with:
-          name: perf-metrics
-          path: test-results/
-
-      - name: Download baseline perf metrics
-        uses: dawidd6/action-download-artifact@0bd50d53a6d7fb5cb921e607957e9cc12b4ce392 # v12
-        with:
-          branch: ${{ github.event.pull_request.base.ref }}
-          workflow: ci-perf-report.yaml
-          event: push
-          name: perf-metrics
-          path: temp/perf-baseline/
-          if_no_artifact_found: warn
-
-      - name: Generate perf report
-        run: npx --yes tsx scripts/perf-report.ts > perf-report.md
-
-      - name: Read perf report
-        id: perf-report
-        uses: juliangruber/read-file-action@b549046febe0fe86f8cb4f93c24e284433f9ab58 # v1.1.7
-        with:
-          path: ./perf-report.md
-
-      - name: Create or update PR comment
-        uses: actions-cool/maintain-one-comment@4b2dbf086015f892dcb5e8c1106f5fccd6c1476b # v3.2.0
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          number: ${{ github.event.pull_request.number }}
-          body: |
-            ${{ steps.perf-report.outputs.content }}
-            <!-- COMFYUI_FRONTEND_PERF -->
-          body-include: '<!-- COMFYUI_FRONTEND_PERF -->'

.github/workflows/release-draft-create.yaml

@@ -53,13 +53,7 @@ jobs:
           IS_NIGHTLY: ${{  case(github.ref == 'refs/heads/main', 'true', 'false') }}
         run: |
           pnpm install --frozen-lockfile
-
-          # Desktop-specific release artifact with desktop distribution flags.
-          DISTRIBUTION=desktop pnpm build
-          pnpm zipdist ./dist ./dist-desktop.zip
-
-          # Default release artifact for core/PyPI.
-          NX_SKIP_NX_CACHE=true pnpm build
+          pnpm build
           pnpm zipdist
       - name: Upload dist artifact
         uses: actions/upload-artifact@v6
@@ -68,7 +62,6 @@ jobs:
           path: |
             dist/
             dist.zip
-            dist-desktop.zip
 
   draft_release:
     needs: build
@@ -86,7 +79,6 @@ jobs:
         with:
           files: |
             dist.zip
-            dist-desktop.zip
           tag_name: v${{ needs.build.outputs.version }}
           target_commitish: ${{ github.event.pull_request.base.ref }}
           make_latest: >-

.stylelintrc.json

@@ -40,12 +40,12 @@
     "block-no-empty": true,
     "no-descending-specificity": null,
     "no-duplicate-at-import-rules": true,
-    "at-rule-disallowed-list": ["apply"],
     "at-rule-no-unknown": [
       true,
       {
         "ignoreAtRules": [
           "tailwind",
+          "apply",
           "layer",
           "config",
           "theme",

apps/desktop-ui/package.json

@@ -61,7 +61,8 @@
           "^build"
         ],
         "options": {
-          "command": "vite build --config apps/desktop-ui/vite.config.mts"
+          "cwd": "apps/desktop-ui",
+          "command": "vite build --config vite.config.mts"
         },
         "outputs": [
           "{projectRoot}/dist"

apps/desktop-ui/src/assets/css/style.css

@@ -4,39 +4,3 @@
   position: absolute;
   inset: 0;
 }
-
-.p-button-secondary {
-  border: none;
-  background-color: var(--color-neutral-600);
-  color: var(--color-white);
-}
-
-.p-button-secondary:hover {
-  background-color: var(--color-neutral-550);
-}
-
-.p-button-secondary:active {
-  background-color: var(--color-neutral-500);
-}
-
-.p-button-danger {
-  background-color: var(--color-coral-red-600);
-}
-
-.p-button-danger:hover {
-  background-color: var(--color-coral-red-500);
-}
-
-.p-button-danger:active {
-  background-color: var(--color-coral-red-400);
-}
-
-.task-div .p-card {
-  transition: opacity var(--default-transition-duration);
-  --p-card-background: var(--p-button-secondary-background);
-  opacity: 0.9;
-}
-
-.task-div .p-card:hover {
-  opacity: 1;
-}

apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -101,15 +101,13 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* xterm renders its internal DOM outside Vue templates, so :deep selectors are
- * required to style those generated nodes.
- */
+@reference '../../../../assets/css/style.css';
+
 :deep(.p-terminal) .xterm {
-  overflow: hidden;
+  @apply overflow-hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  overflow: hidden;
-  background-color: var(--color-neutral-900);
+  @apply bg-neutral-900 overflow-hidden;
 }
 </style>

apps/desktop-ui/src/components/common/LanguageSelector.vue

@@ -7,7 +7,7 @@
     option-value="value"
     :disabled="isSwitching"
     :pt="dropdownPt"
-    :size="size"
+    :size="props.size"
     class="language-selector"
     @change="onLocaleChange"
   >
@@ -36,10 +36,16 @@ import { i18n, loadLocale, st } from '@/i18n'
 type VariantKey = 'dark' | 'light'
 type SizeKey = 'small' | 'large'
 
-const { variant = 'dark', size = 'small' } = defineProps<{
-  variant?: VariantKey
-  size?: SizeKey
-}>()
+const props = withDefaults(
+  defineProps<{
+    variant?: VariantKey
+    size?: SizeKey
+  }>(),
+  {
+    variant: 'dark',
+    size: 'small'
+  }
+)
 
 const dropdownId = `language-select-${Math.random().toString(36).slice(2)}`
 
@@ -98,8 +104,10 @@ const VARIANT_PRESETS = {
 const selectedLocale = ref<string>(i18n.global.locale.value)
 const isSwitching = ref(false)
 
-const sizePreset = computed(() => SIZE_PRESETS[size])
-const variantPreset = computed(() => VARIANT_PRESETS[variant])
+const sizePreset = computed(() => SIZE_PRESETS[props.size as SizeKey])
+const variantPreset = computed(
+  () => VARIANT_PRESETS[props.variant as VariantKey]
+)
 
 const dropdownPt = computed(() => ({
   root: {
@@ -187,17 +195,13 @@ async function onLocaleChange(event: SelectChangeEvent) {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 :deep(.p-dropdown-panel .p-dropdown-item) {
-  transition-property: color, background-color, border-color;
-  transition-duration: var(--default-transition-duration);
+  @apply transition-colors;
 }
 
 :deep(.p-dropdown) {
-  &:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 2px var(--color-neutral-900),
-      0 0 0 4px color-mix(in srgb, var(--color-brand-yellow) 60%, transparent);
-  }
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2;
 }
 </style>

apps/desktop-ui/src/components/install/InstallLocationPicker.vue

@@ -269,43 +269,26 @@ const onFocus = async () => {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 :deep(.location-picker-accordion) {
-  padding-inline: calc(var(--spacing) * 12);
+  @apply px-12;
 
   .p-accordionpanel {
-    border: 0;
-    background-color: transparent;
+    @apply border-0 bg-transparent;
   }
 
   .p-accordionheader {
-    margin-top: calc(var(--spacing) * 2);
-    border: 0;
-    border-radius: var(--radius-xl);
-    background-color: color-mix(
-      in srgb,
-      var(--color-neutral-800) 50%,
-      transparent
-    );
+    @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;
-
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--color-neutral-700) 50%,
-        transparent
-      );
-    }
   }
 
   /* When panel is expanded, adjust header border radius */
   .p-accordionpanel-active {
     .p-accordionheader {
-      border-top-left-radius: var(--radius-xl);
-      border-top-right-radius: var(--radius-xl);
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
+      @apply rounded-t-xl rounded-b-none;
     }
 
     .p-accordionheader-toggle-icon {
@@ -316,24 +299,11 @@ const onFocus = async () => {
   }
 
   .p-accordioncontent {
-    border: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: var(--radius-xl);
-    border-bottom-left-radius: var(--radius-xl);
-    background-color: color-mix(
-      in srgb,
-      var(--color-neutral-800) 50%,
-      transparent
-    );
+    @apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
   }
 
   .p-accordioncontent-content {
-    background-color: transparent;
-    padding-top: calc(var(--spacing) * 3);
-    padding-right: calc(var(--spacing) * 5);
-    padding-bottom: calc(var(--spacing) * 5);
-    padding-left: calc(var(--spacing) * 5);
+    @apply bg-transparent pt-3 pr-5 pb-5 pl-5;
   }
 
   /* Override default chevron icons to use up/down */

apps/desktop-ui/src/components/maintenance/TaskCard.vue

@@ -1,20 +1,11 @@
 <template>
   <div
-    :class="
-      cn(
-        'task-div group/task-card relative grid min-h-52 max-w-48',
-        isLoading && 'opacity-75'
-      )
-    "
+    class="task-div relative grid min-h-52 max-w-48"
+    :class="{ 'opacity-75': isLoading }"
   >
     <Card
-      :class="
-        cn(
-          'relative h-full max-w-48 overflow-hidden',
-          runner.state !== 'error' && 'opacity-65'
-        )
-      "
-      :pt="cardPt"
+      class="relative h-full max-w-48 overflow-hidden"
+      :class="{ 'opacity-65': runner.state !== 'error' }"
       v-bind="(({ onClick, ...rest }) => rest)($attrs)"
     >
       <template #header>
@@ -52,7 +43,7 @@
 
     <i
       v-if="!isLoading && runner.state === 'OK'"
-      class="pi pi-check pointer-events-none absolute -right-4 -bottom-4 col-span-full row-span-full z-10 text-[4rem] text-green-500 opacity-100 transition-opacity group-hover/task-card:opacity-20 [text-shadow:0.25rem_0_0.5rem_black]"
+      class="task-card-ok pi pi-check"
     />
   </div>
 </template>
@@ -64,7 +55,6 @@ import { computed } from 'vue'
 
 import { useMaintenanceTaskStore } from '@/stores/maintenanceTaskStore'
 import type { MaintenanceTask } from '@/types/desktop/maintenanceTypes'
-import { cn } from '@/utils/tailwindUtil'
 import { useMinLoadingDurationRef } from '@/utils/refUtil'
 
 const taskStore = useMaintenanceTaskStore()
@@ -93,9 +83,51 @@ const reactiveExecuting = computed(() => !!runner.value.executing)
 
 const isLoading = useMinLoadingDurationRef(reactiveLoading, 250)
 const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
-
-const cardPt = {
-  header: { class: 'z-0' },
-  body: { class: 'z-[1] grow justify-between' }
-}
 </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>

apps/desktop-ui/src/views/DesktopDialogView.vue

@@ -1,10 +1,10 @@
 <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) }}
+      {{ t(`desktopDialogs.${id}.title`, title) }}
     </h1>
     <p class="whitespace-pre-wrap">
-      {{ $t(`desktopDialogs.${id}.message`, message) }}
+      {{ t(`desktopDialogs.${id}.message`, message) }}
     </p>
     <div class="flex w-full gap-2">
       <Button
@@ -12,7 +12,7 @@
         :key="button.label"
         class="rounded-lg first:mr-auto"
         :label="
-          $t(
+          t(
             `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
             button.label
           )
@@ -31,6 +31,7 @@ import { useRoute } from 'vue-router'
 
 import { getDialog } from '@/constants/desktopDialogs'
 import type { DialogAction } from '@/constants/desktopDialogs'
+import { t } from '@/i18n'
 import { electronAPI } from '@/utils/envUtil'
 
 const route = useRoute()
@@ -40,3 +41,31 @@ 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>

apps/desktop-ui/src/views/DesktopUpdateView.vue

@@ -6,11 +6,11 @@
       <div class="relative m-8 text-center">
         <!-- Header -->
         <h1 class="download-bg pi-download text-4xl font-bold">
-          {{ $t('desktopUpdate.title') }}
+          {{ t('desktopUpdate.title') }}
         </h1>
 
         <div class="m-8">
-          <span>{{ $t('desktopUpdate.description') }}</span>
+          <span>{{ t('desktopUpdate.description') }}</span>
         </div>
 
         <ProgressSpinner class="m-8 w-48 h-48" />
@@ -19,7 +19,7 @@
         <Button
           style="transform: translateX(-50%)"
           class="fixed bottom-0 left-1/2 my-8"
-          :label="$t('maintenance.consoleLogs')"
+          :label="t('maintenance.consoleLogs')"
           icon="pi pi-desktop"
           icon-pos="left"
           severity="secondary"
@@ -28,8 +28,8 @@
 
         <TerminalOutputDrawer
           v-model="terminalVisible"
-          :header="$t('g.terminal')"
-          :default-message="$t('desktopUpdate.terminalDefaultMessage')"
+          :header="t('g.terminal')"
+          :default-message="t('desktopUpdate.terminalDefaultMessage')"
         />
       </div>
     </div>
@@ -44,6 +44,7 @@ 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'
@@ -60,10 +61,10 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .download-bg::before {
-  position: absolute;
-  margin: 0;
-  color: var(--muted-foreground);
+  @apply m-0 absolute text-muted;
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: 2rem;

apps/desktop-ui/src/views/InstallView.vue

@@ -183,37 +183,33 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 :deep(.p-steppanel) {
-  margin-top: calc(var(--spacing) * 8);
-  display: flex;
-  justify-content: center;
-  background-color: transparent;
+  @apply mt-8 flex justify-center bg-transparent;
 }
 
 /* Remove default padding/margin from StepPanels to make scrollbar flush */
 :deep(.p-steppanels) {
-  margin: 0;
-  padding: 0;
+  @apply p-0 m-0;
 }
 
 /* Ensure StepPanel content container has no top/bottom padding */
 :deep(.p-steppanel-content) {
-  padding: 0;
+  @apply p-0;
 }
 
 /* Custom overlay scrollbar for WebKit browsers (Electron, Chrome) */
 :deep(.p-steppanels::-webkit-scrollbar) {
-  width: calc(var(--spacing) * 4);
+  @apply w-4;
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-track) {
-  background-color: transparent;
+  @apply bg-transparent;
 }
 
 :deep(.p-steppanels::-webkit-scrollbar-thumb) {
-  border: 4px solid transparent;
-  border-radius: var(--radius-lg);
-  background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
+  @apply bg-white/20 rounded-lg border-[4px] border-transparent;
   background-clip: content-box;
 }
 </style>

apps/desktop-ui/src/views/MaintenanceView.vue

@@ -114,12 +114,12 @@ import Tag from 'primevue/tag'
 import Toast from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 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'
@@ -129,7 +129,6 @@ import BaseViewTemplate from './templates/BaseViewTemplate.vue'
 
 const electron = electronAPI()
 const toast = useToast()
-const { t } = useI18n()
 const taskStore = useMaintenanceTaskStore()
 const { clearResolved, processUpdate, refreshDesktopTasks } = taskStore
 
@@ -221,14 +220,14 @@ onUnmounted(() => electron.Validation.dispose())
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 :deep(.p-tag) {
   --p-tag-gap: 0.375rem;
 }
 
 .backspan::before {
-  position: absolute;
-  margin: 0;
-  color: var(--muted-foreground);
+  @apply m-0 absolute text-muted;
   font-family: 'primeicons', sans-serif;
   top: -2rem;
   right: -2rem;

apps/desktop-ui/src/views/NotSupportedView.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseViewTemplate>
-    <div class="sad-container grid items-center justify-evenly">
+    <div class="sad-container">
       <!-- Right side image -->
       <img
         class="sad-girl"
@@ -79,7 +79,10 @@ const continueToInstall = async () => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 .sad-container {
+  @apply grid items-center justify-evenly;
   grid-template-columns: 25rem 1fr;
 
   & > * {

apps/desktop-ui/src/views/ServerStartView.vue

@@ -232,6 +232,8 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+@reference '../assets/css/style.css';
+
 /* Hide the xterm scrollbar completely */
 :deep(.p-terminal) .xterm-viewport {
   overflow: hidden !important;

browser_tests/fixtures/ComfyPage.ts

@@ -24,7 +24,6 @@ import {
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
 import { CanvasHelper } from './helpers/CanvasHelper'
-import { PerformanceHelper } from './helpers/PerformanceHelper'
 import { ClipboardHelper } from './helpers/ClipboardHelper'
 import { CommandHelper } from './helpers/CommandHelper'
 import { DragDropHelper } from './helpers/DragDropHelper'
@@ -186,7 +185,6 @@ export class ComfyPage {
   public readonly dragDrop: DragDropHelper
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
-  public readonly perf: PerformanceHelper
 
   /** Worker index to test user ID */
   public readonly userIds: string[] = []
@@ -231,7 +229,6 @@ export class ComfyPage {
     this.dragDrop = new DragDropHelper(page, this.assetPath.bind(this))
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
-    this.perf = new PerformanceHelper(page)
   }
 
   get visibleToasts() {
@@ -439,13 +436,7 @@ export const comfyPageFixture = base.extend<{
     }
 
     await comfyPage.setup()
-
-    const isPerf = testInfo.tags.includes('@perf')
-    if (isPerf) await comfyPage.perf.init()
-
     await use(comfyPage)
-
-    if (isPerf) await comfyPage.perf.dispose()
   },
   comfyMouse: async ({ comfyPage }, use) => {
     const comfyMouse = new ComfyMouse(comfyPage)

browser_tests/fixtures/helpers/PerformanceHelper.ts

@@ -1,96 +0,0 @@
-import type { CDPSession, Page } from '@playwright/test'
-
-interface PerfSnapshot {
-  RecalcStyleCount: number
-  RecalcStyleDuration: number
-  LayoutCount: number
-  LayoutDuration: number
-  TaskDuration: number
-  JSHeapUsedSize: number
-  Timestamp: number
-}
-
-export interface PerfMeasurement {
-  name: string
-  durationMs: number
-  styleRecalcs: number
-  styleRecalcDurationMs: number
-  layouts: number
-  layoutDurationMs: number
-  taskDurationMs: number
-  heapDeltaBytes: number
-}
-
-export class PerformanceHelper {
-  private cdp: CDPSession | null = null
-  private snapshot: PerfSnapshot | null = null
-
-  constructor(private readonly page: Page) {}
-
-  async init(): Promise<void> {
-    this.cdp = await this.page.context().newCDPSession(this.page)
-    await this.cdp.send('Performance.enable')
-  }
-
-  async dispose(): Promise<void> {
-    this.snapshot = null
-    if (this.cdp) {
-      try {
-        await this.cdp.send('Performance.disable')
-      } finally {
-        await this.cdp.detach()
-        this.cdp = null
-      }
-    }
-  }
-
-  private async getSnapshot(): Promise<PerfSnapshot> {
-    if (!this.cdp) throw new Error('PerformanceHelper not initialized')
-    const { metrics } = (await this.cdp.send('Performance.getMetrics')) as {
-      metrics: { name: string; value: number }[]
-    }
-    function get(name: string): number {
-      return metrics.find((m) => m.name === name)?.value ?? 0
-    }
-    return {
-      RecalcStyleCount: get('RecalcStyleCount'),
-      RecalcStyleDuration: get('RecalcStyleDuration'),
-      LayoutCount: get('LayoutCount'),
-      LayoutDuration: get('LayoutDuration'),
-      TaskDuration: get('TaskDuration'),
-      JSHeapUsedSize: get('JSHeapUsedSize'),
-      Timestamp: get('Timestamp')
-    }
-  }
-
-  async startMeasuring(): Promise<void> {
-    if (this.snapshot) {
-      throw new Error(
-        'Measurement already in progress — call stopMeasuring() first'
-      )
-    }
-    this.snapshot = await this.getSnapshot()
-  }
-
-  async stopMeasuring(name: string): Promise<PerfMeasurement> {
-    if (!this.snapshot) throw new Error('Call startMeasuring() first')
-    const after = await this.getSnapshot()
-    const before = this.snapshot
-    this.snapshot = null
-
-    function delta(key: keyof PerfSnapshot): number {
-      return after[key] - before[key]
-    }
-
-    return {
-      name,
-      durationMs: delta('Timestamp') * 1000,
-      styleRecalcs: delta('RecalcStyleCount'),
-      styleRecalcDurationMs: delta('RecalcStyleDuration') * 1000,
-      layouts: delta('LayoutCount'),
-      layoutDurationMs: delta('LayoutDuration') * 1000,
-      taskDurationMs: delta('TaskDuration') * 1000,
-      heapDeltaBytes: delta('JSHeapUsedSize')
-    }
-  }
-}

browser_tests/fixtures/selectors.ts

@@ -44,12 +44,6 @@ export const TestIds = {
   node: {
     titleInput: 'node-title-input'
   },
-  selectionToolbox: {
-    colorPickerButton: 'color-picker-button',
-    colorPickerCurrentColor: 'color-picker-current-color',
-    colorBlue: 'blue',
-    colorRed: 'red'
-  },
   widgets: {
     decrement: 'decrement',
     increment: 'increment',
@@ -80,7 +74,6 @@ export type TestIdValue =
   | (typeof TestIds.nodeLibrary)[keyof typeof TestIds.nodeLibrary]
   | (typeof TestIds.propertiesPanel)[keyof typeof TestIds.propertiesPanel]
   | (typeof TestIds.node)[keyof typeof TestIds.node]
-  | (typeof TestIds.selectionToolbox)[keyof typeof TestIds.selectionToolbox]
   | (typeof TestIds.widgets)[keyof typeof TestIds.widgets]
   | (typeof TestIds.breadcrumb)[keyof typeof TestIds.breadcrumb]
   | Exclude<

browser_tests/globalTeardown.ts

@@ -1,14 +1,11 @@
 import type { FullConfig } from '@playwright/test'
 import dotenv from 'dotenv'
 
-import { writePerfReport } from './helpers/perfReporter'
 import { restorePath } from './utils/backupUtils'
 
 dotenv.config()
 
 export default function globalTeardown(_config: FullConfig) {
-  writePerfReport()
-
   if (!process.env.CI && process.env.TEST_COMFYUI_DIR) {
     restorePath([process.env.TEST_COMFYUI_DIR, 'user'])
     restorePath([process.env.TEST_COMFYUI_DIR, 'models'])

browser_tests/helpers/perfReporter.ts

@@ -1,49 +0,0 @@
-import { mkdirSync, readdirSync, readFileSync, writeFileSync } from 'fs'
-import { join } from 'path'
-
-import type { PerfMeasurement } from '../fixtures/helpers/PerformanceHelper'
-
-export interface PerfReport {
-  timestamp: string
-  gitSha: string
-  branch: string
-  measurements: PerfMeasurement[]
-}
-
-const TEMP_DIR = join('test-results', 'perf-temp')
-
-export function recordMeasurement(m: PerfMeasurement) {
-  mkdirSync(TEMP_DIR, { recursive: true })
-  const filename = `${m.name}-${Date.now()}.json`
-  writeFileSync(join(TEMP_DIR, filename), JSON.stringify(m))
-}
-
-export function writePerfReport(
-  gitSha = process.env.GITHUB_SHA ?? 'local',
-  branch = process.env.GITHUB_HEAD_REF ?? 'local'
-) {
-  if (!readdirSync('test-results', { withFileTypes: true }).length) return
-
-  let tempFiles: string[]
-  try {
-    tempFiles = readdirSync(TEMP_DIR).filter((f) => f.endsWith('.json'))
-  } catch {
-    return
-  }
-  if (tempFiles.length === 0) return
-
-  const measurements: PerfMeasurement[] = tempFiles.map((f) =>
-    JSON.parse(readFileSync(join(TEMP_DIR, f), 'utf-8'))
-  )
-
-  const report: PerfReport = {
-    timestamp: new Date().toISOString(),
-    gitSha,
-    branch,
-    measurements
-  }
-  writeFileSync(
-    join('test-results', 'perf-metrics.json'),
-    JSON.stringify(report, null, 2)
-  )
-}

browser_tests/tests/dialog.spec.ts

@@ -104,13 +104,15 @@ test.describe('Missing models warning', () => {
   }) => {
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
 
-    const downloadAllButton = comfyPage.page.getByText('Download all')
-    await expect(downloadAllButton).toBeVisible()
+    const downloadButton = missingModelsWarning.getByText('Download')
+    await expect(downloadButton).toBeVisible()
+
+    // Check that the copy URL button is also visible for Desktop environment
+    const copyUrlButton = missingModelsWarning.getByText('Copy URL')
+    await expect(copyUrlButton).toBeVisible()
   })
 
   test('Should display a warning when missing models are found in node properties', async ({
@@ -121,13 +123,15 @@ test.describe('Missing models warning', () => {
       'missing/missing_models_from_node_properties'
     )
 
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
 
-    const downloadAllButton = comfyPage.page.getByText('Download all')
-    await expect(downloadAllButton).toBeVisible()
+    const downloadButton = missingModelsWarning.getByText('Download')
+    await expect(downloadButton).toBeVisible()
+
+    // Check that the copy URL button is also visible for Desktop environment
+    const copyUrlButton = missingModelsWarning.getByText('Copy URL')
+    await expect(copyUrlButton).toBeVisible()
   })
 
   test('Should not display a warning when no missing models are found', async ({
@@ -168,10 +172,8 @@ test.describe('Missing models warning', () => {
 
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).not.toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).not.toBeVisible()
   })
 
   test('Should not display warning when model metadata exists but widget values have changed', async ({
@@ -184,10 +186,8 @@ test.describe('Missing models warning', () => {
     )
 
     // The missing models warning should NOT appear
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).not.toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).not.toBeVisible()
   })
 
   // Flaky test after parallelization
@@ -199,15 +199,13 @@ test.describe('Missing models warning', () => {
     // https://github.com/Comfy-Org/ComfyUI_devtools/blob/main/__init__.py
     await comfyPage.workflow.loadWorkflow('missing/missing_models')
 
-    const dialogTitle = comfyPage.page.getByText(
-      'This workflow is missing models'
-    )
-    await expect(dialogTitle).toBeVisible()
+    const missingModelsWarning = comfyPage.page.locator('.comfy-missing-models')
+    await expect(missingModelsWarning).toBeVisible()
 
-    const downloadAllButton = comfyPage.page.getByText('Download all')
-    await expect(downloadAllButton).toBeVisible()
+    const downloadButton = comfyPage.page.getByText('Download')
+    await expect(downloadButton).toBeVisible()
     const downloadPromise = comfyPage.page.waitForEvent('download')
-    await downloadAllButton.click()
+    await downloadButton.click()
 
     const download = await downloadPromise
     expect(download.suggestedFilename()).toBe('fake_model.safetensors')
@@ -231,13 +229,12 @@ test.describe('Missing models warning', () => {
     test('Should disable warning dialog when checkbox is checked', async ({
       comfyPage
     }) => {
+      await checkbox.click()
       const changeSettingPromise = comfyPage.page.waitForRequest(
         '**/api/settings/Comfy.Workflow.ShowMissingModelsWarning'
       )
-      await checkbox.click()
-      await changeSettingPromise
-
       await closeButton.click()
+      await changeSettingPromise
 
       const settingValue = await comfyPage.settings.getSetting(
         'Comfy.Workflow.ShowMissingModelsWarning'

browser_tests/tests/performance.spec.ts

@@ -1,70 +0,0 @@
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { recordMeasurement } from '../helpers/perfReporter'
-
-test.describe('Performance', { tag: ['@perf'] }, () => {
-  test('canvas idle style recalculations', async ({ comfyPage }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.perf.startMeasuring()
-
-    // Let the canvas idle for 2 seconds — no user interaction.
-    // Measures baseline style recalcs from reactive state + render loop.
-    for (let i = 0; i < 120; i++) {
-      await comfyPage.nextFrame()
-    }
-
-    const m = await comfyPage.perf.stopMeasuring('canvas-idle')
-    recordMeasurement(m)
-    console.log(
-      `Canvas idle: ${m.styleRecalcs} style recalcs, ${m.layouts} layouts`
-    )
-  })
-
-  test('canvas mouse interaction style recalculations', async ({
-    comfyPage
-  }) => {
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.perf.startMeasuring()
-
-    const canvas = comfyPage.canvas
-    const box = await canvas.boundingBox()
-    if (!box) throw new Error('Canvas bounding box not available')
-
-    // Sweep mouse across the canvas — crosses nodes, empty space, slots
-    for (let i = 0; i < 100; i++) {
-      await comfyPage.page.mouse.move(
-        box.x + (box.width * i) / 100,
-        box.y + (box.height * (i % 3)) / 3
-      )
-    }
-
-    const m = await comfyPage.perf.stopMeasuring('canvas-mouse-sweep')
-    recordMeasurement(m)
-    console.log(
-      `Mouse sweep: ${m.styleRecalcs} style recalcs, ${m.layouts} layouts`
-    )
-  })
-
-  test('DOM widget clipping during node selection', async ({ comfyPage }) => {
-    // Load default workflow which has DOM widgets (text inputs, combos)
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.perf.startMeasuring()
-
-    // Select and deselect nodes rapidly to trigger clipping recalculation
-    const canvas = comfyPage.canvas
-    const box = await canvas.boundingBox()
-    if (!box) throw new Error('Canvas bounding box not available')
-
-    for (let i = 0; i < 20; i++) {
-      // Click on canvas area (nodes occupy various positions)
-      await comfyPage.page.mouse.click(
-        box.x + box.width / 3 + (i % 5) * 30,
-        box.y + box.height / 3 + (i % 4) * 30
-      )
-      await comfyPage.nextFrame()
-    }
-
-    const m = await comfyPage.perf.stopMeasuring('dom-widget-clipping')
-    recordMeasurement(m)
-    console.log(`Clipping: ${m.layouts} forced layouts`)
-  })
-})

browser_tests/tests/selectionToolbox.spec.ts

@@ -1,8 +1,6 @@
 import { expect } from '@playwright/test'
-import type { Page } from '@playwright/test'
 
 import { comfyPageFixture } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
 
 const test = comfyPageFixture
 
@@ -12,17 +10,6 @@ test.beforeEach(async ({ comfyPage }) => {
 const BLUE_COLOR = 'rgb(51, 51, 85)'
 const RED_COLOR = 'rgb(85, 51, 51)'
 
-const getColorPickerButton = (comfyPage: { page: Page }) =>
-  comfyPage.page.getByTestId(TestIds.selectionToolbox.colorPickerButton)
-
-const getColorPickerCurrentColor = (comfyPage: { page: Page }) =>
-  comfyPage.page.getByTestId(TestIds.selectionToolbox.colorPickerCurrentColor)
-
-const getColorPickerGroup = (comfyPage: { page: Page }) =>
-  comfyPage.page.getByRole('group').filter({
-    has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
-  })
-
 test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
@@ -145,24 +132,28 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Color picker button should be visible
-      const colorPickerButton = getColorPickerButton(comfyPage)
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
       await expect(colorPickerButton).toBeVisible()
 
       // Click color picker button
       await colorPickerButton.click()
 
       // Color picker dropdown should be visible
-      const colorPickerGroup = getColorPickerGroup(comfyPage)
-      await expect(colorPickerGroup).toBeVisible()
+      const colorPickerDropdown = comfyPage.page.locator(
+        '.color-picker-container'
+      )
+      await expect(colorPickerDropdown).toBeVisible()
 
       // Select a color (e.g., blue)
-      const blueColorOption = colorPickerGroup.getByTestId(
-        TestIds.selectionToolbox.colorBlue
+      const blueColorOption = colorPickerDropdown.locator(
+        'i[data-testid="blue"]'
       )
       await blueColorOption.click()
 
       // Dropdown should close after selection
-      await expect(colorPickerGroup).not.toBeVisible()
+      await expect(colorPickerDropdown).not.toBeVisible()
 
       // Node should have the selected color class/style
       // Note: Exact verification method depends on how color is applied to nodes
@@ -181,21 +172,22 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
         'CLIP Text Encode (Prompt)'
       ])
 
-      const colorPickerButton = getColorPickerButton(comfyPage)
-      const colorPickerCurrentColor = getColorPickerCurrentColor(comfyPage)
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
 
       // Initially should show default color
       await expect(colorPickerButton).not.toHaveAttribute('color')
 
       // Click color picker and select a color
       await colorPickerButton.click()
-      const redColorOption = getColorPickerGroup(comfyPage).getByTestId(
-        TestIds.selectionToolbox.colorRed
+      const redColorOption = comfyPage.page.locator(
+        '.color-picker-container i[data-testid="red"]'
       )
       await redColorOption.click()
 
       // Button should now show the selected color
-      await expect(colorPickerCurrentColor).toHaveCSS('color', RED_COLOR)
+      await expect(colorPickerButton).toHaveCSS('color', RED_COLOR)
     })
 
     test('color picker shows mixed state for differently colored selections', async ({
@@ -203,17 +195,17 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // Select first node and color it
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await getColorPickerButton(comfyPage).click()
-      await getColorPickerGroup(comfyPage)
-        .getByTestId(TestIds.selectionToolbox.colorBlue)
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
         .click()
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Select second node and color it differently
       await comfyPage.nodeOps.selectNodes(['CLIP Text Encode (Prompt)'])
-      await getColorPickerButton(comfyPage).click()
-      await getColorPickerGroup(comfyPage)
-        .getByTestId(TestIds.selectionToolbox.colorRed)
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="red"]')
         .click()
 
       // Select both nodes
@@ -223,7 +215,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       ])
 
       // Color picker should show null/mixed state
-      const colorPickerButton = getColorPickerButton(comfyPage)
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
       await expect(colorPickerButton).not.toHaveAttribute('color')
     })
 
@@ -232,9 +226,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // First color a node
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await getColorPickerButton(comfyPage).click()
-      await getColorPickerGroup(comfyPage)
-        .getByTestId(TestIds.selectionToolbox.colorBlue)
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
         .click()
 
       // Clear selection
@@ -244,8 +238,10 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
       await comfyPage.nodeOps.selectNodes(['KSampler'])
 
       // Color picker button should show the correct color
-      const colorPickerCurrentColor = getColorPickerCurrentColor(comfyPage)
-      await expect(colorPickerCurrentColor).toHaveCSS('color', BLUE_COLOR)
+      const colorPickerButton = comfyPage.page.locator(
+        '.selection-toolbox .pi-circle-fill'
+      )
+      await expect(colorPickerButton).toHaveCSS('color', BLUE_COLOR)
     })
 
     test('colorization via color picker can be undone', async ({
@@ -253,9 +249,9 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
     }) => {
       // Select a node and color it
       await comfyPage.nodeOps.selectNodes(['KSampler'])
-      await getColorPickerButton(comfyPage).click()
-      await getColorPickerGroup(comfyPage)
-        .getByTestId(TestIds.selectionToolbox.colorBlue)
+      await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+      await comfyPage.page
+        .locator('.color-picker-container i[data-testid="blue"]')
         .click()
 
       // Undo the colorization

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

@@ -2,7 +2,6 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '../../../fixtures/ComfyPage'
-import { TestIds } from '../../../fixtures/selectors'
 
 test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
   test.beforeEach(async ({ comfyPage }) => {
@@ -20,16 +19,10 @@ test.describe('Vue Node Custom Colors', { tag: '@screenshot' }, () => {
     })
     await loadCheckpointNode.getByText('Load Checkpoint').click()
 
-    const colorPickerButton = comfyPage.page.getByTestId(
-      TestIds.selectionToolbox.colorPickerButton
-    )
-    await colorPickerButton.click()
-
-    const colorPickerGroup = comfyPage.page.getByRole('group').filter({
-      has: comfyPage.page.getByTestId(TestIds.selectionToolbox.colorBlue)
-    })
-    await colorPickerGroup
-      .getByTestId(TestIds.selectionToolbox.colorBlue)
+    await comfyPage.page.locator('.selection-toolbox .pi-circle-fill').click()
+    await comfyPage.page
+      .locator('.color-picker-container')
+      .locator('i[data-testid="blue"]')
       .click()
 
     await expect(comfyPage.canvas).toHaveScreenshot(

docs/guidance/vue-components.md

@@ -39,10 +39,6 @@ Prefer Vue native options when available:
 - Use inline Tailwind CSS only (no `<style>` blocks)
 - Use `cn()` from `@/utils/tailwindUtil` for conditional classes
 - Refer to packages/design-system/src/css/style.css for design tokens and tailwind configuration
-- Exception: when third-party libraries render runtime DOM outside Vue templates
-  (for example xterm internals inside PrimeVue terminal wrappers), scoped
-  `:deep()` selectors are allowed. Add a brief inline comment explaining why the
-  exception is required.
 
 ## Best Practices
 

eslint.config.ts

@@ -22,9 +22,7 @@ const extraFileExtensions = ['.vue']
 
 const commonGlobals = {
   ...globals.browser,
-  __COMFYUI_FRONTEND_VERSION__: 'readonly',
-  __DISTRIBUTION__: 'readonly',
-  __IS_NIGHTLY__: 'readonly'
+  __COMFYUI_FRONTEND_VERSION__: 'readonly'
 } as const
 
 const settings = {

lint-staged.config.ts

@@ -4,11 +4,6 @@ export default {
   'tests-ui/**': () =>
     'echo "Files in tests-ui/ are deprecated. Colocate tests with source files." && exit 1',
 
-  './**/*.{css,vue}': (stagedFiles: string[]) => {
-    const joinedPaths = toJoinedRelativePaths(stagedFiles)
-    return [`pnpm exec stylelint --allow-empty-input ${joinedPaths}`]
-  },
-
   './**/*.js': (stagedFiles: string[]) => formatAndEslint(stagedFiles),
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles: string[]) => {
@@ -27,17 +22,12 @@ export default {
 }
 
 function formatAndEslint(fileNames: string[]) {
-  const joinedPaths = toJoinedRelativePaths(fileNames)
+  // Convert absolute paths to relative paths for better ESLint resolution
+  const relativePaths = fileNames.map((f) => path.relative(process.cwd(), f))
+  const joinedPaths = relativePaths.map((p) => `"${p}"`).join(' ')
   return [
     `pnpm exec oxfmt --write ${joinedPaths}`,
     `pnpm exec oxlint --fix ${joinedPaths}`,
     `pnpm exec eslint --cache --fix --no-warn-ignored ${joinedPaths}`
   ]
 }
-
-function toJoinedRelativePaths(fileNames: string[]) {
-  const relativePaths = fileNames.map((f) =>
-    path.relative(process.cwd(), f).replace(/\\/g, '/')
-  )
-  return relativePaths.map((p) => `"${p}"`).join(' ')
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.41.8",
+  "version": "1.41.3",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",
@@ -29,10 +29,10 @@
     "knip": "knip --cache",
     "lint:fix:no-cache": "oxlint src --type-aware --fix && eslint src --fix",
     "lint:fix": "oxlint src --type-aware --fix && eslint src --cache --fix",
-    "lint:no-cache": "pnpm exec stylelint '{apps,packages,src}/**/*.{css,vue}' && oxlint src --type-aware && eslint src",
+    "lint:no-cache": "oxlint src --type-aware && eslint src",
     "lint:unstaged:fix": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache --fix",
     "lint:unstaged": "git diff --name-only HEAD | grep -E '\\.(js|ts|vue|mts)$' | xargs -r eslint --cache",
-    "lint": "pnpm stylelint && oxlint src --type-aware && eslint src --cache",
+    "lint": "oxlint src --type-aware && eslint src --cache",
     "lint:desktop": "nx run @comfyorg/desktop-ui:lint",
     "locale": "lobe-i18n locale",
     "oxlint": "oxlint src --type-aware",

packages/design-system/src/css/style.css

@@ -156,7 +156,6 @@
 :root {
   --fg-color: #000;
   --bg-color: #fff;
-  --default-transition-duration: 0.1s;
   --comfy-menu-bg: #353535;
   --comfy-menu-secondary-bg: #292929;
   --comfy-topbar-height: 2.5rem;

packages/registry-types/src/comfyRegistryTypes.ts

@@ -3952,7 +3952,7 @@ export interface components {
          * @description The subscription tier level
          * @enum {string}
          */
-        SubscriptionTier: "FREE" | "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
+        SubscriptionTier: "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
         /**
          * @description The subscription billing duration
          * @enum {string}

playwright.config.ts

@@ -36,18 +36,7 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
       timeout: 15000,
-      grepInvert: /@mobile|@perf/ // Run all tests except those tagged with @mobile or @perf
-    },
-
-    {
-      name: 'performance',
-      use: {
-        ...devices['Desktop Chrome'],
-        trace: 'retain-on-failure'
-      },
-      timeout: 60_000,
-      grep: /@perf/,
-      fullyParallel: false
+      grepInvert: /@mobile/ // Run all tests except those tagged with @mobile
     },
 
     {

scripts/perf-report.ts

@@ -1,125 +0,0 @@
-import { existsSync, readFileSync } from 'node:fs'
-
-interface PerfMeasurement {
-  name: string
-  durationMs: number
-  styleRecalcs: number
-  styleRecalcDurationMs: number
-  layouts: number
-  layoutDurationMs: number
-  taskDurationMs: number
-  heapDeltaBytes: number
-}
-
-interface PerfReport {
-  timestamp: string
-  gitSha: string
-  branch: string
-  measurements: PerfMeasurement[]
-}
-
-const CURRENT_PATH = 'test-results/perf-metrics.json'
-const BASELINE_PATH = 'temp/perf-baseline/perf-metrics.json'
-
-function formatDelta(pct: number): string {
-  if (pct >= 20) return `+${pct.toFixed(0)}% 🔴`
-  if (pct >= 10) return `+${pct.toFixed(0)}% 🟠`
-  if (pct > -10) return `${pct >= 0 ? '+' : ''}${pct.toFixed(0)}% ⚪`
-  return `${pct.toFixed(0)}% 🟢`
-}
-
-function formatBytes(bytes: number): string {
-  if (Math.abs(bytes) < 1024) return `${bytes} B`
-  if (Math.abs(bytes) < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-
-function calcDelta(
-  baseline: number,
-  current: number
-): { pct: number; isNew: boolean } {
-  if (baseline > 0) {
-    return { pct: ((current - baseline) / baseline) * 100, isNew: false }
-  }
-  return current > 0 ? { pct: Infinity, isNew: true } : { pct: 0, isNew: false }
-}
-
-function formatDeltaCell(delta: { pct: number; isNew: boolean }): string {
-  return delta.isNew ? 'new 🔴' : formatDelta(delta.pct)
-}
-
-function main() {
-  if (!existsSync(CURRENT_PATH)) {
-    process.stdout.write(
-      '## ⚡ Performance Report\n\nNo perf metrics found. Perf tests may not have run.\n'
-    )
-    process.exit(0)
-  }
-
-  const current: PerfReport = JSON.parse(readFileSync(CURRENT_PATH, 'utf-8'))
-
-  const baseline: PerfReport | null = existsSync(BASELINE_PATH)
-    ? JSON.parse(readFileSync(BASELINE_PATH, 'utf-8'))
-    : null
-
-  const lines: string[] = []
-  lines.push('## ⚡ Performance Report\n')
-
-  if (baseline) {
-    lines.push(
-      '| Metric | Baseline | PR | Δ |',
-      '|--------|----------|-----|---|'
-    )
-
-    for (const m of current.measurements) {
-      const base = baseline.measurements.find((b) => b.name === m.name)
-      if (!base) {
-        lines.push(`| ${m.name}: style recalcs | — | ${m.styleRecalcs} | new |`)
-        lines.push(`| ${m.name}: layouts | — | ${m.layouts} | new |`)
-        lines.push(
-          `| ${m.name}: task duration | — | ${m.taskDurationMs.toFixed(0)}ms | new |`
-        )
-        continue
-      }
-
-      const recalcDelta = calcDelta(base.styleRecalcs, m.styleRecalcs)
-      lines.push(
-        `| ${m.name}: style recalcs | ${base.styleRecalcs} | ${m.styleRecalcs} | ${formatDeltaCell(recalcDelta)} |`
-      )
-
-      const layoutDelta = calcDelta(base.layouts, m.layouts)
-      lines.push(
-        `| ${m.name}: layouts | ${base.layouts} | ${m.layouts} | ${formatDeltaCell(layoutDelta)} |`
-      )
-
-      const taskDelta = calcDelta(base.taskDurationMs, m.taskDurationMs)
-      lines.push(
-        `| ${m.name}: task duration | ${base.taskDurationMs.toFixed(0)}ms | ${m.taskDurationMs.toFixed(0)}ms | ${formatDeltaCell(taskDelta)} |`
-      )
-    }
-  } else {
-    lines.push(
-      'No baseline found — showing absolute values.\n',
-      '| Metric | Value |',
-      '|--------|-------|'
-    )
-    for (const m of current.measurements) {
-      lines.push(`| ${m.name}: style recalcs | ${m.styleRecalcs} |`)
-      lines.push(`| ${m.name}: layouts | ${m.layouts} |`)
-      lines.push(
-        `| ${m.name}: task duration | ${m.taskDurationMs.toFixed(0)}ms |`
-      )
-      lines.push(`| ${m.name}: heap delta | ${formatBytes(m.heapDeltaBytes)} |`)
-    }
-  }
-
-  lines.push('\n<details><summary>Raw data</summary>\n')
-  lines.push('```json')
-  lines.push(JSON.stringify(current, null, 2))
-  lines.push('```')
-  lines.push('\n</details>')
-
-  process.stdout.write(lines.join('\n') + '\n')
-}
-
-main()

scripts/zipdist.js

@@ -1,14 +1,9 @@
 import zipdir from 'zip-dir'
 
-const sourceDir = process.argv[2] || './dist'
-const outputPath = process.argv[3] || './dist.zip'
-
-zipdir(sourceDir, { saveTo: outputPath }, function (err, buffer) {
+zipdir('./dist', { saveTo: './dist.zip' }, function (err, buffer) {
   if (err) {
-    console.error(`Error zipping "${sourceDir}" directory:`, err)
+    console.error('Error zipping "dist" directory:', err)
   } else {
-    process.stdout.write(
-      `Successfully zipped "${sourceDir}" directory to "${outputPath}".\n`
-    )
+    console.log('Successfully zipped "dist" directory.')
   }
 })

src/App.vue

@@ -51,6 +51,7 @@ onMounted(() => {
   // See: https://vite.dev/guide/build#load-error-handling
   window.addEventListener('vite:preloadError', (event) => {
     event.preventDefault()
+    // eslint-disable-next-line no-undef
     if (__DISTRIBUTION__ === 'cloud') {
       captureException(event.payload, {
         tags: { error_type: 'vite_preload_error' }

src/base/common/downloadUtil.test.ts

@@ -2,28 +2,17 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import {
   downloadFile,
-  extractFilenameFromContentDisposition,
-  openFileInNewTab
+  extractFilenameFromContentDisposition
 } from '@/base/common/downloadUtil'
 
-const { mockIsCloud } = vi.hoisted(() => ({
-  mockIsCloud: { value: false }
-}))
+let mockIsCloud = false
 
 vi.mock('@/platform/distribution/types', () => ({
   get isCloud() {
-    return mockIsCloud.value
+    return mockIsCloud
   }
 }))
 
-vi.mock('@/i18n', () => ({
-  t: (key: string) => key
-}))
-
-vi.mock('@/platform/updates/common/toastStore', () => ({
-  useToastStore: vi.fn(() => ({ addAlert: vi.fn() }))
-}))
-
 // Global stubs
 const createObjectURLSpy = vi
   .spyOn(URL, 'createObjectURL')
@@ -37,7 +26,7 @@ describe('downloadUtil', () => {
   let fetchMock: ReturnType<typeof vi.fn>
 
   beforeEach(() => {
-    mockIsCloud.value = false
+    mockIsCloud = false
     fetchMock = vi.fn()
     vi.stubGlobal('fetch', fetchMock)
     createObjectURLSpy.mockClear().mockReturnValue('blob:mock-url')
@@ -165,7 +154,7 @@ describe('downloadUtil', () => {
     })
 
     it('streams downloads via blob when running in cloud', async () => {
-      mockIsCloud.value = true
+      mockIsCloud = true
       const testUrl = 'https://storage.googleapis.com/bucket/file.bin'
       const blob = new Blob(['test'])
       const blobFn = vi.fn().mockResolvedValue(blob)
@@ -184,7 +173,6 @@ describe('downloadUtil', () => {
       expect(fetchMock).toHaveBeenCalledWith(testUrl)
       const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
       await fetchPromise
-      await Promise.resolve() // let fetchAsBlob return
       const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
       await blobPromise
       await Promise.resolve()
@@ -195,7 +183,7 @@ describe('downloadUtil', () => {
     })
 
     it('logs an error when cloud fetch fails', async () => {
-      mockIsCloud.value = true
+      mockIsCloud = true
       const testUrl = 'https://storage.googleapis.com/bucket/missing.bin'
       const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
       fetchMock.mockResolvedValue({
@@ -209,15 +197,14 @@ describe('downloadUtil', () => {
       expect(fetchMock).toHaveBeenCalledWith(testUrl)
       const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
       await fetchPromise
-      await Promise.resolve() // let fetchAsBlob throw
-      await Promise.resolve() // let .catch handler run
+      await Promise.resolve()
       expect(consoleSpy).toHaveBeenCalled()
       expect(createObjectURLSpy).not.toHaveBeenCalled()
       consoleSpy.mockRestore()
     })
 
     it('uses filename from Content-Disposition header in cloud mode', async () => {
-      mockIsCloud.value = true
+      mockIsCloud = true
       const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
       const blob = new Blob(['test'])
       const blobFn = vi.fn().mockResolvedValue(blob)
@@ -236,7 +223,6 @@ describe('downloadUtil', () => {
       expect(fetchMock).toHaveBeenCalledWith(testUrl)
       const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
       await fetchPromise
-      await Promise.resolve() // let fetchAsBlob return
       const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
       await blobPromise
       await Promise.resolve()
@@ -245,7 +231,7 @@ describe('downloadUtil', () => {
     })
 
     it('uses RFC 5987 filename from Content-Disposition header', async () => {
-      mockIsCloud.value = true
+      mockIsCloud = true
       const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
       const blob = new Blob(['test'])
       const blobFn = vi.fn().mockResolvedValue(blob)
@@ -267,7 +253,6 @@ describe('downloadUtil', () => {
 
       const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
       await fetchPromise
-      await Promise.resolve() // let fetchAsBlob return
       const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
       await blobPromise
       await Promise.resolve()
@@ -275,7 +260,7 @@ describe('downloadUtil', () => {
     })
 
     it('falls back to provided filename when Content-Disposition is missing', async () => {
-      mockIsCloud.value = true
+      mockIsCloud = true
       const testUrl = 'https://storage.googleapis.com/bucket/abc123.png'
       const blob = new Blob(['test'])
       const blobFn = vi.fn().mockResolvedValue(blob)
@@ -293,7 +278,6 @@ describe('downloadUtil', () => {
 
       const fetchPromise = fetchMock.mock.results[0].value as Promise<Response>
       await fetchPromise
-      await Promise.resolve() // let fetchAsBlob return
       const blobPromise = blobFn.mock.results[0].value as Promise<Blob>
       await blobPromise
       await Promise.resolve()
@@ -301,99 +285,6 @@ describe('downloadUtil', () => {
     })
   })
 
-  describe('openFileInNewTab', () => {
-    let windowOpenSpy: ReturnType<typeof vi.spyOn>
-
-    beforeEach(() => {
-      vi.useFakeTimers()
-      windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
-    })
-
-    afterEach(() => {
-      vi.useRealTimers()
-    })
-
-    it('opens URL directly when not in cloud mode', async () => {
-      mockIsCloud.value = false
-      const testUrl = 'https://example.com/image.png'
-
-      await openFileInNewTab(testUrl)
-
-      expect(windowOpenSpy).toHaveBeenCalledWith(testUrl, '_blank')
-      expect(fetchMock).not.toHaveBeenCalled()
-    })
-
-    it('opens blank tab synchronously then navigates to blob URL in cloud mode', async () => {
-      mockIsCloud.value = true
-      const testUrl = 'https://storage.googleapis.com/bucket/image.png'
-      const blob = new Blob(['test'], { type: 'image/png' })
-      const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: true,
-        blob: vi.fn().mockResolvedValue(blob)
-      } as unknown as Response)
-
-      await openFileInNewTab(testUrl)
-
-      expect(windowOpenSpy).toHaveBeenCalledWith('', '_blank')
-      expect(fetchMock).toHaveBeenCalledWith(testUrl)
-      expect(createObjectURLSpy).toHaveBeenCalledWith(blob)
-      expect(mockTab.location.href).toBe('blob:mock-url')
-    })
-
-    it('revokes blob URL after timeout in cloud mode', async () => {
-      mockIsCloud.value = true
-      const blob = new Blob(['test'], { type: 'image/png' })
-      const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: true,
-        blob: vi.fn().mockResolvedValue(blob)
-      } as unknown as Response)
-
-      await openFileInNewTab('https://example.com/image.png')
-
-      expect(revokeObjectURLSpy).not.toHaveBeenCalled()
-      vi.advanceTimersByTime(60_000)
-      expect(revokeObjectURLSpy).toHaveBeenCalledWith('blob:mock-url')
-    })
-
-    it('closes blank tab and logs error when cloud fetch fails', async () => {
-      mockIsCloud.value = true
-      const testUrl = 'https://storage.googleapis.com/bucket/missing.png'
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
-      const mockTab = { location: { href: '' }, closed: false, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: false,
-        status: 404
-      } as unknown as Response)
-
-      await openFileInNewTab(testUrl)
-
-      expect(mockTab.close).toHaveBeenCalled()
-      expect(consoleSpy).toHaveBeenCalled()
-      consoleSpy.mockRestore()
-    })
-
-    it('revokes blob URL immediately if tab was closed by user', async () => {
-      mockIsCloud.value = true
-      const blob = new Blob(['test'], { type: 'image/png' })
-      const mockTab = { location: { href: '' }, closed: true, close: vi.fn() }
-      windowOpenSpy.mockReturnValue(mockTab as unknown as Window)
-      fetchMock.mockResolvedValue({
-        ok: true,
-        blob: vi.fn().mockResolvedValue(blob)
-      } as unknown as Response)
-
-      await openFileInNewTab('https://example.com/image.png')
-
-      expect(revokeObjectURLSpy).toHaveBeenCalledWith('blob:mock-url')
-      expect(mockTab.location.href).toBe('')
-    })
-  })
-
   describe('extractFilenameFromContentDisposition', () => {
     it('returns null for null header', () => {
       expect(extractFilenameFromContentDisposition(null)).toBeNull()

src/base/common/downloadUtil.ts

@@ -1,9 +1,7 @@
 /**
  * Utility functions for downloading files
  */
-import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
-import { useToastStore } from '@/platform/updates/common/toastStore'
 
 // Constants
 const DEFAULT_DOWNLOAD_FILENAME = 'download.png'
@@ -114,23 +112,14 @@ export function extractFilenameFromContentDisposition(
   return null
 }
 
-/**
- * Fetch a URL and return its body as a Blob.
- * Shared by download and open-in-new-tab cloud paths.
- */
-async function fetchAsBlob(url: string): Promise<Response> {
-  const response = await fetch(url)
-  if (!response.ok) {
-    throw new Error(`Failed to fetch ${url}: ${response.status}`)
-  }
-  return response
-}
-
-async function downloadViaBlobFetch(
+const downloadViaBlobFetch = async (
   href: string,
   fallbackFilename: string
-): Promise<void> {
-  const response = await fetchAsBlob(href)
+): Promise<void> => {
+  const response = await fetch(href)
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${href}: ${response.status}`)
+  }
 
   // Try to get filename from Content-Disposition header (set by backend)
   const contentDisposition = response.headers.get('Content-Disposition')
@@ -140,44 +129,3 @@ async function downloadViaBlobFetch(
   const blob = await response.blob()
   downloadBlob(headerFilename ?? fallbackFilename, blob)
 }
-
-/**
- * Open a file URL in a new browser tab.
- * On cloud, fetches the resource as a blob first to avoid GCS redirects
- * that would trigger an auto-download instead of displaying the file.
- *
- * Opens the tab synchronously to preserve the user-gesture context
- * (browsers block window.open after an await), then navigates it to
- * the blob URL once the fetch completes.
- */
-export async function openFileInNewTab(url: string): Promise<void> {
-  if (!isCloud) {
-    window.open(url, '_blank')
-    return
-  }
-
-  // Open immediately to preserve user-gesture activation.
-  const tab = window.open('', '_blank')
-
-  try {
-    const response = await fetchAsBlob(url)
-    const blob = await response.blob()
-    const blobUrl = URL.createObjectURL(blob)
-
-    if (tab && !tab.closed) {
-      tab.location.href = blobUrl
-      // Revoke after the tab has had time to load the blob.
-      setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000)
-    } else {
-      URL.revokeObjectURL(blobUrl)
-    }
-  } catch (error) {
-    tab?.close()
-    console.error('Failed to open image:', error)
-    useToastStore().addAlert(
-      t('toastMessages.errorOpenImage', {
-        error: error instanceof Error ? error.message : String(error)
-      })
-    )
-  }
-}

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -18,14 +18,14 @@
       <Splitter
         :key="splitterRefreshKey"
         class="bg-transparent pointer-events-none border-none flex-1 overflow-hidden"
-        :state-key="isSelectMode ? 'builder-splitter' : sidebarStateKey"
+        :state-key="sidebarStateKey"
         state-storage="local"
         @resizestart="onResizestart"
       >
         <!-- First panel: sidebar when left, properties when right -->
         <SplitterPanel
           v-if="
-            !focusMode && (sidebarLocation === 'left' || showOffsideSplitter)
+            !focusMode && (sidebarLocation === 'left' || rightSidePanelVisible)
           "
           :class="
             sidebarLocation === 'left'
@@ -35,10 +35,8 @@
                 )
               : 'bg-comfy-menu-bg pointer-events-auto'
           "
-          :min-size="
-            sidebarLocation === 'left' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
-          "
-          :size="SIDE_PANEL_SIZE"
+          :min-size="sidebarLocation === 'left' ? 10 : 15"
+          :size="20"
           :style="firstPanelStyle"
           :role="sidebarLocation === 'left' ? 'complementary' : undefined"
           :aria-label="
@@ -56,7 +54,7 @@
         </SplitterPanel>
 
         <!-- Main panel (always present) -->
-        <SplitterPanel :size="CENTER_PANEL_SIZE" class="flex flex-col">
+        <SplitterPanel :size="80" class="flex flex-col">
           <slot name="topmenu" :sidebar-panel-visible />
 
           <Splitter
@@ -87,7 +85,7 @@
         <!-- Last panel: properties when left, sidebar when right -->
         <SplitterPanel
           v-if="
-            !focusMode && (sidebarLocation === 'right' || showOffsideSplitter)
+            !focusMode && (sidebarLocation === 'right' || rightSidePanelVisible)
           "
           :class="
             sidebarLocation === 'right'
@@ -97,10 +95,8 @@
                 )
               : 'bg-comfy-menu-bg pointer-events-auto'
           "
-          :min-size="
-            sidebarLocation === 'right' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
-          "
-          :size="SIDE_PANEL_SIZE"
+          :min-size="sidebarLocation === 'right' ? 10 : 15"
+          :size="20"
           :style="lastPanelStyle"
           :role="sidebarLocation === 'right' ? 'complementary' : undefined"
           :aria-label="
@@ -127,13 +123,6 @@ import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useAppMode } from '@/composables/useAppMode'
-import {
-  BUILDER_MIN_SIZE,
-  CENTER_PANEL_SIZE,
-  SIDEBAR_MIN_SIZE,
-  SIDE_PANEL_SIZE
-} from '@/constants/splitterConstants'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
@@ -155,13 +144,9 @@ const unifiedWidth = computed(() =>
 
 const { focusMode } = storeToRefs(workspaceStore)
 
-const { isSelectMode } = useAppMode()
 const { activeSidebarTabId, activeSidebarTab } = storeToRefs(sidebarTabStore)
 const { bottomPanelVisible } = storeToRefs(useBottomPanelStore())
 const { isOpen: rightSidePanelVisible } = storeToRefs(rightSidePanelStore)
-const showOffsideSplitter = computed(
-  () => rightSidePanelVisible.value || isSelectMode.value
-)
 
 const sidebarPanelVisible = computed(() => activeSidebarTab.value !== null)
 
@@ -184,7 +169,7 @@ function onResizestart({ originalEvent: event }: SplitterResizeStartEvent) {
  * to recalculate the width and panel order
  */
 const splitterRefreshKey = computed(() => {
-  return `main-splitter${rightSidePanelVisible.value ? '-with-right-panel' : ''}${isSelectMode.value ? '-builder' : ''}-${sidebarLocation.value}`
+  return `main-splitter${rightSidePanelVisible.value ? '-with-right-panel' : ''}-${sidebarLocation.value}`
 })
 
 const firstPanelStyle = computed(() => {

src/components/TopMenuSection.test.ts

@@ -262,7 +262,7 @@ describe('TopMenuSection', () => {
     )
   })
 
-  it('opens the job history sidebar tab when QPO V2 is enabled', async () => {
+  it('opens the assets sidebar tab when QPO V2 is enabled', async () => {
     const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
     const settingStore = useSettingStore(pinia)
     vi.mocked(settingStore.get).mockImplementation((key) =>
@@ -273,10 +273,10 @@ describe('TopMenuSection', () => {
 
     await wrapper.find('[data-testid="queue-overlay-toggle"]').trigger('click')
 
-    expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
   })
 
-  it('toggles the job history sidebar tab when QPO V2 is enabled', async () => {
+  it('toggles the assets sidebar tab when QPO V2 is enabled', async () => {
     const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false })
     const settingStore = useSettingStore(pinia)
     vi.mocked(settingStore.get).mockImplementation((key) =>
@@ -287,7 +287,7 @@ describe('TopMenuSection', () => {
     const toggleButton = wrapper.find('[data-testid="queue-overlay-toggle"]')
 
     await toggleButton.trigger('click')
-    expect(sidebarTabStore.activeSidebarTabId).toBe('job-history')
+    expect(sidebarTabStore.activeSidebarTabId).toBe('assets')
 
     await toggleButton.trigger('click')
     expect(sidebarTabStore.activeSidebarTabId).toBe(null)

src/components/TopMenuSection.vue

@@ -56,6 +56,43 @@
               :queue-overlay-expanded="isQueueOverlayExpanded"
               @update:progress-target="updateProgressTarget"
             />
+            <Button
+              v-tooltip.bottom="queueHistoryTooltipConfig"
+              type="destructive"
+              size="md"
+              :aria-pressed="
+                isQueuePanelV2Enabled
+                  ? activeSidebarTabId === 'assets'
+                  : isQueueProgressOverlayEnabled
+                    ? isQueueOverlayExpanded
+                    : undefined
+              "
+              class="relative px-3"
+              data-testid="queue-overlay-toggle"
+              @click="toggleQueueOverlay"
+              @contextmenu.stop.prevent="showQueueContextMenu"
+            >
+              <span class="text-sm font-normal tabular-nums">
+                {{ activeJobsLabel }}
+              </span>
+              <StatusBadge
+                v-if="activeJobsCount > 0"
+                data-testid="active-jobs-indicator"
+                variant="dot"
+                class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
+              />
+              <span class="sr-only">
+                {{
+                  isQueuePanelV2Enabled
+                    ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
+                    : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
+                }}
+              </span>
+            </Button>
+            <ContextMenu
+              ref="queueContextMenu"
+              :model="queueContextMenuItems"
+            />
             <CurrentUserButton
               v-if="isLoggedIn && !isIntegratedTabBar"
               class="shrink-0"
@@ -90,15 +127,13 @@
         <div
           class="pointer-events-none absolute left-0 right-0 top-full mt-1 flex justify-end pr-1"
         >
-          <QueueInlineProgressSummary
-            :hidden="shouldHideInlineProgressSummary"
-          />
+          <QueueInlineProgressSummary :hidden="isQueueOverlayExpanded" />
         </div>
       </Teleport>
       <QueueInlineProgressSummary
         v-else-if="shouldShowInlineProgressSummary && !isActionbarFloating"
         class="pr-1"
-        :hidden="shouldHideInlineProgressSummary"
+        :hidden="isQueueOverlayExpanded"
       />
       <QueueNotificationBannerHost
         v-if="shouldShowQueueNotificationBanners"
@@ -111,11 +146,14 @@
 <script setup lang="ts">
 import { useLocalStorage } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
+import ContextMenu from 'primevue/contextmenu'
+import type { MenuItem } from 'primevue/menuitem'
 import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
 import SubgraphBreadcrumb from '@/components/breadcrumb/SubgraphBreadcrumb.vue'
+import StatusBadge from '@/components/common/StatusBadge.vue'
 import QueueInlineProgressSummary from '@/components/queue/QueueInlineProgressSummary.vue'
 import QueueNotificationBannerHost from '@/components/queue/QueueNotificationBannerHost.vue'
 import QueueProgressOverlay from '@/components/queue/QueueProgressOverlay.vue'
@@ -129,9 +167,12 @@ import { useErrorHandling } from '@/composables/useErrorHandling'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
+import { useCommandStore } from '@/stores/commandStore'
+import { useExecutionStore } from '@/stores/executionStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
-import { useQueueUIStore } from '@/stores/queueStore'
+import { useQueueStore, useQueueUIStore } from '@/stores/queueStore'
 import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isDesktop } from '@/platform/distribution/types'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
@@ -144,11 +185,17 @@ const workspaceStore = useWorkspaceStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const managerState = useManagerState()
 const { isLoggedIn } = useCurrentUser()
-const { t } = useI18n()
+const { t, n } = useI18n()
 const { toastErrorHandler } = useErrorHandling()
+const commandStore = useCommandStore()
+const queueStore = useQueueStore()
+const executionStore = useExecutionStore()
 const executionErrorStore = useExecutionErrorStore()
 const queueUIStore = useQueueUIStore()
+const sidebarTabStore = useSidebarTabStore()
+const { activeJobsCount } = storeToRefs(queueStore)
 const { isOverlayExpanded: isQueueOverlayExpanded } = storeToRefs(queueUIStore)
+const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
 const { shouldShowRedDot: shouldShowConflictRedDot } =
   useConflictAcknowledgment()
 const isTopMenuHovered = ref(false)
@@ -161,6 +208,14 @@ const isActionbarEnabled = computed(
 const isActionbarFloating = computed(
   () => isActionbarEnabled.value && !isActionbarDocked.value
 )
+const activeJobsLabel = computed(() => {
+  const count = activeJobsCount.value
+  return t(
+    'sideToolbar.queueProgressOverlay.activeJobsShort',
+    { count: n(count) },
+    count
+  )
+})
 const isIntegratedTabBar = computed(
   () => settingStore.get('Comfy.UI.TabBarLayout') === 'Integrated'
 )
@@ -186,12 +241,24 @@ const inlineProgressSummaryTarget = computed(() => {
   }
   return progressTarget.value
 })
-const shouldHideInlineProgressSummary = computed(
-  () => isQueueProgressOverlayEnabled.value && isQueueOverlayExpanded.value
+const queueHistoryTooltipConfig = computed(() =>
+  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
 )
 const customNodesManagerTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.manageExtensions'))
 )
+const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
+const queueContextMenuItems = computed<MenuItem[]>(() => [
+  {
+    label: t('sideToolbar.queueProgressOverlay.clearQueueTooltip'),
+    icon: 'icon-[lucide--list-x] text-destructive-background',
+    class: '*:text-destructive-background',
+    disabled: queueStore.pendingTasks.length === 0,
+    command: () => {
+      void handleClearQueue()
+    }
+  }
+])
 
 const shouldShowRedDot = computed((): boolean => {
   return shouldShowConflictRedDot.value
@@ -214,6 +281,27 @@ onMounted(() => {
   }
 })
 
+const toggleQueueOverlay = () => {
+  if (isQueuePanelV2Enabled.value) {
+    sidebarTabStore.toggleSidebarTab('assets')
+    return
+  }
+  commandStore.execute('Comfy.Queue.ToggleOverlay')
+}
+
+const showQueueContextMenu = (event: MouseEvent) => {
+  queueContextMenu.value?.show(event)
+}
+
+const handleClearQueue = async () => {
+  const pendingJobIds = queueStore.pendingTasks
+    .map((task) => task.jobId)
+    .filter((id): id is string => typeof id === 'string' && id.length > 0)
+
+  await commandStore.execute('Comfy.ClearPendingTasks')
+  executionStore.clearInitializationByJobIds(pendingJobIds)
+}
+
 const openCustomNodeManager = async () => {
   try {
     await managerState.openManager({

src/components/actionbar/ComfyActionbar.vue

@@ -42,44 +42,12 @@
         >
           <i class="icon-[lucide--x] size-4" />
         </Button>
-        <Button
-          v-tooltip.bottom="queueHistoryTooltipConfig"
-          variant="secondary"
-          size="md"
-          :aria-pressed="
-            isQueuePanelV2Enabled
-              ? activeSidebarTabId === 'job-history'
-              : queueOverlayExpanded
-          "
-          class="relative px-3"
-          data-testid="queue-overlay-toggle"
-          @click="toggleQueueOverlay"
-          @contextmenu.stop.prevent="showQueueContextMenu"
-        >
-          <span class="text-sm font-normal tabular-nums">
-            {{ activeJobsLabel }}
-          </span>
-          <StatusBadge
-            v-if="activeJobsCount > 0"
-            data-testid="active-jobs-indicator"
-            variant="dot"
-            class="pointer-events-none absolute -top-0.5 -right-0.5 animate-pulse"
-          />
-          <span class="sr-only">
-            {{
-              isQueuePanelV2Enabled
-                ? t('sideToolbar.queueProgressOverlay.viewJobHistory')
-                : t('sideToolbar.queueProgressOverlay.expandCollapsedQueue')
-            }}
-          </span>
-        </Button>
-        <ContextMenu ref="queueContextMenu" :model="queueContextMenuItems" />
       </div>
     </Panel>
 
     <Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
       <QueueInlineProgress
-        :hidden="shouldHideInlineProgress"
+        :hidden="queueOverlayExpanded"
         :radius-class="cn(isDocked ? 'rounded-[7px]' : 'rounded-[5px]')"
         data-testid="queue-inline-progress"
       />
@@ -97,14 +65,11 @@ import {
 } from '@vueuse/core'
 import { clamp } from 'es-toolkit/compat'
 import { storeToRefs } from 'pinia'
-import ContextMenu from 'primevue/contextmenu'
-import type { MenuItem } from 'primevue/menuitem'
 import Panel from 'primevue/panel'
 import { computed, nextTick, ref, watch } from 'vue'
 import type { ComponentPublicInstance } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import StatusBadge from '@/components/common/StatusBadge.vue'
 import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
@@ -112,8 +77,6 @@ import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
-import { useQueueStore } from '@/stores/queueStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { cn } from '@/utils/tailwindUtil'
 
 import ComfyRunButton from './ComfyRunButton'
@@ -129,13 +92,8 @@ const emit = defineEmits<{
 
 const settingsStore = useSettingStore()
 const commandStore = useCommandStore()
-const executionStore = useExecutionStore()
-const queueStore = useQueueStore()
-const sidebarTabStore = useSidebarTabStore()
-const { t, n } = useI18n()
-const { isIdle: isExecutionIdle } = storeToRefs(executionStore)
-const { activeJobsCount } = storeToRefs(queueStore)
-const { activeSidebarTabId } = storeToRefs(sidebarTabStore)
+const { t } = useI18n()
+const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
 
 const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
 const visible = computed(() => position.value !== 'Disabled')
@@ -329,9 +287,6 @@ const inlineProgressTarget = computed(() => {
   if (isDocked.value) return topMenuContainer ?? null
   return panelElement.value
 })
-const shouldHideInlineProgress = computed(
-  () => !isQueuePanelV2Enabled.value && queueOverlayExpanded
-)
 watch(
   panelElement,
   (target) => {
@@ -360,52 +315,11 @@ watch(isDragging, (dragging) => {
 const cancelJobTooltipConfig = computed(() =>
   buildTooltipConfig(t('menu.interrupt'))
 )
-const queueHistoryTooltipConfig = computed(() =>
-  buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory'))
-)
-const activeJobsLabel = computed(() => {
-  const count = activeJobsCount.value
-  return t(
-    'sideToolbar.queueProgressOverlay.activeJobsShort',
-    { count: n(count) },
-    count
-  )
-})
-const queueContextMenu = ref<InstanceType<typeof ContextMenu> | null>(null)
-const queueContextMenuItems = computed<MenuItem[]>(() => [
-  {
-    label: t('sideToolbar.queueProgressOverlay.clearQueueTooltip'),
-    icon: 'icon-[lucide--list-x] text-destructive-background',
-    class: '*:text-destructive-background',
-    disabled: queueStore.pendingTasks.length === 0,
-    command: () => {
-      void handleClearQueue()
-    }
-  }
-])
 
 const cancelCurrentJob = async () => {
   if (isExecutionIdle.value) return
   await commandStore.execute('Comfy.Interrupt')
 }
-const toggleQueueOverlay = () => {
-  if (isQueuePanelV2Enabled.value) {
-    sidebarTabStore.toggleSidebarTab('job-history')
-    return
-  }
-  commandStore.execute('Comfy.Queue.ToggleOverlay')
-}
-const showQueueContextMenu = (event: MouseEvent) => {
-  queueContextMenu.value?.show(event)
-}
-const handleClearQueue = async () => {
-  const pendingJobIds = queueStore.pendingTasks
-    .map((task) => task.jobId)
-    .filter((id): id is string => typeof id === 'string' && id.length > 0)
-
-  await commandStore.execute('Comfy.ClearPendingTasks')
-  executionStore.clearInitializationByJobIds(pendingJobIds)
-}
 
 const actionbarClass = computed(() =>
   cn(

src/components/appMode/AppModeToolbar.vue

@@ -8,12 +8,12 @@ import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemp
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { cn } from '@/utils/tailwindUtil'
-import { useAppMode } from '@/composables/useAppMode'
+import { useAppModeStore } from '@/stores/appModeStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const workspaceStore = useWorkspaceStore()
-const { enableAppBuilder, setMode } = useAppMode()
+const appModeStore = useAppModeStore()
 const tooltipOptions = { showDelay: 300, hideDelay: 300 }
 
 const isAssetsActive = computed(
@@ -24,7 +24,7 @@ const isWorkflowsActive = computed(
 )
 
 function enterBuilderMode() {
-  setMode('builder:select')
+  appModeStore.setMode('builder:select')
 }
 
 function openAssets() {
@@ -61,7 +61,7 @@ function openTemplates() {
     </WorkflowActionsDropdown>
 
     <Button
-      v-if="enableAppBuilder"
+      v-if="appModeStore.enableAppBuilder"
       v-tooltip.right="{
         value: t('linearMode.appModeToolbar.appBuilder'),
         ...tooltipOptions

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

@@ -103,12 +103,13 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+@reference '../../../../assets/css/style.css';
+
 :deep(.p-terminal) .xterm {
-  overflow: hidden;
+  @apply overflow-hidden;
 }
 
 :deep(.p-terminal) .xterm-screen {
-  overflow: hidden;
-  background-color: var(--color-neutral-900);
+  @apply bg-neutral-900 overflow-hidden;
 }
 </style>

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -195,6 +195,8 @@ onUpdated(() => {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 .subgraph-breadcrumb:not(:empty) {
   flex: auto;
   flex-shrink: 10000;
@@ -203,7 +205,7 @@ onUpdated(() => {
 
 .subgraph-breadcrumb,
 :deep(.p-breadcrumb) {
-  overflow: hidden;
+  @apply overflow-hidden;
 }
 
 :deep(.p-breadcrumb) {
@@ -212,10 +214,7 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item) {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  height: calc(var(--spacing) * 8);
+  @apply flex items-center overflow-hidden h-8;
   min-width: calc(var(--p-breadcrumb-item-min-width) + 1rem);
   border: 1px solid transparent;
   background-color: transparent;
@@ -237,7 +236,7 @@ onUpdated(() => {
 }
 
 :deep(.p-breadcrumb-item:hover) {
-  border-radius: var(--radius-lg);
+  @apply rounded-lg;
   border-color: var(--interface-stroke);
   background-color: var(--comfy-menu-bg);
 }
@@ -271,16 +270,18 @@ onUpdated(() => {
 </style>
 
 <style>
+@reference '../../assets/css/style.css';
+
 .subgraph-breadcrumb-collapse .p-breadcrumb-list {
   .p-breadcrumb-item,
   .p-breadcrumb-separator {
-    display: none;
+    @apply hidden;
   }
 
   .p-breadcrumb-item:nth-last-child(3),
   .p-breadcrumb-separator:nth-last-child(2),
   .p-breadcrumb-item:nth-last-child(1) {
-    display: flex;
+    @apply flex;
   }
 }
 </style>

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -78,7 +78,9 @@ interface Props {
   isActive?: boolean
 }
 
-const { item, isActive = false } = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+})
 
 const nodeDefStore = useNodeDefStore()
 const hasMissingNodes = computed(() =>
@@ -101,7 +103,7 @@ const rename = async (
 ) => {
   if (newName && newName !== initialName) {
     // Synchronize the node titles with the new name
-    item.updateTitle?.(newName)
+    props.item.updateTitle?.(newName)
 
     if (workflowStore.activeSubgraph) {
       workflowStore.activeSubgraph.name = newName
@@ -125,13 +127,13 @@ const rename = async (
   }
 }
 
-const isRoot = item.key === 'root'
+const isRoot = props.item.key === 'root'
 
 const tooltipText = computed(() => {
   if (hasMissingNodes.value && isRoot) {
     return t('breadcrumbsMenu.missingNodesWarning')
   }
-  return item.label
+  return props.item.label
 })
 
 const startRename = async () => {
@@ -143,7 +145,7 @@ const startRename = async () => {
   }
 
   isEditing.value = true
-  itemLabel.value = item.label as string
+  itemLabel.value = props.item.label as string
   void nextTick(() => {
     if (itemInputRef.value?.$el) {
       itemInputRef.value.$el.focus()
@@ -163,12 +165,12 @@ const handleClick = (event: MouseEvent) => {
   }
 
   if (event.detail === 1) {
-    if (isActive) {
+    if (props.isActive) {
       menu.value?.toggle(event)
     } else {
-      item.command?.({ item: item, originalEvent: event })
+      props.item.command?.({ item: props.item, originalEvent: event })
     }
-  } else if (isActive && event.detail === 2) {
+  } else if (props.isActive && event.detail === 2) {
     menu.value?.hide()
     event.stopPropagation()
     event.preventDefault()
@@ -178,7 +180,7 @@ const handleClick = (event: MouseEvent) => {
 
 const inputBlur = async (doRename: boolean) => {
   if (doRename) {
-    await rename(itemLabel.value, item.label as string)
+    await rename(itemLabel.value, props.item.label as string)
   }
 
   isEditing.value = false
@@ -186,19 +188,19 @@ const inputBlur = async (doRename: boolean) => {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 .p-breadcrumb-item-link,
 .p-breadcrumb-item-icon {
-  user-select: none;
+  @apply select-none;
 }
 
 .p-breadcrumb-item-link {
-  overflow: hidden;
+  @apply overflow-hidden;
 }
 
 .p-breadcrumb-item-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  @apply whitespace-nowrap text-ellipsis overflow-hidden;
 }
 
 .active-breadcrumb-item {

src/components/builder/AppBuilder.vue

@@ -1,374 +0,0 @@
-<script setup lang="ts">
-import { remove } from 'es-toolkit'
-import { computed, provide, ref, toValue, watchEffect } from 'vue'
-import type { MaybeRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import DraggableList from '@/components/common/DraggableList.vue'
-import IoItem from '@/components/builder/IoItem.vue'
-import PropertiesAccordionItem from '@/components/rightSidePanel/layout/PropertiesAccordionItem.vue'
-import WidgetItem from '@/components/rightSidePanel/parameters/WidgetItem.vue'
-import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
-import type { INodeInputSlot } from '@/lib/litegraph/src/interfaces'
-import type { LGraphCanvas } from '@/lib/litegraph/src/LGraphCanvas'
-import { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
-import { BaseWidget } from '@/lib/litegraph/src/widgets/BaseWidget'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
-import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
-import TransformPane from '@/renderer/core/layout/transform/TransformPane.vue'
-import { app } from '@/scripts/app'
-import { DOMWidgetImpl } from '@/scripts/domWidget'
-import { useDialogService } from '@/services/dialogService'
-import { useAppMode } from '@/composables/useAppMode'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { cn } from '@/utils/tailwindUtil'
-import { HideLayoutFieldKey } from '@/types/widgetTypes'
-
-type BoundStyle = { top: string; left: string; width: string; height: string }
-
-const appModeStore = useAppModeStore()
-const canvasInteractions = useCanvasInteractions()
-const canvasStore = useCanvasStore()
-const settingStore = useSettingStore()
-const workflowStore = useWorkflowStore()
-const { t } = useI18n()
-const canvas: LGraphCanvas = canvasStore.getCanvas()
-
-const { mode, isArrangeMode } = useAppMode()
-const hoveringSelectable = ref(false)
-
-provide(HideLayoutFieldKey, true)
-
-workflowStore.activeWorkflow?.changeTracker?.reset()
-
-// Prune stale entries whose node/widget no longer exists, so the
-// DraggableList model always matches the rendered items.
-watchEffect(() => {
-  const valid = appModeStore.selectedInputs.filter(([nodeId, widgetName]) => {
-    const node = app.rootGraph.getNodeById(nodeId)
-    return node?.widgets?.some((w) => w.name === widgetName)
-  })
-  if (valid.length < appModeStore.selectedInputs.length) {
-    appModeStore.selectedInputs = valid
-  }
-})
-
-const arrangeInputs = computed(() =>
-  appModeStore.selectedInputs
-    .map(([nodeId, widgetName]) => {
-      const node = app.rootGraph.getNodeById(nodeId)
-      const widget = node?.widgets?.find((w) => w.name === widgetName)
-      if (!node || !widget) return null
-      return { nodeId, widgetName, node, widget }
-    })
-    .filter((item): item is NonNullable<typeof item> => item !== null)
-)
-
-const inputsWithState = computed(() =>
-  appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
-    const node = app.rootGraph.getNodeById(nodeId)
-    const widget = node?.widgets?.find((w) => w.name === widgetName)
-    if (!node || !widget) return { nodeId, widgetName }
-
-    const input = node.inputs.find((i) => i.widget?.name === widget.name)
-    const rename = input && (() => renameWidget(widget, input))
-
-    return {
-      nodeId,
-      widgetName,
-      label: widget.label,
-      subLabel: node.title,
-      rename
-    }
-  })
-)
-const outputsWithState = computed<[NodeId, string][]>(() =>
-  appModeStore.selectedOutputs.map((nodeId) => [
-    nodeId,
-    app.rootGraph.getNodeById(nodeId)?.title ?? String(nodeId)
-  ])
-)
-
-async function renameWidget(widget: IBaseWidget, input: INodeInputSlot) {
-  const newLabel = await useDialogService().prompt({
-    title: t('g.rename'),
-    message: t('g.enterNewNamePrompt'),
-    defaultValue: widget.label,
-    placeholder: widget.name
-  })
-  if (newLabel === null) return
-  widget.label = newLabel || undefined
-  input.label = newLabel || undefined
-  widget.callback?.(widget.value)
-  useCanvasStore().canvas?.setDirty(true)
-}
-
-function getHovered(
-  e: MouseEvent
-): undefined | [LGraphNode, undefined] | [LGraphNode, IBaseWidget] {
-  const { graph } = canvas
-  if (!canvas || !graph) return
-
-  if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
-  if (!e) return
-
-  canvas.adjustMouseEvent(e)
-  const node = graph.getNodeOnPos(e.canvasX, e.canvasY)
-  if (!node) return
-
-  const widget = node.getWidgetOnPos(e.canvasX, e.canvasY, false)
-
-  if (widget || node.constructor.nodeData?.output_node) return [node, widget]
-}
-
-function getBounding(nodeId: NodeId, widgetName?: string) {
-  if (settingStore.get('Comfy.VueNodes.Enabled')) return undefined
-  const node = app.rootGraph.getNodeById(nodeId)
-  if (!node) return
-
-  const titleOffset =
-    node.title_mode === TitleMode.NORMAL_TITLE ? LiteGraph.NODE_TITLE_HEIGHT : 0
-
-  if (!widgetName)
-    return {
-      width: `${node.size[0]}px`,
-      height: `${node.size[1] + titleOffset}px`,
-      left: `${node.pos[0]}px`,
-      top: `${node.pos[1] - titleOffset}px`
-    }
-  const widget = node.widgets?.find((w) => w.name === widgetName)
-  if (!widget) return
-
-  const margin = widget instanceof DOMWidgetImpl ? widget.margin : undefined
-  const marginX = margin ?? BaseWidget.margin
-  const height =
-    (widget.computedHeight !== undefined
-      ? widget.computedHeight - 4
-      : LiteGraph.NODE_WIDGET_HEIGHT) - (margin ? 2 * margin - 4 : 0)
-  return {
-    width: `${node.size[0] - marginX * 2}px`,
-    height: `${height}px`,
-    left: `${node.pos[0] + marginX}px`,
-    top: `${node.pos[1] + widget.y + (margin ?? 0)}px`
-  }
-}
-
-function handleDown(e: MouseEvent) {
-  const [node] = getHovered(e) ?? []
-  if (!node || e.button > 0) canvasInteractions.forwardEventToCanvas(e)
-}
-function handleClick(e: MouseEvent) {
-  const [node, widget] = getHovered(e) ?? []
-  if (!node) return canvasInteractions.forwardEventToCanvas(e)
-
-  if (!widget) {
-    if (!node.constructor.nodeData?.output_node)
-      return canvasInteractions.forwardEventToCanvas(e)
-    const index = appModeStore.selectedOutputs.findIndex((id) => id === node.id)
-    if (index === -1) appModeStore.selectedOutputs.push(node.id)
-    else appModeStore.selectedOutputs.splice(index, 1)
-    return
-  }
-
-  const index = appModeStore.selectedInputs.findIndex(
-    ([nodeId, widgetName]) => node.id === nodeId && widget.name === widgetName
-  )
-  if (index === -1) appModeStore.selectedInputs.push([node.id, widget.name])
-  else appModeStore.selectedInputs.splice(index, 1)
-}
-
-function nodeToDisplayTuple(
-  n: LGraphNode
-): [NodeId, MaybeRef<BoundStyle> | undefined, boolean] {
-  return [
-    n.id,
-    getBounding(n.id),
-    appModeStore.selectedOutputs.some((id) => n.id === id)
-  ]
-}
-
-const renderedOutputs = computed(() => {
-  void appModeStore.selectedOutputs.length
-  return canvas
-    .graph!.nodes.filter((n) => n.constructor.nodeData?.output_node)
-    .map(nodeToDisplayTuple)
-})
-const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
-  () =>
-    appModeStore.selectedInputs.map(([nodeId, widgetName]) => [
-      `${nodeId}: ${widgetName}`,
-      getBounding(nodeId, widgetName)
-    ])
-)
-</script>
-<template>
-  <div class="flex font-bold p-2 border-border-subtle border-b items-center">
-    {{
-      isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
-    }}
-  </div>
-  <DraggableList
-    v-if="isArrangeMode"
-    v-slot="{ dragClass }"
-    v-model="appModeStore.selectedInputs"
-  >
-    <div
-      v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
-      :key="`${nodeId}: ${widgetName}`"
-      :class="cn(dragClass, 'p-2 my-2 pointer-events-auto')"
-      :aria-label="`${widget.label ?? widgetName} — ${node.title}`"
-    >
-      <div class="pointer-events-none" inert>
-        <WidgetItem
-          :widget="widget"
-          :node="node"
-          show-node-name
-          hidden-widget-actions
-        />
-      </div>
-    </div>
-  </DraggableList>
-  <PropertiesAccordionItem
-    v-else
-    :label="t('nodeHelpPage.inputs')"
-    enable-empty-state
-    :disabled="!appModeStore.selectedInputs.length"
-    class="border-border-subtle border-b"
-    :tooltip="`${t('linearMode.builder.inputsDesc')}\n${t('linearMode.builder.inputsExample')}`"
-  >
-    <template #label>
-      <div class="flex gap-3">
-        {{ t('nodeHelpPage.inputs') }}
-        <i class="bg-muted-foreground icon-[lucide--circle-alert]" />
-      </div>
-    </template>
-    <template #empty>
-      <div
-        class="w-full p-4 pt-2 text-muted-foreground"
-        v-text="t('linearMode.builder.promptAddInputs')"
-      />
-    </template>
-    <div
-      class="w-full p-4 pt-2 text-muted-foreground"
-      v-text="t('linearMode.builder.promptAddInputs')"
-    />
-    <DraggableList v-slot="{ dragClass }" v-model="appModeStore.selectedInputs">
-      <IoItem
-        v-for="{
-          nodeId,
-          widgetName,
-          label,
-          subLabel,
-          rename
-        } in inputsWithState"
-        :key="`${nodeId}: ${widgetName}`"
-        :class="cn(dragClass, 'bg-primary-background/30 p-2 my-2 rounded-lg')"
-        :title="label ?? widgetName"
-        :sub-title="subLabel"
-        :rename
-        :remove="
-          () =>
-            remove(
-              appModeStore.selectedInputs,
-              ([id, name]) => nodeId === id && widgetName === name
-            )
-        "
-      />
-    </DraggableList>
-  </PropertiesAccordionItem>
-  <PropertiesAccordionItem
-    v-if="!isArrangeMode"
-    :label="t('nodeHelpPage.outputs')"
-    enable-empty-state
-    :disabled="!appModeStore.selectedOutputs.length"
-    :tooltip="`${t('linearMode.builder.outputsDesc')}\n${t('linearMode.builder.outputsExample')}`"
-  >
-    <template #label>
-      <div class="flex gap-3">
-        {{ t('nodeHelpPage.outputs') }}
-        <i class="bg-muted-foreground icon-[lucide--circle-alert]" />
-      </div>
-    </template>
-    <template #empty>
-      <div
-        class="w-full p-4 pt-2 text-muted-foreground"
-        v-text="t('linearMode.builder.promptAddOutputs')"
-      />
-    </template>
-    <div
-      class="w-full p-4 pt-2 text-muted-foreground"
-      v-text="t('linearMode.builder.promptAddOutputs')"
-    />
-    <DraggableList
-      v-slot="{ dragClass }"
-      v-model="appModeStore.selectedOutputs"
-    >
-      <IoItem
-        v-for="([key, title], index) in outputsWithState"
-        :key
-        :class="
-          cn(
-            dragClass,
-            'bg-warning-background/40 p-2 my-2 rounded-lg',
-            index === 0 && 'ring-warning-background ring-2'
-          )
-        "
-        :title
-        :sub-title="String(key)"
-        :remove="() => remove(appModeStore.selectedOutputs, (k) => k === key)"
-      />
-    </DraggableList>
-  </PropertiesAccordionItem>
-
-  <Teleport v-if="mode === 'builder:select'" to="body">
-    <div
-      :class="
-        cn(
-          'absolute w-full h-full pointer-events-auto',
-          hoveringSelectable ? 'cursor-pointer' : 'cursor-grab'
-        )
-      "
-      @pointerdown="handleDown"
-      @pointermove="hoveringSelectable = !!getHovered($event)"
-      @click="handleClick"
-      @wheel="canvasInteractions.forwardEventToCanvas"
-    >
-      <TransformPane :canvas="canvasStore.getCanvas()">
-        <div
-          v-for="[key, style] in renderedInputs"
-          :key
-          :style="toValue(style)"
-          class="fixed bg-primary-background/30 rounded-lg"
-        />
-        <div
-          v-for="[key, style, isSelected] in renderedOutputs"
-          :key
-          :style="toValue(style)"
-          :class="
-            cn(
-              'fixed ring-warning-background ring-5 rounded-2xl',
-              !isSelected && 'ring-warning-background/50'
-            )
-          "
-        >
-          <div class="absolute top-0 right-0 size-8">
-            <div
-              v-if="isSelected"
-              class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg"
-            >
-              <i class="icon-[lucide--check] bg-text-foreground size-full" />
-            </div>
-            <div
-              v-else
-              class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg"
-            />
-          </div>
-        </div>
-      </TransformPane>
-    </div>
-  </Teleport>
-</template>

src/components/builder/BuilderExitButton.vue

@@ -1,43 +0,0 @@
-<template>
-  <div
-    class="fixed bottom-4 left-1/2 z-1000 flex -translate-x-1/2 items-center rounded-2xl border border-border-default bg-base-background p-2 shadow-interface"
-  >
-    <Button size="lg" @click="onExitBuilder">
-      {{ t('builderMenu.exitAppBuilder') }}
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useAppMode } from '@/composables/useAppMode'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { useDialogStore } from '@/stores/dialogStore'
-
-const { t } = useI18n()
-const appModeStore = useAppModeStore()
-const dialogStore = useDialogStore()
-const { isBuilderMode } = useAppMode()
-
-useEventListener(window, 'keydown', (e: KeyboardEvent) => {
-  if (
-    e.key === 'Escape' &&
-    !e.ctrlKey &&
-    !e.altKey &&
-    !e.metaKey &&
-    dialogStore.dialogStack.length === 0 &&
-    isBuilderMode.value
-  ) {
-    e.preventDefault()
-    e.stopPropagation()
-    onExitBuilder()
-  }
-})
-
-function onExitBuilder() {
-  void appModeStore.exitBuilder()
-}
-</script>

src/components/builder/BuilderMenu.vue

@@ -1,73 +0,0 @@
-<template>
-  <Popover :show-arrow="false" class="min-w-56 p-3">
-    <template #button>
-      <button
-        :class="
-          cn(
-            'absolute left-4 top-[calc(var(--workflow-tabs-height)+16px)] z-1000 inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-lg py-2 pr-2 pl-3 shadow-interface transition-colors border-none',
-            'bg-secondary-background hover:bg-secondary-background-hover',
-            'data-[state=open]:bg-secondary-background-hover'
-          )
-        "
-        :aria-label="t('linearMode.appModeToolbar.appBuilder')"
-      >
-        <i class="icon-[lucide--hammer] size-4" />
-        <span class="text-sm font-medium">
-          {{ t('linearMode.appModeToolbar.appBuilder') }}
-        </span>
-        <i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
-      </button>
-    </template>
-    <template #default="{ close }">
-      <button
-        :class="
-          cn(
-            'flex w-full items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none',
-            hasOutputs
-              ? 'cursor-pointer hover:bg-secondary-background-hover'
-              : 'opacity-50 pointer-events-none'
-          )
-        "
-        :disabled="!hasOutputs"
-        @click="onSave(close)"
-      >
-        <i class="icon-[lucide--save] size-4" />
-        {{ t('builderMenu.saveApp') }}
-      </button>
-      <div class="my-1 border-t border-border-default" />
-      <button
-        class="flex w-full cursor-pointer items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none hover:bg-secondary-background-hover"
-        @click="onExitBuilder(close)"
-      >
-        <i class="icon-[lucide--square-pen] size-4" />
-        {{ t('builderMenu.exitAppBuilder') }}
-      </button>
-    </template>
-  </Popover>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { useI18n } from 'vue-i18n'
-
-import Popover from '@/components/ui/Popover.vue'
-import { useAppModeStore } from '@/stores/appModeStore'
-import { cn } from '@/utils/tailwindUtil'
-
-import { useBuilderSave } from './useBuilderSave'
-
-const { t } = useI18n()
-const appModeStore = useAppModeStore()
-const { hasOutputs } = storeToRefs(appModeStore)
-const { setSaving } = useBuilderSave()
-
-function onSave(close: () => void) {
-  setSaving(true)
-  close()
-}
-
-function onExitBuilder(close: () => void) {
-  void appModeStore.exitBuilder()
-  close()
-}
-</script>

src/components/builder/BuilderToolbar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="fixed top-[calc(var(--workflow-tabs-height)+var(--spacing)*1.5)] left-1/2 z-1000 -translate-x-1/2"
+    class="fixed top-[calc(var(--workflow-tabs-height)+var(--spacing)*1.5)] left-1/2 z-[1000] -translate-x-1/2"
     :aria-label="t('builderToolbar.label')"
   >
     <div
@@ -20,7 +20,7 @@
             )
           "
           :aria-current="activeStep === step.id ? 'step' : undefined"
-          @click="setMode(step.id)"
+          @click="appModeStore.setMode(step.id)"
         >
           <StepBadge :step :index :model-value="activeStep" />
           <StepLabel :step />
@@ -31,9 +31,9 @@
 
       <!-- Save -->
       <ConnectOutputPopover
-        v-if="!hasOutputs"
+        v-if="!appModeStore.hasOutputs"
         :is-select-active="activeStep === 'builder:select'"
-        @switch="setMode('builder:select')"
+        @switch="appModeStore.setMode('builder:select')"
       >
         <button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
           <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
@@ -50,7 +50,7 @@
               : 'hover:bg-secondary-background bg-transparent'
           )
         "
-        @click="setSaving(true)"
+        @click="appModeStore.setBuilderSaving(true)"
       >
         <StepBadge :step="saveStep" :index="2" :model-value="activeStep" />
         <StepLabel :step="saveStep" />
@@ -63,24 +63,21 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useAppMode } from '@/composables/useAppMode'
-import type { AppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
+import type { AppMode } from '@/stores/appModeStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import { useBuilderSave } from './useBuilderSave'
 import ConnectOutputPopover from './ConnectOutputPopover.vue'
 import StepBadge from './StepBadge.vue'
 import StepLabel from './StepLabel.vue'
 import type { BuilderToolbarStep } from './types'
-import { storeToRefs } from 'pinia'
 
 const { t } = useI18n()
-const { mode, setMode } = useAppMode()
-const { hasOutputs } = storeToRefs(useAppModeStore())
-const { saving, setSaving } = useBuilderSave()
+const appModeStore = useAppModeStore()
 
-const activeStep = computed(() => (saving.value ? 'save' : mode.value))
+const activeStep = computed(() =>
+  appModeStore.isBuilderSaving ? 'save' : appModeStore.mode
+)
 
 const stepClasses =
   'inline-flex h-14 min-h-8 cursor-pointer items-center gap-3 rounded-lg py-2 pr-4 pl-2 transition-colors border-none'

src/components/builder/IoItem.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Popover from '@/components/ui/Popover.vue'
-import Button from '@/components/ui/button/Button.vue'
-
-const { t } = useI18n()
-
-const { rename, remove } = defineProps<{
-  title: string
-  subTitle?: string
-  rename?: () => void
-  remove?: () => void
-}>()
-
-const entries = computed(() => {
-  const items = []
-  if (rename)
-    items.push({
-      label: t('g.rename'),
-      command: rename,
-      icon: 'icon-[lucide--pencil]'
-    })
-  if (remove)
-    items.push({
-      label: t('g.delete'),
-      command: remove,
-      icon: 'icon-[lucide--trash-2]'
-    })
-  return items
-})
-</script>
-<template>
-  <div class="p-2 my-2 rounded-lg flex items-center-safe">
-    <span class="mr-auto" v-text="title" />
-    <span class="text-muted-foreground mr-2 text-end" v-text="subTitle" />
-    <Popover :entries>
-      <template #button>
-        <Button variant="muted-textonly">
-          <i class="icon-[lucide--ellipsis]" />
-        </Button>
-      </template>
-    </Popover>
-  </div>
-</template>

src/components/builder/useBuilderSave.ts

@@ -1,36 +1,30 @@
-import { ref } from 'vue'
+import { watch } from 'vue'
 
-import { useErrorHandling } from '@/composables/useErrorHandling'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { useDialogService } from '@/services/dialogService'
-import { useAppMode } from '@/composables/useAppMode'
 import { useAppModeStore } from '@/stores/appModeStore'
 import { useDialogStore } from '@/stores/dialogStore'
 
 import BuilderSaveDialogContent from './BuilderSaveDialogContent.vue'
 import BuilderSaveSuccessDialogContent from './BuilderSaveSuccessDialogContent.vue'
-import { whenever } from '@vueuse/core'
 
 const SAVE_DIALOG_KEY = 'builder-save'
 const SUCCESS_DIALOG_KEY = 'builder-save-success'
 
 export function useBuilderSave() {
-  const { setMode } = useAppMode()
-  const { toastErrorHandler } = useErrorHandling()
+  const appModeStore = useAppModeStore()
   const workflowStore = useWorkflowStore()
   const workflowService = useWorkflowService()
   const dialogService = useDialogService()
-  const appModeStore = useAppModeStore()
   const dialogStore = useDialogStore()
 
-  const saving = ref(false)
-
-  whenever(saving, onBuilderSave)
-
-  function setSaving(value: boolean) {
-    saving.value = value
-  }
+  watch(
+    () => appModeStore.isBuilderSaving,
+    (saving) => {
+      if (saving) void onBuilderSave()
+    }
+  )
 
   async function onBuilderSave() {
     const workflow = workflowStore.activeWorkflow
@@ -39,14 +33,15 @@ export function useBuilderSave() {
       return
     }
 
-    if (!workflow.isTemporary && workflow.initialMode != null) {
-      // Re-save with the previously chosen mode — no dialog needed.
+    // TODO: Update this to show the save dialog if it is temp OR if the user has not saved app mode before.
+    // If they have saved app mode before, just save the workflow, but use the initial app mode state not current.
+
+    if (!workflow.isTemporary) {
       try {
-        appModeStore.flushSelections()
+        workflow.changeTracker?.checkState()
         await workflowService.saveWorkflow(workflow)
-        showSuccessDialog(workflow.filename, workflow.initialMode === 'app')
-      } catch (e) {
-        toastErrorHandler(e)
+        showSuccessDialog(workflow.filename, appModeStore.isAppMode)
+      } catch {
         resetSaving()
       }
       return
@@ -80,19 +75,16 @@ export function useBuilderSave() {
       const workflow = workflowStore.activeWorkflow
       if (!workflow) return
 
-      appModeStore.flushSelections()
-      const mode = openAsApp ? 'app' : 'graph'
       const saved = await workflowService.saveWorkflowAs(workflow, {
         filename,
-        initialMode: mode
+        openAsApp
       })
 
       if (!saved) return
 
       closeSaveDialog()
       showSuccessDialog(filename, openAsApp)
-    } catch (e) {
-      toastErrorHandler(e)
+    } catch {
       closeSaveDialog()
       resetSaving()
     }
@@ -106,7 +98,7 @@ export function useBuilderSave() {
         workflowName,
         savedAsApp,
         onViewApp: () => {
-          setMode('app')
+          appModeStore.setMode('app')
           closeSuccessDialog()
         },
         onClose: closeSuccessDialog
@@ -127,8 +119,6 @@ export function useBuilderSave() {
   }
 
   function resetSaving() {
-    saving.value = false
+    appModeStore.setBuilderSaving(false)
   }
-
-  return { saving, setSaving }
 }

src/components/common/DraggableList.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts" generic="T">
-import { onBeforeUnmount, ref, useTemplateRef, watchPostEffect } from 'vue'
-
-import { DraggableList } from '@/scripts/ui/draggableList'
-
-const modelValue = defineModel<T[]>({ required: true })
-const draggableList = ref<DraggableList>()
-const draggableItems = useTemplateRef('draggableItems')
-
-watchPostEffect(() => {
-  void modelValue.value.length
-  draggableList.value?.dispose()
-  if (!draggableItems.value?.children?.length) return
-  draggableList.value = new DraggableList(
-    draggableItems.value,
-    '.draggable-item'
-  )
-  draggableList.value.applyNewItemsOrder = function () {
-    const reorderedItems = []
-
-    let oldPosition = -1
-    this.getAllItems().forEach((item, index) => {
-      if (item === this.draggableItem) {
-        oldPosition = index
-        return
-      }
-      if (!this.isItemToggled(item)) {
-        reorderedItems[index] = item
-        return
-      }
-      const newIndex = this.isItemAbove(item) ? index + 1 : index - 1
-      reorderedItems[newIndex] = item
-    })
-
-    for (let index = 0; index < this.getAllItems().length; index++) {
-      const item = reorderedItems[index]
-      if (typeof item === 'undefined') {
-        reorderedItems[index] = this.draggableItem
-      }
-    }
-    const newPosition = reorderedItems.indexOf(this.draggableItem)
-    const itemList = modelValue.value
-    const [item] = itemList.splice(oldPosition, 1)
-    itemList.splice(newPosition, 0, item)
-    modelValue.value = [...itemList]
-  }
-})
-
-onBeforeUnmount(() => {
-  draggableList.value?.dispose()
-})
-</script>
-<template>
-  <div ref="draggableItems" class="pb-2 px-2 space-y-0.5 mt-0.5">
-    <slot
-      drag-class="draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing"
-    />
-  </div>
-</template>

src/components/common/ElectronFileDownload.vue

@@ -0,0 +1,148 @@
+<!-- A Electron-backed download button with a label, size hint and progress bar -->
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-row items-center gap-2">
+      <i v-if="status === 'completed'" class="pi pi-check text-green-500" />
+      <div class="file-info">
+        <div class="file-details">
+          <span class="file-type" :title="hint">{{ label }}</span>
+        </div>
+        <div v-if="props.error" class="file-error">
+          {{ props.error }}
+        </div>
+      </div>
+
+      <div class="file-action flex flex-row items-center gap-2">
+        <Button
+          v-if="status === null || status === 'error'"
+          class="file-action-button"
+          variant="secondary"
+          size="sm"
+          :disabled="!!props.error"
+          @click="triggerDownload"
+        >
+          <i class="pi pi-download" />
+          {{ $t('g.downloadWithSize', { size: fileSize }) }}
+        </Button>
+        <Button
+          v-if="(status === null || status === 'error') && !!props.url"
+          variant="secondary"
+          size="sm"
+          @click="copyURL"
+        >
+          {{ $t('g.copyURL') }}
+        </Button>
+      </div>
+    </div>
+    <div
+      v-if="status === 'in_progress' || status === 'paused'"
+      class="flex flex-row items-center gap-2"
+    >
+      <!-- Temporary fix for issue when % only comes into view only if the progress bar is large enough
+           https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499
+      -->
+      <ProgressBar
+        class="flex-1"
+        :value="downloadProgress"
+        :show-value="downloadProgress > 10"
+      />
+
+      <Button
+        v-if="status === 'in_progress'"
+        v-tooltip.top="t('electronFileDownload.pause')"
+        class="file-action-button"
+        variant="secondary"
+        size="sm"
+        :disabled="!!props.error"
+        @click="triggerPauseDownload"
+      >
+        <i class="pi pi-pause-circle" />
+      </Button>
+
+      <Button
+        v-if="status === 'paused'"
+        v-tooltip.top="t('electronFileDownload.resume')"
+        class="file-action-button"
+        variant="secondary"
+        size="sm"
+        :aria-label="t('electronFileDownload.resume')"
+        :disabled="!!props.error"
+        @click="triggerResumeDownload"
+      >
+        <i class="pi pi-play-circle" />
+      </Button>
+
+      <Button
+        v-tooltip.top="t('electronFileDownload.cancel')"
+        class="file-action-button"
+        variant="destructive"
+        size="sm"
+        :aria-label="t('electronFileDownload.cancel')"
+        :disabled="!!props.error"
+        @click="triggerCancelDownload"
+      >
+        <i class="pi pi-times-circle" />
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProgressBar from 'primevue/progressbar'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useDownload } from '@/composables/useDownload'
+import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+import { formatSize } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  url: string
+  hint?: string
+  label?: string
+  error?: string
+}>()
+
+const { t } = useI18n()
+const label = computed(() => props.label || props.url.split('/').pop())
+const hint = computed(() => props.hint || props.url)
+const download = useDownload(props.url)
+const downloadProgress = ref<number>(0)
+const status = ref<string | null>(null)
+const fileSize = computed(() =>
+  download.fileSize.value ? formatSize(download.fileSize.value) : '?'
+)
+const { copyToClipboard } = useCopyToClipboard()
+const electronDownloadStore = useElectronDownloadStore()
+// @ts-expect-error fixme ts strict error
+const [savePath, filename] = props.label.split('/')
+
+electronDownloadStore.$subscribe((_, { downloads }) => {
+  const download = downloads.find((download) => props.url === download.url)
+
+  if (download) {
+    // @ts-expect-error fixme ts strict error
+    downloadProgress.value = Number((download.progress * 100).toFixed(1))
+    // @ts-expect-error fixme ts strict error
+    status.value = download.status
+  }
+})
+
+const triggerDownload = async () => {
+  await electronDownloadStore.start({
+    url: props.url,
+    savePath: savePath.trim(),
+    filename: filename.trim()
+  })
+}
+
+const triggerCancelDownload = () => electronDownloadStore.cancel(props.url)
+const triggerPauseDownload = () => electronDownloadStore.pause(props.url)
+const triggerResumeDownload = () => electronDownloadStore.resume(props.url)
+
+const copyURL = async () => {
+  await copyToClipboard(props.url)
+}
+</script>

src/components/common/FileDownload.vue

@@ -0,0 +1,69 @@
+<!-- A file download button with a label and a size hint -->
+<template>
+  <div class="flex flex-row items-center gap-2">
+    <div>
+      <div>
+        <span :title="hint">{{ label }}</span>
+      </div>
+      <Message
+        v-if="props.error"
+        severity="error"
+        icon="pi pi-exclamation-triangle"
+        size="small"
+        variant="outlined"
+        class="my-2 h-min max-w-xs px-1"
+        :title="props.error"
+        :pt="{
+          text: { class: 'overflow-hidden text-ellipsis' }
+        }"
+      >
+        {{ props.error }}
+      </Message>
+    </div>
+    <div>
+      <Button
+        variant="secondary"
+        :disabled="!!props.error"
+        :title="props.url"
+        @click="download.triggerBrowserDownload"
+      >
+        {{ $t('g.downloadWithSize', { size: fileSize }) }}
+      </Button>
+    </div>
+    <div>
+      <Button variant="secondary" :disabled="!!props.error" @click="copyURL">
+        {{ $t('g.copyURL') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Message from 'primevue/message'
+import { computed } from 'vue'
+
+import Button from '@/components/ui/button/Button.vue'
+import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
+import { useDownload } from '@/composables/useDownload'
+import { formatSize } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  url: string
+  hint?: string
+  label?: string
+  error?: string
+}>()
+
+const label = computed(() => props.label || props.url.split('/').pop())
+
+const hint = computed(() => props.hint || props.url)
+const download = useDownload(props.url)
+const fileSize = computed(() =>
+  download.fileSize.value ? formatSize(download.fileSize.value) : '?'
+)
+const copyURL = async () => {
+  await copyToClipboard(props.url)
+}
+
+const { copyToClipboard } = useCopyToClipboard()
+</script>

src/components/common/FormItem.vue

@@ -117,18 +117,20 @@ function getFormComponent(item: FormItem): Component {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 .form-input :deep(.input-slider) .p-inputnumber input,
 .form-input :deep(.input-slider) .slider-part {
-  width: 5rem;
+  @apply w-20;
 }
 
 .form-input :deep(.input-knob) .p-inputnumber input,
 .form-input :deep(.input-knob) .knob-part {
-  width: 8rem;
+  @apply w-32;
 }
 
 .form-input :deep(.p-inputtext),
 .form-input :deep(.p-select) {
-  width: 11rem;
+  @apply w-44;
 }
 </style>

src/components/common/SearchBox.vue

@@ -133,6 +133,8 @@ const wrapperStyle = computed(() => {
 </script>
 
 <style scoped>
+@reference '../../assets/css/style.css';
+
 :deep(.p-inputtext) {
   --p-form-field-padding-x: 0.625rem;
 }

src/components/common/SearchFilterChip.vue

@@ -1,6 +1,6 @@
 <template>
-  <Chip removable @remove="emit('remove', $event)">
-    <Badge size="small" :class="semanticBadgeClass">
+  <Chip removable @remove="$emit('remove', $event)">
+    <Badge size="small" :class="badgeClass">
       {{ badge }}
     </Badge>
     {{ text }}
@@ -10,7 +10,6 @@
 <script setup lang="ts">
 import Badge from 'primevue/badge'
 import Chip from 'primevue/chip'
-import { computed } from 'vue'
 
 export interface SearchFilter {
   text: string
@@ -19,19 +18,26 @@ export interface SearchFilter {
   id: string | number
 }
 
-const semanticClassMap: Record<string, string> = {
-  'i-badge': 'bg-green-500 text-white',
-  'o-badge': 'bg-red-500 text-white',
-  'c-badge': 'bg-blue-500 text-white',
-  's-badge': 'bg-yellow-500'
+defineProps<Omit<SearchFilter, 'id'>>()
+defineEmits(['remove'])
+</script>
+
+<style scoped>
+@reference '../../assets/css/style.css';
+
+:deep(.i-badge) {
+  @apply bg-green-500 text-white;
 }
 
-const props = defineProps<Omit<SearchFilter, 'id'>>()
-const emit = defineEmits<{
-  (e: 'remove', event: Event): void
-}>()
+:deep(.o-badge) {
+  @apply bg-red-500 text-white;
+}
 
-const semanticBadgeClass = computed(() => {
-  return semanticClassMap[props.badgeClass] ?? props.badgeClass
-})
-</script>
+:deep(.c-badge) {
+  @apply bg-blue-500 text-white;
+}
+
+:deep(.s-badge) {
+  @apply bg-yellow-500;
+}
+</style>

src/components/curve/CurveEditor.test.ts

@@ -1,113 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-
-import type { CurvePoint } from './types'
-
-import CurveEditor from './CurveEditor.vue'
-
-function mountEditor(points: CurvePoint[], extraProps = {}) {
-  return mount(CurveEditor, {
-    props: { modelValue: points, ...extraProps }
-  })
-}
-
-function getCurvePath(wrapper: ReturnType<typeof mount>) {
-  return wrapper.find('[data-testid="curve-path"]')
-}
-
-describe('CurveEditor', () => {
-  it('renders SVG with curve path', () => {
-    const wrapper = mountEditor([
-      [0, 0],
-      [1, 1]
-    ])
-    expect(wrapper.find('svg').exists()).toBe(true)
-    const curvePath = getCurvePath(wrapper)
-    expect(curvePath.exists()).toBe(true)
-    expect(curvePath.attributes('d')).toBeTruthy()
-  })
-
-  it('renders a circle for each control point', () => {
-    const wrapper = mountEditor([
-      [0, 0],
-      [0.5, 0.7],
-      [1, 1]
-    ])
-    expect(wrapper.findAll('circle')).toHaveLength(3)
-  })
-
-  it('renders histogram path when provided', () => {
-    const histogram = new Uint32Array(256)
-    for (let i = 0; i < 256; i++) histogram[i] = i + 1
-    const wrapper = mountEditor(
-      [
-        [0, 0],
-        [1, 1]
-      ],
-      { histogram }
-    )
-    const histogramPath = wrapper.find('[data-testid="histogram-path"]')
-    expect(histogramPath.exists()).toBe(true)
-    expect(histogramPath.attributes('d')).toContain('M0,1')
-  })
-
-  it('does not render histogram path when not provided', () => {
-    const wrapper = mountEditor([
-      [0, 0],
-      [1, 1]
-    ])
-    expect(wrapper.find('[data-testid="histogram-path"]').exists()).toBe(false)
-  })
-
-  it('returns empty path with fewer than 2 points', () => {
-    const wrapper = mountEditor([[0.5, 0.5]])
-    expect(getCurvePath(wrapper).attributes('d')).toBe('')
-  })
-
-  it('generates path starting with M and containing L segments', () => {
-    const wrapper = mountEditor([
-      [0, 0],
-      [0.5, 0.8],
-      [1, 1]
-    ])
-    const d = getCurvePath(wrapper).attributes('d')!
-    expect(d).toMatch(/^M/)
-    expect(d).toContain('L')
-  })
-
-  it('curve path only spans the x-range of control points', () => {
-    const wrapper = mountEditor([
-      [0.2, 0.3],
-      [0.8, 0.9]
-    ])
-    const d = getCurvePath(wrapper).attributes('d')!
-    const xValues = d
-      .split(/[ML]/)
-      .filter(Boolean)
-      .map((s) => parseFloat(s.split(',')[0]))
-    expect(Math.min(...xValues)).toBeCloseTo(0.2, 2)
-    expect(Math.max(...xValues)).toBeCloseTo(0.8, 2)
-  })
-
-  it('deletes a point on right-click but keeps minimum 2', async () => {
-    const points: CurvePoint[] = [
-      [0, 0],
-      [0.5, 0.5],
-      [1, 1]
-    ]
-    const wrapper = mountEditor(points)
-    expect(wrapper.findAll('circle')).toHaveLength(3)
-
-    await wrapper.findAll('circle')[1].trigger('pointerdown', {
-      button: 2,
-      pointerId: 1
-    })
-    expect(wrapper.findAll('circle')).toHaveLength(2)
-
-    await wrapper.findAll('circle')[0].trigger('pointerdown', {
-      button: 2,
-      pointerId: 1
-    })
-    expect(wrapper.findAll('circle')).toHaveLength(2)
-  })
-})

src/components/curve/CurveEditor.vue

@@ -1,104 +0,0 @@
-<template>
-  <svg
-    ref="svgRef"
-    viewBox="-0.04 -0.04 1.08 1.08"
-    preserveAspectRatio="xMidYMid meet"
-    class="aspect-square w-full cursor-crosshair rounded-[5px] bg-node-component-surface"
-    @pointerdown.stop="handleSvgPointerDown"
-    @contextmenu.prevent.stop
-  >
-    <line
-      v-for="v in [0.25, 0.5, 0.75]"
-      :key="'h' + v"
-      :x1="0"
-      :y1="v"
-      :x2="1"
-      :y2="v"
-      stroke="currentColor"
-      stroke-opacity="0.1"
-      stroke-width="0.003"
-    />
-    <line
-      v-for="v in [0.25, 0.5, 0.75]"
-      :key="'v' + v"
-      :x1="v"
-      :y1="0"
-      :x2="v"
-      :y2="1"
-      stroke="currentColor"
-      stroke-opacity="0.1"
-      stroke-width="0.003"
-    />
-
-    <line
-      x1="0"
-      y1="1"
-      x2="1"
-      y2="0"
-      stroke="currentColor"
-      stroke-opacity="0.15"
-      stroke-width="0.003"
-    />
-
-    <path
-      v-if="histogramPath"
-      data-testid="histogram-path"
-      :d="histogramPath"
-      :fill="curveColor"
-      fill-opacity="0.15"
-      stroke="none"
-    />
-
-    <path
-      data-testid="curve-path"
-      :d="curvePath"
-      fill="none"
-      :stroke="curveColor"
-      stroke-width="0.008"
-      stroke-linecap="round"
-    />
-
-    <circle
-      v-for="(point, i) in modelValue"
-      :key="i"
-      :cx="point[0]"
-      :cy="1 - point[1]"
-      r="0.02"
-      :fill="curveColor"
-      stroke="white"
-      stroke-width="0.004"
-      class="cursor-grab"
-      @pointerdown.stop="startDrag(i, $event)"
-    />
-  </svg>
-</template>
-
-<script setup lang="ts">
-import { computed, useTemplateRef } from 'vue'
-
-import { useCurveEditor } from '@/composables/useCurveEditor'
-
-import type { CurvePoint } from './types'
-
-import { histogramToPath } from './curveUtils'
-
-const { curveColor = 'white', histogram } = defineProps<{
-  curveColor?: string
-  histogram?: Uint32Array | null
-}>()
-
-const modelValue = defineModel<CurvePoint[]>({
-  required: true
-})
-
-const svgRef = useTemplateRef<SVGSVGElement>('svgRef')
-
-const { curvePath, handleSvgPointerDown, startDrag } = useCurveEditor({
-  svgRef,
-  modelValue
-})
-
-const histogramPath = computed(() =>
-  histogram ? histogramToPath(histogram) : ''
-)
-</script>

src/components/curve/WidgetCurve.vue

@@ -1,16 +0,0 @@
-<template>
-  <CurveEditor v-model="modelValue" />
-</template>
-
-<script setup lang="ts">
-import type { CurvePoint } from './types'
-
-import CurveEditor from './CurveEditor.vue'
-
-const modelValue = defineModel<CurvePoint[]>({
-  default: () => [
-    [0, 0],
-    [1, 1]
-  ]
-})
-</script>

src/components/curve/curveUtils.test.ts

@@ -1,141 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import type { CurvePoint } from './types'
-
-import {
-  createMonotoneInterpolator,
-  curvesToLUT,
-  histogramToPath
-} from './curveUtils'
-
-describe('createMonotoneInterpolator', () => {
-  it('returns 0 for empty points', () => {
-    const interpolate = createMonotoneInterpolator([])
-    expect(interpolate(0.5)).toBe(0)
-  })
-
-  it('returns constant for single point', () => {
-    const interpolate = createMonotoneInterpolator([[0.5, 0.7]])
-    expect(interpolate(0)).toBe(0.7)
-    expect(interpolate(1)).toBe(0.7)
-  })
-
-  it('passes through control points exactly', () => {
-    const points: CurvePoint[] = [
-      [0, 0],
-      [0.5, 0.8],
-      [1, 1]
-    ]
-    const interpolate = createMonotoneInterpolator(points)
-    expect(interpolate(0)).toBeCloseTo(0, 5)
-    expect(interpolate(0.5)).toBeCloseTo(0.8, 5)
-    expect(interpolate(1)).toBeCloseTo(1, 5)
-  })
-
-  it('clamps to endpoint values outside range', () => {
-    const points: CurvePoint[] = [
-      [0.2, 0.3],
-      [0.8, 0.9]
-    ]
-    const interpolate = createMonotoneInterpolator(points)
-    expect(interpolate(0)).toBe(0.3)
-    expect(interpolate(1)).toBe(0.9)
-  })
-
-  it('produces monotone output for monotone input', () => {
-    const points: CurvePoint[] = [
-      [0, 0],
-      [0.25, 0.2],
-      [0.5, 0.5],
-      [0.75, 0.8],
-      [1, 1]
-    ]
-    const interpolate = createMonotoneInterpolator(points)
-
-    let prev = -Infinity
-    for (let x = 0; x <= 1; x += 0.01) {
-      const y = interpolate(x)
-      expect(y).toBeGreaterThanOrEqual(prev)
-      prev = y
-    }
-  })
-
-  it('handles unsorted input points', () => {
-    const points: CurvePoint[] = [
-      [1, 1],
-      [0, 0],
-      [0.5, 0.5]
-    ]
-    const interpolate = createMonotoneInterpolator(points)
-    expect(interpolate(0)).toBeCloseTo(0, 5)
-    expect(interpolate(0.5)).toBeCloseTo(0.5, 5)
-    expect(interpolate(1)).toBeCloseTo(1, 5)
-  })
-})
-
-describe('curvesToLUT', () => {
-  it('returns a 256-entry Uint8Array', () => {
-    const lut = curvesToLUT([
-      [0, 0],
-      [1, 1]
-    ])
-    expect(lut).toBeInstanceOf(Uint8Array)
-    expect(lut.length).toBe(256)
-  })
-
-  it('produces identity LUT for diagonal curve', () => {
-    const lut = curvesToLUT([
-      [0, 0],
-      [1, 1]
-    ])
-    for (let i = 0; i < 256; i++) {
-      expect(lut[i]).toBeCloseTo(i, 0)
-    }
-  })
-
-  it('clamps output to [0, 255]', () => {
-    const lut = curvesToLUT([
-      [0, 0],
-      [0.5, 1.5],
-      [1, 1]
-    ])
-    for (let i = 0; i < 256; i++) {
-      expect(lut[i]).toBeGreaterThanOrEqual(0)
-      expect(lut[i]).toBeLessThanOrEqual(255)
-    }
-  })
-})
-
-describe('histogramToPath', () => {
-  it('returns empty string for empty histogram', () => {
-    expect(histogramToPath(new Uint32Array(0))).toBe('')
-  })
-
-  it('returns empty string when all bins are zero', () => {
-    expect(histogramToPath(new Uint32Array(256))).toBe('')
-  })
-
-  it('returns a closed SVG path for valid histogram', () => {
-    const histogram = new Uint32Array(256)
-    for (let i = 0; i < 256; i++) histogram[i] = i + 1
-    const path = histogramToPath(histogram)
-    expect(path).toMatch(/^M0,1/)
-    expect(path).toMatch(/L1,1 Z$/)
-  })
-
-  it('normalizes using 99.5th percentile to suppress outliers', () => {
-    const histogram = new Uint32Array(256)
-    for (let i = 0; i < 256; i++) histogram[i] = 100
-    histogram[255] = 100000
-    const path = histogramToPath(histogram)
-    // Most bins should map to y=0 (1 - 100/100 = 0) since
-    // the 99.5th percentile is 100, not the outlier 100000
-    const yValues = path
-      .split(/[ML]/)
-      .filter(Boolean)
-      .map((s) => parseFloat(s.split(',')[1]))
-      .filter((y) => !isNaN(y))
-    const nearZero = yValues.filter((y) => Math.abs(y) < 0.01)
-    expect(nearZero.length).toBeGreaterThan(200)
-  })
-})

src/components/curve/curveUtils.ts

@@ -1,120 +0,0 @@
-import type { CurvePoint } from './types'
-
-/**
- * Monotone cubic Hermite interpolation.
- * Produces a smooth curve that passes through all control points
- * without overshooting (monotone property).
- *
- * Returns a function that evaluates y for any x in [0, 1].
- */
-export function createMonotoneInterpolator(
-  points: CurvePoint[]
-): (x: number) => number {
-  if (points.length === 0) return () => 0
-  if (points.length === 1) return () => points[0][1]
-
-  const sorted = [...points].sort((a, b) => a[0] - b[0])
-  const n = sorted.length
-  const xs = sorted.map((p) => p[0])
-  const ys = sorted.map((p) => p[1])
-
-  const deltas: number[] = []
-  const slopes: number[] = []
-  for (let i = 0; i < n - 1; i++) {
-    const dx = xs[i + 1] - xs[i]
-    deltas.push(dx === 0 ? 0 : (ys[i + 1] - ys[i]) / dx)
-  }
-
-  slopes.push(deltas[0] ?? 0)
-  for (let i = 1; i < n - 1; i++) {
-    if (deltas[i - 1] * deltas[i] <= 0) {
-      slopes.push(0)
-    } else {
-      slopes.push((deltas[i - 1] + deltas[i]) / 2)
-    }
-  }
-  slopes.push(deltas[n - 2] ?? 0)
-
-  for (let i = 0; i < n - 1; i++) {
-    if (deltas[i] === 0) {
-      slopes[i] = 0
-      slopes[i + 1] = 0
-    } else {
-      const alpha = slopes[i] / deltas[i]
-      const beta = slopes[i + 1] / deltas[i]
-      const s = alpha * alpha + beta * beta
-      if (s > 9) {
-        const t = 3 / Math.sqrt(s)
-        slopes[i] = t * alpha * deltas[i]
-        slopes[i + 1] = t * beta * deltas[i]
-      }
-    }
-  }
-
-  return (x: number): number => {
-    if (x <= xs[0]) return ys[0]
-    if (x >= xs[n - 1]) return ys[n - 1]
-
-    let lo = 0
-    let hi = n - 1
-    while (lo < hi - 1) {
-      const mid = (lo + hi) >> 1
-      if (xs[mid] <= x) lo = mid
-      else hi = mid
-    }
-
-    const dx = xs[hi] - xs[lo]
-    if (dx === 0) return ys[lo]
-
-    const t = (x - xs[lo]) / dx
-    const t2 = t * t
-    const t3 = t2 * t
-
-    const h00 = 2 * t3 - 3 * t2 + 1
-    const h10 = t3 - 2 * t2 + t
-    const h01 = -2 * t3 + 3 * t2
-    const h11 = t3 - t2
-
-    return (
-      h00 * ys[lo] +
-      h10 * dx * slopes[lo] +
-      h01 * ys[hi] +
-      h11 * dx * slopes[hi]
-    )
-  }
-}
-
-/**
- * Convert a 256-bin histogram into an SVG path string.
- * Normalizes using the 99.5th percentile to avoid outlier spikes.
- */
-export function histogramToPath(histogram: Uint32Array): string {
-  if (!histogram.length) return ''
-
-  const sorted = Array.from(histogram).sort((a, b) => a - b)
-  const max = sorted[Math.floor(255 * 0.995)]
-  if (max === 0) return ''
-
-  const invMax = 1 / max
-  const parts: string[] = ['M0,1']
-  for (let i = 0; i < 256; i++) {
-    const x = i / 255
-    const y = 1 - Math.min(1, histogram[i] * invMax)
-    parts.push(`L${x},${y}`)
-  }
-  parts.push('L1,1 Z')
-  return parts.join(' ')
-}
-
-export function curvesToLUT(points: CurvePoint[]): Uint8Array {
-  const lut = new Uint8Array(256)
-  const interpolate = createMonotoneInterpolator(points)
-
-  for (let i = 0; i < 256; i++) {
-    const x = i / 255
-    const y = interpolate(x)
-    lut[i] = Math.max(0, Math.min(255, Math.round(y * 255)))
-  }
-
-  return lut
-}

src/components/curve/types.ts

@@ -1 +0,0 @@
-export type CurvePoint = [x: number, y: number]

src/components/custom/widget/WorkflowTemplateSelectorDialog.vue

@@ -438,6 +438,7 @@ onMounted(() => {
 const systemStatsStore = useSystemStatsStore()
 
 const distributions = computed(() => {
+  // eslint-disable-next-line no-undef
   switch (__DISTRIBUTION__) {
     case 'cloud':
       return [TemplateIncludeOnDistributionEnum.Cloud]

src/components/dialog/GlobalDialog.vue

@@ -71,30 +71,20 @@ function getDialogPt(item: {
 </script>
 
 <style>
+@reference '../../assets/css/style.css';
+
 .global-dialog {
   max-width: calc(100vw - 1rem);
 }
 
 .global-dialog .p-dialog-header {
-  padding: calc(var(--spacing) * 2);
-  padding-bottom: 0;
+  @apply p-2 2xl:p-[var(--p-dialog-header-padding)];
+  @apply pb-0;
 }
 
 .global-dialog .p-dialog-content {
-  padding: calc(var(--spacing) * 2);
-  padding-top: 0;
-}
-
-@media (min-width: 1536px) {
-  .global-dialog .p-dialog-header {
-    padding: var(--p-dialog-header-padding);
-    padding-bottom: 0;
-  }
-
-  .global-dialog .p-dialog-content {
-    padding: var(--p-dialog-content-padding);
-    padding-top: 0;
-  }
+  @apply p-2 2xl:p-[var(--p-dialog-content-padding)];
+  @apply pt-0;
 }
 
 /* Workspace mode: wider settings dialog */

src/components/dialog/content/MissingModelsContent.vue

@@ -1,173 +0,0 @@
-<template>
-  <div
-    class="flex w-full max-w-[490px] flex-col border-t border-border-default"
-  >
-    <div class="flex h-full w-full flex-col gap-4 p-4">
-      <p class="m-0 text-sm leading-5 text-muted-foreground">
-        {{ $t('missingModelsDialog.description') }}
-      </p>
-
-      <div
-        class="flex max-h-[300px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
-      >
-        <div
-          v-for="model in processedModels"
-          :key="model.name"
-          class="flex items-center justify-between px-3 py-2"
-        >
-          <div class="flex items-center gap-2 overflow-hidden">
-            <span
-              class="min-w-0 truncate text-sm text-foreground"
-              :title="model.name"
-            >
-              {{ model.name }}
-            </span>
-            <span
-              class="inline-flex h-4 shrink-0 items-center rounded-full bg-muted-foreground/20 px-1.5 text-xxxs font-semibold uppercase text-muted-foreground"
-            >
-              {{ model.badgeLabel }}
-            </span>
-          </div>
-          <div class="flex shrink-0 items-center gap-2">
-            <span
-              v-if="model.isDownloadable && fileSizes.get(model.url)"
-              class="text-xs text-muted-foreground"
-            >
-              {{ formatSize(fileSizes.get(model.url)) }}
-            </span>
-            <Button
-              v-if="model.isDownloadable"
-              variant="textonly"
-              size="icon"
-              :title="model.url"
-              :aria-label="$t('g.download')"
-              @click="downloadModel(model, paths)"
-            >
-              <i class="icon-[lucide--download] size-4" />
-            </Button>
-            <Button
-              v-else
-              variant="textonly"
-              size="icon"
-              :title="model.url"
-              :aria-label="$t('g.copyURL')"
-              @click="void copyToClipboard(model.url)"
-            >
-              <i class="icon-[lucide--copy] size-4" />
-            </Button>
-          </div>
-        </div>
-
-        <div
-          v-if="totalDownloadSize > 0"
-          class="sticky bottom-0 flex items-center justify-between border-t border-border-default bg-secondary-background px-3 py-2"
-        >
-          <span class="text-xs font-medium text-muted-foreground">
-            {{ $t('missingModelsDialog.totalSize') }}
-          </span>
-          <span class="text-xs text-muted-foreground">
-            {{ formatSize(totalDownloadSize) }}
-          </span>
-        </div>
-      </div>
-
-      <p
-        class="m-0 text-xs leading-5 text-muted-foreground whitespace-pre-line"
-      >
-        {{ $t('missingModelsDialog.footerDescription') }}
-      </p>
-
-      <div
-        v-if="hasCustomModels"
-        class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
-      >
-        <i
-          class="icon-[lucide--triangle-alert] mt-0.5 h-4 w-4 shrink-0 text-warning-background"
-        />
-        <div class="flex flex-col gap-1">
-          <p
-            class="m-0 text-xs font-semibold leading-5 text-warning-background"
-          >
-            {{ $t('missingModelsDialog.customModelsWarning') }}
-          </p>
-          <p class="m-0 text-xs leading-5 text-warning-background">
-            {{ $t('missingModelsDialog.customModelsInstruction') }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, reactive } from 'vue'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
-import { formatSize } from '@/utils/formatUtil'
-
-import type { ModelWithUrl } from './missingModelsUtils'
-import {
-  downloadModel,
-  getBadgeLabel,
-  hasValidDirectory,
-  isModelDownloadable
-} from './missingModelsUtils'
-
-const { missingModels, paths } = defineProps<{
-  missingModels: ModelWithUrl[]
-  paths: Record<string, string[]>
-}>()
-
-interface ProcessedModel {
-  name: string
-  url: string
-  directory: string
-  badgeLabel: string
-  isDownloadable: boolean
-}
-
-const processedModels = computed<ProcessedModel[]>(() =>
-  missingModels.map((model) => ({
-    name: model.name,
-    url: model.url,
-    directory: model.directory,
-    badgeLabel: getBadgeLabel(model.directory),
-    isDownloadable:
-      hasValidDirectory(model, paths) && isModelDownloadable(model)
-  }))
-)
-
-const hasCustomModels = computed(() =>
-  processedModels.value.some((m) => !m.isDownloadable)
-)
-
-const fileSizes = reactive(new Map<string, number>())
-
-const totalDownloadSize = computed(() =>
-  processedModels.value
-    .filter((model) => model.isDownloadable)
-    .reduce((total, model) => total + (fileSizes.get(model.url) ?? 0), 0)
-)
-
-onMounted(async () => {
-  const downloadableUrls = processedModels.value
-    .filter((m) => m.isDownloadable)
-    .map((m) => m.url)
-
-  await Promise.allSettled(
-    downloadableUrls.map(async (url) => {
-      try {
-        const response = await fetch(url, { method: 'HEAD' })
-        if (!response.ok) return
-        const size = response.headers.get('content-length')
-        if (size) fileSizes.set(url, parseInt(size, 10))
-      } catch {
-        // Silently skip size fetch failures
-      }
-    })
-  )
-})
-
-const { copyToClipboard } = useCopyToClipboard()
-</script>

src/components/dialog/content/MissingModelsFooter.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="flex w-full flex-col gap-2 px-4 py-2">
-    <div class="flex flex-col gap-1 text-sm text-muted-foreground">
-      <div class="flex items-center gap-1">
-        <input
-          id="doNotAskAgainModels"
-          v-model="doNotAskAgain"
-          type="checkbox"
-          class="h-4 w-4 cursor-pointer"
-        />
-        <label for="doNotAskAgainModels">{{
-          $t('missingModelsDialog.doNotAskAgain')
-        }}</label>
-      </div>
-      <i18n-t
-        v-if="doNotAskAgain"
-        keypath="missingModelsDialog.reEnableInSettings"
-        tag="span"
-        class="ml-6 text-sm text-muted-foreground"
-      >
-        <template #link>
-          <Button
-            variant="textonly"
-            class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
-            @click="openShowMissingModelsSetting"
-          >
-            {{ $t('missingModelsDialog.reEnableInSettingsLink') }}
-          </Button>
-        </template>
-      </i18n-t>
-    </div>
-
-    <div class="flex justify-end gap-1">
-      <Button variant="secondary" size="md" @click="handleAction">
-        {{ buttonLabel }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import Button from '@/components/ui/button/Button.vue'
-import { useSettingStore } from '@/platform/settings/settingStore'
-import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
-import { useDialogStore } from '@/stores/dialogStore'
-
-import type { ModelWithUrl } from './missingModelsUtils'
-import {
-  downloadModel,
-  hasValidDirectory,
-  isModelDownloadable
-} from './missingModelsUtils'
-
-const { missingModels, paths } = defineProps<{
-  missingModels: ModelWithUrl[]
-  paths: Record<string, string[]>
-}>()
-
-const DIALOG_KEY = 'global-missing-models-warning'
-const { t } = useI18n()
-const dialogStore = useDialogStore()
-const doNotAskAgain = ref(false)
-
-watch(doNotAskAgain, (value) => {
-  void useSettingStore().set('Comfy.Workflow.ShowMissingModelsWarning', !value)
-})
-
-function openShowMissingModelsSetting() {
-  dialogStore.closeDialog({ key: DIALOG_KEY })
-  useSettingsDialog().show(undefined, 'Comfy.Workflow.ShowMissingModelsWarning')
-}
-
-const downloadableModels = computed(() =>
-  missingModels.filter(
-    (model) => hasValidDirectory(model, paths) && isModelDownloadable(model)
-  )
-)
-
-const hasDownloadable = computed(() => downloadableModels.value.length > 0)
-
-const hasCustom = computed(
-  () => downloadableModels.value.length < missingModels.length
-)
-
-const buttonLabel = computed(() => {
-  if (hasDownloadable.value && hasCustom.value)
-    return t('missingModelsDialog.downloadAvailable')
-  if (hasDownloadable.value) return t('missingModelsDialog.downloadAll')
-  return t('missingModelsDialog.gotIt')
-})
-
-function handleAction() {
-  if (hasDownloadable.value) {
-    for (const model of downloadableModels.value) {
-      downloadModel(model, paths)
-    }
-  }
-  dialogStore.closeDialog({ key: DIALOG_KEY })
-}
-</script>

src/components/dialog/content/MissingModelsHeader.vue

@@ -1,10 +0,0 @@
-<template>
-  <div class="flex w-full items-center justify-between p-4">
-    <div class="flex items-center gap-2">
-      <i class="icon-[lucide--triangle-alert] text-warning-background"></i>
-      <p class="m-0 text-sm">
-        {{ $t('missingModelsDialog.title') }}
-      </p>
-    </div>
-  </div>
-</template>

src/components/dialog/content/MissingModelsWarning.vue

@@ -0,0 +1,177 @@
+<template>
+  <NoResultsPlaceholder
+    class="pb-0"
+    icon="pi pi-exclamation-circle"
+    :title="t('missingModelsDialog.missingModels')"
+    :message="t('missingModelsDialog.missingModelsMessage')"
+  />
+  <div class="mb-4 flex flex-col gap-1">
+    <div class="flex gap-1">
+      <input
+        id="doNotAskAgain"
+        v-model="doNotAskAgain"
+        type="checkbox"
+        class="h-4 w-4 cursor-pointer"
+      />
+      <label for="doNotAskAgain">{{
+        t('missingModelsDialog.doNotAskAgain')
+      }}</label>
+    </div>
+    <i18n-t
+      v-if="doNotAskAgain"
+      keypath="missingModelsDialog.reEnableInSettings"
+      tag="span"
+      class="text-sm text-muted-foreground ml-6"
+    >
+      <template #link>
+        <Button
+          variant="textonly"
+          class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
+          @click="openShowMissingModelsSetting"
+        >
+          {{ t('missingModelsDialog.reEnableInSettingsLink') }}
+        </Button>
+      </template>
+    </i18n-t>
+  </div>
+  <ListBox :options="missingModels" class="comfy-missing-models">
+    <template #option="{ option }">
+      <Suspense v-if="isDesktop">
+        <ElectronFileDownload
+          :url="option.url"
+          :label="option.label"
+          :error="option.error"
+        />
+      </Suspense>
+      <FileDownload
+        v-else
+        :url="option.url"
+        :label="option.label"
+        :error="option.error"
+      />
+    </template>
+  </ListBox>
+</template>
+
+<script setup lang="ts">
+import ListBox from 'primevue/listbox'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import ElectronFileDownload from '@/components/common/ElectronFileDownload.vue'
+import FileDownload from '@/components/common/FileDownload.vue'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import { isDesktop } from '@/platform/distribution/types'
+import { useSettingStore } from '@/platform/settings/settingStore'
+import { useSettingsDialog } from '@/platform/settings/composables/useSettingsDialog'
+import { useDialogStore } from '@/stores/dialogStore'
+
+// TODO: Read this from server internal API rather than hardcoding here
+// as some installations may wish to use custom sources
+const allowedSources = [
+  'https://civitai.com/',
+  'https://huggingface.co/',
+  'http://localhost:' // Included for testing usage only
+]
+const allowedSuffixes = ['.safetensors', '.sft']
+// Models that fail above conditions but are still allowed
+const whiteListedUrls = new Set([
+  'https://huggingface.co/stabilityai/stable-zero123/resolve/main/stable_zero123.ckpt',
+  'https://huggingface.co/TencentARC/T2I-Adapter/resolve/main/models/t2iadapter_depth_sd14v1.pth?download=true',
+  'https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth'
+])
+
+interface ModelInfo {
+  name: string
+  directory: string
+  url: string
+  downloading?: boolean
+  completed?: boolean
+  progress?: number
+  error?: string
+  folder_path?: string
+}
+
+const props = defineProps<{
+  missingModels: ModelInfo[]
+  paths: Record<string, string[]>
+}>()
+
+const { t } = useI18n()
+
+const doNotAskAgain = ref(false)
+
+function openShowMissingModelsSetting() {
+  useDialogStore().closeDialog({ key: 'global-missing-models-warning' })
+  useSettingsDialog().show(undefined, 'Comfy.Workflow.ShowMissingModelsWarning')
+}
+
+const modelDownloads = ref<Record<string, ModelInfo>>({})
+const missingModels = computed(() => {
+  return props.missingModels.map((model) => {
+    const paths = props.paths[model.directory]
+    if (!paths) {
+      return {
+        label: `${model.directory} / ${model.name}`,
+        url: model.url,
+        error: 'Invalid directory specified (does this require custom nodes?)'
+      }
+    }
+    const downloadInfo: ModelInfo = modelDownloads.value[model.name] ?? {
+      downloading: false,
+      completed: false,
+      progress: 0,
+      error: null,
+      name: model.name,
+      directory: model.directory,
+      url: model.url,
+      folder_path: paths[0]
+    }
+    modelDownloads.value[model.name] = downloadInfo
+    if (!whiteListedUrls.has(model.url)) {
+      if (!allowedSources.some((source) => model.url.startsWith(source))) {
+        return {
+          label: `${model.directory} / ${model.name}`,
+          url: model.url,
+          error: `Download not allowed from source '${model.url}', only allowed from '${allowedSources.join("', '")}'`
+        }
+      }
+      if (!allowedSuffixes.some((suffix) => model.name.endsWith(suffix))) {
+        return {
+          label: `${model.directory} / ${model.name}`,
+          url: model.url,
+          error: `Only allowed suffixes are: '${allowedSuffixes.join("', '")}'`
+        }
+      }
+    }
+    return {
+      url: model.url,
+      label: `${model.directory} / ${model.name}`,
+      downloading: downloadInfo.downloading,
+      completed: downloadInfo.completed,
+      progress: downloadInfo.progress,
+      error: downloadInfo.error,
+      name: model.name,
+      paths: paths,
+      folderPath: downloadInfo.folder_path
+    }
+  })
+})
+
+onBeforeUnmount(async () => {
+  if (doNotAskAgain.value) {
+    await useSettingStore().set(
+      'Comfy.Workflow.ShowMissingModelsWarning',
+      false
+    )
+  }
+})
+</script>
+
+<style scoped>
+.comfy-missing-models {
+  max-height: 300px;
+  overflow-y: auto;
+}
+</style>

src/components/dialog/content/missingModelsUtils.ts

@@ -1,83 +0,0 @@
-import { isDesktop } from '@/platform/distribution/types'
-import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
-
-const ALLOWED_SOURCES = [
-  'https://civitai.com/',
-  'https://huggingface.co/',
-  'http://localhost:'
-] as const
-
-const ALLOWED_SUFFIXES = [
-  '.safetensors',
-  '.sft',
-  '.ckpt',
-  '.pth',
-  '.pt'
-] as const
-
-const WHITE_LISTED_URLS: ReadonlySet<string> = new Set([
-  'https://huggingface.co/stabilityai/stable-zero123/resolve/main/stable_zero123.ckpt',
-  'https://huggingface.co/TencentARC/T2I-Adapter/resolve/main/models/t2iadapter_depth_sd14v1.pth?download=true',
-  'https://github.com/xinntao/Real-ESRGAN/releases/download/v0.1.0/RealESRGAN_x4plus.pth'
-])
-
-const DIRECTORY_BADGE_MAP = {
-  vae: 'VAE',
-  diffusion_models: 'DIFFUSION',
-  text_encoders: 'TEXT ENCODER',
-  loras: 'LORA',
-  checkpoints: 'CHECKPOINT'
-} as const
-
-export interface ModelWithUrl {
-  name: string
-  url: string
-  directory: string
-}
-
-export function isModelDownloadable(model: ModelWithUrl): boolean {
-  if (WHITE_LISTED_URLS.has(model.url)) return true
-  if (!ALLOWED_SOURCES.some((source) => model.url.startsWith(source)))
-    return false
-  if (!ALLOWED_SUFFIXES.some((suffix) => model.name.endsWith(suffix)))
-    return false
-  return true
-}
-
-export function hasValidDirectory(
-  model: ModelWithUrl,
-  paths: Record<string, string[]>
-): boolean {
-  return !!paths[model.directory]
-}
-
-export function getBadgeLabel(directory: string): string {
-  if (directory in DIRECTORY_BADGE_MAP) {
-    return DIRECTORY_BADGE_MAP[directory as keyof typeof DIRECTORY_BADGE_MAP]
-  }
-  return directory.toUpperCase()
-}
-
-export function downloadModel(
-  model: ModelWithUrl,
-  paths: Record<string, string[]>
-): void {
-  if (!isDesktop) {
-    const link = document.createElement('a')
-    link.href = model.url
-    link.download = model.name
-    link.target = '_blank'
-    link.rel = 'noopener noreferrer'
-    link.click()
-    return
-  }
-
-  const modelPaths = paths[model.directory]
-  if (modelPaths?.[0]) {
-    void useElectronDownloadStore().start({
-      url: model.url,
-      savePath: modelPaths[0],
-      filename: model.name
-    })
-  }
-}

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

@@ -17,9 +17,9 @@
       }"
       @row-dblclick="editKeybinding($event.data)"
     >
-      <Column field="actions" header="" :pt="{ bodyCell: 'p-1 min-h-8' }">
+      <Column field="actions" header="">
         <template #body="slotProps">
-          <div class="actions flex flex-row">
+          <div class="actions invisible flex flex-row">
             <Button
               variant="textonly"
               size="icon"
@@ -56,7 +56,6 @@
         :header="$t('g.command')"
         sortable
         class="max-w-64 2xl:max-w-full"
-        :pt="{ bodyCell: 'p-1 min-h-8' }"
       >
         <template #body="slotProps">
           <div class="truncate" :title="slotProps.data.id">
@@ -64,11 +63,7 @@
           </div>
         </template>
       </Column>
-      <Column
-        field="keybinding"
-        :header="$t('g.keybinding')"
-        :pt="{ bodyCell: 'p-1 min-h-8' }"
-      >
+      <Column field="keybinding" :header="$t('g.keybinding')">
         <template #body="slotProps">
           <KeyComboDisplay
             v-if="slotProps.data.keybinding"
@@ -80,11 +75,7 @@
           <span v-else>-</span>
         </template>
       </Column>
-      <Column
-        field="source"
-        :header="$t('g.source')"
-        :pt="{ bodyCell: 'p-1 min-h-8' }"
-      >
+      <Column field="source" :header="$t('g.source')">
         <template #body="slotProps">
           <span class="overflow-hidden text-ellipsis">{{
             slotProps.data.source || '-'
@@ -302,3 +293,17 @@ async function resetAllKeybindings() {
   })
 }
 </script>
+
+<style scoped>
+@reference '../../../../assets/css/style.css';
+
+:deep(.p-datatable-tbody) > tr > td {
+  @apply p-1;
+  min-height: 2rem;
+}
+
+:deep(.p-datatable-row-selected) .actions,
+:deep(.p-datatable-selectable-row:hover) .actions {
+  @apply visible;
+}
+</style>

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

@@ -98,17 +98,16 @@ describe('SignInForm', () => {
       await nextTick()
 
       const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.select-none'
+        'span.text-muted.text-base.font-medium.cursor-pointer'
       )
 
-      expect(forgotPasswordSpan.classes()).toContain('cursor-not-allowed')
-      expect(forgotPasswordSpan.classes()).toContain('opacity-50')
+      expect(forgotPasswordSpan.classes()).toContain('text-link-disabled')
     })
 
     it('shows toast and focuses email input when clicked while disabled', async () => {
       const wrapper = mountComponent()
       const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.select-none'
+        'span.text-muted.text-base.font-medium.cursor-pointer'
       )
 
       // Mock getElementById to track focus
@@ -153,7 +152,7 @@ describe('SignInForm', () => {
       )
 
       const forgotPasswordSpan = wrapper.find(
-        'span.text-muted.text-base.font-medium.select-none'
+        'span.text-muted.text-base.font-medium.cursor-pointer'
       )
 
       // Click the forgot password link

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

@@ -34,13 +34,10 @@
           {{ t('auth.login.passwordLabel') }}
         </label>
         <span
-          :class="
-            cn('text-base font-medium text-muted select-none', {
-              'cursor-not-allowed opacity-50':
-                !$form.email?.value || $form.email?.invalid,
-              'cursor-pointer': $form.email?.value && !$form.email?.invalid
-            })
-          "
+          class="cursor-pointer text-base font-medium text-muted select-none"
+          :class="{
+            'text-link-disabled': !$form.email?.value || $form.email?.invalid
+          }"
           @click="handleForgotPassword($form.email?.value, $form.email?.valid)"
         >
           {{ t('auth.login.forgotPassword') }}
@@ -92,7 +89,6 @@ import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthAction
 import { signInSchema } from '@/schemas/signInSchema'
 import type { SignInData } from '@/schemas/signInSchema'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { cn } from '@/utils/tailwindUtil'
 
 const authStore = useFirebaseAuthStore()
 const firebaseAuthActions = useFirebaseAuthActions()
@@ -130,3 +126,11 @@ const handleForgotPassword = async (
   await firebaseAuthActions.sendPasswordReset(email)
 }
 </script>
+
+<style scoped>
+@reference '../../../../assets/css/style.css';
+
+.text-link-disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+</style>

src/components/graph/GraphCanvas.vue

@@ -21,7 +21,7 @@
         </div>
       </div>
     </template>
-    <template v-if="showUI && !isBuilderMode" #side-toolbar>
+    <template v-if="showUI && !appModeStore.isBuilderMode" #side-toolbar>
       <SideToolbar />
     </template>
     <template v-if="showUI" #side-bar-panel>
@@ -31,24 +31,26 @@
         <ExtensionSlot v-if="activeSidebarTab" :extension="activeSidebarTab" />
       </div>
     </template>
-    <template v-if="showUI && !isBuilderMode" #topmenu>
+    <template v-if="showUI && !appModeStore.isBuilderMode" #topmenu>
       <TopMenuSection />
     </template>
     <template v-if="showUI" #bottom-panel>
       <BottomPanel />
     </template>
     <template v-if="showUI" #right-side-panel>
-      <AppBuilder v-if="mode === 'builder:select'" />
-      <NodePropertiesPanel v-else-if="!isBuilderMode" />
+      <NodePropertiesPanel v-if="!appModeStore.isBuilderMode" />
     </template>
     <template #graph-canvas-panel>
       <GraphCanvasMenu
-        v-if="canvasMenuEnabled && !isBuilderMode"
+        v-if="canvasMenuEnabled && !appModeStore.isBuilderMode"
         class="pointer-events-auto"
       />
       <MiniMap
         v-if="
-          comfyAppReady && minimapEnabled && betaMenuEnabled && !isBuilderMode
+          comfyAppReady &&
+          minimapEnabled &&
+          betaMenuEnabled &&
+          !appModeStore.isBuilderMode
         "
         class="pointer-events-auto"
       />
@@ -127,7 +129,6 @@ import { isMiddlePointerInput } from '@/base/pointerUtils'
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import TopMenuSection from '@/components/TopMenuSection.vue'
 import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
-import AppBuilder from '@/components/builder/AppBuilder.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import DomWidgets from '@/components/graph/DomWidgets.vue'
 import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
@@ -181,7 +182,7 @@ import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
-import { useAppMode } from '@/composables/useAppMode'
+import { useAppModeStore } from '@/stores/appModeStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isNativeWindow } from '@/utils/envUtil'
 import { forEachNode } from '@/utils/graphTraversalUtil'
@@ -202,7 +203,7 @@ const nodeSearchboxPopoverRef = shallowRef<InstanceType<
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
-const { mode, isBuilderMode } = useAppMode()
+const appModeStore = useAppModeStore()
 const canvasStore = useCanvasStore()
 const workflowStore = useWorkflowStore()
 const executionStore = useExecutionStore()

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

@@ -8,38 +8,20 @@ import { createI18n } from 'vue-i18n'
 
 // Import after mocks
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
-import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/comfyWorkflow'
-import {
-  ComfyWorkflow,
-  useWorkflowStore
-} from '@/platform/workflow/management/stores/workflowStore'
+import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
+import type { LoadedComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { ChangeTracker } from '@/scripts/changeTracker'
-import { defaultGraph } from '@/scripts/defaultGraph'
 import { createMockPositionable } from '@/utils/__tests__/litegraphTestUtils'
 
 function createMockWorkflow(
   overrides: Partial<LoadedComfyWorkflow> = {}
 ): LoadedComfyWorkflow {
-  const workflow = new ComfyWorkflow({
-    path: 'workflows/color-picker-test.json',
-    modified: 0,
-    size: 0
-  })
-
-  const changeTracker = Object.assign(
-    new ChangeTracker(workflow, structuredClone(defaultGraph)),
-    {
+  return {
+    changeTracker: {
       checkState: vi.fn() as Mock
-    }
-  )
-
-  const workflowOverrides = {
-    changeTracker,
+    },
     ...overrides
-  } satisfies Partial<LoadedComfyWorkflow>
-
-  return Object.assign(workflow, workflowOverrides) as LoadedComfyWorkflow
+  } as Partial<LoadedComfyWorkflow> as LoadedComfyWorkflow
 }
 
 // Mock the litegraph module
@@ -128,14 +110,12 @@ describe('ColorPickerButton', () => {
     const wrapper = createWrapper()
     const button = wrapper.find('button')
 
-    expect(wrapper.findComponent({ name: 'SelectButton' }).exists()).toBe(false)
+    expect(wrapper.find('.color-picker-container').exists()).toBe(false)
 
     await button.trigger('click')
-    const picker = wrapper.findComponent({ name: 'SelectButton' })
-    expect(picker.exists()).toBe(true)
-    expect(picker.findAll('button').length).toBeGreaterThan(0)
+    expect(wrapper.find('.color-picker-container').exists()).toBe(true)
 
     await button.trigger('click')
-    expect(wrapper.findComponent({ name: 'SelectButton' }).exists()).toBe(false)
+    expect(wrapper.find('.color-picker-container').exists()).toBe(false)
   })
 })

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -11,17 +11,13 @@
       @click="() => (showColorPicker = !showColorPicker)"
     >
       <div class="flex items-center gap-1 px-0">
-        <i
-          class="pi pi-circle-fill"
-          data-testid="color-picker-current-color"
-          :style="{ color: currentColor ?? '' }"
-        />
+        <i class="pi pi-circle-fill" :style="{ color: currentColor ?? '' }" />
         <i class="icon-[lucide--chevron-down]" />
       </div>
     </Button>
     <div
       v-if="showColorPicker"
-      class="absolute -top-10 left-1/2 -translate-x-1/2"
+      class="color-picker-container absolute -top-10 left-1/2"
     >
       <SelectButton
         :model-value="selectedColorOption"
@@ -163,7 +159,13 @@ watch(
 </script>
 
 <style scoped>
+@reference '../../../assets/css/style.css';
+
+.color-picker-container {
+  transform: translateX(-50%);
+}
+
 :deep(.p-togglebutton) {
-  padding: calc(var(--spacing) * 2) var(--spacing);
+  @apply py-2 px-1;
 }
 </style>

src/components/graph/widgets/DomWidget.vue

@@ -2,14 +2,13 @@
   <div
     v-show="widgetState.visible"
     ref="widgetElement"
-    class="dom-widget h-full w-full"
+    class="dom-widget"
     :title="tooltip"
     :style="style"
   >
     <component
       :is="widget.component"
       v-if="isComponentWidget(widget)"
-      class="h-full w-full"
       :model-value="widget.value"
       :widget="widget"
       v-bind="widget.props"
@@ -175,8 +174,6 @@ const mountElementIfVisible = () => {
   if (widgetElement.value.contains(widget.element)) {
     return
   }
-
-  widget.element.classList.add('h-full', 'w-full')
   widgetElement.value.appendChild(widget.element)
 }
 
@@ -199,3 +196,11 @@ watch(
 
 whenever(() => !canvasStore.linearMode, mountElementIfVisible)
 </script>
+
+<style scoped>
+@reference '../../../assets/css/style.css';
+
+.dom-widget > * {
+  @apply h-full w-full;
+}
+</style>

src/components/maskeditor/controls/SliderControl.vue

@@ -24,7 +24,9 @@ interface Props {
   modelValue: number
 }
 
-const { label, min, max, step = 1, modelValue } = defineProps<Props>()
+withDefaults(defineProps<Props>(), {
+  step: 1
+})
 
 const emit = defineEmits<{
   'update:modelValue': [value: number]

src/components/node/NodeHelpContent.vue

@@ -8,14 +8,11 @@
     <!-- Markdown fetched successfully -->
     <div
       v-else-if="!error"
-      class="markdown-content overflow-visible text-sm leading-(--text-sm--line-height)"
+      class="markdown-content"
       v-html="renderedHelpHtml"
     />
     <!-- Fallback: markdown not found or fetch error -->
-    <div
-      v-else
-      class="fallback-content space-y-6 text-sm leading-(--text-sm--line-height)"
-    >
+    <div v-else class="fallback-content space-y-6 text-sm">
       <p v-if="node.description">
         <strong>{{ $t('g.description') }}:</strong> {{ node.description }}
       </p>
@@ -25,52 +22,48 @@
           <strong>{{ $t('nodeHelpPage.inputs') }}:</strong>
         </p>
         <!-- Using plain HTML table instead of DataTable for consistent styling with markdown content -->
-        <div class="overflow-x-auto">
-          <table>
-            <thead>
-              <tr>
-                <th>{{ $t('g.name') }}</th>
-                <th>{{ $t('nodeHelpPage.type') }}</th>
-                <th>{{ $t('g.description') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="input in inputList" :key="input.name">
-                <td>
-                  <code>{{ input.name }}</code>
-                </td>
-                <td>{{ input.type }}</td>
-                <td>{{ input.tooltip || '-' }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <table class="overflow-x-auto">
+          <thead>
+            <tr>
+              <th>{{ $t('g.name') }}</th>
+              <th>{{ $t('nodeHelpPage.type') }}</th>
+              <th>{{ $t('g.description') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="input in inputList" :key="input.name">
+              <td>
+                <code>{{ input.name }}</code>
+              </td>
+              <td>{{ input.type }}</td>
+              <td>{{ input.tooltip || '-' }}</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
 
       <div v-if="outputList.length">
         <p>
           <strong>{{ $t('nodeHelpPage.outputs') }}:</strong>
         </p>
-        <div class="overflow-x-auto">
-          <table>
-            <thead>
-              <tr>
-                <th>{{ $t('g.name') }}</th>
-                <th>{{ $t('nodeHelpPage.type') }}</th>
-                <th>{{ $t('g.description') }}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="output in outputList" :key="output.name">
-                <td>
-                  <code>{{ output.name }}</code>
-                </td>
-                <td>{{ output.type }}</td>
-                <td>{{ output.tooltip || '-' }}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <table class="overflow-x-auto">
+          <thead>
+            <tr>
+              <th>{{ $t('g.name') }}</th>
+              <th>{{ $t('nodeHelpPage.type') }}</th>
+              <th>{{ $t('g.description') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="output in outputList" :key="output.name">
+              <td>
+                <code>{{ output.name }}</code>
+              </td>
+              <td>{{ output.type }}</td>
+              <td>{{ output.tooltip || '-' }}</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
@@ -107,59 +100,39 @@ const outputList = computed(() =>
 </script>
 
 <style scoped>
+@reference './../../assets/css/style.css';
+
 .node-help-content :deep(:is(img, video)) {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin-bottom: calc(var(--spacing) * 4);
+  @apply max-w-full h-auto block mb-4;
+}
+
+.markdown-content,
+.fallback-content {
+  @apply text-sm overflow-visible;
 }
 
 .markdown-content :deep(h1),
 .fallback-content h1 {
-  margin-top: calc(var(--spacing) * 8);
-  margin-bottom: calc(var(--spacing) * 4);
-  font-size: var(--text-2xl);
-  font-weight: var(--font-weight-bold);
+  @apply text-[22px] font-bold mt-8 mb-4 first:mt-0;
 }
 
 .markdown-content :deep(h2),
 .fallback-content h2 {
-  margin-top: calc(var(--spacing) * 8);
-  margin-bottom: calc(var(--spacing) * 4);
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-bold);
+  @apply text-[18px] font-bold mt-8 mb-4 first:mt-0;
 }
 
 .markdown-content :deep(h3),
 .fallback-content h3 {
-  margin-top: calc(var(--spacing) * 8);
-  margin-bottom: calc(var(--spacing) * 4);
-  font-size: var(--text-base);
-  font-weight: var(--font-weight-bold);
+  @apply text-[16px] font-bold mt-8 mb-4 first:mt-0;
 }
 
 .markdown-content :deep(h4),
-.fallback-content h4 {
-  margin-top: calc(var(--spacing) * 8);
-  margin-bottom: calc(var(--spacing) * 4);
-  font-size: var(--text-sm);
-  font-weight: var(--font-weight-bold);
-}
-
 .markdown-content :deep(h5),
-.fallback-content h5 {
-  margin-top: calc(var(--spacing) * 8);
-  margin-bottom: calc(var(--spacing) * 4);
-  font-size: var(--text-sm);
-  font-weight: var(--font-weight-bold);
-}
-
 .markdown-content :deep(h6),
+.fallback-content h4,
+.fallback-content h5,
 .fallback-content h6 {
-  margin-top: calc(var(--spacing) * 8);
-  margin-bottom: calc(var(--spacing) * 4);
-  font-size: var(--text-xs);
-  font-weight: var(--font-weight-bold);
+  @apply mt-8 mb-4 first:mt-0;
 }
 
 .markdown-content :deep(td),
@@ -182,8 +155,7 @@ const outputList = computed(() =>
 .markdown-content :deep(ol),
 .fallback-content ul,
 .fallback-content ol {
-  margin-block: calc(var(--spacing) * 2);
-  padding-left: calc(var(--spacing) * 8);
+  @apply pl-8 my-2;
 }
 
 .markdown-content :deep(ul ul),
@@ -194,42 +166,36 @@ const outputList = computed(() =>
 .fallback-content ol ol,
 .fallback-content ul ol,
 .fallback-content ol ul {
-  margin-block: calc(var(--spacing) * 2);
-  padding-left: calc(var(--spacing) * 6);
+  @apply pl-6 my-2;
 }
 
 .markdown-content :deep(li),
 .fallback-content li {
-  margin-block: calc(var(--spacing) * 2);
+  @apply my-2;
 }
 
 .markdown-content :deep(*:first-child),
 .fallback-content > *:first-child {
-  margin-top: 0;
+  @apply mt-0;
 }
 
 .markdown-content :deep(code),
 .fallback-content code {
   color: var(--code-text-color);
   background-color: var(--code-bg-color);
-  border-radius: var(--radius);
-  padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
+  @apply rounded px-1.5 py-0.5;
 }
 
 .markdown-content :deep(table),
 .fallback-content table {
-  border-collapse: collapse;
-}
-
-.fallback-content table {
-  width: 100%;
+  @apply w-full border-collapse;
 }
 
 .markdown-content :deep(th),
 .markdown-content :deep(td),
 .fallback-content th,
 .fallback-content td {
-  padding: calc(var(--spacing) * 2);
+  @apply px-2 py-2;
 }
 
 .markdown-content :deep(tr),
@@ -249,22 +215,16 @@ const outputList = computed(() =>
 
 .markdown-content :deep(pre),
 .fallback-content pre {
-  margin-block: calc(var(--spacing) * 4);
-  overflow-x: auto;
-  border-radius: var(--radius);
-  padding: calc(var(--spacing) * 4);
+  @apply rounded p-4 my-4 overflow-x-auto;
   background-color: var(--code-block-bg-color);
 
   code {
-    background-color: transparent;
-    padding: 0;
+    @apply bg-transparent p-0;
     color: var(--p-text-color);
   }
 }
 
 .markdown-content :deep(table) {
-  display: block;
-  width: 100%;
-  overflow-x: auto;
+  @apply overflow-x-auto;
 }
 </style>

src/components/painter/WidgetPainter.vue

@@ -1,359 +0,0 @@
-<template>
-  <div
-    class="widget-expands flex h-full w-full flex-col gap-1"
-    @pointerdown.stop
-    @pointermove.stop
-    @pointerup.stop
-  >
-    <div
-      class="flex min-h-0 flex-1 items-center justify-center overflow-hidden rounded-lg bg-node-component-surface"
-    >
-      <div class="relative max-h-full w-full" :style="canvasContainerStyle">
-        <img
-          v-if="inputImageUrl"
-          :src="inputImageUrl"
-          class="absolute inset-0 size-full"
-          draggable="false"
-          @load="handleInputImageLoad"
-          @dragstart.prevent
-        />
-        <canvas
-          ref="canvasEl"
-          class="absolute inset-0 size-full cursor-none touch-none"
-          @pointerdown="handlePointerDown"
-          @pointermove="handlePointerMove"
-          @pointerup="handlePointerUp"
-          @pointerenter="handlePointerEnter"
-          @pointerleave="handlePointerLeave"
-        />
-        <div
-          v-show="cursorVisible"
-          class="pointer-events-none absolute left-0 top-0 rounded-full border border-black/60 shadow-[0_0_0_1px_rgba(255,255,255,0.8)]"
-          :style="cursorStyle"
-        />
-      </div>
-    </div>
-
-    <div
-      v-if="isImageInputConnected"
-      class="text-center text-xs text-muted-foreground"
-    >
-      {{ canvasWidth }} x {{ canvasHeight }}
-    </div>
-
-    <div
-      ref="controlsEl"
-      :class="
-        cn(
-          'grid shrink-0 gap-x-1 gap-y-1',
-          compact ? 'grid-cols-1' : 'grid-cols-[auto_1fr]'
-        )
-      "
-    >
-      <div
-        v-if="!compact"
-        class="flex w-28 items-center truncate text-sm text-muted-foreground"
-      >
-        {{ $t('painter.tool') }}
-      </div>
-      <div
-        class="flex h-8 items-center gap-1 rounded-sm bg-component-node-widget-background p-1"
-      >
-        <Button
-          variant="textonly"
-          size="unset"
-          :class="
-            cn(
-              'flex-1 self-stretch px-2 text-xs transition-colors',
-              tool === PAINTER_TOOLS.BRUSH
-                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
-                : 'text-node-text-muted hover:text-node-text'
-            )
-          "
-          @click="tool = PAINTER_TOOLS.BRUSH"
-        >
-          {{ $t('painter.brush') }}
-        </Button>
-        <Button
-          variant="textonly"
-          size="unset"
-          :class="
-            cn(
-              'flex-1 self-stretch px-2 text-xs transition-colors',
-              tool === PAINTER_TOOLS.ERASER
-                ? 'rounded-sm bg-component-node-widget-background-selected text-base-foreground'
-                : 'text-node-text-muted hover:text-node-text'
-            )
-          "
-          @click="tool = PAINTER_TOOLS.ERASER"
-        >
-          {{ $t('painter.eraser') }}
-        </Button>
-      </div>
-
-      <div
-        v-if="!compact"
-        class="flex w-28 items-center truncate text-sm text-muted-foreground"
-      >
-        {{ $t('painter.size') }}
-      </div>
-      <div
-        class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
-      >
-        <Slider
-          :model-value="[brushSize]"
-          :min="1"
-          :max="200"
-          :step="1"
-          class="flex-1"
-          @update:model-value="(v) => v?.length && (brushSize = v[0])"
-        />
-        <span class="w-8 text-center text-xs text-node-text-muted">{{
-          brushSize
-        }}</span>
-      </div>
-
-      <template v-if="tool === PAINTER_TOOLS.BRUSH">
-        <div
-          class="flex w-28 items-center truncate text-sm text-muted-foreground"
-        >
-          {{ $t('painter.color') }}
-        </div>
-        <div
-          class="flex h-8 w-full items-center gap-2 rounded-lg bg-component-node-widget-background px-4"
-        >
-          <input
-            type="color"
-            :value="brushColorDisplay"
-            class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-moz-color-swatch]:rounded-full"
-            @input="
-              (e) => (brushColorDisplay = (e.target as HTMLInputElement).value)
-            "
-          />
-          <span class="min-w-[4ch] truncate text-xs">{{
-            brushColorDisplay
-          }}</span>
-          <span class="ml-auto flex items-center text-xs text-node-text-muted">
-            <input
-              type="number"
-              :value="brushOpacityPercent"
-              min="0"
-              max="100"
-              step="1"
-              class="w-7 appearance-none border-0 bg-transparent text-right text-xs text-node-text-muted outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [-moz-appearance:textfield]"
-              @click.prevent
-              @change="
-                (e) => {
-                  const val = Math.min(
-                    100,
-                    Math.max(0, Number((e.target as HTMLInputElement).value))
-                  )
-                  brushOpacityPercent = val
-                  ;(e.target as HTMLInputElement).value = String(val)
-                }
-              "
-            />%</span
-          >
-        </div>
-
-        <div
-          class="flex w-28 items-center truncate text-sm text-muted-foreground"
-        >
-          {{ $t('painter.hardness') }}
-        </div>
-        <div
-          class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
-        >
-          <Slider
-            :model-value="[brushHardnessPercent]"
-            :min="0"
-            :max="100"
-            :step="1"
-            class="flex-1"
-            @update:model-value="
-              (v) => v?.length && (brushHardnessPercent = v[0])
-            "
-          />
-          <span class="w-8 text-center text-xs text-node-text-muted"
-            >{{ brushHardnessPercent }}%</span
-          >
-        </div>
-      </template>
-
-      <template v-if="!isImageInputConnected">
-        <div
-          class="flex w-28 items-center truncate text-sm text-muted-foreground"
-        >
-          {{ $t('painter.width') }}
-        </div>
-        <div
-          class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
-        >
-          <Slider
-            :model-value="[canvasWidth]"
-            :min="64"
-            :max="4096"
-            :step="64"
-            class="flex-1"
-            @update:model-value="(v) => v?.length && (canvasWidth = v[0])"
-          />
-          <span class="w-10 text-center text-xs text-node-text-muted">{{
-            canvasWidth
-          }}</span>
-        </div>
-
-        <div
-          class="flex w-28 items-center truncate text-sm text-muted-foreground"
-        >
-          {{ $t('painter.height') }}
-        </div>
-        <div
-          class="flex h-8 items-center gap-2 rounded-lg bg-component-node-widget-background pr-2 pl-3"
-        >
-          <Slider
-            :model-value="[canvasHeight]"
-            :min="64"
-            :max="4096"
-            :step="64"
-            class="flex-1"
-            @update:model-value="(v) => v?.length && (canvasHeight = v[0])"
-          />
-          <span class="w-10 text-center text-xs text-node-text-muted">{{
-            canvasHeight
-          }}</span>
-        </div>
-
-        <div
-          class="flex w-28 items-center truncate text-sm text-muted-foreground"
-        >
-          {{ $t('painter.background') }}
-        </div>
-        <div
-          class="flex h-8 w-full items-center gap-2 rounded-lg bg-component-node-widget-background px-4"
-        >
-          <input
-            type="color"
-            :value="backgroundColorDisplay"
-            class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-moz-color-swatch]:rounded-full"
-            @input="
-              (e) =>
-                (backgroundColorDisplay = (e.target as HTMLInputElement).value)
-            "
-          />
-          <span class="min-w-[4ch] truncate text-xs">{{
-            backgroundColorDisplay
-          }}</span>
-        </div>
-      </template>
-
-      <Button
-        variant="secondary"
-        size="md"
-        :class="
-          cn(
-            'gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground',
-            !compact && 'col-span-2'
-          )
-        "
-        @click="handleClear"
-      >
-        <i class="icon-[lucide--undo-2]" />
-        {{ $t('painter.clear') }}
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
-import { computed, useTemplateRef } from 'vue'
-
-import Button from '@/components/ui/button/Button.vue'
-import Slider from '@/components/ui/slider/Slider.vue'
-import { PAINTER_TOOLS, usePainter } from '@/composables/painter/usePainter'
-import { toHexFromFormat } from '@/utils/colorUtil'
-import { cn } from '@/utils/tailwindUtil'
-
-const { nodeId } = defineProps<{
-  nodeId: string
-}>()
-
-const modelValue = defineModel<string>({ default: '' })
-
-const canvasEl = useTemplateRef<HTMLCanvasElement>('canvasEl')
-const controlsEl = useTemplateRef<HTMLDivElement>('controlsEl')
-const { width: controlsWidth } = useElementSize(controlsEl)
-const compact = computed(
-  () => controlsWidth.value > 0 && controlsWidth.value < 350
-)
-
-const {
-  tool,
-  brushSize,
-  brushColor,
-  brushOpacity,
-  brushHardness,
-  backgroundColor,
-  canvasWidth,
-  canvasHeight,
-  cursorX,
-  cursorY,
-  cursorVisible,
-  displayBrushSize,
-  inputImageUrl,
-  isImageInputConnected,
-  handlePointerDown,
-  handlePointerMove,
-  handlePointerUp,
-  handlePointerEnter,
-  handlePointerLeave,
-  handleInputImageLoad,
-  handleClear
-} = usePainter(nodeId, { canvasEl, modelValue })
-
-const canvasContainerStyle = computed(() => ({
-  aspectRatio: `${canvasWidth.value} / ${canvasHeight.value}`,
-  backgroundColor: isImageInputConnected.value
-    ? undefined
-    : backgroundColor.value
-}))
-
-const cursorStyle = computed(() => {
-  const size = displayBrushSize.value
-  const x = cursorX.value - size / 2
-  const y = cursorY.value - size / 2
-  return {
-    width: `${size}px`,
-    height: `${size}px`,
-    transform: `translate(${x}px, ${y}px)`
-  }
-})
-
-const brushOpacityPercent = computed({
-  get: () => Math.round(brushOpacity.value * 100),
-  set: (val: number) => {
-    brushOpacity.value = val / 100
-  }
-})
-
-const brushHardnessPercent = computed({
-  get: () => Math.round(brushHardness.value * 100),
-  set: (val: number) => {
-    brushHardness.value = val / 100
-  }
-})
-
-const brushColorDisplay = computed({
-  get: () => toHexFromFormat(brushColor.value, 'hex'),
-  set: (val: unknown) => {
-    brushColor.value = toHexFromFormat(val, 'hex')
-  }
-})
-
-const backgroundColorDisplay = computed({
-  get: () => toHexFromFormat(backgroundColor.value, 'hex'),
-  set: (val: unknown) => {
-    backgroundColor.value = toHexFromFormat(val, 'hex')
-  }
-})
-</script>

src/components/queue/JobHistoryActionsMenu.vue

@@ -20,7 +20,7 @@
             class="w-full justify-between text-sm font-light"
             variant="textonly"
             size="sm"
-            @click="onToggleDockedJobHistory(close)"
+            @click="onToggleDockedJobHistory"
           >
             <span class="flex items-center gap-2">
               <i
@@ -79,7 +79,6 @@ import Button from '@/components/ui/button/Button.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
 const emit = defineEmits<{
   (e: 'clearHistory'): void
@@ -87,7 +86,6 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const settingStore = useSettingStore()
-const sidebarTabStore = useSidebarTabStore()
 
 const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
 const isQueuePanelV2Enabled = computed(() =>
@@ -100,22 +98,7 @@ const onClearHistoryFromMenu = (close: () => void) => {
   emit('clearHistory')
 }
 
-const onToggleDockedJobHistory = async (close: () => void) => {
-  close()
-
-  try {
-    if (isQueuePanelV2Enabled.value) {
-      await settingStore.setMany({
-        'Comfy.Queue.QPOV2': false,
-        'Comfy.Queue.History.Expanded': true
-      })
-      return
-    }
-
-    sidebarTabStore.activeSidebarTabId = 'job-history'
-    await settingStore.set('Comfy.Queue.QPOV2', true)
-  } catch {
-    return
-  }
+const onToggleDockedJobHistory = async () => {
+  await settingStore.set('Comfy.Queue.QPOV2', !isQueuePanelV2Enabled.value)
 }
 </script>

src/components/queue/QueueOverlayHeader.test.ts

@@ -23,27 +23,18 @@ vi.mock('@/components/ui/Popover.vue', () => {
   return { default: PopoverStub }
 })
 
-const mockGetSetting = vi.fn<(key: string) => boolean | undefined>((key) =>
+const mockGetSetting = vi.fn((key: string) =>
   key === 'Comfy.Queue.QPOV2' ? true : undefined
 )
 const mockSetSetting = vi.fn()
-const mockSetMany = vi.fn()
-const mockSidebarTabStore = {
-  activeSidebarTabId: null as string | null
-}
 
 vi.mock('@/platform/settings/settingStore', () => ({
   useSettingStore: () => ({
     get: mockGetSetting,
-    set: mockSetSetting,
-    setMany: mockSetMany
+    set: mockSetSetting
   })
 }))
 
-vi.mock('@/stores/workspace/sidebarTabStore', () => ({
-  useSidebarTabStore: () => mockSidebarTabStore
-}))
-
 import QueueOverlayHeader from './QueueOverlayHeader.vue'
 import * as tooltipConfig from '@/composables/useTooltipConfig'
 
@@ -90,11 +81,6 @@ describe('QueueOverlayHeader', () => {
   beforeEach(() => {
     popoverCloseSpy.mockClear()
     mockSetSetting.mockClear()
-    mockSetMany.mockClear()
-    mockSidebarTabStore.activeSidebarTabId = null
-    mockGetSetting.mockImplementation((key: string) =>
-      key === 'Comfy.Queue.QPOV2' ? true : undefined
-    )
   })
 
   it('renders header title', () => {
@@ -139,7 +125,7 @@ describe('QueueOverlayHeader', () => {
     expect(wrapper.emitted('clearHistory')).toHaveLength(1)
   })
 
-  it('opens floating queue progress overlay when disabling from the menu', async () => {
+  it('toggles docked job history setting from the menu', async () => {
     const wrapper = mountHeader()
 
     const dockedJobHistoryButton = wrapper.get(
@@ -147,64 +133,7 @@ describe('QueueOverlayHeader', () => {
     )
     await dockedJobHistoryButton.trigger('click')
 
-    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
-    expect(mockSetMany).toHaveBeenCalledTimes(1)
-    expect(mockSetMany).toHaveBeenCalledWith({
-      'Comfy.Queue.QPOV2': false,
-      'Comfy.Queue.History.Expanded': true
-    })
-    expect(mockSetSetting).not.toHaveBeenCalled()
-    expect(mockSidebarTabStore.activeSidebarTabId).toBe(null)
-  })
-
-  it('opens docked job history sidebar when enabling from the menu', async () => {
-    mockGetSetting.mockImplementation((key: string) =>
-      key === 'Comfy.Queue.QPOV2' ? false : undefined
-    )
-    const wrapper = mountHeader()
-
-    const dockedJobHistoryButton = wrapper.get(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await dockedJobHistoryButton.trigger('click')
-
-    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
     expect(mockSetSetting).toHaveBeenCalledTimes(1)
-    expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', true)
-    expect(mockSetMany).not.toHaveBeenCalled()
-    expect(mockSidebarTabStore.activeSidebarTabId).toBe('job-history')
-  })
-
-  it('keeps docked target open even when enabling persistence fails', async () => {
-    mockGetSetting.mockImplementation((key: string) =>
-      key === 'Comfy.Queue.QPOV2' ? false : undefined
-    )
-    mockSetSetting.mockRejectedValueOnce(new Error('persistence failed'))
-    const wrapper = mountHeader()
-
-    const dockedJobHistoryButton = wrapper.get(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await dockedJobHistoryButton.trigger('click')
-
-    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
-    expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', true)
-    expect(mockSidebarTabStore.activeSidebarTabId).toBe('job-history')
-  })
-
-  it('closes the menu when disabling persistence fails', async () => {
-    mockSetMany.mockRejectedValueOnce(new Error('persistence failed'))
-    const wrapper = mountHeader()
-
-    const dockedJobHistoryButton = wrapper.get(
-      '[data-testid="docked-job-history-action"]'
-    )
-    await dockedJobHistoryButton.trigger('click')
-
-    expect(popoverCloseSpy).toHaveBeenCalledTimes(1)
-    expect(mockSetMany).toHaveBeenCalledWith({
-      'Comfy.Queue.QPOV2': false,
-      'Comfy.Queue.History.Expanded': true
-    })
+    expect(mockSetSetting).toHaveBeenCalledWith('Comfy.Queue.QPOV2', false)
   })
 })

src/components/queue/QueueProgressOverlay.vue

@@ -75,10 +75,15 @@ import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 
 type OverlayState = 'hidden' | 'active' | 'expanded'
 
-const { expanded, menuHovered = false } = defineProps<{
-  expanded?: boolean
-  menuHovered?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    expanded?: boolean
+    menuHovered?: boolean
+  }>(),
+  {
+    menuHovered: false
+  }
+)
 
 const emit = defineEmits<{
   (e: 'update:expanded', value: boolean): void
@@ -101,12 +106,13 @@ const {
   currentNodeProgressStyle
 } = useQueueProgress()
 const isHovered = ref(false)
-const isOverlayHovered = computed(() => isHovered.value || menuHovered)
+const isOverlayHovered = computed(() => isHovered.value || props.menuHovered)
 const internalExpanded = ref(false)
 const isExpanded = computed({
-  get: () => (expanded === undefined ? internalExpanded.value : expanded),
+  get: () =>
+    props.expanded === undefined ? internalExpanded.value : props.expanded,
   set: (value) => {
-    if (expanded === undefined) {
+    if (props.expanded === undefined) {
       internalExpanded.value = value
     }
     emit('update:expanded', value)

src/components/queue/job/JobAssetsList.test.ts

@@ -1,146 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-
-import type { JobGroup, JobListItem } from '@/composables/queue/useJobList'
-import type { JobListItem as ApiJobListItem } from '@/platform/remote/comfyui/jobs/jobTypes'
-import { ResultItemImpl, TaskItemImpl } from '@/stores/queueStore'
-
-import JobAssetsList from './JobAssetsList.vue'
-
-vi.mock('vue-i18n', () => {
-  return {
-    createI18n: () => ({
-      global: {
-        t: (key: string) => key,
-        te: () => true,
-        d: (value: string) => value
-      }
-    }),
-    useI18n: () => ({
-      t: (key: string) => key
-    })
-  }
-})
-
-const createResultItem = (
-  filename: string,
-  mediaType: string = 'images'
-): ResultItemImpl => {
-  const item = new ResultItemImpl({
-    filename,
-    subfolder: '',
-    type: 'output',
-    nodeId: 'node-1',
-    mediaType
-  })
-  Object.defineProperty(item, 'url', {
-    get: () => `/api/view/${filename}`
-  })
-  return item
-}
-
-const createTaskRef = (preview?: ResultItemImpl): TaskItemImpl => {
-  const job: ApiJobListItem = {
-    id: `task-${Math.random().toString(36).slice(2)}`,
-    status: 'completed',
-    create_time: Date.now(),
-    preview_output: null,
-    outputs_count: preview ? 1 : 0,
-    priority: 0
-  }
-  const flatOutputs = preview ? [preview] : []
-  return new TaskItemImpl(job, {}, flatOutputs)
-}
-
-const buildJob = (overrides: Partial<JobListItem> = {}): JobListItem => ({
-  id: 'job-1',
-  title: 'Job 1',
-  meta: 'meta',
-  state: 'completed',
-  taskRef: createTaskRef(createResultItem('job-1.png')),
-  ...overrides
-})
-
-const mountJobAssetsList = (jobs: JobListItem[]) => {
-  const displayedJobGroups: JobGroup[] = [
-    {
-      key: 'group-1',
-      label: 'Group 1',
-      items: jobs
-    }
-  ]
-
-  return mount(JobAssetsList, {
-    props: { displayedJobGroups }
-  })
-}
-
-describe('JobAssetsList', () => {
-  it('emits viewItem on preview-click for completed jobs with preview', async () => {
-    const job = buildJob()
-    const wrapper = mountJobAssetsList([job])
-
-    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
-    listItem.vm.$emit('preview-click')
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('viewItem')).toEqual([[job]])
-  })
-
-  it('emits viewItem on double-click for completed jobs with preview', async () => {
-    const job = buildJob()
-    const wrapper = mountJobAssetsList([job])
-
-    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
-    await listItem.trigger('dblclick')
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('viewItem')).toEqual([[job]])
-  })
-
-  it('emits viewItem on double-click for completed video jobs without icon image', async () => {
-    const job = buildJob({
-      iconImageUrl: undefined,
-      taskRef: createTaskRef(createResultItem('job-1.webm', 'video'))
-    })
-    const wrapper = mountJobAssetsList([job])
-
-    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
-    expect(listItem.props('previewUrl')).toBe('/api/view/job-1.webm')
-    expect(listItem.props('isVideoPreview')).toBe(true)
-
-    await listItem.trigger('dblclick')
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('viewItem')).toEqual([[job]])
-  })
-
-  it('emits viewItem on icon click for completed 3D jobs without preview tile', async () => {
-    const job = buildJob({
-      iconImageUrl: undefined,
-      taskRef: createTaskRef(createResultItem('job-1.glb', 'model'))
-    })
-    const wrapper = mountJobAssetsList([job])
-
-    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
-
-    await listItem.find('i').trigger('click')
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('viewItem')).toEqual([[job]])
-  })
-
-  it('does not emit viewItem on double-click for non-completed jobs', async () => {
-    const job = buildJob({
-      state: 'running',
-      taskRef: createTaskRef(createResultItem('job-1.png'))
-    })
-    const wrapper = mountJobAssetsList([job])
-
-    const listItem = wrapper.findComponent({ name: 'AssetsListItem' })
-    await listItem.trigger('dblclick')
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.emitted('viewItem')).toBeUndefined()
-  })
-})

src/components/queue/job/JobAssetsList.vue

@@ -12,8 +12,7 @@
         v-for="job in group.items"
         :key="job.id"
         class="w-full shrink-0 cursor-default text-text-primary transition-colors hover:bg-secondary-background-hover"
-        :preview-url="getJobPreviewUrl(job)"
-        :is-video-preview="isVideoPreviewJob(job)"
+        :preview-url="job.iconImageUrl"
         :preview-alt="job.title"
         :icon-name="job.iconName ?? iconForJobState(job.state)"
         :icon-class="getJobIconClass(job)"
@@ -24,8 +23,6 @@
         @mouseenter="hoveredJobId = job.id"
         @mouseleave="onJobLeave(job.id)"
         @contextmenu.prevent.stop="$emit('menu', job, $event)"
-        @dblclick.stop="emitViewItem(job)"
-        @preview-click="emitViewItem(job)"
         @click.stop
       >
         <template v-if="hoveredJobId === job.id" #actions>
@@ -81,7 +78,7 @@ import { isActiveJobState } from '@/utils/queueUtil'
 
 defineProps<{ displayedJobGroups: JobGroup[] }>()
 
-const emit = defineEmits<{
+defineEmits<{
   (e: 'cancelItem', item: JobListItem): void
   (e: 'deleteItem', item: JobListItem): void
   (e: 'menu', item: JobListItem, ev: MouseEvent): void
@@ -103,28 +100,6 @@ const isCancelable = (job: JobListItem) =>
 const isFailedDeletable = (job: JobListItem) =>
   job.showClear !== false && job.state === 'failed'
 
-const getPreviewOutput = (job: JobListItem) => job.taskRef?.previewOutput
-
-const getJobPreviewUrl = (job: JobListItem) => {
-  const preview = getPreviewOutput(job)
-  if (preview?.isImage || preview?.isVideo) {
-    return preview.url
-  }
-  return job.iconImageUrl
-}
-
-const isVideoPreviewJob = (job: JobListItem) =>
-  job.state === 'completed' && !!getPreviewOutput(job)?.isVideo
-
-const isPreviewableCompletedJob = (job: JobListItem) =>
-  job.state === 'completed' && !!getPreviewOutput(job)
-
-const emitViewItem = (job: JobListItem) => {
-  if (isPreviewableCompletedJob(job)) {
-    emit('viewItem', job)
-  }
-}
-
 const getJobIconClass = (job: JobListItem): string | undefined => {
   const iconName = job.iconName ?? iconForJobState(job.state)
   if (!job.iconImageUrl && iconName === iconForJobState('pending')) {

src/components/queue/job/JobDetailsPopover.stories.ts

@@ -131,11 +131,11 @@ export const Queued: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-queued-1'
-      const priority = 104
+      const queueIndex = 104
 
       // Current job in pending
       queue.pendingTasks = [
-        makePendingTask(jobId, priority, Date.now() - 90_000)
+        makePendingTask(jobId, queueIndex, Date.now() - 90_000)
       ]
       // Add some other pending jobs to give context
       queue.pendingTasks.push(
@@ -179,13 +179,13 @@ export const QueuedParallel: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-queued-parallel'
-      const priority = 210
+      const queueIndex = 210
 
       // Current job in pending with some ahead
       queue.pendingTasks = [
         makePendingTask('job-ahead-1', 200, Date.now() - 180_000),
         makePendingTask('job-ahead-2', 205, Date.now() - 150_000),
-        makePendingTask(jobId, priority, Date.now() - 120_000)
+        makePendingTask(jobId, queueIndex, Date.now() - 120_000)
       ]
 
       // Seen 2 minutes ago - set via prompt metadata above
@@ -238,9 +238,9 @@ export const Running: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-running-1'
-      const priority = 300
+      const queueIndex = 300
       queue.runningTasks = [
-        makeRunningTask(jobId, priority, Date.now() - 65_000)
+        makeRunningTask(jobId, queueIndex, Date.now() - 65_000)
       ]
       queue.historyTasks = [
         makeHistoryTask('hist-r1', 250, 30, true),
@@ -279,10 +279,10 @@ export const QueuedZeroAheadSingleRunning: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-queued-zero-ahead-single'
-      const priority = 510
+      const queueIndex = 510
 
       queue.pendingTasks = [
-        makePendingTask(jobId, priority, Date.now() - 45_000)
+        makePendingTask(jobId, queueIndex, Date.now() - 45_000)
       ]
 
       queue.historyTasks = [
@@ -324,10 +324,10 @@ export const QueuedZeroAheadMultiRunning: Story = {
       const exec = useExecutionStore()
 
       const jobId = 'job-queued-zero-ahead-multi'
-      const priority = 520
+      const queueIndex = 520
 
       queue.pendingTasks = [
-        makePendingTask(jobId, priority, Date.now() - 20_000)
+        makePendingTask(jobId, queueIndex, Date.now() - 20_000)
       ]
 
       queue.historyTasks = [
@@ -380,8 +380,8 @@ export const Completed: Story = {
       const queue = useQueueStore()
 
       const jobId = 'job-completed-1'
-      const priority = 400
-      queue.historyTasks = [makeHistoryTask(jobId, priority, 37, true)]
+      const queueIndex = 400
+      queue.historyTasks = [makeHistoryTask(jobId, queueIndex, 37, true)]
 
       return { args: { ...args, jobId } }
     },
@@ -401,11 +401,11 @@ export const Failed: Story = {
       const queue = useQueueStore()
 
       const jobId = 'job-failed-1'
-      const priority = 410
+      const queueIndex = 410
       queue.historyTasks = [
         makeHistoryTask(
           jobId,
-          priority,
+          queueIndex,
           12,
           false,
           'Example error: invalid inputs for node X'

src/components/queue/job/JobDetailsPopover.vue

@@ -166,16 +166,16 @@ const queuedAtValue = computed(() =>
     : ''
 )
 
-const currentJobPriority = computed<number | null>(() => {
+const currentQueueIndex = computed<number | null>(() => {
   const task = taskForJob.value
-  return task ? Number(task.job.priority) : null
+  return task ? Number(task.queueIndex) : null
 })
 
 const jobsAhead = computed<number | null>(() => {
-  const idx = currentJobPriority.value
+  const idx = currentQueueIndex.value
   if (idx == null) return null
   const ahead = queueStore.pendingTasks.filter(
-    (t: TaskItemImpl) => Number(t.job.priority) < idx
+    (t: TaskItemImpl) => Number(t.queueIndex) < idx
   )
   return ahead.length
 })

src/components/queue/job/JobFilterTabs.vue

@@ -5,7 +5,7 @@
         v-for="tab in visibleJobTabs"
         :key="tab"
         :variant="selectedJobTab === tab ? 'secondary' : 'muted-textonly'"
-        size="md"
+        size="sm"
         @click="$emit('update:selectedJobTab', tab)"
       >
         {{ tabLabel(tab) }}

src/components/queue/job/QueueJobItem.vue

@@ -17,7 +17,10 @@
         @mouseenter="onPopoverEnter"
         @mouseleave="onPopoverLeave"
       >
-        <JobDetailsPopover :job-id="jobId" :workflow-id="workflowId" />
+        <JobDetailsPopover
+          :job-id="props.jobId"
+          :workflow-id="props.workflowId"
+        />
       </div>
     </Teleport>
     <Teleport to="body">
@@ -33,7 +36,7 @@
       >
         <QueueAssetPreview
           :image-url="iconImageUrl!"
-          :name="title"
+          :name="props.title"
           :time-label="rightText || undefined"
           @image-click="emit('view')"
         />
@@ -46,20 +49,23 @@
     >
       <div
         v-if="
-          state === 'running' &&
-          hasAnyProgressPercent(progressTotalPercent, progressCurrentPercent)
+          props.state === 'running' &&
+          hasAnyProgressPercent(
+            props.progressTotalPercent,
+            props.progressCurrentPercent
+          )
         "
         :class="progressBarContainerClass"
       >
         <div
-          v-if="hasProgressPercent(progressTotalPercent)"
+          v-if="hasProgressPercent(props.progressTotalPercent)"
           :class="progressBarPrimaryClass"
-          :style="progressPercentStyle(progressTotalPercent)"
+          :style="progressPercentStyle(props.progressTotalPercent)"
         />
         <div
-          v-if="hasProgressPercent(progressCurrentPercent)"
+          v-if="hasProgressPercent(props.progressCurrentPercent)"
           :class="progressBarSecondaryClass"
-          :style="progressPercentStyle(progressCurrentPercent)"
+          :style="progressPercentStyle(props.progressCurrentPercent)"
         />
       </div>
 
@@ -87,8 +93,8 @@
       </div>
 
       <div class="relative z-1 min-w-0 flex-1">
-        <div class="truncate opacity-90" :title="title">
-          <slot name="primary">{{ title }}</slot>
+        <div class="truncate opacity-90" :title="props.title">
+          <slot name="primary">{{ props.title }}</slot>
         </div>
       </div>
 
@@ -125,7 +131,7 @@
             class="inline-flex items-center gap-2 pr-1"
           >
             <Button
-              v-if="state === 'failed' && computedShowClear"
+              v-if="props.state === 'failed' && computedShowClear"
               v-tooltip.top="deleteTooltipConfig"
               variant="destructive"
               size="icon"
@@ -136,8 +142,8 @@
             </Button>
             <Button
               v-else-if="
-                state !== 'completed' &&
-                state !== 'running' &&
+                props.state !== 'completed' &&
+                props.state !== 'running' &&
                 computedShowClear
               "
               v-tooltip.top="cancelTooltipConfig"
@@ -149,14 +155,14 @@
               <i class="icon-[lucide--x] size-4" />
             </Button>
             <Button
-              v-else-if="state === 'completed'"
+              v-else-if="props.state === 'completed'"
               variant="textonly"
               size="sm"
               @click.stop="emit('view')"
               >{{ t('menuLabels.View') }}</Button
             >
             <Button
-              v-if="showMenu !== undefined ? showMenu : true"
+              v-if="props.showMenu !== undefined ? props.showMenu : true"
               v-tooltip.top="moreTooltipConfig"
               variant="textonly"
               size="icon-sm"
@@ -166,13 +172,17 @@
               <i class="icon-[lucide--more-horizontal] size-4" />
             </Button>
           </div>
-          <div v-else-if="state !== 'running'" key="secondary" class="pr-2">
-            <slot name="secondary">{{ rightText }}</slot>
+          <div
+            v-else-if="props.state !== 'running'"
+            key="secondary"
+            class="pr-2"
+          >
+            <slot name="secondary">{{ props.rightText }}</slot>
           </div>
         </Transition>
         <!-- Running job cancel button - always visible -->
         <Button
-          v-if="state === 'running' && computedShowClear"
+          v-if="props.state === 'running' && computedShowClear"
           v-tooltip.top="cancelTooltipConfig"
           variant="destructive"
           size="icon"
@@ -199,33 +209,34 @@ import type { JobState } from '@/types/queue'
 import { iconForJobState } from '@/utils/queueDisplay'
 import { cn } from '@/utils/tailwindUtil'
 
-const {
-  jobId,
-  workflowId,
-  state,
-  title,
-  rightText = '',
-  iconName,
-  iconImageUrl,
-  showClear,
-  showMenu,
-  progressTotalPercent,
-  progressCurrentPercent,
-  activeDetailsId = null
-} = defineProps<{
-  jobId: string
-  workflowId?: string
-  state: JobState
-  title: string
-  rightText?: string
-  iconName?: string
-  iconImageUrl?: string
-  showClear?: boolean
-  showMenu?: boolean
-  progressTotalPercent?: number
-  progressCurrentPercent?: number
-  activeDetailsId?: string | null
-}>()
+const props = withDefaults(
+  defineProps<{
+    jobId: string
+    workflowId?: string
+    state: JobState
+    title: string
+    rightText?: string
+    iconName?: string
+    iconImageUrl?: string
+    showClear?: boolean
+    showMenu?: boolean
+    progressTotalPercent?: number
+    progressCurrentPercent?: number
+    activeDetailsId?: string | null
+  }>(),
+  {
+    workflowId: undefined,
+    rightText: '',
+    iconName: undefined,
+    iconImageUrl: undefined,
+    showClear: undefined,
+    showMenu: undefined,
+    progressTotalPercent: undefined,
+    progressCurrentPercent: undefined,
+    runningNodeName: undefined,
+    activeDetailsId: null
+  }
+)
 
 const emit = defineEmits<{
   (e: 'cancel'): void
@@ -251,14 +262,14 @@ const deleteTooltipConfig = computed(() => buildTooltipConfig(t('g.delete')))
 const moreTooltipConfig = computed(() => buildTooltipConfig(t('g.more')))
 
 const rowRef = ref<HTMLDivElement | null>(null)
-const showDetails = computed(() => activeDetailsId === jobId)
+const showDetails = computed(() => props.activeDetailsId === props.jobId)
 
 const onRowEnter = () => {
-  if (!isPreviewVisible.value) emit('details-enter', jobId)
+  if (!isPreviewVisible.value) emit('details-enter', props.jobId)
 }
-const onRowLeave = () => emit('details-leave', jobId)
-const onPopoverEnter = () => emit('details-enter', jobId)
-const onPopoverLeave = () => emit('details-leave', jobId)
+const onRowLeave = () => emit('details-leave', props.jobId)
+const onPopoverEnter = () => emit('details-enter', props.jobId)
+const onPopoverLeave = () => emit('details-leave', props.jobId)
 
 const isPreviewVisible = ref(false)
 const previewHideTimer = ref<number | null>(null)
@@ -275,7 +286,9 @@ const clearPreviewShowTimer = () => {
     previewShowTimer.value = null
   }
 }
-const canShowPreview = computed(() => state === 'completed' && !!iconImageUrl)
+const canShowPreview = computed(
+  () => props.state === 'completed' && !!props.iconImageUrl
+)
 const scheduleShowPreview = () => {
   if (!canShowPreview.value) return
   clearPreviewHideTimer()
@@ -330,23 +343,23 @@ watch(
 const isHovered = ref(false)
 
 const iconClass = computed(() => {
-  if (iconName) return iconName
-  return iconForJobState(state)
+  if (props.iconName) return props.iconName
+  return iconForJobState(props.state)
 })
 
 const shouldSpin = computed(
   () =>
-    state === 'pending' &&
+    props.state === 'pending' &&
     iconClass.value === iconForJobState('pending') &&
-    !iconImageUrl
+    !props.iconImageUrl
 )
 
 const computedShowClear = computed(() => {
-  if (showClear !== undefined) return showClear
-  return state !== 'completed'
+  if (props.showClear !== undefined) return props.showClear
+  return props.state !== 'completed'
 })
 
-const emitDetailsLeave = () => emit('details-leave', jobId)
+const emitDetailsLeave = () => emit('details-leave', props.jobId)
 
 const onCancelClick = () => {
   emitDetailsLeave()
@@ -359,7 +372,7 @@ const onDeleteClick = () => {
 }
 
 const onContextMenu = (event: MouseEvent) => {
-  const shouldShowMenu = showMenu !== undefined ? showMenu : true
+  const shouldShowMenu = props.showMenu !== undefined ? props.showMenu : true
   if (shouldShowMenu) emit('menu', event)
 }
 </script>

src/components/rightSidePanel/RightSidePanel.vue

@@ -40,8 +40,7 @@ const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
 
-const { hasAnyError, allErrorExecutionIds, activeMissingNodeGraphIds } =
-  storeToRefs(executionErrorStore)
+const { hasAnyError, allErrorExecutionIds } = storeToRefs(executionErrorStore)
 
 const { findParentGroup } = useGraphHierarchy()
 
@@ -110,21 +109,9 @@ const hasContainerInternalError = computed(() => {
   })
 })
 
-const hasMissingNodeSelected = computed(
-  () =>
-    hasSelection.value &&
-    selectedNodes.value.some((node) =>
-      activeMissingNodeGraphIds.value.has(String(node.id))
-    )
-)
-
 const hasRelevantErrors = computed(() => {
   if (!hasSelection.value) return hasAnyError.value
-  return (
-    hasDirectNodeError.value ||
-    hasContainerInternalError.value ||
-    hasMissingNodeSelected.value
-  )
+  return hasDirectNodeError.value || hasContainerInternalError.value
 })
 
 const tabs = computed<RightSidePanelTabList>(() => {

src/components/rightSidePanel/errors/ErrorNodeCard.vue

@@ -17,26 +17,24 @@
       >
         {{ card.nodeTitle }}
       </span>
-      <div class="flex items-center shrink-0">
-        <Button
-          v-if="card.isSubgraphNode"
-          variant="secondary"
-          size="sm"
-          class="rounded-lg text-sm shrink-0 h-8"
-          @click.stop="handleEnterSubgraph"
-        >
-          {{ t('rightSidePanel.enterSubgraph') }}
-        </Button>
-        <Button
-          variant="textonly"
-          size="icon-sm"
-          class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
-          :aria-label="t('rightSidePanel.locateNode')"
-          @click.stop="handleLocateNode"
-        >
-          <i class="icon-[lucide--locate] size-4" />
-        </Button>
-      </div>
+      <Button
+        v-if="card.isSubgraphNode"
+        variant="secondary"
+        size="sm"
+        class="rounded-lg text-sm shrink-0"
+        @click.stop="handleEnterSubgraph"
+      >
+        {{ t('rightSidePanel.enterSubgraph') }}
+      </Button>
+      <Button
+        variant="textonly"
+        size="icon-sm"
+        class="size-7 text-muted-foreground hover:text-base-foreground shrink-0"
+        :aria-label="t('rightSidePanel.locateNode')"
+        @click.stop="handleLocateNode"
+      >
+        <i class="icon-[lucide--locate] size-3.5" />
+      </Button>
     </div>
 
     <!-- Multiple Errors within one Card -->

src/components/rightSidePanel/errors/MissingNodeCard.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="px-4 pb-2">
-    <!-- Sub-label: cloud or OSS message shown above all pack groups -->
-    <p class="m-0 pb-5 text-sm text-muted-foreground leading-relaxed">
-      {{
-        isCloud
-          ? t('rightSidePanel.missingNodePacks.cloudMessage')
-          : t('rightSidePanel.missingNodePacks.ossMessage')
-      }}
-    </p>
-    <MissingPackGroupRow
-      v-for="group in missingPackGroups"
-      :key="group.packId ?? '__unknown__'"
-      :group="group"
-      :show-info-button="showInfoButton"
-      :show-node-id-badge="showNodeIdBadge"
-      @locate-node="emit('locateNode', $event)"
-      @open-manager-info="emit('openManagerInfo', $event)"
-    />
-  </div>
-
-  <!-- Apply Changes: shown when manager enabled and at least one pack install succeeded -->
-  <div v-if="shouldShowManagerButtons" class="px-4">
-    <Button
-      v-if="hasInstalledPacksPendingRestart"
-      variant="primary"
-      :disabled="isRestarting"
-      class="w-full h-9 justify-center gap-2 text-sm font-semibold mt-2"
-      @click="applyChanges()"
-    >
-      <DotSpinner v-if="isRestarting" duration="1s" :size="14" />
-      <i v-else class="icon-[lucide--refresh-cw] size-4 shrink-0" />
-      <span class="truncate min-w-0">{{
-        t('rightSidePanel.missingNodePacks.applyChanges')
-      }}</span>
-    </Button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import Button from '@/components/ui/button/Button.vue'
-import DotSpinner from '@/components/common/DotSpinner.vue'
-import { useApplyChanges } from '@/workbench/extensions/manager/composables/useApplyChanges'
-import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
-import { isCloud } from '@/platform/distribution/types'
-import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
-import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
-import MissingPackGroupRow from '@/components/rightSidePanel/errors/MissingPackGroupRow.vue'
-
-const props = defineProps<{
-  showInfoButton: boolean
-  showNodeIdBadge: boolean
-  missingPackGroups: MissingPackGroup[]
-}>()
-
-const emit = defineEmits<{
-  locateNode: [nodeId: string]
-  openManagerInfo: [packId: string]
-}>()
-
-const { t } = useI18n()
-
-const comfyManagerStore = useComfyManagerStore()
-const { isRestarting, applyChanges } = useApplyChanges()
-const { shouldShowManagerButtons } = useManagerState()
-
-/**
- * Show Apply Changes when any pack from the error group is already installed
- * on disk but ComfyUI hasn't restarted yet to load it.
- * This is server-state based → persists across browser refreshes.
- */
-const hasInstalledPacksPendingRestart = computed(() =>
-  props.missingPackGroups.some(
-    (g) => g.packId !== null && comfyManagerStore.isPackInstalled(g.packId)
-  )
-)
-</script>

src/components/rightSidePanel/errors/MissingPackGroupRow.vue

@@ -1,250 +0,0 @@
-<template>
-  <div class="flex flex-col w-full mb-2">
-    <!-- Pack header row: pack name + info + chevron -->
-    <div class="flex h-8 items-center w-full">
-      <!-- Warning icon for unknown packs -->
-      <i
-        v-if="group.packId === null && !group.isResolving"
-        class="icon-[lucide--triangle-alert] size-4 text-warning-background shrink-0 mr-1.5"
-      />
-      <p
-        class="flex-1 min-w-0 text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap"
-        :class="
-          group.packId === null && !group.isResolving
-            ? 'text-warning-background'
-            : 'text-foreground'
-        "
-      >
-        <span v-if="group.isResolving" class="text-muted-foreground italic">
-          {{ t('g.loading') }}...
-        </span>
-        <span v-else>
-          {{
-            `${group.packId ?? t('rightSidePanel.missingNodePacks.unknownPack')} (${group.nodeTypes.length})`
-          }}
-        </span>
-      </p>
-      <Button
-        v-if="showInfoButton && group.packId !== null"
-        variant="textonly"
-        size="icon-sm"
-        class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
-        :aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
-        @click="emit('openManagerInfo', group.packId ?? '')"
-      >
-        <i class="icon-[lucide--info] size-4" />
-      </Button>
-      <Button
-        variant="textonly"
-        size="icon-sm"
-        :class="
-          cn(
-            'size-8 shrink-0 transition-transform duration-200 hover:bg-transparent',
-            { 'rotate-180': expanded }
-          )
-        "
-        :aria-label="
-          expanded
-            ? t('rightSidePanel.missingNodePacks.collapse')
-            : t('rightSidePanel.missingNodePacks.expand')
-        "
-        @click="toggleExpand"
-      >
-        <i
-          class="icon-[lucide--chevron-down] size-4 text-muted-foreground group-hover:text-base-foreground"
-        />
-      </Button>
-    </div>
-
-    <!-- Sub-labels: individual node instances, each with their own Locate button -->
-    <TransitionCollapse>
-      <div
-        v-if="expanded"
-        class="flex flex-col gap-0.5 pl-2 mb-1 overflow-hidden"
-      >
-        <div
-          v-for="nodeType in group.nodeTypes"
-          :key="getKey(nodeType)"
-          class="flex h-7 items-center"
-        >
-          <span
-            v-if="
-              showNodeIdBadge &&
-              typeof nodeType !== 'string' &&
-              nodeType.nodeId != null
-            "
-            class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-xs font-mono text-muted-foreground font-bold mr-1"
-          >
-            #{{ nodeType.nodeId }}
-          </span>
-          <p class="flex-1 min-w-0 text-xs text-muted-foreground truncate">
-            {{ getLabel(nodeType) }}
-          </p>
-          <Button
-            v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
-            variant="textonly"
-            size="icon-sm"
-            class="size-6 text-muted-foreground hover:text-base-foreground shrink-0 mr-1"
-            :aria-label="t('rightSidePanel.locateNode')"
-            @click="handleLocateNode(nodeType)"
-          >
-            <i class="icon-[lucide--locate] size-3" />
-          </Button>
-        </div>
-      </div>
-    </TransitionCollapse>
-
-    <!-- Install button: shown when manager enabled, registry knows the pack or it's already installed -->
-    <div
-      v-if="
-        shouldShowManagerButtons &&
-        group.packId !== null &&
-        (nodePack || comfyManagerStore.isPackInstalled(group.packId))
-      "
-      class="flex items-start w-full pt-1 pb-1"
-    >
-      <Button
-        variant="secondary"
-        size="md"
-        class="flex flex-1 w-full"
-        :disabled="
-          comfyManagerStore.isPackInstalled(group.packId) || isInstalling
-        "
-        @click="handlePackInstallClick"
-      >
-        <DotSpinner
-          v-if="isInstalling"
-          duration="1s"
-          :size="12"
-          class="mr-1.5 shrink-0"
-        />
-        <i
-          v-else-if="comfyManagerStore.isPackInstalled(group.packId)"
-          class="icon-[lucide--check] size-4 text-foreground shrink-0 mr-1"
-        />
-        <i
-          v-else
-          class="icon-[lucide--download] size-4 text-foreground shrink-0 mr-1"
-        />
-        <span class="text-sm text-foreground truncate min-w-0">
-          {{
-            isInstalling
-              ? t('rightSidePanel.missingNodePacks.installing')
-              : comfyManagerStore.isPackInstalled(group.packId)
-                ? t('rightSidePanel.missingNodePacks.installed')
-                : t('rightSidePanel.missingNodePacks.installNodePack')
-          }}
-        </span>
-      </Button>
-    </div>
-
-    <!-- Registry still loading: packId known but result not yet available -->
-    <div
-      v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
-      class="flex items-start w-full pt-1 pb-1"
-    >
-      <div
-        class="flex flex-1 h-8 items-center justify-center overflow-hidden p-2 rounded-lg min-w-0 bg-secondary-background opacity-60 cursor-not-allowed select-none"
-      >
-        <DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
-        <span class="text-sm text-foreground truncate min-w-0">
-          {{ t('g.loading') }}
-        </span>
-      </div>
-    </div>
-
-    <!-- Search in Manager: fetch done but pack not found in registry -->
-    <div
-      v-else-if="group.packId !== null && shouldShowManagerButtons"
-      class="flex items-start w-full pt-1 pb-1"
-    >
-      <Button
-        variant="secondary"
-        size="md"
-        class="flex flex-1 w-full"
-        @click="
-          openManager({
-            initialTab: ManagerTab.All,
-            initialPackId: group.packId!
-          })
-        "
-      >
-        <i class="icon-[lucide--search] size-4 text-foreground shrink-0 mr-1" />
-        <span class="text-sm text-foreground truncate min-w-0">
-          {{ t('rightSidePanel.missingNodePacks.searchInManager') }}
-        </span>
-      </Button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { cn } from '@/utils/tailwindUtil'
-import { useI18n } from 'vue-i18n'
-import Button from '@/components/ui/button/Button.vue'
-import DotSpinner from '@/components/common/DotSpinner.vue'
-import TransitionCollapse from '@/components/rightSidePanel/layout/TransitionCollapse.vue'
-import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
-import { usePackInstall } from '@/workbench/extensions/manager/composables/nodePack/usePackInstall'
-import { useComfyManagerStore } from '@/workbench/extensions/manager/stores/comfyManagerStore'
-import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
-import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes'
-import type { MissingNodeType } from '@/types/comfy'
-import type { MissingPackGroup } from '@/components/rightSidePanel/errors/useErrorGroups'
-
-const props = defineProps<{
-  group: MissingPackGroup
-  showInfoButton: boolean
-  showNodeIdBadge: boolean
-}>()
-
-const emit = defineEmits<{
-  locateNode: [nodeId: string]
-  openManagerInfo: [packId: string]
-}>()
-
-const { t } = useI18n()
-
-const { missingNodePacks, isLoading } = useMissingNodes()
-const comfyManagerStore = useComfyManagerStore()
-const { shouldShowManagerButtons, openManager } = useManagerState()
-
-const nodePack = computed(() => {
-  if (!props.group.packId) return null
-  return missingNodePacks.value.find((p) => p.id === props.group.packId) ?? null
-})
-
-const { isInstalling, installAllPacks } = usePackInstall(() =>
-  nodePack.value ? [nodePack.value] : []
-)
-
-function handlePackInstallClick() {
-  if (!props.group.packId) return
-  if (!comfyManagerStore.isPackInstalled(props.group.packId)) {
-    void installAllPacks()
-  }
-}
-
-const expanded = ref(false)
-
-function toggleExpand() {
-  expanded.value = !expanded.value
-}
-
-function getKey(nodeType: MissingNodeType): string {
-  if (typeof nodeType === 'string') return nodeType
-  return nodeType.nodeId != null ? String(nodeType.nodeId) : nodeType.type
-}
-
-function getLabel(nodeType: MissingNodeType): string {
-  return typeof nodeType === 'string' ? nodeType : nodeType.type
-}
-
-function handleLocateNode(nodeType: MissingNodeType) {
-  if (typeof nodeType === 'string') return
-  if (nodeType.nodeId != null) {
-    emit('locateNode', String(nodeType.nodeId))
-  }
-}
-</script>