refactor: rename isSubscribed for better expressiveness and avoid initializing cloud modules on local
#7127
Conversation
christian-byrne
requested review from
a team and
pythongosssss
as code owners
dosubot
bot
added
the
size:L
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/04/2025, 08:28:00 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/04/2025, 08:37:22 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
📝 WalkthroughWalkthroughThe pull request renames the subscription state property from Changes
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/composables/useCoreCommands.ts (1)
66-67: Consider gatinguseSubscription()to avoid initializing cloud logic on local buildsThe new guards using
isSubscribedOrIsNotCloud.valueandshowSubscriptionDialog()look correct and preserve the prior behavior with the renamed flag.To better match the PR objective of not initializing cloud modules on local, you could avoid calling
useSubscription()at module scope and instead gate it, for example:export function useCoreCommands(): ComfyCommand[] { // ... const subscription = isCloud /* from '@/platform/distribution/types' */ ? useSubscription() : null const isSubscribedOrIsNotCloud = subscription?.isSubscribedOrIsNotCloud const showSubscriptionDialog = subscription?.showSubscriptionDialog // use these in the queue commands, with a null check if needed }This would prevent the subscription composable (and its network activity) from being set up when running non‑cloud builds, while keeping the command guards unchanged for cloud.
Also applies to: 468-488, 491-512, 514-557
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue(2 hunks)src/components/dialog/content/setting/CreditsPanel.vue(3 hunks)src/components/topbar/CurrentUserPopover.test.ts(1 hunks)src/components/topbar/CurrentUserPopover.vue(3 hunks)src/composables/auth/useFirebaseAuthActions.ts(1 hunks)src/composables/useCoreCommands.ts(4 hunks)src/platform/cloud/subscription/components/SubscribeButton.vue(2 hunks)src/platform/cloud/subscription/components/SubscriptionPanel.vue(5 hunks)src/platform/cloud/subscription/composables/useSubscription.ts(2 hunks)src/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.ts(2 hunks)src/scripts/app.ts(1 hunks)src/services/dialogService.ts(1 hunks)tests-ui/tests/composables/useCoreCommands.test.ts(1 hunks)tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts(3 hunks)tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts(3 hunks)tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.ts(5 hunks)
🧰 Additional context used
📓 Path-based instructions (23)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tssrc/services/dialogService.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/components/topbar/CurrentUserPopover.vuetests-ui/tests/composables/useCoreCommands.test.tssrc/platform/cloud/subscription/components/SubscribeButton.vue
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tstests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tssrc/services/dialogService.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tstests-ui/tests/composables/useCoreCommands.test.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tstests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tssrc/services/dialogService.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tstests-ui/tests/composables/useCoreCommands.test.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tssrc/services/dialogService.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/components/topbar/CurrentUserPopover.vuetests-ui/tests/composables/useCoreCommands.test.tssrc/platform/cloud/subscription/components/SubscribeButton.vue
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tssrc/services/dialogService.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/components/topbar/CurrentUserPopover.vuetests-ui/tests/composables/useCoreCommands.test.tssrc/platform/cloud/subscription/components/SubscribeButton.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tssrc/services/dialogService.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/components/topbar/CurrentUserPopover.vuetests-ui/tests/composables/useCoreCommands.test.tssrc/platform/cloud/subscription/components/SubscribeButton.vue
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tstests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tssrc/services/dialogService.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tstests-ui/tests/composables/useCoreCommands.test.ts
tests-ui/**/*.test.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)
tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features
Follow existing test patterns in the codebase
Use existing test utilities rather than writing custom utilities
Mock external dependencies in tests
Always prefer vitest mock functions over writing verbose manual mocks
Files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tstests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tstests-ui/tests/composables/useCoreCommands.test.ts
**/*.{test,spec}.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Unit and component tests should be located in
tests-ui/or co-located with components assrc/components/**/*.{test,spec}.ts; E2E tests should be inbrowser_tests/
Files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/components/topbar/CurrentUserPopover.test.tstests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tstests-ui/tests/composables/useCoreCommands.test.ts
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/dialog/content/setting/CreditsPanel.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/topbar/CurrentUserPopover.vuesrc/platform/cloud/subscription/components/SubscribeButton.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/dialog/content/setting/CreditsPanel.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/topbar/CurrentUserPopover.vuesrc/platform/cloud/subscription/components/SubscribeButton.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/services/dialogService.tssrc/components/topbar/CurrentUserPopover.vuesrc/platform/cloud/subscription/components/SubscribeButton.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/dialog/content/setting/CreditsPanel.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/topbar/CurrentUserPopover.vuesrc/platform/cloud/subscription/components/SubscribeButton.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/services/dialogService.tssrc/components/topbar/CurrentUserPopover.vuesrc/platform/cloud/subscription/components/SubscribeButton.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/topbar/CurrentUserPopover.vuesrc/platform/cloud/subscription/components/SubscribeButton.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/services/dialogService.tssrc/components/topbar/CurrentUserPopover.vuesrc/platform/cloud/subscription/components/SubscribeButton.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/topbar/CurrentUserPopover.vuesrc/platform/cloud/subscription/components/SubscribeButton.vuesrc/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyFiles:
src/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/scripts/app.tssrc/services/dialogService.tssrc/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directlyFiles:
src/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/composables/auth/useFirebaseAuthActions.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/services/dialogService.ts**/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables in the format
useXyz.tsFiles:
src/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/platform/cloud/subscription/composables/useSubscription.tstests-ui/tests/composables/useCoreCommands.test.tssrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/topbar/CurrentUserPopover.test.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/dialog/content/setting/CreditsPanel.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/dialog/content/setting/CreditsPanel.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/topbar/CurrentUserPopover.vue🧠 Learnings (9)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaksApplied to files:
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/composables/useCoreCommands.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/topbar/CurrentUserPopover.test.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/components/topbar/CurrentUserPopover.vuetests-ui/tests/composables/useCoreCommands.test.tssrc/platform/cloud/subscription/components/SubscribeButton.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new featuresApplied to files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in testsApplied to files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/composables/useCoreCommands.test.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocksApplied to files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursor/rules/unit-test.mdc:0-0 Timestamp: 2025-11-24T19:48:09.318Z Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possibleApplied to files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with PopoverApplied to files:
src/components/topbar/CurrentUserPopover.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Prefer emit/event-name for state changes over other communication patternsApplied to files:
src/platform/cloud/subscription/components/SubscribeButton.vue🧬 Code graph analysis (6)
src/composables/useCoreCommands.ts (1)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)src/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.ts (2)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
CloudSubscriptionStatusResponse(23-28)src/platform/telemetry/types.ts (1)
TelemetryProvider(259-328)src/composables/auth/useFirebaseAuthActions.ts (1)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)src/scripts/app.ts (1)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)src/services/dialogService.ts (1)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts (1)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)🪛 ESLint
src/components/dialog/content/setting/CreditsPanel.vue
[error] 128-128: Unable to resolve path to module '@/platform/distribution/types'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: collect
- GitHub Check: lint-and-format
🔇 Additional comments (19)
src/components/topbar/CurrentUserPopover.test.ts (1)
82-88: Subscription mock rename and shape look correctMocking
isSubscribedOrIsNotCloudas{ value: true }matches the composable’s ref-like API and aligns this test with the new subscription flag.src/services/dialogService.ts (1)
380-399: Cloud‑gated top‑up dialog matches new subscription flagThe new
isCloudguard plusisSubscribedOrIsNotCloudcheck correctly prevents the top‑up dialog (anduseSubscription()usage) on local builds and when cloud users aren’t eligible.tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.ts (1)
27-28: Watcher tests correctly updated toisSubscribedOrIsNotCloudUsing a computed based on
isActiveand passingisSubscribedOrIsNotCloudinto the watcher keeps the tests aligned with the new API and preserves the intended behavior.Also applies to: 77-83, 107-113, 129-135, 155-160
src/composables/auth/useFirebaseAuthActions.ts (1)
84-89: Cloud‑only subscription check inpurchaseCreditsis consistentWrapping the
useSubscription()access in anisCloudcheck and switching toisSubscribedOrIsNotCloud.valuecleanly aligns this flow with the new flag while avoiding cloud subscription setup on local runs.src/components/dialog/content/setting/CreditsPanel.vue (1)
18-23: Credits top‑up button now correctly respects new subscription flagThe
isSubscribedOrIsNotCloudcomputed cleanly gates the purchase button for cloud users while avoidinguseSubscription()calls on local builds; the template condition matches the new flag.Also applies to: 128-152
src/platform/cloud/subscription/composables/useSubscription.ts (1)
34-38: Renamed subscription flag is consistently wired through the composable
isSubscribedOrIsNotCloudis correctly computed, passed intouseSubscriptionCancellationWatcher, and exposed on the returned API, keeping behavior intact while giving downstream callers a clearer predicate.Also applies to: 111-118, 224-241
src/scripts/app.ts (1)
679-690: Logic correctly short-circuits to avoid cloud module initialization in non-cloud builds.The branching ensures
useSubscription()is only called whenisCloudis true, aligning with the PR's goal to prevent cloud-specific module initialization in local environments. The redundancy withshowTopUpCreditsDialog's internal check is intentional defensive layering.tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts (1)
95-127: Test updates correctly reflect the API rename.The test cases properly validate that
isSubscribedOrIsNotCloudbehaves as expected:truewhen the subscription is active,falsewhen inactive. The mockedisCloud: truecontext at line 56 ensures these tests run in the cloud environment where this distinction matters.tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts (2)
9-17: Mock data correctly updated to use the renamed property.The mock structure aligns with the updated
useSubscriptionAPI, ensuring tests accurately simulate both subscribed and non-subscribed states viaisSubscribedOrIsNotCloud.
121-151: Test cases properly exercise both subscription states.Each test correctly mutates
mockSubscriptionData.isSubscribedOrIsNotCloudbefore mounting to validate the expected UI behavior for active, inactive, and cancelled subscription scenarios.src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue (1)
4-17: Component correctly updated to use the renamed subscription predicate.The template key, destructuring, and computed logic all consistently reference
isSubscribedOrIsNotCloud, maintaining the intended behavior: renderComfyQueueButtonwhen the user is subscribed or not in cloud mode, otherwise renderSubscribeToRunButton.src/platform/cloud/subscription/components/SubscribeButton.vue (2)
54-54: Destructuring updated to use the renamed property.
79-83: Polling logic correctly uses the renamed predicate.When the subscription checkout completes successfully,
isSubscribedOrIsNotCloud.valuebecomestruein cloud mode, stopping the poll and emitting thesubscribedevent. The logic is semantically unchanged.src/components/topbar/CurrentUserPopover.vue (2)
26-59: LGTM! Clear and consistent rename.The rename from
isActiveSubscriptiontoisSubscribedOrIsNotCloudsignificantly improves code clarity by explicitly conveying that the UI shows credits/top-up functionality either when the user is subscribed OR when running locally (not in cloud mode). The conditional logic for toggling between the credits UI and the subscribe button is now more self-documenting.
128-128: Consistent destructuring update.The script section correctly reflects the renamed property, maintaining consistency between the template and script logic.
src/platform/cloud/subscription/components/SubscriptionPanel.vue (2)
7-72: LGTM! Comprehensive and consistent rename across subscription UI.The rename improves clarity across multiple conditional blocks that control the subscription panel's UI state. The new name
isSubscribedOrIsNotCloudmakes it explicit that subscription features are available both for cloud subscribers and local installations.
322-330: Consistent destructuring with template usage.The script correctly destructures
isSubscribedOrIsNotCloudfromuseSubscription(), maintaining perfect alignment with all template conditional checks throughout the component.src/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.ts (2)
13-27: LGTM! Type definition and parameter consistently updated.The rename propagates correctly through the type definition and function signature, maintaining type safety and consistency with the calling code.
69-101: Proper cancellation detection logic with correct cleanup.The conditional check at line 76 correctly uses the renamed
isSubscribedOrIsNotCloudto detect when a subscription becomes inactive. The watcher properly cleans up resources viaonScopeDispose(lines 121-123), preventing memory leaks as emphasized in the project learnings.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
tests-ui/tests/composables/useCoreCommands.test.ts (1)
101-106: Consider aligning mocked subscription flag shape with real composableRenaming the mocked field to
isSubscribedOrIsNotCloudkeeps these tests in sync with the new API. If the realuseSubscriptionnow exposes this as aRef<boolean>, you might optionally switch the mock toisSubscribedOrIsNotCloud: ref(true)to better mirror production usage and catch future.valueaccess changes, though the current truthy function works for these tests.src/components/topbar/CurrentUserPopover.vue (1)
128-128: Consider adding cloud-aware initialization.While the renaming is correct, this component could benefit from the conditional initialization pattern used in
CreditsPanel.vue(line 148) to prevent cloud module initialization on local environments:const subscription = isCloud ? useSubscription() : null const isSubscribedOrIsNotCloud = computed(() => { if (!isCloud) return true return subscription?.isSubscribedOrIsNotCloud.value ?? false })This would align with the PR's goal to avoid initializing cloud modules on local environments.
Apply this pattern if the component can be loaded in non-cloud environments:
+import { isCloud } from '@/platform/distribution/types' + const { userDisplayName, userEmail, userPhotoUrl, handleSignOut } = useCurrentUser() const authActions = useFirebaseAuthActions() const dialogService = useDialogService() -const { isSubscribedOrIsNotCloud, fetchStatus } = useSubscription() +const subscription = isCloud ? useSubscription() : null +const isSubscribedOrIsNotCloud = computed(() => { + if (!isCloud) return true + return subscription?.isSubscribedOrIsNotCloud.value ?? false +}) +const fetchStatus = subscription?.fetchStatus ?? (() => Promise.resolve())
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue(2 hunks)src/components/dialog/content/setting/CreditsPanel.vue(3 hunks)src/components/topbar/CurrentUserPopover.test.ts(1 hunks)src/components/topbar/CurrentUserPopover.vue(3 hunks)src/composables/auth/useFirebaseAuthActions.ts(1 hunks)src/composables/useCoreCommands.ts(4 hunks)src/platform/cloud/subscription/components/SubscribeButton.vue(2 hunks)src/platform/cloud/subscription/components/SubscriptionPanel.vue(5 hunks)src/platform/cloud/subscription/composables/useSubscription.ts(2 hunks)src/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.ts(2 hunks)src/scripts/app.ts(1 hunks)src/services/dialogService.ts(1 hunks)tests-ui/tests/composables/useCoreCommands.test.ts(1 hunks)tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts(3 hunks)tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts(3 hunks)tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.ts(5 hunks)
🧰 Additional context used
📓 Path-based instructions (23)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/platform/cloud/subscription/components/SubscribeButton.vuesrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/platform/cloud/subscription/components/SubscribeButton.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/composables/useCoreCommands.tstests-ui/tests/composables/useCoreCommands.test.tssrc/services/dialogService.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/scripts/app.ts**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/platform/cloud/subscription/components/SubscribeButton.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/composables/useCoreCommands.tstests-ui/tests/composables/useCoreCommands.test.tssrc/services/dialogService.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/scripts/app.tssrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/platform/cloud/subscription/components/SubscribeButton.vuesrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/platform/cloud/subscription/components/SubscribeButton.vuesrc/composables/useCoreCommands.tssrc/services/dialogService.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/scripts/app.ts**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/platform/cloud/subscription/components/SubscribeButton.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/composables/useCoreCommands.tstests-ui/tests/composables/useCoreCommands.test.tssrc/services/dialogService.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/scripts/app.ts**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/platform/cloud/subscription/components/SubscribeButton.vuesrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/platform/cloud/subscription/components/SubscribeButton.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/composables/useCoreCommands.tstests-ui/tests/composables/useCoreCommands.test.tssrc/services/dialogService.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/scripts/app.tssrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/platform/cloud/subscription/components/SubscribeButton.vuesrc/composables/useCoreCommands.tssrc/services/dialogService.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/scripts/app.tssrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/cloud/subscription/components/SubscribeButton.vuesrc/composables/useCoreCommands.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/cloud/subscription/components/SubscribeButton.vuesrc/composables/useCoreCommands.tssrc/services/dialogService.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/scripts/app.tssrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/platform/cloud/subscription/components/SubscribeButton.vuesrc/composables/useCoreCommands.tssrc/components/dialog/content/setting/CreditsPanel.vuesrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/composables/auth/useFirebaseAuthActions.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/composables/useCoreCommands.tstests-ui/tests/composables/useCoreCommands.test.tssrc/services/dialogService.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/scripts/app.ts**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issueFiles:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/composables/useCoreCommands.tstests-ui/tests/composables/useCoreCommands.test.tssrc/services/dialogService.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/scripts/app.ts**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configurationFiles:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/composables/useCoreCommands.tstests-ui/tests/composables/useCoreCommands.test.tssrc/services/dialogService.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/auth/useFirebaseAuthActions.tssrc/scripts/app.tstests-ui/**/*.test.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)
tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features
Follow existing test patterns in the codebase
Use existing test utilities rather than writing custom utilities
Mock external dependencies in tests
Always prefer vitest mock functions over writing verbose manual mocksFiles:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tstests-ui/tests/composables/useCoreCommands.test.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.ts**/*.{test,spec}.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Unit and component tests should be located in
tests-ui/or co-located with components assrc/components/**/*.{test,spec}.ts; E2E tests should be inbrowser_tests/Files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tstests-ui/tests/composables/useCoreCommands.test.tssrc/components/topbar/CurrentUserPopover.test.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyFiles:
src/composables/useCoreCommands.tssrc/services/dialogService.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/composables/auth/useFirebaseAuthActions.tssrc/scripts/app.tssrc/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directlyFiles:
src/composables/useCoreCommands.tssrc/services/dialogService.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/composables/auth/useFirebaseAuthActions.ts**/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables in the format
useXyz.tsFiles:
src/composables/useCoreCommands.tstests-ui/tests/composables/useCoreCommands.test.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tssrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/dialog/content/setting/CreditsPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/dialog/content/setting/CreditsPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/dialog/content/setting/CreditsPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue🧠 Learnings (8)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaksApplied to files:
src/platform/cloud/subscription/components/SubscribeButton.vuetests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/platform/cloud/subscription/useSubscription.test.tssrc/composables/useCoreCommands.tstests-ui/tests/composables/useCoreCommands.test.tssrc/platform/cloud/subscription/composables/useSubscription.tssrc/platform/cloud/subscription/components/SubscriptionPanel.vuesrc/components/topbar/CurrentUserPopover.vuesrc/components/topbar/CurrentUserPopover.test.tssrc/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.tstests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.tssrc/composables/auth/useFirebaseAuthActions.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in testsApplied to files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/composables/useCoreCommands.test.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new featuresApplied to files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebaseApplied to files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocksApplied to files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.tstests-ui/tests/composables/useCoreCommands.test.ts📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursor/rules/unit-test.mdc:0-0 Timestamp: 2025-11-24T19:48:09.318Z Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possibleApplied to files:
tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with PopoverApplied to files:
src/components/topbar/CurrentUserPopover.vue🧬 Code graph analysis (6)
tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts (1)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)src/composables/useCoreCommands.ts (1)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)src/services/dialogService.ts (1)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)src/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.ts (2)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
CloudSubscriptionStatusResponse(23-28)src/platform/telemetry/types.ts (1)
TelemetryProvider(259-328)tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.ts (1)
src/extensions/core/load3d/Load3d.ts (1)
isActive(383-391)src/composables/auth/useFirebaseAuthActions.ts (1)
src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)🪛 ESLint
src/components/dialog/content/setting/CreditsPanel.vue
[error] 128-128: Unable to resolve path to module '@/platform/distribution/types'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: merge-reports
🔇 Additional comments (13)
src/components/topbar/CurrentUserPopover.test.ts (1)
82-88: Subscription mock rename is consistent with composable APIMocking
useSubscriptionwithisSubscribedOrIsNotCloud: { value: true }aligns with the new flag name and expected ref-like shape; no behavior change in the tests.src/services/dialogService.ts (1)
380-399: Cloud-only subscription guard inshowTopUpCreditsDialogThe early
if (isCloud) { const { isSubscribedOrIsNotCloud } = useSubscription(); if (!isSubscribedOrIsNotCloud.value) return }cleanly avoids touching the subscription composable on local builds and prevents showing the top-up dialog for unsubscribed cloud users.Please just confirm that a silent no-op in the unsubscribed cloud case is intentional and that all callers already gate the top‑up entry points on subscription state, so users never click a button that does nothing.
src/platform/cloud/subscription/components/SubscribeButton.vue (1)
54-83: Polling now usesisSubscribedOrIsNotCloudconsistentlySwitching the destructured flag and the polling condition to
isSubscribedOrIsNotCloud.valuekeeps the subscribe flow semantics intact while aligning with the new API; interval and loading-state cleanup remain correct.src/components/actionbar/ComfyRunButton/CloudRunButtonWrapper.vue (1)
1-18: Run button wrapper correctly switched toisSubscribedOrIsNotCloudThe computed and template key now both depend on
isSubscribedOrIsNotCloudinstead of the old flag, preserving the queue/subscribe toggle behavior with the updated API.tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts (1)
8-17: Tests now trackisSubscribedOrIsNotCloudfor subscription stateRenaming the mock field and all subscription-state expectations to
isSubscribedOrIsNotCloudkeeps the active/inactive and renewal/expiry test scenarios aligned with the updated composable API, with no change to asserted behavior.Also applies to: 121-152
tests-ui/tests/platform/cloud/subscription/useSubscriptionCancellationWatcher.test.ts (1)
23-32: Cancellation watcher tests aligned withisSubscribedOrIsNotCloudUsing a local
computedisSubscribedOrIsNotCloudand passing it intouseSubscriptionCancellationWatcherin all test setups preserves the prior behavior while matching the new option name expected by the composable.Also applies to: 77-83, 107-113, 129-135, 155-160
src/composables/auth/useFirebaseAuthActions.ts (1)
84-89: Cloud-only subscription guard added topurchaseCreditsThe new
if (isCloud) { const { isSubscribedOrIsNotCloud } = useSubscription(); if (!isSubscribedOrIsNotCloud.value) return }guard cleanly avoids initializing subscription logic on local and prevents initiating a credit purchase when the cloud user isn’t subscribed.Please double‑check that callers never invoke
purchaseCreditsfor unsubscribed cloud users (or, if they can, that a silent early return without feedback is the desired UX).tests-ui/tests/platform/cloud/subscription/useSubscription.test.ts (1)
95-127: LGTM! Test updates align with API rename.The test correctly reflects the renamed subscription state property. The test logic and assertions remain unchanged, maintaining coverage.
src/components/dialog/content/setting/CreditsPanel.vue (1)
148-152: Excellent cloud-aware initialization pattern.This is the correct approach to prevent cloud module initialization on local environments:
- Conditionally call
useSubscription()only whenisCloudis true- The computed property correctly returns
truefor non-cloud (no subscription required)- For cloud environments, it delegates to the subscription state
This pattern should be used consistently across the codebase where subscription status is needed.
src/scripts/app.ts (1)
679-690: Cloud-aware error handling is correct.The logic properly short-circuits for non-cloud environments before initializing the subscription module. For cloud environments, the subscription is only checked when a payment error occurs.
Note: Since
useSubscription()is a shared composable (viacreateSharedComposable), calling it multiple times returns the same instance, making this pattern safe.src/platform/cloud/subscription/composables/useSubscriptionCancellationWatcher.ts (1)
15-27: LGTM! Parameter renaming is consistent.The cancellation watcher correctly receives and uses the renamed subscription state property. No logic changes, maintaining existing behavior.
Also applies to: 76-76
src/platform/cloud/subscription/components/SubscriptionPanel.vue (1)
7-11: LGTM! Consistent renaming throughout the component.All references to the subscription state have been correctly updated to use
isSubscribedOrIsNotCloud. Since this component is in the cloud-specific path, conditional initialization is not needed here.Also applies to: 30-47, 50-72, 199-212, 323-330
src/platform/cloud/subscription/composables/useSubscription.ts (1)
34-38: LGTM! Public API renamed consistently.The core subscription composable correctly:
- Computes
isSubscribedOrIsNotCloudbased on cloud status and subscription state- Passes the renamed property to the cancellation watcher
- Exports the renamed property in the returned object
The logic correctly returns
truefor non-cloud environments, treating them as "effectively subscribed" for feature access purposes.Also applies to: 114-114, 226-226
DrJKL
left a comment
DrJKL
left a comment
There was a problem hiding this comment.
I don't love compound logic in names like this.
Is there something more essential about the gating that we can describe without exposing what specifically goes into it right now?
Maybe subscriptionIneligible?
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.19 MB (baseline 3.2 MB) • 🟢 -8.94 kBMain entry bundles and manifests
Status: 4 added / 3 removed Graph Workspace — 972 kB (baseline 972 kB) • 🟢 -55 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • 🔴 +44 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 182 kB (baseline 173 kB) • 🔴 +9.26 kBReusable component library chunks
Status: 9 added / 9 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 3 added / 3 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Status: 5 added / 5 removed Other — 3.81 MB (baseline 3.81 MB) • 🔴 +60 BBundles that do not match a named category
Status: 23 added / 23 removed |
Why's that? |
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/composables/useCoreCommands.ts(7 hunks)tests-ui/tests/composables/useCoreCommands.test.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (17)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
tests-ui/tests/composables/useCoreCommands.test.tssrc/composables/useCoreCommands.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
tests-ui/tests/composables/useCoreCommands.test.tssrc/composables/useCoreCommands.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
tests-ui/tests/composables/useCoreCommands.test.tssrc/composables/useCoreCommands.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
tests-ui/tests/composables/useCoreCommands.test.tssrc/composables/useCoreCommands.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
tests-ui/tests/composables/useCoreCommands.test.tssrc/composables/useCoreCommands.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
tests-ui/tests/composables/useCoreCommands.test.tssrc/composables/useCoreCommands.ts
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
tests-ui/tests/composables/useCoreCommands.test.tssrc/composables/useCoreCommands.ts
tests-ui/**/*.test.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)
tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features
Follow existing test patterns in the codebase
Use existing test utilities rather than writing custom utilities
Mock external dependencies in tests
Always prefer vitest mock functions over writing verbose manual mocks
Files:
tests-ui/tests/composables/useCoreCommands.test.ts
**/*.{test,spec}.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Unit and component tests should be located in
tests-ui/or co-located with components assrc/components/**/*.{test,spec}.ts; E2E tests should be inbrowser_tests/
Files:
tests-ui/tests/composables/useCoreCommands.test.ts
**/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables in the format
useXyz.ts
Files:
tests-ui/tests/composables/useCoreCommands.test.tssrc/composables/useCoreCommands.ts
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/composables/useCoreCommands.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/composables/useCoreCommands.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/composables/useCoreCommands.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/composables/useCoreCommands.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/composables/useCoreCommands.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/composables/useCoreCommands.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/composables/useCoreCommands.ts
🧠 Learnings (15)
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests
Applied to files:
tests-ui/tests/composables/useCoreCommands.test.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks
Applied to files:
tests-ui/tests/composables/useCoreCommands.test.tssrc/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
tests-ui/tests/composables/useCoreCommands.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible
Applied to files:
tests-ui/tests/composables/useCoreCommands.test.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement computed properties with computed()
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Implement computed properties with computed() function
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilities
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:14.779Z
Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue files
Applied to files:
src/composables/useCoreCommands.ts
🧬 Code graph analysis (1)
src/composables/useCoreCommands.ts (3)
tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts (1)
isCloud(34-36)tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts (1)
isCloud(44-46)src/platform/cloud/subscription/composables/useSubscription.ts (1)
useSubscription(244-244)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: lint-and-format
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (3)
tests-ui/tests/composables/useCoreCommands.test.ts (1)
101-106: LGTM! Mock structure correctly implements ref-like API.The mock now properly returns
isSubscribedOrIsNotCloudas a ref-like object with{ value: true }, which matches how the production code accessessubscriptionState.valuein the command functions.src/composables/useCoreCommands.ts (2)
94-97: Excellent: Cloud-aware initialization successfully prevents module loading on local.The conditional pattern
isCloud ? useSubscription() : nullensures the cloud subscription module is only initialized in cloud environments, directly achieving the PR's stated goal. The fallback todefaultSubscriptionState(value: true) andnoopcorrectly bypasses subscription checks on local builds.
489-490: Consistent subscription gating across all queue commands.All three queue commands (QueuePrompt, QueuePromptFront, QueueSelectedOutputNodes) now uniformly check
subscriptionState.valueand invokesubscriptionDialog()when gated. This correctly enforces subscription requirements in cloud environments while allowing unrestricted execution locally.Also applies to: 512-513, 534-535
| const defaultSubscriptionState: Pick<ComputedRef<boolean>, 'value'> = { | ||
| value: true | ||
| } | ||
| const noop = () => {} |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider using computed() for better type safety.
The manual object with Pick<ComputedRef<boolean>, 'value'> type works correctly but is non-idiomatic. Using Vue's computed() would provide stronger type guarantees and consistency with the reactivity system.
Apply this diff for a cleaner implementation:
+import { computed } from 'vue'
+
-const defaultSubscriptionState: Pick<ComputedRef<boolean>, 'value'> = {
- value: true
-}
+const defaultSubscriptionState = computed(() => true)
const noop = () => {}This ensures defaultSubscriptionState has the exact same type as subscription?.isSubscribedOrIsNotCloud from the cloud path.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const defaultSubscriptionState: Pick<ComputedRef<boolean>, 'value'> = { | |
| value: true | |
| } | |
| const noop = () => {} | |
| const defaultSubscriptionState = computed(() => true) | |
| const noop = () => {} |
🤖 Prompt for AI Agents
In src/composables/useCoreCommands.ts around lines 69-72, replace the manual
object typed as Pick<ComputedRef<boolean>,'value'> with a proper Vue computed
ref so defaultSubscriptionState is a ComputedRef<boolean> (e.g. const
defaultSubscriptionState = computed(() => true)); also ensure computed is
imported from 'vue' if it's not already; leave noop as-is. This makes
defaultSubscriptionState have the exact same reactive type as
subscription?.isSubscribedOrIsNotCloud.
Renames the shared subscription state export to keep the descriptive name
isSubscribedOrIsNotCloud. Previously it was justisSubscribedwhich led to some misunderstandings and could lieIn some call sites, short-circuit on
isCloudearlier, to avoid initializing a cloud-specific module (which can have non-breaking but inadvertant side-effects like network requests) on local. We want that all to be tree-shaken on local┆Issue is synchronized with this Notion page by Unito