feat(frontend): update cloud branch 2025-10-16 (#6096)

## Summary

Updates with cloud specific features merged into `main`.

Notable changes include the `DISTRIBUTION=cloud` changes. Will also be
changing cloud build workflow to build with that flag in
Comfy-Org/cloud#1043

## Changes

- bb61d98 feat: AssetCard tweaks (#6085)
- 05f7352 fix terminal style (#6056)
- d5fa221 Add distribution detection pattern (#6028)
- 6c36aaa feat: Improve MediaAssetCard video controls and add gallery
view (#6065)
- 6944ef0 fix Cloudbadge (#6063)
- 6764f8d Badge for cloud environment (#6048)

---------

Co-authored-by: Johnpaul Chiwetelu <[email protected]>
Co-authored-by: Jin Yi <[email protected]>
Co-authored-by: Claude <[email protected]>
Co-authored-by: Christian Byrne <[email protected]>

Author: 5 people

packages/design-system/src/css/style.css

@@ -85,6 +85,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);

src/components/helpcenter/HelpCenterMenuContent.vue

@@ -135,6 +135,7 @@ import type { CSSProperties, Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import PuzzleIcon from '@/components/icons/PuzzleIcon.vue'
+import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import type { ReleaseNote } from '@/platform/updates/common/releaseService'
 import { useReleaseStore } from '@/platform/updates/common/releaseStore'
@@ -265,7 +266,7 @@ const moreMenuItem = computed(() =>
 )
 
 const menuItems = computed<MenuItem[]>(() => {
-  return [
+  const items: MenuItem[] = [
     {
       key: 'docs',
       type: 'item',
@@ -305,8 +306,12 @@ const menuItems = computed<MenuItem[]>(() => {
         void commandStore.execute('Comfy.ContactSupport')
         emit('close')
       }
-    },
-    {
+    }
+  ]
+
+  // Extension manager - only in non-cloud distributions
+  if (!isCloud) {
+    items.push({
       key: 'manager',
       type: 'item',
       icon: PuzzleIcon,
@@ -319,17 +324,20 @@ const menuItems = computed<MenuItem[]>(() => {
         })
         emit('close')
       }
-    },
-    {
-      key: 'more',
-      type: 'item',
-      icon: '',
-      label: t('helpCenter.more'),
-      visible: hasVisibleMoreItems.value,
-      action: () => {}, // No action for more item
-      items: moreItems.value
-    }
-  ]
+    })
+  }
+
+  items.push({
+    key: 'more',
+    type: 'item',
+    icon: '',
+    label: t('helpCenter.more'),
+    visible: hasVisibleMoreItems.value,
+    action: () => {}, // No action for more item
+    items: moreItems.value
+  })
+
+  return items
 })
 
 // Utility Functions
@@ -420,6 +428,9 @@ const formatReleaseDate = (dateString?: string): string => {
 }
 
 const shouldShowUpdateButton = (release: ReleaseNote): boolean => {
+  // Hide update buttons in cloud distribution
+  if (isCloud) return false
+
   return (
     releaseStore.shouldShowUpdateButton &&
     release === releaseStore.recentReleases[0]

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 />
+      <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,9 +45,10 @@ 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()
-
 const menuSetting = computed(() => settingStore.get('Comfy.UseNewMenu'))
 const betaMenuEnabled = computed(() => menuSetting.value !== 'Disabled')
 const showTopMenu = computed(

src/components/topbar/TopbarBadge.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="flex items-center gap-2 bg-comfy-menu-secondary px-3">
+    <div
+      v-if="badge.label"
+      class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
+    >
+      {{ badge.label }}
+    </div>
+    <div class="font-inter text-sm font-extrabold text-slate-100">
+      {{ badge.text }}
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { TopbarBadge } from '@/types/comfy'
+
+defineProps<{
+  badge: TopbarBadge
+}>()
+</script>

src/components/topbar/TopbarBadges.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flex">
+    <TopbarBadge
+      v-for="badge in topbarBadgeStore.badges"
+      :key="badge.text"
+      :badge
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
+
+import TopbarBadge from './TopbarBadge.vue'
+
+const topbarBadgeStore = useTopbarBadgeStore()
+</script>

src/composables/bottomPanelTabs/useTerminal.ts

@@ -5,12 +5,14 @@ import { debounce } from 'es-toolkit/compat'
 import type { Ref } from 'vue'
 import { markRaw, onMounted, onUnmounted } from 'vue'
 
+import { isDesktop } from '@/platform/distribution/types'
+
 export function useTerminal(element: Ref<HTMLElement | undefined>) {
   const fitAddon = new FitAddon()
   const terminal = markRaw(
     new Terminal({
       convertEol: true,
-      theme: { background: '#171717' }
+      theme: isDesktop ? { background: '#171717' } : undefined
     })
   )
   terminal.loadAddon(fitAddon)

src/extensions/core/cloudBadge.ts

@@ -0,0 +1,16 @@
+import { t } from '@/i18n'
+import { isCloud } from '@/platform/distribution/types'
+import { useExtensionService } from '@/services/extensionService'
+
+useExtensionService().registerExtension({
+  name: 'Comfy.CloudBadge',
+  // Only show badge when running in cloud environment
+  topbarBadges: isCloud
+    ? [
+        {
+          label: t('g.beta'),
+          text: 'Comfy Cloud'
+        }
+      ]
+    : undefined
+})

src/extensions/core/index.ts

@@ -1,3 +1,5 @@
+import { isCloud } from '@/platform/distribution/types'
+
 import './clipspace'
 import './contextMenuFilter'
 import './dynamicPrompts'
@@ -21,3 +23,7 @@ import './uploadAudio'
 import './uploadImage'
 import './webcamCapture'
 import './widgetInputs'
+
+if (isCloud) {
+  import('./cloudBadge')
+}

src/locales/en/main.json

@@ -197,7 +197,8 @@
     "volume": "Volume",
     "halfSpeed": "0.5x",
     "1x": "1x",
-    "2x": "2x"
+    "2x": "2x",
+    "beta": "BETA"
   },
   "manager": {
     "title": "Custom Nodes Manager",

src/platform/assets/components/AssetCard.stories.ts

@@ -84,6 +84,51 @@ export const NonInteractive: Story = {
   }
 }
 
+export const WithPreviewImage: Story = {
+  args: {
+    asset: createAssetData({
+      preview_url: '/assets/images/comfy-logo-single.svg'
+    }),
+    interactive: true
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: 'AssetCard with a preview image displayed.'
+      }
+    }
+  }
+}
+
+export const FallbackGradient: Story = {
+  args: {
+    asset: createAssetData({
+      preview_url: undefined
+    }),
+    interactive: true
+  },
+  decorators: [
+    () => ({
+      template:
+        '<div class="p-8 bg-gray-50 dark-theme:bg-gray-900 max-w-96"><story /></div>'
+    })
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'AssetCard showing fallback gradient when no preview image is available.'
+      }
+    }
+  }
+}
+
 export const EdgeCases: Story = {
   render: () => ({
     components: { AssetCard },