From 7caad10e93323c336b8b6b27134f41bec90d26f2 Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Wed, 15 Oct 2025 00:44:32 +0100
Subject: [PATCH] Badge for cloud environment (#6048)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This pull request introduces a new system for displaying
environment-specific badges in the application's top bar, with a focus
on supporting a "Comfy Cloud" badge in production environments. The
changes include new badge types, extension support, UI components, and
environment detection logic to ensure badges are only shown in
appropriate contexts.

**Topbar Badge System**

* Added a new `TopbarBadge` type and support for topbar badges in the
`ComfyExtension` interface to allow extensions to specify badges for the
top bar.
[[1]](diffhunk://#diff-c29886a1b0c982c6fff3545af0ca8ec269876c2cf3948f867d08c14032c04d66R24-R31)
[[2]](diffhunk://#diff-c29886a1b0c982c6fff3545af0ca8ec269876c2cf3948f867d08c14032c04d66R85-R88)
* Created a Pinia store `topbarBadgeStore` to aggregate topbar badges
from all registered extensions for display.

**UI Integration**

* Added a new `TopbarBadges.vue` component to render topbar badges and
integrated it into the top menu bar UI.
[[1]](diffhunk://#diff-6f460b1398fd033a2059daca1f991c74ce572cef86046a3726d1b1a70a3a4325R1-R32)
[[2]](diffhunk://#diff-b7d7bf1028f09fb907c09edf27631214d005c93b80eaff7cf15cfd53671b1e8aL5-R14)
* Updated CSS variables and menu styling to support the new badge
visuals.
[[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R88-R89)
[[2]](diffhunk://#diff-b7d7bf1028f09fb907c09edf27631214d005c93b80eaff7cf15cfd53671b1e8aL5-R14)

**Environment Detection and Extension Registration**

* Added a runtime environment detection utility to determine if the app
is running in production or staging, replacing the previous build-time
constant approach.
* Registered a new `cloudBadge` extension that conditionally adds a
"Comfy Cloud" badge with a "BETA" label when running in production.
[[1]](diffhunk://#diff-b7818ca9daae2411d56695777160b8132507f2a3ff4f700d2510453c8833ca75R1-R15)
[[2]](diffhunk://#diff-236993d9e4213efe96d267c75c3292d32b93aa4dd6c3318d26a397e0ae56bc87R2)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6048-Badge-for-cloud-environment-28c6d73d365081188050ece527c3c8f3)
by [Unito](https://www.unito.io)

<img width="996" height="897" alt="Screenshot 2025-10-14 at 20 02 40"
src="https://github.com/user-attachments/assets/5a3258c5-87fc-46ae-ad23-7669696cb8b6"
/>
---
 packages/design-system/src/css/style.css |  4 ++++
 src/components/topbar/CloudBetaBadge.vue | 19 +++++++++++++++++++
 src/components/topbar/TopMenubar.vue     |  9 ++++++---
 src/locales/en/main.json                 |  3 ++-
 4 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 src/components/topbar/CloudBetaBadge.vue

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index 75019d207..769f52d55 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -88,6 +88,10 @@
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
+  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
+  --text-xxxs: 0.5625rem;
+  --text-xxxs--line-height: calc(1 / 0.5625);
+
   --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
   --color-node-hover-100: rgb(from var(--color-charcoal-100) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-100) r g b/ 0.1);
diff --git a/src/components/topbar/CloudBetaBadge.vue b/src/components/topbar/CloudBetaBadge.vue
new file mode 100644
index 000000000..78e8c1a60
--- /dev/null
+++ b/src/components/topbar/CloudBetaBadge.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="flex items-center gap-2 bg-comfy-menu-secondary px-3">
+    <div
+      class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
+    >
+      {{ betaString }}
+    </div>
+    <div class="font-inter text-sm font-extrabold text-slate-100">
+      {{ cloudText }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const betaString = t('g.beta')
+const cloudText = 'Comfy Cloud'
+</script>
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index d5909766e..3586e1a86 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -2,15 +2,16 @@
   <div>
     <div
       v-show="showTopMenu && workflowTabsPosition === 'Topbar'"
-      class="z-1001 flex h-[38px] w-full content-end"
+      class="z-1001 flex h-9.5 w-full content-end"
       style="background: var(--border-color)"
     >
       <WorkflowTabs />
+      <CloudBetaBadge v-if="isCloud" />
     </div>
     <div
       v-show="showTopMenu"
       ref="topMenuRef"
-      class="comfyui-menu flex items-center"
+      class="comfyui-menu flex items-center bg-gray-100"
       :class="{ dropzone: isDropZone, 'dropzone-active': isDroppable }"
     >
       <CommandMenubar />
@@ -39,14 +40,16 @@ import Actionbar from '@/components/actionbar/ComfyActionbar.vue'
 import CommandMenubar from '@/components/topbar/CommandMenubar.vue'
 import CurrentUserButton from '@/components/topbar/CurrentUserButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
 
+import CloudBetaBadge from './CloudBetaBadge.vue'
+
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
-
 const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
 const betaMenuEnabled = computed(() => menuSetting.value !== 'Disabled')
 const showTopMenu = computed(
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index ed88901c5..c5ac3ca34 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -204,7 +204,8 @@
     "volume": "Volume",
     "halfSpeed": "0.5x",
     "1x": "1x",
-    "2x": "2x"
+    "2x": "2x",
+    "beta": "BETA"
   },
   "manager": {
     "title": "Custom Nodes Manager",