Comfy Cloud Badge indicator (#6043)

## 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

@@ -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);

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()
 

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>

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
+})

src/extensions/core/index.ts

@@ -1,4 +1,5 @@
 import './clipspace'
+import './cloudBadge'
 import './contextMenuFilter'
 import './dynamicPrompts'
 import './editAttention'

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
+  }
+})

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