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
https://github.com/Comfy-Org/cloud/pull/1043

## Changes

- bb61d9822 feat: AssetCard tweaks (#6085)
- 05f73523f fix terminal style (#6056)
- d5fa22168 Add distribution detection pattern (#6028)
- 6c36aaa1d feat: Improve MediaAssetCard video controls and add gallery
view (#6065)
- 6944ef0a2 fix Cloudbadge (#6063)
- 6764f8dab Badge for cloud environment (#6048)

---------

Co-authored-by: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Co-authored-by: Jin Yi <jin12cc@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>

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>