1.30.2 (#6171)

Patch version increment to 1.30.2

**Base branch:** `main`

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6171-1-30-2-2926d73d36508194b993d488cf43de6d)
by [Unito](https://www.unito.io)

---------

Co-authored-by: simula-r <18093452+simula-r@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>

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

@@ -26,15 +26,6 @@ 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,26 +31,9 @@ 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,26 +30,9 @@ 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,21 +33,6 @@ 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,19 +50,6 @@ 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
 
@@ -115,19 +102,6 @@ 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,19 +29,6 @@ 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,20 +161,6 @@ 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,16 +28,6 @@ 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,17 +25,6 @@ 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,7 +59,6 @@ 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
+pnpm knip 1>&2
 

.prettierrc

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

apps/desktop-ui/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title>ComfyUI Desktop</title>
+    <title>ComfyUI</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.1",
+  "version": "0.0.3",
   "type": "module",
   "nx": {
     "tags": [

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

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

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

@@ -1,17 +1,17 @@
 <template>
   <div
-    class="grid grid-rows-[1fr_auto_auto_1fr] w-full max-w-3xl mx-auto h-[40rem] select-none"
+    class="mx-auto grid h-[40rem] w-full max-w-3xl grid-rows-[1fr_auto_auto_1fr] select-none"
   >
-    <h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
+    <h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
       {{ $t('install.gpuPicker.title') }}
     </h2>
 
     <!-- GPU Selection buttons - takes up remaining space and centers content -->
-    <div class="flex-1 flex gap-8 justify-center items-center">
+    <div class="flex flex-1 items-center justify-center gap-8">
       <!-- 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="pt-12 px-24 h-16">
+    <div class="h-16 px-24 pt-12">
       <div v-show="showRecommendedBadge" class="flex items-center gap-2">
         <Tag
           :value="$t('install.gpuPicker.recommended')"
-          class="bg-neutral-300 text-neutral-900 rounded-full text-sm font-bold px-2 py-[1px]"
+          class="rounded-full bg-neutral-300 px-2 py-[1px] text-sm font-bold text-neutral-900"
         />
-        <i class="icon-[lucide--badge-check] text-neutral-300 text-lg" />
+        <i class="icon-[lucide--badge-check] text-lg text-neutral-300" />
       </div>
     </div>
 
-    <div class="text-neutral-300 px-24">
+    <div class="px-24 text-neutral-300">
       <p v-show="descriptionText" class="leading-relaxed">
         {{ descriptionText }}
       </p>

apps/desktop-ui/src/i18n.ts

@@ -1,67 +1,163 @@
-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 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 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, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
+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) {
   return {
     ...main,
     nodeDefs: nodes,
     commands: commands,
     settings: settings
-  }
+  } as M & { nodeDefs: N; commands: C; settings: S }
 }
 
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings),
-  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
-  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings),
-  ru: buildLocale(ru, ruNodes, ruCommands, ruSettings),
-  ja: buildLocale(ja, jaNodes, jaCommands, jaSettings),
-  ko: buildLocale(ko, koNodes, koCommands, koSettings),
-  fr: buildLocale(fr, frNodes, frCommands, frSettings),
-  es: buildLocale(es, esNodes, esCommands, esSettings),
-  ar: buildLocale(ar, arNodes, arCommands, arSettings),
-  tr: buildLocale(tr, trNodes, trCommands, trSettings)
+// 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)
+}
+
+// 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 = isDesktop ? '/' : window.location.pathname
+const basePath = isElectron() ? '/' : window.location.pathname
 
 const router = createRouter({
   history: isFileProtocol ? createWebHashHistory() : createWebHistory(basePath),

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

@@ -1 +1,13 @@
-export { electronAPI, isNativeWindow } from '@frontend/utils/envUtil'
+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
+}

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

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

apps/desktop-ui/tsconfig.json

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

apps/desktop-ui/vite.config.mts

@@ -31,7 +31,6 @@ 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('is-docked') ?? false
+    return className?.includes('static') ?? false
   }
 }
 

eslint.config.ts

@@ -60,6 +60,7 @@ 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,6 +4,12 @@ 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,6 +12,10 @@ 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}']
     },
@@ -30,16 +34,16 @@ const config: KnipConfig = {
     '@primeuix/forms',
     '@primeuix/styled',
     '@primeuix/utils',
-    '@primevue/icons',
-    // Dev
-    '@trivago/prettier-plugin-sort-imports'
+    '@primevue/icons'
   ],
   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'
+    'src/scripts/ui/components/splitButton.ts',
+    // Service worker - registered at runtime via navigator.serviceWorker.register()
+    'public/auth-sw.js'
   ],
   compilers: {
     // https://github.com/webpro-nl/knip/issues/1008#issuecomment-3207756199

lint-staged.config.js

@@ -8,8 +8,10 @@ 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 ${fileNames.join(' ')}`,
-    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
+    `pnpm exec eslint --cache --fix ${relativePaths.join(' ')}`,
+    `pnpm exec prettier --cache --write ${relativePaths.join(' ')}`
   ]
 }

package.json

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

pnpm-lock.yaml

@@ -45,6 +45,9 @@ 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
@@ -186,6 +189,9 @@ 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
@@ -495,6 +501,9 @@ 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)))
@@ -597,6 +606,9 @@ importers:
       markdown-table:
         specifier: 'catalog:'
         version: 3.0.4
+      mixpanel-browser:
+        specifier: 'catalog:'
+        version: 2.71.0
       nx:
         specifier: 'catalog:'
         version: 21.4.1
@@ -2201,6 +2213,21 @@ 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==}
 
@@ -2327,6 +2354,98 @@ 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]
@@ -2460,6 +2579,10 @@ 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'}
@@ -3020,6 +3143,9 @@ 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==}
 
@@ -3518,6 +3644,9 @@ 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:
@@ -3800,6 +3929,10 @@ 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==}
 
@@ -5987,6 +6120,9 @@ 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'}
@@ -6173,6 +6309,10 @@ 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==}
 
@@ -9499,6 +9639,29 @@ 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
@@ -9739,6 +9902,55 @@ 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
 
@@ -9834,6 +10046,10 @@ 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
@@ -10387,6 +10603,8 @@ 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
@@ -10980,6 +11198,8 @@ 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
@@ -11296,6 +11516,8 @@ snapshots:
 
   balanced-match@2.0.0: {}
 
+  base64-arraybuffer@1.0.2: {}
+
   base64-js@1.5.1: {}
 
   better-opn@3.0.2:
@@ -13864,6 +14086,10 @@ 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:
@@ -14106,6 +14332,26 @@ 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,6 +16,7 @@ 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
@@ -98,6 +99,7 @@ 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

@@ -0,0 +1,147 @@
+/**
+ * @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,44 +18,81 @@
 export const BUNDLE_CATEGORIES = [
   {
     name: 'App Entry Points',
-    description: 'Main application bundles',
-    patterns: [/^index-.*\.js$/],
+    description: 'Main entry bundles and manifests',
+    patterns: [/^index-.*\.js$/i, /^manifest-.*\.js$/i],
     order: 1
   },
   {
-    name: 'Core Views',
-    description: 'Major application views and screens',
-    patterns: [/GraphView-.*\.js$/, /UserSelectView-.*\.js$/],
+    name: 'Graph Workspace',
+    description: 'Graph editor runtime, canvas, workflow orchestration',
+    patterns: [
+      /Graph(View|State)?-.*\.js$/i,
+      /(Canvas|Workflow|History|NodeGraph|Compositor)-.*\.js$/i
+    ],
     order: 2
   },
   {
-    name: 'UI Panels',
-    description: 'Settings and configuration panels',
-    patterns: [/.*Panel-.*\.js$/],
+    name: 'Views & Navigation',
+    description: 'Top-level views, pages, and routed surfaces',
+    patterns: [/.*(View|Page|Layout|Screen|Route)-.*\.js$/i],
     order: 3
   },
   {
-    name: 'UI Components',
-    description: 'Reusable UI components',
-    patterns: [/Avatar-.*\.js$/, /Badge-.*\.js$/],
+    name: 'Panels & Settings',
+    description: 'Configuration panels, inspectors, and settings screens',
+    patterns: [/.*(Panel|Settings|Config|Preferences|Manager)-.*\.js$/i],
     order: 4
   },
   {
-    name: 'Services',
-    description: 'Business logic and services',
-    patterns: [/.*Service-.*\.js$/, /.*Store-.*\.js$/],
+    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
+    ],
     order: 5
   },
   {
-    name: 'Utilities',
-    description: 'Helper functions and utilities',
-    patterns: [/.*[Uu]til.*\.js$/],
+    name: 'Editors & Dialogs',
+    description: 'Modals, dialogs, drawers, and in-app editors',
+    patterns: [/.*(Modal|Dialog|Drawer|Editor)-.*\.js$/i],
     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: 'Uncategorized bundles',
-    patterns: [/.*/], // Catch-all pattern
+    description: 'Bundles that do not match a named category',
+    patterns: [/.*/],
     order: 99
   }
 ]

scripts/size-report.js

@@ -7,6 +7,13 @@ 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
@@ -18,15 +25,52 @@ 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 function to generate the size report
+ * Main entry for generating the size report
  */
 async function run() {
   if (!existsSync(currDir)) {
@@ -35,27 +79,41 @@ async function run() {
     process.exit(1)
   }
 
-  await renderFiles()
+  const report = await buildBundleReport()
+  const output = renderReport(report)
   process.stdout.write(output)
 }
 
 /**
- * Renders file sizes and diffs between current and previous versions
+ * Build bundle comparison data from current and baseline artifacts
+ * @returns {Promise<BundleReport>}
  */
-async function renderFiles() {
+async function buildBundleReport() {
   /**
    * @param {string[]} files
    * @returns {string[]}
    */
   const filterFiles = (files) => files.filter((file) => file.endsWith('.json'))
 
-  const curr = filterFiles(await readdir(currDir))
-  const prev = existsSync(prevDir) ? filterFiles(await readdir(prevDir)) : []
-  const fileList = new Set([...curr, ...prev])
+  const currFiles = filterFiles(await readdir(currDir))
+  const baselineFiles = existsSync(prevDir)
+    ? filterFiles(await readdir(prevDir))
+    : []
+  const fileList = new Set([...currFiles, ...baselineFiles])
 
-  // Group bundles by category
-  /** @type {Map<string, Array<{fileName: string, curr: BundleResult | undefined, prev: BundleResult | undefined}>>} */
-  const bundlesByCategory = new Map()
+  /** @type {Map<string, CategoryReport>} */
+  const categories = new Map()
+
+  const overall = {
+    currentBundles: 0,
+    baselineBundles: 0,
+    metrics: {
+      current: createMetrics(),
+      baseline: createMetrics(),
+      diff: createMetrics()
+    },
+    counts: createCounts()
+  }
 
   for (const file of fileList) {
     const currPath = path.resolve(currDir, file)
@@ -63,100 +121,440 @@ async function renderFiles() {
 
     const curr = await importJSON(currPath)
     const prev = await importJSON(prevPath)
-    const fileName = curr?.file || prev?.file || ''
-    const category = curr?.category || prev?.category || 'Other'
+    const fileName = curr?.file || prev?.file
+    if (!fileName) continue
 
-    if (!bundlesByCategory.has(category)) {
-      bundlesByCategory.set(category, [])
+    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++
     }
 
-    // @ts-expect-error - get is valid
-    bundlesByCategory.get(category).push({ fileName, curr, prev })
-  }
+    addMetrics(overall.metrics.current, currMetrics)
+    addMetrics(overall.metrics.baseline, baselineMetrics)
+    addMetrics(overall.metrics.diff, diffMetrics)
+    incrementStatus(overall.counts, status)
 
-  // 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)
-  })
+    addMetrics(category.metrics.current, currMetrics)
+    addMetrics(category.metrics.baseline, baselineMetrics)
+    addMetrics(category.metrics.diff, diffMetrics)
+    incrementStatus(category.counts, status)
 
-  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`
-    }
-
-    const rows = []
-    let categorySize = 0
-
-    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++
-      }
-    }
-
-    // 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)
+    category.bundles.push({
+      fileName,
+      curr,
+      prev,
+      diff: diffMetrics,
+      status
     })
-
-    output += markdownTable([['File', ...sizeHeaders], ...rows])
-    output += `\n\n**Category Total:** ${prettyBytes(categorySize)}\n\n`
   }
 
-  // Add overall summary
-  if (totalCount > 0) {
-    output += '---\n\n'
-    output += `**Overall Total Size:** ${prettyBytes(totalSize)}\n`
-    output += `**Total Bundle Count:** ${totalCount}\n`
+  const sortedCategories = Array.from(categories.values()).sort(
+    (a, b) => a.order - b.order
+  )
+
+  return {
+    categories: sortedCategories,
+    overall,
+    hasBaseline: baselineFiles.length > 0
   }
 }
 
 /**
- * Imports JSON data from a specified path
- *
+ * 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
+  })
+
+  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})`
+    }
+    return `${category.name} ${currentStr}`
+  })
+
+  if (sorted.length > limit) {
+    parts.push(`+ ${sorted.length - limit} more`)
+  }
+
+  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)
+        ]
+      }
+
+      return [
+        formatFileLabel(bundle),
+        formatSize(bundle.curr?.size),
+        formatSize(bundle.curr?.gzip),
+        formatSize(bundle.curr?.brotli)
+      ]
+    })
+
+  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(' / ')}`)
+  }
+
+  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
+  }
+}
+
+/**
+ * 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
  * @template T
- * @param {string} filePath - Path to the JSON file
- * @returns {Promise<T | undefined>} The JSON content or undefined if the file does not exist
+ * @param {string} filePath
+ * @returns {Promise<T | undefined>}
  */
 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,11 +16,10 @@ 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 } from './utils/envUtil'
+import { electronAPI, isElectron } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()
 const conflictDetection = useConflictDetection()
@@ -46,7 +45,7 @@ onMounted(() => {
   // @ts-expect-error fixme ts strict error
   window['__COMFYUI_FRONTEND_VERSION__'] = config.app_version
 
-  if (isDesktop) {
+  if (isElectron()) {
     document.addEventListener('contextmenu', showContextMenu)
   }
 

src/components/actionbar/ComfyActionbar.vue

@@ -2,10 +2,7 @@
   <div class="flex h-full items-center">
     <div
       v-if="isDragging && !isDocked"
-      class="actionbar-drop-zone m-1.5 flex items-center justify-center self-stretch rounded-md"
-      :class="{
-        'drop-zone-active': isMouseOverDropZone
-      }"
+      :class="actionbarClass"
       @mouseenter="onMouseEnterDropZone"
       @mouseleave="onMouseLeaveDropZone"
     >
@@ -13,18 +10,15 @@
     </div>
 
     <Panel
-      class="actionbar"
+      class="pointer-events-auto z-1000"
       :style="style"
-      :class="{
-        fixed: !isDocked,
-        'is-dragging': isDragging,
-        'is-docked static mr-2 border-none bg-transparent p-0': isDocked
+      :class="panelClass"
+      :pt="{
+        header: { class: 'hidden' },
+        content: { class: isDocked ? 'p-0' : 'p-1' }
       }"
     >
-      <div
-        ref="panelRef"
-        class="actionbar-content flex items-center select-none"
-      >
+      <div ref="panelRef" class="flex items-center select-none">
         <span
           ref="dragHandleRef"
           :class="
@@ -34,7 +28,8 @@
             )
           "
         />
-        <ComfyQueueButton />
+
+        <ComfyRunButton />
       </div>
     </Panel>
   </div>
@@ -55,7 +50,7 @@ import { t } from '@/i18n'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { cn } from '@/utils/tailwindUtil'
 
-import ComfyQueueButton from './ComfyQueueButton.vue'
+import ComfyRunButton from './ComfyRunButton'
 
 const settingsStore = useSettingStore()
 
@@ -250,45 +245,20 @@ 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/ComfyRunButton/CloudRunButtonWrapper.vue

@@ -0,0 +1,19 @@
+<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/ComfyQueueButton.vue

@@ -8,7 +8,7 @@
         showDelay: 600
       }"
       class="comfyui-queue-button"
-      :label="activeQueueModeMenuItem.label"
+      :label="String(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,10 +82,13 @@
 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,
@@ -93,43 +96,52 @@ 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(() => ({
-  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'
+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'
+      }
     }
   }
-}))
+  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(
-  () => queueModeMenuItemLookup.value[queueMode.value]
-)
+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 queueModeMenuItems = computed(() =>
   Object.values(queueModeMenuItemLookup.value)
 )
@@ -141,10 +153,15 @@ const hasPendingTasks = computed(
 
 const commandStore = useCommandStore()
 const queuePrompt = async (e: Event) => {
-  const commandId =
-    'shiftKey' in e && e.shiftKey
-      ? 'Comfy.QueuePromptFront'
-      : 'Comfy.QueuePrompt'
+  const isShiftPressed = 'shiftKey' in e && e.shiftKey
+  const commandId = isShiftPressed
+    ? 'Comfy.QueuePromptFront'
+    : 'Comfy.QueuePrompt'
+
+  if (isCloud) {
+    useTelemetry()?.trackRunButton({ subscribe_to_run: false })
+  }
+
   await commandStore.execute(commandId)
 }
 </script>

src/components/actionbar/ComfyRunButton/index.ts

@@ -0,0 +1,7 @@
+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,8 +34,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
-import { isDesktop } from '@/platform/distribution/types'
-import { electronAPI } from '@/utils/envUtil'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()
@@ -85,7 +84,7 @@ const showContextMenu = (event: MouseEvent) => {
   electronAPI()?.showContextMenu({ type: 'text' })
 }
 
-if (isDesktop) {
+if (isElectron()) {
   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="Graph navigation"
+      :aria-label="$t('g.graphNavigation')"
     >
       <template #item="{ item }">
         <SubgraphBreadcrumbItem

src/components/breadcrumb/SubgraphBreadcrumbItem.vue

@@ -5,6 +5,7 @@
       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,7 +46,12 @@
           : $t('manager.installAllMissingNodes')
       "
     />
-    <Button label="Open Manager" size="small" outlined @click="openManager" />
+    <Button
+      :label="$t('g.openManager')"
+      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="isDesktop">
+      <Suspense v-if="isElectron()">
         <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="Comfy"
+            :alt="$t('g.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="Press keys for new binding"
+          :placeholder="$t('g.pressKeysForNewBinding')"
           autocomplete="off"
           fluid
           @keydown.stop.prevent="captureKeybinding"

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

@@ -67,10 +67,10 @@
           />
           <Button
             v-if="!isApiKeyLogin"
-            class="w-32"
+            class="w-fit"
+            variant="text"
             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="ComfyOrg Logo"
+      :alt="$t('g.comfyOrgLogoAlt')"
       width="32"
       height="32"
     />

src/components/graph/GraphCanvas.vue

@@ -420,9 +420,7 @@ onMounted(async () => {
       throw error
     }
   }
-  CORE_SETTINGS.forEach((setting) => {
-    settingStore.addSetting(setting)
-  })
+  CORE_SETTINGS.forEach(settingStore.addSetting)
 
   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, isDesktop } from '@/platform/distribution/types'
+import { isCloud } 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 } from '@/utils/envUtil'
+import { electronAPI, isElectron } 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: isDesktop,
+      visible: isElectron(),
       action: () => {
         const docsUrl =
           electronAPI().getPlatform() === 'darwin'
@@ -230,7 +230,7 @@ const moreItems = computed<MenuItem[]>(() => {
       key: 'dev-tools',
       type: 'item',
       label: t('helpCenter.openDevTools'),
-      visible: isDesktop,
+      visible: isElectron(),
       action: () => {
         openDevTools()
         emit('close')
@@ -239,13 +239,13 @@ const moreItems = computed<MenuItem[]>(() => {
     {
       key: 'divider-1',
       type: 'divider',
-      visible: isDesktop
+      visible: isElectron()
     },
     {
       key: 'reinstall',
       type: 'item',
       label: t('helpCenter.reinstall'),
-      visible: isDesktop,
+      visible: isElectron(),
       action: () => {
         onReinstall()
         emit('close')
@@ -484,13 +484,13 @@ const onSubmenuLeave = (): void => {
 }
 
 const openDevTools = (): void => {
-  if (isDesktop) {
+  if (isElectron()) {
     electronAPI().openDevTools()
   }
 }
 
 const onReinstall = (): void => {
-  if (isDesktop) {
+  if (isElectron()) {
     void electronAPI().reinstall()
   }
 }

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -28,7 +28,7 @@
       />
     </template>
     <template #body>
-      <ElectronDownloadItems v-if="isDesktop" />
+      <ElectronDownloadItems v-if="isElectron()" />
 
       <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,12 +1,19 @@
 <template>
-  <div class="flex items-center gap-2 bg-comfy-menu-secondary px-3">
+  <div
+    class="flex items-center gap-2 bg-comfy-menu-secondary"
+    :class="[{ 'flex-row-reverse': reverseOrder }, noPadding ? '' : '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">
+    <div
+      class="font-inter text-sm font-extrabold text-slate-100"
+      :class="textClass"
+    >
       {{ badge.text }}
     </div>
   </div>
@@ -14,7 +21,19 @@
 <script setup lang="ts">
 import type { TopbarBadge } from '@/types/comfy'
 
-defineProps<{
-  badge: TopbarBadge
-}>()
+withDefaults(
+  defineProps<{
+    badge: TopbarBadge
+    reverseOrder?: boolean
+    noPadding?: boolean
+    labelClass?: string
+    textClass?: string
+  }>(),
+  {
+    reverseOrder: false,
+    noPadding: false,
+    labelClass: '',
+    textClass: ''
+  }
+)
 </script>

src/components/topbar/TopbarBadges.vue

@@ -4,6 +4,10 @@
       v-for="badge in topbarBadgeStore.badges"
       :key="badge.text"
       :badge
+      :reverse-order="reverseOrder"
+      :no-padding="noPadding"
+      :label-class="labelClass"
+      :text-class="textClass"
     />
   </div>
 </template>
@@ -13,5 +17,20 @@ 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,7 +79,6 @@ 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 {
@@ -88,6 +87,7 @@ 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,6 +114,8 @@ 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,6 +208,7 @@ export const useFirebaseAuthActions = () => {
     signUpWithEmail,
     updatePassword,
     deleteAccount,
-    accessError
+    accessError,
+    reportError
   }
 }

src/composables/graph/useGraphNodeManager.ts

@@ -126,14 +126,6 @@ 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() {
@@ -144,8 +136,15 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       }
     })
 
-    const safeWidgets = reactiveComputed<SafeWidgetData[]>(
-      () =>
+    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 (
         node.widgets?.map((widget) => {
           try {
             // TODO: Use widget.getReactiveData() once TypeScript types are updated
@@ -183,7 +182,8 @@ 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 (isDesktop) {
+      if (isElectron()) {
         const electronDownloadStore = useElectronDownloadStore()
         if (electronDownloadStore.inProgressDownloads.length > 0) {
           return electronDownloadStore.inProgressDownloads.length.toString()

src/composables/useCopy.ts

@@ -1,6 +1,12 @@
 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
@@ -9,28 +15,19 @@ export const useCopy = () => {
   const canvasStore = useCanvasStore()
 
   useEventListener(document, 'copy', (e) => {
-    if (!(e.target instanceof Element)) {
-      return
-    }
-    if (
-      (e.target instanceof HTMLTextAreaElement &&
-        e.target.type === 'textarea') ||
-      (e.target instanceof HTMLInputElement && e.target.type === 'text')
-    ) {
+    if (shouldIgnoreCopyPaste(e.target)) {
       // 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 (isTargetInGraph && canvas?.selectedItems) {
-      canvas.copyToClipboard()
+    if (canvas?.selectedItems) {
+      const serializedData = canvas.copyToClipboard()
       // clearData doesn't remove images from clipboard
-      e.clipboardData?.setData('text', ' ')
+      e.clipboardData?.setData(
+        'text/html',
+        clipboardHTMLWrapper.join(btoa(serializedData))
+      )
       e.preventDefault()
       e.stopImmediatePropagation()
       return false

src/composables/useCoreCommands.ts

@@ -21,7 +21,9 @@ 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'
@@ -451,6 +453,11 @@ export function useCoreCommands(): ComfyCommand[] {
       category: 'essentials' as const,
       function: async () => {
         const batchCount = useQueueSettingsStore().batchCount
+
+        if (isCloud) {
+          useTelemetry()?.trackWorkflowExecution()
+        }
+
         await app.queuePrompt(0, batchCount)
       }
     },
@@ -462,6 +469,11 @@ 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,6 +7,22 @@ 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
@@ -38,15 +54,10 @@ export const usePaste = () => {
   }
 
   useEventListener(document, 'paste', async (e) => {
-    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
-
+    if (shouldIgnoreCopyPaste(e.target)) {
+      // Default system copy
+      return
+    }
     // ctrl+shift+v is used to paste nodes with connections
     // this is handled by litegraph
     if (workspaceStore.shiftDown) return
@@ -109,6 +120,7 @@ export const usePaste = () => {
         return
       }
     }
+    if (pasteClipboardItems(data)) return
 
     // No image found. Look for node data
     data = data.getData('text/plain')

src/config/subscriptionPricesConfig.ts

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

src/extensions/core/cloudSubscription.ts

@@ -0,0 +1,24 @@
+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,13 +2,12 @@ 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 } from '@/utils/envUtil'
+import { electronAPI as getElectronAPI, isElectron } from '@/utils/envUtil'
 
 // Desktop documentation URLs
 const DESKTOP_DOCS = {
@@ -17,7 +16,7 @@ const DESKTOP_DOCS = {
 } as const
 
 ;(async () => {
-  if (!isDesktop) return
+  if (!isElectron()) return
 
   const electronAPI = getElectronAPI()
   const desktopAppVersion = await electronAPI.getElectronVersion()

src/extensions/core/index.ts

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

src/i18n.ts

@@ -1,68 +1,159 @@
 import { createI18n } from 'vue-i18n'
 
-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' }
+// 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 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, N, C, S>(main: M, nodes: N, commands: C, settings: S) {
+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) {
   return {
     ...main,
     nodeDefs: nodes,
     commands: commands,
     settings: settings
-  }
+  } as M & { nodeDefs: N; commands: C; settings: S }
 }
 
-const messages = {
-  en: buildLocale(en, enNodes, enCommands, enSettings),
-  zh: buildLocale(zh, zhNodes, zhCommands, zhSettings),
-  'zh-TW': buildLocale(zhTW, zhTWNodes, zhTWCommands, zhTWSettings),
-  ru: buildLocale(ru, ruNodes, ruCommands, ruSettings),
-  ja: buildLocale(ja, jaNodes, jaCommands, jaSettings),
-  ko: buildLocale(ko, koNodes, koCommands, koSettings),
-  fr: buildLocale(fr, frNodes, frCommands, frSettings),
-  es: buildLocale(es, esNodes, esCommands, esSettings),
-  ar: buildLocale(ar, arNodes, arCommands, arSettings),
-  tr: buildLocale(tr, trNodes, trCommands, trSettings)
+// 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)
+}
+
+// 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.findInputSlotByType(link.type, true, true)
+      const input = subgraphNode.inputs[i - 1]
       outputNode.connectSlots(output, subgraphNode, input, link.parentId)
     }
 

src/lib/litegraph/src/LGraphCanvas.ts

@@ -3867,11 +3867,10 @@ 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>): void {
-    localStorage.setItem(
-      'litegrapheditor_clipboard',
-      JSON.stringify(this._serializeItems(items))
-    )
+  copyToClipboard(items?: Iterable<Positionable>): string {
+    const serializedData = JSON.stringify(this._serializeItems(items))
+    localStorage.setItem('litegrapheditor_clipboard', serializedData)
+    return serializedData
   }
 
   emitEvent(detail: LGraphCanvasEventMap['litegraph:canvas']): void {
@@ -3907,6 +3906,7 @@ export class LGraphCanvas
     if (!data) return
     return this._deserializeItems(JSON.parse(data), options)
   }
+
   _deserializeItems(
     parsed: ClipboardItems,
     options: IPasteFromClipboardOptions
@@ -3923,6 +3923,7 @@ export class LGraphCanvas
     const { graph } = this
     if (!graph) throw new NullGraphError()
     graph.beforeChange()
+    this.emitBeforeChange()
 
     // Parse & initialise
     parsed.nodes ??= []
@@ -4092,6 +4093,7 @@ export class LGraphCanvas
     this.selectItems(created)
 
     graph.afterChange()
+    this.emitAfterChange()
 
     return results
   }

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

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

src/locales/en/main.json

@@ -36,6 +36,8 @@
     "import": "Import",
     "loadAllFolders": "Load All Folders",
     "logoAlt": "ComfyUI Logo",
+    "comfyOrgLogoAlt": "ComfyOrg Logo",
+    "comfy": "Comfy",
     "refresh": "Refresh",
     "refreshNode": "Refresh Node",
     "terminal": "Terminal",
@@ -88,6 +90,11 @@
     "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",
@@ -1337,7 +1344,8 @@
     "Notification Preferences": "Notification Preferences",
     "3DViewer": "3DViewer",
     "Vue Nodes": "Vue Nodes",
-    "Canvas Navigation": "Canvas Navigation"
+    "Canvas Navigation": "Canvas Navigation",
+    "PlanCredits": "Plan & Credits"
   },
   "serverConfigItems": {
     "listen": {
@@ -1777,6 +1785,8 @@
     "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",
@@ -1923,6 +1933,35 @@
     "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,6 +13,7 @@ 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

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

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

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

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

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

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

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

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