refactor usage of isElectron to use isDesktop

.github/workflows/api-update-electron-api-types.yaml

@@ -26,6 +26,15 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+          key: electron-types-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            electron-types-tools-cache-${{ runner.os }}-
+
       - name: Update electron types
         run: pnpm install --workspace-root @comfyorg/comfyui-electron-types@latest
 

.github/workflows/api-update-manager-api-types.yaml

@@ -31,9 +31,26 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+          key: update-manager-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            update-manager-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Cache ComfyUI-Manager repository
+        uses: actions/cache@v4
+        with:
+          path: ComfyUI-Manager
+          key: comfyui-manager-repo-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: |
+            comfyui-manager-repo-${{ runner.os }}-
+
       - name: Checkout ComfyUI-Manager repository
         uses: actions/checkout@v5
         with:

.github/workflows/api-update-registry-api-types.yaml

@@ -30,9 +30,26 @@ jobs:
           node-version: lts/*
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+          key: update-registry-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            update-registry-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Cache comfy-api repository
+        uses: actions/cache@v4
+        with:
+          path: comfy-api
+          key: comfy-api-repo-${{ runner.os }}-${{ github.run_id }}
+          restore-keys: |
+            comfy-api-repo-${{ runner.os }}-
+
       - name: Checkout comfy-api repository
         uses: actions/checkout@v5
         with:

.github/workflows/ci-lint-format.yaml

@@ -33,6 +33,21 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            .eslintcache
+            tsconfig.tsbuildinfo
+            .prettierCache
+            .knip-cache
+          key: lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js,mts}', '*.config.*', '.eslintrc.*', '.prettierrc.*', 'tsconfig.json') }}
+          restore-keys: |
+            lint-format-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            lint-format-cache-${{ runner.os }}-
+            ci-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 

.github/workflows/ci-tests-storybook.yaml

@@ -50,6 +50,19 @@ jobs:
           node-version: '20'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            storybook-static
+            tsconfig.tsbuildinfo
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          restore-keys: |
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            storybook-cache-${{ runner.os }}-
+            storybook-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
@@ -102,6 +115,19 @@ jobs:
           node-version: '20'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            storybook-static
+            tsconfig.tsbuildinfo
+          key: storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', '*.config.*', '.storybook/**/*') }}
+          restore-keys: |
+            storybook-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            storybook-cache-${{ runner.os }}-
+            storybook-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 

.github/workflows/ci-tests-unit.yaml

@@ -29,6 +29,19 @@ jobs:
           node-version: "lts/*"
           cache: "pnpm"
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            coverage
+            .vitest-cache
+          key: vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('src/**/*.{ts,vue,js}', 'vitest.config.*', 'tsconfig.json') }}
+          restore-keys: |
+            vitest-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-
+            vitest-cache-${{ runner.os }}-
+            test-tools-cache-${{ runner.os }}-
+
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 

.github/workflows/publish-desktop-ui.yaml

@@ -161,6 +161,20 @@ jobs:
           echo "publish_dir=$PUBLISH_DIR" >> "$GITHUB_OUTPUT"
           echo "name=$NAME" >> "$GITHUB_OUTPUT"
 
+      - name: Pack (preview only)
+        shell: bash
+        working-directory: ${{ steps.pkg.outputs.publish_dir }}
+        run: |
+          set -euo pipefail
+          npm pack --json | tee pack-result.json
+
+      - name: Upload package tarball artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: desktop-ui-npm-tarball-${{ inputs.version }}
+          path: ${{ steps.pkg.outputs.publish_dir }}/*.tgz
+          if-no-files-found: error
+
       - name: Check if version already on npm
         id: check_npm
         env:

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

@@ -28,6 +28,16 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            tsconfig.tsbuildinfo
+          key: release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            release-tools-cache-${{ runner.os }}-
+
       - name: Get current version
         id: current_version
         run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT

.github/workflows/release-pypi-dev.yaml

@@ -25,6 +25,17 @@ jobs:
           node-version: 'lts/*'
           cache: 'pnpm'
 
+      - name: Cache tool outputs
+        uses: actions/cache@v4
+        with:
+          path: |
+            .cache
+            dist
+            tsconfig.tsbuildinfo
+          key: dev-release-tools-cache-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            dev-release-tools-cache-${{ runner.os }}-
+
       - name: Get current version
         id: current_version
         run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT

.github/workflows/release-version-bump.yaml

@@ -59,6 +59,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
+          cache: 'pnpm'
 
       - name: Bump version
         id: bump-version

.gitignore

@@ -78,7 +78,7 @@ templates_repo/
 vite.config.mts.timestamp-*.mjs
 
 # Linux core dumps
-/core
+./core
 
 *storybook.log
 storybook-static

.husky/pre-push

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
 
 # Run Knip with cache via package script
-pnpm knip 1>&2
+pnpm knip
 

.prettierrc

@@ -7,5 +7,12 @@
   "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true,
-  "plugins": ["@prettier/plugin-oxc", "@trivago/prettier-plugin-sort-imports"]
+  "overrides": [
+    {
+      "files": "*.{js,cjs,mjs,ts,cts,mts,tsx,vue}",
+      "options": {
+        "plugins": ["@trivago/prettier-plugin-sort-imports"]
+      }
+    }
+  ]
 }

apps/desktop-ui/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>ComfyUI</title>
+    <title>ComfyUI Desktop</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
   </head>
   <body>

apps/desktop-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/desktop-ui",
-  "version": "0.0.3",
+  "version": "0.0.1",
   "type": "module",
   "nx": {
     "tags": [

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

@@ -1,10 +1,10 @@
 <template>
   <div
     ref="rootEl"
-    class="relative overflow-hidden h-full w-full bg-neutral-900"
+    class="relative h-full w-full overflow-hidden bg-neutral-900"
   >
-    <div class="p-terminal rounded-none h-full w-full p-2">
-      <div ref="terminalEl" class="h-full terminal-host" />
+    <div class="p-terminal h-full w-full rounded-none p-2">
+      <div ref="terminalEl" class="terminal-host h-full" />
     </div>
     <Button
       v-tooltip.left="{
@@ -26,6 +26,7 @@
 </template>
 
 <script setup lang="ts">
+import { isDesktop } from '@frontend/platform/distribution/types'
 import { useElementHover, useEventListener } from '@vueuse/core'
 import type { IDisposable } from '@xterm/xterm'
 import Button from 'primevue/button'
@@ -34,7 +35,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { electronAPI, isElectron } from '@/utils/envUtil'
+import { electronAPI } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
@@ -84,7 +85,7 @@ const showContextMenu = (event: MouseEvent) => {
   electronAPI()?.showContextMenu({ type: 'text' })
 }
 
-if (isElectron()) {
+if (isDesktop) {
   useEventListener(terminalEl, 'contextmenu', showContextMenu)
 }
 

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

@@ -1,17 +1,17 @@
 <template>
   <div
-    class="mx-auto grid h-[40rem] w-full max-w-3xl grid-rows-[1fr_auto_auto_1fr] select-none"
+    class="grid grid-rows-[1fr_auto_auto_1fr] w-full max-w-3xl mx-auto h-[40rem] select-none"
   >
-    <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
+    <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
       {{ $t('install.gpuPicker.title') }}
     </h2>
 
     <!-- GPU Selection buttons - takes up remaining space and centers content -->
-    <div class="flex flex-1 items-center justify-center gap-8">
+    <div class="flex-1 flex gap-8 justify-center items-center">
       <!-- Apple Metal / NVIDIA -->
       <HardwareOption
         v-if="platform === 'darwin'"
-        :image-path="'./assets/images/apple-mps-logo.png'"
+        :image-path="'/assets/images/apple-mps-logo.png'"
         placeholder-text="Apple Metal"
         subtitle="Apple Metal"
         :value="'mps'"
@@ -21,7 +21,7 @@
       />
       <HardwareOption
         v-else
-        :image-path="'./assets/images/nvidia-logo-square.jpg'"
+        :image-path="'/assets/images/nvidia-logo-square.jpg'"
         placeholder-text="NVIDIA"
         :subtitle="$t('install.gpuPicker.nvidiaSubtitle')"
         :value="'nvidia'"
@@ -47,17 +47,17 @@
       />
     </div>
 
-    <div class="h-16 px-24 pt-12">
+    <div class="pt-12 px-24 h-16">
       <div v-show="showRecommendedBadge" class="flex items-center gap-2">
         <Tag
           :value="$t('install.gpuPicker.recommended')"
-          class="rounded-full bg-neutral-300 px-2 py-[1px] text-sm font-bold text-neutral-900"
+          class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]"
         />
-        <i class="icon-[lucide--badge-check] text-lg text-neutral-300" />
+        <i class="icon-[lucide--badge-check] text-neutral-300 text-lg" />
       </div>
     </div>
 
-    <div class="px-24 text-neutral-300">
+    <div class="text-neutral-300 px-24">
       <p v-show="descriptionText" class="leading-relaxed">
         {{ descriptionText }}
       </p>

apps/desktop-ui/src/i18n.ts

@@ -1,163 +1,67 @@
-// Import only English locale eagerly as the default/fallback
-// ESLint cannot statically resolve dynamic imports with path aliases (@frontend-locales/*),
-// but these are properly configured in tsconfig.json and resolved by Vite at build time.
-// eslint-disable-next-line import-x/no-unresolved
+import arCommands from '@frontend-locales/ar/commands.json' with { type: 'json' }
+import ar from '@frontend-locales/ar/main.json' with { type: 'json' }
+import arNodes from '@frontend-locales/ar/nodeDefs.json' with { type: 'json' }
+import arSettings from '@frontend-locales/ar/settings.json' with { type: 'json' }
 import enCommands from '@frontend-locales/en/commands.json' with { type: 'json' }
-// eslint-disable-next-line import-x/no-unresolved
 import en from '@frontend-locales/en/main.json' with { type: 'json' }
-// eslint-disable-next-line import-x/no-unresolved
 import enNodes from '@frontend-locales/en/nodeDefs.json' with { type: 'json' }
-// eslint-disable-next-line import-x/no-unresolved
 import enSettings from '@frontend-locales/en/settings.json' with { type: 'json' }
+import esCommands from '@frontend-locales/es/commands.json' with { type: 'json' }
+import es from '@frontend-locales/es/main.json' with { type: 'json' }
+import esNodes from '@frontend-locales/es/nodeDefs.json' with { type: 'json' }
+import esSettings from '@frontend-locales/es/settings.json' with { type: 'json' }
+import frCommands from '@frontend-locales/fr/commands.json' with { type: 'json' }
+import fr from '@frontend-locales/fr/main.json' with { type: 'json' }
+import frNodes from '@frontend-locales/fr/nodeDefs.json' with { type: 'json' }
+import frSettings from '@frontend-locales/fr/settings.json' with { type: 'json' }
+import jaCommands from '@frontend-locales/ja/commands.json' with { type: 'json' }
+import ja from '@frontend-locales/ja/main.json' with { type: 'json' }
+import jaNodes from '@frontend-locales/ja/nodeDefs.json' with { type: 'json' }
+import jaSettings from '@frontend-locales/ja/settings.json' with { type: 'json' }
+import koCommands from '@frontend-locales/ko/commands.json' with { type: 'json' }
+import ko from '@frontend-locales/ko/main.json' with { type: 'json' }
+import koNodes from '@frontend-locales/ko/nodeDefs.json' with { type: 'json' }
+import koSettings from '@frontend-locales/ko/settings.json' with { type: 'json' }
+import ruCommands from '@frontend-locales/ru/commands.json' with { type: 'json' }
+import ru from '@frontend-locales/ru/main.json' with { type: 'json' }
+import ruNodes from '@frontend-locales/ru/nodeDefs.json' with { type: 'json' }
+import ruSettings from '@frontend-locales/ru/settings.json' with { type: 'json' }
+import trCommands from '@frontend-locales/tr/commands.json' with { type: 'json' }
+import tr from '@frontend-locales/tr/main.json' with { type: 'json' }
+import trNodes from '@frontend-locales/tr/nodeDefs.json' with { type: 'json' }
+import trSettings from '@frontend-locales/tr/settings.json' with { type: 'json' }
+import zhTWCommands from '@frontend-locales/zh-TW/commands.json' with { type: 'json' }
+import zhTW from '@frontend-locales/zh-TW/main.json' with { type: 'json' }
+import zhTWNodes from '@frontend-locales/zh-TW/nodeDefs.json' with { type: 'json' }
+import zhTWSettings from '@frontend-locales/zh-TW/settings.json' with { type: 'json' }
+import zhCommands from '@frontend-locales/zh/commands.json' with { type: 'json' }
+import zh from '@frontend-locales/zh/main.json' with { type: 'json' }
+import zhNodes from '@frontend-locales/zh/nodeDefs.json' with { type: 'json' }
+import zhSettings from '@frontend-locales/zh/settings.json' with { type: 'json' }
 import { createI18n } from 'vue-i18n'
 
-function buildLocale<
-  M extends Record<string, unknown>,
-  N extends Record<string, unknown>,
-  C extends Record<string, unknown>,
-  S extends Record<string, unknown>
->(main: M, nodes: N, commands: C, settings: S) {
+function buildLocale<M, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
   return {
     ...main,
     nodeDefs: nodes,
     commands: commands,
     settings: settings
-  } as M & { nodeDefs: N; commands: C; settings: S }
-}
-
-// Locale loader map - dynamically import locales only when needed
-// ESLint cannot statically resolve these dynamic imports, but they are valid at build time
-/* eslint-disable import-x/no-unresolved */
-const localeLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('@frontend-locales/ar/main.json'),
-  es: () => import('@frontend-locales/es/main.json'),
-  fr: () => import('@frontend-locales/fr/main.json'),
-  ja: () => import('@frontend-locales/ja/main.json'),
-  ko: () => import('@frontend-locales/ko/main.json'),
-  ru: () => import('@frontend-locales/ru/main.json'),
-  tr: () => import('@frontend-locales/tr/main.json'),
-  zh: () => import('@frontend-locales/zh/main.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/main.json')
-}
-
-const nodeDefsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('@frontend-locales/ar/nodeDefs.json'),
-  es: () => import('@frontend-locales/es/nodeDefs.json'),
-  fr: () => import('@frontend-locales/fr/nodeDefs.json'),
-  ja: () => import('@frontend-locales/ja/nodeDefs.json'),
-  ko: () => import('@frontend-locales/ko/nodeDefs.json'),
-  ru: () => import('@frontend-locales/ru/nodeDefs.json'),
-  tr: () => import('@frontend-locales/tr/nodeDefs.json'),
-  zh: () => import('@frontend-locales/zh/nodeDefs.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/nodeDefs.json')
-}
-
-const commandsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('@frontend-locales/ar/commands.json'),
-  es: () => import('@frontend-locales/es/commands.json'),
-  fr: () => import('@frontend-locales/fr/commands.json'),
-  ja: () => import('@frontend-locales/ja/commands.json'),
-  ko: () => import('@frontend-locales/ko/commands.json'),
-  ru: () => import('@frontend-locales/ru/commands.json'),
-  tr: () => import('@frontend-locales/tr/commands.json'),
-  zh: () => import('@frontend-locales/zh/commands.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/commands.json')
-}
-
-const settingsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('@frontend-locales/ar/settings.json'),
-  es: () => import('@frontend-locales/es/settings.json'),
-  fr: () => import('@frontend-locales/fr/settings.json'),
-  ja: () => import('@frontend-locales/ja/settings.json'),
-  ko: () => import('@frontend-locales/ko/settings.json'),
-  ru: () => import('@frontend-locales/ru/settings.json'),
-  tr: () => import('@frontend-locales/tr/settings.json'),
-  zh: () => import('@frontend-locales/zh/settings.json'),
-  'zh-TW': () => import('@frontend-locales/zh-TW/settings.json')
-}
-
-// Track which locales have been loaded
-const loadedLocales = new Set<string>(['en'])
-
-// Track locales currently being loaded to prevent race conditions
-const loadingLocales = new Map<string, Promise<void>>()
-
-/**
- * Dynamically load a locale and its associated files (nodeDefs, commands, settings)
- */
-export async function loadLocale(locale: string): Promise<void> {
-  if (loadedLocales.has(locale)) {
-    return
   }
-
-  // If already loading, return the existing promise to prevent duplicate loads
-  const existingLoad = loadingLocales.get(locale)
-  if (existingLoad) {
-    return existingLoad
-  }
-
-  const loader = localeLoaders[locale]
-  const nodeDefsLoader = nodeDefsLoaders[locale]
-  const commandsLoader = commandsLoaders[locale]
-  const settingsLoader = settingsLoaders[locale]
-
-  if (!loader || !nodeDefsLoader || !commandsLoader || !settingsLoader) {
-    console.warn(`Locale "${locale}" is not supported`)
-    return
-  }
-
-  // Create and track the loading promise
-  const loadPromise = (async () => {
-    try {
-      const [main, nodes, commands, settings] = await Promise.all([
-        loader(),
-        nodeDefsLoader(),
-        commandsLoader(),
-        settingsLoader()
-      ])
-
-      const messages = buildLocale(
-        main.default,
-        nodes.default,
-        commands.default,
-        settings.default
-      )
-
-      i18n.global.setLocaleMessage(locale, messages as LocaleMessages)
-      loadedLocales.add(locale)
-    } catch (error) {
-      console.error(`Failed to load locale "${locale}":`, error)
-      throw error
-    } finally {
-      // Clean up the loading promise once complete
-      loadingLocales.delete(locale)
-    }
-  })()
-
-  loadingLocales.set(locale, loadPromise)
-  return loadPromise
 }
 
-// Only include English in the initial bundle
 const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings)
+  en: buildLocale(en, enNodes, enCommands, enSettings),
+  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
+  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings),
+  ru: buildLocale(ru, ruNodes, ruCommands, ruSettings),
+  ja: buildLocale(ja, jaNodes, jaCommands, jaSettings),
+  ko: buildLocale(ko, koNodes, koCommands, koSettings),
+  fr: buildLocale(fr, frNodes, frCommands, frSettings),
+  es: buildLocale(es, esNodes, esCommands, esSettings),
+  ar: buildLocale(ar, arNodes, arCommands, arSettings),
+  tr: buildLocale(tr, trNodes, trCommands, trSettings)
 }
 
-// Type for locale messages - inferred from the English locale structure
-type LocaleMessages = typeof messages.en
-
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2
   legacy: false,

apps/desktop-ui/src/router.ts

@@ -1,14 +1,14 @@
+import { isDesktop } from '@frontend/platform/distribution/types'
 import {
   createRouter,
   createWebHashHistory,
   createWebHistory
 } from 'vue-router'
 
-import { isElectron } from '@/utils/envUtil'
 import LayoutDefault from '@/views/layouts/LayoutDefault.vue'
 
 const isFileProtocol = window.location.protocol === 'file:'
-const basePath = isElectron() ? '/' : window.location.pathname
+const basePath = isDesktop ? '/' : window.location.pathname
 
 const router = createRouter({
   history: isFileProtocol ? createWebHashHistory() : createWebHistory(basePath),

apps/desktop-ui/src/utils/envUtil.ts

@@ -1,13 +1 @@
-import type { ElectronAPI } from '@comfyorg/comfyui-electron-types'
-
-export function isElectron() {
-  return 'electronAPI' in window && window.electronAPI !== undefined
-}
-
-export function electronAPI() {
-  return (window as any).electronAPI as ElectronAPI
-}
-
-export function isNativeWindow() {
-  return isElectron() && !!window.navigator.windowControlsOverlay?.visible
-}
+export { electronAPI, isNativeWindow } from '@frontend/utils/envUtil'

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

@@ -66,6 +66,17 @@
               @click="troubleshoot"
             />
           </div>
+
+          <div class="text-center">
+            <button
+              v-if="!terminalVisible"
+              class="text-sm text-neutral-500 hover:text-neutral-300 transition-colors flex items-center gap-2 mx-auto"
+              @click="terminalVisible = true"
+            >
+              <i class="pi pi-search"></i>
+              {{ $t('serverStart.showTerminal') }}
+            </button>
+          </div>
         </div>
 
         <!-- Terminal Output (positioned at bottom when manually toggled in error state) -->

apps/desktop-ui/src/views/templates/BaseViewTemplate.vue

@@ -1,28 +1,29 @@
 <template>
   <div
-    class="font-sans w-screen h-screen flex flex-col"
+    class="flex h-screen w-screen flex-col font-sans"
     :class="[
       dark
-        ? 'text-neutral-300 bg-neutral-900 dark-theme'
-        : 'text-neutral-900 bg-neutral-300'
+        ? 'dark-theme bg-neutral-900 text-neutral-300'
+        : 'bg-neutral-300 text-neutral-900'
     ]"
   >
     <!-- Virtual top menu for native window (drag handle) -->
     <div
       v-show="isNativeWindow()"
       ref="topMenuRef"
-      class="app-drag w-full h-(--comfy-topbar-height)"
+      class="app-drag h-(--comfy-topbar-height) w-full"
     />
-    <div class="grow w-full flex items-center justify-center overflow-auto">
+    <div class="flex w-full grow items-center justify-center overflow-auto">
       <slot />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { isDesktop } from '@frontend/platform/distribution/types'
 import { nextTick, onMounted, ref } from 'vue'
 
-import { electronAPI, isElectron, isNativeWindow } from '../../utils/envUtil'
+import { electronAPI, isNativeWindow } from '../../utils/envUtil'
 
 const { dark = false } = defineProps<{
   dark?: boolean
@@ -40,7 +41,7 @@ const lightTheme = {
 
 const topMenuRef = ref<HTMLDivElement | null>(null)
 onMounted(async () => {
-  if (isElectron()) {
+  if (isDesktop) {
     await nextTick()
 
     electronAPI().changeTheme({

apps/desktop-ui/tsconfig.json

@@ -6,6 +6,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
+      "@frontend/*": ["../../src/*"],
       "@frontend-locales/*": ["../../src/locales/*"]
     }
   },

apps/desktop-ui/vite.config.mts

@@ -31,6 +31,7 @@ export default defineConfig(() => {
     resolve: {
       alias: {
         '@': path.resolve(projectRoot, 'src'),
+        '@frontend': path.resolve(projectRoot, '../../src'),
         '@frontend-locales': path.resolve(projectRoot, '../../src/locales')
       }
     },

browser_tests/helpers/actionbar.ts

@@ -13,7 +13,7 @@ export class ComfyActionbar {
 
   async isDocked() {
     const className = await this.root.getAttribute('class')
-    return className?.includes('static') ?? false
+    return className?.includes('is-docked') ?? false
   }
 }
 

eslint.config.ts

@@ -60,7 +60,6 @@ export default defineConfig([
       '**/vite.config.*.timestamp*',
       '**/vitest.config.*.timestamp*',
       'packages/registry-types/src/comfyRegistryTypes.ts',
-      'public/auth-sw.js',
       'src/extensions/core/*',
       'src/scripts/*',
       'src/types/generatedManagerTypes.ts',

global.d.ts

@@ -4,12 +4,6 @@ declare const __SENTRY_DSN__: string
 declare const __ALGOLIA_APP_ID__: string
 declare const __ALGOLIA_API_KEY__: string
 declare const __USE_PROD_CONFIG__: boolean
-declare const __MIXPANEL_TOKEN__: string
-
-type BuildFeatureFlags = {
-  REQUIRE_SUBSCRIPTION: boolean
-}
-declare const __BUILD_FLAGS__: BuildFeatureFlags
 
 interface Navigator {
   /**

knip.config.ts

@@ -12,10 +12,6 @@ const config: KnipConfig = {
       ],
       project: ['**/*.{js,ts,vue}', '*.{js,ts,mts}']
     },
-    'apps/desktop-ui': {
-      entry: ['src/main.ts', 'src/i18n.ts'],
-      project: ['src/**/*.{js,ts,vue}', '*.{js,ts,mts}']
-    },
     'packages/tailwind-utils': {
       project: ['src/**/*.{js,ts}']
     },
@@ -34,16 +30,16 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons'
+    '@primevue/icons',
+    // Dev
+    '@trivago/prettier-plugin-sort-imports'
   ],
   ignore: [
     // Auto generated manager types
     'src/workbench/extensions/manager/types/generatedManagerTypes.ts',
     'packages/registry-types/src/comfyRegistryTypes.ts',
     // Used by a custom node (that should move off of this)
-    'src/scripts/ui/components/splitButton.ts',
-    // Service worker - registered at runtime via navigator.serviceWorker.register()
-    'public/auth-sw.js'
+    'src/scripts/ui/components/splitButton.ts'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

lint-staged.config.js

@@ -8,10 +8,8 @@ export default {
 }
 
 function formatAndEslint(fileNames) {
-  // Convert absolute paths to relative paths for better ESLint resolution
-  const relativePaths = fileNames.map((f) => f.replace(process.cwd() + '/', ''))
   return [
-    `pnpm exec eslint --cache --fix ${relativePaths.join(' ')}`,
-    `pnpm exec prettier --cache --write ${relativePaths.join(' ')}`
+    `pnpm exec eslint --cache --fix ${fileNames.join(' ')}`,
+    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
   ]
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.30.2",
+  "version": "1.30.1",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -55,7 +55,6 @@
     "@nx/vite": "catalog:",
     "@pinia/testing": "catalog:",
     "@playwright/test": "catalog:",
-    "@prettier/plugin-oxc": "catalog:",
     "@storybook/addon-docs": "catalog:",
     "@storybook/vue3": "catalog:",
     "@storybook/vue3-vite": "catalog:",
@@ -90,7 +89,6 @@
     "knip": "catalog:",
     "lint-staged": "catalog:",
     "markdown-table": "catalog:",
-    "mixpanel-browser": "catalog:",
     "nx": "catalog:",
     "picocolors": "catalog:",
     "postcss-html": "catalog:",

pnpm-lock.yaml

@@ -45,9 +45,6 @@ catalogs:
     '@playwright/test':
       specifier: ^1.52.0
       version: 1.52.0
-    '@prettier/plugin-oxc':
-      specifier: ^0.0.4
-      version: 0.0.4
     '@primeuix/forms':
       specifier: 0.0.2
       version: 0.0.2
@@ -189,9 +186,6 @@ catalogs:
     markdown-table:
       specifier: ^3.0.4
       version: 3.0.4
-    mixpanel-browser:
-      specifier: ^2.71.0
-      version: 2.71.0
     nx:
       specifier: 21.4.1
       version: 21.4.1
@@ -501,9 +495,6 @@ importers:
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.52.0
-      '@prettier/plugin-oxc':
-        specifier: 'catalog:'
-        version: 0.0.4
       '@storybook/addon-docs':
         specifier: 'catalog:'
         version: 9.1.1(@types/react@19.1.9)(storybook@9.1.6(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@5.4.19(@types/node@20.14.10)(lightningcss@1.30.1)(terser@5.39.2)))
@@ -606,9 +597,6 @@ importers:
       markdown-table:
         specifier: 'catalog:'
         version: 3.0.4
-      mixpanel-browser:
-        specifier: 'catalog:'
-        version: 2.71.0
       nx:
         specifier: 'catalog:'
         version: 21.4.1
@@ -2213,21 +2201,6 @@ packages:
   '@microsoft/tsdoc@0.15.1':
     resolution: {integrity: sha512-4aErSrCR/On/e5G2hDP0wjooqDdauzEbIq8hIkIe5pXV0rtWJZvdCEKL0ykZxex+IxIwBp0eGeV48hQN07dXtw==}
 
-  '@mixpanel/rrdom@2.0.0-alpha.18.2':
-    resolution: {integrity: sha512-vX/tbnS14ZzzatC7vOyvAm9tOLU8tof0BuppBlphzEx1YHTSw8DQiAmyAc0AmXidchLV0W+cUHV/WsehPLh2hQ==}
-
-  '@mixpanel/rrweb-snapshot@2.0.0-alpha.18.2':
-    resolution: {integrity: sha512-2kSnjZZ3QZ9zOz/isOt8s54mXUUDgXk/u0eEi/rE0xBWDeuA0NHrBcqiMc+w4F/yWWUpo5F5zcuPeYpc6ufAsw==}
-
-  '@mixpanel/rrweb-types@2.0.0-alpha.18.2':
-    resolution: {integrity: sha512-ucIYe1mfJ2UksvXW+d3bOySTB2/0yUSqQJlUydvbBz6OO2Bhq3nJHyLXV9ExkgUMZm1ZyDcvvmNUd1+5tAXlpA==}
-
-  '@mixpanel/rrweb-utils@2.0.0-alpha.18.2':
-    resolution: {integrity: sha512-OomKIB6GTx5xvCLJ7iic2khT/t/tnCJUex13aEqsbSqIT/UzUUsqf+LTrgUK5ex+f6odmkCNjre2y5jvpNqn+g==}
-
-  '@mixpanel/rrweb@2.0.0-alpha.18.2':
-    resolution: {integrity: sha512-J3dVTEu6Z4p8di7y9KKvUooNuBjX97DdG6XGWoPEPi07A9512h9M8MEtvlY3mK0PGfuC0Mz5Pv/Ws6gjGYfKQg==}
-
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
@@ -2354,98 +2327,6 @@ packages:
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
-  '@oxc-parser/binding-android-arm64@0.74.0':
-    resolution: {integrity: sha512-lgq8TJq22eyfojfa2jBFy2m66ckAo7iNRYDdyn9reXYA3I6Wx7tgGWVx1JAp1lO+aUiqdqP/uPlDaETL9tqRcg==}
-    engines: {node: '>=20.0.0'}
-    cpu: [arm64]
-    os: [android]
-
-  '@oxc-parser/binding-darwin-arm64@0.74.0':
-    resolution: {integrity: sha512-xbY/io/hkARggbpYEMFX6CwFzb7f4iS6WuBoBeZtdqRWfIEi7sm/uYWXfyVeB8uqOATvJ07WRFC2upI8PSI83g==}
-    engines: {node: '>=20.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@oxc-parser/binding-darwin-x64@0.74.0':
-    resolution: {integrity: sha512-FIj2gAGtFaW0Zk+TnGyenMUoRu1ju+kJ/h71D77xc1owOItbFZFGa+4WSVck1H8rTtceeJlK+kux+vCjGFCl9Q==}
-    engines: {node: '>=20.0.0'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@oxc-parser/binding-freebsd-x64@0.74.0':
-    resolution: {integrity: sha512-W1I+g5TJg0TRRMHgEWNWsTIfe782V3QuaPgZxnfPNmDMywYdtlzllzclBgaDq6qzvZCCQc/UhvNb37KWTCTj8A==}
-    engines: {node: '>=20.0.0'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.74.0':
-    resolution: {integrity: sha512-gxqkyRGApeVI8dgvJ19SYe59XASW3uVxF1YUgkE7peW/XIg5QRAOVTFKyTjI9acYuK1MF6OJHqx30cmxmZLtiQ==}
-    engines: {node: '>=20.0.0'}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.74.0':
-    resolution: {integrity: sha512-jpnAUP4Fa93VdPPDzxxBguJmldj/Gpz7wTXKFzpAueqBMfZsy9KNC+0qT2uZ9HGUDMzNuKw0Se3bPCpL/gfD2Q==}
-    engines: {node: '>=20.0.0'}
-    cpu: [arm]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.74.0':
-    resolution: {integrity: sha512-fcWyM7BNfCkHqIf3kll8fJctbR/PseL4RnS2isD9Y3FFBhp4efGAzhDaxIUK5GK7kIcFh1P+puIRig8WJ6IMVQ==}
-    engines: {node: '>=20.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-arm64-musl@0.74.0':
-    resolution: {integrity: sha512-AMY30z/C77HgiRRJX7YtVUaelKq1ex0aaj28XoJu4SCezdS8i0IftUNTtGS1UzGjGZB8zQz5SFwVy4dRu4GLwg==}
-    engines: {node: '>=20.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.74.0':
-    resolution: {integrity: sha512-/RZAP24TgZo4vV/01TBlzRqs0R7E6xvatww4LnmZEBBulQBU/SkypDywfriFqWuFoa61WFXPV7sLcTjJGjim/w==}
-    engines: {node: '>=20.0.0'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.74.0':
-    resolution: {integrity: sha512-620J1beNAlGSPBD+Msb3ptvrwxu04B8iULCH03zlf0JSLy/5sqlD6qBs0XUVkUJv1vbakUw1gfVnUQqv0UTuEg==}
-    engines: {node: '>=20.0.0'}
-    cpu: [s390x]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-x64-gnu@0.74.0':
-    resolution: {integrity: sha512-WBFgQmGtFnPNzHyLKbC1wkYGaRIBxXGofO0+hz1xrrkPgbxbJS1Ukva1EB8sPaVBBQ52Bdc2GjLSp721NWRvww==}
-    engines: {node: '>=20.0.0'}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-parser/binding-linux-x64-musl@0.74.0':
-    resolution: {integrity: sha512-y4mapxi0RGqlp3t6Sm+knJlAEqdKDYrEue2LlXOka/F2i4sRN0XhEMPiSOB3ppHmvK4I2zY2XBYTsX1Fel0fAg==}
-    engines: {node: '>=20.0.0'}
-    cpu: [x64]
-    os: [linux]
-
-  '@oxc-parser/binding-wasm32-wasi@0.74.0':
-    resolution: {integrity: sha512-yDS9bRDh5ymobiS2xBmjlrGdUuU61IZoJBaJC5fELdYT5LJNBXlbr3Yc6m2PWfRJwkH6Aq5fRvxAZ4wCbkGa8w==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.74.0':
-    resolution: {integrity: sha512-XFWY52Rfb4N5wEbMCTSBMxRkDLGbAI9CBSL24BIDywwDJMl31gHEVlmHdCDRoXAmanCI6gwbXYTrWe0HvXJ7Aw==}
-    engines: {node: '>=20.0.0'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@oxc-parser/binding-win32-x64-msvc@0.74.0':
-    resolution: {integrity: sha512-1D3x6iU2apLyfTQHygbdaNbX3nZaHu4yaXpD7ilYpoLo7f0MX0tUuoDrqJyJrVGqvyXgc0uz4yXz9tH9ZZhvvg==}
-    engines: {node: '>=20.0.0'}
-    cpu: [x64]
-    os: [win32]
-
-  '@oxc-project/types@0.74.0':
-    resolution: {integrity: sha512-KOw/RZrVlHGhCXh1RufBFF7Nuo7HdY5w1lRJukM/igIl6x9qtz8QycDvZdzb4qnHO7znrPyo2sJrFJK2eKHgfQ==}
-
   '@oxc-resolver/binding-android-arm-eabi@11.6.1':
     resolution: {integrity: sha512-Ma/kg29QJX1Jzelv0Q/j2iFuUad1WnjgPjpThvjqPjpOyLjCUaiFCCnshhmWjyS51Ki1Iol3fjf1qAzObf8GIA==}
     cpu: [arm]
@@ -2579,10 +2460,6 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@prettier/plugin-oxc@0.0.4':
-    resolution: {integrity: sha512-UGXe+g/rSRbglL0FOJiar+a+nUrst7KaFmsg05wYbKiInGWP6eAj/f8A2Uobgo5KxEtb2X10zeflNH6RK2xeIQ==}
-    engines: {node: '>=14'}
-
   '@primeuix/forms@0.0.2':
     resolution: {integrity: sha512-DpecPQd/Qf/kav4LKCaIeGuT3AkwhJzuHCkLANTVlN/zBvo8KIj3OZHsCkm0zlIMVVnaJdtx1ULNlRQdudef+A==}
     engines: {node: '>=12.11.0'}
@@ -3143,9 +3020,6 @@ packages:
   '@types/chai@5.2.2':
     resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
 
-  '@types/css-font-loading-module@0.0.7':
-    resolution: {integrity: sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==}
-
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -3644,9 +3518,6 @@ packages:
   '@webgpu/types@0.1.51':
     resolution: {integrity: sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==}
 
-  '@xstate/fsm@1.6.5':
-    resolution: {integrity: sha512-b5o1I6aLNeYlU/3CPlj/Z91ybk1gUsKT+5NAJI+2W4UjvS5KLG28K9v5UvNoFVjHV8PajVZ00RH3vnjyQO7ZAw==}
-
   '@xterm/addon-fit@0.10.0':
     resolution: {integrity: sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==}
     peerDependencies:
@@ -3929,10 +3800,6 @@ packages:
   balanced-match@2.0.0:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
-  base64-arraybuffer@1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
-    engines: {node: '>= 0.6.0'}
-
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -6120,9 +5987,6 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
-  mixpanel-browser@2.71.0:
-    resolution: {integrity: sha512-jKmDXe68/oQFgk/9ns9Z36bA0CJ31PH8Y77XTLLGfJvhsUPbvu+7Se9e281NejZF6+OMqx7cE+zFxToozYyNrA==}
-
   mkdirp@3.0.1:
     resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
     engines: {node: '>=10'}
@@ -6309,10 +6173,6 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
-  oxc-parser@0.74.0:
-    resolution: {integrity: sha512-2tDN/ttU8WE6oFh8EzKNam7KE7ZXSG5uXmvX85iNzxdJfMssDWcj3gpYzZi1E04XuE7m3v1dVWl/8BE886vPGw==}
-    engines: {node: '>=20.0.0'}
-
   oxc-resolver@11.6.1:
     resolution: {integrity: sha512-WQgmxevT4cM5MZ9ioQnEwJiHpPzbvntV5nInGAKo9NQZzegcOonHvcVcnkYqld7bTG35UFHEKeF7VwwsmA3cZg==}
 
@@ -9639,29 +9499,6 @@ snapshots:
 
   '@microsoft/tsdoc@0.15.1': {}
 
-  '@mixpanel/rrdom@2.0.0-alpha.18.2':
-    dependencies:
-      '@mixpanel/rrweb-snapshot': 2.0.0-alpha.18.2
-
-  '@mixpanel/rrweb-snapshot@2.0.0-alpha.18.2':
-    dependencies:
-      postcss: 8.5.6
-
-  '@mixpanel/rrweb-types@2.0.0-alpha.18.2': {}
-
-  '@mixpanel/rrweb-utils@2.0.0-alpha.18.2': {}
-
-  '@mixpanel/rrweb@2.0.0-alpha.18.2':
-    dependencies:
-      '@mixpanel/rrdom': 2.0.0-alpha.18.2
-      '@mixpanel/rrweb-snapshot': 2.0.0-alpha.18.2
-      '@mixpanel/rrweb-types': 2.0.0-alpha.18.2
-      '@mixpanel/rrweb-utils': 2.0.0-alpha.18.2
-      '@types/css-font-loading-module': 0.0.7
-      '@xstate/fsm': 1.6.5
-      base64-arraybuffer: 1.0.2
-      mitt: 3.0.1
-
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.4.5
@@ -9902,55 +9739,6 @@ snapshots:
 
   '@one-ini/wasm@0.1.1': {}
 
-  '@oxc-parser/binding-android-arm64@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-darwin-arm64@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-darwin-x64@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-freebsd-x64@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm-musleabihf@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-gnu@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-arm64-musl@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-riscv64-gnu@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-s390x-gnu@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-gnu@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-linux-x64-musl@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-wasm32-wasi@0.74.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.12
-    optional: true
-
-  '@oxc-parser/binding-win32-arm64-msvc@0.74.0':
-    optional: true
-
-  '@oxc-parser/binding-win32-x64-msvc@0.74.0':
-    optional: true
-
-  '@oxc-project/types@0.74.0': {}
-
   '@oxc-resolver/binding-android-arm-eabi@11.6.1':
     optional: true
 
@@ -10046,10 +9834,6 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@prettier/plugin-oxc@0.0.4':
-    dependencies:
-      oxc-parser: 0.74.0
-
   '@primeuix/forms@0.0.2':
     dependencies:
       '@primeuix/utils': 0.3.2
@@ -10603,8 +10387,6 @@ snapshots:
     dependencies:
       '@types/deep-eql': 4.0.2
 
-  '@types/css-font-loading-module@0.0.7': {}
-
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -11198,8 +10980,6 @@ snapshots:
 
   '@webgpu/types@0.1.51': {}
 
-  '@xstate/fsm@1.6.5': {}
-
   '@xterm/addon-fit@0.10.0(@xterm/xterm@5.5.0)':
     dependencies:
       '@xterm/xterm': 5.5.0
@@ -11516,8 +11296,6 @@ snapshots:
 
   balanced-match@2.0.0: {}
 
-  base64-arraybuffer@1.0.2: {}
-
   base64-js@1.5.1: {}
 
   better-opn@3.0.2:
@@ -14086,10 +13864,6 @@ snapshots:
 
   mitt@3.0.1: {}
 
-  mixpanel-browser@2.71.0:
-    dependencies:
-      '@mixpanel/rrweb': 2.0.0-alpha.18.2
-
   mkdirp@3.0.1: {}
 
   mlly@1.8.0:
@@ -14332,26 +14106,6 @@ snapshots:
       safe-push-apply: 1.0.0
     optional: true
 
-  oxc-parser@0.74.0:
-    dependencies:
-      '@oxc-project/types': 0.74.0
-    optionalDependencies:
-      '@oxc-parser/binding-android-arm64': 0.74.0
-      '@oxc-parser/binding-darwin-arm64': 0.74.0
-      '@oxc-parser/binding-darwin-x64': 0.74.0
-      '@oxc-parser/binding-freebsd-x64': 0.74.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.74.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.74.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.74.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.74.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.74.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.74.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.74.0
-      '@oxc-parser/binding-linux-x64-musl': 0.74.0
-      '@oxc-parser/binding-wasm32-wasi': 0.74.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.74.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.74.0
-
   oxc-resolver@11.6.1:
     dependencies:
       napi-postinstall: 0.3.3

pnpm-workspace.yaml

@@ -16,7 +16,6 @@ catalog:
   '@nx/vite': 21.4.1
   '@pinia/testing': ^0.1.5
   '@playwright/test': ^1.52.0
-  '@prettier/plugin-oxc': ^0.0.4
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2
   '@primeuix/utils': ^0.3.2
@@ -99,7 +98,6 @@ catalog:
   zod: ^3.23.8
   zod-to-json-schema: ^3.24.1
   zod-validation-error: ^3.3.0
-  mixpanel-browser: ^2.71.0
 
 cleanupUnusedCatalogs: true
 

public/auth-sw.js

@@ -1,147 +0,0 @@
-/**
- * @fileoverview Authentication Service Worker
- * Intercepts /api/view requests and adds Firebase authentication headers.
- * Required for browser-native requests (img, video, audio) that cannot send custom headers.
- */
-
-/**
- * @typedef {Object} AuthHeader
- * @property {string} Authorization - Bearer token for authentication
- */
-
-/**
- * @typedef {Object} CachedAuth
- * @property {AuthHeader|null} header
- * @property {number} expiresAt - Timestamp when cache expires
- */
-
-const CACHE_TTL_MS = 50 * 60 * 1000 // 50 minutes (Firebase tokens expire in 1 hour)
-
-/** @type {CachedAuth|null} */
-let authCache = null
-
-/** @type {Promise<AuthHeader|null>|null} */
-let authRequestInFlight = null
-
-self.addEventListener('message', (event) => {
-  if (event.data.type === 'INVALIDATE_AUTH_HEADER') {
-    authCache = null
-    authRequestInFlight = null
-  }
-})
-
-self.addEventListener('fetch', (event) => {
-  const url = new URL(event.request.url)
-
-  if (
-    !url.pathname.startsWith('/api/view') &&
-    !url.pathname.startsWith('/api/viewvideo')
-  ) {
-    return
-  }
-
-  event.respondWith(
-    (async () => {
-      try {
-        const authHeader = await getAuthHeader()
-
-        if (!authHeader) {
-          return fetch(event.request)
-        }
-
-        const headers = new Headers(event.request.headers)
-        for (const [key, value] of Object.entries(authHeader)) {
-          headers.set(key, value)
-        }
-
-        return fetch(
-          new Request(event.request.url, {
-            method: event.request.method,
-            headers: headers,
-            mode: 'same-origin',
-            credentials: event.request.credentials,
-            cache: 'no-store',
-            redirect: event.request.redirect,
-            referrer: event.request.referrer,
-            integrity: event.request.integrity
-          })
-        )
-      } catch (error) {
-        console.error('[Auth SW] Request failed:', error)
-        return fetch(event.request)
-      }
-    })()
-  )
-})
-
-/**
- * Gets auth header from cache or requests from main thread
- * @returns {Promise<AuthHeader|null>}
- */
-async function getAuthHeader() {
-  // Return cached value if valid
-  if (authCache && authCache.expiresAt > Date.now()) {
-    return authCache.header
-  }
-
-  // Clear expired cache
-  if (authCache) {
-    authCache = null
-  }
-
-  // Deduplicate concurrent requests
-  if (authRequestInFlight) {
-    return authRequestInFlight
-  }
-
-  authRequestInFlight = requestAuthHeaderFromMainThread()
-  const header = await authRequestInFlight
-  authRequestInFlight = null
-
-  // Cache the result
-  if (header) {
-    authCache = {
-      header,
-      expiresAt: Date.now() + CACHE_TTL_MS
-    }
-  }
-
-  return header
-}
-
-/**
- * Requests auth header from main thread via MessageChannel
- * @returns {Promise<AuthHeader|null>}
- */
-async function requestAuthHeaderFromMainThread() {
-  const clients = await self.clients.matchAll()
-  if (clients.length === 0) {
-    return null
-  }
-
-  const messageChannel = new MessageChannel()
-
-  return new Promise((resolve) => {
-    let timeoutId
-
-    messageChannel.port1.onmessage = (event) => {
-      clearTimeout(timeoutId)
-      resolve(event.data.authHeader)
-    }
-
-    timeoutId = setTimeout(() => {
-      console.error(
-        '[Auth SW] Timeout waiting for auth header from main thread'
-      )
-      resolve(null)
-    }, 1000)
-
-    clients[0].postMessage({ type: 'REQUEST_AUTH_HEADER' }, [
-      messageChannel.port2
-    ])
-  })
-}
-
-self.addEventListener('activate', (event) => {
-  event.waitUntil(self.clients.claim())
-})

scripts/bundle-categories.js

@@ -18,81 +18,44 @@
 export const BUNDLE_CATEGORIES = [
   {
     name: 'App Entry Points',
-    description: 'Main entry bundles and manifests',
-    patterns: [/^index-.*\.js$/i, /^manifest-.*\.js$/i],
+    description: 'Main application bundles',
+    patterns: [/^index-.*\.js$/],
     order: 1
   },
   {
-    name: 'Graph Workspace',
-    description: 'Graph editor runtime, canvas, workflow orchestration',
-    patterns: [
-      /Graph(View|State)?-.*\.js$/i,
-      /(Canvas|Workflow|History|NodeGraph|Compositor)-.*\.js$/i
-    ],
+    name: 'Core Views',
+    description: 'Major application views and screens',
+    patterns: [/GraphView-.*\.js$/, /UserSelectView-.*\.js$/],
     order: 2
   },
   {
-    name: 'Views & Navigation',
-    description: 'Top-level views, pages, and routed surfaces',
-    patterns: [/.*(View|Page|Layout|Screen|Route)-.*\.js$/i],
+    name: 'UI Panels',
+    description: 'Settings and configuration panels',
+    patterns: [/.*Panel-.*\.js$/],
     order: 3
   },
   {
-    name: 'Panels & Settings',
-    description: 'Configuration panels, inspectors, and settings screens',
-    patterns: [/.*(Panel|Settings|Config|Preferences|Manager)-.*\.js$/i],
+    name: 'UI Components',
+    description: 'Reusable UI components',
+    patterns: [/Avatar-.*\.js$/, /Badge-.*\.js$/],
     order: 4
   },
   {
-    name: 'User & Accounts',
-    description: 'Authentication, profile, and account management bundles',
-    patterns: [
-      /.*((User(Panel|Select|Auth|Account|Profile|Settings|Preferences|Manager|List|Menu|Modal))|Account|Auth|Profile|Login|Signup|Password).*-.+\.js$/i
-    ],
+    name: 'Services',
+    description: 'Business logic and services',
+    patterns: [/.*Service-.*\.js$/, /.*Store-.*\.js$/],
     order: 5
   },
   {
-    name: 'Editors & Dialogs',
-    description: 'Modals, dialogs, drawers, and in-app editors',
-    patterns: [/.*(Modal|Dialog|Drawer|Editor)-.*\.js$/i],
+    name: 'Utilities',
+    description: 'Helper functions and utilities',
+    patterns: [/.*[Uu]til.*\.js$/],
     order: 6
   },
-  {
-    name: 'UI Components',
-    description: 'Reusable component library chunks',
-    patterns: [
-      /.*(Button|Avatar|Badge|Dropdown|Tabs|Table|List|Card|Form|Input|Toggle|Menu|Toolbar|Sidebar)-.*\.js$/i,
-      /.*\.vue_vue_type_script_setup_true_lang-.*\.js$/i
-    ],
-    order: 7
-  },
-  {
-    name: 'Data & Services',
-    description: 'Stores, services, APIs, and repositories',
-    patterns: [/.*(Service|Store|Api|Repository)-.*\.js$/i],
-    order: 8
-  },
-  {
-    name: 'Utilities & Hooks',
-    description: 'Helpers, composables, and utility bundles',
-    patterns: [
-      /.*(Util|Utils|Helper|Composable|Hook)-.*\.js$/i,
-      /use[A-Z].*\.js$/
-    ],
-    order: 9
-  },
-  {
-    name: 'Vendor & Third-Party',
-    description: 'External libraries and shared vendor chunks',
-    patterns: [
-      /^(chunk|vendor|prime|three|lodash|chart|firebase|yjs|axios|uuid)-.*\.js$/i
-    ],
-    order: 10
-  },
   {
     name: 'Other',
-    description: 'Bundles that do not match a named category',
-    patterns: [/.*/],
+    description: 'Uncategorized bundles',
+    patterns: [/.*/], // Catch-all pattern
     order: 99
   }
 ]

scripts/size-report.js

@@ -7,13 +7,6 @@ import prettyBytes from 'pretty-bytes'
 
 import { getCategoryMetadata } from './bundle-categories.js'
 
-/**
- * @typedef {Object} SizeMetrics
- * @property {number} size
- * @property {number} gzip
- * @property {number} brotli
- */
-
 /**
  * @typedef {Object} SizeResult
  * @property {number} size
@@ -25,52 +18,15 @@ import { getCategoryMetadata } from './bundle-categories.js'
  * @typedef {SizeResult & { file: string, category?: string }} BundleResult
  */
 
-/**
- * @typedef {'added' | 'removed' | 'increased' | 'decreased' | 'unchanged'} BundleStatus
- */
-
-/**
- * @typedef {Object} BundleDiff
- * @property {string} fileName
- * @property {BundleResult | undefined} curr
- * @property {BundleResult | undefined} prev
- * @property {SizeMetrics} diff
- * @property {BundleStatus} status
- */
-
-/**
- * @typedef {Object} CountSummary
- * @property {number} added
- * @property {number} removed
- * @property {number} increased
- * @property {number} decreased
- * @property {number} unchanged
- */
-
-/**
- * @typedef {Object} CategoryReport
- * @property {string} name
- * @property {string | undefined} description
- * @property {number} order
- * @property {{ current: SizeMetrics, baseline: SizeMetrics, diff: SizeMetrics }} metrics
- * @property {CountSummary} counts
- * @property {BundleDiff[]} bundles
- */
-
-/**
- * @typedef {Object} BundleReport
- * @property {CategoryReport[]} categories
- * @property {{ currentBundles: number, baselineBundles: number, metrics: { current: SizeMetrics, baseline: SizeMetrics, diff: SizeMetrics }, counts: CountSummary }} overall
- * @property {boolean} hasBaseline
- */
-
 const currDir = path.resolve('temp/size')
 const prevDir = path.resolve('temp/size-prev')
+let output = '## Bundle Size Report\n\n'
+const sizeHeaders = ['Size', 'Gzip', 'Brotli']
 
 run()
 
 /**
- * Main entry for generating the size report
+ * Main function to generate the size report
  */
 async function run() {
   if (!existsSync(currDir)) {
@@ -79,41 +35,27 @@ async function run() {
     process.exit(1)
   }
 
-  const report = await buildBundleReport()
-  const output = renderReport(report)
+  await renderFiles()
   process.stdout.write(output)
 }
 
 /**
- * Build bundle comparison data from current and baseline artifacts
- * @returns {Promise<BundleReport>}
+ * Renders file sizes and diffs between current and previous versions
  */
-async function buildBundleReport() {
+async function renderFiles() {
   /**
    * @param {string[]} files
    * @returns {string[]}
    */
   const filterFiles = (files) => files.filter((file) => file.endsWith('.json'))
 
-  const currFiles = filterFiles(await readdir(currDir))
-  const baselineFiles = existsSync(prevDir)
-    ? filterFiles(await readdir(prevDir))
-    : []
-  const fileList = new Set([...currFiles, ...baselineFiles])
+  const curr = filterFiles(await readdir(currDir))
+  const prev = existsSync(prevDir) ? filterFiles(await readdir(prevDir)) : []
+  const fileList = new Set([...curr, ...prev])
 
-  /** @type {Map<string, CategoryReport>} */
-  const categories = new Map()
-
-  const overall = {
-    currentBundles: 0,
-    baselineBundles: 0,
-    metrics: {
-      current: createMetrics(),
-      baseline: createMetrics(),
-      diff: createMetrics()
-    },
-    counts: createCounts()
-  }
+  // Group bundles by category
+  /** @type {Map<string, Array<{fileName: string, curr: BundleResult | undefined, prev: BundleResult | undefined}>>} */
+  const bundlesByCategory = new Map()
 
   for (const file of fileList) {
     const currPath = path.resolve(currDir, file)
@@ -121,440 +63,100 @@ async function buildBundleReport() {
 
     const curr = await importJSON(currPath)
     const prev = await importJSON(prevPath)
-    const fileName = curr?.file || prev?.file
-    if (!fileName) continue
+    const fileName = curr?.file || prev?.file || ''
+    const category = curr?.category || prev?.category || 'Other'
 
-    const categoryName = curr?.category || prev?.category || 'Other'
-    const category = ensureCategoryEntry(categories, categoryName)
-
-    const currMetrics = toMetrics(curr)
-    const baselineMetrics = toMetrics(prev)
-    const diffMetrics = subtractMetrics(currMetrics, baselineMetrics)
-    const status = getStatus(curr, prev, diffMetrics.size)
-
-    if (curr) {
-      overall.currentBundles++
-    }
-    if (prev) {
-      overall.baselineBundles++
+    if (!bundlesByCategory.has(category)) {
+      bundlesByCategory.set(category, [])
     }
 
-    addMetrics(overall.metrics.current, currMetrics)
-    addMetrics(overall.metrics.baseline, baselineMetrics)
-    addMetrics(overall.metrics.diff, diffMetrics)
-    incrementStatus(overall.counts, status)
-
-    addMetrics(category.metrics.current, currMetrics)
-    addMetrics(category.metrics.baseline, baselineMetrics)
-    addMetrics(category.metrics.diff, diffMetrics)
-    incrementStatus(category.counts, status)
-
-    category.bundles.push({
-      fileName,
-      curr,
-      prev,
-      diff: diffMetrics,
-      status
-    })
+    // @ts-expect-error - get is valid
+    bundlesByCategory.get(category).push({ fileName, curr, prev })
   }
 
-  const sortedCategories = Array.from(categories.values()).sort(
-    (a, b) => a.order - b.order
-  )
-
-  return {
-    categories: sortedCategories,
-    overall,
-    hasBaseline: baselineFiles.length > 0
-  }
-}
-
-/**
- * Render the complete report in markdown
- * @param {BundleReport} report
- * @returns {string}
- */
-function renderReport(report) {
-  const parts = ['## Bundle Size Report\n']
-
-  parts.push(renderSummary(report))
-
-  if (report.categories.length > 0) {
-    const glance = renderCategoryGlance(report)
-    if (glance) {
-      parts.push('\n' + glance)
-    }
-    parts.push('\n' + renderCategoryDetails(report))
-  }
-
-  return (
-    parts
-      .join('\n')
-      .replace(/\n{3,}/g, '\n\n')
-      .trimEnd() + '\n'
-  )
-}
-
-/**
- * Render overall summary bullets
- * @param {BundleReport} report
- * @returns {string}
- */
-function renderSummary(report) {
-  const { overall, hasBaseline } = report
-  const lines = ['**Summary**']
-
-  const rawLineParts = [
-    `- Raw size: ${prettyBytes(overall.metrics.current.size)}`
-  ]
-  if (hasBaseline) {
-    rawLineParts.push(`baseline ${prettyBytes(overall.metrics.baseline.size)}`)
-    rawLineParts.push(`— ${formatDiffIndicator(overall.metrics.diff.size)}`)
-  }
-  lines.push(rawLineParts.join(' '))
-
-  const gzipLineParts = [`- Gzip: ${prettyBytes(overall.metrics.current.gzip)}`]
-  if (hasBaseline) {
-    gzipLineParts.push(`baseline ${prettyBytes(overall.metrics.baseline.gzip)}`)
-    gzipLineParts.push(`— ${formatDiffIndicator(overall.metrics.diff.gzip)}`)
-  }
-  lines.push(gzipLineParts.join(' '))
-
-  const brotliLineParts = [
-    `- Brotli: ${prettyBytes(overall.metrics.current.brotli)}`
-  ]
-  if (hasBaseline) {
-    brotliLineParts.push(
-      `baseline ${prettyBytes(overall.metrics.baseline.brotli)}`
-    )
-    brotliLineParts.push(
-      `— ${formatDiffIndicator(overall.metrics.diff.brotli)}`
-    )
-  }
-  lines.push(brotliLineParts.join(' '))
-
-  const bundleStats = [`${overall.currentBundles} current`]
-  if (hasBaseline) {
-    bundleStats.push(`${overall.baselineBundles} baseline`)
-  }
-
-  const statusParts = []
-  if (overall.counts.added) statusParts.push(`${overall.counts.added} added`)
-  if (overall.counts.removed)
-    statusParts.push(`${overall.counts.removed} removed`)
-  if (overall.counts.increased)
-    statusParts.push(`${overall.counts.increased} grew`)
-  if (overall.counts.decreased)
-    statusParts.push(`${overall.counts.decreased} shrank`)
-
-  let bundlesLine = `- Bundles: ${bundleStats.join(' • ')}`
-  if (statusParts.length > 0) {
-    bundlesLine += ` • ${statusParts.join(' / ')}`
-  }
-  lines.push(bundlesLine)
-
-  if (!hasBaseline) {
-    lines.push(
-      '_Baseline artifact not found; showing current bundle sizes only._'
-    )
-  }
-
-  return lines.join('\n')
-}
-
-/**
- * Render a compact category glance line
- * @param {BundleReport} report
- * @returns {string}
- */
-function renderCategoryGlance(report) {
-  const { categories, hasBaseline } = report
-  const relevant = categories.filter(
-    (category) =>
-      category.metrics.current.size > 0 ||
-      (hasBaseline && category.metrics.baseline.size > 0)
-  )
-
-  if (relevant.length === 0) return ''
-
-  const sorted = relevant.slice().sort((a, b) => {
-    if (hasBaseline) {
-      return (
-        Math.abs(b.metrics.diff.size) - Math.abs(a.metrics.diff.size) ||
-        b.metrics.current.size - a.metrics.current.size
-      )
-    }
-    return b.metrics.current.size - a.metrics.current.size
+  // Sort categories by their order
+  const sortedCategories = Array.from(bundlesByCategory.keys()).sort((a, b) => {
+    const metaA = getCategoryMetadata(a)
+    const metaB = getCategoryMetadata(b)
+    return (metaA?.order ?? 99) - (metaB?.order ?? 99)
   })
 
-  const limit = 6
-  const trimmed = sorted.slice(0, limit)
-  const parts = trimmed.map((category) => {
-    const currentStr = prettyBytes(category.metrics.current.size)
-    if (hasBaseline) {
-      return `${category.name} ${formatDiffIndicator(category.metrics.diff.size)} (${currentStr})`
+  let totalSize = 0
+  let totalCount = 0
+
+  // Render each category
+  for (const category of sortedCategories) {
+    const bundles = bundlesByCategory.get(category) || []
+    if (bundles.length === 0) continue
+
+    const categoryMeta = getCategoryMetadata(category)
+    output += `### ${category}\n\n`
+    if (categoryMeta?.description) {
+      output += `_${categoryMeta.description}_\n\n`
     }
-    return `${category.name} ${currentStr}`
-  })
 
-  if (sorted.length > limit) {
-    parts.push(`+ ${sorted.length - limit} more`)
-  }
+    const rows = []
+    let categorySize = 0
 
-  return `**Category Glance**\n${parts.join(' · ')}`
-}
-
-/**
- * Render per-category detail tables wrapped in collapsible sections
- * @param {BundleReport} report
- * @returns {string}
- */
-function renderCategoryDetails(report) {
-  const lines = ['<details>', '<summary>Per-category breakdown</summary>', '']
-
-  for (const category of report.categories) {
-    lines.push(renderCategoryBlock(category, report.hasBaseline))
-  }
-
-  lines.push('</details>')
-  return lines.join('\n')
-}
-
-/**
- * Render a single category block with its table
- * @param {CategoryReport} category
- * @param {boolean} hasBaseline
- * @returns {string}
- */
-function renderCategoryBlock(category, hasBaseline) {
-  const lines = ['<details>']
-  const currentStr = prettyBytes(category.metrics.current.size)
-  const summaryParts = [`<summary>${category.name} — ${currentStr}`]
-
-  if (hasBaseline) {
-    summaryParts.push(
-      ` (baseline ${prettyBytes(category.metrics.baseline.size)}) • ${formatDiffIndicator(category.metrics.diff.size)}`
-    )
-  }
-
-  summaryParts.push('</summary>')
-  lines.push(summaryParts.join(''))
-
-  if (category.description) {
-    lines.push(`_${category.description}_`)
-  }
-
-  if (category.bundles.length === 0) {
-    lines.push('No bundles matched this category.\n')
-    lines.push('</details>\n')
-    return lines.join('\n')
-  }
-
-  const headers = hasBaseline
-    ? ['File', 'Before', 'After', 'Δ Raw', 'Δ Gzip', 'Δ Brotli']
-    : ['File', 'Size', 'Gzip', 'Brotli']
-
-  const rows = category.bundles
-    .slice()
-    .sort((a, b) => {
-      const diffMagnitude = Math.abs(b.diff.size) - Math.abs(a.diff.size)
-      if (diffMagnitude !== 0) return diffMagnitude
-      return a.fileName.localeCompare(b.fileName)
-    })
-    .map((bundle) => {
-      if (hasBaseline) {
-        return [
-          formatFileLabel(bundle),
-          formatSize(bundle.prev?.size),
-          formatSize(bundle.curr?.size),
-          formatDiffIndicator(bundle.diff.size),
-          formatDiffIndicator(bundle.diff.gzip),
-          formatDiffIndicator(bundle.diff.brotli)
-        ]
+    for (const { fileName, curr, prev } of bundles) {
+      if (!curr) {
+        // File was deleted
+        rows.push([`~~${fileName}~~`])
+      } else {
+        rows.push([
+          fileName,
+          `${prettyBytes(curr.size)}${getDiff(curr.size, prev?.size)}`,
+          `${prettyBytes(curr.gzip)}${getDiff(curr.gzip, prev?.gzip)}`,
+          `${prettyBytes(curr.brotli)}${getDiff(curr.brotli, prev?.brotli)}`
+        ])
+        categorySize += curr.size
+        totalSize += curr.size
+        totalCount++
       }
+    }
 
-      return [
-        formatFileLabel(bundle),
-        formatSize(bundle.curr?.size),
-        formatSize(bundle.curr?.gzip),
-        formatSize(bundle.curr?.brotli)
-      ]
+    // Sort rows by file name within category
+    rows.sort((a, b) => {
+      const fileA = a[0].replace(/~~/g, '')
+      const fileB = b[0].replace(/~~/g, '')
+      return fileA.localeCompare(fileB)
     })
 
-  lines.push(markdownTable([headers, ...rows]))
-
-  const statusParts = []
-  if (category.counts.added) statusParts.push(`${category.counts.added} added`)
-  if (category.counts.removed)
-    statusParts.push(`${category.counts.removed} removed`)
-  if (category.counts.increased)
-    statusParts.push(`${category.counts.increased} grew`)
-  if (category.counts.decreased)
-    statusParts.push(`${category.counts.decreased} shrank`)
-
-  if (statusParts.length > 0) {
-    lines.push(`\n_Status:_ ${statusParts.join(' / ')}`)
+    output += markdownTable([['File', ...sizeHeaders], ...rows])
+    output += `\n\n**Category Total:** ${prettyBytes(categorySize)}\n\n`
   }
 
-  lines.push('</details>\n')
-  return lines.join('\n')
-}
-
-/**
- * Ensure a category entry exists in the map
- * @param {Map<string, CategoryReport>} categories
- * @param {string} categoryName
- * @returns {CategoryReport}
- */
-function ensureCategoryEntry(categories, categoryName) {
-  if (!categories.has(categoryName)) {
-    const meta = getCategoryMetadata(categoryName)
-    categories.set(categoryName, {
-      name: categoryName,
-      description: meta?.description,
-      order: meta?.order ?? 99,
-      metrics: {
-        current: createMetrics(),
-        baseline: createMetrics(),
-        diff: createMetrics()
-      },
-      counts: createCounts(),
-      bundles: []
-    })
-  }
-  // @ts-expect-error - ensured by check above
-  return categories.get(categoryName)
-}
-
-/**
- * Convert bundle result to metrics
- * @param {BundleResult | undefined} bundle
- * @returns {SizeMetrics}
- */
-function toMetrics(bundle) {
-  if (!bundle) return createMetrics()
-  return {
-    size: bundle.size,
-    gzip: bundle.gzip,
-    brotli: bundle.brotli
+  // Add overall summary
+  if (totalCount > 0) {
+    output += '---\n\n'
+    output += `**Overall Total Size:** ${prettyBytes(totalSize)}\n`
+    output += `**Total Bundle Count:** ${totalCount}\n`
   }
 }
 
 /**
- * Create an empty metrics object
- * @returns {SizeMetrics}
- */
-function createMetrics() {
-  return { size: 0, gzip: 0, brotli: 0 }
-}
-
-/**
- * Add source metrics into target metrics
- * @param {SizeMetrics} target
- * @param {SizeMetrics} source
- */
-function addMetrics(target, source) {
-  target.size += source.size
-  target.gzip += source.gzip
-  target.brotli += source.brotli
-}
-
-/**
- * Subtract baseline metrics from current metrics
- * @param {SizeMetrics} current
- * @param {SizeMetrics} baseline
- * @returns {SizeMetrics}
- */
-function subtractMetrics(current, baseline) {
-  return {
-    size: current.size - baseline.size,
-    gzip: current.gzip - baseline.gzip,
-    brotli: current.brotli - baseline.brotli
-  }
-}
-
-/**
- * Create an empty counts object
- * @returns {CountSummary}
- */
-function createCounts() {
-  return { added: 0, removed: 0, increased: 0, decreased: 0, unchanged: 0 }
-}
-
-/**
- * Increment status counters
- * @param {CountSummary} counts
- * @param {BundleStatus} status
- */
-function incrementStatus(counts, status) {
-  counts[status] += 1
-}
-
-/**
- * Determine bundle status for reporting
- * @param {BundleResult | undefined} curr
- * @param {BundleResult | undefined} prev
- * @param {number} sizeDiff
- * @returns {BundleStatus}
- */
-function getStatus(curr, prev, sizeDiff) {
-  if (curr && prev) {
-    if (sizeDiff > 0) return 'increased'
-    if (sizeDiff < 0) return 'decreased'
-    return 'unchanged'
-  }
-  if (curr && !prev) return 'added'
-  if (!curr && prev) return 'removed'
-  return 'unchanged'
-}
-
-/**
- * Format file label with status hints
- * @param {BundleDiff} bundle
- * @returns {string}
- */
-function formatFileLabel(bundle) {
-  if (bundle.status === 'added') {
-    return `**${bundle.fileName}** _(new)_`
-  }
-  if (bundle.status === 'removed') {
-    return `~~${bundle.fileName}~~ _(removed)_`
-  }
-  return bundle.fileName
-}
-
-/**
- * Format size for table output
- * @param {number | undefined} value
- * @returns {string}
- */
-function formatSize(value) {
-  if (value === undefined) return '—'
-  return prettyBytes(value)
-}
-
-/**
- * Format a diff with an indicator emoji
- * @param {number} diff
- * @returns {string}
- */
-function formatDiffIndicator(diff) {
-  if (diff > 0) {
-    return `:red_circle: +${prettyBytes(diff)}`
-  }
-  if (diff < 0) {
-    return `:green_circle: -${prettyBytes(Math.abs(diff))}`
-  }
-  return ':white_circle: 0 B'
-}
-
-/**
- * Import JSON data if it exists
+ * Imports JSON data from a specified path
+ *
  * @template T
- * @param {string} filePath
- * @returns {Promise<T | undefined>}
+ * @param {string} filePath - Path to the JSON file
+ * @returns {Promise<T | undefined>} The JSON content or undefined if the file does not exist
  */
 async function importJSON(filePath) {
   if (!existsSync(filePath)) return undefined
   return (await import(filePath, { with: { type: 'json' } })).default
 }
+
+/**
+ * Calculates the difference between the current and previous sizes
+ *
+ * @param {number} curr - The current size
+ * @param {number} [prev] - The previous size
+ * @returns {string} The difference in pretty format
+ */
+function getDiff(curr, prev) {
+  if (prev === undefined) return ''
+  const diff = curr - prev
+  if (diff === 0) return ''
+  const sign = diff > 0 ? '+' : ''
+  return ` (**${sign}${prettyBytes(diff)}**)`
+}

src/App.vue

@@ -16,10 +16,11 @@ import { computed, onMounted } from 'vue'
 
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
+import { isDesktop } from '@/platform/distribution/types'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { useConflictDetection } from '@/workbench/extensions/manager/composables/useConflictDetection'
 
-import { electronAPI, isElectron } from './utils/envUtil'
+import { electronAPI } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const conflictDetection = useConflictDetection()
@@ -45,7 +46,7 @@ onMounted(() => {
   // @ts-expect-error fixme ts strict error
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
 
-  if (isElectron()) {
+  if (isDesktop) {
     document.addEventListener('contextmenu', showContextMenu)
   }
 

src/components/actionbar/ComfyActionbar.vue

@@ -2,7 +2,10 @@
   <div class="flex h-full items-center">
     <div
       v-if="isDragging && !isDocked"
-      :class="actionbarClass"
+      class="actionbar-drop-zone m-1.5 flex items-center justify-center self-stretch rounded-md"
+      :class="{
+        'drop-zone-active': isMouseOverDropZone
+      }"
       @mouseenter="onMouseEnterDropZone"
       @mouseleave="onMouseLeaveDropZone"
     >
@@ -10,15 +13,18 @@
     </div>
 
     <Panel
-      class="pointer-events-auto z-1000"
+      class="actionbar"
       :style="style"
-      :class="panelClass"
-      :pt="{
-        header: { class: 'hidden' },
-        content: { class: isDocked ? 'p-0' : 'p-1' }
+      :class="{
+        fixed: !isDocked,
+        'is-dragging': isDragging,
+        'is-docked static mr-2 border-none bg-transparent p-0': isDocked
       }"
     >
-      <div ref="panelRef" class="flex items-center select-none">
+      <div
+        ref="panelRef"
+        class="actionbar-content flex items-center select-none"
+      >
         <span
           ref="dragHandleRef"
           :class="
@@ -28,8 +34,7 @@
             )
           "
         />
-
-        <ComfyRunButton />
+        <ComfyQueueButton />
       </div>
     </Panel>
   </div>
@@ -50,7 +55,7 @@ import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import ComfyRunButton from './ComfyRunButton'
+import ComfyQueueButton from './ComfyQueueButton.vue'
 
 const settingsStore = useSettingStore()
 
@@ -245,20 +250,45 @@ watch(isDragging, (dragging) => {
     isMouseOverDropZone.value = false
   }
 })
-const actionbarClass = computed(() =>
-  cn(
-    'w-[265px] border-dashed border-blue-500 opacity-80',
-    'm-1.5 flex items-center justify-center self-stretch',
-    'rounded-md before:w-50 before:-ml-50 before:h-full',
-    isMouseOverDropZone.value &&
-      'border-[3px] opacity-100 scale-105 shadow-[0_0_20px] shadow-blue-500'
-  )
-)
-const panelClass = computed(() =>
-  cn(
-    'actionbar pointer-events-auto z1000',
-    isDragging.value && 'select-none pointer-events-none',
-    isDocked.value ? 'p-0 static mr-2 border-none bg-transparent' : 'fixed'
-  )
-)
 </script>
+
+<style scoped>
+@reference '../../assets/css/style.css';
+
+.actionbar {
+  pointer-events: all;
+  z-index: 1000;
+}
+
+.actionbar-drop-zone {
+  width: 265px;
+  border: 2px dashed var(--p-primary-color);
+  opacity: 0.8;
+}
+
+.actionbar-drop-zone.drop-zone-active {
+  background: var(--p-highlight-background-focus);
+  border-color: var(--p-primary-color);
+  border-width: 3px;
+  box-shadow: 0 0 20px var(--p-primary-color);
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.actionbar.is-dragging {
+  user-select: none;
+  pointer-events: none;
+}
+
+:deep(.p-panel-content) {
+  @apply p-1;
+}
+
+.is-docked :deep(.p-panel-content) {
+  @apply p-0;
+}
+
+:deep(.p-panel-header) {
+  display: none;
+}
+</style>

src/components/actionbar/ComfyQueueButton.vue

@@ -8,7 +8,7 @@
         showDelay: 600
       }"
       class="comfyui-queue-button"
-      :label="String(activeQueueModeMenuItem?.label ?? '')"
+      :label="activeQueueModeMenuItem.label"
       severity="primary"
       size="small"
       :model="queueModeMenuItems"
@@ -33,7 +33,7 @@
             value: item.tooltip,
             showDelay: 600
           }"
-          :label="String(item.label ?? '')"
+          :label="String(item.label)"
           :icon="item.icon"
           :severity="item.key === queueMode ? 'primary' : 'secondary'"
           size="small"
@@ -82,13 +82,10 @@
 import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import ButtonGroup from 'primevue/buttongroup'
-import type { MenuItem } from 'primevue/menuitem'
 import SplitButton from 'primevue/splitbutton'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { isCloud } from '@/platform/distribution/types'
-import { useTelemetry } from '@/platform/telemetry'
 import { useCommandStore } from '@/stores/commandStore'
 import {
   useQueuePendingTaskCountStore,
@@ -96,52 +93,43 @@ import {
 } from '@/stores/queueStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
-import BatchCountEdit from '../BatchCountEdit.vue'
+import BatchCountEdit from './BatchCountEdit.vue'
 
 const workspaceStore = useWorkspaceStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
 const { mode: queueMode } = storeToRefs(useQueueSettingsStore())
 
 const { t } = useI18n()
-const queueModeMenuItemLookup = computed(() => {
-  const items: Record<string, MenuItem> = {
-    disabled: {
-      key: 'disabled',
-      label: t('menu.run'),
-      tooltip: t('menu.disabledTooltip'),
-      command: () => {
-        queueMode.value = 'disabled'
-      }
-    },
-    change: {
-      key: 'change',
-      label: `${t('menu.run')} (${t('menu.onChange')})`,
-      tooltip: t('menu.onChangeTooltip'),
-      command: () => {
-        queueMode.value = 'change'
-      }
+const queueModeMenuItemLookup = computed(() => ({
+  disabled: {
+    key: 'disabled',
+    label: t('menu.run'),
+    tooltip: t('menu.disabledTooltip'),
+    command: () => {
+      queueMode.value = 'disabled'
+    }
+  },
+  instant: {
+    key: 'instant',
+    label: `${t('menu.run')} (${t('menu.instant')})`,
+    tooltip: t('menu.instantTooltip'),
+    command: () => {
+      queueMode.value = 'instant'
+    }
+  },
+  change: {
+    key: 'change',
+    label: `${t('menu.run')} (${t('menu.onChange')})`,
+    tooltip: t('menu.onChangeTooltip'),
+    command: () => {
+      queueMode.value = 'change'
     }
   }
-  if (!isCloud) {
-    items.instant = {
-      key: 'instant',
-      label: `${t('menu.run')} (${t('menu.instant')})`,
-      tooltip: t('menu.instantTooltip'),
-      command: () => {
-        queueMode.value = 'instant'
-      }
-    }
-  }
-  return items
-})
+}))
 
-const activeQueueModeMenuItem = computed(() => {
-  // Fallback to disabled mode if current mode is not available (e.g., instant mode in cloud)
-  return (
-    queueModeMenuItemLookup.value[queueMode.value] ||
-    queueModeMenuItemLookup.value.disabled
-  )
-})
+const activeQueueModeMenuItem = computed(
+  () => queueModeMenuItemLookup.value[queueMode.value]
+)
 const queueModeMenuItems = computed(() =>
   Object.values(queueModeMenuItemLookup.value)
 )
@@ -153,15 +141,10 @@ const hasPendingTasks = computed(
 
 const commandStore = useCommandStore()
 const queuePrompt = async (e: Event) => {
-  const isShiftPressed = 'shiftKey' in e && e.shiftKey
-  const commandId = isShiftPressed
-    ? 'Comfy.QueuePromptFront'
-    : 'Comfy.QueuePrompt'
-
-  if (isCloud) {
-    useTelemetry()?.trackRunButton({ subscribe_to_run: false })
-  }
-
+  const commandId =
+    'shiftKey' in e && e.shiftKey
+      ? 'Comfy.QueuePromptFront'
+      : 'Comfy.QueuePrompt'
   await commandStore.execute(commandId)
 }
 </script>

src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue

@@ -1,19 +0,0 @@
-<template>
-  <component
-    :is="currentButton"
-    :key="isActiveSubscription ? 'queue' : 'subscribe'"
-  />
-</template>
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import ComfyQueueButton from '@/components/actionbar/ComfyRunButton/ComfyQueueButton.vue'
-import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-
-const { isActiveSubscription } = useSubscription()
-
-const currentButton = computed(() =>
-  isActiveSubscription.value ? ComfyQueueButton : SubscribeToRunButton
-)
-</script>

src/components/actionbar/ComfyRunButton/index.ts

@@ -1,7 +0,0 @@
-import { defineAsyncComponent } from 'vue'
-
-import { isCloud } from '@/platform/distribution/types'
-
-export default isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION
-  ? defineAsyncComponent(() => import('./CloudRunButtonWrapper.vue'))
-  : defineAsyncComponent(() => import('./ComfyQueueButton.vue'))

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

@@ -34,7 +34,8 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { electronAPI, isElectron } from '@/utils/envUtil'
+import { isDesktop } from '@/platform/distribution/types'
+import { electronAPI } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
@@ -84,7 +85,7 @@ const showContextMenu = (event: MouseEvent) => {
   electronAPI()?.showContextMenu({ type: 'text' })
 }
 
-if (isElectron()) {
+if (isDesktop) {
   useEventListener(terminalEl, 'contextmenu', showContextMenu)
 }
 

src/components/breadcrumb/SubgraphBreadcrumb.vue

@@ -18,7 +18,7 @@
       class="w-fit rounded-lg p-0"
       :model="items"
       :pt="{ item: { class: 'pointer-events-auto' } }"
-      :aria-label="$t('g.graphNavigation')"
+      aria-label="Graph navigation"
     >
       <template #item="{ item }">
         <SubgraphBreadcrumbItem

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -5,7 +5,6 @@
       value: item.label,
       showDelay: 512
     }"
-    draggable="false"
     href="#"
     class="p-breadcrumb-item-link h-12 cursor-pointer px-2"
     :class="{

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -46,12 +46,7 @@
           : $t('manager.installAllMissingNodes')
       "
     />
-    <Button
-      :label="$t('g.openManager')"
-      size="small"
-      outlined
-      @click="openManager"
-    />
+    <Button label="Open Manager" size="small" outlined @click="openManager" />
   </div>
 </template>
 

src/components/dialog/content/MissingModelsWarning.vue

@@ -13,7 +13,7 @@
   </div>
   <ListBox :options="missingModels" class="comfy-missing-models">
     <template #option="{ option }">
-      <Suspense v-if="isElectron()">
+      <Suspense v-if="isDesktop">
         <ElectronFileDownload
           :url="option.url"
           :label="option.label"
@@ -39,8 +39,8 @@ import { useI18n } from 'vue-i18n'
 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 { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here
 // as some installations may wish to use custom sources

src/components/dialog/content/SignInContent.vue

@@ -89,7 +89,7 @@
           <img
             src="/assets/images/comfy-logo-mono.svg"
             class="mr-2 h-5 w-5"
-            :alt="$t('g.comfy')"
+            alt="Comfy"
           />
           {{ t('auth.login.useApiKey') }}
         </Button>

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

@@ -89,7 +89,7 @@
           ref="keybindingInput"
           class="mb-2 text-center"
           :model-value="newBindingKeyCombo?.toString() ?? ''"
-          :placeholder="$t('g.pressKeysForNewBinding')"
+          placeholder="Press keys for new binding"
           autocomplete="off"
           fluid
           @keydown.stop.prevent="captureKeybinding"

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

@@ -67,10 +67,10 @@
           />
           <Button
             v-if="!isApiKeyLogin"
-            class="w-fit"
-            variant="text"
+            class="w-32"
             severity="danger"
             :label="$t('auth.deleteAccount.deleteAccount')"
+            icon="pi pi-trash"
             @click="handleDeleteAccount"
           />
         </div>

src/components/dialog/header/ComfyOrgHeader.vue

@@ -3,7 +3,7 @@
   <div class="px-2 py-4">
     <img
       src="/assets/images/comfy-logo-single.svg"
-      :alt="$t('g.comfyOrgLogoAlt')"
+      alt="ComfyOrg Logo"
       width="32"
       height="32"
     />

src/components/graph/GraphCanvas.vue

@@ -420,7 +420,9 @@ onMounted(async () => {
       throw error
     }
   }
-  CORE_SETTINGS.forEach(settingStore.addSetting)
+  CORE_SETTINGS.forEach((setting) => {
+    settingStore.addSetting(setting)
+  })
 
   await newUserService().initializeIfNewUser(settingStore)
 

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -135,12 +135,12 @@ import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
-import { isCloud } from '@/platform/distribution/types'
+import { isCloud, isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
 import { useCommandStore } from '@/stores/commandStore'
-import { electronAPI, isElectron } from '@/utils/envUtil'
+import { electronAPI } from '@/utils/envUtil'
 import { formatVersionAnchor } from '@/utils/formatUtil'
 import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment'
 import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState'
@@ -216,7 +216,7 @@ const moreItems = computed<MenuItem[]>(() => {
       key: 'desktop-guide',
       type: 'item',
       label: t('helpCenter.desktopUserGuide'),
-      visible: isElectron(),
+      visible: isDesktop,
       action: () => {
         const docsUrl =
           electronAPI().getPlatform() === 'darwin'
@@ -230,7 +230,7 @@ const moreItems = computed<MenuItem[]>(() => {
       key: 'dev-tools',
       type: 'item',
       label: t('helpCenter.openDevTools'),
-      visible: isElectron(),
+      visible: isDesktop,
       action: () => {
         openDevTools()
         emit('close')
@@ -239,13 +239,13 @@ const moreItems = computed<MenuItem[]>(() => {
     {
       key: 'divider-1',
       type: 'divider',
-      visible: isElectron()
+      visible: isDesktop
     },
     {
       key: 'reinstall',
       type: 'item',
       label: t('helpCenter.reinstall'),
-      visible: isElectron(),
+      visible: isDesktop,
       action: () => {
         onReinstall()
         emit('close')
@@ -484,13 +484,13 @@ const onSubmenuLeave = (): void => {
 }
 
 const openDevTools = (): void => {
-  if (isElectron()) {
+  if (isDesktop) {
     electronAPI().openDevTools()
   }
 }
 
 const onReinstall = (): void => {
-  if (isElectron()) {
+  if (isDesktop) {
     void electronAPI().reinstall()
   }
 }

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -28,7 +28,7 @@
       />
     </template>
     <template #body>
-      <ElectronDownloadItems v-if="isElectron()" />
+      <ElectronDownloadItems v-if="isDesktop" />
 
       <TreeExplorer
         v-model:expanded-keys="expandedKeys"
@@ -54,13 +54,13 @@ import SidebarTabTemplate from '@/components/sidebar/tabs/SidebarTabTemplate.vue
 import ElectronDownloadItems from '@/components/sidebar/tabs/modelLibrary/ElectronDownloadItems.vue'
 import ModelTreeLeaf from '@/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue'
 import { useTreeExpansion } from '@/composables/useTreeExpansion'
+import { isDesktop } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useLitegraphService } from '@/services/litegraphService'
 import type { ComfyModelDef, ModelFolder } from '@/stores/modelStore'
 import { ResourceState, useModelStore } from '@/stores/modelStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import type { TreeExplorerNode, TreeNode } from '@/types/treeExplorerTypes'
-import { isElectron } from '@/utils/envUtil'
 import { buildTree } from '@/utils/treeUtil'
 
 const modelStore = useModelStore()

src/components/topbar/TopbarBadge.vue

@@ -1,19 +1,12 @@
 <template>
-  <div
-    class="flex items-center gap-2 bg-comfy-menu-secondary"
-    :class="[{ 'flex-row-reverse': reverseOrder }, noPadding ? '' : 'px-3']"
-  >
+  <div class="flex items-center gap-2 bg-comfy-menu-secondary px-3">
     <div
       v-if="badge.label"
       class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
-      :class="labelClass"
     >
       {{ badge.label }}
     </div>
-    <div
-      class="font-inter text-sm font-extrabold text-slate-100"
-      :class="textClass"
-    >
+    <div class="font-inter text-sm font-extrabold text-slate-100">
       {{ badge.text }}
     </div>
   </div>
@@ -21,19 +14,7 @@
 <script setup lang="ts">
 import type { TopbarBadge } from '@/types/comfy'
 
-withDefaults(
-  defineProps<{
-    badge: TopbarBadge
-    reverseOrder?: boolean
-    noPadding?: boolean
-    labelClass?: string
-    textClass?: string
-  }>(),
-  {
-    reverseOrder: false,
-    noPadding: false,
-    labelClass: '',
-    textClass: ''
-  }
-)
+defineProps<{
+  badge: TopbarBadge
+}>()
 </script>

src/components/topbar/TopbarBadges.vue

@@ -4,10 +4,6 @@
       v-for="badge in topbarBadgeStore.badges"
       :key="badge.text"
       :badge
-      :reverse-order="reverseOrder"
-      :no-padding="noPadding"
-      :label-class="labelClass"
-      :text-class="textClass"
     />
   </div>
 </template>
@@ -17,20 +13,5 @@ import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
 
 import TopbarBadge from './TopbarBadge.vue'
 
-withDefaults(
-  defineProps<{
-    reverseOrder?: boolean
-    noPadding?: boolean
-    labelClass?: string
-    textClass?: string
-  }>(),
-  {
-    reverseOrder: false,
-    noPadding: false,
-    labelClass: '',
-    textClass: ''
-  }
-)
-
 const topbarBadgeStore = useTopbarBadgeStore()
 </script>

src/components/topbar/WorkflowTabs.vue

@@ -79,6 +79,7 @@ import { useI18n } from 'vue-i18n'
 
 import WorkflowTab from '@/components/topbar/WorkflowTab.vue'
 import { useOverflowObserver } from '@/composables/element/useOverflowObserver'
+import { isDesktop } from '@/platform/distribution/types'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import {
@@ -87,7 +88,6 @@ import {
 } from '@/platform/workflow/management/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { isElectron } from '@/utils/envUtil'
 import { whileMouseDown } from '@/utils/mouseDownUtil'
 
 import WorkflowOverflowMenu from './WorkflowOverflowMenu.vue'
@@ -114,8 +114,6 @@ const showOverflowArrows = ref(false)
 const leftArrowEnabled = ref(false)
 const rightArrowEnabled = ref(false)
 
-const isDesktop = isElectron()
-
 const workflowToOption = (workflow: ComfyWorkflow): WorkflowOption => ({
   value: workflow.path,
   workflow

src/composables/auth/useFirebaseAuthActions.ts

@@ -208,7 +208,6 @@ export const useFirebaseAuthActions = () => {
     signUpWithEmail,
     updatePassword,
     deleteAccount,
-    accessError,
-    reportError
+    accessError
   }
 }

src/composables/graph/useGraphNodeManager.ts

@@ -126,6 +126,14 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     // Extract safe widget data
     const slotMetadata = new Map<string, WidgetSlotMetadata>()
 
+    node.inputs?.forEach((input, index) => {
+      if (!input?.widget?.name) return
+      slotMetadata.set(input.widget.name, {
+        index,
+        linked: input.link != null
+      })
+    })
+
     const reactiveWidgets = shallowReactive<IBaseWidget[]>(node.widgets ?? [])
     Object.defineProperty(node, 'widgets', {
       get() {
@@ -136,15 +144,8 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       }
     })
 
-    const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
-      node.inputs?.forEach((input, index) => {
-        if (!input?.widget?.name) return
-        slotMetadata.set(input.widget.name, {
-          index,
-          linked: input.link != null
-        })
-      })
-      return (
+    const safeWidgets = reactiveComputed<SafeWidgetData[]>(
+      () =>
         node.widgets?.map((widget) => {
           try {
             // TODO: Use widget.getReactiveData() once TypeScript types are updated
@@ -182,8 +183,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
             }
           }
         }) ?? []
-      )
-    })
+    )
 
     const nodeType =
       node.type ||

src/composables/sidebarTabs/useModelLibrarySidebarTab.ts

@@ -1,9 +1,9 @@
 import { markRaw } from 'vue'
 
 import ModelLibrarySidebarTab from '@/components/sidebar/tabs/ModelLibrarySidebarTab.vue'
+import { isDesktop } from '@/platform/distribution/types'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
 import type { SidebarTabExtension } from '@/types/extensionTypes'
-import { isElectron } from '@/utils/envUtil'
 
 export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
   return {
@@ -15,7 +15,7 @@ export const useModelLibrarySidebarTab = (): SidebarTabExtension => {
     component: markRaw(ModelLibrarySidebarTab),
     type: 'vue',
     iconBadge: () => {
-      if (isElectron()) {
+      if (isDesktop) {
         const electronDownloadStore = useElectronDownloadStore()
         if (electronDownloadStore.inProgressDownloads.length > 0) {
           return electronDownloadStore.inProgressDownloads.length.toString()

src/composables/useCopy.ts

@@ -1,12 +1,6 @@
 import { useEventListener } from '@vueuse/core'
 
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import { shouldIgnoreCopyPaste } from '@/workbench/eventHelpers'
-
-const clipboardHTMLWrapper = [
-  '<meta charset="utf-8"><div><span data-metadata="',
-  '"></span></div><span style="white-space:pre-wrap;">Text</span>'
-]
 
 /**
  * Adds a handler on copy that serializes selected nodes to JSON
@@ -15,19 +9,28 @@ export const useCopy = () => {
   const canvasStore = useCanvasStore()
 
   useEventListener(document, 'copy', (e) => {
-    if (shouldIgnoreCopyPaste(e.target)) {
+    if (!(e.target instanceof Element)) {
+      return
+    }
+    if (
+      (e.target instanceof HTMLTextAreaElement &&
+        e.target.type === 'textarea') ||
+      (e.target instanceof HTMLInputElement && e.target.type === 'text')
+    ) {
       // Default system copy
       return
     }
+    const isTargetInGraph =
+      e.target.classList.contains('litegraph') ||
+      e.target.classList.contains('graph-canvas-container') ||
+      e.target.id === 'graph-canvas'
+
     // copy nodes and clear clipboard
     const canvas = canvasStore.canvas
-    if (canvas?.selectedItems) {
-      const serializedData = canvas.copyToClipboard()
+    if (isTargetInGraph && canvas?.selectedItems) {
+      canvas.copyToClipboard()
       // clearData doesn't remove images from clipboard
-      e.clipboardData?.setData(
-        'text/html',
-        clipboardHTMLWrapper.join(btoa(serializedData))
-      )
+      e.clipboardData?.setData('text', ' ')
       e.preventDefault()
       e.stopImmediatePropagation()
       return false

src/composables/useCoreCommands.ts

@@ -21,9 +21,7 @@ import {
 import type { Point } from '@/lib/litegraph/src/litegraph'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import { createModelNodeFromAsset } from '@/platform/assets/utils/createModelNodeFromAsset'
-import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
-import { useTelemetry } from '@/platform/telemetry'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowService } from '@/platform/workflow/core/services/workflowService'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
@@ -453,11 +451,6 @@ export function useCoreCommands(): ComfyCommand[] {
       category: 'essentials' as const,
       function: async () => {
         const batchCount = useQueueSettingsStore().batchCount
-
-        if (isCloud) {
-          useTelemetry()?.trackWorkflowExecution()
-        }
-
         await app.queuePrompt(0, batchCount)
       }
     },
@@ -469,11 +462,6 @@ export function useCoreCommands(): ComfyCommand[] {
       category: 'essentials' as const,
       function: async () => {
         const batchCount = useQueueSettingsStore().batchCount
-
-        if (isCloud) {
-          useTelemetry()?.trackWorkflowExecution()
-        }
-
         await app.queuePrompt(-1, batchCount)
       }
     },

src/composables/usePaste.ts

@@ -7,22 +7,6 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { isAudioNode, isImageNode, isVideoNode } from '@/utils/litegraphUtil'
-import { shouldIgnoreCopyPaste } from '@/workbench/eventHelpers'
-
-function pasteClipboardItems(data: DataTransfer): boolean {
-  const rawData = data.getData('text/html')
-  const match = rawData.match(/data-metadata="([A-Za-z0-9+/=]+)"/)?.[1]
-  if (!match) return false
-  try {
-    useCanvasStore()
-      .getCanvas()
-      ._deserializeItems(JSON.parse(atob(match)), {})
-    return true
-  } catch (err) {
-    console.error(err)
-  }
-  return false
-}
 
 /**
  * Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
@@ -54,10 +38,15 @@ export const usePaste = () => {
   }
 
   useEventListener(document, 'paste', async (e) => {
-    if (shouldIgnoreCopyPaste(e.target)) {
-      // Default system copy
-      return
-    }
+    const isTargetInGraph =
+      e.target instanceof Element &&
+      (e.target.classList.contains('litegraph') ||
+        e.target.classList.contains('graph-canvas-container') ||
+        e.target.id === 'graph-canvas')
+
+    // If the target is not in the graph, we don't want to handle the paste event
+    if (!isTargetInGraph) return
+
     // ctrl+shift+v is used to paste nodes with connections
     // this is handled by litegraph
     if (workspaceStore.shiftDown) return
@@ -120,7 +109,6 @@ export const usePaste = () => {
         return
       }
     }
-    if (pasteClipboardItems(data)) return
 
     // No image found. Look for node data
     data = data.getData('text/plain')

src/config/subscriptionPricesConfig.ts

@@ -1 +0,0 @@
-export const MONTHLY_SUBSCRIPTION_PRICE = 20

src/extensions/core/cloudSubscription.ts

@@ -1,24 +0,0 @@
-import { watch } from 'vue'
-
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import { useExtensionService } from '@/services/extensionService'
-
-useExtensionService().registerExtension({
-  name: 'Comfy.CloudSubscription',
-
-  setup: async () => {
-    const { isLoggedIn } = useCurrentUser()
-    const { requireActiveSubscription } = useSubscription()
-
-    const checkSubscriptionStatus = () => {
-      if (!isLoggedIn.value) return
-
-      void requireActiveSubscription()
-    }
-
-    watch(() => isLoggedIn.value, checkSubscriptionStatus, {
-      immediate: true
-    })
-  }
-})

src/extensions/core/electronAdapter.ts

@@ -2,12 +2,13 @@ import log from 'loglevel'
 
 import { PYTHON_MIRROR } from '@/constants/uvMirrors'
 import { t } from '@/i18n'
+import { isDesktop } from '@/platform/distribution/types'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import { app } from '@/scripts/app'
 import { useDialogService } from '@/services/dialogService'
 import { checkMirrorReachable } from '@/utils/electronMirrorCheck'
-import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
+import { electronAPI as getElectronAPI } from '@/utils/envUtil'
 
 // Desktop documentation URLs
 const DESKTOP_DOCS = {
@@ -16,7 +17,7 @@ const DESKTOP_DOCS = {
 } as const
 
 ;(async () => {
-  if (!isElectron()) return
+  if (!isDesktop) return
 
   const electronAPI = getElectronAPI()
   const desktopAppVersion = await electronAPI.getElectronVersion()

src/extensions/core/index.ts

@@ -26,8 +26,4 @@ import './widgetInputs'
 
 if (isCloud) {
   import('./cloudBadge')
-
-  if (__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION) {
-    import('./cloudSubscription')
-  }
 }

src/i18n.ts

@@ -1,159 +1,68 @@
 import { createI18n } from 'vue-i18n'
 
-// ESLint cannot statically resolve dynamic imports with relative paths in template strings,
-// but these are valid ES module imports that Vite processes correctly at build time.
-
-// Import only English locale eagerly as the default/fallback
+import arCommands from './locales/ar/commands.json' with { type: 'json' }
+import ar from './locales/ar/main.json' with { type: 'json' }
+import arNodes from './locales/ar/nodeDefs.json' with { type: 'json' }
+import arSettings from './locales/ar/settings.json' with { type: 'json' }
 import enCommands from './locales/en/commands.json' with { type: 'json' }
 import en from './locales/en/main.json' with { type: 'json' }
 import enNodes from './locales/en/nodeDefs.json' with { type: 'json' }
 import enSettings from './locales/en/settings.json' with { type: 'json' }
+import esCommands from './locales/es/commands.json' with { type: 'json' }
+import es from './locales/es/main.json' with { type: 'json' }
+import esNodes from './locales/es/nodeDefs.json' with { type: 'json' }
+import esSettings from './locales/es/settings.json' with { type: 'json' }
+import frCommands from './locales/fr/commands.json' with { type: 'json' }
+import fr from './locales/fr/main.json' with { type: 'json' }
+import frNodes from './locales/fr/nodeDefs.json' with { type: 'json' }
+import frSettings from './locales/fr/settings.json' with { type: 'json' }
+import jaCommands from './locales/ja/commands.json' with { type: 'json' }
+import ja from './locales/ja/main.json' with { type: 'json' }
+import jaNodes from './locales/ja/nodeDefs.json' with { type: 'json' }
+import jaSettings from './locales/ja/settings.json' with { type: 'json' }
+import koCommands from './locales/ko/commands.json' with { type: 'json' }
+import ko from './locales/ko/main.json' with { type: 'json' }
+import koNodes from './locales/ko/nodeDefs.json' with { type: 'json' }
+import koSettings from './locales/ko/settings.json' with { type: 'json' }
+import ruCommands from './locales/ru/commands.json' with { type: 'json' }
+import ru from './locales/ru/main.json' with { type: 'json' }
+import ruNodes from './locales/ru/nodeDefs.json' with { type: 'json' }
+import ruSettings from './locales/ru/settings.json' with { type: 'json' }
+import trCommands from './locales/tr/commands.json' with { type: 'json' }
+import tr from './locales/tr/main.json' with { type: 'json' }
+import trNodes from './locales/tr/nodeDefs.json' with { type: 'json' }
+import trSettings from './locales/tr/settings.json' with { type: 'json' }
+import zhTWCommands from './locales/zh-TW/commands.json' with { type: 'json' }
+import zhTW from './locales/zh-TW/main.json' with { type: 'json' }
+import zhTWNodes from './locales/zh-TW/nodeDefs.json' with { type: 'json' }
+import zhTWSettings from './locales/zh-TW/settings.json' with { type: 'json' }
+import zhCommands from './locales/zh/commands.json' with { type: 'json' }
+import zh from './locales/zh/main.json' with { type: 'json' }
+import zhNodes from './locales/zh/nodeDefs.json' with { type: 'json' }
+import zhSettings from './locales/zh/settings.json' with { type: 'json' }
 
-function buildLocale<
-  M extends Record<string, unknown>,
-  N extends Record<string, unknown>,
-  C extends Record<string, unknown>,
-  S extends Record<string, unknown>
->(main: M, nodes: N, commands: C, settings: S) {
+function buildLocale<M, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
   return {
     ...main,
     nodeDefs: nodes,
     commands: commands,
     settings: settings
-  } as M & { nodeDefs: N; commands: C; settings: S }
-}
-
-// Locale loader map - dynamically import locales only when needed
-const localeLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('./locales/ar/main.json'),
-  es: () => import('./locales/es/main.json'),
-  fr: () => import('./locales/fr/main.json'),
-  ja: () => import('./locales/ja/main.json'),
-  ko: () => import('./locales/ko/main.json'),
-  ru: () => import('./locales/ru/main.json'),
-  tr: () => import('./locales/tr/main.json'),
-  zh: () => import('./locales/zh/main.json'),
-  'zh-TW': () => import('./locales/zh-TW/main.json')
-}
-
-const nodeDefsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('./locales/ar/nodeDefs.json'),
-  es: () => import('./locales/es/nodeDefs.json'),
-  fr: () => import('./locales/fr/nodeDefs.json'),
-  ja: () => import('./locales/ja/nodeDefs.json'),
-  ko: () => import('./locales/ko/nodeDefs.json'),
-  ru: () => import('./locales/ru/nodeDefs.json'),
-  tr: () => import('./locales/tr/nodeDefs.json'),
-  zh: () => import('./locales/zh/nodeDefs.json'),
-  'zh-TW': () => import('./locales/zh-TW/nodeDefs.json')
-}
-
-const commandsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('./locales/ar/commands.json'),
-  es: () => import('./locales/es/commands.json'),
-  fr: () => import('./locales/fr/commands.json'),
-  ja: () => import('./locales/ja/commands.json'),
-  ko: () => import('./locales/ko/commands.json'),
-  ru: () => import('./locales/ru/commands.json'),
-  tr: () => import('./locales/tr/commands.json'),
-  zh: () => import('./locales/zh/commands.json'),
-  'zh-TW': () => import('./locales/zh-TW/commands.json')
-}
-
-const settingsLoaders: Record<
-  string,
-  () => Promise<{ default: Record<string, unknown> }>
-> = {
-  ar: () => import('./locales/ar/settings.json'),
-  es: () => import('./locales/es/settings.json'),
-  fr: () => import('./locales/fr/settings.json'),
-  ja: () => import('./locales/ja/settings.json'),
-  ko: () => import('./locales/ko/settings.json'),
-  ru: () => import('./locales/ru/settings.json'),
-  tr: () => import('./locales/tr/settings.json'),
-  zh: () => import('./locales/zh/settings.json'),
-  'zh-TW': () => import('./locales/zh-TW/settings.json')
-}
-
-// Track which locales have been loaded
-const loadedLocales = new Set<string>(['en'])
-
-// Track locales currently being loaded to prevent race conditions
-const loadingLocales = new Map<string, Promise<void>>()
-
-/**
- * Dynamically load a locale and its associated files (nodeDefs, commands, settings)
- */
-export async function loadLocale(locale: string): Promise<void> {
-  if (loadedLocales.has(locale)) {
-    return
   }
-
-  // If already loading, return the existing promise to prevent duplicate loads
-  const existingLoad = loadingLocales.get(locale)
-  if (existingLoad) {
-    return existingLoad
-  }
-
-  const loader = localeLoaders[locale]
-  const nodeDefsLoader = nodeDefsLoaders[locale]
-  const commandsLoader = commandsLoaders[locale]
-  const settingsLoader = settingsLoaders[locale]
-
-  if (!loader || !nodeDefsLoader || !commandsLoader || !settingsLoader) {
-    console.warn(`Locale "${locale}" is not supported`)
-    return
-  }
-
-  // Create and track the loading promise
-  const loadPromise = (async () => {
-    try {
-      const [main, nodes, commands, settings] = await Promise.all([
-        loader(),
-        nodeDefsLoader(),
-        commandsLoader(),
-        settingsLoader()
-      ])
-
-      const messages = buildLocale(
-        main.default,
-        nodes.default,
-        commands.default,
-        settings.default
-      )
-
-      i18n.global.setLocaleMessage(locale, messages as LocaleMessages)
-      loadedLocales.add(locale)
-    } catch (error) {
-      console.error(`Failed to load locale "${locale}":`, error)
-      throw error
-    } finally {
-      // Clean up the loading promise once complete
-      loadingLocales.delete(locale)
-    }
-  })()
-
-  loadingLocales.set(locale, loadPromise)
-  return loadPromise
 }
 
-// Only include English in the initial bundle
 const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings)
+  en: buildLocale(en, enNodes, enCommands, enSettings),
+  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
+  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings),
+  ru: buildLocale(ru, ruNodes, ruCommands, ruSettings),
+  ja: buildLocale(ja, jaNodes, jaCommands, jaSettings),
+  ko: buildLocale(ko, koNodes, koCommands, koSettings),
+  fr: buildLocale(fr, frNodes, frCommands, frSettings),
+  es: buildLocale(es, esNodes, esCommands, esSettings),
+  ar: buildLocale(ar, arNodes, arCommands, arSettings),
+  tr: buildLocale(tr, trNodes, trCommands, trSettings)
 }
 
-// Type for locale messages - inferred from the English locale structure
-type LocaleMessages = typeof messages.en
-
 export const i18n = createI18n({
   // Must set `false`, as Vue I18n Legacy API is for Vue 2
   legacy: false,

src/lib/litegraph/src/LGraph.ts

@@ -1665,7 +1665,7 @@ export class LGraph
         continue
       }
 
-      const input = subgraphNode.inputs[i - 1]
+      const input = subgraphNode.findInputSlotByType(link.type, true, true)
       outputNode.connectSlots(output, subgraphNode, input, link.parentId)
     }
 

src/lib/litegraph/src/LGraphCanvas.ts

@@ -3867,10 +3867,11 @@ export class LGraphCanvas
    * When called without parameters, it copies {@link selectedItems}.
    * @param items The items to copy.  If nullish, all selected items are copied.
    */
-  copyToClipboard(items?: Iterable<Positionable>): string {
-    const serializedData = JSON.stringify(this._serializeItems(items))
-    localStorage.setItem('litegrapheditor_clipboard', serializedData)
-    return serializedData
+  copyToClipboard(items?: Iterable<Positionable>): void {
+    localStorage.setItem(
+      'litegrapheditor_clipboard',
+      JSON.stringify(this._serializeItems(items))
+    )
   }
 
   emitEvent(detail: LGraphCanvasEventMap['litegraph:canvas']): void {
@@ -3906,7 +3907,6 @@ export class LGraphCanvas
     if (!data) return
     return this._deserializeItems(JSON.parse(data), options)
   }
-
   _deserializeItems(
     parsed: ClipboardItems,
     options: IPasteFromClipboardOptions
@@ -3923,7 +3923,6 @@ export class LGraphCanvas
     const { graph } = this
     if (!graph) throw new NullGraphError()
     graph.beforeChange()
-    this.emitBeforeChange()
 
     // Parse & initialise
     parsed.nodes ??= []
@@ -4093,7 +4092,6 @@ export class LGraphCanvas
     this.selectItems(created)
 
     graph.afterChange()
-    this.emitAfterChange()
 
     return results
   }

src/lib/litegraph/src/subgraph/ExecutableNodeDTO.ts

@@ -294,21 +294,25 @@ export class ExecutableNodeDTO implements ExecutableLGraphNode {
       // Fallback check for nodes performing link redirection
       const virtualLink = this.node.getInputLink(slot)
       if (virtualLink) {
-        const { inputNode } = virtualLink.resolve(this.graph)
-        if (!inputNode)
+        const outputNode = this.graph.getNodeById(virtualLink.origin_id)
+        if (!outputNode)
           throw new InvalidLinkError(
             `Virtual node failed to resolve parent [${this.id}] slot [${slot}]`
           )
 
-        const inputNodeExecutionId = [
+        const outputNodeExecutionId = [
           ...this.subgraphNodePath,
-          inputNode.id
+          outputNode.id
         ].join(':')
-        const inputNodeDto = this.nodesByExecutionId.get(inputNodeExecutionId)
-        if (!inputNodeDto)
-          throw new Error(`No input node DTO found for id [${inputNode.id}]`)
+        const outputNodeDto = this.nodesByExecutionId.get(outputNodeExecutionId)
+        if (!outputNodeDto)
+          throw new Error(`No output node DTO found for id [${outputNode.id}]`)
 
-        return inputNodeDto.resolveInput(virtualLink.target_slot, visited, type)
+        return outputNodeDto.resolveOutput(
+          virtualLink.origin_slot,
+          type,
+          visited
+        )
       }
 
       // Virtual nodes without a matching input should be discarded.

src/locales/en/main.json

@@ -36,8 +36,6 @@
     "import": "Import",
     "loadAllFolders": "Load All Folders",
     "logoAlt": "ComfyUI Logo",
-    "comfyOrgLogoAlt": "ComfyOrg Logo",
-    "comfy": "Comfy",
     "refresh": "Refresh",
     "refreshNode": "Refresh Node",
     "terminal": "Terminal",
@@ -90,11 +88,6 @@
     "no": "No",
     "cancel": "Cancel",
     "close": "Close",
-    "pressKeysForNewBinding": "Press keys for new binding",
-    "defaultBanner": "default banner",
-    "enableOrDisablePack": "Enable or disable pack",
-    "openManager": "Open Manager",
-    "graphNavigation": "Graph navigation",
     "dropYourFileOr": "Drop your file or",
     "back": "Back",
     "next": "Next",
@@ -1344,8 +1337,7 @@
     "Notification Preferences": "Notification Preferences",
     "3DViewer": "3DViewer",
     "Vue Nodes": "Vue Nodes",
-    "Canvas Navigation": "Canvas Navigation",
-    "PlanCredits": "Plan & Credits"
+    "Canvas Navigation": "Canvas Navigation"
   },
   "serverConfigItems": {
     "listen": {
@@ -1785,8 +1777,6 @@
     "failedToInitiateCreditPurchase": "Failed to initiate credit purchase: {error}",
     "failedToAccessBillingPortal": "Failed to access billing portal: {error}",
     "failedToPurchaseCredits": "Failed to purchase credits: {error}",
-    "failedToFetchSubscription": "Failed to fetch subscription status: {error}",
-    "failedToInitiateSubscription": "Failed to initiate subscription: {error}",
     "unauthorizedDomain": "Your domain {domain} is not authorized to use this service. Please contact {email} to add your domain to the whitelist.",
     "useApiKeyTip": "Tip: Can't access normal login? Use the Comfy API Key option.",
     "nothingSelected": "Nothing selected",
@@ -1933,35 +1923,6 @@
     "added": "Added",
     "accountInitialized": "Account initialized"
   },
-  "subscription": {
-    "title": "Subscription",
-    "comfyCloud": "Comfy Cloud",
-    "beta": "BETA",
-    "perMonth": "USD / month",
-    "renewsDate": "Renews {date}",
-    "manageSubscription": "Manage subscription",
-    "apiNodesBalance": "\"API Nodes\" Credit Balance",
-    "apiNodesDescription": "For running commercial/proprietary models",
-    "totalCredits": "Total credits",
-    "viewUsageHistory": "View usage history",
-    "addApiCredits": "Add API credits",
-    "yourPlanIncludes": "Your plan includes:",
-    "viewMoreDetails": "View more details",
-    "learnMore": "Learn more",
-    "messageSupport": "Message support",
-    "invoiceHistory": "Invoice history",
-    "benefits": {
-      "benefit1": "$10 in monthly credits for API models — top up when needed",
-      "benefit2": "Up to 30 min runtime per job"
-    },
-    "required": {
-      "title": "Subscribe to",
-      "waitingForSubscription": "Complete your subscription in the new tab. We'll automatically detect when you're done!",
-      "subscribe": "Subscribe"
-    },
-    "subscribeToRun": "Subscribe to Run",
-    "subscribeNow": "Subscribe Now"
-  },
   "userSettings": {
     "title": "User Settings",
     "name": "Name",

src/main.ts

@@ -13,7 +13,6 @@ import { VueFire, VueFireAuth } from 'vuefire'
 
 import { FIREBASE_CONFIG } from '@/config/firebase'
 import '@/lib/litegraph/public/css/litegraph.css'
-import '@/platform/auth/serviceWorker'
 import router from '@/router'
 
 import App from './App.vue'

src/platform/auth/serviceWorker/index.ts

@@ -1,9 +0,0 @@
-import { isCloud } from '@/platform/distribution/types'
-
-/**
- * Auth service worker registration (cloud-only).
- * Tree-shaken for desktop/localhost builds via compile-time constant.
- */
-if (isCloud) {
-  void import('./register')
-}

src/platform/auth/serviceWorker/register.ts

@@ -1,57 +0,0 @@
-import { watch } from 'vue'
-
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-
-/**
- * Registers the authentication service worker for cloud distribution.
- * Intercepts /api/view requests to add auth headers for browser-native requests.
- */
-async function registerAuthServiceWorker(): Promise<void> {
-  if (!('serviceWorker' in navigator)) {
-    return
-  }
-
-  try {
-    await navigator.serviceWorker.register('/auth-sw.js')
-
-    setupAuthHeaderProvider()
-    setupCacheInvalidation()
-  } catch (error) {
-    console.error('[Auth SW] Registration failed:', error)
-  }
-}
-
-/**
- * Listens for auth header requests from the service worker
- */
-function setupAuthHeaderProvider(): void {
-  navigator.serviceWorker.addEventListener('message', async (event) => {
-    if (event.data.type === 'REQUEST_AUTH_HEADER') {
-      const firebaseAuthStore = useFirebaseAuthStore()
-      const authHeader = await firebaseAuthStore.getAuthHeader()
-
-      event.ports[0].postMessage({
-        type: 'AUTH_HEADER_RESPONSE',
-        authHeader
-      })
-    }
-  })
-}
-
-/**
- * Invalidates cached auth header when user logs in/out
- */
-function setupCacheInvalidation(): void {
-  const { isLoggedIn } = useCurrentUser()
-
-  watch(isLoggedIn, (newValue, oldValue) => {
-    if (newValue !== oldValue) {
-      navigator.serviceWorker.controller?.postMessage({
-        type: 'INVALIDATE_AUTH_HEADER'
-      })
-    }
-  })
-}
-
-void registerAuthServiceWorker()

src/platform/cloud/subscription/components/SubscribeButton.vue

@@ -1,105 +0,0 @@
-<template>
-  <Button
-    :label="label || $t('subscription.required.subscribe')"
-    :size="size"
-    :class="buttonClass"
-    :loading="isLoading"
-    :disabled="isPolling"
-    severity="primary"
-    @click="handleSubscribe"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import { onBeforeUnmount, ref } from 'vue'
-
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import { isCloud } from '@/platform/distribution/types'
-import { useTelemetry } from '@/platform/telemetry'
-
-withDefaults(
-  defineProps<{
-    label?: string
-    size?: 'small' | 'large'
-    buttonClass?: string
-  }>(),
-  {
-    size: 'large',
-    buttonClass: 'w-full font-bold'
-  }
-)
-
-const emit = defineEmits<{
-  subscribed: []
-}>()
-
-const { subscribe, isActiveSubscription, fetchStatus } = useSubscription()
-
-const isLoading = ref(false)
-const isPolling = ref(false)
-let pollInterval: number | null = null
-
-const POLL_INTERVAL_MS = 3000 // Poll every 3 seconds
-const MAX_POLL_DURATION_MS = 5 * 60 * 1000 // Stop polling after 5 minutes
-
-const startPollingSubscriptionStatus = () => {
-  isPolling.value = true
-  isLoading.value = true
-
-  const startTime = Date.now()
-
-  const poll = async () => {
-    try {
-      if (Date.now() - startTime > MAX_POLL_DURATION_MS) {
-        stopPolling()
-        return
-      }
-
-      await fetchStatus()
-
-      if (isActiveSubscription.value) {
-        stopPolling()
-        emit('subscribed')
-      }
-    } catch (error) {
-      console.error(
-        '[SubscribeButton] Error polling subscription status:',
-        error
-      )
-    }
-  }
-
-  void poll()
-  pollInterval = window.setInterval(poll, POLL_INTERVAL_MS)
-}
-
-const stopPolling = () => {
-  if (pollInterval) {
-    clearInterval(pollInterval)
-    pollInterval = null
-  }
-  isPolling.value = false
-  isLoading.value = false
-}
-
-const handleSubscribe = async () => {
-  if (isCloud) {
-    useTelemetry()?.trackSubscription('subscribe_clicked')
-  }
-
-  isLoading.value = true
-  try {
-    await subscribe()
-
-    startPollingSubscriptionStatus()
-  } catch (error) {
-    console.error('[SubscribeButton] Error initiating subscription:', error)
-    isLoading.value = false
-  }
-}
-
-onBeforeUnmount(() => {
-  stopPolling()
-})
-</script>

src/platform/cloud/subscription/components/SubscribeToRun.vue

@@ -1,33 +0,0 @@
-<template>
-  <Button
-    v-tooltip.bottom="{
-      value: $t('subscription.subscribeToRun'),
-      showDelay: 600
-    }"
-    class="subscribe-to-run-button"
-    :label="$t('subscription.subscribeToRun')"
-    icon="pi pi-lock"
-    severity="primary"
-    size="small"
-    data-testid="subscribe-to-run-button"
-    @click="handleSubscribeToRun"
-  />
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import { isCloud } from '@/platform/distribution/types'
-import { useTelemetry } from '@/platform/telemetry'
-
-const { showSubscriptionDialog } = useSubscription()
-
-const handleSubscribeToRun = () => {
-  if (isCloud) {
-    useTelemetry()?.trackRunButton({ subscribe_to_run: true })
-  }
-
-  showSubscriptionDialog()
-}
-</script>

src/platform/cloud/subscription/components/SubscriptionBenefits.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="flex flex-col gap-3">
-    <div class="flex items-start gap-2">
-      <i class="pi pi-check mt-1 text-sm" />
-      <span class="text-sm">
-        {{ $t('subscription.benefits.benefit1') }}
-      </span>
-    </div>
-
-    <div class="flex items-start gap-2">
-      <i class="pi pi-check mt-1 text-sm" />
-      <span class="text-sm">
-        {{ $t('subscription.benefits.benefit2') }}
-      </span>
-    </div>
-
-    <Button
-      :label="$t('subscription.viewMoreDetails')"
-      text
-      icon="pi pi-external-link"
-      icon-pos="left"
-      size="small"
-      class="self-start !p-0 text-sm hover:!bg-transparent [&]:!text-[inherit]"
-      @click="handleViewMoreDetails"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-
-const handleViewMoreDetails = () => {
-  window.open('https://www.comfy.org/cloud', '_blank')
-}
-</script>

src/platform/cloud/subscription/components/SubscriptionPanel.vue

@@ -1,276 +0,0 @@
-<template>
-  <TabPanel value="PlanCredits" class="subscription-container h-full">
-    <div class="flex h-full flex-col">
-      <div class="flex items-center gap-2">
-        <h2 class="text-2xl">
-          {{ $t('subscription.title') }}
-        </h2>
-        <TopbarBadges reverse-order />
-      </div>
-
-      <div class="grow overflow-auto">
-        <div class="rounded-lg border border-charcoal-400 p-4">
-          <div>
-            <div class="flex items-center justify-between">
-              <div>
-                <div class="flex items-baseline gap-1">
-                  <span class="text-2xl font-bold">{{
-                    formattedMonthlyPrice
-                  }}</span>
-                  <span>{{ $t('subscription.perMonth') }}</span>
-                </div>
-                <div v-if="isActiveSubscription" class="text-xs text-muted">
-                  {{
-                    $t('subscription.renewsDate', {
-                      date: formattedRenewalDate
-                    })
-                  }}
-                </div>
-              </div>
-              <Button
-                v-if="isActiveSubscription"
-                :label="$t('subscription.manageSubscription')"
-                severity="secondary"
-                class="text-xs"
-                @click="manageSubscription"
-              />
-              <SubscribeButton
-                v-else
-                :label="$t('subscription.subscribeNow')"
-                size="small"
-                button-class="text-xs"
-                @subscribed="handleRefresh"
-              />
-            </div>
-          </div>
-
-          <div class="grid grid-cols-1 gap-6 rounded-lg pt-10 lg:grid-cols-2">
-            <div class="flex flex-col">
-              <div class="flex flex-col gap-3">
-                <div class="flex flex-col">
-                  <div class="text-sm">
-                    {{ $t('subscription.apiNodesBalance') }}
-                  </div>
-                  <div class="flex items-center">
-                    <div class="text-xs text-muted">
-                      {{ $t('subscription.apiNodesDescription') }}
-                    </div>
-                    <Button
-                      icon="pi pi-question-circle"
-                      text
-                      rounded
-                      size="small"
-                      severity="secondary"
-                      class="h-5 w-5"
-                    />
-                  </div>
-                </div>
-
-                <div
-                  class="flex flex-col gap-3 rounded-lg border p-4 dark-theme:border-0 dark-theme:bg-charcoal-600"
-                >
-                  <div class="flex items-center justify-between">
-                    <div>
-                      <div class="text-xs text-muted">
-                        {{ $t('subscription.totalCredits') }}
-                      </div>
-                      <div class="text-2xl font-bold">${{ totalCredits }}</div>
-                    </div>
-                    <Button
-                      icon="pi pi-sync"
-                      severity="secondary"
-                      size="small"
-                      :loading="isLoadingBalance"
-                      @click="handleRefresh"
-                    />
-                  </div>
-
-                  <div
-                    v-if="latestEvents.length > 0"
-                    class="flex flex-col gap-2 pt-3 text-xs"
-                  >
-                    <div
-                      v-for="event in latestEvents"
-                      :key="event.event_id"
-                      class="flex items-center justify-between py-1"
-                    >
-                      <div class="flex flex-col gap-0.5">
-                        <span class="font-medium">
-                          {{
-                            event.event_type
-                              ? customerEventService.formatEventType(
-                                  event.event_type
-                                )
-                              : ''
-                          }}
-                        </span>
-                        <span class="text-muted">
-                          {{
-                            event.createdAt
-                              ? customerEventService.formatDate(event.createdAt)
-                              : ''
-                          }}
-                        </span>
-                      </div>
-                      <div
-                        v-if="event.params?.amount !== undefined"
-                        class="font-bold"
-                      >
-                        ${{
-                          customerEventService.formatAmount(
-                            event.params.amount as number
-                          )
-                        }}
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="flex items-center justify-between pt-2">
-                    <Button
-                      :label="$t('subscription.viewUsageHistory')"
-                      text
-                      severity="secondary"
-                      class="p-0 text-xs text-muted"
-                      @click="handleViewUsageHistory"
-                    />
-                    <Button
-                      :label="$t('subscription.addApiCredits')"
-                      severity="secondary"
-                      class="text-xs"
-                      @click="handleAddApiCredits"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="flex flex-col gap-3">
-              <div class="text-sm">
-                {{ $t('subscription.yourPlanIncludes') }}
-              </div>
-
-              <SubscriptionBenefits />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="flex items-center justify-between border-t border-charcoal-400 pt-3"
-      >
-        <div class="flex gap-2">
-          <Button
-            :label="$t('subscription.learnMore')"
-            text
-            severity="secondary"
-            icon="pi pi-question-circle"
-            class="text-xs"
-            @click="handleLearnMore"
-          />
-          <Button
-            :label="$t('subscription.messageSupport')"
-            text
-            severity="secondary"
-            icon="pi pi-comment"
-            class="text-xs"
-            @click="handleMessageSupport"
-          />
-        </div>
-
-        <Button
-          :label="$t('subscription.invoiceHistory')"
-          text
-          severity="secondary"
-          icon="pi pi-external-link"
-          icon-pos="right"
-          class="text-xs"
-          @click="handleInvoiceHistory"
-        />
-      </div>
-    </div>
-  </TabPanel>
-</template>
-
-<script setup lang="ts">
-import Button from 'primevue/button'
-import TabPanel from 'primevue/tabpanel'
-import { computed, onMounted, ref } from 'vue'
-
-import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
-import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import type { AuditLog } from '@/services/customerEventsService'
-import { useCustomerEventsService } from '@/services/customerEventsService'
-import { useDialogService } from '@/services/dialogService'
-import { useCommandStore } from '@/stores/commandStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import { formatMetronomeCurrency } from '@/utils/formatUtil'
-
-const dialogService = useDialogService()
-const authActions = useFirebaseAuthActions()
-const commandStore = useCommandStore()
-const authStore = useFirebaseAuthStore()
-const customerEventService = useCustomerEventsService()
-
-const {
-  isActiveSubscription,
-  formattedRenewalDate,
-  formattedMonthlyPrice,
-  manageSubscription,
-  handleViewUsageHistory,
-  handleLearnMore,
-  handleInvoiceHistory,
-  fetchStatus
-} = useSubscription()
-
-const latestEvents = ref<AuditLog[]>([])
-
-const totalCredits = computed(() => {
-  if (!authStore.balance) return '0.00'
-  return formatMetronomeCurrency(authStore.balance.amount_micros, 'usd')
-})
-
-const isLoadingBalance = computed(() => authStore.isFetchingBalance)
-
-const fetchLatestEvents = async () => {
-  try {
-    const response = await customerEventService.getMyEvents({
-      page: 1,
-      limit: 2
-    })
-    if (response?.events) {
-      latestEvents.value = response.events
-    }
-  } catch (error) {
-    console.error('[SubscriptionPanel] Error fetching latest events:', error)
-  }
-}
-
-onMounted(() => {
-  void handleRefresh()
-})
-
-const handleAddApiCredits = () => {
-  dialogService.showTopUpCreditsDialog()
-}
-
-const handleMessageSupport = async () => {
-  await commandStore.execute('Comfy.ContactSupport')
-}
-
-const handleRefresh = async () => {
-  await Promise.all([
-    authActions.fetchBalance(),
-    fetchStatus(),
-    fetchLatestEvents()
-  ])
-}
-</script>
-
-<style scoped>
-:deep(.bg-comfy-menu-secondary) {
-  background-color: transparent;
-}
-</style>

src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="grid h-full grid-cols-5 px-10 pb-10">
-    <div
-      class="relative col-span-2 flex items-center justify-center overflow-hidden rounded-sm"
-    >
-      <video
-        autoplay
-        loop
-        muted
-        playsinline
-        class="h-full min-w-[125%] object-cover"
-        style="margin-left: -20%"
-      >
-        <source
-          src="/assets/images/cloud-subscription.webm"
-          type="video/webm"
-        />
-      </video>
-    </div>
-
-    <div class="col-span-3 flex flex-col justify-between pl-8">
-      <div>
-        <div class="flex flex-col gap-4">
-          <div class="inline-flex items-center gap-2">
-            <div class="text-sm text-muted">
-              {{ $t('subscription.required.title') }}
-            </div>
-            <TopbarBadges
-              reverse-order
-              no-padding
-              text-class="!text-sm !font-normal"
-            />
-          </div>
-
-          <div class="flex items-baseline gap-2">
-            <span class="text-4xl font-bold">{{ formattedMonthlyPrice }}</span>
-            <span class="text-xl">{{ $t('subscription.perMonth') }}</span>
-          </div>
-        </div>
-
-        <SubscriptionBenefits class="mt-6 text-muted" />
-      </div>
-
-      <div class="flex flex-col">
-        <SubscribeButton @subscribed="handleSubscribed" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
-import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
-import SubscriptionBenefits from '@/platform/cloud/subscription/components/SubscriptionBenefits.vue'
-import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-
-const emit = defineEmits<{
-  close: [subscribed: boolean]
-}>()
-
-const { formattedMonthlyPrice } = useSubscription()
-
-const handleSubscribed = () => {
-  emit('close', true)
-}
-</script>
-
-<style scoped>
-:deep(.bg-comfy-menu-secondary) {
-  background-color: transparent;
-}
-
-:deep(.p-button) {
-  color: white;
-}
-</style>

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -1,213 +0,0 @@
-import { computed, ref, watch } from 'vue'
-
-import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
-import { useErrorHandling } from '@/composables/useErrorHandling'
-import { COMFY_API_BASE_URL } from '@/config/comfyApi'
-import { MONTHLY_SUBSCRIPTION_PRICE } from '@/config/subscriptionPricesConfig'
-import { t } from '@/i18n'
-import { isCloud } from '@/platform/distribution/types'
-import { useTelemetry } from '@/platform/telemetry'
-import { useDialogService } from '@/services/dialogService'
-import {
-  FirebaseAuthStoreError,
-  useFirebaseAuthStore
-} from '@/stores/firebaseAuthStore'
-
-interface CloudSubscriptionCheckoutResponse {
-  checkout_url: string
-}
-
-interface CloudSubscriptionStatusResponse {
-  is_active: boolean
-  subscription_id: string
-  renewal_date: string
-}
-
-const subscriptionStatus = ref<CloudSubscriptionStatusResponse | null>(null)
-
-const isActiveSubscription = computed(() => {
-  if (!isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION) return true
-
-  return subscriptionStatus.value?.is_active ?? false
-})
-
-let isWatchSetup = false
-
-export function useSubscription() {
-  const authActions = useFirebaseAuthActions()
-  const dialogService = useDialogService()
-
-  const { getAuthHeader } = useFirebaseAuthStore()
-  const { wrapWithErrorHandlingAsync } = useErrorHandling()
-  const { reportError } = useFirebaseAuthActions()
-
-  const { isLoggedIn } = useCurrentUser()
-
-  const formattedRenewalDate = computed(() => {
-    if (!subscriptionStatus.value?.renewal_date) return ''
-
-    const renewalDate = new Date(subscriptionStatus.value.renewal_date)
-
-    return renewalDate.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
-    })
-  })
-
-  const formattedMonthlyPrice = computed(
-    () => `$${MONTHLY_SUBSCRIPTION_PRICE.toFixed(0)}`
-  )
-
-  const fetchStatus = wrapWithErrorHandlingAsync(async () => {
-    return await fetchSubscriptionStatus()
-  }, reportError)
-
-  const subscribe = wrapWithErrorHandlingAsync(async () => {
-    const response = await initiateSubscriptionCheckout()
-
-    if (!response.checkout_url) {
-      throw new Error(
-        t('toastMessages.failedToInitiateSubscription', {
-          error: 'No checkout URL returned'
-        })
-      )
-    }
-
-    window.open(response.checkout_url, '_blank')
-  }, reportError)
-
-  const showSubscriptionDialog = () => {
-    if (isCloud) {
-      useTelemetry()?.trackSubscription('modal_opened')
-    }
-
-    dialogService.showSubscriptionRequiredDialog()
-  }
-
-  const manageSubscription = async () => {
-    await authActions.accessBillingPortal()
-  }
-
-  const requireActiveSubscription = async (): Promise<void> => {
-    await fetchSubscriptionStatus()
-
-    if (!isActiveSubscription.value) {
-      showSubscriptionDialog()
-    }
-  }
-
-  const handleViewUsageHistory = () => {
-    window.open('https://platform.comfy.org/profile/usage', '_blank')
-  }
-
-  const handleLearnMore = () => {
-    window.open('https://docs.comfy.org', '_blank')
-  }
-
-  const handleInvoiceHistory = async () => {
-    await authActions.accessBillingPortal()
-  }
-
-  /**
-   * Fetch the current cloud subscription status for the authenticated user
-   * @returns Subscription status or null if no subscription exists
-   */
-  const fetchSubscriptionStatus =
-    async (): Promise<CloudSubscriptionStatusResponse | null> => {
-      const authHeader = await getAuthHeader()
-      if (!authHeader) {
-        throw new FirebaseAuthStoreError(
-          t('toastMessages.userNotAuthenticated')
-        )
-      }
-
-      const response = await fetch(
-        `${COMFY_API_BASE_URL}/customers/cloud-subscription-status`,
-        {
-          headers: {
-            ...authHeader,
-            'Content-Type': 'application/json'
-          }
-        }
-      )
-
-      if (!response.ok) {
-        const errorData = await response.json()
-        throw new FirebaseAuthStoreError(
-          t('toastMessages.failedToFetchSubscription', {
-            error: errorData.message
-          })
-        )
-      }
-
-      const statusData = await response.json()
-      subscriptionStatus.value = statusData
-      return statusData
-    }
-
-  if (!isWatchSetup) {
-    isWatchSetup = true
-    watch(
-      () => isLoggedIn.value,
-      async (loggedIn) => {
-        if (loggedIn) {
-          await fetchSubscriptionStatus()
-        } else {
-          subscriptionStatus.value = null
-        }
-      },
-      { immediate: true }
-    )
-  }
-
-  const initiateSubscriptionCheckout =
-    async (): Promise<CloudSubscriptionCheckoutResponse> => {
-      const authHeader = await getAuthHeader()
-      if (!authHeader) {
-        throw new FirebaseAuthStoreError(
-          t('toastMessages.userNotAuthenticated')
-        )
-      }
-
-      const response = await fetch(
-        `${COMFY_API_BASE_URL}/customers/cloud-subscription-checkout`,
-        {
-          method: 'POST',
-          headers: {
-            ...authHeader,
-            'Content-Type': 'application/json'
-          }
-        }
-      )
-
-      if (!response.ok) {
-        const errorData = await response.json()
-        throw new FirebaseAuthStoreError(
-          t('toastMessages.failedToInitiateSubscription', {
-            error: errorData.message
-          })
-        )
-      }
-
-      return response.json()
-    }
-
-  return {
-    // State
-    isActiveSubscription,
-    formattedRenewalDate,
-    formattedMonthlyPrice,
-
-    // Actions
-    subscribe,
-    fetchStatus,
-    showSubscriptionDialog,
-    manageSubscription,
-    requireActiveSubscription,
-    handleViewUsageHistory,
-    handleLearnMore,
-    handleInvoiceHistory
-  }
-}

src/platform/settings/composables/useSettingUI.ts

@@ -3,11 +3,10 @@ import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { isCloud } from '@/platform/distribution/types'
+import { isDesktop } from '@/platform/distribution/types'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { SettingParams } from '@/platform/settings/types'
-import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 import { buildTree } from '@/utils/treeUtil'
 
@@ -24,7 +23,6 @@ export function useSettingUI(
     | 'server-config'
     | 'user'
     | 'credits'
-    | 'subscription'
 ) {
   const { t } = useI18n()
   const { isLoggedIn } = useCurrentUser()
@@ -80,23 +78,6 @@ export function useSettingUI(
     )
   }
 
-  const subscriptionPanel: SettingPanelItem | null =
-    !isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION
-      ? null
-      : {
-          node: {
-            key: 'subscription',
-            label: 'PlanCredits',
-            children: []
-          },
-          component: defineAsyncComponent(
-            () =>
-              import(
-                '@/platform/cloud/subscription/components/SubscriptionPanel.vue'
-              )
-          )
-        }
-
   const userPanel: SettingPanelItem = {
     node: {
       key: 'user',
@@ -148,10 +129,7 @@ export function useSettingUI(
       userPanel,
       keybindingPanel,
       extensionPanel,
-      ...(isElectron() ? [serverConfigPanel] : []),
-      ...(isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION && subscriptionPanel
-        ? [subscriptionPanel]
-        : [])
+      ...(isDesktop ? [serverConfigPanel] : [])
     ].filter((panel) => panel.component)
   )
 
@@ -177,22 +155,13 @@ export function useSettingUI(
   })
 
   const groupedMenuTreeNodes = computed<SettingTreeNode[]>(() => [
-    // Account settings - show different panels based on distribution and auth state
+    // Account settings - only show credits when user is authenticated
     {
       key: 'account',
       label: 'Account',
       children: [
         userPanel.node,
-        ...(isLoggedIn.value &&
-        isCloud &&
-        __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION &&
-        subscriptionPanel
-          ? [subscriptionPanel.node]
-          : []),
-        ...(isLoggedIn.value &&
-        !(isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION)
-          ? [creditsPanel.node]
-          : [])
+        ...(isLoggedIn.value ? [creditsPanel.node] : [])
       ].map(translateCategory)
     },
     // Normal settings stored in the settingStore
@@ -209,7 +178,7 @@ export function useSettingUI(
         keybindingPanel.node,
         extensionPanel.node,
         aboutPanel.node,
-        ...(isElectron() ? [serverConfigPanel.node] : [])
+        ...(isDesktop ? [serverConfigPanel.node] : [])
       ].map(translateCategory)
     }
   ])