feat: extend feature flags to read from remote config

- Add private_models_enabled to RemoteConfig type
- Update useFeatureFlags to check remoteConfig first, fallback to websocket
- Improve UploadModelUpgradeModal styling and layout
- Update modal footer with external link icon

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: luke-mino-altherr

src/composables/useFeatureFlags.ts

@@ -1,5 +1,6 @@
 import { computed, reactive, readonly } from 'vue'
 
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
 import { api } from '@/scripts/api'
 
 /**
@@ -41,9 +42,10 @@ export function useFeatureFlags() {
       )
     },
     get privateModelsEnabled() {
-      return api.getServerFeature(
-        ServerFeatureFlag.PRIVATE_MODELS_ENABLED,
-        false
+      // Check remote config first (from /api/features), fall back to websocket feature flags
+      return (
+        remoteConfig.value.private_models_enabled ??
+        api.getServerFeature(ServerFeatureFlag.PRIVATE_MODELS_ENABLED, false)
       )
     }
   })

src/platform/assets/components/UploadModelUpgradeModal.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="upload-model-upgrade-modal flex flex-col justify-between gap-6 p-4 pt-6 border-t-[1px] border-border-default"
+    class="upload-model-upgrade-modal flex flex-col justify-between gap-10 p-4 border-t-[1px] border-border-default"
   >
     <!-- Upgrade Content -->
     <UploadModelUpgradeModalBody />
@@ -33,15 +33,7 @@ function handleSubscribe() {
 
 <style scoped>
 .upload-model-upgrade-modal {
-  width: 90vw;
-  max-width: 500px;
-  min-height: 200px;
-}
-
-@media (min-width: 640px) {
-  .upload-model-upgrade-modal {
-    width: auto;
-    min-width: 450px;
-  }
+  width: auto;
+  max-width: min(500px, 90vw);
 }
 </style>

src/platform/assets/components/UploadModelUpgradeModalBody.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-1 flex-col items-center justify-center gap-6 text-base text-muted-foreground"
+    class="flex flex-1 flex-col items-center justify-center text-base text-muted-foreground"
   >
     <p class="m-0 max-w-md">
       {{ $t('assetBrowser.upgradeFeatureDescription') }}

src/platform/assets/components/UploadModelUpgradeModalFooter.vue

@@ -1,16 +1,13 @@
 <template>
-  <div class="flex justify-end gap-2 w-full">
-    <span
+  <div class="flex flex-wrap justify-end gap-2 w-full">
+    <a
+      href="https://blog.comfy.org/p/comfy-cloud-new-features-and-pricing"
+      target="_blank"
       class="text-muted-foreground mr-auto underline flex items-center gap-2"
     >
-      <i class="icon-[lucide--circle-question-mark]" />
-      <a
-        href="https://blog.comfy.org/p/comfy-cloud-new-features-and-pricing"
-        target="_blank"
-        class="text-muted-foreground"
-        >{{ $t('Learn more') }}</a
-      >
-    </span>
+      <i class="icon-[lucide--external-link]" />
+      <span>{{ $t('Learn more') }}</span>
+    </a>
     <TextButton
       :label="$t('g.close')"
       type="transparent"

src/platform/remoteConfig/types.ts

@@ -34,4 +34,5 @@ export type RemoteConfig = {
   comfy_platform_base_url?: string
   firebase_config?: FirebaseRuntimeConfig
   telemetry_disabled_events?: TelemetryEventName[]
+  private_models_enabled?: boolean
 }

src/scripts/api.ts

@@ -1274,6 +1274,7 @@ export class ComfyApi extends EventTarget {
    * @returns The feature value or default
    */
   getServerFeature<T = unknown>(featureName: string, defaultValue?: T): T {
+    console.log('Server feature flags:', this.serverFeatureFlags)
     return get(this.serverFeatureFlags, featureName, defaultValue) as T
   }