[backport rh-test] change cloud feature flags to be loaded dynamically at runtime rather than set in build (#6257)

## Summary

Backport of #6246 to `rh-test` branch.

This PR cherry-picks commit d7a58a7a9b to
the `rh-test` branch with merge conflicts resolved.

### Conflicts Resolved

**GraphCanvas.vue:**
- Accepted incoming template structure changes (removed betaMenuEnabled
check, added workflow tabs)
- Added missing imports: TopbarBadges, WorkflowTabs, isNativeWindow
- Added showUI computed property

**cloudBadge.ts:**
- Deleted file (replaced by cloudBadges.ts plural)

**telemetry/types.ts:**
- Merged interface methods from both branches
- Accepted incoming event constant changes (app: prefix)

Original PR: #6246

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6257-backport-rh-test-change-cloud-feature-flags-to-be-loaded-dynamically-at-runtime-rather--2966d73d365081a59daeeb6dfbbf2af5)
by [Unito](https://www.unito.io)

src/components/actionbar/ComfyRunButton/index.ts

@@ -2,6 +2,6 @@ import { defineAsyncComponent } from 'vue'
 
 import { isCloud } from '@/platform/distribution/types'
 
-export default isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION
+export default isCloud && window.__CONFIG__?.subscription_required
   ? defineAsyncComponent(() => import('./CloudRunButtonWrapper.vue'))
   : defineAsyncComponent(() => import('./ComfyQueueButton.vue'))

src/components/graph/GraphCanvas.vue

@@ -2,8 +2,23 @@
   <!-- Load splitter overlay only after comfyApp is ready. -->
   <!-- If load immediately, the top-level splitter stateKey won't be correctly
   synced with the stateStorage (localStorage). -->
-  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady && betaMenuEnabled">
-    <template v-if="!workspaceStore.focusMode" #side-bar-panel>
+  <LiteGraphCanvasSplitterOverlay v-if="comfyAppReady">
+    <template v-if="showUI && workflowTabsPosition === 'Topbar'" #workflow-tabs>
+      <div
+        class="workflow-tabs-container pointer-events-auto relative h-9.5 w-full"
+      >
+        <!-- Native drag area for Electron -->
+        <div
+          v-if="isNativeWindow() && workflowTabsPosition !== 'Topbar'"
+          class="app-drag fixed top-0 left-0 z-10 h-[var(--comfy-topbar-height)] w-full"
+        />
+        <div class="flex h-full items-center">
+          <WorkflowTabs />
+          <TopbarBadges />
+        </div>
+      </div>
+    </template>
+    <template v-if="showUI" #side-toolbar>
       <SideToolbar />
     </template>
     <template v-if="!workspaceStore.focusMode" #bottom-panel>
@@ -23,7 +38,6 @@
       />
     </template>
   </LiteGraphCanvasSplitterOverlay>
-  <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
   <canvas
     id="graph-canvas"
     ref="canvasRef"
@@ -91,6 +105,8 @@ import NodeOptions from '@/components/graph/selectionToolbox/NodeOptions.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
+import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
@@ -129,6 +145,7 @@ import { useNodeDefStore } from '@/stores/nodeDefStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { isNativeWindow } from '@/utils/envUtil'
 
 const emit = defineEmits<{
   ready: []
@@ -163,6 +180,10 @@ const selectionToolboxEnabled = computed(() =>
 
 const minimapEnabled = computed(() => settingStore.get('Comfy.Minimap.Visible'))
 
+const showUI = computed(
+  () => !workspaceStore.focusMode && betaMenuEnabled.value
+)
+
 // Feature flags
 const { shouldRenderVueNodes } = useVueFeatureFlags()
 

src/components/topbar/TopbarBadge.vue

@@ -1,39 +1,83 @@
 <template>
   <div
-    class="flex items-center gap-2 bg-comfy-menu-secondary"
+    v-tooltip="badge.tooltip"
+    class="flex h-full shrink-0 items-center gap-2 whitespace-nowrap"
     :class="[{ 'flex-row-reverse': reverseOrder }, noPadding ? '' : 'px-3']"
+    :style="{ backgroundColor: 'var(--comfy-menu-bg)' }"
   >
+    <i
+      v-if="iconClass"
+      :class="['shrink-0 text-base', iconClass, iconColorClass]"
+    />
     <div
       v-if="badge.label"
-      class="rounded-full bg-white px-1.5 py-0.5 text-xxxs font-semibold text-black"
-      :class="labelClass"
+      class="shrink-0 rounded-full px-1.5 py-0.5 text-xxxs font-semibold"
+      :class="labelClasses"
     >
       {{ badge.label }}
     </div>
-    <div
-      class="font-inter text-sm font-extrabold text-slate-100"
-      :class="textClass"
-    >
+    <div class="font-inter text-sm font-extrabold" :class="textClasses">
       {{ badge.text }}
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import type { TopbarBadge } from '@/types/comfy'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     badge: TopbarBadge
     reverseOrder?: boolean
     noPadding?: boolean
-    labelClass?: string
-    textClass?: string
   }>(),
   {
     reverseOrder: false,
-    noPadding: false,
-    labelClass: '',
-    textClass: ''
+    noPadding: false
   }
 )
+
+const variant = computed(() => props.badge.variant ?? 'info')
+
+const labelClasses = computed(() => {
+  switch (variant.value) {
+    case 'error':
+      return 'bg-danger-100 text-white'
+    case 'warning':
+      return 'bg-warning-100 text-black'
+    case 'info':
+    default:
+      return 'bg-white text-black'
+  }
+})
+
+const textClasses = computed(() => {
+  switch (variant.value) {
+    case 'error':
+      return 'text-danger-100'
+    case 'warning':
+      return 'text-warning-100'
+    case 'info':
+    default:
+      return 'text-slate-100'
+  }
+})
+
+const iconColorClass = computed(() => textClasses.value)
+
+const iconClass = computed(() => {
+  if (props.badge.icon) {
+    return props.badge.icon
+  }
+  switch (variant.value) {
+    case 'error':
+      return 'pi pi-exclamation-circle'
+    case 'warning':
+      return 'pi pi-exclamation-triangle'
+    case 'info':
+    default:
+      return undefined
+  }
+})
 </script>

src/components/topbar/TopbarBadges.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="flex">
+  <div v-if="notMobile" class="flex h-full shrink-0 items-center">
     <TopbarBadge
       v-for="badge in topbarBadgeStore.badges"
       :key="badge.text"
       :badge
       :reverse-order="reverseOrder"
       :no-padding="noPadding"
-      :label-class="labelClass"
-      :text-class="textClass"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useBreakpoints } from '@vueuse/core'
+
 import { useTopbarBadgeStore } from '@/stores/topbarBadgeStore'
 
 import TopbarBadge from './TopbarBadge.vue'
@@ -21,16 +21,16 @@ withDefaults(
   defineProps<{
     reverseOrder?: boolean
     noPadding?: boolean
-    labelClass?: string
-    textClass?: string
   }>(),
   {
     reverseOrder: false,
-    noPadding: false,
-    labelClass: '',
-    textClass: ''
+    noPadding: false
   }
 )
 
+const BREAKPOINTS = { md: 880 }
+const breakpoints = useBreakpoints(BREAKPOINTS)
+const notMobile = breakpoints.greater('md')
+
 const topbarBadgeStore = useTopbarBadgeStore()
 </script>

src/extensions/core/cloudBadge.ts

@@ -1,16 +0,0 @@
-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/cloudBadges.ts

@@ -0,0 +1,36 @@
+import { computed } from 'vue'
+
+import { t } from '@/i18n'
+import { remoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { useExtensionService } from '@/services/extensionService'
+import type { TopbarBadge } from '@/types/comfy'
+
+const badges = computed<TopbarBadge[]>(() => {
+  const result: TopbarBadge[] = []
+
+  // Add server health alert first (if present)
+  const alert = remoteConfig.value.server_health_alert
+  if (alert) {
+    result.push({
+      text: alert.message,
+      label: alert.badge,
+      variant: alert.severity ?? 'error',
+      tooltip: alert.tooltip
+    })
+  }
+
+  // Always add cloud badge last (furthest right)
+  result.push({
+    label: t('g.beta'),
+    text: 'Comfy Cloud'
+  })
+
+  return result
+})
+
+useExtensionService().registerExtension({
+  name: 'Comfy.Cloud.Badges',
+  get topbarBadges() {
+    return badges.value
+  }
+})

src/extensions/core/cloudRemoteConfig.ts

@@ -0,0 +1,15 @@
+import { loadRemoteConfig } from '@/platform/remoteConfig/remoteConfig'
+import { useExtensionService } from '@/services/extensionService'
+
+/**
+ * Cloud-only extension that polls for remote config updates
+ * Initial config load happens in main.ts before any other imports
+ */
+useExtensionService().registerExtension({
+  name: 'Comfy.Cloud.RemoteConfig',
+
+  setup: async () => {
+    // Poll for config updates every 30 seconds
+    setInterval(() => void loadRemoteConfig(), 30000)
+  }
+})

src/extensions/core/cloudSubscription.ts

@@ -4,8 +4,11 @@ import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import { useExtensionService } from '@/services/extensionService'
 
+/**
+ * Cloud-only extension that enforces active subscription requirement
+ */
 useExtensionService().registerExtension({
-  name: 'Comfy.CloudSubscription',
+  name: 'Comfy.Cloud.Subscription',
 
   setup: async () => {
     const { isLoggedIn } = useCurrentUser()
@@ -13,7 +16,6 @@ useExtensionService().registerExtension({
 
     const checkSubscriptionStatus = () => {
       if (!isLoggedIn.value) return
-
       void requireActiveSubscription()
     }
 

src/extensions/core/index.ts

@@ -24,10 +24,12 @@ import './uploadImage'
 import './webcamCapture'
 import './widgetInputs'
 
+// Cloud-only extensions - tree-shaken in OSS builds
 if (isCloud) {
-  import('./cloudBadge')
+  await import('./cloudRemoteConfig')
+  await import('./cloudBadges')
 
-  if (__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION) {
-    import('./cloudSubscription')
+  if (window.__CONFIG__?.subscription_required) {
+    await import('./cloudSubscription')
   }
 }

src/main.ts

@@ -13,6 +13,11 @@ import { VueFire, VueFireAuth } from 'vuefire'
 
 import { FIREBASE_CONFIG } from '@/config/firebase'
 import '@/lib/litegraph/public/css/litegraph.css'
+/**
+ * CRITICAL: Load remote config FIRST for cloud builds to ensure
+ * window.__CONFIG__is available for all modules during initialization
+ */
+import { isCloud } from '@/platform/distribution/types'
 import router from '@/router'
 
 import App from './App.vue'
@@ -20,6 +25,13 @@ import App from './App.vue'
 import './assets/css/style.css'
 import { i18n } from './i18n'
 
+if (isCloud) {
+  const { loadRemoteConfig } = await import(
+    '@/platform/remoteConfig/remoteConfig'
+  )
+  await loadRemoteConfig()
+}
+
 const ComfyUIPreset = definePreset(Aura, {
   semantic: {
     // @ts-expect-error fixme ts strict error

src/platform/cloud/subscription/composables/useSubscription.ts

@@ -27,7 +27,7 @@ interface CloudSubscriptionStatusResponse {
 const subscriptionStatus = ref<CloudSubscriptionStatusResponse | null>(null)
 
 const isActiveSubscription = computed(() => {
-  if (!isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION) return true
+  if (!isCloud || !window.__CONFIG__?.subscription_required) return true
 
   return subscriptionStatus.value?.is_active ?? false
 })

src/platform/remoteConfig/remoteConfig.ts

@@ -0,0 +1,44 @@
+/**
+ * Remote configuration service
+ *
+ * Fetches configuration from the server at runtime, enabling:
+ * - Feature flags without rebuilding
+ * - Server-side feature discovery
+ * - Version compatibility management
+ * - Avoiding vendor lock-in for native apps
+ *
+ * This module is tree-shaken in OSS builds.
+ * Used for initial config load in main.ts and polling in the extension.
+ */
+import { ref } from 'vue'
+
+import type { RemoteConfig } from './types'
+
+/**
+ * Reactive remote configuration
+ * Updated whenever config is loaded from the server
+ */
+export const remoteConfig = ref<RemoteConfig>({})
+
+/**
+ * Loads remote configuration from the backend /api/features endpoint
+ * and updates the reactive remoteConfig ref
+ */
+export async function loadRemoteConfig(): Promise<void> {
+  try {
+    const response = await fetch('/api/features', { cache: 'no-store' })
+    if (response.ok) {
+      const config = await response.json()
+      window.__CONFIG__ = config
+      remoteConfig.value = config
+    } else {
+      console.warn('Failed to load remote config:', response.statusText)
+      window.__CONFIG__ = {}
+      remoteConfig.value = {}
+    }
+  } catch (error) {
+    console.error('Failed to fetch remote config:', error)
+    window.__CONFIG__ = {}
+    remoteConfig.value = {}
+  }
+}

src/platform/remoteConfig/types.ts

@@ -0,0 +1,19 @@
+/**
+ * Server health alert configuration from the backend
+ */
+type ServerHealthAlert = {
+  message: string
+  tooltip?: string
+  severity?: 'info' | 'warning' | 'error'
+  badge?: string
+}
+
+/**
+ * Remote configuration type
+ * Configuration fetched from the server at runtime
+ */
+export type RemoteConfig = {
+  mixpanel_token?: string
+  subscription_required?: boolean
+  server_health_alert?: ServerHealthAlert
+}

src/platform/settings/composables/useSettingUI.ts

@@ -81,7 +81,7 @@ export function useSettingUI(
   }
 
   const subscriptionPanel: SettingPanelItem | null =
-    !isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION
+    !isCloud || !window.__CONFIG__?.subscription_required
       ? null
       : {
           node: {
@@ -149,7 +149,9 @@ export function useSettingUI(
       keybindingPanel,
       extensionPanel,
       ...(isElectron() ? [serverConfigPanel] : []),
-      ...(isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION && subscriptionPanel
+      ...(isCloud &&
+      window.__CONFIG__?.subscription_required &&
+      subscriptionPanel
         ? [subscriptionPanel]
         : [])
     ].filter((panel) => panel.component)
@@ -185,12 +187,12 @@ export function useSettingUI(
         userPanel.node,
         ...(isLoggedIn.value &&
         isCloud &&
-        __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION &&
+        window.__CONFIG__?.subscription_required &&
         subscriptionPanel
           ? [subscriptionPanel.node]
           : []),
         ...(isLoggedIn.value &&
-        !(isCloud && __BUILD_FLAGS__.REQUIRE_SUBSCRIPTION)
+        !(isCloud && window.__CONFIG__?.subscription_required)
           ? [creditsPanel.node]
           : [])
       ].map(translateCategory)

src/platform/telemetry/providers/cloud/MixpanelTelemetryProvider.ts

@@ -3,6 +3,8 @@ import type { OverridedMixpanel } from 'mixpanel-browser'
 import type {
   AuthMetadata,
   ExecutionContext,
+  ExecutionErrorMetadata,
+  ExecutionSuccessMetadata,
   RunButtonProperties,
   SurveyResponses,
   TelemetryEventName,
@@ -46,7 +48,7 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
   private _composablesReady = false
 
   constructor() {
-    const token = __MIXPANEL_TOKEN__
+    const token = window.__CONFIG__?.mixpanel_token
 
     if (token) {
       try {
@@ -76,7 +78,7 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
         this.isEnabled = false
       }
     } else {
-      console.warn('Mixpanel token not provided')
+      console.warn('Mixpanel token not provided in runtime config')
       this.isEnabled = false
     }
   }
@@ -384,7 +386,7 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
   trackWorkflowExecution(): void {
     if (this.isOnboardingMode) {
       // During onboarding, track basic execution without workflow context
-      this.trackEvent(TelemetryEvents.WORKFLOW_EXECUTION_STARTED, {
+      this.trackEvent(TelemetryEvents.EXECUTION_START, {
         is_template: false,
         workflow_name: undefined
       })
@@ -392,7 +394,15 @@ export class MixpanelTelemetryProvider implements TelemetryProvider {
     }
 
     const context = this.getExecutionContext()
-    this.trackEvent(TelemetryEvents.WORKFLOW_EXECUTION_STARTED, context)
+    this.trackEvent(TelemetryEvents.EXECUTION_START, context)
+  }
+
+  trackExecutionError(metadata: ExecutionErrorMetadata): void {
+    this.trackEvent(TelemetryEvents.EXECUTION_ERROR, metadata)
+  }
+
+  trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void {
+    this.trackEvent(TelemetryEvents.EXECUTION_SUCCESS, metadata)
   }
 
   getExecutionContext(): ExecutionContext {

src/platform/telemetry/types.ts

@@ -59,6 +59,23 @@ export interface ExecutionContext {
   template_license?: string
 }
 
+/**
+ * Execution error metadata
+ */
+export interface ExecutionErrorMetadata {
+  jobId: string
+  nodeId?: string
+  nodeType?: string
+  error?: string
+}
+
+/**
+ * Execution success metadata
+ */
+export interface ExecutionSuccessMetadata {
+  jobId: string
+}
+
 /**
  * Template metadata for workflow tracking
  */
@@ -95,6 +112,8 @@ export interface TelemetryProvider {
 
   // Workflow execution events
   trackWorkflowExecution(): void
+  trackExecutionError(metadata: ExecutionErrorMetadata): void
+  trackExecutionSuccess(metadata: ExecutionSuccessMetadata): void
 
   // App lifecycle management
   markAppReady?(): void
@@ -103,31 +122,37 @@ export interface TelemetryProvider {
 
 /**
  * Telemetry event constants
+ *
+ * Event naming conventions:
+ * - 'app:' prefix: UI/user interaction events
+ * - No prefix: Backend/system events (execution lifecycle)
  */
 export const TelemetryEvents = {
   // Authentication Flow
-  USER_SIGN_UP_OPENED: 'user_sign_up_opened',
-  USER_AUTH_COMPLETED: 'user_auth_completed',
+  USER_SIGN_UP_OPENED: 'app:user_sign_up_opened',
+  USER_AUTH_COMPLETED: 'app:user_auth_completed',
 
   // Subscription Flow
-  RUN_BUTTON_CLICKED: 'run_button_clicked',
-  SUBSCRIPTION_REQUIRED_MODAL_OPENED: 'subscription_required_modal_opened',
-  SUBSCRIBE_NOW_BUTTON_CLICKED: 'subscribe_now_button_clicked',
+  RUN_BUTTON_CLICKED: 'app:run_button_click',
+  SUBSCRIPTION_REQUIRED_MODAL_OPENED: 'app:subscription_required_modal_opened',
+  SUBSCRIBE_NOW_BUTTON_CLICKED: 'app:subscribe_now_button_clicked',
 
   // Onboarding Survey
-  USER_SURVEY_OPENED: 'user_survey_opened',
-  USER_SURVEY_SUBMITTED: 'user_survey_submitted',
+  USER_SURVEY_OPENED: 'app:user_survey_opened',
+  USER_SURVEY_SUBMITTED: 'app:user_survey_submitted',
 
   // Email Verification
-  USER_EMAIL_VERIFY_OPENED: 'user_email_verify_opened',
-  USER_EMAIL_VERIFY_REQUESTED: 'user_email_verify_requested',
-  USER_EMAIL_VERIFY_COMPLETED: 'user_email_verify_completed',
+  USER_EMAIL_VERIFY_OPENED: 'app:user_email_verify_opened',
+  USER_EMAIL_VERIFY_REQUESTED: 'app:user_email_verify_requested',
+  USER_EMAIL_VERIFY_COMPLETED: 'app:user_email_verify_completed',
 
   // Template Tracking
-  TEMPLATE_WORKFLOW_OPENED: 'template_workflow_opened',
+  TEMPLATE_WORKFLOW_OPENED: 'app:template_workflow_opened',
 
-  // Workflow Execution Tracking
-  WORKFLOW_EXECUTION_STARTED: 'workflow_execution_started'
+  // Execution Lifecycle
+  EXECUTION_START: 'execution_start',
+  EXECUTION_ERROR: 'execution_error',
+  EXECUTION_SUCCESS: 'execution_success'
 } as const
 
 export type TelemetryEventName =
@@ -142,3 +167,5 @@ export type TelemetryEventProperties =
   | TemplateMetadata
   | ExecutionContext
   | RunButtonProperties
+  | ExecutionErrorMetadata
+  | ExecutionSuccessMetadata

src/services/dialogService.ts

@@ -488,7 +488,7 @@ export const useDialogService = () => {
   }
 
   function showSubscriptionRequiredDialog() {
-    if (!isCloud || !__BUILD_FLAGS__.REQUIRE_SUBSCRIPTION) {
+    if (!isCloud || !window.__CONFIG__?.subscription_required) {
       return
     }
 

src/stores/executionStore.ts

@@ -5,6 +5,8 @@ import type ChatHistoryWidget from '@/components/graph/widgets/ChatHistoryWidget
 import { useNodeChatHistory } from '@/composables/node/useNodeChatHistory'
 import { useNodeProgressText } from '@/composables/node/useNodeProgressText'
 import type { LGraph, Subgraph } from '@/lib/litegraph/src/litegraph'
+import { isCloud } from '@/platform/distribution/types'
+import { useTelemetry } from '@/platform/telemetry'
 import type { ComfyWorkflow } from '@/platform/workflow/management/stores/workflowStore'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type {
@@ -288,6 +290,11 @@ export const useExecutionStore = defineStore('execution', () => {
   }
 
   function handleExecutionSuccess() {
+    if (isCloud && activePromptId.value) {
+      useTelemetry()?.trackExecutionSuccess({
+        jobId: activePromptId.value
+      })
+    }
     resetExecutionState()
   }
 
@@ -352,6 +359,14 @@ export const useExecutionStore = defineStore('execution', () => {
 
   function handleExecutionError(e: CustomEvent<ExecutionErrorWsMessage>) {
     lastExecutionError.value = e.detail
+    if (isCloud) {
+      useTelemetry()?.trackExecutionError({
+        jobId: e.detail.prompt_id,
+        nodeId: String(e.detail.node_id),
+        nodeType: e.detail.node_type,
+        error: e.detail.exception_message
+      })
+    }
     resetExecutionState()
   }
 

src/types/comfy.ts

@@ -39,6 +39,22 @@ export interface TopbarBadge {
    * Optional badge label (e.g., "BETA", "ALPHA", "NEW")
    */
   label?: string
+  /**
+   * Visual variant for the badge
+   * - info: Default informational badge (white label, gray background)
+   * - warning: Warning badge (orange theme, higher emphasis)
+   * - error: Error/alert badge (red theme, highest emphasis)
+   */
+  variant?: 'info' | 'warning' | 'error'
+  /**
+   * Optional icon class (e.g., "pi-exclamation-triangle")
+   * If not provided, variant will determine the default icon
+   */
+  icon?: string
+  /**
+   * Optional tooltip text to show on hover
+   */
+  tooltip?: string
 }
 
 export type MissingNodeType =