[backport cloud/1.35] Guard downgrades via billing portal (#7819)

Backport of #7813 to `cloud/1.35`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7819-backport-cloud-1-35-Guard-downgrades-via-billing-portal-2db6d73d365081d591e3fde9037164d6)
by [Unito](https://www.unito.io)

Co-authored-by: Christian Byrne <cbyrne@comfy.org>

.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.
+  reference: `Special names to keep untranslated: flux, photomaker, clip, vae, cfg, stable audio, stable cascade, stable zero, controlnet, lora, HiDream, Civitai, Hugging Face.
   'latent' is the short form of 'latent space'.
   'mask' is in the context of image processing.
   

.npmrc

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

browser_tests/tests/widget.spec.ts

@@ -205,6 +205,32 @@ 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', () => {

package.json

@@ -19,6 +19,7 @@
     "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-200);
+  --secondary-background-hover: var(--color-smoke-400);
   --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,6 +217,28 @@ 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;
@@ -2154,6 +2176,26 @@ 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;
@@ -3911,6 +3953,11 @@ 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
@@ -4757,13 +4804,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";
+        KlingTextToVideoModelName: "kling-v1" | "kling-v1-5" | "kling-v1-6" | "kling-v2-master" | "kling-v2-1-master" | "kling-v2-5-turbo" | "kling-v2-6";
         /**
          * @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";
+        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";
         /**
          * @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
@@ -4908,6 +4955,12 @@ 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
@@ -4970,6 +5023,12 @@ 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.
@@ -5759,7 +5818,7 @@ export interface components {
             width: number;
             /**
              * @description Height of the image.
-             * @default 768
+             * @default 1024
              */
             height: number;
             /** @description Seed for reproducibility. */
@@ -5775,6 +5834,11 @@ export interface components {
              * @enum {string}
              */
             output_format: "jpeg" | "png";
+            /**
+             * @description Moderation tolerance level (Flux 2 Max only).
+             * @default 2
+             */
+            safety_tolerance: number;
         };
         /** FluxProFillInputs */
         BFLFluxProFillInputs: {
@@ -6973,6 +7037,10 @@ export interface components {
                     image_tokens?: number;
                 };
                 output_tokens?: number;
+                output_tokens_details?: {
+                    text_tokens?: number;
+                    image_tokens?: number;
+                };
                 total_tokens?: number;
             };
         };
@@ -10356,40 +10424,76 @@ export interface components {
              * @description The ID of the model to call
              * @enum {string}
              */
-            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview";
+            model: "wan2.5-t2v-preview" | "wan2.5-i2v-preview" | "wan2.6-t2v" | "wan2.6-i2v";
             /** @description Enter basic information, such as prompt words, etc. */
             input: {
-                /** @description Text prompt words. Support Chinese and English, length not exceeding 800 characters */
+                /**
+                 * @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"
+                 */
                 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. */
+                /** @description Audio file download URL. Supported formats: mp3 and wav. Cannot be used with reference_video_urls. */
                 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 Used to specify the video resolution in the format of 宽*高. Supported resolutions vary by model (for T2V models) */
+                /**
+                 * @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
+                 */
                 size?: string;
                 /**
-                 * @description Resolution level for I2V models. Supported values vary by model: 480P, 720P, 1080P
+                 * @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)
                  * @enum {string}
                  */
                 resolution?: "480P" | "720P" | "1080P";
                 /**
-                 * @description The duration of the video generated, in seconds
+                 * @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)
                  * @default 5
                  * @enum {integer}
                  */
-                duration?: 5 | 10;
+                duration?: 5 | 10 | 15;
                 /**
                  * @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;
                 /**
@@ -11806,6 +11910,8 @@ 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";
                 };
             };
         };
@@ -11902,8 +12008,8 @@ export interface operations {
             query?: never;
             header?: never;
             path: {
-                /** @description The subscription tier (standard, creator, or pro) */
-                tier: "standard" | "creator" | "pro";
+                /** @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";
             };
             cookie?: never;
         };
@@ -11969,6 +12075,7 @@ 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;
                         /**
@@ -12002,6 +12109,72 @@ 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;
@@ -12029,6 +12202,7 @@ 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;
                         /**
@@ -12146,6 +12320,16 @@ 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;
                     };
@@ -12212,6 +12396,16 @@ 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;
                     };
@@ -19417,6 +19611,89 @@ 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.52.0
+  '@playwright/test': ^1.57.0
   '@prettier/plugin-oxc': ^0.1.3
   '@primeuix/forms': 0.0.2
   '@primeuix/styled': 0.3.2

src/components/common/EditableText.vue

@@ -21,6 +21,7 @@
       @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,7 +12,6 @@
     />
     <img
       v-if="cachedSrc"
-      ref="imageRef"
       :src="cachedSrc"
       :alt="alt"
       draggable="false"
@@ -61,7 +60,6 @@ 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,13 +14,7 @@
       class="p-1 text-amber-400"
     >
       <template #icon>
-        <i
-          :class="
-            flags.subscriptionTiersEnabled
-              ? 'icon-[lucide--component]'
-              : 'pi pi-dollar'
-          "
-        />
+        <i class="icon-[lucide--component]" />
       </template>
     </Tag>
     <div :class="textClass">
@@ -36,7 +30,6 @@ 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<{
@@ -45,7 +38,6 @@ 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,6 +1,5 @@
 <template>
-  <!-- New Credits Design (default) -->
-  <div v-if="useNewDesign" class="flex w-112 flex-col gap-8 p-8">
+  <div 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">
@@ -66,91 +65,32 @@
       @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 { computed, ref } from 'vue'
+import { 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,
-  amountOptions = [5, 10, 20, 50],
-  preselectedAmountOption = 10
-} = defineProps<{
+const { isInsufficientCredits = false } = 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()
@@ -202,8 +142,4 @@ const handleBuy = async () => {
     loading.value = false
   }
 }
-
-const handleSeeDetails = async () => {
-  await authActions.accessBillingPortal()
-}
 </script>

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

@@ -1,119 +0,0 @@
-<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 } = useExternalLink()
+const { buildDocsUrl, docsPaths } = useExternalLink()
 const dialogService = useDialogService()
 const authStore = useFirebaseAuthStore()
 const authActions = useFirebaseAuthActions()
@@ -194,9 +194,7 @@ const handleFaqClick = () => {
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
-      includeLocale: true
-    }),
+    buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),
     '_blank'
   )
 }

src/components/graph/modals/ZoomControlsModal.vue

@@ -48,7 +48,6 @@
           class="zoomInputContainer flex items-center gap-1 rounded bg-input-surface p-2"
         >
           <InputNumber
-            ref="zoomInput"
             :default-value="canvasStore.appScalePercentage"
             :min="1"
             :max="1000"
@@ -130,7 +129,6 @@ 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,7 +9,6 @@
   >
     <Load3DScene
       v-if="node"
-      ref="load3DSceneRef"
       :initialize-load3d="initializeLoad3d"
       :cleanup="cleanup"
       :loading="loading"
@@ -100,8 +99,6 @@ if (isComponentWidget(props.widget)) {
   })
 }
 
-const load3DSceneRef = ref<InstanceType<typeof Load3DScene> | null>(null)
-
 const {
   // configs
   sceneConfig,

src/components/load3d/Load3DScene.vue

@@ -14,11 +14,7 @@
     @dragleave.stop="handleDragLeave"
     @drop.prevent.stop="handleDrop"
   >
-    <LoadingOverlay
-      ref="loadingOverlayRef"
-      :loading="loading"
-      :loading-message="loadingMessage"
-    />
+    <LoadingOverlay :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"
@@ -48,7 +44,6 @@ 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 ref="mainContentRef" class="relative flex-1">
+    <div class="relative flex-1">
       <div
         ref="containerRef"
         class="absolute h-full w-full"
@@ -105,7 +105,6 @@ 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 class="flex items-center gap-1">
+    <div v-if="!isCloud" class="flex items-center gap-1">
       <IconButton
         v-tooltip.top="moreTooltipConfig"
         type="transparent"
@@ -75,6 +75,7 @@ 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 } from 'vue'
+import { computed, shallowRef, triggerRef, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -90,10 +90,23 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { adjustColor } from '@/utils/colorUtil'
 import { cn } from '@/utils/tailwindUtil'
 
-const { nodes = [] } = defineProps<{
+const props = 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()
@@ -103,24 +116,33 @@ const isLightTheme = computed(
 )
 
 const nodeState = computed({
-  get(): LGraphNode['mode'] | null {
-    if (!nodes.length) return null
-    if (nodes.length === 1) {
-      return nodes[0].mode
-    }
+  get() {
+    let mode: LGraphNode['mode'] | null = null
+    const nodes = targetNodes.value
+
+    if (nodes.length === 0) return null
 
     // For multiple nodes, if all nodes have the same mode, return that mode, otherwise return null
-    const mode: LGraphNode['mode'] = nodes[0].mode
-    if (!nodes.every((node) => node.mode === mode)) {
-      return null
+    if (nodes.length > 1) {
+      mode = nodes[0].mode
+      if (!nodes.every((node) => node.mode === mode)) {
+        mode = null
+      }
+    } else {
+      mode = nodes[0].mode
     }
 
     return mode
   },
   set(value: LGraphNode['mode']) {
-    nodes.forEach((node) => {
+    targetNodes.value.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)
   }
 })
@@ -128,10 +150,15 @@ const nodeState = computed({
 // Pinned state
 const isPinned = computed<boolean>({
   get() {
-    return nodes.some((node) => node.pinned)
+    return targetNodes.value.some((node) => node.pinned)
   },
   set(value) {
-    nodes.forEach((node) => node.pin(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)
     canvasStore.canvas?.setDirty(true, true)
   }
 })
@@ -175,8 +202,10 @@ const colorOptions: NodeColorOption[] = [
 
 const nodeColor = computed<NodeColorOption['name'] | null>({
   get() {
-    if (nodes.length === 0) return null
-    const theColorOptions = nodes.map((item) => item.getColorOption())
+    if (targetNodes.value.length === 0) return null
+    const theColorOptions = targetNodes.value.map((item) =>
+      item.getColorOption()
+    )
 
     let colorOption: ColorOption | null | false = theColorOptions[0]
     if (!theColorOptions.every((option) => option === colorOption)) {
@@ -202,9 +231,14 @@ const nodeColor = computed<NodeColorOption['name'] | null>({
         ? null
         : LGraphCanvas.node_colors[colorName]
 
-    for (const item of nodes) {
+    for (const item of targetNodes.value) {
       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,6 +1,5 @@
 <template>
   <div
-    ref="menuButtonRef"
     v-tooltip="{
       value: t('sideToolbar.labels.menu'),
       showDelay: 300,
@@ -137,7 +136,6 @@ 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,7 +11,6 @@
     }"
   >
     <div
-      ref="contentMeasureRef"
       :class="
         isOverflowing
           ? 'side-tool-bar-container overflow-y-auto'
@@ -80,7 +79,6 @@ 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,9 +56,9 @@
         class="pb-1 px-2 2xl:px-4"
         :show-generation-time-sort="activeTab === 'output'"
       />
+      <Divider type="dashed" class="my-2" />
     </template>
     <template #body>
-      <Divider type="dashed" class="m-2" />
       <div v-if="loading && !displayAssets.length">
         <ProgressSpinner class="absolute left-1/2 w-[50px] -translate-x-1/2" />
       </div>

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -15,7 +15,7 @@
         </template>
         <template #end>
           <div
-            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"
+            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"
           >
             <slot name="tool-buttons" />
           </div>

src/components/topbar/CurrentUserButton.vue

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

src/components/topbar/CurrentUserPopover.test.ts

@@ -85,10 +85,24 @@ 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: {
@@ -117,15 +131,9 @@ vi.mock('@/base/credits/comfyCredits', () => ({
 // Mock useExternalLink
 vi.mock('@/composables/useExternalLink', () => ({
   useExternalLink: vi.fn(() => ({
-    buildDocsUrl: vi.fn((path) => `https://docs.comfy.org${path}`)
-  }))
-}))
-
-// Mock useFeatureFlags
-vi.mock('@/composables/useFeatureFlags', () => ({
-  useFeatureFlags: vi.fn(() => ({
-    flags: {
-      subscriptionTiersEnabled: true
+    buildDocsUrl: vi.fn((path) => `https://docs.comfy.org${path}`),
+    docsPaths: {
+      partnerNodesPricing: '/tutorials/partner-nodes/pricing'
     }
   }))
 }))
@@ -272,4 +280,22 @@ 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,9 +21,12 @@
       <p v-if="userEmail" class="my-0 truncate text-sm text-muted">
         {{ userEmail }}
       </p>
-      <p v-if="subscriptionTierName" class="my-0 truncate text-sm text-muted">
+      <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"
+      >
         {{ subscriptionTierName }}
-      </p>
+      </span>
     </div>
 
     <!-- Credits Section -->
@@ -33,11 +36,15 @@
         v-if="authStore.isFetchingBalance"
         width="4rem"
         height="1.25rem"
-        class="flex-1"
+        class="w-full"
       />
-      <span v-else class="text-base font-normal text-base-foreground flex-1">{{
+      <span v-else class="text-base font-semibold text-base-foreground">{{
         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"
@@ -58,24 +65,6 @@
       />
     </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
@@ -91,14 +80,31 @@
     </div>
 
     <div
-      v-if="isActiveSubscription"
       class="flex items-center gap-2 px-4 py-2 cursor-pointer hover:bg-secondary-background-hover"
-      data-testid="plan-credits-menu-item"
-      @click="handleOpenPlanAndCreditsSettings"
+      data-testid="plans-pricing-menu-item"
+      @click="handleOpenPlansAndPricing"
     >
       <i class="icon-[lucide--receipt-text] text-muted-foreground text-sm" />
       <span class="text-sm text-base-foreground flex-1">{{
-        $t(planSettingsLabel)
+        $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')
       }}</span>
     </div>
 
@@ -109,7 +115,7 @@
     >
       <i class="icon-[lucide--settings-2] text-muted-foreground text-sm" />
       <span class="text-sm text-base-foreground flex-1">{{
-        $t('userSettings.title')
+        $t('userSettings.accountSettings')
       }}</span>
     </div>
 
@@ -140,9 +146,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'
@@ -152,20 +158,20 @@ const emit = defineEmits<{
   close: []
 }>()
 
-const { buildDocsUrl } = useExternalLink()
-
-const planSettingsLabel = isCloud
-  ? 'settingsCategories.PlanCredits'
-  : 'settingsCategories.Credits'
+const { buildDocsUrl, docsPaths } = useExternalLink()
 
 const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
 const authActions = useFirebaseAuthActions()
 const authStore = useFirebaseAuthStore()
 const dialogService = useDialogService()
-const { isActiveSubscription, subscriptionTierName, fetchStatus } =
-  useSubscription()
-const { flags } = useFeatureFlags()
+const {
+  isActiveSubscription,
+  subscriptionTierName,
+  subscriptionTier,
+  fetchStatus
+} = useSubscription()
+const subscriptionDialog = useSubscriptionDialog()
 const { locale } = useI18n()
 
 const formattedBalance = computed(() => {
@@ -181,11 +187,23 @@ 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')
@@ -205,9 +223,7 @@ const handleTopUp = () => {
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    buildDocsUrl('/tutorials/partner-nodes/pricing', {
-      includeLocale: true
-    }),
+    buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),
     '_blank'
   )
   emit('close')

src/composables/auth/useFirebaseAuthActions.ts

@@ -11,6 +11,7 @@ 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'
 
 /**
@@ -102,8 +103,11 @@ export const useFirebaseAuthActions = () => {
     window.open(response.checkout_url, '_blank')
   }, reportError)
 
-  const accessBillingPortal = wrapWithErrorHandlingAsync(async () => {
-    const response = await authStore.accessBillingPortal()
+  const accessBillingPortal = wrapWithErrorHandlingAsync<
+    [targetTier?: BillingPortalTargetTier],
+    void
+  >(async (targetTier) => {
+    const response = await authStore.accessBillingPortal(targetTier)
     if (!response.billing_portal_url) {
       throw new Error(
         t('toastMessages.failedToAccessBillingPortal', {

src/composables/graph/useGraphNodeManager.ts

@@ -6,6 +6,7 @@ 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
@@ -42,14 +43,15 @@ export interface SafeWidgetData {
   name: string
   type: string
   value: WidgetValue
-  label?: string
-  options?: IWidgetOptions<unknown>
+  borderStyle?: string
   callback?: ((value: unknown) => void) | undefined
+  controlWidget?: SafeControlWidget
+  isDOMWidget?: boolean
+  label?: string
+  nodeType?: string
+  options?: IWidgetOptions<unknown>
   spec?: InputSpec
   slotMetadata?: WidgetSlotMetadata
-  isDOMWidget?: boolean
-  controlWidget?: SafeControlWidget
-  borderStyle?: string
 }
 
 export interface VueNodeData {
@@ -96,6 +98,11 @@ function getControlWidget(widget: IBaseWidget): SafeControlWidget | undefined {
     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,
@@ -131,12 +138,13 @@ 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,
-        controlWidget: getControlWidget(widget)
+        slotMetadata: slotInfo
       }
     } catch (error) {
       return {
@@ -218,6 +226,15 @@ 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) => {
@@ -252,7 +269,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       badges,
       hasErrors: !!node.has_errors,
       widgets: safeWidgets,
-      inputs: node.inputs ? [...node.inputs] : undefined,
+      inputs: reactiveInputs,
       outputs: node.outputs ? [...node.outputs] : undefined,
       flags: node.flags ? { ...node.flags } : undefined,
       color: node.color || undefined,
@@ -328,7 +345,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
    * Creates a wrapped callback for a widget that maintains LiteGraph/Vue sync
    */
   const createWrappedWidgetCallback = (
-    widget: { value?: unknown; name: string }, // LiteGraph widget with minimal typing
+    widget: IBaseWidget, // LiteGraph widget with minimal typing
     originalCallback: ((value: unknown) => void) | undefined,
     nodeId: string
   ) => {
@@ -355,10 +372,10 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
         }
 
         // Always update widget.value to ensure sync
-        widget.value = value
+        widget.value = value ?? undefined
 
         // 2. Call the original callback if it exists
-        if (originalCallback) {
+        if (originalCallback && widget.type !== 'asset') {
           originalCallback.call(widget, value)
         }
 

src/composables/node/useNodePricing.ts

@@ -329,6 +329,123 @@ 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
  */
@@ -395,6 +512,46 @@ 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
     },
@@ -1482,119 +1639,16 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
     },
     // Tripo nodes - using actual node names from ComfyUI
     TripoTextToModelNode: {
-      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'
-            }
-          }
-        }
-      }
+      displayPrice: (node: LGraphNode): string =>
+        calculateTripo3DGenerationPrice(node, 'text')
     },
     TripoImageToModelNode: {
-      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'
-            }
-          }
-        }
-      }
+      displayPrice: (node: LGraphNode): string =>
+        calculateTripo3DGenerationPrice(node, 'image')
     },
-    TripoRefineNode: {
-      displayPrice: '$0.3/Run'
+    TripoMultiviewToModelNode: {
+      displayPrice: (node: LGraphNode): string =>
+        calculateTripo3DGenerationPrice(node, 'multiview')
     },
     TripoTextureNode: {
       displayPrice: (node: LGraphNode): string => {
@@ -1608,68 +1662,94 @@ const apiNodeCosts: Record<string, { displayPrice: string | PricingFunction }> =
         return textureQuality.includes('detailed') ? '$0.2/Run' : '$0.1/Run'
       }
     },
-    TripoConvertModelNode: {
-      displayPrice: '$0.10/Run'
+    TripoRigNode: {
+      displayPrice: '$0.25/Run'
     },
-    TripoRetargetRiggedModelNode: {
-      displayPrice: '$0.10/Run'
-    },
-    TripoMultiviewToModelNode: {
+    TripoConversionNode: {
       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
+        const getWidgetValue = (name: string) =>
+          node.widgets?.find((w) => w.name === name)?.value
 
-        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'
-            }
-          }
+        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: {
+      displayPrice: '$0.10/Run'
+    },
+    TripoRefineNode: {
+      displayPrice: '$0.30/Run'
+    },
     // Google/Gemini nodes
     GeminiNode: {
       displayPrice: (node: LGraphNode): string => {
@@ -1984,6 +2064,7 @@ 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'],
@@ -2019,8 +2100,51 @@ export const useNodePricing = () => {
       RunwayImageToVideoNodeGen4: ['duration'],
       RunwayFirstLastFrameNode: ['duration'],
       // Tripo nodes
-      TripoTextToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
-      TripoImageToModelNode: ['quad', 'style', 'texture', 'texture_quality'],
+      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'
+      ],
       TripoTextureNode: ['texture_quality'],
       // Google/Gemini nodes
       GeminiNode: ['model'],

src/composables/node/usePriceBadge.ts

@@ -1,7 +1,6 @@
 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'
 
@@ -10,7 +9,6 @@ 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))
@@ -40,53 +38,26 @@ export const usePriceBadge = () => {
 
   function isCreditsBadge(badge: LGraphBadge | (() => LGraphBadge)): boolean {
     const badgeInstance = typeof badge === 'function' ? badge() : badge
-    if (flags.subscriptionTiersEnabled) {
-      return badgeInstance.icon?.image === componentIconSvg
-    } else {
-      return badgeInstance.icon?.unicode === '\ue96b'
-    }
+    return badgeInstance.icon?.image === componentIconSvg
   }
 
   const colorPaletteStore = useColorPaletteStore()
   function getCreditsBadge(price: string): LGraphBadge {
     const isLightTheme = colorPaletteStore.completedActivePalette.light_theme
 
-    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 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'
+    })
   }
   return {
     getCreditsBadge,

src/composables/useExternalLink.ts

@@ -92,8 +92,14 @@ 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
+    staticUrls,
+    docsPaths
   }
 }

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',
-  SUBSCRIPTION_TIERS_ENABLED = 'subscription_tiers_enabled',
-  ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled'
+  ONBOARDING_SURVEY_ENABLED = 'onboarding_survey_enabled',
+  HUGGINGFACE_MODEL_IMPORT_ENABLED = 'huggingface_model_import_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/core/graph/widgets/dynamicWidgets.ts

@@ -1,5 +1,6 @@
+import { remove } from 'es-toolkit'
+
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { NodeSlotType } from '@/lib/litegraph/src/types/globalEnums'
 import type {
   ISlotType,
   INodeInputSlot,
@@ -23,22 +24,41 @@ import type { ComfyApp } from '@/scripts/app'
 const INLINE_INPUTS = false
 
 type MatchTypeNode = LGraphNode &
-  Pick<Required<LGraphNode>, 'comfyMatchType' | 'onConnectionsChange'>
+  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[]
+        }
+      >
+    }
+  }
 
 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 }
@@ -66,72 +86,47 @@ function dynamicComboWidget(
     appArg,
     widgetName
   )
-  let currentDynamicNames: string[] = []
+  function isInGroup(e: { name: string }): boolean {
+    return e.name.startsWith(inputName + '.')
+  }
   const updateWidgets = (value?: string) => {
     if (!node.widgets) throw new Error('Not Reachable')
     const newSpec = value ? options[value] : undefined
-    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 removedInputs = remove(node.inputs, isInGroup)
+    remove(node.widgets, isInGroup)
+
+    if (!newSpec) return
 
     const insertionPoint = node.widgets.findIndex((w) => w === widget) + 1
     const startingLength = node.widgets.length
-    const initialInputIndex =
-      node.inputs.findIndex((i) => i.name === widget.name) + 1
-    let startingInputLength = node.inputs.length
+    const startingInputLength = node.inputs.length
+
     if (insertionPoint === 0)
       throw new Error("Dynamic widget doesn't exist on node")
-    const inputTypes: [Record<string, InputSpec> | undefined, boolean][] = [
-      [newSpec.required, false],
-      [newSpec.optional, true]
+    const inputTypes: (Record<string, InputSpec> | undefined)[] = [
+      newSpec.required,
+      newSpec.optional
     ]
-    for (const [inputType, isOptional] of inputTypes)
+    inputTypes.forEach((inputType, idx) => {
       for (const key in inputType ?? {}) {
         const name = `${widget.name}.${key}`
         const specToAdd = transformInputSpecV1ToV2(inputType![key], {
           name,
-          isOptional
+          isOptional: idx !== 0
         })
         specToAdd.display_name = key
         addNodeInput(node, specToAdd)
-        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
+        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)
+        }
       }
+    })
 
-    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)
@@ -157,6 +152,28 @@ 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()
@@ -243,8 +260,9 @@ function changeOutputType(
 }
 
 function withComfyMatchType(node: LGraphNode): asserts node is MatchTypeNode {
-  if (node.comfyMatchType) return
-  node.comfyMatchType = {}
+  if (node.comfyDynamic?.matchType) return
+  node.comfyDynamic ??= {}
+  node.comfyDynamic.matchType = {}
 
   const outputGroups = node.constructor.nodeData?.output_matchtypes
   node.onConnectionsChange = useChainCallback(
@@ -258,9 +276,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.comfyMatchType).find(
-        ([, group]) => input.name in group
-      ) ?? ['', undefined]
+      const [matchKey, matchGroup] = Object.entries(
+        this.comfyDynamic.matchType
+      ).find(([, group]) => input.name in group) ?? ['', undefined]
       if (!matchGroup) return
       if (iscon && linf) {
         const { output, subgraphInput } = linf.resolve(this.graph)
@@ -317,8 +335,8 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   const typedSpec = { ...inputSpec, type: allowed_types }
   addNodeInput(node, typedSpec)
   withComfyMatchType(node)
-  node.comfyMatchType[template_id] ??= {}
-  node.comfyMatchType[template_id][name] = allowed_types
+  node.comfyDynamic.matchType[template_id] ??= {}
+  node.comfyDynamic.matchType[template_id][name] = allowed_types
 
   //TODO: instead apply on output add?
   //ensure outputs get updated
@@ -329,160 +347,215 @@ function applyMatchType(node: LGraphNode, inputSpec: InputSpecV2) {
   )
 }
 
-function applyAutogrow(node: LGraphNode, untypedInputSpec: 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
+) {
   const { addNodeInput } = useLitegraphService()
+  const { max, min, inputSpecs } = node.comfyDynamic.autogrow[groupName]
+  if (ordinal >= max) return
 
-  const parseResult = zAutogrowOptions.safeParse(untypedInputSpec)
-  if (!parseResult.success) throw new Error('invalid Autogrow spec')
-  const inputSpec = parseResult.data
+  const namedSpecs = inputSpecs.map((input) => ({
+    ...input,
+    isOptional: ordinal >= (min ?? 0) || input.isOptional,
+    ...autogrowOrdinalToName(ordinal, input.name, groupName, node)
+  }))
 
-  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 })
+  const newInputs = namedSpecs
+    .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 (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)
+}
 
-  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
-  }
-  function nameToInput(name: string) {
-    return node.inputs[nameToInputIndex(name)]
+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
   }
+  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
 
-  //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)
+  //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
   }
-  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)
-    }
-    trackedInputs.splice(groupIndex, 1)
-    node.size[1] = node.computeSize([...node.size])[1]
-    app.canvas?.setDirty(true, true)
-  }
-
-  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)
+  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 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)
+      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
     }
+    const lastInput = groupInputs.at(column - stride)
+    if (!lastInput) continue
+    lastInput.link = null
   }
-  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])
+  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 = {}
 
   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,
-    (
-      type: ISlotType,
-      index: number,
+    function (
+      this: AutogrowNode,
+      contype: ISlotType,
+      slot: number,
       iscon: boolean,
       linf: LLink | null | undefined
-    ) => {
-      if (type !== NodeSlotType.INPUT) return
-      const inputName = node.inputs[index].name
-      if (!trackedInputs.flat().some((name) => name === inputName)) return
-      if (iscon) {
+    ) {
+      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 (swappingConnection || !linf) return
-        inputConnected(index)
+        autogrowInputConnected(slot, this)
       } else {
-        if (pendingConnection === index) {
+        if (pendingConnection === slot) {
           swappingConnection = true
           requestAnimationFrame(() => (swappingConnection = false))
           return
         }
-        requestAnimationFrame(() => inputDisconnected(index))
+        requestAnimationFrame(() => autogrowInputDisconnected(slot, this))
       }
     }
   )
 }
+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,6 +257,8 @@ 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 comfyMatchType?: Record<string, Record<string, string>>
+  declare comfyDynamic?: Record<string, object>
   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,11 +2013,13 @@ export class LGraphNode
       out[2] = this.size[0]
       out[3] = this.size[1] + titleHeight
     } else {
-      ctx.font = this.innerFontStyle
+      if (ctx) ctx.font = this.innerFontStyle
       this._collapsed_width = Math.min(
         this.size[0],
-        ctx.measureText(this.getTitle() ?? '').width +
-          LiteGraph.NODE_TITLE_HEIGHT * 2
+        ctx
+          ? ctx.measureText(this.getTitle() ?? '').width +
+              LiteGraph.NODE_TITLE_HEIGHT * 2
+          : 0
       )
       out[2] = this._collapsed_width || LiteGraph.NODE_COLLAPSED_WIDTH
       out[3] = LiteGraph.NODE_TITLE_HEIGHT
@@ -2047,7 +2049,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 / month",
+    "usdPerMonth": "USD / mo",
     "renewsDate": "Renews {date}",
     "expiresDate": "Expires {date}",
     "manageSubscription": "Manage subscription",
@@ -1910,6 +1910,7 @@
     "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",
@@ -1917,67 +1918,30 @@
     "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",
-        "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"
-        }
+        "name": "Founder's Edition"
       },
       "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"
-        }
+        "name": "Standard"
       },
       "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"
-        }
+        "name": "Creator"
       },
       "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"
-        }
+        "name": "Pro"
       }
     },
     "required": {
@@ -1998,36 +1962,37 @@
     "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": "Approx. number of 5s videos generated with Wan Fun Control template",
+    "videoEstimateLabel": "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"
+      "pro": "1 hr",
+      "founder": "30 min"
     }
   },
   "userSettings": {
     "title": "My Account Settings",
+    "accountSettings": "Account settings",
     "name": "Name",
     "email": "Email",
     "provider": "Sign-in Provider",
@@ -2053,7 +2018,7 @@
       "placeholderModel": "Select model...",
       "placeholderUnknown": "Select media..."
     },
-    "numberControl": {
+    "valueControl": {
       "header": {
         "prefix": "Automatically update the value",
         "after": "AFTER",
@@ -2066,9 +2031,11 @@
       "randomize": "Randomize Value",
       "randomizeDesc": "Shuffles the value randomly after each generation",
       "increment": "Increment Value",
-      "incrementDesc": "Adds 1 to the value number",
+      "incrementDesc": "Adds 1 to value or selects the next option",
       "decrement": "Decrement Value",
-      "decrementDesc": "Subtracts 1 from the value number",
+      "decrementDesc": "Subtracts 1 from value or selects the previous option",
+      "fixed": "Fixed Value",
+      "fixedDesc": "Leaves value unchanged",
       "editSettings": "Edit control settings"
     }
   },
@@ -2249,8 +2216,11 @@
     "baseModels": "Base models",
     "browseAssets": "Browse Assets",
     "checkpoints": "Checkpoints",
-    "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",
+    "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",
     "civitaiLinkPlaceholder": "Paste link here",
     "confirmModelDetails": "Confirm Model Details",
     "connectionError": "Please check your connection and try again",
@@ -2268,8 +2238,11 @@
     "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",
@@ -2284,20 +2257,24 @@
     "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",
@@ -2305,10 +2282,15 @@
     "uploadingModel": "Importing model...",
     "uploadModel": "Import",
     "uploadModelDescription1": "Paste a Civitai model download link to add it to your library.",
-    "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>",
+    "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}",
     "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!",
@@ -2444,4 +2426,4 @@
     "recentReleases": "Recent releases",
     "helpCenterMenu": "Help Center Menu"
   }
-}
+}

src/platform/assets/components/MediaAssetCard.vue

@@ -55,7 +55,6 @@
               variant="gray"
               :label="formattedDuration"
             />
-            <SquareChip v-if="fileFormat" variant="gray" :label="fileFormat" />
           </div>
 
           <!-- Media actions - show on hover or when playing -->
@@ -266,12 +265,6 @@ 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'
@@ -289,7 +282,7 @@ const showStaticChips = computed(
     !!asset &&
     !isHovered.value &&
     !isVideoPlaying.value &&
-    (formattedDuration.value || fileFormat.value)
+    formattedDuration.value
 )
 
 // Show action overlay when hovered OR playing

src/platform/assets/components/UploadModelDialog.vue

@@ -4,7 +4,13 @@
   >
     <!-- Step 1: Enter URL -->
     <UploadModelUrlInput
-      v-if="currentStep === 1"
+      v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
+      v-model="wizardData.url"
+      :error="uploadError"
+      class="flex-1"
+    />
+    <UploadModelUrlInputCivitai
+      v-else-if="currentStep === 1"
       v-model="wizardData.url"
       :error="uploadError"
     />
@@ -46,14 +52,17 @@
 <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,7 +1,11 @@
 <template>
   <div class="flex items-center gap-2 p-4 font-bold">
-    <img src="/assets/images/civitai.svg" class="size-4" />
-    <span>{{ $t('assetBrowser.uploadModelFromCivitai') }}</span>
+    <img
+      v-if="!flags.huggingfaceModelImportEnabled"
+      src="/assets/images/civitai.svg"
+      class="size-4"
+    />
+    <span>{{ $t(titleKey) }}</span>
     <span
       class="rounded-full bg-white px-1.5 py-0 text-xxs font-inter font-semibold uppercase text-black"
     >
@@ -9,3 +13,17 @@
     </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,13 +1,33 @@
 <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-if="currentStep === 1"
+      v-else-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="showVideoHelp = true"
+      @click="showCivitaiHelp = true"
     >
       <template #icon>
         <i class="icon-[lucide--circle-question-mark]" />
@@ -74,10 +94,15 @@
       @click="emit('close')"
     />
     <VideoHelpDialog
-      v-model="showVideoHelp"
+      v-model="showCivitaiHelp"
       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>
 
@@ -86,9 +111,13 @@ 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 showVideoHelp = ref(false)
+const { flags } = useFeatureFlags()
+
+const showCivitaiHelp = ref(false)
+const showHuggingFaceHelp = ref(false)
 
 defineProps<{
   currentStep: number

src/platform/assets/components/UploadModelUrlInput.vue

@@ -1,28 +1,74 @@
 <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 v-html="$t('assetBrowser.uploadModelDescription2')" />
-        <li v-html="$t('assetBrowser.uploadModelDescription3')" />
-      </ul>
+  <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>
 
-    <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 class="text-sm text-muted">
+      {{ $t('assetBrowser.uploadModelHelpFooterText') }}
     </div>
   </div>
 </template>
@@ -44,4 +90,9 @@ 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

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

src/platform/assets/composables/useUploadModelWizard.ts

@@ -1,9 +1,15 @@
 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'
 
@@ -21,8 +27,10 @@ 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)
@@ -37,6 +45,20 @@ 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,
@@ -54,15 +76,6 @@ 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
 
@@ -75,17 +88,36 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     }
     wizardData.value.url = cleanedUrl
 
-    if (!isCivitaiUrl(wizardData.value.url)) {
-      uploadError.value = st(
-        'assetBrowser.onlyCivitaiUrlsSupported',
-        'Only Civitai URLs are supported'
-      )
+    // 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
+      })
       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
@@ -125,6 +157,14 @@ 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'
 
@@ -170,7 +210,7 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
         name: filename,
         tags,
         user_metadata: {
-          source: 'civitai',
+          source: source.type,
           source_url: wizardData.value.url,
           model_type: selectedModelType.value
         },
@@ -224,6 +264,7 @@ export function useUploadModelWizard(modelTypes: Ref<ModelTypeOption[]>) {
     // Computed
     canFetchMetadata,
     canUploadModel,
+    detectedSource,
 
     // Actions
     fetchMetadata,

src/platform/assets/importSources/civitaiImportSource.ts

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

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

@@ -0,0 +1,24 @@
+/**
+ * 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

@@ -0,0 +1,15 @@
+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,178 +1,268 @@
 <template>
-  <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-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>
-
-      <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"
+  <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"
             >
-              {{ tier.credits }}
-            </span>
+              -20%
+            </div>
           </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">
+        </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">
-              <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"
-                />
+              <div class="flex flex-row items-baseline gap-2">
                 <span
-                  class="text-sm font-normal text-muted-foreground cursor-pointer hover:text-base-foreground"
-                  @click="togglePopover"
+                  class="font-inter text-[32px] font-semibold leading-normal text-base-foreground"
                 >
-                  {{ t('subscription.videoEstimateHelp') }}
+                  <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>
-            <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 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-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>
   </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,
@@ -181,78 +271,99 @@ import {
 import type { components } from '@/types/comfyRegistryTypes'
 
 type SubscriptionTier = components['schemas']['SubscriptionTier']
-type TierKey = 'standard' | 'creator' | 'pro'
+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
+}
 
 interface PricingTierConfig {
   id: SubscriptionTier
-  key: TierKey
+  key: CheckoutTierKey
   name: string
-  price: string
-  credits: string
+  pricing: TierPricing
   maxDuration: string
   customLoRAs: boolean
-  videoEstimate: string
   isPopular?: boolean
 }
 
-const TIER_TO_KEY: Record<SubscriptionTier, TierKey> = {
-  STANDARD: 'standard',
-  CREATOR: 'creator',
-  PRO: 'pro',
-  FOUNDERS_EDITION: 'standard'
-}
+const billingCycleOptions: BillingCycleOption[] = [
+  { label: t('subscription.yearly'), value: 'yearly' },
+  { label: t('subscription.monthly'), value: 'monthly' }
+]
 
 const tiers: PricingTierConfig[] = [
   {
     id: 'STANDARD',
     key: 'standard',
     name: t('subscription.tiers.standard.name'),
-    price: t('subscription.tiers.standard.price'),
-    credits: t('subscription.credits.standard'),
+    pricing: TIER_PRICING.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'),
-    price: t('subscription.tiers.creator.price'),
-    credits: t('subscription.credits.creator'),
+    pricing: TIER_PRICING.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'),
-    price: t('subscription.tiers.pro.price'),
-    credits: t('subscription.credits.pro'),
+    pricing: TIER_PRICING.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 } = useSubscription()
+const { isActiveSubscription, subscriptionTier, isYearlySubscription } =
+  useSubscription()
 const { accessBillingPortal, reportError } = useFirebaseAuthActions()
 const { wrapWithErrorHandlingAsync } = useErrorHandling()
 
 const isLoading = ref(false)
-const loadingTier = ref<TierKey | null>(null)
+const loadingTier = ref<CheckoutTierKey | null>(null)
 const popover = ref()
+const currentBillingCycle = ref<BillingCycle>('yearly')
 
 const currentTierKey = computed<TierKey | null>(() =>
   subscriptionTier.value ? TIER_TO_KEY[subscriptionTier.value] : null
 )
 
-const isCurrentPlan = (tierKey: TierKey): boolean =>
-  currentTierKey.value === tierKey
+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 togglePopover = (event: Event) => {
   popover.value.toggle(event)
@@ -260,9 +371,15 @@ const togglePopover = (event: Event) => {
 
 const getButtonLabel = (tier: PricingTierConfig): string => {
   if (isCurrentPlan(tier.key)) return t('subscription.currentPlan')
-  if (!isActiveSubscription.value)
-    return t('subscription.subscribeTo', { plan: tier.name })
-  return t('subscription.changeTo', { plan: tier.name })
+
+  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 })
 }
 
 const getButtonSeverity = (tier: PricingTierConfig): 'primary' | 'secondary' =>
@@ -274,17 +391,27 @@ const getButtonSeverity = (tier: PricingTierConfig): 'primary' | 'secondary' =>
 
 const getButtonTextClass = (tier: PricingTierConfig): string =>
   tier.key === 'creator'
-    ? 'font-inter text-sm font-bold leading-normal text-white'
+    ? 'font-inter text-sm font-bold leading-normal text-base-background'
     : 'font-inter text-sm font-bold leading-normal text-primary-foreground'
 
-const initiateCheckout = async (tierKey: TierKey) => {
+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 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/${tierKey}`,
+    `${getComfyApiBaseUrl()}/customers/cloud-subscription-checkout/${checkoutTier}`,
     {
       method: 'POST',
       headers: { ...authHeader, 'Content-Type': 'application/json' }
@@ -317,24 +444,45 @@ const initiateCheckout = async (tierKey: TierKey) => {
   return await response.json()
 }
 
-const handleSubscribe = wrapWithErrorHandlingAsync(async (tierKey: TierKey) => {
-  if (!isCloud || isLoading.value || isCurrentPlan(tierKey)) return
+const handleSubscribe = wrapWithErrorHandlingAsync(
+  async (tierKey: CheckoutTierKey) => {
+    if (!isCloud || isLoading.value || isCurrentPlan(tierKey)) return
 
-  isLoading.value = true
-  loadingTier.value = tierKey
+    isLoading.value = true
+    loadingTier.value = tierKey
 
-  try {
-    if (isActiveSubscription.value) {
-      await accessBillingPortal()
-    } else {
-      const response = await initiateCheckout(tierKey)
-      if (response.checkout_url) {
-        window.open(response.checkout_url, '_blank')
+    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')
+        }
       }
+    } finally {
+      isLoading.value = false
+      loadingTier.value = null
     }
-  } finally {
-    isLoading.value = false
-    loadingTier.value = null
-  }
-}, reportError)
+  },
+  reportError
+)
 </script>

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

@@ -26,7 +26,6 @@
 import Button from 'primevue/button'
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { isCloud } from '@/platform/distribution/types'
 import { useTelemetry } from '@/platform/telemetry'
@@ -54,10 +53,7 @@ const emit = defineEmits<{
 
 const { subscribe, isActiveSubscription, fetchStatus, showSubscriptionDialog } =
   useSubscription()
-const { flags } = useFeatureFlags()
-const shouldUseStripePricing = computed(
-  () => isCloud && Boolean(flags.subscriptionTiersEnabled)
-)
+
 const telemetry = useTelemetry()
 
 const isLoading = ref(false)
@@ -112,7 +108,7 @@ const stopPolling = () => {
 watch(
   [isAwaitingStripeSubscription, isActiveSubscription],
   ([awaiting, isActive]) => {
-    if (shouldUseStripePricing.value && awaiting && isActive) {
+    if (isCloud && awaiting && isActive) {
       emit('subscribed')
       isAwaitingStripeSubscription.value = false
     }
@@ -122,9 +118,6 @@ watch(
 const handleSubscribe = async () => {
   if (isCloud) {
     useTelemetry()?.trackSubscription('subscribe_clicked')
-  }
-
-  if (shouldUseStripePricing.value) {
     isAwaitingStripeSubscription.value = true
     showSubscriptionDialog()
     return

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

@@ -1,7 +1,7 @@
 <template>
   <TabPanel value="PlanCredits" class="subscription-container h-full">
     <div class="flex h-full flex-col gap-6">
-      <div class="flex items-baseline gap-2">
+      <div class="flex items-center gap-2">
         <span class="text-2xl font-inter font-semibold leading-tight">
           {{
             isActiveSubscription
@@ -9,10 +9,12 @@
               : $t('subscription.titleUnsubscribed')
           }}
         </span>
-        <CloudBadge
-          reverse-order
-          background-color="var(--p-dialog-background)"
-        />
+        <div class="pt-1">
+          <CloudBadge
+            reverse-order
+            background-color="var(--p-dialog-background)"
+          />
+        </div>
       </div>
 
       <div class="grow overflow-auto">
@@ -154,9 +156,9 @@
                       <div class="flex items-center gap-1 min-w-0">
                         <div
                           class="text-sm truncate text-muted"
-                          :title="$t('subscription.creditsRemainingThisMonth')"
+                          :title="creditsRemainingLabel"
                         >
-                          {{ $t('subscription.creditsRemainingThisMonth') }}
+                          {{ creditsRemainingLabel }}
                         </div>
                       </div>
                     </div>
@@ -361,26 +363,18 @@ import { useSubscription } from '@/platform/cloud/subscription/composables/useSu
 import { useSubscriptionActions } from '@/platform/cloud/subscription/composables/useSubscriptionActions'
 import { useSubscriptionCredits } from '@/platform/cloud/subscription/composables/useSubscriptionCredits'
 import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
-import type { components } from '@/types/comfyRegistryTypes'
+import {
+  DEFAULT_TIER_KEY,
+  TIER_TO_KEY,
+  getTierCredits,
+  getTierFeatures,
+  getTierPrice
+} from '@/platform/cloud/subscription/constants/tierPricing'
 import { cn } from '@/utils/tailwindUtil'
 
-type SubscriptionTier = components['schemas']['SubscriptionTier']
-
-/** Maps API subscription tier values to i18n translation keys */
-const TIER_TO_I18N_KEY = {
-  STANDARD: 'standard',
-  CREATOR: 'creator',
-  PRO: 'pro',
-  FOUNDERS_EDITION: 'founder'
-} as const satisfies Record<SubscriptionTier, string>
-
-type TierKey = (typeof TIER_TO_I18N_KEY)[SubscriptionTier]
-
-const DEFAULT_TIER_KEY: TierKey = 'standard'
-
-const { buildDocsUrl } = useExternalLink()
+const { buildDocsUrl, docsPaths } = useExternalLink()
 const authActions = useFirebaseAuthActions()
-const { t } = useI18n()
+const { t, n } = useI18n()
 
 const {
   isActiveSubscription,
@@ -389,6 +383,7 @@ const {
   formattedEndDate,
   subscriptionTier,
   subscriptionTierName,
+  isYearlySubscription,
   handleInvoiceHistory
 } = useSubscription()
 
@@ -397,9 +392,16 @@ const { show: showSubscriptionDialog } = useSubscriptionDialog()
 const tierKey = computed(() => {
   const tier = subscriptionTier.value
   if (!tier) return DEFAULT_TIER_KEY
-  return TIER_TO_I18N_KEY[tier] ?? DEFAULT_TIER_KEY
+  return TIER_TO_KEY[tier] ?? DEFAULT_TIER_KEY
 })
-const tierPrice = computed(() => t(`subscription.tiers.${tierKey.value}.price`))
+const tierPrice = computed(() =>
+  getTierPrice(tierKey.value, isYearlySubscription.value)
+)
+const creditsRemainingLabel = computed(() =>
+  isYearlySubscription.value
+    ? t('subscription.creditsRemainingThisYear')
+    : t('subscription.creditsRemainingThisMonth')
+)
 
 // Tier benefits for v-for loop
 type BenefitType = 'metric' | 'feature'
@@ -411,49 +413,45 @@ interface Benefit {
   value?: string
 }
 
-const BENEFITS_BY_TIER: Record<
-  TierKey,
-  ReadonlyArray<Omit<Benefit, 'label' | 'value'>>
-> = {
-  standard: [
-    { key: 'monthlyCredits', type: 'metric' },
-    { key: 'maxDuration', type: 'metric' },
-    { key: 'gpu', type: 'feature' },
-    { key: 'addCredits', type: 'feature' }
-  ],
-  creator: [
-    { key: 'monthlyCredits', type: 'metric' },
-    { key: 'maxDuration', type: 'metric' },
-    { key: 'gpu', type: 'feature' },
-    { key: 'addCredits', type: 'feature' },
-    { key: 'customLoRAs', type: 'feature' }
-  ],
-  pro: [
-    { key: 'monthlyCredits', type: 'metric' },
-    { key: 'maxDuration', type: 'metric' },
-    { key: 'gpu', type: 'feature' },
-    { key: 'addCredits', type: 'feature' },
-    { key: 'customLoRAs', type: 'feature' }
-  ],
-  founder: [
-    { key: 'monthlyCredits', type: 'metric' },
-    { key: 'maxDuration', type: 'metric' },
-    { key: 'gpu', type: 'feature' },
-    { key: 'addCredits', type: 'feature' }
-  ]
-}
-
-const tierBenefits = computed(() => {
+const tierBenefits = computed((): Benefit[] => {
   const key = tierKey.value
-  const benefitConfig = BENEFITS_BY_TIER[key]
 
-  return benefitConfig.map((config) => ({
-    ...config,
-    ...(config.type === 'metric' && {
-      value: t(`subscription.tiers.${key}.benefits.${config.key}`)
-    }),
-    label: t(`subscription.tiers.${key}.benefits.${config.key}Label`)
-  }))
+  const benefits: Benefit[] = [
+    {
+      key: 'monthlyCredits',
+      type: 'metric',
+      value: n(getTierCredits(key)),
+      label: isYearlySubscription.value
+        ? t('subscription.yearlyCreditsLabel')
+        : t('subscription.monthlyCreditsLabel')
+    },
+    {
+      key: 'maxDuration',
+      type: 'metric',
+      value: t(`subscription.maxDuration.${key}`),
+      label: t('subscription.maxDurationLabel')
+    },
+    {
+      key: 'gpu',
+      type: 'feature',
+      label: t('subscription.gpuLabel')
+    },
+    {
+      key: 'addCredits',
+      type: 'feature',
+      label: t('subscription.addCreditsLabel')
+    }
+  ]
+
+  if (getTierFeatures(key).customLoRAs) {
+    benefits.push({
+      key: 'customLoRAs',
+      type: 'feature',
+      label: t('subscription.customLoRAsLabel')
+    })
+  }
+
+  return benefits
 })
 
 const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
@@ -469,9 +467,7 @@ const {
 
 const handleOpenPartnerNodesInfo = () => {
   window.open(
-    buildDocsUrl('/tutorials/api-nodes/overview#api-nodes', {
-      includeLocale: true
-    }),
+    buildDocsUrl(docsPaths.partnerNodesPricing, { includeLocale: true }),
     '_blank'
   )
 }

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

@@ -1,45 +1,33 @@
 <template>
   <div
     v-if="showCustomPricingTable"
-    class="flex flex-col gap-6 rounded-[24px] border border-interface-stroke bg-[var(--p-dialog-background)] p-4 shadow-[0_25px_80px_rgba(5,6,12,0.45)] md:p-6"
+    class="relative flex flex-col p-4 pt-8 md:p-16 !overflow-y-auto h-full gap-8"
   >
-    <div
-      class="flex flex-col gap-6 md:flex-row md:items-start md:justify-between"
-    >
-      <div class="flex flex-col gap-2 text-left md:max-w-2xl">
-        <div
-          class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.3em] text-text-secondary"
-        >
-          {{ $t('subscription.required.title') }}
-          <CloudBadge
-            reverse-order
-            no-padding
-            background-color="var(--p-dialog-background)"
-            use-subscription
-          />
-        </div>
-        <div class="text-3xl font-semibold leading-tight md:text-4xl">
-          {{ $t('subscription.description') }}
-        </div>
-      </div>
-      <Button
-        icon="pi pi-times"
-        text
-        rounded
-        class="h-10 w-10 shrink-0 text-text-secondary hover:bg-white/10"
-        :aria-label="$t('g.close')"
-        @click="handleClose"
-      />
+    <Button
+      :pt="{
+        icon: { class: 'text-xl' }
+      }"
+      icon="pi pi-times"
+      text
+      rounded
+      class="shrink-0 text-text-secondary hover:bg-white/10 absolute right-2.5 top-2.5"
+      :aria-label="$t('g.close')"
+      @click="handleClose"
+    />
+    <div class="text-center">
+      <h2 class="text-xl lg:text-2xl text-muted-foreground m-0">
+        {{ $t('subscription.description') }}
+      </h2>
     </div>
 
     <PricingTable class="flex-1" />
 
     <!-- Contact and Enterprise Links -->
-    <div class="flex flex-col items-center">
-      <p class="text-sm text-text-secondary">
+    <div class="flex flex-col items-center gap-2">
+      <p class="text-sm text-text-secondary m-0">
         {{ $t('subscription.haveQuestions') }}
       </p>
-      <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1.5">
         <Button
           :label="$t('subscription.contactUs')"
           text
@@ -95,7 +83,7 @@
       <div>
         <div class="flex flex-col gap-6">
           <div class="inline-flex items-center gap-2">
-            <div class="text-sm text-muted text-text-primary">
+            <div class="text-sm text-text-primary">
               {{ $t('subscription.required.title') }}
             </div>
             <CloudBadge

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

@@ -13,26 +13,18 @@ import {
   useFirebaseAuthStore
 } from '@/stores/firebaseAuthStore'
 import { useDialogService } from '@/services/dialogService'
-import type { components, operations } from '@/types/comfyRegistryTypes'
+import { TIER_TO_KEY } from '@/platform/cloud/subscription/constants/tierPricing'
+import type { operations } from '@/types/comfyRegistryTypes'
 import { useSubscriptionCancellationWatcher } from './useSubscriptionCancellationWatcher'
 
-type CloudSubscriptionCheckoutResponse = {
-  checkout_url: string
-}
+type CloudSubscriptionCheckoutResponse = NonNullable<
+  operations['createCloudSubscriptionCheckout']['responses']['201']['content']['application/json']
+>
 
 export type CloudSubscriptionStatusResponse = NonNullable<
   operations['GetCloudSubscriptionStatus']['responses']['200']['content']['application/json']
 >
 
-type SubscriptionTier = components['schemas']['SubscriptionTier']
-
-const TIER_TO_I18N_KEY: Record<SubscriptionTier, string> = {
-  STANDARD: 'standard',
-  CREATOR: 'creator',
-  PRO: 'pro',
-  FOUNDERS_EDITION: 'founder'
-}
-
 function useSubscriptionInternal() {
   const subscriptionStatus = ref<CloudSubscriptionStatusResponse | null>(null)
   const telemetry = useTelemetry()
@@ -82,11 +74,22 @@ function useSubscriptionInternal() {
     () => subscriptionStatus.value?.subscription_tier ?? null
   )
 
+  const subscriptionDuration = computed(
+    () => subscriptionStatus.value?.subscription_duration ?? null
+  )
+
+  const isYearlySubscription = computed(
+    () => subscriptionDuration.value === 'ANNUAL'
+  )
+
   const subscriptionTierName = computed(() => {
     const tier = subscriptionTier.value
     if (!tier) return ''
-    const key = TIER_TO_I18N_KEY[tier] ?? 'standard'
-    return t(`subscription.tiers.${key}.name`)
+    const key = TIER_TO_KEY[tier] ?? 'standard'
+    const baseName = t(`subscription.tiers.${key}.name`)
+    return isYearlySubscription.value
+      ? t('subscription.tierNameYearly', { name: baseName })
+      : baseName
   })
 
   const buildApiUrl = (path: string) => `${getComfyApiBaseUrl()}${path}`
@@ -241,6 +244,8 @@ function useSubscriptionInternal() {
     formattedRenewalDate,
     formattedEndDate,
     subscriptionTier,
+    subscriptionDuration,
+    isYearlySubscription,
     subscriptionTierName,
     subscriptionStatus,
 

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

@@ -23,13 +23,14 @@ export const useSubscriptionDialog = () => {
         onClose: hide
       },
       dialogComponentProps: {
-        style: 'width: min(1200px, 95vw); max-height: 90vh;',
+        style: 'width: min(1328px, 95vw); max-height: 90vh;',
         pt: {
           root: {
-            class: '!rounded-[32px] overflow-visible'
+            class: 'rounded-2xl bg-transparent'
           },
           content: {
-            class: '!p-0 bg-transparent'
+            class:
+              '!p-0 rounded-2xl border border-border-default bg-base-background/60 backdrop-blur-md shadow-[0_25px_80px_rgba(5,6,12,0.45)]'
           }
         }
       }

src/platform/cloud/subscription/constants/tierPricing.ts

@@ -0,0 +1,56 @@
+import type { components } from '@/types/comfyRegistryTypes'
+
+type SubscriptionTier = components['schemas']['SubscriptionTier']
+
+export type TierKey = 'standard' | 'creator' | 'pro' | 'founder'
+
+export const TIER_TO_KEY: Record<SubscriptionTier, TierKey> = {
+  STANDARD: 'standard',
+  CREATOR: 'creator',
+  PRO: 'pro',
+  FOUNDERS_EDITION: 'founder'
+}
+
+export interface TierPricing {
+  monthly: number
+  yearly: number
+  credits: number
+  videoEstimate: number
+}
+
+export const TIER_PRICING: Record<Exclude<TierKey, 'founder'>, TierPricing> = {
+  standard: { monthly: 20, yearly: 16, credits: 4200, videoEstimate: 164 },
+  creator: { monthly: 35, yearly: 28, credits: 7400, videoEstimate: 288 },
+  pro: { monthly: 100, yearly: 80, credits: 21100, videoEstimate: 821 }
+}
+
+interface TierFeatures {
+  customLoRAs: boolean
+}
+
+const TIER_FEATURES: Record<TierKey, TierFeatures> = {
+  standard: { customLoRAs: false },
+  creator: { customLoRAs: true },
+  pro: { customLoRAs: true },
+  founder: { customLoRAs: false }
+}
+
+export const DEFAULT_TIER_KEY: TierKey = 'standard'
+
+const FOUNDER_MONTHLY_PRICE = 20
+const FOUNDER_MONTHLY_CREDITS = 5460
+
+export function getTierPrice(tierKey: TierKey, isYearly = false): number {
+  if (tierKey === 'founder') return FOUNDER_MONTHLY_PRICE
+  const pricing = TIER_PRICING[tierKey]
+  return isYearly ? pricing.yearly : pricing.monthly
+}
+
+export function getTierCredits(tierKey: TierKey): number {
+  if (tierKey === 'founder') return FOUNDER_MONTHLY_CREDITS
+  return TIER_PRICING[tierKey].credits
+}
+
+export function getTierFeatures(tierKey: TierKey): TierFeatures {
+  return TIER_FEATURES[tierKey]
+}

src/platform/cloud/subscription/utils/subscriptionTierRank.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+
+import { getPlanRank, isPlanDowngrade } from './subscriptionTierRank'
+
+describe('subscriptionTierRank', () => {
+  it('returns consistent order for ranked plans', () => {
+    const yearlyPro = getPlanRank({ tierKey: 'pro', billingCycle: 'yearly' })
+    const monthlyStandard = getPlanRank({
+      tierKey: 'standard',
+      billingCycle: 'monthly'
+    })
+
+    expect(yearlyPro).toBeLessThan(monthlyStandard)
+  })
+
+  it('identifies downgrades correctly', () => {
+    const result = isPlanDowngrade({
+      current: { tierKey: 'pro', billingCycle: 'yearly' },
+      target: { tierKey: 'creator', billingCycle: 'monthly' }
+    })
+
+    expect(result).toBe(true)
+  })
+
+  it('treats lateral or upgrade moves as non-downgrades', () => {
+    expect(
+      isPlanDowngrade({
+        current: { tierKey: 'standard', billingCycle: 'monthly' },
+        target: { tierKey: 'creator', billingCycle: 'monthly' }
+      })
+    ).toBe(false)
+
+    expect(
+      isPlanDowngrade({
+        current: { tierKey: 'creator', billingCycle: 'monthly' },
+        target: { tierKey: 'creator', billingCycle: 'monthly' }
+      })
+    ).toBe(false)
+  })
+
+  it('treats unknown plans (e.g., founder) as non-downgrade cases', () => {
+    const result = isPlanDowngrade({
+      current: { tierKey: 'founder', billingCycle: 'monthly' },
+      target: { tierKey: 'standard', billingCycle: 'monthly' }
+    })
+
+    expect(result).toBe(false)
+  })
+})

src/platform/cloud/subscription/utils/subscriptionTierRank.ts

@@ -0,0 +1,58 @@
+import type { TierKey } from '@/platform/cloud/subscription/constants/tierPricing'
+
+export type BillingCycle = 'monthly' | 'yearly'
+
+type RankedTierKey = Exclude<TierKey, 'founder'>
+type RankedPlanKey = `${BillingCycle}-${RankedTierKey}`
+
+interface PlanDescriptor {
+  tierKey: TierKey
+  billingCycle: BillingCycle
+}
+
+const PLAN_ORDER: RankedPlanKey[] = [
+  'yearly-pro',
+  'yearly-creator',
+  'yearly-standard',
+  'monthly-pro',
+  'monthly-creator',
+  'monthly-standard'
+]
+
+const PLAN_RANK = PLAN_ORDER.reduce<Map<RankedPlanKey, number>>(
+  (acc, plan, index) => acc.set(plan, index),
+  new Map()
+)
+
+const toRankedPlanKey = (
+  tierKey: TierKey,
+  billingCycle: BillingCycle
+): RankedPlanKey | null => {
+  if (tierKey === 'founder') return null
+  return `${billingCycle}-${tierKey}` as RankedPlanKey
+}
+
+export const getPlanRank = ({
+  tierKey,
+  billingCycle
+}: PlanDescriptor): number => {
+  const planKey = toRankedPlanKey(tierKey, billingCycle)
+  if (!planKey) return Number.POSITIVE_INFINITY
+
+  return PLAN_RANK.get(planKey) ?? Number.POSITIVE_INFINITY
+}
+
+interface DowngradeCheckParams {
+  current: PlanDescriptor
+  target: PlanDescriptor
+}
+
+export const isPlanDowngrade = ({
+  current,
+  target
+}: DowngradeCheckParams): boolean => {
+  const currentRank = getPlanRank(current)
+  const targetRank = getPlanRank(target)
+
+  return targetRank > currentRank
+}

src/platform/remoteConfig/types.ts

@@ -37,8 +37,8 @@ export type RemoteConfig = {
   model_upload_button_enabled?: boolean
   asset_update_options_enabled?: boolean
   private_models_enabled?: boolean
-  subscription_tiers_enabled?: boolean
   onboarding_survey_enabled?: boolean
   stripe_publishable_key?: string
   stripe_pricing_table_id?: string
+  huggingface_model_import_enabled?: boolean
 }

src/platform/settings/composables/useSettingUI.ts

@@ -3,7 +3,6 @@ import type { Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
-import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { isCloud } from '@/platform/distribution/types'
 import type { SettingTreeNode } from '@/platform/settings/settingStore'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -36,7 +35,6 @@ export function useSettingUI(
 
   const { shouldRenderVueNodes } = useVueFeatureFlags()
   const { isActiveSubscription } = useSubscription()
-  const { flags } = useFeatureFlags()
 
   const settingRoot = computed<SettingTreeNode>(() => {
     const root = buildTree(
@@ -106,7 +104,6 @@ export function useSettingUI(
 
   const shouldShowPlanCreditsPanel = computed(() => {
     if (!subscriptionPanel) return false
-    if (!flags.subscriptionTiersEnabled) return true
     return isActiveSubscription.value
   })
 

src/renderer/extensions/minimap/MiniMap.vue

@@ -75,7 +75,7 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
@@ -83,14 +83,13 @@ import { useCommandStore } from '@/stores/commandStore'
 import MiniMapPanel from './MiniMapPanel.vue'
 
 const commandStore = useCommandStore()
-
 const minimapRef = ref<HTMLDivElement>()
+const containerRef = useTemplateRef<HTMLDivElement>('containerRef')
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef')
 
 const {
   initialized,
   visible,
-  containerRef,
-  canvasRef,
   containerStyles,
   viewportStyles,
   width,
@@ -109,7 +108,10 @@ const {
   handlePointerCancel,
   handleWheel,
   setMinimapRef
-} = useMinimap()
+} = useMinimap({
+  containerRefMaybe: containerRef,
+  canvasRefMaybe: canvasRef
+})
 
 const showOptionsPanel = ref(false)
 

src/renderer/extensions/minimap/composables/useMinimap.ts

@@ -1,5 +1,6 @@
 import { useRafFn } from '@vueuse/core'
-import { computed, nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, shallowRef, watch } from 'vue'
+import type { ShallowRef } from 'vue'
 
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -13,14 +14,20 @@ import { useMinimapRenderer } from './useMinimapRenderer'
 import { useMinimapSettings } from './useMinimapSettings'
 import { useMinimapViewport } from './useMinimapViewport'
 
-export function useMinimap() {
+export function useMinimap({
+  canvasRefMaybe,
+  containerRefMaybe
+}: {
+  canvasRefMaybe?: Readonly<ShallowRef<HTMLCanvasElement | null>>
+  containerRefMaybe?: Readonly<ShallowRef<HTMLDivElement | null>>
+} = {}) {
   const canvasStore = useCanvasStore()
   const workflowStore = useWorkflowStore()
   const settingStore = useSettingStore()
 
-  const containerRef = ref<HTMLDivElement>()
-  const canvasRef = ref<HTMLCanvasElement>()
   const minimapRef = ref<HTMLElement | null>(null)
+  const canvasRef = canvasRefMaybe ?? shallowRef(null)
+  const containerRef = containerRefMaybe ?? shallowRef(null)
 
   const visible = ref(true)
   const initialized = ref(false)
@@ -223,8 +230,6 @@ export function useMinimap() {
     visible: computed(() => visible.value),
     initialized: computed(() => initialized.value),
 
-    containerRef,
-    canvasRef,
     containerStyles,
     viewportStyles,
     panelStyles,

src/renderer/extensions/minimap/composables/useMinimapInteraction.ts

@@ -1,10 +1,10 @@
 import { ref } from 'vue'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 
 import type { MinimapCanvas } from '../types'
 
 export function useMinimapInteraction(
-  containerRef: Ref<HTMLDivElement | undefined>,
+  containerRef: Readonly<ShallowRef<HTMLDivElement | null>>,
   bounds: Ref<{ minX: number; minY: number; width: number; height: number }>,
   scale: Ref<number>,
   width: number,

src/renderer/extensions/minimap/composables/useMinimapRenderer.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import type { Ref } from 'vue'
+import type { Ref, ShallowRef } from 'vue'
 
 import type { LGraph } from '@/lib/litegraph/src/litegraph'
 
@@ -7,7 +7,7 @@ import { renderMinimapToCanvas } from '../minimapCanvasRenderer'
 import type { UpdateFlags } from '../types'
 
 export function useMinimapRenderer(
-  canvasRef: Ref<HTMLCanvasElement | undefined>,
+  canvasRef: Readonly<ShallowRef<HTMLCanvasElement | null>>,
   graph: Ref<LGraph | null>,
   bounds: Ref<{ minX: number; minY: number; width: number; height: number }>,
   scale: Ref<number>,

src/renderer/extensions/vueNodes/VideoPreview.vue

@@ -2,16 +2,20 @@
   <div
     v-if="imageUrls.length > 0"
     class="video-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2"
-    tabindex="0"
-    role="region"
-    :aria-label="$t('g.videoPreview')"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
     @keydown="handleKeyDown"
   >
     <!-- Video Wrapper -->
     <div
+      ref="videoWrapperEl"
       class="relative h-full w-full grow overflow-hidden rounded-[5px] bg-node-component-surface"
+      tabindex="0"
+      role="region"
+      :aria-label="$t('g.videoPreview')"
+      :aria-busy="showLoader"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="handleMouseLeave"
+      @focusin="handleFocusIn"
+      @focusout="handleFocusOut"
     >
       <!-- Error State -->
       <div
@@ -27,18 +31,18 @@
 
       <!-- Loading State -->
       <Skeleton
-        v-if="isLoading && !videoError"
+        v-if="showLoader && !videoError"
         class="absolute inset-0 size-full"
         border-radius="5px"
-        width="16rem"
-        height="16rem"
+        width="100%"
+        height="100%"
       />
 
       <!-- Main Video -->
       <video
         v-if="!videoError"
         :src="currentVideoUrl"
-        :class="cn('block size-full object-contain', isLoading && 'invisible')"
+        :class="cn('block size-full object-contain', showLoader && 'invisible')"
         controls
         loop
         playsinline
@@ -47,10 +51,13 @@
       />
 
       <!-- Floating Action Buttons (appear on hover) -->
-      <div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
+      <div
+        v-if="isHovered || isFocused"
+        class="actions absolute top-2 right-2 flex gap-2.5"
+      >
         <!-- Download Button -->
         <button
-          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-smoke-100"
+          :class="actionButtonClass"
           :title="$t('g.downloadVideo')"
           :aria-label="$t('g.downloadVideo')"
           @click="handleDownload"
@@ -60,7 +67,7 @@
 
         <!-- Close Button -->
         <button
-          class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-smoke-100"
+          :class="actionButtonClass"
           :title="$t('g.removeVideo')"
           :aria-label="$t('g.removeVideo')"
           @click="handleRemove"
@@ -94,7 +101,7 @@
       <span v-if="videoError" class="text-red-400">
         {{ $t('g.errorLoadingVideo') }}
       </span>
-      <span v-else-if="isLoading" class="text-smoke-400">
+      <span v-else-if="showLoader" class="text-smoke-400">
         {{ $t('g.loading') }}...
       </span>
       <span v-else>
@@ -126,12 +133,18 @@ const props = defineProps<VideoPreviewProps>()
 const { t } = useI18n()
 const nodeOutputStore = useNodeOutputStore()
 
+const actionButtonClass =
+  'flex h-8 min-h-8 items-center justify-center gap-2.5 rounded-lg border-0 bg-button-surface px-2 py-2 text-button-surface-contrast shadow-sm transition-colors duration-200 hover:bg-button-hover-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-button-surface-contrast focus-visible:ring-offset-2 focus-visible:ring-offset-transparent cursor-pointer'
+
 // Component state
 const currentIndex = ref(0)
 const isHovered = ref(false)
+const isFocused = ref(false)
 const actualDimensions = ref<string | null>(null)
 const videoError = ref(false)
-const isLoading = ref(false)
+const showLoader = ref(false)
+
+const videoWrapperEl = ref<HTMLDivElement>()
 
 // Computed values
 const currentVideoUrl = computed(() => props.imageUrls[currentIndex.value])
@@ -149,16 +162,16 @@ watch(
     // Reset loading and error states when URLs change
     actualDimensions.value = null
     videoError.value = false
-    isLoading.value = newUrls.length > 0
+    showLoader.value = newUrls.length > 0
   },
-  { deep: true }
+  { deep: true, immediate: true }
 )
 
 // Event handlers
 const handleVideoLoad = (event: Event) => {
   if (!event.target || !(event.target instanceof HTMLVideoElement)) return
   const video = event.target
-  isLoading.value = false
+  showLoader.value = false
   videoError.value = false
   if (video.videoWidth && video.videoHeight) {
     actualDimensions.value = `${video.videoWidth} x ${video.videoHeight}`
@@ -166,7 +179,7 @@ const handleVideoLoad = (event: Event) => {
 }
 
 const handleVideoError = () => {
-  isLoading.value = false
+  showLoader.value = false
   videoError.value = true
   actualDimensions.value = null
 }
@@ -194,7 +207,7 @@ const setCurrentIndex = (index: number) => {
   if (index >= 0 && index < props.imageUrls.length) {
     currentIndex.value = index
     actualDimensions.value = null
-    isLoading.value = true
+    showLoader.value = true
     videoError.value = false
   }
 }
@@ -207,6 +220,16 @@ const handleMouseLeave = () => {
   isHovered.value = false
 }
 
+const handleFocusIn = () => {
+  isFocused.value = true
+}
+
+const handleFocusOut = (event: FocusEvent) => {
+  if (!videoWrapperEl.value?.contains(event.relatedTarget as Node)) {
+    isFocused.value = false
+  }
+}
+
 const getNavigationDotClass = (index: number) => {
   return [
     'w-2 h-2 rounded-full transition-all duration-200 border-0 cursor-pointer',