subscription page #6064

jtydhr88 · 2025-10-15T03:54:14Z

Summary

Implements cloud subscription management UI and flow for ComfyUI Cloud users.

Core Features:

Subscription Status Tracking: Global reactive state management for subscription status across all components
using shared subscriptionStatus ref
Subscribe to Run Button: Replaces the Run button in the actionbar with a "Subscribe to Run" button for users
without active subscriptions
Subscription Required Dialog: Modal dialog with subscription benefits, pricing, and checkout flow with video
background
Subscription Settings Panel: New settings panel showing subscription status, renewal date, and quick access to
billing management
Auto-detection & Polling: Automatically polls subscription status after checkout completion and syncs state
across the application

2025-10-17.15-31-28.mp4

┆Issue is synchronized with this Notion page by Unito

github-actions · 2025-10-15T03:54:37Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 10/19/2025, 03:01:54 AM UTC

🔗 Links

📊 View Workflow Run
🎨 View Storybook

🎉 Your Storybook is ready for review!

github-actions · 2025-10-15T03:54:44Z

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/19/2025, 03:18:54 AM UTC

📈 Summary

Total Tests: 499
Passed: 466 ✅
Failed: 0
Flaky: 2 ⚠️
Skipped: 31 ⏭️

📊 Test Reports by Browser

✅ chromium: View Report • ✅ 457 / ❌ 0 / ⚠️ 2 / ⏭️ 31
✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

arjansingh

Overall this is a very good draft.

I made a couple of comments on how and where we can be dynamically importing off of isCloud.

That and moving the subscription stuff out of firebase and into it's own store are the big comments.

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

arjansingh · 2025-10-15T04:42:43Z

src/stores/firebaseAuthStore.ts

+   * Fetch the current cloud subscription status for the authenticated user
+   * @returns Subscription status or null if no subscription exists
+   */
+  const fetchSubscriptionStatus =


The subscription logic might be better of in it's own dedicated store.

@jtydhr88 we can't put this in a subscription store that we can dynamically import?

arjansingh · 2025-10-15T04:44:17Z

src/components/dialog/content/setting/SubscriptionPanel.vue

+})
+
+const latestEvents = ref<AuditLog[]>([])
+const isLoadingEvents = ref(false)


suggestion: if we moved some of this logic into a composable we could probably break this up into several smaller components.

arjansingh · 2025-10-15T04:46:36Z

src/App.vue

+  if (!isLoggedIn.value) return
+
+  try {
+    const status = await authActions.fetchSubscriptionStatus()


Another reason to break out the subscription work, we can do what @Myestery in #6063 an dynamically load the subscription code and components only when we need them.

src/components/actionbar/ComfyActionbar.vue

src/components/dialog/content/setting/SubscriptionPanel.vue

arjansingh

@jtydhr88 left a few more comments. The overall feature code looks solid. It's mainly around making sure we properly set up build time flags so we can remove this code where it's not needed.

@christian-byrne I think we should move the subscription-specific files into @src//platform/cloud/subscription/. It would definitely centralize everything. Thoughts?

arjansingh · 2025-10-16T04:37:29Z

src/stores/firebaseAuthStore.ts

+   * Fetch the current cloud subscription status for the authenticated user
+   * @returns Subscription status or null if no subscription exists
+   */
+  const fetchSubscriptionStatus =


@jtydhr88 we can't put this in a subscription store that we can dynamically import?

arjansingh · 2025-10-16T04:41:10Z

src/services/dialogService.ts

+    dialogStore.showDialog({
+      key: 'subscription-required',
+      component: SubscriptionRequiredDialogContent,
+      dialogComponentProps: {
+        closable: true,
+        style: 'width: 720px; height: 434px;',
+        pt: {
+          content: {
+            class: 'overflow-hidden p-0!'
+          }
+        }
+      }
+    })


Suggested change

dialogStore.showDialog({

key: 'subscription-required',

component: SubscriptionRequiredDialogContent,

dialogComponentProps: {

closable: true,

style: 'width: 720px; height: 434px;',

pt: {

content: {

class: 'overflow-hidden p-0!'

}

}

}

})

if(isCloud) {

dialogStore.showDialog({

key: 'subscription-required',

component: SubscriptionRequiredDialogContent,

dialogComponentProps: {

closable: true,

style: 'width: 720px; height: 434px;',

pt: {

content: {

class: 'overflow-hidden p-0!'

}

}

}

})

}

@christian-byrne would we handle it like this so it compiles to a noop? Or should we actually create a cloud dialog service?

(replying to comment about whether this needs a no op) This should be tree-shaken due to the early return above I think - so I think it's fine how it is. (no change necessary).

src/services/dialogService.ts

src/platform/settings/composables/useSettingUI.ts

src/extensions/core/cloudSubscription.ts

src/components/actionbar/ComfyActionbar.vue

src/composables/auth/useFirebaseAuthActions.ts

src/composables/auth/useSubscription.ts

arjansingh · 2025-10-16T05:19:50Z

public/assets/images/cloud-subscription.webm

@christian-byrne do we want assets here or should this just get uploaded to GCS and we serve up a publicly signed link?

christian-byrne · 2025-10-17T08:59:42Z

There is a merge conflict it seems.

jtydhr88 · 2025-10-17T13:22:57Z

@christian-byrne fixed

github-actions · 2025-10-17T13:26:05Z

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

ESLint auto-fixes
Prettier formatting

christian-byrne · 2025-10-17T22:14:37Z

Are these failing tests expected? Can you check the visual results: https://dbd3e99a.comfyui-playwright-chromium.pages.dev/#?q=s:failed

src/components/actionbar/ComfyActionbar.vue

github-actions · 2025-10-18T01:13:38Z

🔧 Auto-fixes Applied

This PR has been automatically updated to fix linting and formatting issues.

⚠️ Important: Your local branch is now behind. Run git pull before making additional changes to avoid conflicts.

Changes made:

ESLint auto-fixes
Prettier formatting

src/components/actionbar/ComfyActionbar.vue

github-actions · 2025-10-18T02:38:34Z

Bundle Size Report

App Entry Points

Main application bundles

File	Size	Gzip	Brotli
assets/index-CtdCLNdd.js	9.67 MB	1.99 MB	1.43 MB
~~assets/index-CuLZTtAC.js~~
assets/index-DOdupr_x.js	2.02 MB	381 kB	296 kB
~~assets/index-E0kYOj1H.js~~
assets/index-PESgPnbc.js	507 B	292 B	249 B

Category Total: 11.7 MB

Core Views

Major application views and screens

File	Size	Gzip	Brotli
~~assets/GraphView-BLQk4ujW.js~~
assets/GraphView-BtlKFHvX.js	706 kB	138 kB	107 kB
assets/UserSelectView-DjvAHfN5.js	7.99 kB	2.39 kB	2.1 kB
~~assets/UserSelectView-Kp6GcnoT.js~~

Category Total: 714 kB

UI Panels

Settings and configuration panels

File	Size	Gzip	Brotli
~~assets/AboutPanel-Bq9ApgWv.js~~
assets/AboutPanel-CLKaxNTg.js	10.1 kB	2.58 kB	2.27 kB
assets/CreditsPanel-CNqxmfsr.js	21.9 kB	5.2 kB	4.53 kB
~~assets/CreditsPanel-CVBAywTM.js~~
~~assets/ExtensionPanel-DFmOwtDV.js~~
assets/ExtensionPanel-HQ5RMX7X.js	11.9 kB	2.75 kB	2.4 kB
assets/KeybindingPanel-B-XQIYLb.js	15.1 kB	3.68 kB	3.25 kB
~~assets/KeybindingPanel-IQI7hKov.js~~
assets/ServerConfigPanel-Bx6_KxjP.js	8.04 kB	2.08 kB	1.84 kB
~~assets/ServerConfigPanel-D2PD5OIf.js~~
assets/UserPanel-BIhpR5Ri.js	7.76 kB	1.97 kB	1.72 kB
~~assets/UserPanel-D0nz-wnp.js~~

Category Total: 74.8 kB

Services

Business logic and services

File	Size	Gzip	Brotli
~~assets/keybindingService-Cnd76Vc_.js~~
assets/keybindingService-DPPz7ASj.js	7.21 kB	1.75 kB	1.5 kB
~~assets/serverConfigStore-CB-AA3JS.js~~
assets/serverConfigStore-CMadDTUK.js	2.79 kB	886 B	773 B

Category Total: 10 kB

Utilities

Helper functions and utilities

File	Size	Gzip	Brotli
assets/mathUtil-CTARWQ-l.js	1.07 kB	525 B	452 B

Category Total: 1.07 kB

Other

Uncategorized bundles

File	Size	Gzip	Brotli
assets/ComfyQueueButton-Ca24HJzZ.js	10.7 kB	2.64 kB	2.33 kB
assets/UserAvatar.vue_vue_type_script_setup_true_lang-C9bSkTC5.js	1.12 kB	577 B	494 B

Category Total: 11.9 kB

Overall Total Size: 12.5 MB
Total Bundle Count: 16

src/extensions/core/cloudSubscription.ts

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

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

christian-byrne · 2025-10-18T03:14:02Z

src/services/dialogService.ts

+    dialogStore.showDialog({
+      key: 'subscription-required',
+      component: SubscriptionRequiredDialogContent,
+      dialogComponentProps: {
+        closable: true,
+        style: 'width: 720px; height: 434px;',
+        pt: {
+          content: {
+            class: 'overflow-hidden p-0!'
+          }
+        }
+      }
+    })


(replying to comment about whether this needs a no op) This should be tree-shaken due to the early return above I think - so I think it's fine how it is. (no change necessary).

github-actions · 2025-10-19T03:45:34Z

@jtydhr88 Backport to rh-test failed: Merge conflicts detected.

Please manually cherry-pick commit 7e1e8e3b65f664a5f3dbaf48f4db3920c7711a7b to the rh-test branch.

Conflicting files

src/components/actionbar/ComfyActionbar.vue
src/composables/auth/useFirebaseAuthActions.ts

github-actions · 2025-10-19T03:45:36Z

@jtydhr88 Backport to rh-test failed: Merge conflicts detected.

Please manually cherry-pick commit 7e1e8e3b65f664a5f3dbaf48f4db3920c7711a7b to the rh-test branch.

Conflicting files

src/components/actionbar/ComfyActionbar.vue
src/composables/auth/useFirebaseAuthActions.ts

Summary Implements cloud subscription management UI and flow for ComfyUI Cloud users. Core Features: - Subscription Status Tracking: Global reactive state management for subscription status across all components using shared subscriptionStatus ref - Subscribe to Run Button: Replaces the Run button in the actionbar with a "Subscribe to Run" button for users without active subscriptions - Subscription Required Dialog: Modal dialog with subscription benefits, pricing, and checkout flow with video background - Subscription Settings Panel: New settings panel showing subscription status, renewal date, and quick access to billing management - Auto-detection & Polling: Automatically polls subscription status after checkout completion and syncs state across the application https://github.com/user-attachments/assets/f41b8e6a-5845-48a7-8169-3a6fc0d2e5c8 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6064-subscription-page-28d6d73d36508135a2a0fe7c94b40852) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <[email protected]>

## Summary Backport of #6064 (subscription page) to the `rh-test` branch. This PR manually cherry-picks commit 7e1e8e3 to the rh-test branch and resolves merge conflicts that prevented automatic backporting. ## Conflicts Resolved ### 1. `src/components/actionbar/ComfyActionbar.vue` - **Conflict**: HEAD (rh-test) used `<ComfyQueueButton />` while the subscription PR introduced `<ComfyRunButton />` - **Resolution**: Updated to use `<ComfyRunButton />` to include the subscription functionality wrapper while maintaining the existing rh-test template structure ### 2. `src/composables/auth/useFirebaseAuthActions.ts` - **Conflict**: Simple ordering difference in the return statement - **Resolution**: Used the subscription PR's ordering: `deleteAccount, accessError, reportError` ## Testing The cherry-pick completed successfully and passed all pre-commit hooks: - ✅ ESLint - ✅ Prettier formatting - ⚠️ Note: 2 unused i18n keys detected (informational only, same as original PR) ## Related - Original PR: #6064 - Cherry-picked commit: 7e1e8e3 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6140-backport-subscription-page-to-rh-test-2916d73d365081f38f00df422004f61a) by [Unito](https://www.unito.io) Co-authored-by: Terry Jia <[email protected]> Co-authored-by: GitHub Action <[email protected]>

jtydhr88 requested review from a team, KarryCharon, Yorha4D and shinshin86 as code owners October 15, 2025 03:54

jtydhr88 marked this pull request as draft October 15, 2025 03:54

dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Oct 15, 2025

arjansingh reviewed Oct 15, 2025

View reviewed changes

src/components/dialog/content/setting/SubscriptionPanel.vue Outdated Show resolved Hide resolved

jtydhr88 force-pushed the subscribe-page2 branch from 071bee4 to 3a205f1 Compare October 16, 2025 03:43

arjansingh reviewed Oct 16, 2025

View reviewed changes

arjansingh requested a review from christian-byrne October 16, 2025 05:22

jtydhr88 force-pushed the subscribe-page2 branch 3 times, most recently from 1557281 to 8cfc50d Compare October 17, 2025 02:50

christian-byrne added claude-review Add to trigger a PR code review from Claude Code and removed claude-review Add to trigger a PR code review from Claude Code labels Oct 17, 2025

subscription page

6f2c404

jtydhr88 force-pushed the subscribe-page2 branch from 8cfc50d to 6f2c404 Compare October 17, 2025 13:21

[automated] Apply ESLint and Prettier fixes

776c36f

jtydhr88 marked this pull request as ready for review October 17, 2025 19:01

jtydhr88 requested a review from pythongosssss as a code owner October 17, 2025 19:01

dosubot bot added size:XXL This PR changes 1000+ lines, ignoring generated files. and removed size:XL This PR changes 500-999 lines, ignoring generated files. labels Oct 17, 2025

jtydhr88 added 2 commits October 17, 2025 15:39

bug fix

bc32b82

test fix

88edbb5

christian-byrne reviewed Oct 17, 2025

View reviewed changes

src/components/actionbar/ComfyActionbar.vue Outdated Show resolved Hide resolved

jtydhr88 and others added 3 commits October 17, 2025 20:09

code improve

ae0980c

ui improve

03869d7

[automated] Apply ESLint and Prettier fixes

62439c5

christian-byrne reviewed Oct 18, 2025

View reviewed changes

src/components/actionbar/ComfyActionbar.vue Show resolved Hide resolved

code improve

c629798

christian-byrne reviewed Oct 18, 2025

View reviewed changes

code improve

6f9aef0

christian-byrne approved these changes Oct 19, 2025

View reviewed changes

christian-byrne added area:auth area:cloud labels Oct 19, 2025

christian-byrne merged commit 7e1e8e3 into main Oct 19, 2025
34 of 35 checks passed

christian-byrne deleted the subscribe-page2 branch October 19, 2025 03:21

christian-byrne added needs-backport Fix/change that needs to be cherry-picked to the current feature freeze branch branch:rh-test labels Oct 19, 2025

christian-byrne mentioned this pull request Oct 19, 2025

[backport rh-test] subscription panel #6140

Merged

subscription page #6064

subscription page #6064

Uh oh!

Conversation

jtydhr88 commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Build Status

🔗 Links

Uh oh!

github-actions bot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Playwright Test Results

📈 Summary

📊 Test Reports by Browser

Uh oh!

arjansingh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

arjansingh Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

arjansingh Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

arjansingh Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

arjansingh Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

arjansingh left a comment

Choose a reason for hiding this comment

Uh oh!

arjansingh Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

arjansingh Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

christian-byrne Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

arjansingh Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

christian-byrne commented Oct 17, 2025

Uh oh!

jtydhr88 commented Oct 17, 2025

Uh oh!

github-actions bot commented Oct 17, 2025

🔧 Auto-fixes Applied

Changes made:

Uh oh!

christian-byrne commented Oct 17, 2025

Uh oh!

Uh oh!

github-actions bot commented Oct 18, 2025

🔧 Auto-fixes Applied

Changes made:

Uh oh!

Uh oh!

github-actions bot commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Report

App Entry Points

Core Views

UI Panels

jtydhr88 commented Oct 15, 2025 •

edited

Loading

github-actions bot commented Oct 15, 2025 •

edited

Loading

github-actions bot commented Oct 15, 2025 •

edited

Loading

christian-byrne Oct 18, 2025 •

edited

Loading

github-actions bot commented Oct 18, 2025 •

edited

Loading

christian-byrne Oct 18, 2025 •

edited

Loading