remove unused export

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

@@ -20,13 +20,6 @@ on:
         required: true
         default: 'main'
         type: string
-  schedule:
-    # 00:00 UTC ≈ 4:00 PM PST / 5:00 PM PDT on the previous calendar day
-    - cron: '0 0 * * *'
-
-concurrency:
-  group: release-version-bump
-  cancel-in-progress: true
 
 jobs:
   bump-version:
@@ -36,99 +29,15 @@ jobs:
       pull-requests: write
 
     steps:
-      - name: Prepare inputs
-        id: prepared-inputs
-        shell: bash
-        env:
-          RAW_VERSION_TYPE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.version_type || '' }}
-          RAW_PRE_RELEASE: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.pre_release || '' }}
-          RAW_BRANCH: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.branch || '' }}
-        run: |
-          set -euo pipefail
-          VERSION_TYPE="$RAW_VERSION_TYPE"
-          PRE_RELEASE="$RAW_PRE_RELEASE"
-          TARGET_BRANCH="$RAW_BRANCH"
-
-          if [[ -z "$VERSION_TYPE" ]]; then
-            VERSION_TYPE='patch'
-          fi
-
-          if [[ -z "$TARGET_BRANCH" ]]; then
-            TARGET_BRANCH='main'
-          fi
-
-          {
-            echo "version_type=$VERSION_TYPE"
-            echo "pre_release=$PRE_RELEASE"
-            echo "branch=$TARGET_BRANCH"
-          } >> "$GITHUB_OUTPUT"
-
-      - name: Close stale nightly version bump PRs
-        if: github.event_name == 'schedule'
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ github.token }}
-          script: |
-            const prefix = 'version-bump-'
-            const closed = []
-            const prs = await github.paginate(github.rest.pulls.list, {
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              state: 'open',
-              per_page: 100
-            })
-
-            for (const pr of prs) {
-              if (!pr.head?.ref?.startsWith(prefix)) {
-                continue
-              }
-
-              if (pr.user?.login !== 'github-actions[bot]') {
-                continue
-              }
-
-              // Only clean up stale nightly PRs targeting main.
-              // Adjust here if other target branches should be cleaned.
-              if (pr.base?.ref !== 'main') {
-                continue
-              }
-
-              await github.rest.pulls.update({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                pull_number: pr.number,
-                state: 'closed'
-              })
-
-              try {
-                await github.rest.git.deleteRef({
-                  owner: context.repo.owner,
-                  repo: context.repo.repo,
-                  ref: `heads/${pr.head.ref}`
-                })
-              } catch (error) {
-                if (![404, 422].includes(error.status)) {
-                  throw error
-                }
-              }
-
-              closed.push(pr.number)
-            }
-
-            core.info(`Closed ${closed.length} stale PR(s).`)
-
       - name: Checkout repository
         uses: actions/checkout@v5
         with:
-          ref: ${{ steps.prepared-inputs.outputs.branch }}
+          ref: ${{ github.event.inputs.branch }}
           fetch-depth: 0
-          persist-credentials: false
 
       - name: Validate branch exists
-        env:
-          TARGET_BRANCH: ${{ steps.prepared-inputs.outputs.branch }}
         run: |
-          BRANCH="$TARGET_BRANCH"
+          BRANCH="${{ github.event.inputs.branch }}"
           if ! git show-ref --verify --quiet "refs/heads/$BRANCH" && ! git show-ref --verify --quiet "refs/remotes/origin/$BRANCH"; then
             echo "❌ Branch '$BRANCH' does not exist"
             echo ""
@@ -142,7 +51,7 @@ jobs:
           echo "✅ Branch '$BRANCH' exists"
 
       - name: Install pnpm
-        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061
+        uses: pnpm/action-setup@v4
         with:
           version: 10
 
@@ -153,31 +62,16 @@ jobs:
 
       - name: Bump version
         id: bump-version
-        env:
-          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
-          PRE_RELEASE: ${{ steps.prepared-inputs.outputs.pre_release }}
         run: |
-          set -euo pipefail
-          if [[ -n "$PRE_RELEASE" && ! "$VERSION_TYPE" =~ ^pre(major|minor|patch)$ && "$VERSION_TYPE" != "prerelease" ]]; then
-            echo "❌ pre_release was provided but version_type='$VERSION_TYPE' does not support --preid"
-            exit 1
-          fi
-          if [[ -n "$PRE_RELEASE" ]]; then
-            pnpm version "$VERSION_TYPE" --preid "$PRE_RELEASE" --no-git-tag-version
-          else
-            pnpm version "$VERSION_TYPE" --no-git-tag-version
-          fi
-
+          pnpm version ${{ github.event.inputs.version_type }} --preid ${{ github.event.inputs.pre_release }} --no-git-tag-version
           NEW_VERSION=$(node -p "require('./package.json').version")
-          echo "NEW_VERSION=$NEW_VERSION" >> "$GITHUB_OUTPUT"
+          echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
 
       - name: Format PR string
         id: capitalised
-        env:
-          VERSION_TYPE: ${{ steps.prepared-inputs.outputs.version_type }}
         run: |
-          CAPITALISED_TYPE="$VERSION_TYPE"
-          echo "capitalised=${CAPITALISED_TYPE@u}" >> "$GITHUB_OUTPUT"
+          CAPITALISED_TYPE=${{ github.event.inputs.version_type }}
+          echo "capitalised=${CAPITALISED_TYPE@u}" >> $GITHUB_OUTPUT
 
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e
@@ -188,8 +82,8 @@ jobs:
           body: |
             ${{ steps.capitalised.outputs.capitalised }} version increment to ${{ steps.bump-version.outputs.NEW_VERSION }}
 
-            **Base branch:** `${{ steps.prepared-inputs.outputs.branch }}`
+            **Base branch:** `${{ github.event.inputs.branch }}`
           branch: version-bump-${{ steps.bump-version.outputs.NEW_VERSION }}
-          base: ${{ steps.prepared-inputs.outputs.branch }}
+          base: ${{ github.event.inputs.branch }}
           labels: |
             Release

.i18nrc.cjs

@@ -10,7 +10,7 @@ module.exports = defineConfig({
   entryLocale: 'en',
   output: 'src/locales',
   outputLocales: ['zh', 'zh-TW', 'ru', 'ja', 'ko', 'fr', 'es', 'ar', 'tr', 'pt-BR'],
-  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   

.npmrc

@@ -1,3 +1,2 @@
 ignore-workspace-root-check=true
 catalog-mode=prefer
-public-hoist-pattern[]=@parcel/watcher

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

@@ -51,6 +51,8 @@ defineProps<{
   canProceed: boolean
   /** Whether the location step should be disabled */
   disableLocationStep: boolean
+  /** Whether the migration step should be disabled */
+  disableMigrationStep: boolean
   /** Whether the settings step should be disabled */
   disableSettingsStep: boolean
 }>()

browser_tests/fixtures/VueNodeHelpers.ts

@@ -160,7 +160,7 @@ export class VueNodeHelpers {
     return {
       input: widget.locator('input'),
       incrementButton: widget.locator('button').first(),
-      decrementButton: widget.locator('button').nth(1)
+      decrementButton: widget.locator('button').last()
     }
   }
 }

browser_tests/tests/loadWorkflowInMedia.spec.ts

@@ -12,7 +12,6 @@ test.describe('Load Workflow in Media', () => {
     'edited_workflow.webp',
     'no_workflow.webp',
     'large_workflow.webp',
-    'workflow_prompt_parameters.png',
     'workflow.webm',
     // Skipped due to 3d widget unstable visual result.
     // 3d widget shows grid after fully loaded.

browser_tests/tests/mobileBaseline.spec.ts

@@ -1,29 +0,0 @@
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { expect } from '@playwright/test'
-
-test.describe('Mobile Baseline Snapshots', () => {
-  test('@mobile empty canvas', async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.ConfirmClear', false)
-    await comfyPage.executeCommand('Comfy.ClearWorkflow')
-    await expect(async () => {
-      expect(await comfyPage.getGraphNodesCount()).toBe(0)
-    }).toPass({ timeout: 256 })
-    await comfyPage.nextFrame()
-    await expect(comfyPage.canvas).toHaveScreenshot('mobile-empty-canvas.png')
-  })
-
-  test('@mobile default workflow', async ({ comfyPage }) => {
-    await comfyPage.loadWorkflow('default')
-    await expect(comfyPage.canvas).toHaveScreenshot(
-      'mobile-default-workflow.png'
-    )
-  })
-
-  test('@mobile settings dialog', async ({ comfyPage }) => {
-    await comfyPage.settingDialog.open()
-    await comfyPage.nextFrame()
-    await expect(comfyPage.settingDialog.root).toHaveScreenshot(
-      'mobile-settings-dialog.png'
-    )
-  })
-})

browser_tests/tests/vueNodes/widgets/int/integerWidget.spec.ts

@@ -15,9 +15,7 @@ test.describe('Vue Integer Widget', () => {
     await comfyPage.loadWorkflow('vueNodes/linked-int-widget')
     await comfyPage.vueNodes.waitForNodes()
 
-    const seedWidget = comfyPage.vueNodes
-      .getWidgetByName('KSampler', 'seed')
-      .first()
+    const seedWidget = comfyPage.vueNodes.getWidgetByName('KSampler', 'seed')
     const controls = comfyPage.vueNodes.getInputNumberControls(seedWidget)
     const initialValue = Number(await controls.input.inputValue())
 

browser_tests/tests/widget.spec.ts

@@ -205,32 +205,6 @@ test.describe('Image widget', () => {
     const filename = await fileComboWidget.getValue()
     expect(filename).toBe('image32x32.webp')
   })
-  test('Displays buttons when viewing single image of batch', async ({
-    comfyPage
-  }) => {
-    const [x, y] = await comfyPage.page.evaluate(() => {
-      const src =
-        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='512' viewBox='0 0 1 1'%3E%3Crect width='1' height='1' stroke='black'/%3E%3C/svg%3E"
-      const image1 = new Image()
-      image1.src = src
-      const image2 = new Image()
-      image2.src = src
-      const targetNode = graph.nodes[6]
-      targetNode.imgs = [image1, image2]
-      targetNode.imageIndex = 1
-      app.canvas.setDirty(true)
-
-      const x = targetNode.pos[0] + targetNode.size[0] - 41
-      const y = targetNode.pos[1] + targetNode.widgets.at(-1).last_y + 30
-      return app.canvasPosToClientPos([x, y])
-    })
-
-    const clip = { x, y, width: 35, height: 35 }
-    await expect(comfyPage.page).toHaveScreenshot(
-      'image_preview_close_button.png',
-      { clip }
-    )
-  })
 })
 
 test.describe('Animated image widget', () => {

index.html

@@ -5,6 +5,8 @@
     <title>ComfyUI</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel="stylesheet" type="text/css" href="materialdesignicons.min.css" />
+    <link rel="stylesheet" type="text/css" href="user.css" />
+    <link rel="stylesheet" type="text/css" href="api/userdata/user.css" />
     
     <!-- Fullscreen mode on mobile browsers -->
     <meta name="mobile-web-app-capable" content="yes">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.35.7",
+  "version": "1.35.4",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",
@@ -19,7 +19,6 @@
     "dev:cloud": "cross-env DEV_SERVER_COMFYUI_URL='https://testcloud.comfy.org/' nx serve",
     "dev:desktop": "nx dev @comfyorg/desktop-ui",
     "dev:electron": "nx serve --config vite.electron.config.mts",
-    "dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
     "dev": "nx serve",
     "devtools:pycheck": "python3 -m compileall -q tools/devtools",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",

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

@@ -235,7 +235,7 @@
   --brand-yellow: var(--color-electric-400);
   --brand-blue: var(--color-sapphire-700);
   --secondary-background: var(--color-smoke-200);
-  --secondary-background-hover: var(--color-smoke-400);
+  --secondary-background-hover: var(--color-smoke-200);
   --secondary-background-selected: var(--color-smoke-600);
   --base-background: var(--color-white);
   --primary-background: var(--color-azure-400);

packages/registry-types/src/comfyRegistryTypes.ts

@@ -217,28 +217,6 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/admin/verify-api-key": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /**
-         * Verify a ComfyUI API key and return customer details
-         * @description Validates a ComfyUI API key and returns the associated customer information.
-         *     This endpoint is used by cloud.comfy.org to authenticate users via API keys
-         *     instead of Firebase tokens.
-         */
-        post: operations["VerifyApiKey"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
     "/admin/customers/{customer_id}/cloud-subscription-status": {
         parameters: {
             query?: never;
@@ -2176,26 +2154,6 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
-    "/proxy/bfl/flux-2-max/generate": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /**
-         * Proxy request to BFL Flux 2 Max for image generation
-         * @description Forwards image generation requests to BFL's Flux 2 Max API and returns the results. Supports image-to-image generation with up to 8 input images.
-         */
-        post: operations["bflFlux2MaxGenerate"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
     "/proxy/bfl/flux-pro-1.0-expand/generate": {
         parameters: {
             query?: never;
@@ -3953,11 +3911,6 @@ export interface components {
          * @enum {string}
          */
         SubscriptionTier: "STANDARD" | "CREATOR" | "PRO" | "FOUNDERS_EDITION";
-        /**
-         * @description The subscription billing duration
-         * @enum {string}
-         */
-        SubscriptionDuration: "MONTHLY" | "ANNUAL";
         FeaturesResponse: {
             /**
              * @description The conversion rate for partner nodes
@@ -4804,13 +4757,13 @@ export interface components {
          * @default kling-v1
          * @enum {string}
          */
-        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6";
+        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo";
         /**
          * @description Model Name
          * @default kling-v2-master
          * @enum {string}
          */
-        KlingVideoGenModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6";
+        KlingVideoGenModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1" | "kling-v2-1-master" | "kling-v2-5-turbo";
         /**
          * @description Video generation mode. std: Standard Mode, which is cost-effective. pro: Professional Mode, generates videos with longer duration but higher quality output.
          * @default std
@@ -4955,12 +4908,6 @@ export interface components {
             camera_control?: components["schemas"]["KlingCameraControl"];
             aspect_ratio?: components["schemas"]["KlingVideoGenAspectRatio"];
             duration?: components["schemas"]["KlingVideoGenDuration"];
-            /**
-             * @description Whether to generate sound simultaneously when generating videos. Only V2.6 and subsequent versions of the model support this parameter.
-             * @default off
-             * @enum {string}
-             */
-            sound: "on" | "off";
             /**
              * Format: uri
              * @description The callback notification address
@@ -5023,12 +4970,6 @@ export interface components {
             camera_control?: components["schemas"]["KlingCameraControl"];
             aspect_ratio?: components["schemas"]["KlingVideoGenAspectRatio"];
             duration?: components["schemas"]["KlingVideoGenDuration"];
-            /**
-             * @description Whether to generate sound simultaneously when generating videos. Only V2.6 and subsequent versions of the model support this parameter.
-             * @default off
-             * @enum {string}
-             */
-            sound: "on" | "off";
             /**
              * Format: uri
              * @description The callback notification address. Server will notify when the task status changes.
@@ -5818,7 +5759,7 @@ export interface components {
             width: number;
             /**
              * @description Height of the image.
-             * @default 1024
+             * @default 768
              */
             height: number;
             /** @description Seed for reproducibility. */
@@ -5834,11 +5775,6 @@ export interface components {
              * @enum {string}
              */
             output_format: "jpeg" | "png";
-            /**
-             * @description Moderation tolerance level (Flux 2 Max only).
-             * @default 2
-             */
-            safety_tolerance: number;
         };
         /** FluxProFillInputs */
         BFLFluxProFillInputs: {
@@ -7037,10 +6973,6 @@ export interface components {
                     image_tokens?: number;
                 };
                 output_tokens?: number;
-                output_tokens_details?: {
-                    text_tokens?: number;
-                    image_tokens?: number;
-                };
                 total_tokens?: number;
             };
         };
@@ -10424,76 +10356,40 @@ export interface components {
              * @description The ID of the model to call
              * @enum {string}
              */
-            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview" | "wan2.6-t2v" | "wan2.6-i2v";
+            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview";
             /** @description Enter basic information, such as prompt words, etc. */
             input: {
-                /**
-                 * @description Text prompt words. Support Chinese and English, length not exceeding 800 characters.
-                 *     For wan2.6-r2v with multiple reference videos, use 'character1', 'character2', etc. to refer to subjects
-                 *     in the order of reference videos. Example: "Character1 sings on the roadside, Character2 dances beside it"
-                 */
+                /** @description Text prompt words. Support Chinese and English, length not exceeding 800 characters */
                 prompt: string;
                 /** @description Reverse prompt words are used to describe content that you do not want to see in the video screen */
                 negative_prompt?: string;
-                /** @description Audio file download URL. Supported formats: mp3 and wav. Cannot be used with reference_video_urls. */
+                /** @description Audio file download URL. Supported formats: mp3 and wav. */
                 audio_url?: string;
                 /** @description First frame image URL or Base64 encoded data. Required for I2V models. Image formats: JPEG, JPG, PNG, BMP, WEBP. Resolution: 360-2000 pixels. File size: max 10MB. */
                 img_url?: string;
                 /** @description Video effect template name. Optional. Currently supported: squish, flying, carousel. When used, prompt parameter is ignored. */
                 template?: string;
-                /**
-                 * @description Reference video URLs for wan2.6-r2v model only. Array of 1-3 video URLs.
-                 *     Input restrictions:
-                 *     - Format: mp4, mov
-                 *     - Quantity: 1-3 videos
-                 *     - Single video length: 2-30 seconds
-                 *     - Single file size: max 30MB
-                 *     - Cannot be used with audio_url
-                 *     Reference duration: Single video max 5s, two videos max 2.5s each, three videos proportionally less.
-                 *     Billing: Based on actual reference duration used.
-                 */
-                reference_video_urls?: string[];
             };
             /** @description Video processing parameters */
             parameters?: {
-                /**
-                 * @description Video resolution in format width*height. Supported resolutions vary by model:
-                 *     For wan2.5 T2V: 480P (480*832, 832*480, 624*624), 720P, 1080P sizes
-                 *     For wan2.6 T2V/R2V (no 480P):
-                 *       720P: 1280*720, 720*1280, 960*960, 1088*832, 832*1088
-                 *       1080P: 1920*1080, 1080*1920, 1440*1440, 1632*1248, 1248*1632
-                 */
+                /** @description Used to specify the video resolution in the format of 宽*高. Supported resolutions vary by model (for T2V models) */
                 size?: string;
                 /**
-                 * @description Resolution level for I2V models. Supported values vary by model:
-                 *     - wan2.5-i2v-preview: 480P, 720P, 1080P
-                 *     - wan2.6-i2v: 720P, 1080P only (no 480P support)
+                 * @description Resolution level for I2V models. Supported values vary by model: 480P, 720P, 1080P
                  * @enum {string}
                  */
                 resolution?: "480P" | "720P" | "1080P";
                 /**
-                 * @description The duration of the video generated, in seconds:
-                 *     - wan2.5 models: 5 or 10 seconds
-                 *     - wan2.6-t2v, wan2.6-i2v: 5, 10, or 15 seconds
-                 *     - wan2.6-r2v: 5 or 10 seconds only (no 15s support)
+                 * @description The duration of the video generated, in seconds
                  * @default 5
                  * @enum {integer}
                  */
-                duration?: 5 | 10 | 15;
+                duration?: 5 | 10;
                 /**
                  * @description Is it enabled prompt intelligent rewriting. Default is true
                  * @default true
                  */
                 prompt_extend?: boolean;
-                /**
-                 * @description Intelligent multi-lens control. Only active when prompt_extend is enabled.
-                 *     For wan2.6 models only.
-                 *     - multi: Intelligent disassembly into multiple lenses (default)
-                 *     - single: Single lens generation
-                 * @default multi
-                 * @enum {string}
-                 */
-                shot_type?: "multi" | "single";
                 /** @description Random number seed, used to control the randomness of the model generated content */
                 seed?: number;
                 /**
@@ -11910,8 +11806,6 @@ export interface operations {
                 "application/json": {
                     /** @description Optional URL to redirect the customer after they're done with the billing portal */
                     return_url?: string;
-                    /** @description Optional target subscription tier. When provided, creates a deep link directly to the subscription update confirmation screen with this tier pre-selected. */
-                    target_tier?: "standard" | "creator" | "pro" | "standard-yearly" | "creator-yearly" | "pro-yearly";
                 };
             };
         };
@@ -12008,8 +11902,8 @@ export interface operations {
             query?: never;
             header?: never;
             path: {
-                /** @description The subscription tier (standard, creator, or pro) with optional yearly billing (standard-yearly, creator-yearly, pro-yearly) */
-                tier: "standard" | "creator" | "pro" | "standard-yearly" | "creator-yearly" | "pro-yearly";
+                /** @description The subscription tier (standard, creator, or pro) */
+                tier: "standard" | "creator" | "pro";
             };
             cookie?: never;
         };
@@ -12075,7 +11969,6 @@ export interface operations {
                         /** @description The active subscription ID if one exists */
                         subscription_id?: string | null;
                         subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
-                        subscription_duration?: components["schemas"]["SubscriptionDuration"] | null;
                         /** @description Whether the customer has funds/credits available */
                         has_fund?: boolean;
                         /**
@@ -12109,72 +12002,6 @@ export interface operations {
             };
         };
     };
-    VerifyApiKey: {
-        parameters: {
-            query?: never;
-            header: {
-                /** @description Admin API secret used to authorize this request */
-                "X-Comfy-Admin-Secret": string;
-            };
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": {
-                    /** @description The ComfyUI API key to verify (e.g., comfy_xxx...) */
-                    api_key: string;
-                };
-            };
-        };
-        responses: {
-            /** @description API key is valid */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        /** @description Whether the API key is valid */
-                        valid: boolean;
-                        /** @description The Firebase UID of the user */
-                        firebase_uid: string;
-                        /** @description The customer's email address */
-                        email?: string;
-                        /** @description The customer's name */
-                        name?: string;
-                        /** @description Whether the customer is an admin */
-                        is_admin?: boolean;
-                    };
-                };
-            };
-            /** @description Unauthorized or missing admin API secret */
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            /** @description API key not found or invalid */
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Internal server error */
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-        };
-    };
     GetAdminCustomerCloudSubscriptionStatus: {
         parameters: {
             query?: never;
@@ -12202,7 +12029,6 @@ export interface operations {
                         /** @description The active subscription ID if one exists */
                         subscription_id?: string | null;
                         subscription_tier?: components["schemas"]["SubscriptionTier"] | null;
-                        subscription_duration?: components["schemas"]["SubscriptionDuration"] | null;
                         /** @description Whether the customer has funds/credits available */
                         has_fund?: boolean;
                         /**
@@ -12320,16 +12146,6 @@ export interface operations {
                          * @description The remaining balance from cloud credits in microamount
                          */
                         cloud_credit_balance_micros?: number;
-                        /**
-                         * Format: double
-                         * @description The total amount of pending/unbilled charges from draft invoices in microamount. Only included when the show_negative_balances feature flag is enabled.
-                         */
-                        pending_charges_micros?: number;
-                        /**
-                         * Format: double
-                         * @description The effective balance (total balance minus pending charges). Can be negative if pending charges exceed the balance. Only included when the show_negative_balances feature flag is enabled.
-                         */
-                        effective_balance_micros?: number;
                         /** @description The currency code (e.g., "usd") */
                         currency: string;
                     };
@@ -12396,16 +12212,6 @@ export interface operations {
                          * @description The remaining balance from cloud credits in microamount
                          */
                         cloud_credit_balance_micros?: number;
-                        /**
-                         * Format: double
-                         * @description The total amount of pending/unbilled charges from draft invoices in microamount. Only included when the show_negative_balances feature flag is enabled.
-                         */
-                        pending_charges_micros?: number;
-                        /**
-                         * Format: double
-                         * @description The effective balance (total balance minus pending charges). Can be negative if pending charges exceed the balance. Only included when the show_negative_balances feature flag is enabled.
-                         */
-                        effective_balance_micros?: number;
                         /** @description The currency code (e.g., "usd") */
                         currency: string;
                     };
@@ -19611,89 +19417,6 @@ export interface operations {
             };
         };
     };
-    bflFlux2MaxGenerate: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["BFLFlux2ProGenerateRequest"];
-            };
-        };
-        responses: {
-            /** @description Successful response from BFL Flux 2 Max proxy */
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["BFLFluxProGenerateResponse"];
-                };
-            };
-            /** @description Bad Request (invalid input to proxy) */
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Unauthorized */
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            /** @description Payment Required */
-            402: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            /** @description Rate limit exceeded (either from proxy or BFL) */
-            429: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Internal Server Error (proxy or upstream issue) */
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Bad Gateway (error communicating with BFL) */
-            502: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-            /** @description Gateway Timeout (BFL took too long to respond) */
-            504: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["ErrorResponse"];
-                };
-            };
-        };
-    };
     BFLExpand_v1_flux_pro_1_0_expand_post: {
         parameters: {
             query?: never;

pnpm-workspace.yaml

@@ -16,7 +16,7 @@ catalog:
   '@nx/storybook': 21.4.1
   '@nx/vite': 21.4.1
   '@pinia/testing': ^0.1.5
-  '@playwright/test': ^1.57.0
+  '@playwright/test': ^1.52.0
   '@prettier/plugin-oxc': ^0.1.3
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2

scripts/cicd/resolve-comfyui-release.ts

@@ -264,7 +264,7 @@ if (!releaseInfo) {
 }
 
 // Output as JSON for GitHub Actions
-
+// eslint-disable-next-line no-console
 console.log(JSON.stringify(releaseInfo, null, 2))
 
 export { resolveRelease }

src/components/common/EditableText.vue

@@ -21,7 +21,6 @@
       @keyup.enter.capture.stop="blurInputElement"
       @keyup.escape.stop="cancelEditing"
       @click.stop
-      @contextmenu.stop
       @pointerdown.stop.capture
       @pointermove.stop.capture
     />

src/components/common/LazyImage.vue

@@ -12,6 +12,7 @@
     />
     <img
       v-if="cachedSrc"
+      ref="imageRef"
       :src="cachedSrc"
       :alt="alt"
       draggable="false"
@@ -60,6 +61,7 @@ const {
 }>()
 
 const containerRef = ref<HTMLElement | null>(null)
+const imageRef = ref<HTMLImageElement | null>(null)
 const isIntersecting = ref(false)
 const isImageLoaded = ref(false)
 const hasError = ref(false)

src/components/common/UserCredit.vue

@@ -14,7 +14,13 @@
       class="p-1 text-amber-400"
     >
       <template #icon>
-        <i class="icon-[lucide--component]" />
+        <i
+          :class="
+            flags.subscriptionTiersEnabled
+              ? 'icon-[lucide--component]'
+              : 'pi pi-dollar'
+          "
+        />
       </template>
     </Tag>
     <div :class="textClass">
@@ -30,6 +36,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { formatCreditsFromCents } from '@/base/credits/comfyCredits'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
 const { textClass, showCreditsOnly } = defineProps<{
@@ -38,6 +45,7 @@ const { textClass, showCreditsOnly } = defineProps<{
 }>()
 
 const authStore = useFirebaseAuthStore()
+const { flags } = useFeatureFlags()
 const balanceLoading = computed(() => authStore.isFetchingBalance)
 const { t, locale } = useI18n()
 

src/components/dialog/content/TopUpCreditsDialogContent.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="flex w-112 flex-col gap-8 p-8">
+  <!-- New Credits Design (default) -->
+  <div v-if="useNewDesign" class="flex w-112 flex-col gap-8 p-8">
     <!-- Header -->
     <div class="flex flex-col gap-4">
       <h1 class="text-2xl font-semibold text-base-foreground m-0">
@@ -65,32 +66,91 @@
       @click="handleBuy"
     />
   </div>
+
+  <!-- Legacy Design -->
+  <div v-else class="flex w-96 flex-col gap-10 p-2">
+    <div v-if="isInsufficientCredits" class="flex flex-col gap-4">
+      <h1 class="my-0 text-2xl leading-normal font-medium">
+        {{ $t('credits.topUp.insufficientTitle') }}
+      </h1>
+      <p class="my-0 text-base">
+        {{ $t('credits.topUp.insufficientMessage') }}
+      </p>
+    </div>
+
+    <!-- Balance Section -->
+    <div class="flex items-center justify-between">
+      <div class="flex w-full flex-col gap-2">
+        <div class="text-base text-muted">
+          {{ $t('credits.yourCreditBalance') }}
+        </div>
+        <div class="flex w-full items-center justify-between">
+          <UserCredit text-class="text-2xl" />
+          <Button
+            outlined
+            severity="secondary"
+            :label="$t('credits.topUp.seeDetails')"
+            icon="pi pi-arrow-up-right"
+            @click="handleSeeDetails"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Amount Input Section -->
+    <div class="flex flex-col gap-2">
+      <span class="text-sm text-muted"
+        >{{ $t('credits.topUp.quickPurchase') }}:</span
+      >
+      <div class="grid grid-cols-[2fr_1fr] gap-2">
+        <LegacyCreditTopUpOption
+          v-for="amount in amountOptions"
+          :key="amount"
+          :amount="amount"
+          :preselected="amount === preselectedAmountOption"
+        />
+
+        <LegacyCreditTopUpOption :amount="100" :preselected="false" editable />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { creditsToUsd } from '@/base/credits/comfyCredits'
 import UserCredit from '@/components/common/UserCredit.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useTelemetry } from '@/platform/telemetry'
 
 import CreditTopUpOption from './credit/CreditTopUpOption.vue'
+import LegacyCreditTopUpOption from './credit/LegacyCreditTopUpOption.vue'
 
 interface CreditOption {
   credits: number
   description: string
 }
 
-const { isInsufficientCredits = false } = defineProps<{
+const {
+  isInsufficientCredits = false,
+  amountOptions = [5, 10, 20, 50],
+  preselectedAmountOption = 10
+} = defineProps<{
   isInsufficientCredits?: boolean
+  amountOptions?: number[]
+  preselectedAmountOption?: number
 }>()
 
+const { flags } = useFeatureFlags()
 const { formattedRenewalDate } = useSubscription()
+// Use feature flag to determine design - defaults to true (new design)
+const useNewDesign = computed(() => flags.subscriptionTiersEnabled)
 
 const { t } = useI18n()
 const authActions = useFirebaseAuthActions()
@@ -142,4 +202,8 @@ const handleBuy = async () => {
     loading.value = false
   }
 }
+
+const handleSeeDetails = async () => {
+  await authActions.accessBillingPortal()
+}
 </script>

src/components/dialog/content/credit/LegacyCreditTopUpOption.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="flex items-center gap-2">
+    <Tag
+      severity="secondary"
+      icon="pi pi-wallet"
+      rounded
+      class="p-1 text-amber-400"
+    />
+    <div v-if="editable" class="flex items-center gap-2">
+      <InputNumber
+        v-model="customAmount"
+        :min="1"
+        :max="1000"
+        :step="1"
+        show-buttons
+        :allow-empty="false"
+        :highlight-on-focus="true"
+        prefix="$"
+        pt:pc-input-text:root="w-28"
+        @blur="
+          (e: InputNumberBlurEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+        @input="
+          (e: InputNumberInputEvent) =>
+            (customAmount = clampUsd(Number(e.value)))
+        "
+      />
+      <span class="text-xs text-muted">{{ formattedCredits }}</span>
+    </div>
+    <div v-else class="flex flex-col leading-tight">
+      <span class="text-xl font-semibold">{{ formattedCredits }}</span>
+      <span class="text-xs text-muted">{{ formattedUsd }}</span>
+    </div>
+  </div>
+  <ProgressSpinner v-if="loading" class="h-8 w-8" />
+  <Button
+    v-else
+    :severity="preselected ? 'primary' : 'secondary'"
+    :outlined="!preselected"
+    :label="$t('credits.topUp.buyNow')"
+    @click="handleBuyNow"
+  />
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import InputNumber from 'primevue/inputnumber'
+import type {
+  InputNumberBlurEvent,
+  InputNumberInputEvent
+} from 'primevue/inputnumber'
+import ProgressSpinner from 'primevue/progressspinner'
+import Tag from 'primevue/tag'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import {
+  clampUsd,
+  formatCreditsFromUsd,
+  formatUsd
+} from '@/base/credits/comfyCredits'
+import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
+import { useTelemetry } from '@/platform/telemetry'
+
+const authActions = useFirebaseAuthActions()
+const telemetry = useTelemetry()
+
+const {
+  amount,
+  preselected,
+  editable = false
+} = defineProps<{
+  amount: number
+  preselected: boolean
+  editable?: boolean
+}>()
+
+const customAmount = ref(amount)
+const didClickBuyNow = ref(false)
+const loading = ref(false)
+const { t, locale } = useI18n()
+
+const displayUsdAmount = computed(() =>
+  editable ? clampUsd(Number(customAmount.value)) : clampUsd(amount)
+)
+
+const formattedCredits = computed(
+  () =>
+    `${formatCreditsFromUsd({
+      usd: displayUsdAmount.value,
+      locale: locale.value
+    })} ${t('credits.credits')}`
+)
+
+const formattedUsd = computed(
+  () => `$${formatUsd({ value: displayUsdAmount.value, locale: locale.value })}`
+)
+
+const handleBuyNow = async () => {
+  const creditAmount = displayUsdAmount.value
+  telemetry?.trackApiCreditTopupButtonPurchaseClicked(creditAmount)
+
+  loading.value = true
+  try {
+    await authActions.purchaseCredits(creditAmount)
+    didClickBuyNow.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+onBeforeUnmount(() => {
+  if (didClickBuyNow.value) {
+    // If clicked buy now, then returned back to the dialog and closed, fetch the balance
+    void authActions.fetchBalance()
+  }
+})
+</script>

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

@@ -139,7 +139,7 @@ interface CreditHistoryItemData {
   isPositive: boolean
 }
 
-const { buildDocsUrl, docsPaths } = useExternalLink()
+const { buildDocsUrl } = useExternalLink()
 const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
@@ -194,7 +194,9 @@ const handleFaqClick = () => {
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),
+    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
+      includeLocale: true
+    }),
     '_blank'
   )
 }

src/components/dialog/header/SettingDialogHeader.vue

@@ -15,7 +15,9 @@
 <script setup lang="ts">
 import Tag from 'primevue/tag'
 
-import { isStaging } from '@/config/staging'
+// Global variable from vite build defined in global.d.ts
+// eslint-disable-next-line no-undef
+const isStaging = !__USE_PROD_CONFIG__
 </script>
 
 <style scoped>

src/components/graph/modals/ZoomControlsModal.vue

@@ -48,6 +48,7 @@
           class="zoomInputContainer flex items-center gap-1 rounded bg-input-surface p-2"
         >
           <InputNumber
+            ref="zoomInput"
             :default-value="canvasStore.appScalePercentage"
             :min="1"
             :max="1000"
@@ -129,6 +130,7 @@ const zoomOutCommandText = computed(() =>
 const zoomToFitCommandText = computed(() =>
   formatKeySequence(commandStore.getCommand('Comfy.Canvas.FitView'))
 )
+const zoomInput = ref<InstanceType<typeof InputNumber> | null>(null)
 const zoomInputContainer = ref<HTMLDivElement | null>(null)
 
 watch(

src/components/load3d/Load3D.vue

@@ -9,6 +9,7 @@
   >
     <Load3DScene
       v-if="node"
+      ref="load3DSceneRef"
       :initialize-load3d="initializeLoad3d"
       :cleanup="cleanup"
       :loading="loading"
@@ -99,6 +100,8 @@ if (isComponentWidget(props.widget)) {
   })
 }
 
+const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
+
 const {
   // configs
   sceneConfig,

src/components/load3d/Load3DScene.vue

@@ -14,7 +14,11 @@
     @dragleave.stop="handleDragLeave"
     @drop.prevent.stop="handleDrop"
   >
-    <LoadingOverlay :loading="loading" :loading-message="loadingMessage" />
+    <LoadingOverlay
+      ref="loadingOverlayRef"
+      :loading="loading"
+      :loading-message="loadingMessage"
+    />
     <div
       v-if="!isPreview && isDragging"
       class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
@@ -44,6 +48,7 @@ const props = defineProps<{
 }>()
 
 const container = ref<HTMLElement | null>(null)
+const loadingOverlayRef = ref<InstanceType<typeof LoadingOverlay> | null>(null)
 
 const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
   useLoad3dDrag({

src/components/load3d/Load3dViewerContent.vue

@@ -6,7 +6,7 @@
     @mouseenter="viewer.handleMouseEnter"
     @mouseleave="viewer.handleMouseLeave"
   >
-    <div class="relative flex-1">
+    <div ref="mainContentRef" class="relative flex-1">
       <div
         ref="containerRef"
         class="absolute h-full w-full"
@@ -105,6 +105,7 @@ const props = defineProps<{
 
 const viewerContentRef = ref<HTMLDivElement>()
 const containerRef = ref<HTMLDivElement>()
+const mainContentRef = ref<HTMLDivElement>()
 const maximized = ref(false)
 const mutationObserver = ref<MutationObserver | null>(null)
 

src/components/queue/QueueOverlayHeader.vue

@@ -17,7 +17,7 @@
         </span>
       </span>
     </div>
-    <div v-if="!isCloud" class="flex items-center gap-1">
+    <div class="flex items-center gap-1">
       <IconButton
         v-tooltip.top="moreTooltipConfig"
         type="transparent"
@@ -75,7 +75,6 @@ import { useI18n } from 'vue-i18n'
 import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
-import { isCloud } from '@/platform/distribution/types'
 
 defineProps<{
   headerTitle: string

src/components/rightSidePanel/settings/TabSettings.vue

@@ -78,7 +78,7 @@
 
 <script setup lang="ts">
 import ToggleSwitch from 'primevue/toggleswitch'
-import { computed, shallowRef, triggerRef, watchEffect } from 'vue'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -90,23 +90,10 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-const props = defineProps<{
+const { nodes = [] } = defineProps<{
   nodes?: LGraphNode[]
 }>()
 
-/**
- * This is not random writing. It is very important.
- * Otherwise, the UI cannot be updated correctly.
- */
-const targetNodes = shallowRef<LGraphNode[]>([])
-watchEffect(() => {
-  if (props.nodes) {
-    targetNodes.value = props.nodes
-  } else {
-    targetNodes.value = []
-  }
-})
-
 const { t } = useI18n()
 
 const canvasStore = useCanvasStore()
@@ -116,33 +103,24 @@ const isLightTheme = computed(
 )
 
 const nodeState = computed({
-  get() {
-    let mode: LGraphNode['mode'] | null = null
-    const nodes = targetNodes.value
-
-    if (nodes.length === 0) return null
+  get(): LGraphNode['mode'] | null {
+    if (!nodes.length) return null
+    if (nodes.length === 1) {
+      return nodes[0].mode
+    }
 
     // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
-    if (nodes.length > 1) {
-      mode = nodes[0].mode
-      if (!nodes.every((node) => node.mode === mode)) {
-        mode = null
-      }
-    } else {
-      mode = nodes[0].mode
+    const mode: LGraphNode['mode'] = nodes[0].mode
+    if (!nodes.every((node) => node.mode === mode)) {
+      return null
     }
 
     return mode
   },
   set(value: LGraphNode['mode']) {
-    targetNodes.value.forEach((node) => {
+    nodes.forEach((node) => {
       node.mode = value
     })
-    /*
-     * This is not random writing. It is very important.
-     * Otherwise, the UI cannot be updated correctly.
-     */
-    triggerRef(targetNodes)
     canvasStore.canvas?.setDirty(true, true)
   }
 })
@@ -150,15 +128,10 @@ const nodeState = computed({
 // Pinned state
 const isPinned = computed<boolean>({
   get() {
-    return targetNodes.value.some((node) => node.pinned)
+    return nodes.some((node) => node.pinned)
   },
   set(value) {
-    targetNodes.value.forEach((node) => node.pin(value))
-    /*
-     * This is not random writing. It is very important.
-     * Otherwise, the UI cannot be updated correctly.
-     */
-    triggerRef(targetNodes)
+    nodes.forEach((node) => node.pin(value))
     canvasStore.canvas?.setDirty(true, true)
   }
 })
@@ -202,10 +175,8 @@ const colorOptions: NodeColorOption[] = [
 
 const nodeColor = computed<NodeColorOption['name'] | null>({
   get() {
-    if (targetNodes.value.length === 0) return null
-    const theColorOptions = targetNodes.value.map((item) =>
-      item.getColorOption()
-    )
+    if (nodes.length === 0) return null
+    const theColorOptions = nodes.map((item) => item.getColorOption())
 
     let colorOption: ColorOption | null | false = theColorOptions[0]
     if (!theColorOptions.every((option) => option === colorOption)) {
@@ -231,14 +202,9 @@ const nodeColor = computed<NodeColorOption['name'] | null>({
         ? null
         : LGraphCanvas.node_colors[colorName]
 
-    for (const item of targetNodes.value) {
+    for (const item of nodes) {
       item.setColorOption(canvasColorOption)
     }
-    /*
-     * This is not random writing. It is very important.
-     * Otherwise, the UI cannot be updated correctly.
-     */
-    triggerRef(targetNodes)
     canvasStore.canvas?.setDirty(true, true)
   }
 })

src/components/sidebar/ComfyMenuButton.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="menuButtonRef"
     v-tooltip="{
       value: t('sideToolbar.labels.menu'),
       showDelay: 300,
@@ -136,6 +137,7 @@ const settingStore = useSettingStore()
 const menuRef = ref<
   ({ dirty: boolean } & TieredMenuMethods & TieredMenuState) | null
 >(null)
+const menuButtonRef = ref<HTMLElement | null>(null)
 
 const nodes2Enabled = computed({
   get: () => settingStore.get('Comfy.VueNodes.Enabled') ?? false,

src/components/sidebar/SideToolbar.vue

@@ -11,6 +11,7 @@
     }"
   >
     <div
+      ref="contentMeasureRef"
       :class="
         isOverflowing
           ? 'side-tool-bar-container overflow-y-auto'
@@ -79,6 +80,7 @@ const userStore = useUserStore()
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const sideToolbarRef = ref<HTMLElement>()
+const contentMeasureRef = ref<HTMLElement>()
 const topToolbarRef = ref<HTMLElement>()
 const bottomToolbarRef = ref<HTMLElement>()
 

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -56,13 +56,15 @@
         class="pb-1 px-2 2xl:px-4"
         :show-generation-time-sort="activeTab === 'output'"
       />
-      <Divider type="dashed" class="my-2" />
     </template>
     <template #body>
-      <div v-if="loading && !displayAssets.length">
+      <Divider type="dashed" class="m-2" />
+      <!-- Loading state -->
+      <div v-if="loading">
         <ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
       </div>
-      <div v-else-if="!loading && !displayAssets.length">
+      <!-- Empty state -->
+      <div v-else-if="!displayAssets.length">
         <NoResultsPlaceholder
           icon="pi pi-info-circle"
           :title="
@@ -75,6 +77,7 @@
           :message="$t('sideToolbar.noFilesFoundMessage')"
         />
       </div>
+      <!-- Content -->
       <div v-else class="relative size-full" @click="handleEmptySpaceClick">
         <VirtualGrid
           :items="mediaAssetsWithKey"

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -15,7 +15,7 @@
         </template>
         <template #end>
           <div
-            class="touch:w-auto touch:opacity-100 flex flex-row overflow-hidden transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
+            class="touch:w-auto touch:opacity-100 flex flex-row transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
           >
             <slot name="tool-buttons" />
           </div>

src/components/topbar/CurrentUserButton.vue

@@ -18,15 +18,7 @@
       </div>
     </Button>
 
-    <Popover
-      ref="popover"
-      :show-arrow="false"
-      :pt="{
-        root: {
-          class: 'rounded-lg'
-        }
-      }"
-    >
+    <Popover ref="popover" :show-arrow="false">
       <CurrentUserPopover @close="closePopover" />
     </Popover>
   </div>

src/components/topbar/CurrentUserPopover.test.ts

@@ -85,24 +85,10 @@ const mockFetchStatus = vi.fn().mockResolvedValue(undefined)
 vi.mock('@/platform/cloud/subscription/composables/useSubscription', () => ({
   useSubscription: vi.fn(() => ({
     isActiveSubscription: { value: true },
-    subscriptionTierName: { value: 'Creator' },
-    subscriptionTier: { value: 'CREATOR' },
     fetchStatus: mockFetchStatus
   }))
 }))
 
-// Mock the useSubscriptionDialog composable
-const mockSubscriptionDialogShow = vi.fn()
-vi.mock(
-  '@/platform/cloud/subscription/composables/useSubscriptionDialog',
-  () => ({
-    useSubscriptionDialog: vi.fn(() => ({
-      show: mockSubscriptionDialogShow,
-      hide: vi.fn()
-    }))
-  })
-)
-
 // Mock UserAvatar component
 vi.mock('@/components/common/UserAvatar.vue', () => ({
   default: {
@@ -131,9 +117,15 @@ vi.mock('@/base/credits/comfyCredits', () => ({
 // Mock useExternalLink
 vi.mock('@/composables/useExternalLink', () => ({
   useExternalLink: vi.fn(() => ({
-    buildDocsUrl: vi.fn((path) => `https://docs.comfy.org${path}`),
-    docsPaths: {
-      partnerNodesPricing: '/tutorials/partner-nodes/pricing'
+    buildDocsUrl: vi.fn((path) => `https://docs.comfy.org${path}`)
+  }))
+}))
+
+// Mock useFeatureFlags
+vi.mock('@/composables/useFeatureFlags', () => ({
+  useFeatureFlags: vi.fn(() => ({
+    flags: {
+      subscriptionTiersEnabled: true
     }
   }))
 }))
@@ -280,22 +272,4 @@ describe('CurrentUserPopover', () => {
     expect(wrapper.emitted('close')).toBeTruthy()
     expect(wrapper.emitted('close')!.length).toBe(1)
   })
-
-  it('opens subscription dialog and emits close event when plans & pricing item is clicked', async () => {
-    const wrapper = mountComponent()
-
-    const plansPricingItem = wrapper.find(
-      '[data-testid="plans-pricing-menu-item"]'
-    )
-    expect(plansPricingItem.exists()).toBe(true)
-
-    await plansPricingItem.trigger('click')
-
-    // Verify subscription dialog show was called
-    expect(mockSubscriptionDialogShow).toHaveBeenCalled()
-
-    // Verify close event was emitted
-    expect(wrapper.emitted('close')).toBeTruthy()
-    expect(wrapper.emitted('close')!.length).toBe(1)
-  })
 })

src/components/topbar/CurrentUserPopover.vue

@@ -21,12 +21,9 @@
       <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
         {{ userEmail }}
       </p>
-      <span
-        v-if="subscriptionTierName"
-        class="my-0 text-xs text-foreground bg-secondary-background-hover rounded-full uppercase px-2 py-0.5 font-bold mt-2"
-      >
+      <p v-if="subscriptionTierName" class="my-0 truncate text-sm text-muted">
         {{ subscriptionTierName }}
-      </span>
+      </p>
     </div>
 
     <!-- Credits Section -->
@@ -36,15 +33,11 @@
         v-if="authStore.isFetchingBalance"
         width="4rem"
         height="1.25rem"
-        class="w-full"
+        class="flex-1"
       />
-      <span v-else class="text-base font-semibold text-base-foreground">{{
+      <span v-else class="text-base font-normal text-base-foreground flex-1">{{
         formattedBalance
       }}</span>
-      <i
-        v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
-        class="icon-[lucide--circle-help] cursor-help text-base text-muted-foreground mr-auto"
-      />
       <Button
         :label="$t('subscription.addCredits')"
         severity="secondary"
@@ -65,6 +58,24 @@
       />
     </div>
 
+    <!-- Credits info row -->
+    <div
+      v-if="flags.subscriptionTiersEnabled && isActiveSubscription"
+      class="flex items-center gap-2 px-4 py-0"
+    >
+      <i
+        v-tooltip="{
+          value: $t('credits.unified.tooltip'),
+          showDelay: 300,
+          hideDelay: 300
+        }"
+        class="icon-[lucide--circle-help] cursor-help text-xs text-muted-foreground"
+      />
+      <span class="text-sm text-muted-foreground">{{
+        $t('credits.unified.message')
+      }}</span>
+    </div>
+
     <Divider class="my-2 mx-0" />
 
     <div
@@ -80,31 +91,14 @@
     </div>
 
     <div
+      v-if="isActiveSubscription"
       class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
-      data-testid="plans-pricing-menu-item"
-      @click="handleOpenPlansAndPricing"
+      data-testid="plan-credits-menu-item"
+      @click="handleOpenPlanAndCreditsSettings"
     >
       <i class="icon-[lucide--receipt-text] text-muted-foreground text-sm" />
       <span class="text-sm text-base-foreground flex-1">{{
-        $t('subscription.plansAndPricing')
-      }}</span>
-      <span
-        v-if="canUpgrade"
-        class="text-xs font-bold text-base-background bg-base-foreground px-1.5 py-0.5 rounded-full"
-      >
-        {{ $t('subscription.upgrade') }}
-      </span>
-    </div>
-
-    <div
-      v-if="isActiveSubscription"
-      class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
-      data-testid="manage-plan-menu-item"
-      @click="handleOpenPlanAndCreditsSettings"
-    >
-      <i class="icon-[lucide--file-text] text-muted-foreground text-sm" />
-      <span class="text-sm text-base-foreground flex-1">{{
-        $t('subscription.managePlan')
+        $t(planSettingsLabel)
       }}</span>
     </div>
 
@@ -115,7 +109,7 @@
     >
       <i class="icon-[lucide--settings-2] text-muted-foreground text-sm" />
       <span class="text-sm text-base-foreground flex-1">{{
-        $t('userSettings.accountSettings')
+        $t('userSettings.title')
       }}</span>
     </div>
 
@@ -146,9 +140,9 @@ import UserAvatar from '@/components/common/UserAvatar.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useExternalLink } from '@/composables/useExternalLink'
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import SubscribeButton from '@/platform/cloud/subscription/components/SubscribeButton.vue'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
 import { useDialogService } from '@/services/dialogService'
@@ -158,20 +152,20 @@ const emit = defineEmits<{
   close: []
 }>()
 
-const { buildDocsUrl, docsPaths } = useExternalLink()
+const { buildDocsUrl } = useExternalLink()
+
+const planSettingsLabel = isCloud
+  ? 'settingsCategories.PlanCredits'
+  : 'settingsCategories.Credits'
 
 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const authStore = useFirebaseAuthStore()
 const dialogService = useDialogService()
-const {
-  isActiveSubscription,
-  subscriptionTierName,
-  subscriptionTier,
-  fetchStatus
-} = useSubscription()
-const subscriptionDialog = useSubscriptionDialog()
+const { isActiveSubscription, subscriptionTierName, fetchStatus } =
+  useSubscription()
+const { flags } = useFeatureFlags()
 const { locale } = useI18n()
 
 const formattedBalance = computed(() => {
@@ -187,23 +181,11 @@ const formattedBalance = computed(() => {
   })
 })
 
-const canUpgrade = computed(() => {
-  const tier = subscriptionTier.value
-  return (
-    tier === 'FOUNDERS_EDITION' || tier === 'STANDARD' || tier === 'CREATOR'
-  )
-})
-
 const handleOpenUserSettings = () => {
   dialogService.showSettingsDialog('user')
   emit('close')
 }
 
-const handleOpenPlansAndPricing = () => {
-  subscriptionDialog.show()
-  emit('close')
-}
-
 const handleOpenPlanAndCreditsSettings = () => {
   if (isCloud) {
     dialogService.showSettingsDialog('subscription')
@@ -223,7 +205,9 @@ const handleTopUp = () => {
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),
+    buildDocsUrl('/tutorials/partner-nodes/pricing', {
+      includeLocale: true
+    }),
     '_blank'
   )
   emit('close')

src/composables/auth/useFirebaseAuthActions.ts

@@ -11,7 +11,6 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
-import type { BillingPortalTargetTier } from '@/stores/firebaseAuthStore'
 import { usdToMicros } from '@/utils/formatUtil'
 
 /**
@@ -103,11 +102,8 @@ export const useFirebaseAuthActions = () => {
     window.open(response.checkout_url, '_blank')
   }, reportError)
 
-  const accessBillingPortal = wrapWithErrorHandlingAsync<
-    [targetTier?: BillingPortalTargetTier],
-    void
-  >(async (targetTier) => {
-    const response = await authStore.accessBillingPortal(targetTier)
+  const accessBillingPortal = wrapWithErrorHandlingAsync(async () => {
+    const response = await authStore.accessBillingPortal()
     if (!response.billing_portal_url) {
       throw new Error(
         t('toastMessages.failedToAccessBillingPortal', {

src/composables/graph/useGraphNodeManager.ts

@@ -6,7 +6,6 @@ import { reactiveComputed } from '@vueuse/core'
 import { reactive, shallowReactive } from 'vue'
 
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { isProxyWidget } from '@/core/graph/subgraph/proxyWidget'
 import type {
   INodeInputSlot,
   INodeOutputSlot
@@ -21,8 +20,7 @@ import type { NodeId } from '@/renderer/core/layout/types'
 import type { InputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { isDOMWidget } from '@/scripts/domWidget'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import type { WidgetValue, SafeControlWidget } from '@/types/simplifiedWidget'
-import { normalizeControlOption } from '@/types/simplifiedWidget'
+import type { WidgetValue } from '@/types/simplifiedWidget'
 
 import type {
   LGraph,
@@ -43,15 +41,13 @@ export interface SafeWidgetData {
   name: string
   type: string
   value: WidgetValue
-  borderStyle?: string
-  callback?: ((value: unknown) => void) | undefined
-  controlWidget?: SafeControlWidget
-  isDOMWidget?: boolean
   label?: string
-  nodeType?: string
   options?: IWidgetOptions<unknown>
+  callback?: ((value: unknown) => void) | undefined
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
+  isDOMWidget?: boolean
+  borderStyle?: string
 }
 
 export interface VueNodeData {
@@ -88,22 +84,6 @@ export interface GraphNodeManager {
   cleanup(): void
 }
 
-function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined {
-  const cagWidget = widget.linkedWidgets?.find(
-    (w) => w.name == 'control_after_generate'
-  )
-  if (!cagWidget) return
-  return {
-    value: normalizeControlOption(cagWidget.value),
-    update: (value) => (cagWidget.value = normalizeControlOption(value))
-  }
-}
-function getNodeType(node: LGraphNode, widget: IBaseWidget) {
-  if (!node.isSubgraphNode() || !isProxyWidget(widget)) return undefined
-  const subNode = node.subgraph.getNodeById(widget._overlay.nodeId)
-  return subNode?.type
-}
-
 export function safeWidgetMapper(
   node: LGraphNode,
   slotMetadata: Map<string, WidgetSlotMetadata>
@@ -138,10 +118,8 @@ export function safeWidgetMapper(
         value: value,
         borderStyle,
         callback: widget.callback,
-        controlWidget: getControlWidget(widget),
         isDOMWidget: isDOMWidget(widget),
         label: widget.label,
-        nodeType: getNodeType(node, widget),
         options: widget.options,
         spec,
         slotMetadata: slotInfo
@@ -226,15 +204,6 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
         reactiveWidgets.splice(0, reactiveWidgets.length, ...v)
       }
     })
-    const reactiveInputs = shallowReactive<INodeInputSlot[]>(node.inputs ?? [])
-    Object.defineProperty(node, 'inputs', {
-      get() {
-        return reactiveInputs
-      },
-      set(v) {
-        reactiveInputs.splice(0, reactiveInputs.length, ...v)
-      }
-    })
 
     const safeWidgets = reactiveComputed<SafeWidgetData[]>(() => {
       node.inputs?.forEach((input, index) => {
@@ -269,7 +238,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       badges,
       hasErrors: !!node.has_errors,
       widgets: safeWidgets,
-      inputs: reactiveInputs,
+      inputs: node.inputs ? [...node.inputs] : undefined,
       outputs: node.outputs ? [...node.outputs] : undefined,
       flags: node.flags ? { ...node.flags } : undefined,
       color: node.color || undefined,
@@ -345,7 +314,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
    * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
    */
   const createWrappedWidgetCallback = (
-    widget: IBaseWidget, // LiteGraph widget with minimal typing
+    widget: { value?: unknown; name: string }, // LiteGraph widget with minimal typing
     originalCallback: ((value: unknown) => void) | undefined,
     nodeId: string
   ) => {
@@ -372,10 +341,10 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
         }
 
         // Always update widget.value to ensure sync
-        widget.value = value ?? undefined
+        widget.value = value
 
         // 2. Call the original callback if it exists
-        if (originalCallback && widget.type !== 'asset') {
+        if (originalCallback) {
           originalCallback.call(widget, value)
         }
 

src/composables/node/useNodePricing.ts

@@ -231,36 +231,6 @@ const ltxvPricingCalculator = (node: LGraphNode): string => {
   return `$${cost}/Run`
 }
 
-const klingVideoWithAudioPricingCalculator: PricingFunction = (
-  node: LGraphNode
-): string => {
-  const durationWidget = node.widgets?.find(
-    (w) => w.name === 'duration'
-  ) as IComboWidget
-  const generateAudioWidget = node.widgets?.find(
-    (w) => w.name === 'generate_audio'
-  ) as IComboWidget
-
-  if (!durationWidget || !generateAudioWidget) {
-    return '$0.35-1.40/Run (varies with duration & audio)'
-  }
-
-  const duration = String(durationWidget.value)
-  const generateAudio =
-    String(generateAudioWidget.value).toLowerCase() === 'true'
-
-  if (duration === '5') {
-    return generateAudio ? '$0.70/Run' : '$0.35/Run'
-  }
-
-  if (duration === '10') {
-    return generateAudio ? '$1.40/Run' : '$0.70/Run'
-  }
-
-  // Fallback for unexpected duration values
-  return '$0.35-1.40/Run (varies with duration & audio)'
-}
-
 // ---- constants ----
 const SORA_SIZES = {
   BASIC: new Set(['720x1280', '1280x720']),
@@ -329,123 +299,6 @@ const sora2PricingCalculator: PricingFunction = (node: LGraphNode): string => {
   return formatRunPrice(perSec, duration)
 }
 
-/**
- * Pricing for Tripo 3D generation nodes (Text / Image / Multiview)
- * based on Tripo credits:
- *
- * Turbo / V3 / V2.5 / V2.0:
- *   Text  -> 10 (no texture) / 20 (standard texture)
- *   Image -> 20 (no texture) / 30 (standard texture)
- *   Multiview -> 20 (no texture) / 30 (standard texture)
- *
- * V1.4:
- *   Text  -> 20
- *   Image -> 30
- *   (Multiview treated same as Image if used)
- *
- * Advanced extras (added on top of generation credits):
- *   quad               -> +5 credits
- *   style              -> +5 credits (if style != "None")
- *   HD texture         -> +10 credits (texture_quality = "detailed")
- *   detailed geometry  -> +20 credits (geometry_quality = "detailed")
- *
- * 1 credit = $0.01
- */
-const calculateTripo3DGenerationPrice = (
-  node: LGraphNode,
-  task: 'text' | 'image' | 'multiview'
-): string => {
-  const getWidget = (name: string): IComboWidget | undefined =>
-    node.widgets?.find((w) => w.name === name) as IComboWidget | undefined
-
-  const getString = (name: string, defaultValue: string): string => {
-    const widget = getWidget(name)
-    if (!widget || widget.value === undefined || widget.value === null) {
-      return defaultValue
-    }
-    return String(widget.value)
-  }
-
-  const getBool = (name: string, defaultValue: boolean): boolean => {
-    const widget = getWidget(name)
-    if (!widget || widget.value === undefined || widget.value === null) {
-      return defaultValue
-    }
-
-    const v = widget.value
-    if (typeof v === 'number') return v !== 0
-    const lower = String(v).toLowerCase()
-    if (lower === 'true') return true
-    if (lower === 'false') return false
-
-    return defaultValue
-  }
-
-  // ---- read widget values with sensible defaults (mirroring backend) ----
-  const modelVersionRaw = getString('model_version', '').toLowerCase()
-  if (modelVersionRaw === '')
-    return '$0.1-0.65/Run (varies with quad, style, texture & quality)'
-  const styleRaw = getString('style', 'None')
-  const hasStyle = styleRaw.toLowerCase() !== 'none'
-
-  // Backend defaults: texture=true, pbr=true, quad=false, qualities="standard"
-  const hasTexture = getBool('texture', false)
-  const hasPbr = getBool('pbr', false)
-  const quad = getBool('quad', false)
-
-  const textureQualityRaw = getString(
-    'texture_quality',
-    'standard'
-  ).toLowerCase()
-  const geometryQualityRaw = getString(
-    'geometry_quality',
-    'standard'
-  ).toLowerCase()
-
-  const isHdTexture = textureQualityRaw === 'detailed'
-  const isDetailedGeometry = geometryQualityRaw === 'detailed'
-
-  const withTexture = hasTexture || hasPbr
-
-  let baseCredits: number
-
-  if (modelVersionRaw.includes('v1.4')) {
-    // V1.4 model: Text=20, Image=30, Refine=30
-    if (task === 'text') {
-      baseCredits = 20
-    } else {
-      // treat Multiview same as Image if V1.4 is ever used there
-      baseCredits = 30
-    }
-  } else {
-    // V3.0, V2.5, V2.0 models
-    if (!withTexture) {
-      if (task === 'text') {
-        baseCredits = 10 // Text to 3D without texture
-      } else {
-        baseCredits = 20 // Image/Multiview to 3D without texture
-      }
-    } else {
-      if (task === 'text') {
-        baseCredits = 20 // Text to 3D with standard texture
-      } else {
-        baseCredits = 30 // Image/Multiview to 3D with standard texture
-      }
-    }
-  }
-
-  // ---- advanced extras on top of base generation ----
-  let credits = baseCredits
-
-  if (hasStyle) credits += 5 // Style
-  if (quad) credits += 5 // Quad Topology
-  if (isHdTexture) credits += 10 // HD Texture
-  if (isDetailedGeometry) credits += 20 // Detailed Geometry Quality
-
-  const dollars = credits * 0.01
-  return `$${dollars.toFixed(2)}/Run`
-}
-
 /**
  * Static pricing data for API nodes, now supporting both strings and functions
  */
@@ -512,46 +365,6 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         return `$${parseFloat(outputCost.toFixed(3))}/Run`
       }
     },
-    Flux2MaxImageNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const widthW = node.widgets?.find(
-          (w) => w.name === 'width'
-        ) as IComboWidget
-        const heightW = node.widgets?.find(
-          (w) => w.name === 'height'
-        ) as IComboWidget
-
-        const w = Number(widthW?.value)
-        const h = Number(heightW?.value)
-        if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
-          // global min/max for this node given schema bounds (1MP..4MP output)
-          return '$0.07–$0.35/Run'
-        }
-
-        // Is the 'images' input connected?
-        const imagesInput = node.inputs?.find(
-          (i) => i.name === 'images'
-        ) as INodeInputSlot
-        const hasRefs =
-          typeof imagesInput?.link !== 'undefined' && imagesInput.link != null
-
-        // Output cost: ceil((w*h)/MP); first MP $0.07, each additional $0.03
-        const MP = 1024 * 1024
-        const outMP = Math.max(1, Math.floor((w * h + MP - 1) / MP))
-        const outputCost = 0.07 + 0.03 * Math.max(outMP - 1, 0)
-
-        if (hasRefs) {
-          // Unknown ref count/size on the frontend:
-          // min extra is $0.03, max extra is $0.27 (8 MP cap / 8 refs)
-          const minTotal = outputCost + 0.03
-          const maxTotal = outputCost + 0.24
-          return `~$${parseFloat(minTotal.toFixed(3))}–$${parseFloat(maxTotal.toFixed(3))}/Run`
-        }
-
-        // Precise text-to-image price
-        return `$${parseFloat(outputCost.toFixed(3))}/Run`
-      }
-    },
     OpenAIVideoSora2: {
       displayPrice: sora2PricingCalculator
     },
@@ -931,12 +744,6 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     KlingOmniProImageNode: {
       displayPrice: '$0.028/Run'
     },
-    KlingTextToVideoWithAudio: {
-      displayPrice: klingVideoWithAudioPricingCalculator
-    },
-    KlingImageToVideoWithAudio: {
-      displayPrice: klingVideoWithAudioPricingCalculator
-    },
     LumaImageToVideoNode: {
       displayPrice: (node: LGraphNode): string => {
         // Same pricing as LumaVideoNode per CSV
@@ -1639,16 +1446,119 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     },
     // Tripo nodes - using actual node names from ComfyUI
     TripoTextToModelNode: {
-      displayPrice: (node: LGraphNode): string =>
-        calculateTripo3DGenerationPrice(node, 'text')
+      displayPrice: (node: LGraphNode): string => {
+        const quadWidget = node.widgets?.find(
+          (w) => w.name === 'quad'
+        ) as IComboWidget
+        const styleWidget = node.widgets?.find(
+          (w) => w.name === 'style'
+        ) as IComboWidget
+        const textureWidget = node.widgets?.find(
+          (w) => w.name === 'texture'
+        ) as IComboWidget
+        const textureQualityWidget = node.widgets?.find(
+          (w) => w.name === 'texture_quality'
+        ) as IComboWidget
+
+        if (!quadWidget || !styleWidget || !textureWidget)
+          return '$0.1-0.4/Run (varies with quad, style, texture & quality)'
+
+        const quad = String(quadWidget.value).toLowerCase() === 'true'
+        const style = String(styleWidget.value).toLowerCase()
+        const texture = String(textureWidget.value).toLowerCase() === 'true'
+        const textureQuality = String(
+          textureQualityWidget?.value || 'standard'
+        ).toLowerCase()
+
+        // Pricing logic based on CSV data
+        if (style.includes('none')) {
+          if (!quad) {
+            if (!texture) return '$0.10/Run'
+            else return '$0.15/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.30/Run'
+              else return '$0.35/Run'
+            } else {
+              if (!texture) return '$0.20/Run'
+              else return '$0.25/Run'
+            }
+          }
+        } else {
+          // any style
+          if (!quad) {
+            if (!texture) return '$0.15/Run'
+            else return '$0.20/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.35/Run'
+              else return '$0.40/Run'
+            } else {
+              if (!texture) return '$0.25/Run'
+              else return '$0.30/Run'
+            }
+          }
+        }
+      }
     },
     TripoImageToModelNode: {
-      displayPrice: (node: LGraphNode): string =>
-        calculateTripo3DGenerationPrice(node, 'image')
+      displayPrice: (node: LGraphNode): string => {
+        const quadWidget = node.widgets?.find(
+          (w) => w.name === 'quad'
+        ) as IComboWidget
+        const styleWidget = node.widgets?.find(
+          (w) => w.name === 'style'
+        ) as IComboWidget
+        const textureWidget = node.widgets?.find(
+          (w) => w.name === 'texture'
+        ) as IComboWidget
+        const textureQualityWidget = node.widgets?.find(
+          (w) => w.name === 'texture_quality'
+        ) as IComboWidget
+
+        if (!quadWidget || !styleWidget || !textureWidget)
+          return '$0.2-0.5/Run (varies with quad, style, texture & quality)'
+
+        const quad = String(quadWidget.value).toLowerCase() === 'true'
+        const style = String(styleWidget.value).toLowerCase()
+        const texture = String(textureWidget.value).toLowerCase() === 'true'
+        const textureQuality = String(
+          textureQualityWidget?.value || 'standard'
+        ).toLowerCase()
+
+        // Pricing logic based on CSV data for Image to Model
+        if (style.includes('none')) {
+          if (!quad) {
+            if (!texture) return '$0.20/Run'
+            else return '$0.25/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.40/Run'
+              else return '$0.45/Run'
+            } else {
+              if (!texture) return '$0.30/Run'
+              else return '$0.35/Run'
+            }
+          }
+        } else {
+          // any style
+          if (!quad) {
+            if (!texture) return '$0.25/Run'
+            else return '$0.30/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.45/Run'
+              else return '$0.50/Run'
+            } else {
+              if (!texture) return '$0.35/Run'
+              else return '$0.40/Run'
+            }
+          }
+        }
+      }
     },
-    TripoMultiviewToModelNode: {
-      displayPrice: (node: LGraphNode): string =>
-        calculateTripo3DGenerationPrice(node, 'multiview')
+    TripoRefineNode: {
+      displayPrice: '$0.3/Run'
     },
     TripoTextureNode: {
       displayPrice: (node: LGraphNode): string => {
@@ -1662,93 +1572,67 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         return textureQuality.includes('detailed') ? '$0.2/Run' : '$0.1/Run'
       }
     },
-    TripoRigNode: {
-      displayPrice: '$0.25/Run'
-    },
-    TripoConversionNode: {
-      displayPrice: (node: LGraphNode): string => {
-        const getWidgetValue = (name: string) =>
-          node.widgets?.find((w) => w.name === name)?.value
-
-        const getNumber = (name: string, defaultValue: number): number => {
-          const raw = getWidgetValue(name)
-          if (raw === undefined || raw === null || raw === '')
-            return defaultValue
-          if (typeof raw === 'number')
-            return Number.isFinite(raw) ? raw : defaultValue
-          const n = Number(raw)
-          return Number.isFinite(n) ? n : defaultValue
-        }
-
-        const getBool = (name: string, defaultValue: boolean): boolean => {
-          const v = getWidgetValue(name)
-          if (v === undefined || v === null) return defaultValue
-
-          if (typeof v === 'number') return v !== 0
-          const lower = String(v).toLowerCase()
-          if (lower === 'true') return true
-          if (lower === 'false') return false
-          return defaultValue
-        }
-
-        let hasAdvancedParam = false
-
-        // ---- booleans that trigger advanced when true ----
-        if (getBool('quad', false)) hasAdvancedParam = true
-        if (getBool('force_symmetry', false)) hasAdvancedParam = true
-        if (getBool('flatten_bottom', false)) hasAdvancedParam = true
-        if (getBool('pivot_to_center_bottom', false)) hasAdvancedParam = true
-        if (getBool('with_animation', false)) hasAdvancedParam = true
-        if (getBool('pack_uv', false)) hasAdvancedParam = true
-        if (getBool('bake', false)) hasAdvancedParam = true
-        if (getBool('export_vertex_colors', false)) hasAdvancedParam = true
-        if (getBool('animate_in_place', false)) hasAdvancedParam = true
-
-        // ---- numeric params with special default sentinels ----
-        const faceLimit = getNumber('face_limit', -1)
-        if (faceLimit !== -1) hasAdvancedParam = true
-
-        const textureSize = getNumber('texture_size', 4096)
-        if (textureSize !== 4096) hasAdvancedParam = true
-
-        const flattenBottomThreshold = getNumber(
-          'flatten_bottom_threshold',
-          0.0
-        )
-        if (flattenBottomThreshold !== 0.0) hasAdvancedParam = true
-
-        const scaleFactor = getNumber('scale_factor', 1.0)
-        if (scaleFactor !== 1.0) hasAdvancedParam = true
-
-        // ---- string / combo params with non-default values ----
-        const textureFormatRaw = String(
-          getWidgetValue('texture_format') ?? 'JPEG'
-        ).toUpperCase()
-        if (textureFormatRaw !== 'JPEG') hasAdvancedParam = true
-
-        const partNamesRaw = String(getWidgetValue('part_names') ?? '')
-        if (partNamesRaw.trim().length > 0) hasAdvancedParam = true
-
-        const fbxPresetRaw = String(
-          getWidgetValue('fbx_preset') ?? 'blender'
-        ).toLowerCase()
-        if (fbxPresetRaw !== 'blender') hasAdvancedParam = true
-
-        const exportOrientationRaw = String(
-          getWidgetValue('export_orientation') ?? 'default'
-        ).toLowerCase()
-        if (exportOrientationRaw !== 'default') hasAdvancedParam = true
-
-        const credits = hasAdvancedParam ? 10 : 5
-        const dollars = credits * 0.01
-        return `$${dollars.toFixed(2)}/Run`
-      }
-    },
-    TripoRetargetNode: {
+    TripoConvertModelNode: {
       displayPrice: '$0.10/Run'
     },
-    TripoRefineNode: {
-      displayPrice: '$0.30/Run'
+    TripoRetargetRiggedModelNode: {
+      displayPrice: '$0.10/Run'
+    },
+    TripoMultiviewToModelNode: {
+      displayPrice: (node: LGraphNode): string => {
+        const quadWidget = node.widgets?.find(
+          (w) => w.name === 'quad'
+        ) as IComboWidget
+        const styleWidget = node.widgets?.find(
+          (w) => w.name === 'style'
+        ) as IComboWidget
+        const textureWidget = node.widgets?.find(
+          (w) => w.name === 'texture'
+        ) as IComboWidget
+        const textureQualityWidget = node.widgets?.find(
+          (w) => w.name === 'texture_quality'
+        ) as IComboWidget
+
+        if (!quadWidget || !styleWidget || !textureWidget)
+          return '$0.2-0.5/Run (varies with quad, style, texture & quality)'
+
+        const quad = String(quadWidget.value).toLowerCase() === 'true'
+        const style = String(styleWidget.value).toLowerCase()
+        const texture = String(textureWidget.value).toLowerCase() === 'true'
+        const textureQuality = String(
+          textureQualityWidget?.value || 'standard'
+        ).toLowerCase()
+
+        // Pricing logic based on CSV data for Multiview to Model (same as Image to Model)
+        if (style.includes('none')) {
+          if (!quad) {
+            if (!texture) return '$0.20/Run'
+            else return '$0.25/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.40/Run'
+              else return '$0.45/Run'
+            } else {
+              if (!texture) return '$0.30/Run'
+              else return '$0.35/Run'
+            }
+          }
+        } else {
+          // any style
+          if (!quad) {
+            if (!texture) return '$0.25/Run'
+            else return '$0.30/Run'
+          } else {
+            if (textureQuality.includes('detailed')) {
+              if (!texture) return '$0.45/Run'
+              else return '$0.50/Run'
+            } else {
+              if (!texture) return '$0.35/Run'
+              else return '$0.40/Run'
+            }
+          }
+        }
+      }
     },
     // Google/Gemini nodes
     GeminiNode: {
@@ -2047,8 +1931,6 @@ export const useNodePricing = () => {
       KlingDualCharacterVideoEffectNode: ['mode', 'model_name', 'duration'],
       KlingSingleImageVideoEffectNode: ['effect_scene'],
       KlingStartEndFrameNode: ['mode', 'model_name', 'duration'],
-      KlingTextToVideoWithAudio: ['duration', 'generate_audio'],
-      KlingImageToVideoWithAudio: ['duration', 'generate_audio'],
       KlingOmniProTextToVideoNode: ['duration'],
       KlingOmniProFirstLastFrameNode: ['duration'],
       KlingOmniProImageToVideoNode: ['duration'],
@@ -2064,7 +1946,6 @@ export const useNodePricing = () => {
       FluxProKontextProNode: [],
       FluxProKontextMaxNode: [],
       Flux2ProImageNode: ['width', 'height', 'images'],
-      Flux2MaxImageNode: ['width', 'height', 'images'],
       VeoVideoGenerationNode: ['duration_seconds'],
       Veo3VideoGenerationNode: ['model', 'generate_audio'],
       Veo3FirstLastFrameNode: ['model', 'generate_audio', 'duration'],
@@ -2100,51 +1981,8 @@ export const useNodePricing = () => {
       RunwayImageToVideoNodeGen4: ['duration'],
       RunwayFirstLastFrameNode: ['duration'],
       // Tripo nodes
-      TripoTextToModelNode: [
-        'model_version',
-        'quad',
-        'style',
-        'texture',
-        'pbr',
-        'texture_quality',
-        'geometry_quality'
-      ],
-      TripoImageToModelNode: [
-        'model_version',
-        'quad',
-        'style',
-        'texture',
-        'pbr',
-        'texture_quality',
-        'geometry_quality'
-      ],
-      TripoMultiviewToModelNode: [
-        'model_version',
-        'quad',
-        'texture',
-        'pbr',
-        'texture_quality',
-        'geometry_quality'
-      ],
-      TripoConversionNode: [
-        'quad',
-        'face_limit',
-        'texture_size',
-        'texture_format',
-        'force_symmetry',
-        'flatten_bottom',
-        'flatten_bottom_threshold',
-        'pivot_to_center_bottom',
-        'scale_factor',
-        'with_animation',
-        'pack_uv',
-        'bake',
-        'part_names',
-        'fbx_preset',
-        'export_vertex_colors',
-        'export_orientation',
-        'animate_in_place'
-      ],
+      TripoTextToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
+      TripoImageToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
       TripoTextureNode: ['texture_quality'],
       // Google/Gemini nodes
       GeminiNode: ['model'],

src/composables/node/usePriceBadge.ts

@@ -1,6 +1,7 @@
 import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphBadge } from '@/lib/litegraph/src/litegraph'
 
+import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 
@@ -9,6 +10,7 @@ componentIconSvg.src =
   "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='oklch(83.01%25 0.163 83.16)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15.536 11.293a1 1 0 0 0 0 1.414l2.376 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0zm-13.239 0a1 1 0 0 0 0 1.414l2.377 2.377a1 1 0 0 0 1.414 0l2.377-2.377a1 1 0 0 0 0-1.414L6.088 8.916a1 1 0 0 0-1.414 0zm6.619 6.619a1 1 0 0 0 0 1.415l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.415l-2.377-2.376a1 1 0 0 0-1.414 0zm0-13.238a1 1 0 0 0 0 1.414l2.377 2.376a1 1 0 0 0 1.414 0l2.377-2.376a1 1 0 0 0 0-1.414l-2.377-2.377a1 1 0 0 0-1.414 0z'/%3E%3C/svg%3E"
 
 export const usePriceBadge = () => {
+  const { flags } = useFeatureFlags()
   function updateSubgraphCredits(node: LGraphNode) {
     if (!node.isSubgraphNode()) return
     node.badges = node.badges.filter((b) => !isCreditsBadge(b))
@@ -38,26 +40,53 @@ export const usePriceBadge = () => {
 
   function isCreditsBadge(badge: LGraphBadge | (() => LGraphBadge)): boolean {
     const badgeInstance = typeof badge === 'function' ? badge() : badge
-    return badgeInstance.icon?.image === componentIconSvg
+    if (flags.subscriptionTiersEnabled) {
+      return badgeInstance.icon?.image === componentIconSvg
+    } else {
+      return badgeInstance.icon?.unicode === '\ue96b'
+    }
   }
 
   const colorPaletteStore = useColorPaletteStore()
   function getCreditsBadge(price: string): LGraphBadge {
     const isLightTheme = colorPaletteStore.completedActivePalette.light_theme
 
-    return new LGraphBadge({
-      text: price,
-      iconOptions: {
-        image: componentIconSvg,
-        size: 8
-      },
-      fgColor:
-        colorPaletteStore.completedActivePalette.colors.litegraph_base
-          .BADGE_FG_COLOR,
-      bgColor: isLightTheme
-        ? adjustColor('#8D6932', { lightness: 0.5 })
-        : '#8D6932'
-    })
+    if (flags.subscriptionTiersEnabled) {
+      return new LGraphBadge({
+        text: price,
+        iconOptions: {
+          image: componentIconSvg,
+          size: 8
+        },
+        fgColor:
+          colorPaletteStore.completedActivePalette.colors.litegraph_base
+            .BADGE_FG_COLOR,
+        bgColor: isLightTheme
+          ? adjustColor('#8D6932', { lightness: 0.5 })
+          : '#8D6932'
+      })
+    } else {
+      return new LGraphBadge({
+        text: price,
+        iconOptions: {
+          unicode: '\ue96b',
+          fontFamily: 'PrimeIcons',
+          color: isLightTheme
+            ? adjustColor('#FABC25', { lightness: 0.5 })
+            : '#FABC25',
+          bgColor: isLightTheme
+            ? adjustColor('#654020', { lightness: 0.5 })
+            : '#654020',
+          fontSize: 8
+        },
+        fgColor:
+          colorPaletteStore.completedActivePalette.colors.litegraph_base
+            .BADGE_FG_COLOR,
+        bgColor: isLightTheme
+          ? adjustColor('#8D6932', { lightness: 0.5 })
+          : '#8D6932'
+      })
+    }
   }
   return {
     getCreditsBadge,

src/composables/useExternalLink.ts

@@ -92,14 +92,8 @@ export function useExternalLink() {
     comfyOrg: 'https://www.comfy.org/'
   }
 
-  /** Common doc paths for use with buildDocsUrl */
-  const docsPaths = {
-    partnerNodesPricing: '/tutorials/partner-nodes/pricing'
-  }
-
   return {
     buildDocsUrl,
-    staticUrls,
-    docsPaths
+    staticUrls
   }
 }

src/composables/useFeatureFlags.ts

@@ -13,8 +13,8 @@ export enum ServerFeatureFlag {
   MODEL_UPLOAD_BUTTON_ENABLED = 'model_upload_button_enabled',
   ASSET_UPDATE_OPTIONS_ENABLED = 'asset_update_options_enabled',
   PRIVATE_MODELS_ENABLED = 'private_models_enabled',
-  ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
-  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_enabled'
+  SUBSCRIPTION_TIERS_ENABLED = 'subscription_tiers_enabled',
+  ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled'
 }
 
 /**
@@ -58,21 +58,21 @@ export function useFeatureFlags() {
         api.getServerFeature(ServerFeatureFlag.PRIVATE_MODELS_ENABLED, false)
       )
     },
+    get subscriptionTiersEnabled() {
+      // Check remote config first (from /api/features), fall back to websocket feature flags
+      return (
+        remoteConfig.value.subscription_tiers_enabled ??
+        api.getServerFeature(
+          ServerFeatureFlag.SUBSCRIPTION_TIERS_ENABLED,
+          true // Default to true (new design)
+        )
+      )
+    },
     get onboardingSurveyEnabled() {
       return (
         remoteConfig.value.onboarding_survey_enabled ??
         api.getServerFeature(ServerFeatureFlag.ONBOARDING_SURVEY_ENABLED, true)
       )
-    },
-    get huggingfaceModelImportEnabled() {
-      // Check remote config first (from /api/features), fall back to websocket feature flags
-      return (
-        remoteConfig.value.huggingface_model_import_enabled ??
-        api.getServerFeature(
-          ServerFeatureFlag.HUGGINGFACE_MODEL_IMPORT_ENABLED,
-          false
-        )
-      )
     }
   })
 

src/config/staging.ts

@@ -1,20 +0,0 @@
-import { computed } from 'vue'
-
-import { isCloud } from '@/platform/distribution/types'
-import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
-
-const BUILD_TIME_IS_STAGING = !__USE_PROD_CONFIG__
-
-/**
- * Returns whether the current environment is staging.
- * - Cloud builds use runtime configuration (firebase_config.projectId containing '-dev')
- * - OSS / localhost builds fall back to the build-time config determined by __USE_PROD_CONFIG__
- */
-export const isStaging = computed(() => {
-  if (!isCloud) {
-    return BUILD_TIME_IS_STAGING
-  }
-
-  const projectId = remoteConfig.value.firebase_config?.projectId
-  return projectId?.includes('-dev') ?? BUILD_TIME_IS_STAGING
-})

src/core/graph/state/graphStateStore.test.ts

@@ -0,0 +1,130 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { useGraphStateStore } from './graphStateStore'
+
+describe('graphStateStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('execute SetNodeError command', () => {
+    it('sets hasError on new node', () => {
+      const store = useGraphStateStore()
+
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: '123',
+        hasError: true
+      })
+
+      expect(store.getNodeState('123')?.hasError).toBe(true)
+    })
+
+    it('updates hasError on existing node', () => {
+      const store = useGraphStateStore()
+
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: '123',
+        hasError: true
+      })
+
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: '123',
+        hasError: false
+      })
+
+      expect(store.getNodeState('123')?.hasError).toBe(false)
+    })
+
+    it('handles subgraph node locator IDs', () => {
+      const store = useGraphStateStore()
+
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: 'uuid-123:456',
+        hasError: true
+      })
+
+      expect(store.getNodeState('uuid-123:456')?.hasError).toBe(true)
+    })
+  })
+
+  describe('execute ClearAllErrors command', () => {
+    it('clears all error flags', () => {
+      const store = useGraphStateStore()
+
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: '1',
+        hasError: true
+      })
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: '2',
+        hasError: true
+      })
+
+      store.execute({ type: 'ClearAllErrors', version: 1 })
+
+      expect(store.getNodeState('1')?.hasError).toBe(false)
+      expect(store.getNodeState('2')?.hasError).toBe(false)
+    })
+  })
+
+  describe('getNodesWithErrors', () => {
+    it('returns only nodes with errors', () => {
+      const store = useGraphStateStore()
+
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: '1',
+        hasError: true
+      })
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: '2',
+        hasError: false
+      })
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: '3',
+        hasError: true
+      })
+
+      const nodesWithErrors = store.getNodesWithErrors()
+
+      expect(nodesWithErrors).toHaveLength(2)
+      expect(nodesWithErrors).toContain('1')
+      expect(nodesWithErrors).toContain('3')
+      expect(nodesWithErrors).not.toContain('2')
+    })
+  })
+
+  describe('stateRef reactivity', () => {
+    it('increments revision on command execution', () => {
+      const store = useGraphStateStore()
+      const initialRevision = store.stateRef
+
+      store.execute({
+        type: 'SetNodeError',
+        version: 1,
+        nodeId: '1',
+        hasError: true
+      })
+
+      expect(store.stateRef).not.toBe(initialRevision)
+    })
+  })
+})

src/core/graph/state/graphStateStore.ts

@@ -0,0 +1,79 @@
+import { defineStore } from 'pinia'
+import { customRef } from 'vue'
+
+import type { NodeLocatorId } from '@/types/nodeIdentification'
+
+interface NodeState {
+  hasError: boolean
+}
+
+interface SetNodeErrorCommand {
+  type: 'SetNodeError'
+  version: 1
+  nodeId: NodeLocatorId
+  hasError: boolean
+}
+
+interface ClearAllErrorsCommand {
+  type: 'ClearAllErrors'
+  version: 1
+}
+
+type GraphStateCommand = SetNodeErrorCommand | ClearAllErrorsCommand
+
+export const useGraphStateStore = defineStore('graphState', () => {
+  const nodes = new Map<NodeLocatorId, NodeState>()
+
+  let revision = 0
+  const stateRef = customRef<number>((track, trigger) => ({
+    get() {
+      track()
+      return revision
+    },
+    set() {
+      revision++
+      trigger()
+    }
+  }))
+
+  const execute = (command: GraphStateCommand): void => {
+    switch (command.type) {
+      case 'SetNodeError': {
+        const existing = nodes.get(command.nodeId)
+        if (existing) {
+          existing.hasError = command.hasError
+        } else {
+          nodes.set(command.nodeId, { hasError: command.hasError })
+        }
+        break
+      }
+      case 'ClearAllErrors': {
+        for (const state of nodes.values()) {
+          state.hasError = false
+        }
+        break
+      }
+    }
+    stateRef.value = revision + 1
+  }
+
+  const getNodeState = (nodeId: NodeLocatorId): NodeState | undefined => {
+    return nodes.get(nodeId)
+  }
+
+  const getNodesWithErrors = (): NodeLocatorId[] => {
+    const result: NodeLocatorId[] = []
+    for (const [nodeId, state] of nodes) {
+      if (state.hasError) result.push(nodeId)
+    }
+    return result
+  }
+
+  return {
+    stateRef,
+    nodes,
+    execute,
+    getNodeState,
+    getNodesWithErrors
+  }
+})

src/core/graph/state/useGraphErrorState.ts

@@ -0,0 +1,45 @@
+import { watch } from 'vue'
+
+import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
+import {
+  forEachNode,
+  forEachSubgraphNode,
+  getNodeByLocatorId
+} from '@/utils/graphTraversalUtil'
+
+import { useGraphStateStore } from './graphStateStore'
+
+const propagateErrorToParents = (node: LGraphNode): void => {
+  const subgraph = node.graph
+  if (!subgraph || subgraph.isRootGraph) return
+
+  forEachSubgraphNode(app.rootGraph, subgraph.id, (subgraphNode) => {
+    subgraphNode.has_errors = true
+    propagateErrorToParents(subgraphNode)
+  })
+}
+
+export const useGraphErrorState = () => {
+  const store = useGraphStateStore()
+
+  watch(
+    () => store.stateRef,
+    () => {
+      if (!app.rootGraph) return
+
+      forEachNode(app.rootGraph, (node) => {
+        node.has_errors = false
+      })
+
+      for (const locatorId of store.getNodesWithErrors()) {
+        const node = getNodeByLocatorId(app.rootGraph, locatorId)
+        if (!node) continue
+
+        node.has_errors = true
+        propagateErrorToParents(node)
+      }
+    },
+    { immediate: true }
+  )
+}

src/core/graph/widgets/dynamicWidgets.ts

@@ -1,6 +1,5 @@
-import { remove } from 'es-toolkit'
-
 import { useChainCallback } from '@/composables/functional/useChainCallback'
+import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
 import type {
   ISlotType,
   INodeInputSlot,
@@ -24,41 +23,22 @@ import type { ComfyApp } from '@/scripts/app'
 const INLINE_INPUTS = false
 
 type MatchTypeNode = LGraphNode &
-  Pick<Required<LGraphNode>, 'onConnectionsChange'> & {
-    comfyDynamic: { matchType: Record<string, Record<string, string>> }
-  }
-type AutogrowNode = LGraphNode &
-  Pick<Required<LGraphNode>, 'onConnectionsChange' | 'widgets'> & {
-    comfyDynamic: {
-      autogrow: Record<
-        string,
-        {
-          min: number
-          max: number
-          inputSpecs: InputSpecV2[]
-          prefix?: string
-          names?: string[]
-        }
-      >
-    }
-  }
+  Pick<Required<LGraphNode>, 'comfyMatchType' | 'onConnectionsChange'>
 
 function ensureWidgetForInput(node: LGraphNode, input: INodeInputSlot) {
+  if (input.widget?.name) return
   node.widgets ??= []
-  const { widget } = input
-  if (widget && node.widgets.some((w) => w.name === widget.name)) return
   node.widgets.push({
+    name: input.name,
+    y: 0,
+    type: 'shim',
+    options: {},
     draw(ctx, _n, _w, y) {
       ctx.save()
       ctx.fillStyle = LiteGraph.NODE_TEXT_COLOR
       ctx.fillText(input.label ?? input.name, 20, y + 15)
       ctx.restore()
-    },
-    name: input.name,
-    options: {},
-    serialize: false,
-    type: 'shim',
-    y: 0
+    }
   })
   input.alwaysVisible = true
   input.widget = { name: input.name }
@@ -86,47 +66,72 @@ function dynamicComboWidget(
     appArg,
     widgetName
   )
-  function isInGroup(e: { name: string }): boolean {
-    return e.name.startsWith(inputName + '.')
-  }
+  let currentDynamicNames: string[] = []
   const updateWidgets = (value?: string) => {
     if (!node.widgets) throw new Error('Not Reachable')
     const newSpec = value ? options[value] : undefined
-
-    const removedInputs = remove(node.inputs, isInGroup)
-    remove(node.widgets, isInGroup)
-
-    if (!newSpec) return
+    const inputsToRemove: Record<string, INodeInputSlot> = {}
+    for (const name of currentDynamicNames) {
+      const input = node.inputs.find((input) => input.name === name)
+      if (input) inputsToRemove[input.name] = input
+      const widgetIndex = node.widgets.findIndex(
+        (widget) => widget.name === name
+      )
+      if (widgetIndex === -1) continue
+      node.widgets[widgetIndex].value = undefined
+      node.widgets.splice(widgetIndex, 1)
+    }
+    currentDynamicNames = []
+    if (!newSpec) {
+      for (const input of Object.values(inputsToRemove)) {
+        const inputIndex = node.inputs.findIndex((inp) => inp === input)
+        if (inputIndex === -1) continue
+        node.removeInput(inputIndex)
+      }
+      return
+    }
 
     const insertionPoint = node.widgets.findIndex((w) => w === widget) + 1
     const startingLength = node.widgets.length
-    const startingInputLength = node.inputs.length
-
+    const initialInputIndex =
+      node.inputs.findIndex((i) => i.name === widget.name) + 1
+    let startingInputLength = node.inputs.length
     if (insertionPoint === 0)
       throw new Error("Dynamic widget doesn't exist on node")
-    const inputTypes: (Record<string, InputSpec> | undefined)[] = [
-      newSpec.required,
-      newSpec.optional
+    const inputTypes: [Record<string, InputSpec> | undefined, boolean][] = [
+      [newSpec.required, false],
+      [newSpec.optional, true]
     ]
-    inputTypes.forEach((inputType, idx) => {
+    for (const [inputType, isOptional] of inputTypes)
       for (const key in inputType ?? {}) {
         const name = `${widget.name}.${key}`
         const specToAdd = transformInputSpecV1ToV2(inputType![key], {
           name,
-          isOptional: idx !== 0
+          isOptional
         })
         specToAdd.display_name = key
         addNodeInput(node, specToAdd)
-        const newInputs = node.inputs
-          .slice(startingInputLength)
-          .filter((inp) => inp.name.startsWith(name))
-        for (const newInput of newInputs) {
-          if (INLINE_INPUTS && !newInput.widget)
-            ensureWidgetForInput(node, newInput)
-        }
+        currentDynamicNames.push(name)
+        if (INLINE_INPUTS) ensureWidgetForInput(node, node.inputs.at(-1)!)
+        if (
+          !inputsToRemove[name] ||
+          Array.isArray(inputType![key][0]) ||
+          !LiteGraph.isValidConnection(
+            inputsToRemove[name].type,
+            inputType![key][0]
+          )
+        )
+          continue
+        node.inputs.at(-1)!.link = inputsToRemove[name].link
+        inputsToRemove[name].link = null
       }
-    })
 
+    for (const input of Object.values(inputsToRemove)) {
+      const inputIndex = node.inputs.findIndex((inp) => inp === input)
+      if (inputIndex === -1) continue
+      if (inputIndex < initialInputIndex) startingInputLength--
+      node.removeInput(inputIndex)
+    }
     const inputInsertionPoint =
       node.inputs.findIndex((i) => i.name === widget.name) + 1
     const addedWidgets = node.widgets.splice(startingLength)
@@ -152,28 +157,6 @@ function dynamicComboWidget(
     )
     //assume existing inputs are in correct order
     spliceInputs(node, inputInsertionPoint, 0, ...addedInputs)
-
-    for (const input of removedInputs) {
-      const inputIndex = node.inputs.findIndex((inp) => inp.name === input.name)
-      if (inputIndex === -1) {
-        node.inputs.push(input)
-        node.removeInput(node.inputs.length - 1)
-      } else {
-        node.inputs[inputIndex].link = input.link
-        if (!input.link) continue
-        const link = node.graph?.links?.[input.link]
-        if (!link) continue
-        link.target_slot = inputIndex
-        node.onConnectionsChange?.(
-          LiteGraph.INPUT,
-          inputIndex,
-          true,
-          link,
-          node.inputs[inputIndex]
-        )
-      }
-    }
-
     node.size[1] = node.computeSize([...node.size])[1]
     if (!node.graph) return
     node._setConcreteSlots()
@@ -260,9 +243,8 @@ function changeOutputType(
 }
 
 function withComfyMatchType(node: LGraphNode): asserts node is MatchTypeNode {
-  if (node.comfyDynamic?.matchType) return
-  node.comfyDynamic ??= {}
-  node.comfyDynamic.matchType = {}
+  if (node.comfyMatchType) return
+  node.comfyMatchType = {}
 
   const outputGroups = node.constructor.nodeData?.output_matchtypes
   node.onConnectionsChange = useChainCallback(
@@ -276,9 +258,9 @@ function withComfyMatchType(node: LGraphNode): asserts node is MatchTypeNode {
     ) {
       const input = this.inputs[slot]
       if (contype !== LiteGraph.INPUT || !this.graph || !input) return
-      const [matchKey, matchGroup] = Object.entries(
-        this.comfyDynamic.matchType
-      ).find(([, group]) => input.name in group) ?? ['', undefined]
+      const [matchKey, matchGroup] = Object.entries(this.comfyMatchType).find(
+        ([, group]) => input.name in group
+      ) ?? ['', undefined]
       if (!matchGroup) return
       if (iscon && linf) {
         const { output, subgraphInput } = linf.resolve(this.graph)
@@ -335,8 +317,8 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   const typedSpec = { ...inputSpec, type: allowed_types }
   addNodeInput(node, typedSpec)
   withComfyMatchType(node)
-  node.comfyDynamic.matchType[template_id] ??= {}
-  node.comfyDynamic.matchType[template_id][name] = allowed_types
+  node.comfyMatchType[template_id] ??= {}
+  node.comfyMatchType[template_id][name] = allowed_types
 
   //TODO: instead apply on output add?
   //ensure outputs get updated
@@ -347,215 +329,160 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   )
 }
 
-function autogrowOrdinalToName(
-  ordinal: number,
-  key: string,
-  groupName: string,
-  node: AutogrowNode
-) {
-  const {
-    names,
-    prefix = '',
-    inputSpecs
-  } = node.comfyDynamic.autogrow[groupName]
-  const baseName = names
-    ? names[ordinal]
-    : (inputSpecs.length == 1 ? prefix : key) + ordinal
-  return { name: `${groupName}.${baseName}`, display_name: baseName }
-}
-
-function addAutogrowGroup(
-  ordinal: number,
-  groupName: string,
-  node: AutogrowNode
-) {
+function applyAutogrow(node: LGraphNode, untypedInputSpec: InputSpecV2) {
   const { addNodeInput } = useLitegraphService()
-  const { max, min, inputSpecs } = node.comfyDynamic.autogrow[groupName]
-  if (ordinal >= max) return
 
-  const namedSpecs = inputSpecs.map((input) => ({
-    ...input,
-    isOptional: ordinal >= (min ?? 0) || input.isOptional,
-    ...autogrowOrdinalToName(ordinal, input.name, groupName, node)
-  }))
+  const parseResult = zAutogrowOptions.safeParse(untypedInputSpec)
+  if (!parseResult.success) throw new Error('invalid Autogrow spec')
+  const inputSpec = parseResult.data
 
-  const newInputs = namedSpecs
-    .filter(
-      (namedSpec) => !node.inputs.some((inp) => inp.name === namedSpec.name)
+  const { input, min, names, prefix, max } = inputSpec.template
+  const inputTypes: [Record<string, InputSpec> | undefined, boolean][] = [
+    [input.required, false],
+    [input.optional, true]
+  ]
+  const inputsV2 = inputTypes.flatMap(([inputType, isOptional]) =>
+    Object.entries(inputType ?? {}).map(([name, v]) =>
+      transformInputSpecV1ToV2(v, { name, isOptional })
     )
-    .map((namedSpec) => {
-      addNodeInput(node, namedSpec)
-      const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
-      if (inputSpecs.length !== 1 || (INLINE_INPUTS && !input.widget))
-        ensureWidgetForInput(node, input)
-      return input
-    })
-
-  const lastIndex = node.inputs.findLastIndex((inp) =>
-    inp.name.startsWith(groupName)
   )
-  const insertionIndex = lastIndex === -1 ? node.inputs.length : lastIndex + 1
-  spliceInputs(node, insertionIndex, 0, ...newInputs)
-  app.canvas?.setDirty(true, true)
-}
 
-const ORDINAL_REGEX = /\d+$/
-function resolveAutogrowOrdinal(
-  inputName: string,
-  groupName: string,
-  node: AutogrowNode
-): number | undefined {
-  //TODO preslice groupname?
-  const name = inputName.slice(groupName.length + 1)
-  const { names } = node.comfyDynamic.autogrow[groupName]
-  if (names) {
-    const ordinal = names.findIndex((s) => s === name)
-    return ordinal === -1 ? undefined : ordinal
+  function nameToInputIndex(name: string) {
+    const index = node.inputs.findIndex((input) => input.name === name)
+    if (index === -1) throw new Error('Failed to find input')
+    return index
   }
-  const match = name.match(ORDINAL_REGEX)
-  if (!match) return undefined
-  const ordinal = parseInt(match[0])
-  return ordinal !== ordinal ? undefined : ordinal
-}
-function autogrowInputConnected(index: number, node: AutogrowNode) {
-  const input = node.inputs[index]
-  const groupName = input.name.slice(0, input.name.lastIndexOf('.'))
-  const lastInput = node.inputs.findLast((inp) =>
-    inp.name.startsWith(groupName)
-  )
-  const ordinal = resolveAutogrowOrdinal(input.name, groupName, node)
-  if (
-    !lastInput ||
-    ordinal == undefined ||
-    ordinal !== resolveAutogrowOrdinal(lastInput.name, groupName, node)
-  )
-    return
-  addAutogrowGroup(ordinal + 1, groupName, node)
-}
-function autogrowInputDisconnected(index: number, node: AutogrowNode) {
-  const input = node.inputs[index]
-  if (!input) return
-  const groupName = input.name.slice(0, input.name.lastIndexOf('.'))
-  const { min = 1, inputSpecs } = node.comfyDynamic.autogrow[groupName]
-  const ordinal = resolveAutogrowOrdinal(input.name, groupName, node)
-  if (ordinal == undefined || ordinal + 1 < min) return
-
-  //resolve all inputs in group
-  const groupInputs = node.inputs.filter(
-    (inp) =>
-      inp.name.startsWith(groupName + '.') &&
-      inp.name.lastIndexOf('.') === groupName.length
-  )
-  const stride = inputSpecs.length
-  if (groupInputs.length % stride !== 0) {
-    console.error('Failed to group multi-input autogrow inputs')
-    return
+  function nameToInput(name: string) {
+    return node.inputs[nameToInputIndex(name)]
   }
-  app.canvas?.setDirty(true, true)
-  //groupBy would be nice here, but may not be supported
-  for (let column = 0; column < stride; column++) {
-    for (
-      let bubbleOrdinal = ordinal * stride + column;
-      bubbleOrdinal + stride < groupInputs.length;
-      bubbleOrdinal += stride
-    ) {
-      const curInput = groupInputs[bubbleOrdinal]
-      curInput.link = groupInputs[bubbleOrdinal + stride].link
-      if (!curInput.link) continue
-      const link = node.graph?.links[curInput.link]
-      if (!link) continue
-      const curIndex = node.inputs.findIndex((inp) => inp === curInput)
-      if (curIndex === -1) throw new Error('missing input')
-      link.target_slot = curIndex
+
+  //In the distance, someone shouting YAGNI
+  const trackedInputs: string[][] = []
+  function addInputGroup(insertionIndex: number) {
+    const ordinal = trackedInputs.length
+    const inputGroup = inputsV2.map((input) => ({
+      ...input,
+      name: names
+        ? names[ordinal]
+        : ((inputsV2.length == 1 ? prefix : input.name) ?? '') + ordinal,
+      isOptional: ordinal >= (min ?? 0) || input.isOptional
+    }))
+    const newInputs = inputGroup
+      .filter(
+        (namedSpec) => !node.inputs.some((inp) => inp.name === namedSpec.name)
+      )
+      .map((namedSpec) => {
+        addNodeInput(node, namedSpec)
+        const input = spliceInputs(node, node.inputs.length - 1, 1)[0]
+        if (inputsV2.length !== 1) ensureWidgetForInput(node, input)
+        return input
+      })
+    spliceInputs(node, insertionIndex, 0, ...newInputs)
+    trackedInputs.push(inputGroup.map((inp) => inp.name))
+    app.canvas?.setDirty(true, true)
+  }
+  for (let i = 0; i < (min || 1); i++) addInputGroup(node.inputs.length)
+  function removeInputGroup(inputName: string) {
+    const groupIndex = trackedInputs.findIndex((ig) =>
+      ig.some((inpName) => inpName === inputName)
+    )
+    if (groupIndex == -1) throw new Error('Failed to find group')
+    const group = trackedInputs[groupIndex]
+    for (const nameToRemove of group) {
+      const inputIndex = nameToInputIndex(nameToRemove)
+      const input = spliceInputs(node, inputIndex, 1)[0]
+      if (!input.widget?.name) continue
+      const widget = node.widgets?.find((w) => w.name === input.widget!.name)
+      if (!widget) return
+      widget.value = undefined
+      node.removeWidget(widget)
     }
-    const lastInput = groupInputs.at(column - stride)
-    if (!lastInput) continue
-    lastInput.link = null
+    trackedInputs.splice(groupIndex, 1)
+    node.size[1] = node.computeSize([...node.size])[1]
+    app.canvas?.setDirty(true, true)
   }
-  const removalChecks = groupInputs.slice((min - 1) * stride)
-  let i
-  for (i = removalChecks.length - stride; i >= 0; i -= stride) {
-    if (removalChecks.slice(i, i + stride).some((inp) => inp.link)) break
-  }
-  const toRemove = removalChecks.slice(i + stride * 2)
-  remove(node.inputs, (inp) => toRemove.includes(inp))
-  for (const input of toRemove) {
-    const widgetName = input?.widget?.name
-    if (!widgetName) continue
-    remove(node.widgets, (w) => w.name === widgetName)
-  }
-  node.size[1] = node.computeSize([...node.size])[1]
-}
 
-function withComfyAutogrow(node: LGraphNode): asserts node is AutogrowNode {
-  if (node.comfyDynamic?.autogrow) return
-  node.comfyDynamic ??= {}
-  node.comfyDynamic.autogrow = {}
+  function inputConnected(index: number) {
+    const input = node.inputs[index]
+    const groupIndex = trackedInputs.findIndex((ig) =>
+      ig.some((inputName) => inputName === input.name)
+    )
+    if (groupIndex == -1) throw new Error('Failed to find group')
+    if (
+      groupIndex + 1 === trackedInputs.length &&
+      trackedInputs.length < (max ?? names?.length ?? 100)
+    ) {
+      const lastInput = trackedInputs[groupIndex].at(-1)
+      if (!lastInput) return
+      const insertionIndex = nameToInputIndex(lastInput) + 1
+      if (insertionIndex === 0) throw new Error('Failed to find Input')
+      addInputGroup(insertionIndex)
+    }
+  }
+  function inputDisconnected(index: number) {
+    const input = node.inputs[index]
+    if (trackedInputs.length === 1) return
+    const groupIndex = trackedInputs.findIndex((ig) =>
+      ig.some((inputName) => inputName === input.name)
+    )
+    if (groupIndex == -1) throw new Error('Failed to find group')
+    if (
+      trackedInputs[groupIndex].some(
+        (inputName) => nameToInput(inputName).link != null
+      )
+    )
+      return
+    if (groupIndex + 1 < (min ?? 0)) return
+    //For each group from here to last group, bubble swap links
+    for (let column = 0; column < trackedInputs[0].length; column++) {
+      let prevInput = nameToInputIndex(trackedInputs[groupIndex][column])
+      for (let i = groupIndex + 1; i < trackedInputs.length; i++) {
+        const curInput = nameToInputIndex(trackedInputs[i][column])
+        const linkId = node.inputs[curInput].link
+        node.inputs[prevInput].link = linkId
+        const link = linkId && node.graph?.links?.[linkId]
+        if (link) link.target_slot = prevInput
+        prevInput = curInput
+      }
+      node.inputs[prevInput].link = null
+    }
+    if (
+      trackedInputs.at(-2) &&
+      !trackedInputs.at(-2)?.some((name) => !!nameToInput(name).link)
+    )
+      removeInputGroup(trackedInputs.at(-1)![0])
+  }
 
   let pendingConnection: number | undefined
   let swappingConnection = false
-
   const originalOnConnectInput = node.onConnectInput
   node.onConnectInput = function (slot: number, ...args) {
     pendingConnection = slot
     requestAnimationFrame(() => (pendingConnection = undefined))
     return originalOnConnectInput?.apply(this, [slot, ...args]) ?? true
   }
-
   node.onConnectionsChange = useChainCallback(
     node.onConnectionsChange,
-    function (
-      this: AutogrowNode,
-      contype: ISlotType,
-      slot: number,
+    (
+      type: ISlotType,
+      index: number,
       iscon: boolean,
       linf: LLink | null | undefined
-    ) {
-      const input = this.inputs[slot]
-      if (contype !== LiteGraph.INPUT || !input) return
-      //Return if input isn't known autogrow
-      const key = input.name.slice(0, input.name.lastIndexOf('.'))
-      const autogrowGroup = this.comfyDynamic.autogrow[key]
-      if (!autogrowGroup) return
-      if (app.configuringGraph && input.widget)
-        ensureWidgetForInput(node, input)
-      if (iscon && linf) {
+    ) => {
+      if (type !== NodeSlotType.INPUT) return
+      const inputName = node.inputs[index].name
+      if (!trackedInputs.flat().some((name) => name === inputName)) return
+      if (iscon) {
         if (swappingConnection || !linf) return
-        autogrowInputConnected(slot, this)
+        inputConnected(index)
       } else {
-        if (pendingConnection === slot) {
+        if (pendingConnection === index) {
           swappingConnection = true
           requestAnimationFrame(() => (swappingConnection = false))
           return
         }
-        requestAnimationFrame(() => autogrowInputDisconnected(slot, this))
+        requestAnimationFrame(() => inputDisconnected(index))
       }
     }
   )
 }
-function applyAutogrow(node: LGraphNode, inputSpecV2: InputSpecV2) {
-  withComfyAutogrow(node)
-
-  const parseResult = zAutogrowOptions.safeParse(inputSpecV2)
-  if (!parseResult.success) throw new Error('invalid Autogrow spec')
-  const inputSpec = parseResult.data
-  const { input, min = 1, names, prefix, max = 100 } = inputSpec.template
-
-  const inputTypes: (Record<string, InputSpec> | undefined)[] = [
-    input.required,
-    input.optional
-  ]
-  const inputsV2 = inputTypes.flatMap((inputType, index) =>
-    Object.entries(inputType ?? {}).map(([name, v]) =>
-      transformInputSpecV1ToV2(v, { name, isOptional: index === 1 })
-    )
-  )
-  node.comfyDynamic.autogrow[inputSpecV2.name] = {
-    names,
-    min,
-    max: names?.length ?? max,
-    prefix,
-    inputSpecs: inputsV2
-  }
-  for (let i = 0; i < min; i++) addAutogrowGroup(i, inputSpecV2.name, node)
-}

src/extensions/core/widgetInputs.ts

@@ -257,8 +257,6 @@ export class PrimitiveNode extends LGraphNode {
         undefined,
         inputData
       )
-      if (this.widgets?.[1]) widget.linkedWidgets = [this.widgets[1]]
-
       let filter = this.widgets_values?.[2]
       if (filter && this.widgets && this.widgets.length === 3) {
         this.widgets[2].value = filter

src/lib/litegraph/src/LGraphNode.ts

@@ -416,7 +416,7 @@ export class LGraphNode
   selected?: boolean
   showAdvanced?: boolean
 
-  declare comfyDynamic?: Record<string, object>
+  declare comfyMatchType?: Record<string, Record<string, string>>
   declare comfyClass?: string
   declare isVirtualNode?: boolean
   applyToGraph?(extraLinks?: LLink[]): void
@@ -2000,7 +2000,7 @@ export class LGraphNode
    * @param out `x, y, width, height` are written to this array.
    * @param ctx The canvas context to use for measuring text.
    */
-  measure(out: Rect, ctx?: CanvasRenderingContext2D): void {
+  measure(out: Rect, ctx: CanvasRenderingContext2D): void {
     const titleMode = this.title_mode
     const renderTitle =
       titleMode != TitleMode.TRANSPARENT_TITLE &&
@@ -2013,13 +2013,11 @@ export class LGraphNode
       out[2] = this.size[0]
       out[3] = this.size[1] + titleHeight
     } else {
-      if (ctx) ctx.font = this.innerFontStyle
+      ctx.font = this.innerFontStyle
       this._collapsed_width = Math.min(
         this.size[0],
-        ctx
-          ? ctx.measureText(this.getTitle() ?? '').width +
-              LiteGraph.NODE_TITLE_HEIGHT * 2
-          : 0
+        ctx.measureText(this.getTitle() ?? '').width +
+          LiteGraph.NODE_TITLE_HEIGHT * 2
       )
       out[2] = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH
       out[3] = LiteGraph.NODE_TITLE_HEIGHT
@@ -2049,7 +2047,7 @@ export class LGraphNode
    * Calculates the render area of this node, populating both {@link boundingRect} and {@link renderArea}.
    * Called automatically at the start of every frame.
    */
-  updateArea(ctx?: CanvasRenderingContext2D): void {
+  updateArea(ctx: CanvasRenderingContext2D): void {
     const bounds = this.#boundingRect
     this.measure(bounds, ctx)
     this.onBounding?.(bounds)

src/locales/en/main.json

@@ -1895,7 +1895,7 @@
     "comfyCloudLogo": "Comfy Cloud Logo",
     "beta": "BETA",
     "perMonth": "/ month",
-    "usdPerMonth": "USD / mo",
+    "usdPerMonth": "USD / month",
     "renewsDate": "Renews {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
@@ -1910,7 +1910,6 @@
     "prepaidDescription": "Pre-paid credits",
     "prepaidCreditsInfo": "Pre-paid credits expire after 1 year from purchase date.",
     "creditsRemainingThisMonth": "Credits remaining this month",
-    "creditsRemainingThisYear": "Credits remaining this year",
     "creditsYouveAdded": "Credits you've added",
     "monthlyCreditsInfo": "These credits refresh monthly and don't roll over",
     "viewMoreDetailsPlans": "View more details about plans & pricing",
@@ -1918,30 +1917,67 @@
     "yourPlanIncludes": "Your plan includes:",
     "viewMoreDetails": "View more details",
     "learnMore": "Learn more",
-    "billedMonthly": "Billed monthly",
-    "billedYearly": "{total} Billed yearly",
-    "monthly": "Monthly",
-    "yearly": "Yearly",
-    "tierNameYearly": "{name} Yearly",
     "messageSupport": "Message support",
     "invoiceHistory": "Invoice history",
     "benefits": {
       "benefit1": "$10 in monthly credits for Partner Nodes — top up when needed",
       "benefit2": "Up to 30 min runtime per job"
     },
-    "yearlyDiscount": "20% DISCOUNT",
     "tiers": {
       "founder": {
-        "name": "Founder's Edition"
+        "name": "Founder's Edition",
+        "price": "20.00",
+        "benefits": {
+          "monthlyCredits": "5,460",
+          "monthlyCreditsLabel": "monthly credits",
+          "maxDuration": "30 min",
+          "maxDurationLabel": "max duration of each workflow run",
+          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
+          "addCreditsLabel": "Add more credits whenever",
+          "customLoRAsLabel": "Import your own LoRAs"
+        }
       },
       "standard": {
-        "name": "Standard"
+        "name": "Standard",
+        "price": "20.00",
+        "benefits": {
+          "monthlyCredits": "4,200",
+          "monthlyCreditsLabel": "monthly credits",
+          "maxDuration": "30 min",
+          "maxDurationLabel": "max duration of each workflow run",
+          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
+          "addCreditsLabel": "Add more credits whenever",
+          "customLoRAsLabel": "Import your own LoRAs",
+          "videoEstimate": "120"
+        }
       },
       "creator": {
-        "name": "Creator"
+        "name": "Creator",
+        "price": "35.00",
+        "benefits": {
+          "monthlyCredits": "7,400",
+          "monthlyCreditsLabel": "monthly credits",
+          "maxDuration": "30 min",
+          "maxDurationLabel": "max duration of each workflow run",
+          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
+          "addCreditsLabel": "Add more credits whenever",
+          "customLoRAsLabel": "Import your own LoRAs",
+          "videoEstimate": "288"
+        }
       },
       "pro": {
-        "name": "Pro"
+        "name": "Pro",
+        "price": "100.00",
+        "benefits": {
+          "monthlyCredits": "21,100",
+          "monthlyCreditsLabel": "monthly credits",
+          "maxDuration": "1 hr",
+          "maxDurationLabel": "max duration of each workflow run",
+          "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
+          "addCreditsLabel": "Add more credits whenever",
+          "customLoRAsLabel": "Import your own LoRAs",
+          "videoEstimate": "815"
+        }
       }
     },
     "required": {
@@ -1962,37 +1998,36 @@
     "description": "Choose the best plan for you",
     "haveQuestions": "Have questions or wondering about enterprise?",
     "contactUs": "Contact us",
-    "viewEnterprise": "View enterprise",
+    "viewEnterprise": "view enterprise",
     "partnerNodesCredits": "Partner nodes pricing",
-    "plansAndPricing": "Plans & pricing",
-    "managePlan": "Manage plan",
-    "upgrade": "UPGRADE",
     "mostPopular": "Most popular",
     "currentPlan": "Current Plan",
     "subscribeTo": "Subscribe to {plan}",
     "monthlyCreditsLabel": "Monthly credits",
-    "yearlyCreditsLabel": "Total yearly credits",
     "maxDurationLabel": "Max duration of each workflow run",
     "gpuLabel": "RTX 6000 Pro (96GB VRAM)",
     "addCreditsLabel": "Add more credits whenever",
     "customLoRAsLabel": "Import your own LoRAs",
-    "videoEstimateLabel": "Number of 5s videos generated with Wan Fun Control template",
+    "videoEstimateLabel": "Approx. number of 5s videos generated with Wan Fun Control template",
     "videoEstimateHelp": "What is this?",
     "videoEstimateExplanation": "These estimates are based on the Wan Fun Control template for 5-second videos.",
     "videoEstimateTryTemplate": "Try the Wan Fun Control template →",
     "upgradePlan": "Upgrade Plan",
     "upgradeTo": "Upgrade to {plan}",
     "changeTo": "Change to {plan}",
+    "credits": {
+      "standard": "4,200",
+      "creator": "7,400",
+      "pro": "21,100"
+    },
     "maxDuration": {
       "standard": "30 min",
       "creator": "30 min",
-      "pro": "1 hr",
-      "founder": "30 min"
+      "pro": "1 hr"
     }
   },
   "userSettings": {
     "title": "My Account Settings",
-    "accountSettings": "Account settings",
     "name": "Name",
     "email": "Email",
     "provider": "Sign-in Provider",
@@ -2017,26 +2052,6 @@
       "placeholderVideo": "Select video...",
       "placeholderModel": "Select model...",
       "placeholderUnknown": "Select media..."
-    },
-    "valueControl": {
-      "header": {
-        "prefix": "Automatically update the value",
-        "after": "AFTER",
-        "before": "BEFORE",
-        "postfix": "running the workflow:"
-      },
-      "linkToGlobal": "Link to",
-      "linkToGlobalSeed": "Global Value",
-      "linkToGlobalDesc": "Unique value linked to the Global Value's control setting",
-      "randomize": "Randomize Value",
-      "randomizeDesc": "Shuffles the value randomly after each generation",
-      "increment": "Increment Value",
-      "incrementDesc": "Adds 1 to value or selects the next option",
-      "decrement": "Decrement Value",
-      "decrementDesc": "Subtracts 1 from value or selects the previous option",
-      "fixed": "Fixed Value",
-      "fixedDesc": "Leaves value unchanged",
-      "editSettings": "Edit control settings"
     }
   },
   "widgetFileUpload": {
@@ -2216,11 +2231,8 @@
     "baseModels": "Base models",
     "browseAssets": "Browse Assets",
     "checkpoints": "Checkpoints",
-    "civitaiLinkExample": "{example} {link}",
-    "civitaiLinkExampleStrong": "Example:",
-    "civitaiLinkExampleUrl": "https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295",
-    "civitaiLinkLabel": "Civitai model {download} link",
-    "civitaiLinkLabelDownload": "download",
+    "civitaiLinkExample": "<strong>Example:</strong> <a href=\"https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295</a>",
+    "civitaiLinkLabel": "Civitai model <span class=\"font-bold italic\">download</span> link",
     "civitaiLinkPlaceholder": "Paste link here",
     "confirmModelDetails": "Confirm Model Details",
     "connectionError": "Please check your connection and try again",
@@ -2238,11 +2250,8 @@
     "filterBy": "Filter by",
     "findInLibrary": "Find it in the {type} section of the models library.",
     "finish": "Finish",
-    "genericLinkPlaceholder": "Paste link here",
     "jobId": "Job ID",
     "loadingModels": "Loading {type}...",
-    "maxFileSize": "Max file size: {size}",
-    "maxFileSizeValue": "1 GB",
     "modelAssociatedWithLink": "The model associated with the link you provided:",
     "modelName": "Model Name",
     "modelNamePlaceholder": "Enter a name for this model",
@@ -2257,24 +2266,20 @@
     "ownershipAll": "All",
     "ownershipMyModels": "My models",
     "ownershipPublicModels": "Public models",
-    "providerCivitai": "Civitai",
-    "providerHuggingFace": "Hugging Face",
-    "noValidSourceDetected": "No valid import source detected",
     "selectFrameworks": "Select Frameworks",
     "selectModelType": "Select model type",
     "selectProjects": "Select Projects",
     "sortAZ": "A-Z",
     "sortBy": "Sort by",
-    "sortingType": "Sorting Type",
     "sortPopular": "Popular",
     "sortRecent": "Recent",
     "sortZA": "Z-A",
+    "sortingType": "Sorting Type",
     "tags": "Tags",
     "tagsHelp": "Separate tags with commas",
     "tagsPlaceholder": "e.g., models, checkpoint",
     "tryAdjustingFilters": "Try adjusting your search or filters",
     "unknown": "Unknown",
-    "unsupportedUrlSource": "Only URLs from {sources} are supported",
     "upgradeFeatureDescription": "This feature is only available with Creator or Pro plans.",
     "upgradeToUnlockFeature": "Upgrade to unlock this feature",
     "upload": "Import",
@@ -2282,15 +2287,10 @@
     "uploadingModel": "Importing model...",
     "uploadModel": "Import",
     "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
-    "uploadModelDescription1Generic": "Paste a model download link to add it to your library.",
-    "uploadModelDescription2": "Only links from {link} are supported at the moment",
-    "uploadModelDescription2Link": "https://civitai.com/models",
-    "uploadModelDescription2Generic": "Only URLs from the following providers are supported:",
-    "uploadModelDescription3": "Max file size: {size}",
+    "uploadModelDescription2": "Only links from <a href=\"https://civitai.com/models\" target=\"_blank\" class=\"text-muted-foreground\">https://civitai.com/models</a> are supported at the moment",
+    "uploadModelDescription3": "Max file size: <strong>1 GB</strong>",
     "uploadModelFailedToRetrieveMetadata": "Failed to retrieve metadata. Please check the link and try again.",
     "uploadModelFromCivitai": "Import a model from Civitai",
-    "uploadModelGeneric": "Import a model",
-    "uploadModelHelpFooterText": "Need help finding the URLs? Click on a provider below to see a how-to video.",
     "uploadModelHelpVideo": "Upload Model Help Video",
     "uploadModelHowDoIFindThis": "How do I find this?",
     "uploadSuccess": "Model imported successfully!",
@@ -2426,4 +2426,4 @@
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
   }
-}
+}

src/platform/assets/components/MediaAssetCard.vue

@@ -55,6 +55,7 @@
               variant="gray"
               :label="formattedDuration"
             />
+            <SquareChip v-if="fileFormat" variant="gray" :label="fileFormat" />
           </div>
 
           <!-- Media actions - show on hover or when playing -->
@@ -265,6 +266,12 @@ const formattedDuration = computed(() => {
   return formatDuration(Number(duration))
 })
 
+const fileFormat = computed(() => {
+  if (!asset?.name) return ''
+  const parts = asset.name.split('.')
+  return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : ''
+})
+
 const durationChipClasses = computed(() => {
   if (fileKind.value === 'audio') {
     return '-translate-y-11'
@@ -282,7 +289,7 @@ const showStaticChips = computed(
     !!asset &&
     !isHovered.value &&
     !isVideoPlaying.value &&
-    formattedDuration.value
+    (formattedDuration.value || fileFormat.value)
 )
 
 // Show action overlay when hovered OR playing

src/platform/assets/components/UploadModelDialog.vue

@@ -4,13 +4,7 @@
   >
     <!-- Step 1: Enter URL -->
     <UploadModelUrlInput
-      v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
-      v-model="wizardData.url"
-      :error="uploadError"
-      class="flex-1"
-    />
-    <UploadModelUrlInputCivitai
-      v-else-if="currentStep === 1"
+      v-if="currentStep === 1"
       v-model="wizardData.url"
       :error="uploadError"
     />
@@ -52,17 +46,14 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import UploadModelConfirmation from '@/platform/assets/components/UploadModelConfirmation.vue'
 import UploadModelFooter from '@/platform/assets/components/UploadModelFooter.vue'
 import UploadModelProgress from '@/platform/assets/components/UploadModelProgress.vue'
 import UploadModelUrlInput from '@/platform/assets/components/UploadModelUrlInput.vue'
-import UploadModelUrlInputCivitai from '@/platform/assets/components/UploadModelUrlInputCivitai.vue'
 import { useModelTypes } from '@/platform/assets/composables/useModelTypes'
 import { useUploadModelWizard } from '@/platform/assets/composables/useUploadModelWizard'
 import { useDialogStore } from '@/stores/dialogStore'
 
-const { flags } = useFeatureFlags()
 const dialogStore = useDialogStore()
 const { modelTypes, fetchModelTypes } = useModelTypes()
 

src/platform/assets/components/UploadModelDialogHeader.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="flex items-center gap-2 p-4 font-bold">
-    <img
-      v-if="!flags.huggingfaceModelImportEnabled"
-      src="/assets/images/civitai.svg"
-      class="size-4"
-    />
-    <span>{{ $t(titleKey) }}</span>
+    <img src="/assets/images/civitai.svg" class="size-4" />
+    <span>{{ $t('assetBrowser.uploadModelFromCivitai') }}</span>
     <span
       class="rounded-full bg-white px-1.5 py-0 text-xxs font-inter font-semibold uppercase text-black"
     >
@@ -13,17 +9,3 @@
     </span>
   </div>
 </template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
-
-const { flags } = useFeatureFlags()
-
-const titleKey = computed(() => {
-  return flags.huggingfaceModelImportEnabled
-    ? 'assetBrowser.uploadModelGeneric'
-    : 'assetBrowser.uploadModelFromCivitai'
-})
-</script>

src/platform/assets/components/UploadModelFooter.vue

@@ -1,33 +1,13 @@
 <template>
   <div class="flex justify-end gap-2 w-full">
-    <div
-      v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
-      class="mr-auto flex items-center gap-2"
-    >
-      <i class="icon-[lucide--circle-question-mark] text-muted-foreground" />
-      <TextButton
-        :label="$t('assetBrowser.providerCivitai')"
-        type="transparent"
-        size="sm"
-        data-attr="upload-model-step1-help-civitai"
-        @click="showCivitaiHelp = true"
-      />
-      <TextButton
-        :label="$t('assetBrowser.providerHuggingFace')"
-        type="transparent"
-        size="sm"
-        data-attr="upload-model-step1-help-huggingface"
-        @click="showHuggingFaceHelp = true"
-      />
-    </div>
     <IconTextButton
-      v-else-if="currentStep === 1"
+      v-if="currentStep === 1"
       :label="$t('assetBrowser.uploadModelHowDoIFindThis')"
       type="transparent"
       size="md"
       class="mr-auto underline text-muted-foreground"
       data-attr="upload-model-step1-help-link"
-      @click="showCivitaiHelp = true"
+      @click="showVideoHelp = true"
     >
       <template #icon>
         <i class="icon-[lucide--circle-question-mark]" />
@@ -94,15 +74,10 @@
       @click="emit('close')"
     />
     <VideoHelpDialog
-      v-model="showCivitaiHelp"
+      v-model="showVideoHelp"
       video-url="https://media.comfy.org/compressed_768/civitai_howto.webm"
       :aria-label="$t('assetBrowser.uploadModelHelpVideo')"
     />
-    <VideoHelpDialog
-      v-model="showHuggingFaceHelp"
-      video-url="https://media.comfy.org/byom/huggingfacehowto.mp4"
-      :aria-label="$t('assetBrowser.uploadModelHelpVideo')"
-    />
   </div>
 </template>
 
@@ -111,13 +86,9 @@ import { ref } from 'vue'
 
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import TextButton from '@/components/button/TextButton.vue'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import VideoHelpDialog from '@/platform/assets/components/VideoHelpDialog.vue'
 
-const { flags } = useFeatureFlags()
-
-const showCivitaiHelp = ref(false)
-const showHuggingFaceHelp = ref(false)
+const showVideoHelp = ref(false)
 
 defineProps<{
   currentStep: number

src/platform/assets/components/UploadModelUrlInput.vue

@@ -1,74 +1,28 @@
 <template>
-  <div class="flex flex-col justify-between h-full gap-6 text-sm">
-    <div class="flex flex-col gap-6">
-      <div class="flex flex-col gap-2">
-        <p class="m-0 text-foreground">
-          {{ $t('assetBrowser.uploadModelDescription1Generic') }}
-        </p>
-        <div class="m-0">
-          <p class="m-0 text-muted-foreground">
-            {{ $t('assetBrowser.uploadModelDescription2Generic') }}
-          </p>
-          <span class="inline-flex items-center gap-1 flex-wrap mt-2">
-            <span class="inline-flex items-center gap-1">
-              <img
-                :src="civitaiIcon"
-                :alt="$t('assetBrowser.providerCivitai')"
-                class="w-4 h-4"
-              />
-              <a
-                :href="civitaiUrl"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-muted underline"
-              >
-                {{ $t('assetBrowser.providerCivitai') }}</a
-              ><span>,</span>
-            </span>
-            <span class="inline-flex items-center gap-1">
-              <img
-                :src="huggingFaceIcon"
-                :alt="$t('assetBrowser.providerHuggingFace')"
-                class="w-4 h-4"
-              />
-              <a
-                :href="huggingFaceUrl"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="text-muted underline"
-              >
-                {{ $t('assetBrowser.providerHuggingFace') }}
-              </a>
-            </span>
-          </span>
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <InputText
-          v-model="url"
-          autofocus
-          :placeholder="$t('assetBrowser.genericLinkPlaceholder')"
-          class="w-full bg-secondary-background border-0 p-4"
-          data-attr="upload-model-step1-url-input"
-        />
-        <p v-if="error" class="text-xs text-error">
-          {{ error }}
-        </p>
-        <p v-else class="text-foreground">
-          <i18n-t keypath="assetBrowser.maxFileSize" tag="span">
-            <template #size>
-              <span class="font-bold italic">{{
-                $t('assetBrowser.maxFileSizeValue')
-              }}</span>
-            </template>
-          </i18n-t>
-        </p>
-      </div>
+  <div class="flex flex-col gap-6 text-sm text-muted-foreground">
+    <div class="flex flex-col gap-2">
+      <p class="m-0">
+        {{ $t('assetBrowser.uploadModelDescription1') }}
+      </p>
+      <ul class="list-disc space-y-1 pl-5 mt-0">
+        <li v-html="$t('assetBrowser.uploadModelDescription2')" />
+        <li v-html="$t('assetBrowser.uploadModelDescription3')" />
+      </ul>
     </div>
 
-    <div class="text-sm text-muted">
-      {{ $t('assetBrowser.uploadModelHelpFooterText') }}
+    <div class="flex flex-col gap-2">
+      <label class="mb-0" v-html="$t('assetBrowser.civitaiLinkLabel')"> </label>
+      <InputText
+        v-model="url"
+        autofocus
+        :placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
+        class="w-full bg-secondary-background border-0 p-4"
+        data-attr="upload-model-step1-url-input"
+      />
+      <p v-if="error" class="text-xs text-error">
+        {{ error }}
+      </p>
+      <p v-else v-html="$t('assetBrowser.civitaiLinkExample')"></p>
     </div>
   </div>
 </template>
@@ -90,9 +44,4 @@ const url = computed({
   get: () => props.modelValue,
   set: (value: string) => emit('update:modelValue', value)
 })
-
-const civitaiIcon = '/assets/images/civitai.svg'
-const civitaiUrl = 'https://civitai.com/models'
-const huggingFaceIcon = '/assets/images/hf-logo.svg'
-const huggingFaceUrl = 'https://huggingface.co'
 </script>

src/platform/assets/components/UploadModelUrlInputCivitai.vue

@@ -1,82 +0,0 @@
-<template>
-  <div class="flex flex-col gap-6 text-sm text-muted-foreground">
-    <div class="flex flex-col gap-2">
-      <p class="m-0">
-        {{ $t('assetBrowser.uploadModelDescription1') }}
-      </p>
-      <ul class="list-disc space-y-1 pl-5 mt-0">
-        <li>
-          <i18n-t keypath="assetBrowser.uploadModelDescription2" tag="span">
-            <template #link>
-              <a
-                href="https://civitai.com/models"
-                target="_blank"
-                class="text-muted-foreground"
-              >
-                {{ $t('assetBrowser.uploadModelDescription2Link') }}
-              </a>
-            </template>
-          </i18n-t>
-        </li>
-        <li>
-          <i18n-t keypath="assetBrowser.uploadModelDescription3" tag="span">
-            <template #size>
-              <span class="font-bold italic">{{
-                $t('assetBrowser.maxFileSizeValue')
-              }}</span>
-            </template>
-          </i18n-t>
-        </li>
-      </ul>
-    </div>
-
-    <div class="flex flex-col gap-2">
-      <i18n-t keypath="assetBrowser.civitaiLinkLabel" tag="label" class="mb-0">
-        <template #download>
-          <span class="font-bold italic">{{
-            $t('assetBrowser.civitaiLinkLabelDownload')
-          }}</span>
-        </template>
-      </i18n-t>
-      <InputText
-        v-model="url"
-        autofocus
-        :placeholder="$t('assetBrowser.civitaiLinkPlaceholder')"
-        class="w-full bg-secondary-background border-0 p-4"
-        data-attr="upload-model-step1-url-input"
-      />
-      <p v-if="error" class="text-xs text-error">
-        {{ error }}
-      </p>
-      <i18n-t
-        v-else
-        keypath="assetBrowser.civitaiLinkExample"
-        tag="p"
-        class="text-xs"
-      >
-        <template #example>
-          <strong>{{ $t('assetBrowser.civitaiLinkExampleStrong') }}</strong>
-        </template>
-        <template #link>
-          <a
-            href="https://civitai.com/models/10706/luisap-z-image-and-qwen-pixel-art-refiner?modelVersionId=2225295"
-            target="_blank"
-            class="text-muted-foreground"
-          >
-            {{ $t('assetBrowser.civitaiLinkExampleUrl') }}
-          </a>
-        </template>
-      </i18n-t>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import InputText from 'primevue/inputtext'
-
-defineProps<{
-  error?: string
-}>()
-
-const url = defineModel<string>({ required: true })
-</script>

src/platform/assets/composables/useModelTypes.ts

@@ -50,12 +50,10 @@ export const useModelTypes = createSharedComposable(() => {
   } = useAsyncState(
     async (): Promise<ModelTypeOption[]> => {
       const response = await api.getModelFolders()
-      return response
-        .map((folder) => ({
-          name: formatDisplayName(folder.name),
-          value: folder.name
-        }))
-        .sort((a, b) => a.name.localeCompare(b.name))
+      return response.map((folder) => ({
+        name: formatDisplayName(folder.name),
+        value: folder.name
+      }))
     },
     [] as ModelTypeOption[],
     {

src/platform/assets/composables/useUploadModelWizard.ts

@@ -1,15 +1,9 @@
 import type { Ref } from 'vue'
 import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { st } from '@/i18n'
-import { civitaiImportSource } from '@/platform/assets/importSources/civitaiImportSource'
-import { huggingfaceImportSource } from '@/platform/assets/importSources/huggingfaceImportSource'
 import type { AssetMetadata } from '@/platform/assets/schemas/assetSchema'
 import { assetService } from '@/platform/assets/services/assetService'
-import type { ImportSource } from '@/platform/assets/types/importSource'
-import { validateSourceUrl } from '@/platform/assets/utils/importSourceUtil'
 import { useAssetsStore } from '@/stores/assetsStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 
@@ -27,10 +21,8 @@ interface ModelTypeOption {
 }
 
 export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
-  const { t } = useI18n()
   const assetsStore = useAssetsStore()
   const modelToNodeStore = useModelToNodeStore()
-  const { flags } = useFeatureFlags()
   const currentStep = ref(1)
   const isFetchingMetadata = ref(false)
   const isUploading = ref(false)
@@ -45,20 +37,6 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
 
   const selectedModelType = ref<string>()
 
-  // Available import sources
-  const importSources: ImportSource[] = flags.huggingfaceModelImportEnabled
-    ? [civitaiImportSource, huggingfaceImportSource]
-    : [civitaiImportSource]
-
-  // Detected import source based on URL
-  const detectedSource = computed(() => {
-    const url = wizardData.value.url.trim()
-    if (!url) return null
-    return (
-      importSources.find((source) => validateSourceUrl(url, source)) ?? null
-    )
-  })
-
   // Clear error when URL changes
   watch(
     () => wizardData.value.url,
@@ -76,6 +54,15 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     return !!selectedModelType.value
   })
 
+  function isCivitaiUrl(url: string): boolean {
+    try {
+      const hostname = new URL(url).hostname.toLowerCase()
+      return hostname === 'civitai.com' || hostname.endsWith('.civitai.com')
+    } catch {
+      return false
+    }
+  }
+
   async function fetchMetadata() {
     if (!canFetchMetadata.value) return
 
@@ -88,36 +75,17 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     }
     wizardData.value.url = cleanedUrl
 
-    // Validate URL belongs to a supported import source
-    const source = detectedSource.value
-    if (!source) {
-      const supportedSources = importSources.map((s) => s.name).join(', ')
-      uploadError.value = t('assetBrowser.unsupportedUrlSource', {
-        sources: supportedSources
-      })
+    if (!isCivitaiUrl(wizardData.value.url)) {
+      uploadError.value = st(
+        'assetBrowser.onlyCivitaiUrlsSupported',
+        'Only Civitai URLs are supported'
+      )
       return
     }
 
     isFetchingMetadata.value = true
     try {
       const metadata = await assetService.getAssetMetadata(wizardData.value.url)
-
-      // Decode URL-encoded filenames (e.g., Chinese characters)
-      if (metadata.filename) {
-        try {
-          metadata.filename = decodeURIComponent(metadata.filename)
-        } catch {
-          // Keep original if decoding fails
-        }
-      }
-      if (metadata.name) {
-        try {
-          metadata.name = decodeURIComponent(metadata.name)
-        } catch {
-          // Keep original if decoding fails
-        }
-      }
-
       wizardData.value.metadata = metadata
 
       // Pre-fill name from metadata
@@ -157,14 +125,6 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
   async function uploadModel() {
     if (!canUploadModel.value) return
 
-    // Defensive check: detectedSource should be valid after fetchMetadata validation,
-    // but guard against edge cases (e.g., URL modified between steps)
-    const source = detectedSource.value
-    if (!source) {
-      uploadError.value = t('assetBrowser.noValidSourceDetected')
-      return false
-    }
-
     isUploading.value = true
     uploadStatus.value = 'uploading'
 
@@ -210,7 +170,7 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
         name: filename,
         tags,
         user_metadata: {
-          source: source.type,
+          source: 'civitai',
           source_url: wizardData.value.url,
           model_type: selectedModelType.value
         },
@@ -264,7 +224,6 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     // Computed
     canFetchMetadata,
     canUploadModel,
-    detectedSource,
 
     // Actions
     fetchMetadata,

src/platform/assets/importSources/civitaiImportSource.ts

@@ -1,10 +0,0 @@
-import type { ImportSource } from '@/platform/assets/types/importSource'
-
-/**
- * Civitai model import source configuration
- */
-export const civitaiImportSource: ImportSource = {
-  type: 'civitai',
-  name: 'Civitai',
-  hostnames: ['civitai.com']
-}

src/platform/assets/importSources/huggingfaceImportSource.ts

@@ -1,10 +0,0 @@
-import type { ImportSource } from '@/platform/assets/types/importSource'
-
-/**
- * Hugging Face model import source configuration
- */
-export const huggingfaceImportSource: ImportSource = {
-  type: 'huggingface',
-  name: 'Hugging Face',
-  hostnames: ['huggingface.co']
-}

src/platform/assets/types/importSource.ts

@@ -1,24 +0,0 @@
-/**
- * Supported model import sources
- */
-type ImportSourceType = 'civitai' | 'huggingface'
-
-/**
- * Configuration for a model import source
- */
-export interface ImportSource {
-  /**
-   * Unique identifier for this import source
-   */
-  readonly type: ImportSourceType
-
-  /**
-   * Display name for the source
-   */
-  readonly name: string
-
-  /**
-   * Hostname(s) that identify this source
-   */
-  readonly hostnames: readonly string[]
-}

src/platform/assets/utils/importSourceUtil.ts

@@ -1,15 +0,0 @@
-import type { ImportSource } from '@/platform/assets/types/importSource'
-
-/**
- * Check if a URL belongs to a specific import source
- */
-export function validateSourceUrl(url: string, source: ImportSource): boolean {
-  try {
-    const hostname = new URL(url).hostname.toLowerCase()
-    return source.hostnames.some(
-      (h) => hostname === h || hostname.endsWith(`.${h}`)
-    )
-  } catch {
-    return false
-  }
-}

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

@@ -1,268 +1,178 @@
 <template>
-  <div class="flex flex-col gap-8">
-    <div class="flex justify-center">
-      <SelectButton
-        v-model="currentBillingCycle"
-        :options="billingCycleOptions"
-        option-label="label"
-        option-value="value"
-        :allow-empty="false"
-        unstyled
-        :pt="{
-          root: {
-            class: 'flex gap-1 bg-secondary-background rounded-lg p-1.5'
-          },
-          pcToggleButton: {
-            root: ({ context }: ToggleButtonPassThroughMethodOptions) => ({
-              class: [
-                'w-36  h-8 rounded-md transition-colors cursor-pointer border-none outline-none ring-0 text-sm font-medium flex items-center justify-center',
-                context.active
-                  ? 'bg-base-foreground text-base-background'
-                  : 'bg-transparent text-muted-foreground hover:bg-secondary-background-hover'
-              ]
-            }),
-            label: { class: 'flex items-center gap-2 ' }
-          }
-        }"
-      >
-        <template #option="{ option }">
-          <div class="flex items-center gap-2">
-            <span>{{ option.label }}</span>
-            <div
-              v-if="option.value === 'yearly'"
-              class="bg-primary-background text-white text-[11px] px-1 py-0.5 rounded-full flex items-center font-bold"
-            >
-              -20%
-            </div>
-          </div>
-        </template>
-      </SelectButton>
-    </div>
-    <div class="flex flex-col xl:flex-row items-stretch gap-6">
-      <div
-        v-for="tier in tiers"
-        :key="tier.id"
-        :class="
-          cn(
-            'flex-1 flex flex-col rounded-2xl border border-border-default bg-base-background shadow-[0_0_12px_rgba(0,0,0,0.1)]',
-            tier.isPopular ? 'border-muted-foreground' : ''
-          )
-        "
-      >
-        <div class="p-8 pb-0 flex flex-col gap-8">
-          <div class="flex flex-row items-center gap-2 justify-between">
-            <span
-              class="font-inter text-base font-bold leading-normal text-base-foreground"
-            >
-              {{ tier.name }}
-            </span>
-            <div
-              v-if="tier.isPopular"
-              class="rounded-full bg-base-foreground px-1.5 text-[11px] font-bold uppercase text-base-background h-5 tracking-tight flex items-center"
-            >
-              {{ t('subscription.mostPopular') }}
-            </div>
-          </div>
-          <div class="flex flex-col">
-            <div class="flex flex-col gap-2">
-              <div class="flex flex-row items-baseline gap-2">
-                <span
-                  class="font-inter text-[32px] font-semibold leading-normal text-base-foreground"
-                >
-                  <span
-                    v-show="currentBillingCycle === 'yearly'"
-                    class="line-through text-2xl text-muted-foreground"
-                  >
-                    ${{ tier.pricing.monthly }}
-                  </span>
-                  ${{ getPrice(tier) }}
-                </span>
-                <span
-                  class="font-inter text-xl leading-normal text-base-foreground"
-                >
-                  {{ t('subscription.usdPerMonth') }}
-                </span>
-              </div>
-              <div class="flex items-center gap-2">
-                <span class="text-sm text-muted-foreground">
-                  {{
-                    currentBillingCycle === 'yearly'
-                      ? t('subscription.billedYearly', {
-                          total: `$${getAnnualTotal(tier)}`
-                        })
-                      : t('subscription.billedMonthly')
-                  }}
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <div class="flex flex-col gap-4 pb-0 flex-1">
-            <div class="flex flex-row items-center justify-between">
-              <span
-                class="font-inter text-sm font-normal leading-normal text-foreground"
-              >
-                {{
-                  currentBillingCycle === 'yearly'
-                    ? t('subscription.yearlyCreditsLabel')
-                    : t('subscription.monthlyCreditsLabel')
-                }}
-              </span>
-              <div class="flex flex-row items-center gap-1">
-                <i class="icon-[lucide--component] text-amber-400 text-sm" />
-                <span
-                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
-                >
-                  {{ n(getCreditsDisplay(tier)) }}
-                </span>
-              </div>
-            </div>
-
-            <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
-                {{ t('subscription.maxDurationLabel') }}
-              </span>
-              <span
-                class="font-inter text-sm font-bold leading-normal text-base-foreground"
-              >
-                {{ tier.maxDuration }}
-              </span>
-            </div>
-
-            <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
-                {{ t('subscription.gpuLabel') }}
-              </span>
-              <i class="pi pi-check text-xs text-success-foreground" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
-                {{ t('subscription.addCreditsLabel') }}
-              </span>
-              <i class="pi pi-check text-xs text-success-foreground" />
-            </div>
-
-            <div class="flex flex-row items-center justify-between">
-              <span class="text-sm font-normal text-foreground">
-                {{ t('subscription.customLoRAsLabel') }}
-              </span>
-              <i
-                v-if="tier.customLoRAs"
-                class="pi pi-check text-xs text-success-foreground"
-              />
-              <i v-else class="pi pi-times text-xs text-foreground" />
-            </div>
-
-            <div class="flex flex-col gap-2">
-              <div class="flex flex-row items-start justify-between">
-                <div class="flex flex-col gap-2">
-                  <span class="text-sm font-normal text-foreground">
-                    {{ t('subscription.videoEstimateLabel') }}
-                  </span>
-                  <div class="flex flex-row items-center gap-2 group pt-2">
-                    <i
-                      class="pi pi-question-circle text-xs text-muted-foreground group-hover:text-base-foreground"
-                    />
-                    <span
-                      class="text-sm font-normal text-muted-foreground cursor-pointer group-hover:text-base-foreground"
-                      @click="togglePopover"
-                    >
-                      {{ t('subscription.videoEstimateHelp') }}
-                    </span>
-                  </div>
-                </div>
-                <span
-                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
-                >
-                  ~{{ n(tier.pricing.videoEstimate) }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="flex flex-col p-8">
-          <Button
-            :label="getButtonLabel(tier)"
-            :severity="getButtonSeverity(tier)"
-            :disabled="isLoading || isCurrentPlan(tier.key)"
-            :loading="loadingTier === tier.key"
-            :class="
-              cn(
-                'h-10 w-full',
-                tier.key === 'creator'
-                  ? 'bg-base-foreground border-transparent hover:bg-inverted-background-hover'
-                  : 'bg-secondary-background border-transparent hover:bg-secondary-background-hover focus:bg-secondary-background-selected'
-              )
-            "
-            :pt="{
-              label: {
-                class: getButtonTextClass(tier)
-              }
-            }"
-            @click="() => handleSubscribe(tier.key)"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Video Estimate Help Popover -->
-    <Popover
-      ref="popover"
-      append-to="body"
-      :auto-z-index="true"
-      :base-z-index="1000"
-      :dismissable="true"
-      :close-on-escape="true"
-      unstyled
-      :pt="{
-        root: {
-          class:
-            'rounded-lg border border-interface-stroke bg-interface-panel-surface shadow-lg p-4 max-w-xs'
-        }
-      }"
+  <div class="flex flex-row items-stretch gap-6">
+    <div
+      v-for="tier in tiers"
+      :key="tier.id"
+      class="flex-1 flex flex-col rounded-2xl border border-interface-stroke bg-interface-panel-surface shadow-[0_0_12px_rgba(0,0,0,0.1)]"
     >
-      <div class="flex flex-col gap-2">
-        <p class="text-sm text-base-foreground">
-          {{ t('subscription.videoEstimateExplanation') }}
-        </p>
-        <a
-          href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="text-sm text-azure-600 hover:text-azure-400 underline"
-        >
-          {{ t('subscription.videoEstimateTryTemplate') }}
-        </a>
+      <div class="flex flex-col gap-6 p-8">
+        <div class="flex flex-row items-center gap-2">
+          <span
+            class="font-inter text-base font-bold leading-normal text-base-foreground"
+          >
+            {{ tier.name }}
+          </span>
+          <div
+            v-if="tier.isPopular"
+            class="rounded-full bg-background px-1 text-xs font-semibold uppercase tracking-wide text-foreground h-[13px] leading-[13px]"
+          >
+            {{ t('subscription.mostPopular') }}
+          </div>
+        </div>
+        <div class="flex flex-row items-baseline gap-2">
+          <span
+            class="font-inter text-[32px] font-semibold leading-normal text-base-foreground"
+          >
+            ${{ tier.price }}
+          </span>
+          <span
+            class="font-inter text-base font-normal leading-normal text-base-foreground"
+          >
+            {{ t('subscription.usdPerMonth') }}
+          </span>
+        </div>
       </div>
-    </Popover>
+
+      <div class="flex flex-col gap-4 px-8 pb-0 flex-1">
+        <div class="flex flex-row items-center justify-between">
+          <span
+            class="font-inter text-sm font-normal leading-normal text-muted-foreground"
+          >
+            {{ t('subscription.monthlyCreditsLabel') }}
+          </span>
+          <div class="flex flex-row items-center gap-1">
+            <i class="icon-[lucide--component] text-amber-400 text-sm" />
+            <span
+              class="font-inter text-sm font-bold leading-normal text-base-foreground"
+            >
+              {{ tier.credits }}
+            </span>
+          </div>
+        </div>
+
+        <div class="flex flex-row items-center justify-between">
+          <span class="text-sm font-normal text-muted-foreground">
+            {{ t('subscription.maxDurationLabel') }}
+          </span>
+          <span
+            class="font-inter text-sm font-bold leading-normal text-base-foreground"
+          >
+            {{ tier.maxDuration }}
+          </span>
+        </div>
+
+        <div class="flex flex-row items-center justify-between">
+          <span class="text-sm font-normal text-muted-foreground">
+            {{ t('subscription.gpuLabel') }}
+          </span>
+          <i class="pi pi-check text-xs text-success-foreground" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between">
+          <span class="text-sm font-normal text-muted-foreground">
+            {{ t('subscription.addCreditsLabel') }}
+          </span>
+          <i class="pi pi-check text-xs text-success-foreground" />
+        </div>
+
+        <div class="flex flex-row items-center justify-between">
+          <span class="text-sm font-normal text-muted-foreground">
+            {{ t('subscription.customLoRAsLabel') }}
+          </span>
+          <i
+            v-if="tier.customLoRAs"
+            class="pi pi-check text-xs text-success-foreground"
+          />
+          <i v-else class="pi pi-times text-xs text-muted-foreground" />
+        </div>
+
+        <div class="flex flex-col gap-2">
+          <div class="flex flex-row items-start justify-between">
+            <div class="flex flex-col gap-2">
+              <span class="text-sm font-normal text-muted-foreground">
+                {{ t('subscription.videoEstimateLabel') }}
+              </span>
+              <div class="flex flex-row items-center gap-2 opacity-50">
+                <i
+                  class="pi pi-question-circle text-xs text-muted-foreground"
+                />
+                <span
+                  class="text-sm font-normal text-muted-foreground cursor-pointer hover:text-base-foreground"
+                  @click="togglePopover"
+                >
+                  {{ t('subscription.videoEstimateHelp') }}
+                </span>
+              </div>
+            </div>
+            <span
+              class="font-inter text-sm font-bold leading-normal text-base-foreground"
+            >
+              {{ tier.videoEstimate }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col p-8">
+        <Button
+          :label="getButtonLabel(tier)"
+          :severity="getButtonSeverity(tier)"
+          :disabled="isLoading || isCurrentPlan(tier.key)"
+          :loading="loadingTier === tier.key"
+          class="h-10 w-full"
+          :pt="{
+            label: {
+              class: getButtonTextClass(tier)
+            }
+          }"
+          @click="() => handleSubscribe(tier.key)"
+        />
+      </div>
+    </div>
   </div>
+
+  <!-- Video Estimate Help Popover -->
+  <Popover
+    ref="popover"
+    append-to="body"
+    :auto-z-index="true"
+    :base-z-index="1000"
+    :dismissable="true"
+    :close-on-escape="true"
+    unstyled
+    :pt="{
+      root: {
+        class:
+          'rounded-lg border border-interface-stroke bg-interface-panel-surface shadow-lg p-4 max-w-xs'
+      }
+    }"
+  >
+    <div class="flex flex-col gap-2">
+      <p class="text-sm text-base-foreground">
+        {{ t('subscription.videoEstimateExplanation') }}
+      </p>
+      <a
+        href="https://cloud.comfy.org/?template=video_wan2_2_14B_fun_camera"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-sm text-azure-600 hover:text-azure-400 underline"
+      >
+        {{ t('subscription.videoEstimateTryTemplate') }}
+      </a>
+    </div>
+  </Popover>
 </template>
 
 <script setup lang="ts">
-import { cn } from '@comfyorg/tailwind-utils'
 import Button from 'primevue/button'
 import Popover from 'primevue/popover'
-import SelectButton from 'primevue/selectbutton'
-import type { ToggleButtonPassThroughMethodOptions } from 'primevue/togglebutton'
 import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useErrorHandling } from '@/composables/useErrorHandling'
 import { getComfyApiBaseUrl } from '@/config/comfyApi'
 import { t } from '@/i18n'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
-import {
-  TIER_PRICING,
-  TIER_TO_KEY
-} from '@/platform/cloud/subscription/constants/tierPricing'
-import type {
-  TierKey,
-  TierPricing
-} from '@/platform/cloud/subscription/constants/tierPricing'
-import { isPlanDowngrade } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
-import type { BillingCycle } from '@/platform/cloud/subscription/utils/subscriptionTierRank'
 import { isCloud } from '@/platform/distribution/types'
 import {
   FirebaseAuthStoreError,
@@ -271,99 +181,78 @@ import {
 import type { components } from '@/types/comfyRegistryTypes'
 
 type SubscriptionTier = components['schemas']['SubscriptionTier']
-type CheckoutTierKey = Exclude<TierKey, 'founder'>
-type CheckoutTier = CheckoutTierKey | `${CheckoutTierKey}-yearly`
-
-const getCheckoutTier = (
-  tierKey: CheckoutTierKey,
-  billingCycle: BillingCycle
-): CheckoutTier => (billingCycle === 'yearly' ? `${tierKey}-yearly` : tierKey)
-
-interface BillingCycleOption {
-  label: string
-  value: BillingCycle
-}
+type TierKey = 'standard' | 'creator' | 'pro'
 
 interface PricingTierConfig {
   id: SubscriptionTier
-  key: CheckoutTierKey
+  key: TierKey
   name: string
-  pricing: TierPricing
+  price: string
+  credits: string
   maxDuration: string
   customLoRAs: boolean
+  videoEstimate: string
   isPopular?: boolean
 }
 
-const billingCycleOptions: BillingCycleOption[] = [
-  { label: t('subscription.yearly'), value: 'yearly' },
-  { label: t('subscription.monthly'), value: 'monthly' }
-]
+const TIER_TO_KEY: Record<SubscriptionTier, TierKey> = {
+  STANDARD: 'standard',
+  CREATOR: 'creator',
+  PRO: 'pro',
+  FOUNDERS_EDITION: 'standard'
+}
 
 const tiers: PricingTierConfig[] = [
   {
     id: 'STANDARD',
     key: 'standard',
     name: t('subscription.tiers.standard.name'),
-    pricing: TIER_PRICING.standard,
+    price: t('subscription.tiers.standard.price'),
+    credits: t('subscription.credits.standard'),
     maxDuration: t('subscription.maxDuration.standard'),
     customLoRAs: false,
+    videoEstimate: t('subscription.tiers.standard.benefits.videoEstimate'),
     isPopular: false
   },
   {
     id: 'CREATOR',
     key: 'creator',
     name: t('subscription.tiers.creator.name'),
-    pricing: TIER_PRICING.creator,
+    price: t('subscription.tiers.creator.price'),
+    credits: t('subscription.credits.creator'),
     maxDuration: t('subscription.maxDuration.creator'),
     customLoRAs: true,
+    videoEstimate: t('subscription.tiers.creator.benefits.videoEstimate'),
     isPopular: true
   },
   {
     id: 'PRO',
     key: 'pro',
     name: t('subscription.tiers.pro.name'),
-    pricing: TIER_PRICING.pro,
+    price: t('subscription.tiers.pro.price'),
+    credits: t('subscription.credits.pro'),
     maxDuration: t('subscription.maxDuration.pro'),
     customLoRAs: true,
+    videoEstimate: t('subscription.tiers.pro.benefits.videoEstimate'),
     isPopular: false
   }
 ]
 
-const { n } = useI18n()
 const { getAuthHeader } = useFirebaseAuthStore()
-const { isActiveSubscription, subscriptionTier, isYearlySubscription } =
-  useSubscription()
+const { isActiveSubscription, subscriptionTier } = useSubscription()
 const { accessBillingPortal, reportError } = useFirebaseAuthActions()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
 const isLoading = ref(false)
-const loadingTier = ref<CheckoutTierKey | null>(null)
+const loadingTier = ref<TierKey | null>(null)
 const popover = ref()
-const currentBillingCycle = ref<BillingCycle>('yearly')
 
 const currentTierKey = computed<TierKey | null>(() =>
   subscriptionTier.value ? TIER_TO_KEY[subscriptionTier.value] : null
 )
 
-const currentPlanDescriptor = computed(() => {
-  if (!currentTierKey.value) return null
-
-  return {
-    tierKey: currentTierKey.value,
-    billingCycle: isYearlySubscription.value ? 'yearly' : 'monthly'
-  } as const
-})
-
-const isCurrentPlan = (tierKey: CheckoutTierKey): boolean => {
-  if (!currentTierKey.value) return false
-
-  const selectedIsYearly = currentBillingCycle.value === 'yearly'
-
-  return (
-    currentTierKey.value === tierKey &&
-    isYearlySubscription.value === selectedIsYearly
-  )
-}
+const isCurrentPlan = (tierKey: TierKey): boolean =>
+  currentTierKey.value === tierKey
 
 const togglePopover = (event: Event) => {
   popover.value.toggle(event)
@@ -371,15 +260,9 @@ const togglePopover = (event: Event) => {
 
 const getButtonLabel = (tier: PricingTierConfig): string => {
   if (isCurrentPlan(tier.key)) return t('subscription.currentPlan')
-
-  const planName =
-    currentBillingCycle.value === 'yearly'
-      ? t('subscription.tierNameYearly', { name: tier.name })
-      : tier.name
-
-  return isActiveSubscription.value
-    ? t('subscription.changeTo', { plan: planName })
-    : t('subscription.subscribeTo', { plan: planName })
+  if (!isActiveSubscription.value)
+    return t('subscription.subscribeTo', { plan: tier.name })
+  return t('subscription.changeTo', { plan: tier.name })
 }
 
 const getButtonSeverity = (tier: PricingTierConfig): 'primary' | 'secondary' =>
@@ -391,27 +274,17 @@ const getButtonSeverity = (tier: PricingTierConfig): 'primary' | 'secondary' =>
 
 const getButtonTextClass = (tier: PricingTierConfig): string =>
   tier.key === 'creator'
-    ? 'font-inter text-sm font-bold leading-normal text-base-background'
+    ? 'font-inter text-sm font-bold leading-normal text-white'
     : 'font-inter text-sm font-bold leading-normal text-primary-foreground'
 
-const getPrice = (tier: PricingTierConfig): number =>
-  tier.pricing[currentBillingCycle.value]
-
-const getAnnualTotal = (tier: PricingTierConfig): number =>
-  tier.pricing.yearly * 12
-
-const getCreditsDisplay = (tier: PricingTierConfig): number =>
-  tier.pricing.credits * (currentBillingCycle.value === 'yearly' ? 12 : 1)
-
-const initiateCheckout = async (tierKey: CheckoutTierKey) => {
+const initiateCheckout = async (tierKey: TierKey) => {
   const authHeader = await getAuthHeader()
   if (!authHeader) {
     throw new FirebaseAuthStoreError(t('toastMessages.userNotAuthenticated'))
   }
 
-  const checkoutTier = getCheckoutTier(tierKey, currentBillingCycle.value)
   const response = await fetch(
-    `${getComfyApiBaseUrl()}/customers/cloud-subscription-checkout/${checkoutTier}`,
+    `${getComfyApiBaseUrl()}/customers/cloud-subscription-checkout/${tierKey}`,
     {
       method: 'POST',
       headers: { ...authHeader, 'Content-Type': 'application/json' }
@@ -444,45 +317,24 @@ const initiateCheckout = async (tierKey: CheckoutTierKey) => {
   return await response.json()
 }
 
-const handleSubscribe = wrapWithErrorHandlingAsync(
-  async (tierKey: CheckoutTierKey) => {
-    if (!isCloud || isLoading.value || isCurrentPlan(tierKey)) return
+const handleSubscribe = wrapWithErrorHandlingAsync(async (tierKey: TierKey) => {
+  if (!isCloud || isLoading.value || isCurrentPlan(tierKey)) return
 
-    isLoading.value = true
-    loadingTier.value = tierKey
+  isLoading.value = true
+  loadingTier.value = tierKey
 
-    try {
-      if (isActiveSubscription.value) {
-        // Pass the target tier to create a deep link to subscription update confirmation
-        const checkoutTier = getCheckoutTier(tierKey, currentBillingCycle.value)
-        const targetPlan = {
-          tierKey,
-          billingCycle: currentBillingCycle.value
-        }
-        const downgrade =
-          currentPlanDescriptor.value &&
-          isPlanDowngrade({
-            current: currentPlanDescriptor.value,
-            target: targetPlan
-          })
-
-        if (downgrade) {
-          // TODO(COMFY-StripeProration): Remove once backend checkout creation mirrors portal proration ("change at billing end")
-          await accessBillingPortal()
-        } else {
-          await accessBillingPortal(checkoutTier)
-        }
-      } else {
-        const response = await initiateCheckout(tierKey)
-        if (response.checkout_url) {
-          window.open(response.checkout_url, '_blank')
-        }
+  try {
+    if (isActiveSubscription.value) {
+      await accessBillingPortal()
+    } else {
+      const response = await initiateCheckout(tierKey)
+      if (response.checkout_url) {
+        window.open(response.checkout_url, '_blank')
       }
-    } finally {
-      isLoading.value = false
-      loadingTier.value = null
     }
-  },
-  reportError
-)
+  } finally {
+    isLoading.value = false
+    loadingTier.value = null
+  }
+}, reportError)
 </script>