From f7e4e4f1b8fa2a2cb52f6abfac9dd750288256c7 Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Tue, 14 Oct 2025 04:01:19 +0100
Subject: [PATCH] Comfy Cloud Badge indicator (#6043)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

<!-- One sentence describing what changed and why. -->

## Changes

- **What**: <!-- Core functionality added/modified -->
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

## Review Focus

<!-- Critical design decisions or edge cases that need attention -->

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6043-Comfy-Cloud-Badge-indicator-28b6d73d365081b8b549ecc3beb2c132)
by [Unito](https://www.unito.io)
---
 packages/design-system/src/css/style.css |  3 +++
 src/components/topbar/TopMenubar.vue     |  7 ++++--
 src/components/topbar/TopbarBadges.vue   | 32 ++++++++++++++++++++++++
 src/extensions/core/cloudBadge.ts        | 15 +++++++++++
 src/extensions/core/index.ts             |  1 +
 src/stores/topbarBadgeStore.ts           | 18 +++++++++++++
 src/types/comfy.ts                       | 12 +++++++++
 7 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 src/components/topbar/TopbarBadges.vue
 create mode 100644 src/extensions/core/cloudBadge.ts
 create mode 100644 src/stores/topbarBadgeStore.ts

diff --git a/packages/design-system/src/css/style.css b/packages/design-system/src/css/style.css
index fcadf31de..0d72105c0 100644
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -114,6 +114,9 @@
   --color-bypass: #6a246a;
   --color-error: #962a2a;
 
+  /* Comfy menu colors */
+  --color-comfy-menu-secondary: var(--comfy-menu-secondary-bg);
+
   --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/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index e7e049b35..1bed0d400 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="w-full flex content-end z-1001 h-[38px]"
+      class="w-full flex content-end z-1001 h-9.5"
       style="background: var(--border-color)"
     >
       <WorkflowTabs />
+      <TopbarBadges />
     </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 />
@@ -44,6 +45,8 @@ import { app } from '@/scripts/app'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
 
+import TopbarBadges from './TopbarBadges.vue'
+
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
 
diff --git a/src/components/topbar/TopbarBadges.vue b/src/components/topbar/TopbarBadges.vue
new file mode 100644
index 000000000..a6a136dc5
--- /dev/null
+++ b/src/components/topbar/TopbarBadges.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    v-for="badge in topbarBadgeStore.badges"
+    :key="badge.text"
+    class="flex flex-col justify-center bg-comfy-menu-secondary"
+  >
+    <div class="flex gap-2 px-3">
+      <div v-if="badge.label" class="justify-center flex-col flex">
+        <div
+          class="rounded-4xl text-black bg-white gap-2.5 px-1 py-0.5 text-[9px] font-semibold"
+        >
+          {{ badge.label }}
+        </div>
+      </div>
+
+      <div
+        class="rounded-8 font-abcrom font-extrabold text-slate-100 text-[14px]"
+      >
+        {{ badge.text }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
+
+const topbarBadgeStore = useTopbarBadgeStore()
+</script>
+<style>
+@import '../../platform/onboarding/cloud/assets/css/fonts.css';
+</style>
diff --git a/src/extensions/core/cloudBadge.ts b/src/extensions/core/cloudBadge.ts
new file mode 100644
index 000000000..fddff2aaf
--- /dev/null
+++ b/src/extensions/core/cloudBadge.ts
@@ -0,0 +1,15 @@
+import { isProductionEnvironment } from '@/config/environment'
+import { useExtensionService } from '@/services/extensionService'
+
+useExtensionService().registerExtension({
+  name: 'Comfy.CloudBadge',
+  // Only show badge when running in cloud environment
+  topbarBadges: isProductionEnvironment()
+    ? [
+        {
+          label: 'BETA',
+          text: 'Comfy Cloud'
+        }
+      ]
+    : undefined
+})
diff --git a/src/extensions/core/index.ts b/src/extensions/core/index.ts
index 5354ef4e9..de4ec3752 100644
--- a/src/extensions/core/index.ts
+++ b/src/extensions/core/index.ts
@@ -1,4 +1,5 @@
 import './clipspace'
+import './cloudBadge'
 import './contextMenuFilter'
 import './dynamicPrompts'
 import './editAttention'
diff --git a/src/stores/topbarBadgeStore.ts b/src/stores/topbarBadgeStore.ts
new file mode 100644
index 000000000..e4547ae46
--- /dev/null
+++ b/src/stores/topbarBadgeStore.ts
@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+
+import type { TopbarBadge } from '@/types/comfy'
+
+import { useExtensionStore } from './extensionStore'
+
+export const useTopbarBadgeStore = defineStore('topbarBadge', () => {
+  const extensionStore = useExtensionStore()
+
+  const badges = computed<TopbarBadge[]>(() =>
+    extensionStore.extensions.flatMap((e) => e.topbarBadges ?? [])
+  )
+
+  return {
+    badges
+  }
+})
diff --git a/src/types/comfy.ts b/src/types/comfy.ts
index 0ce8d89dc..cad5b70c5 100644
--- a/src/types/comfy.ts
+++ b/src/types/comfy.ts
@@ -18,6 +18,14 @@ export interface AboutPageBadge {
   icon: string
 }
 
+export interface TopbarBadge {
+  text: string
+  /**
+   * Optional badge label (e.g., "BETA", "ALPHA", "NEW")
+   */
+  label?: string
+}
+
 type MenuCommandGroup = {
   /**
    * The path to the menu group.
@@ -71,6 +79,10 @@ export interface ComfyExtension {
    * Badges to add to the about page
    */
   aboutPageBadges?: AboutPageBadge[]
+  /**
+   * Badges to add to the topbar
+   */
+  topbarBadges?: TopbarBadge[]
   /**
    * Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added
    * @param app The ComfyUI app instance