change cloud feature flags to be loaded dynamically at runtime rather than set in build (#6246)

## Summary

Implements server-side remote configuration to decouple runtime behavior
from build artifacts, enabling dynamic configuration updates without
redeployment.

## Technical Changes

- **Replaced** build-time constants (`__MIXPANEL_TOKEN__`,
`__BUILD_FLAGS__`) with runtime configuration loaded from
`/api/features`
- Configuration now sourced from `window.__CONFIG__` (hydrated from
`/api/features` endpoint)
- **Added** `src/platform/remoteConfig/` service that polls server
configuration every 30 seconds
- **Modified** application bootstrap sequence in `main.ts` to load
remote config before module initialization (required for cloud builds)
- **Removed** global constants: `__BUILD_FLAGS__`, `__MIXPANEL_TOKEN__`.
Runtime subscription enforcement toggle via `subscription_required` flag
- Server health alerts with variant-based severity rendering
(info/warning/error) via topbar badges

## Rationale

- **Build-once-deploy-anywhere**: Single immutable artifact promoted
through environments (staging → production)
- **Zero-downtime configuration**: Update behavior without rebuilding or
redeploying the application
- **Incident response**: Disable features or display alerts dynamically
in response to outages or degraded service
- **Instant rollback**: Revert configuration changes server-side without
artifact redeployment
- **Progressive delivery**: Enable A/B testing, canary releases, and
user/region-based configuration
- **Environment parity**: Eliminate configuration drift between staging
and production builds
- Decouples deployment cadence from configuration changes
- Enables GitOps workflows for configuration management separate from
code deployments
- Supports real-time operational control of client behavior
- Reduces build matrix complexity (no per-environment builds)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6246-change-cloud-feature-flags-to-be-loaded-dynamically-at-runtime-rather-than-set-in-build-2966d73d3650811cbb41c9093961037a)
by [Unito](https://www.unito.io)

src/components/actionbar/ComfyRunButton/index.ts

@@ -2,6 +2,6 @@ import { defineAsyncComponent } from 'vue'
 
 import { isCloud } from '@/platform/distribution/types'
 
-export default isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION
+export default isCloud && window.__CONFIG__?.subscription_required
   ? defineAsyncComponent(() => import('./CloudRunButtonWrapper.vue'))
   : defineAsyncComponent(() => import('./ComfyQueueButton.vue'))

src/components/graph/GraphCanvas.vue

@@ -12,7 +12,7 @@
           v-if="isNativeWindow() && workflowTabsPosition !== 'Topbar'"
           class="app-drag fixed top-0 left-0 z-10 h-[var(--comfy-topbar-height)] w-full"
         />
-        <div class="flex">
+        <div class="flex h-full items-center">
           <WorkflowTabs />
           <TopbarBadges />
         </div>

src/components/topbar/TopbarBadge.vue

@@ -1,39 +1,83 @@
 <template>
   <div
-    class="flex items-center gap-2 bg-comfy-menu-secondary"
+    v-tooltip="badge.tooltip"
+    class="flex h-full shrink-0 items-center gap-2 whitespace-nowrap"
     :class="[{ 'flex-row-reverse': reverseOrder }, noPadding ? '' : 'px-3']"
+    :style="{ backgroundColor: 'var(--comfy-menu-bg)' }"
   >
+    <i
+      v-if="iconClass"
+      :class="['shrink-0 text-base', iconClass, iconColorClass]"
+    />
     <div
       v-if="badge.label"
-      class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
-      :class="labelClass"
+      class="shrink-0 rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+      :class="labelClasses"
     >
       {{ badge.label }}
     </div>
-    <div
-      class="font-inter text-sm font-extrabold text-slate-100"
-      :class="textClass"
-    >
+    <div class="font-inter text-sm font-extrabold" :class="textClasses">
       {{ badge.text }}
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { TopbarBadge } from '@/types/comfy'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     badge: TopbarBadge
     reverseOrder?: boolean
     noPadding?: boolean
-    labelClass?: string
-    textClass?: string
   }>(),
   {
     reverseOrder: false,
-    noPadding: false,
-    labelClass: '',
-    textClass: ''
+    noPadding: false
   }
 )
+
+const variant = computed(() => props.badge.variant ?? 'info')
+
+const labelClasses = computed(() => {
+  switch (variant.value) {
+    case 'error':
+      return 'bg-danger-100 text-white'
+    case 'warning':
+      return 'bg-warning-100 text-black'
+    case 'info':
+    default:
+      return 'bg-white text-black'
+  }
+})
+
+const textClasses = computed(() => {
+  switch (variant.value) {
+    case 'error':
+      return 'text-danger-100'
+    case 'warning':
+      return 'text-warning-100'
+    case 'info':
+    default:
+      return 'text-slate-100'
+  }
+})
+
+const iconColorClass = computed(() => textClasses.value)
+
+const iconClass = computed(() => {
+  if (props.badge.icon) {
+    return props.badge.icon
+  }
+  switch (variant.value) {
+    case 'error':
+      return 'pi pi-exclamation-circle'
+    case 'warning':
+      return 'pi pi-exclamation-triangle'
+    case 'info':
+    default:
+      return undefined
+  }
+})
 </script>

src/components/topbar/TopbarBadges.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="flex">
+  <div v-if="notMobile" class="flex h-full shrink-0 items-center">
     <TopbarBadge
       v-for="badge in topbarBadgeStore.badges"
       :key="badge.text"
       :badge
       :reverse-order="reverseOrder"
       :no-padding="noPadding"
-      :label-class="labelClass"
-      :text-class="textClass"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useBreakpoints } from '@vueuse/core'
+
 import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
 
 import TopbarBadge from './TopbarBadge.vue'
@@ -21,16 +21,16 @@ withDefaults(
   defineProps<{
     reverseOrder?: boolean
     noPadding?: boolean
-    labelClass?: string
-    textClass?: string
   }>(),
   {
     reverseOrder: false,
-    noPadding: false,
-    labelClass: '',
-    textClass: ''
+    noPadding: false
   }
 )
 
+const BREAKPOINTS = { md: 880 }
+const breakpoints = useBreakpoints(BREAKPOINTS)
+const notMobile = breakpoints.greater('md')
+
 const topbarBadgeStore = useTopbarBadgeStore()
 </script>