feat: add ever-present upgrade button for free-tier users (#9315)

## Summary

Add persistent upgrade CTAs for free-tier users: a topbar button and
"Upgrade to add credits" replacing "Add Credits" in popovers and
settings panels.

## Changes

- **What**:
- New `TopbarSubscribeButton` component in both GraphCanvas and
LinearView topbars, visible only to free-tier users
- Profile popover (legacy + workspace): free-tier users see "Upgrade to
add credits" instead of "Add Credits", linking directly to the pricing
table
- Manage Plan settings (legacy + workspace): same replacement —
free-tier users see "Upgrade to add credits" instead of "Add Credits"
- Paid-tier users retain the original "Add Credits" behavior in all
locations
  - All upgrade buttons go directly to the pricing table (one-step flow)

## Review Focus

- The `isFreeTier` conditional gating on the buttons — ensure free-tier
users see upgrade CTAs and paid users see normal Add Credits
- Layout in Manage Plan panels uses `flex flex-col gap-3` to stack the
upgrade button below the usage history link instead of side-by-side

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9315-feat-add-ever-present-upgrade-button-for-free-tier-users-3166d73d365081228cdfe6a67fec6aec)
by [Unito](https://www.unito.io)

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

@@ -634,6 +634,10 @@
   }
 }
 
+@utility bg-subscription-gradient {
+  background: var(--color-subscription-button-gradient);
+}
+
 @utility highlight {
   background-color: color-mix(in srgb, currentColor 20%, transparent);
   font-weight: 700;

src/components/graph/GraphCanvas.vue

@@ -18,6 +18,7 @@
         >
           <WorkflowTabs />
           <TopbarBadges />
+          <TopbarSubscribeButton />
         </div>
       </div>
     </template>
@@ -140,6 +141,7 @@ import NodePropertiesPanel from '@/components/rightSidePanel/RightSidePanel.vue'
 import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
 import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'

src/components/topbar/CurrentUserPopoverLegacy.vue

@@ -46,6 +46,16 @@
         class="icon-[lucide--circle-help] cursor-help text-base text-muted-foreground mr-auto"
       />
       <Button
+        v-if="isFreeTier"
+        variant="gradient"
+        size="sm"
+        data-testid="upgrade-to-add-credits-button"
+        @click="handleUpgradeToAddCredits"
+      >
+        {{ $t('subscription.upgradeToAddCredits') }}
+      </Button>
+      <Button
+        v-else
         variant="secondary"
         size="sm"
         class="text-base-foreground"
@@ -61,7 +71,7 @@
         :fluid="false"
         :label="$t('subscription.subscribeToComfyCloud')"
         size="sm"
-        variant="gradient"
+        button-variant="gradient"
         @subscribed="handleSubscribed"
       />
     </div>
@@ -170,6 +180,7 @@ const settingsDialog = useSettingsDialog()
 const dialogService = useDialogService()
 const {
   isActiveSubscription,
+  isFreeTier,
   subscriptionTierName,
   subscriptionTier,
   fetchStatus
@@ -237,6 +248,11 @@ const handleOpenPartnerNodesInfo = () => {
   emit('close')
 }
 
+const handleUpgradeToAddCredits = () => {
+  subscriptionDialog.showPricingTable()
+  emit('close')
+}
+
 const handleLogout = async () => {
   await handleSignOut()
   emit('close')

src/components/topbar/TopbarSubscribeButton.vue

@@ -0,0 +1,25 @@
+<template>
+  <Button
+    v-if="isFreeTier"
+    class="mr-2 shrink-0 whitespace-nowrap"
+    variant="gradient"
+    size="sm"
+    data-testid="topbar-subscribe-button"
+    @click="handleClick"
+  >
+    {{ $t('subscription.subscribeForMore') }}
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '@/components/ui/button/Button.vue'
+import { useBillingContext } from '@/composables/billing/useBillingContext'
+import { useSubscriptionDialog } from '@/platform/cloud/subscription/composables/useSubscriptionDialog'
+
+const { isFreeTier } = useBillingContext()
+const subscriptionDialog = useSubscriptionDialog()
+
+function handleClick() {
+  subscriptionDialog.showPricingTable()
+}
+</script>

src/components/ui/button/button.variants.ts

@@ -19,7 +19,9 @@ export const buttonVariants = cva({
         'text-muted-foreground bg-transparent hover:bg-secondary-background-hover',
       'destructive-textonly':
         'text-destructive-background bg-transparent hover:bg-destructive-background/10',
-      'overlay-white': 'bg-white text-gray-600 hover:bg-white/90'
+      'overlay-white': 'bg-white text-gray-600 hover:bg-white/90',
+      gradient:
+        'bg-subscription-gradient text-white border-transparent hover:opacity-90'
     },
     size: {
       sm: 'h-6 rounded-sm px-2 py-1 text-xs',
@@ -47,7 +49,8 @@ const variants = [
   'textonly',
   'muted-textonly',
   'destructive-textonly',
-  'overlay-white'
+  'overlay-white',
+  'gradient'
 ] as const satisfies Array<ButtonVariants['variant']>
 const sizes = ['sm', 'md', 'lg', 'icon', 'icon-sm'] as const satisfies Array<
   ButtonVariants['size']

src/locales/en/main.json

@@ -2292,6 +2292,8 @@
     },
     "subscribeToRun": "Subscribe",
     "subscribeToRunFull": "Subscribe to Run",
+    "subscribeForMore": "Upgrade",
+    "upgradeToAddCredits": "Upgrade to add credits",
     "subscribeNow": "Subscribe Now",
     "subscribeToComfyCloud": "Subscribe to Comfy Cloud",
     "workspaceNotSubscribed": "This workspace is not on a subscription",

src/platform/cloud/subscription/components/SubscribeButton.vue

@@ -2,15 +2,7 @@
   <Button
     :size
     :disabled="disabled"
-    variant="primary"
+    :variant="buttonVariant === 'gradient' ? 'gradient' : 'primary'"
-    :style="
-      variant === 'gradient'
-        ? {
-            background: 'var(--color-subscription-button-gradient)',
-            color: 'var(--color-white)'
-          }
-        : undefined
-    "
     :class="cn('font-bold', fluid && 'w-full')"
     @click="handleSubscribe"
   >
@@ -31,13 +23,13 @@ import { cn } from '@/utils/tailwindUtil'
 const {
   size = 'lg',
   fluid = true,
-  variant = 'default',
+  buttonVariant = 'default',
   label,
   disabled = false
 } = defineProps<{
   label?: string
   size?: 'sm' | 'lg'
-  variant?: 'default' | 'gradient'
+  buttonVariant?: 'default' | 'gradient'
   fluid?: boolean
   disabled?: boolean
 }>()

src/platform/cloud/subscription/components/SubscribeToRun.vue

@@ -5,13 +5,8 @@
       showDelay: 600
     }"
     class="subscribe-to-run-button whitespace-nowrap"
-    variant="primary"
+    variant="gradient"
     size="sm"
-    :style="{
-      background: 'var(--color-subscription-button-gradient)',
-      color: 'var(--color-white)',
-      borderColor: 'transparent'
-    }"
     data-testid="subscribe-to-run-button"
     @click="handleSubscribeToRun"
   >

src/platform/cloud/subscription/components/SubscriptionPanelContentLegacy.vue

@@ -130,17 +130,25 @@
                 </tbody>
               </table>
 
-              <div class="flex items-center justify-between">
+              <div class="flex flex-col gap-3">
                 <a
                   href="https://platform.comfy.org/profile/usage"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="text-sm underline text-center text-muted"
+                  class="text-sm underline text-muted"
                 >
                   {{ $t('subscription.viewUsageHistory') }}
                 </a>
                 <Button
-                  v-if="isActiveSubscription"
+                  v-if="isActiveSubscription && isFreeTier"
+                  variant="gradient"
+                  class="p-2 min-h-8 rounded-lg text-sm font-normal w-full"
+                  @click="handleUpgradeToAddCredits"
+                >
+                  {{ $t('subscription.upgradeToAddCredits') }}
+                </Button>
+                <Button
+                  v-else-if="isActiveSubscription"
                   variant="secondary"
                   class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
                   @click="handleAddApiCredits"
@@ -234,7 +242,8 @@ const {
   isYearlySubscription
 } = useSubscription()
 
-const { show: showSubscriptionDialog } = useSubscriptionDialog()
+const { show: showSubscriptionDialog, showPricingTable } =
+  useSubscriptionDialog()
 
 const tierKey = computed(() => {
   const tier = subscriptionTier.value
@@ -296,6 +305,10 @@ const { totalCredits, monthlyBonusCredits, prepaidCredits, isLoadingBalance } =
 
 const { handleAddApiCredits, handleRefresh } = useSubscriptionActions()
 
+function handleUpgradeToAddCredits() {
+  showPricingTable()
+}
+
 // Focus-based polling: refresh balance when user returns from Stripe checkout
 const PENDING_TOPUP_KEY = 'pending_topup_timestamp'
 const TOPUP_EXPIRY_MS = 5 * 60 * 1000 // 5 minutes

src/platform/workspace/components/CurrentUserPopoverWorkspace.vue

@@ -72,9 +72,19 @@
         v-tooltip="{ value: $t('credits.unified.tooltip'), showDelay: 300 }"
         class="icon-[lucide--circle-help] mr-auto cursor-help text-base text-muted-foreground"
       />
-      <!-- Add Credits (subscribed + personal or workspace owner only) -->
+      <!-- Upgrade to add credits (free tier) -->
       <Button
-        v-if="isActiveSubscription && permissions.canTopUp"
+        v-if="isActiveSubscription && permissions.canTopUp && isFreeTier"
+        variant="gradient"
+        size="sm"
+        data-testid="upgrade-to-add-credits-button"
+        @click="handleUpgradeToAddCredits"
+      >
+        {{ $t('subscription.upgradeToAddCredits') }}
+      </Button>
+      <!-- Add Credits (subscribed + personal or workspace owner only, paid tier) -->
+      <Button
+        v-else-if="isActiveSubscription && permissions.canTopUp"
         variant="secondary"
         size="sm"
         class="text-base-foreground"
@@ -93,7 +103,7 @@
             : $t('workspaceSwitcher.subscribe')
         "
         size="sm"
-        variant="gradient"
+        button-variant="gradient"
       />
       <Button
         v-if="showSubscribeAction && !isPersonalWorkspace"
@@ -242,8 +252,14 @@ const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } =
   useCurrentUser()
 const settingsDialog = useSettingsDialog()
 const dialogService = useDialogService()
-const { isActiveSubscription, subscription, balance, isLoading, fetchBalance } =
+const {
-  useBillingContext()
+  isActiveSubscription,
+  isFreeTier,
+  subscription,
+  balance,
+  isLoading,
+  fetchBalance
+} = useBillingContext()
 
 const isCancelled = computed(() => subscription.value?.isCancelled ?? false)
 const subscriptionDialog = useSubscriptionDialog()
@@ -310,6 +326,11 @@ const handleOpenPlanAndCreditsSettings = () => {
   emit('close')
 }
 
+const handleUpgradeToAddCredits = () => {
+  subscriptionDialog.showPricingTable()
+  emit('close')
+}
+
 const handleTopUp = () => {
   // Track purchase credits entry from avatar popover
   useTelemetry()?.trackAddApiCreditButtonClicked()

src/platform/workspace/components/SubscriptionPanelContentWorkspace.vue

@@ -252,9 +252,18 @@
                     !showZeroState &&
                     permissions.canTopUp
                   "
-                  class="flex items-center justify-between"
+                  class="flex flex-col gap-3"
                 >
                   <Button
+                    v-if="isFreeTierPlan"
+                    variant="gradient"
+                    class="p-2 min-h-8 rounded-lg text-sm font-normal w-full"
+                    @click="handleUpgradeToAddCredits"
+                  >
+                    {{ $t('subscription.upgradeToAddCredits') }}
+                  </Button>
+                  <Button
+                    v-else
                     variant="secondary"
                     class="p-2 min-h-8 rounded-lg text-sm font-normal text-text-primary bg-interface-menu-component-surface-selected"
                     @click="handleAddApiCredits"
@@ -464,6 +473,10 @@ function handleSubscribeWorkspace() {
 function handleUpgrade() {
   isFreeTierPlan.value ? showPricingTable() : showSubscriptionDialog()
 }
+
+function handleUpgradeToAddCredits() {
+  showPricingTable()
+}
 const subscriptionTier = computed(() => subscription.value?.tier ?? null)
 const isYearlySubscription = computed(
   () => subscription.value?.duration === 'ANNUAL'

src/views/LinearView.vue

@@ -11,6 +11,7 @@ import AppModeToolbar from '@/components/appMode/AppModeToolbar.vue'
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
+import TopbarSubscribeButton from '@/components/topbar/TopbarSubscribeButton.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import TypeformPopoverButton from '@/components/ui/TypeformPopoverButton.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -82,6 +83,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
       <div class="flex h-full items-center">
         <WorkflowTabs />
         <TopbarBadges />
+        <TopbarSubscribeButton />
       </div>
     </div>
     <div