change credits icons and tooltips (conditional on feature flag) #7276
Conversation
christian-byrne
requested review from
a team,
KarryCharon,
Yorha4D,
pythongosssss and
shinshin86
as code owners
dosubot
bot
added
the
size:L
📝 WalkthroughWalkthroughAdds a subscription_tiers_enabled remote flag and a subscriptionTiersEnabled getter in useFeatureFlags; components and badge logic now branch on that flag to render image-based icons (with size/bg handling) or fallback unicode glyphs; litegraph icon/badge types updated and localization adds unified-credits text. Changes
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (3)
🧰 Additional context used📓 Path-based instructions (13)src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.ts📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
**/*.{js,ts,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
**/*.{ts,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/lib/litegraph/**/*.{js,ts,jsx,tsx}📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Files:
src/lib/litegraph/**/*.{ts,tsx}📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Files:
src/**/{services,composables}/**/*.{ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/composables/use*.ts📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (5)📚 Learning: 2025-12-09T03:39:54.501ZApplied to files:
📚 Learning: 2025-11-24T19:47:56.371ZApplied to files:
📚 Learning: 2025-11-24T19:47:56.371ZApplied to files:
📚 Learning: 2025-11-24T19:47:56.371ZApplied to files:
📚 Learning: 2025-11-24T19:47:56.371ZApplied to files:
🧬 Code graph analysis (1)src/composables/useFeatureFlags.ts (2)
⏰ 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)
🔇 Additional comments (4)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Test Results⏰ Completed at: 12/09/2025, 09:37:49 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/09/2025, 09:29:17 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.21 MB (baseline 3.21 MB) • 🔴 +3.37 kBMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 985 kB (baseline 983 kB) • 🔴 +2.28 kBGraph 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) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 176 kB (baseline 177 kB) • 🟢 -1.35 kBReusable component library chunks
Status: 6 added / 6 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 3.18 kB (baseline 3.18 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
Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/composables/node/usePriceBadge.ts (1)
19-19: Missing i18n for user-facing string.The string "Partner Nodes x " is displayed in the UI but is not internationalized.
As per coding guidelines, use vue-i18n for all user-facing strings. Apply this diff:
+import { useI18n } from 'vue-i18n' export const usePriceBadge = () => { const { flags } = useFeatureFlags() + const { t } = useI18n() function updateSubgraphCredits(node: LGraphNode) { if (!node.isSubgraphNode()) return node.badges = node.badges.filter((b) => !isCreditsBadge(b)) const newBadges = collectCreditsBadges(node.subgraph) if (newBadges.length > 1) { - node.badges.push(getCreditsBadge('Partner Nodes x ' + newBadges.length)) + node.badges.push(getCreditsBadge(t('partnerNodesCount', { count: newBadges.length }))) } else { node.badges.push(...newBadges) } }Add to
src/locales/en/main.json:"partnerNodesCount": "Partner Nodes x {count}"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (7)
src/components/common/UserCredit.vue(3 hunks)src/components/topbar/CurrentUserPopover.vue(3 hunks)src/composables/node/usePriceBadge.ts(2 hunks)src/composables/useFeatureFlags.ts(2 hunks)src/lib/litegraph/src/LGraphBadge.ts(2 hunks)src/lib/litegraph/src/LGraphIcon.ts(2 hunks)src/locales/en/main.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (18)
src/**/*.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 conventions
Files:
src/components/common/UserCredit.vuesrc/components/topbar/CurrentUserPopover.vue
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/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/components/topbar/CurrentUserPopover.vuesrc/composables/node/usePriceBadge.tssrc/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.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
src/**/*.{ts,tsx,vue}: Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Use refactoring to make complex code simpler
Keep functions short and functional
Minimize nesting in code (e.g.,if () { ... }orfor () { ... }) to avoid arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions (especially testable ones)
Watch out for code smells and refactor to avoid them
Implement proper error handling in code
If a complex type definition is inlined in multiple related places, extract and name it for reuse
Files:
src/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/components/topbar/CurrentUserPopover.vuesrc/composables/node/usePriceBadge.tssrc/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.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/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/components/topbar/CurrentUserPopover.vuesrc/composables/node/usePriceBadge.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/components/topbar/CurrentUserPopover.vuesrc/composables/node/usePriceBadge.tssrc/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.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/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/components/topbar/CurrentUserPopover.vuesrc/composables/node/usePriceBadge.ts
src/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 componentsName Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/common/UserCredit.vuesrc/components/topbar/CurrentUserPopover.vue
src/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 package
Files:
src/components/common/UserCredit.vuesrc/components/topbar/CurrentUserPopover.vue
src/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 strings
Files:
src/components/common/UserCredit.vuesrc/components/topbar/CurrentUserPopover.vue
**/*.{js,ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively (no new JavaScript)
Files:
src/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/components/topbar/CurrentUserPopover.vuesrc/composables/node/usePriceBadge.tssrc/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.ts
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (.vuefiles)
Use Tailwind 4 styling and avoid<style>blocks in Vue components
Use<script setup lang="ts">for component logic in Vue components
Use Vue 3.5 TypeScript style of default prop declaration with reactive props destructuring
Do not usewithDefaultsor runtime props declaration in Vue components
PreferuseModelto separately defining a prop and emit in Vue components
Usereffor reactive state in Vue components
Implement computed properties withcomputed()instead of usingrefandwatch
UsewatchandwatchEffectfor side effects in Vue components
Useprovide/injectfor dependency injection only when simpler alternatives (Store or composable) are not suitable
Do not use thedark:Tailwind variant; use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Useimport { cn } from '@/utils/tailwindUtil'to merge class names instead of:class="[]"
Avoid new usage of PrimeVue components
Use VueUse functions for performance-enhancing styles in Vue components
Do not import Vue macros unnecessarily in components
Be judicious with addition of new refs or other state; prefer using props or composables when possible
Do not add acomputedif it's possible to use arefor prop directly
Do not use awatchif acomputedwould work instead
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/common/UserCredit.vuesrc/components/topbar/CurrentUserPopover.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Do not useanytype in TypeScript code
Do not useas anytype assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; runpnpm formatbefore committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Files:
src/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/components/topbar/CurrentUserPopover.vuesrc/composables/node/usePriceBadge.tssrc/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use vue-i18n in Composition API for string literals and place new translation entries in
src/locales/en/main.json
Files:
src/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/components/topbar/CurrentUserPopover.vuesrc/composables/node/usePriceBadge.tssrc/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions
Files:
src/composables/useFeatureFlags.tssrc/composables/node/usePriceBadge.tssrc/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.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/useFeatureFlags.tssrc/composables/node/usePriceBadge.ts
src/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables as
useXyz.ts
Files:
src/composables/useFeatureFlags.ts
src/lib/litegraph/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
src/lib/litegraph/**/*.{js,ts,jsx,tsx}: Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Do not replace&&=or||=with=when there is no reason to do so. If you do find a reason to remove either&&=or||=, leave a comment explaining why the removal occurred
When writing methods, prefer returning idiomatic JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.ts
src/lib/litegraph/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Files:
src/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.ts
🧠 Learnings (15)
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/common/UserCredit.vuesrc/components/topbar/CurrentUserPopover.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components
Applied to files:
src/components/common/UserCredit.vue
📚 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/components/common/UserCredit.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 : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/components/common/UserCredit.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 TabMenu component with Tabs without panels
Applied to files:
src/components/common/UserCredit.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` instead of using `ref` and `watch`
Applied to files:
src/components/common/UserCredit.vue
📚 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 : Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Applied to files:
src/components/common/UserCredit.vue
📚 Learning: 2025-12-09T04:35:40.491Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:40.491Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/locales/en/main.json
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/composables/useFeatureFlags.tssrc/composables/node/usePriceBadge.tssrc/lib/litegraph/src/LGraphBadge.tssrc/lib/litegraph/src/LGraphIcon.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 Popover
Applied 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,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/components/topbar/CurrentUserPopover.vue
📚 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:
src/components/topbar/CurrentUserPopover.vue
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/composables/node/usePriceBadge.tssrc/lib/litegraph/src/LGraphIcon.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangle's size and position
Applied to files:
src/lib/litegraph/src/LGraphBadge.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Applied to files:
src/lib/litegraph/src/LGraphIcon.ts
🧬 Code graph analysis (2)
src/composables/useFeatureFlags.ts (1)
src/scripts/api.ts (1)
api(1289-1289)
src/composables/node/usePriceBadge.ts (3)
src/composables/useFeatureFlags.ts (1)
useFeatureFlags(22-75)src/lib/litegraph/src/LGraphBadge.ts (1)
LGraphBadge(22-128)src/utils/colorUtil.ts (1)
adjustColor(345-352)
⏰ 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 (10)
src/components/common/UserCredit.vue (2)
10-20: LGTM! Clean conditional icon rendering.The feature-flag driven icon switching is well implemented. The use of the
#iconslot template to conditionally render either the lucide icon or PrimeIcons dollar icon is a clean approach.
30-39: Feature flag integration looks correct.The
useFeatureFlagscomposable is properly imported and destructured. The reactiveflagsobject will correctly update the icon when the feature flag state changes.src/components/topbar/CurrentUserPopover.vue (2)
29-44: LGTM! Well-implemented unified credits notice.The feature-flag gated UI block is correctly implemented:
- Proper use of
v-ifwithflags.subscriptionTiersEnabled- i18n correctly used for both tooltip (
$t('credits.unified.tooltip')) and message ($t('credits.unified.message'))- Help icon with
cursor-helpprovides good UX affordance
121-143: Feature flag composable integration is correct.The import and usage of
useFeatureFlagsfollows the established pattern in the codebase.src/composables/useFeatureFlags.ts (2)
15-16: New feature flag enum member correctly added.The enum value follows the established naming convention with
snake_casefor the string value.
59-65: Verify if remoteConfig fallback is intentionally omitted.Other similar flags like
modelUploadButtonEnabledandassetUpdateOptionsEnabledcheckremoteConfig.valuefirst before falling back toapi.getServerFeature. This flag only checks the server feature flag directly.If this is intentional (e.g., this flag is only controlled server-side), the implementation is correct. Otherwise, consider adding the remoteConfig check for consistency:
get subscriptionTiersEnabled() { - return api.getServerFeature( - ServerFeatureFlag.SUBSCRIPTION_TIERS_ENABLED, - false + return ( + remoteConfig.value.subscription_tiers_enabled ?? + api.getServerFeature(ServerFeatureFlag.SUBSCRIPTION_TIERS_ENABLED, false) ) }src/locales/en/main.json (1)
1844-1848: Locale entries added correctly.The new
credits.unifiedentries follow the established i18n patterns. The tooltip text uses\nfor line breaks which should render correctly in the tooltip component.Minor consideration: The tooltip mentions "Learn more here" but doesn't appear to include an actual hyperlink. If this is intended to be clickable, it would need HTML rendering support in the tooltip. If it's just informational text, it's fine as-is.
src/lib/litegraph/src/LGraphBadge.ts (1)
69-74: LGTM! Image-based icon width calculation.The branching logic correctly handles both image-based and unicode-based icons:
- Image mode: uses
icon.size- Unicode mode: measures the actual text width
This aligns with the new
LGraphIconimplementation.src/lib/litegraph/src/LGraphIcon.ts (2)
1-12: LGTM! Interface properly extended for image support.The
LGraphIconOptionsinterface now correctly supports both rendering modes:
unicodemade optional to allow image-only iconsimagefor HTMLImageElement-based renderingsizefor controlling image dimensions
68-90: LGTM! Unicode rendering with proper context restoration.The unicode branch correctly saves and restores all modified canvas context properties (
font,textBaseline,textAlign,fillStyle), ensuring no side effects on subsequent drawing operations.
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
src/composables/node/usePriceBadge.ts (1)
51-89: Refactor to eliminate code duplication.The two branches share identical
fgColorandbgColorlogic for the badge itself. This was already flagged in a previous review.Apply this diff to consolidate the shared logic:
function getCreditsBadge(price: string): LGraphBadge { const isLightTheme = colorPaletteStore.completedActivePalette.light_theme + const badgeBgColor = isLightTheme + ? adjustColor('#8D6932', { lightness: 0.5 }) + : '#8D6932' + const badgeFgColor = + colorPaletteStore.completedActivePalette.colors.litegraph_base + .BADGE_FG_COLOR - if (flags.subscriptionTiersEnabled) { - return new LGraphBadge({ - text: price, - iconOptions: { + const iconOptions = flags.subscriptionTiersEnabled + ? { image: componentIconSvg, size: 8 - }, - fgColor: - colorPaletteStore.completedActivePalette.colors.litegraph_base - .BADGE_FG_COLOR, - bgColor: isLightTheme - ? adjustColor('#8D6932', { lightness: 0.5 }) - : '#8D6932' - }) - } else { - return new LGraphBadge({ - text: price, - iconOptions: { + } + : { unicode: '\ue96b', fontFamily: 'PrimeIcons', color: isLightTheme ? adjustColor('#FABC25', { lightness: 0.5 }) : '#FABC25', bgColor: isLightTheme ? adjustColor('#654020', { lightness: 0.5 }) : '#654020', fontSize: 8 - }, - fgColor: - colorPaletteStore.completedActivePalette.colors.litegraph_base - .BADGE_FG_COLOR, - bgColor: isLightTheme - ? adjustColor('#8D6932', { lightness: 0.5 }) - : '#8D6932' - }) - } + } + + return new LGraphBadge({ + text: price, + iconOptions, + fgColor: badgeFgColor, + bgColor: badgeBgColor + }) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
src/components/topbar/CurrentUserPopover.vue(3 hunks)src/composables/node/usePriceBadge.ts(2 hunks)src/lib/litegraph/src/LGraphIcon.ts(2 hunks)src/renderer/extensions/vueNodes/components/NodeHeader.vue(3 hunks)
🧰 Additional context used
📓 Path-based instructions (17)
src/**/*.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 conventions
Files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vue
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/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/lib/litegraph/src/LGraphIcon.tssrc/composables/node/usePriceBadge.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
src/**/*.{ts,tsx,vue}: Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Use refactoring to make complex code simpler
Keep functions short and functional
Minimize nesting in code (e.g.,if () { ... }orfor () { ... }) to avoid arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions (especially testable ones)
Watch out for code smells and refactor to avoid them
Implement proper error handling in code
If a complex type definition is inlined in multiple related places, extract and name it for reuse
Files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/lib/litegraph/src/LGraphIcon.tssrc/composables/node/usePriceBadge.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/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/lib/litegraph/src/LGraphIcon.tssrc/composables/node/usePriceBadge.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/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.ts
src/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 componentsName Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/topbar/CurrentUserPopover.vue
src/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 package
Files:
src/components/topbar/CurrentUserPopover.vue
src/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 strings
Files:
src/components/topbar/CurrentUserPopover.vue
**/*.{js,ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively (no new JavaScript)
Files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/lib/litegraph/src/LGraphIcon.tssrc/composables/node/usePriceBadge.ts
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (.vuefiles)
Use Tailwind 4 styling and avoid<style>blocks in Vue components
Use<script setup lang="ts">for component logic in Vue components
Use Vue 3.5 TypeScript style of default prop declaration with reactive props destructuring
Do not usewithDefaultsor runtime props declaration in Vue components
PreferuseModelto separately defining a prop and emit in Vue components
Usereffor reactive state in Vue components
Implement computed properties withcomputed()instead of usingrefandwatch
UsewatchandwatchEffectfor side effects in Vue components
Useprovide/injectfor dependency injection only when simpler alternatives (Store or composable) are not suitable
Do not use thedark:Tailwind variant; use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Useimport { cn } from '@/utils/tailwindUtil'to merge class names instead of:class="[]"
Avoid new usage of PrimeVue components
Use VueUse functions for performance-enhancing styles in Vue components
Do not import Vue macros unnecessarily in components
Be judicious with addition of new refs or other state; prefer using props or composables when possible
Do not add acomputedif it's possible to use arefor prop directly
Do not use awatchif acomputedwould work instead
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Do not useanytype in TypeScript code
Do not useas anytype assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; runpnpm formatbefore committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/lib/litegraph/src/LGraphIcon.tssrc/composables/node/usePriceBadge.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use vue-i18n in Composition API for string literals and place new translation entries in
src/locales/en/main.json
Files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/lib/litegraph/src/LGraphIcon.tssrc/composables/node/usePriceBadge.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions
Files:
src/lib/litegraph/src/LGraphIcon.tssrc/composables/node/usePriceBadge.ts
src/lib/litegraph/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
src/lib/litegraph/**/*.{js,ts,jsx,tsx}: Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Do not replace&&=or||=with=when there is no reason to do so. If you do find a reason to remove either&&=or||=, leave a comment explaining why the removal occurred
When writing methods, prefer returning idiomatic JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/LGraphIcon.ts
src/lib/litegraph/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Files:
src/lib/litegraph/src/LGraphIcon.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/node/usePriceBadge.ts
🧠 Learnings (9)
📚 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 Popover
Applied 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,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vue
📚 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:
src/components/topbar/CurrentUserPopover.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vue
📚 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/renderer/extensions/vueNodes/components/NodeHeader.vue
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred
Applied to files:
src/lib/litegraph/src/LGraphIcon.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursor
Applied to files:
src/lib/litegraph/src/LGraphIcon.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/lib/litegraph/src/LGraphIcon.tssrc/composables/node/usePriceBadge.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/composables/node/usePriceBadge.ts
🧬 Code graph analysis (1)
src/composables/node/usePriceBadge.ts (3)
src/composables/useFeatureFlags.ts (1)
useFeatureFlags(22-75)src/lib/litegraph/src/LGraphBadge.ts (1)
LGraphBadge(22-128)src/utils/colorUtil.ts (1)
adjustColor(345-352)
🔇 Additional comments (6)
src/components/topbar/CurrentUserPopover.vue (1)
121-143: Proper integration of feature flags composable.The import and usage of
useFeatureFlagsfollows the established pattern in the codebase. Theflagsobject is correctly destructured and used reactively in the template.src/renderer/extensions/vueNodes/components/NodeHeader.vue (2)
42-50: Clean conditional icon rendering.The feature flag driven icon selection between
icon-[lucide--component]andicon-[lucide--dollar-sign]is cleanly implemented using a ternary expression in the class binding.
107-139: Feature flag integration is consistent with codebase patterns.Import and initialization of
useFeatureFlagsfollows the established pattern used in other components.src/composables/node/usePriceBadge.ts (1)
8-10: Module-level Image instantiation is appropriate for caching.Creating the
Imageobject at module scope ensures the SVG is loaded once and reused across all badge instances, which is efficient. The oklch color in the SVG matches the design requirement from the past review discussion.src/lib/litegraph/src/LGraphIcon.ts (2)
54-69: Image rendering branch correctly preserves canvas state.The image path now saves and restores
ctx.fillStylearound the background circle fill, so later drawing isn’t accidentally affected. The use oficonSize/iconRadiusand padding for centering also looks correct.
70-92: Unicode rendering branch is state‑safe; confirm image‑vs‑unicode priority.The unicode path correctly saves/restores
font, alignment, andfillStyle, matching the image branch’s goal of leaving the canvas state unchanged. The overallif (this.image) … else if (this.unicode)means image icons always take precedence when both are provided; if that matches the intended fallback behavior, this implementation is solid.
- Add subscription_tiers_enabled feature flag to control new UI elements - Change dollar icon to lucide-component icon in UserCredit when flag enabled - Add "Credits have been unified" tooltip row in CurrentUserPopover when flag enabled - Update node price badges to use lucide-component SVG icon when flag enabled - Extend LGraphIcon system to support both Unicode fonts and SVG images via ctx.drawImage() - Maintain backward compatibility - all existing behavior preserved when flag disabled
- Add detailed tooltip explaining credit unification - Include information about Partner Nodes and Cloud workflows - Mention existing balance conversion - Add proper hover states and delays for better UX
Remove obvious comments that don't add value: - 'Create SVG data URI for lucide-component icon' - 'SVG image rendering' / 'Font-based Unicode rendering' - 'Draw icon background circle if bgColor is set' - 'Draw SVG image' / 'Draw icon' - Unicode constant inline comments Code should be self-documenting without redundant explanations.
Change text size from text-sm to text-xs to prevent the message from wrapping and making the top-up button layout awkward.
Remove px-4 padding from the tooltip row to align with UserCredit. The Partner Nodes button keeps its pl-6 indentation as intended.
Add text-xs class to the question mark icon to match the unified credits message text size for better visual consistency.
Save and restore ctx.fillStyle in the image rendering branch to match the pattern used in the unicode rendering branch. This prevents the background circle color from affecting subsequent canvas operations.
- Use #FABC25 stroke color for canvas badges without circular background - Keep existing #8D6932 badge background color - Add feature flag toggle to Vue NodeHeader.vue for API node icons - Switch between dollar-sign and component icons based on subscription_tiers_enabled flag - Ensure consistent icon behavior across both litegraph and Vue node systems
christian-byrne
force-pushed
the
credits/tooltips
branch
from
3adbeb2 to
8102d99
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (5)
src/lib/litegraph/src/LGraphBadge.ts (1)
111-112: Consider extracting the magic number for clarity.The
+ 4spacing adjustment could benefit from being a named constant. This is a minor readability improvement that was noted in a previous review.src/composables/node/usePriceBadge.ts (3)
54-67: Add missing color and bgColor properties to image-based icon branch.The
subscriptionTiersEnabledbranch omitscolorandbgColorfromiconOptions, which means the image-based icon will lack the circular colored background that the unicode version renders. TheLGraphIcon.draw()method insrc/lib/litegraph/src/LGraphIcon.tsexplicitly checksif (this.bgColor)and renders a circular background for both image and unicode icons. Without these properties, the image icon will have no background, creating a visual inconsistency.Apply this diff to add the missing properties:
if (flags.subscriptionTiersEnabled) { return new LGraphBadge({ text: price, iconOptions: { image: componentIconSvg, - size: 8 + size: 8, + color: isLightTheme + ? adjustColor('#FABC25', { lightness: 0.5 }) + : '#FABC25', + bgColor: isLightTheme + ? adjustColor('#654020', { lightness: 0.5 }) + : '#654020' },
51-89: Refactor to eliminate code duplication.The two branches share identical color logic and badge options, differing only in
iconOptions. Extract the common badge configuration to reduce duplication and improve maintainability.Apply this diff to consolidate the logic:
const colorPaletteStore = useColorPaletteStore() function getCreditsBadge(price: string): LGraphBadge { const isLightTheme = colorPaletteStore.completedActivePalette.light_theme + const iconColor = isLightTheme + ? adjustColor('#FABC25', { lightness: 0.5 }) + : '#FABC25' + const iconBgColor = isLightTheme + ? adjustColor('#654020', { lightness: 0.5 }) + : '#654020' + const badgeBgColor = isLightTheme + ? adjustColor('#8D6932', { lightness: 0.5 }) + : '#8D6932' - if (flags.subscriptionTiersEnabled) { - return new LGraphBadge({ - text: price, - iconOptions: { - image: componentIconSvg, - size: 8 - }, - fgColor: - colorPaletteStore.completedActivePalette.colors.litegraph_base - .BADGE_FG_COLOR, - bgColor: isLightTheme - ? adjustColor('#8D6932', { lightness: 0.5 }) - : '#8D6932' - }) - } else { - return new LGraphBadge({ - text: price, - iconOptions: { - unicode: '\ue96b', - fontFamily: 'PrimeIcons', - color: isLightTheme - ? adjustColor('#FABC25', { lightness: 0.5 }) - : '#FABC25', - bgColor: isLightTheme - ? adjustColor('#654020', { lightness: 0.5 }) - : '#654020', - fontSize: 8 - }, - fgColor: - colorPaletteStore.completedActivePalette.colors.litegraph_base - .BADGE_FG_COLOR, - bgColor: isLightTheme - ? adjustColor('#8D6932', { lightness: 0.5 }) - : '#8D6932' - }) - } + const iconOptions = flags.subscriptionTiersEnabled + ? { + image: componentIconSvg, + color: iconColor, + bgColor: iconBgColor, + size: 8 + } + : { + unicode: '\ue96b', + fontFamily: 'PrimeIcons', + color: iconColor, + bgColor: iconBgColor, + fontSize: 8 + } + + return new LGraphBadge({ + text: price, + iconOptions, + fgColor: + colorPaletteStore.completedActivePalette.colors.litegraph_base + .BADGE_FG_COLOR, + bgColor: badgeBgColor + }) }
41-48: Potential performance concern: badge function evaluation.When
badgeis a function, it's invoked on everyisCreditsBadgecall. IncollectCreditsBadges, this could evaluate thunks multiple times during filtering. Consider whether this repeated evaluation is intentional or if results should be cached.src/lib/litegraph/src/LGraphIcon.ts (1)
44-44: Consider using nullish coalescing for size default.
this.size = size || fontSizewill ignore an explicitsizeof0(treating it as falsy) and fall back tofontSize. If0should be distinguishable from "not provided", prefer nullish coalescing:- this.size = size || fontSize + this.size = size ?? fontSizeThis keeps the intent clear and only falls back when
sizeisundefined/null.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (8)
src/components/common/UserCredit.vue(3 hunks)src/components/topbar/CurrentUserPopover.vue(3 hunks)src/composables/node/usePriceBadge.ts(2 hunks)src/composables/useFeatureFlags.ts(2 hunks)src/lib/litegraph/src/LGraphBadge.ts(2 hunks)src/lib/litegraph/src/LGraphIcon.ts(2 hunks)src/locales/en/main.json(1 hunks)src/renderer/extensions/vueNodes/components/NodeHeader.vue(3 hunks)
🧰 Additional context used
📓 Path-based instructions (18)
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/lib/litegraph/src/LGraphIcon.tssrc/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/lib/litegraph/src/LGraphBadge.tssrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions
Files:
src/lib/litegraph/src/LGraphIcon.tssrc/composables/useFeatureFlags.tssrc/lib/litegraph/src/LGraphBadge.tssrc/composables/node/usePriceBadge.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
src/**/*.{ts,tsx,vue}: Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Use refactoring to make complex code simpler
Keep functions short and functional
Minimize nesting in code (e.g.,if () { ... }orfor () { ... }) to avoid arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions (especially testable ones)
Watch out for code smells and refactor to avoid them
Implement proper error handling in code
If a complex type definition is inlined in multiple related places, extract and name it for reuse
Files:
src/lib/litegraph/src/LGraphIcon.tssrc/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/lib/litegraph/src/LGraphBadge.tssrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/lib/litegraph/src/LGraphIcon.tssrc/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/lib/litegraph/src/LGraphBadge.tssrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.ts
src/lib/litegraph/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
src/lib/litegraph/**/*.{js,ts,jsx,tsx}: Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Do not replace&&=or||=with=when there is no reason to do so. If you do find a reason to remove either&&=or||=, leave a comment explaining why the removal occurred
When writing methods, prefer returning idiomatic JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/LGraphIcon.tssrc/lib/litegraph/src/LGraphBadge.ts
src/lib/litegraph/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Files:
src/lib/litegraph/src/LGraphIcon.tssrc/lib/litegraph/src/LGraphBadge.ts
**/*.{js,ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively (no new JavaScript)
Files:
src/lib/litegraph/src/LGraphIcon.tssrc/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/lib/litegraph/src/LGraphBadge.tssrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Do not useanytype in TypeScript code
Do not useas anytype assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; runpnpm formatbefore committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Files:
src/lib/litegraph/src/LGraphIcon.tssrc/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/lib/litegraph/src/LGraphBadge.tssrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use vue-i18n in Composition API for string literals and place new translation entries in
src/locales/en/main.json
Files:
src/lib/litegraph/src/LGraphIcon.tssrc/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/lib/litegraph/src/LGraphBadge.tssrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.ts
src/**/*.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 conventions
Files:
src/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.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/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/composables/useFeatureFlags.tssrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/composables/node/usePriceBadge.ts
src/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 componentsName Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vue
src/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 package
Files:
src/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vue
src/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 strings
Files:
src/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (.vuefiles)
Use Tailwind 4 styling and avoid<style>blocks in Vue components
Use<script setup lang="ts">for component logic in Vue components
Use Vue 3.5 TypeScript style of default prop declaration with reactive props destructuring
Do not usewithDefaultsor runtime props declaration in Vue components
PreferuseModelto separately defining a prop and emit in Vue components
Usereffor reactive state in Vue components
Implement computed properties withcomputed()instead of usingrefandwatch
UsewatchandwatchEffectfor side effects in Vue components
Useprovide/injectfor dependency injection only when simpler alternatives (Store or composable) are not suitable
Do not use thedark:Tailwind variant; use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Useimport { cn } from '@/utils/tailwindUtil'to merge class names instead of:class="[]"
Avoid new usage of PrimeVue components
Use VueUse functions for performance-enhancing styles in Vue components
Do not import Vue macros unnecessarily in components
Be judicious with addition of new refs or other state; prefer using props or composables when possible
Do not add acomputedif it's possible to use arefor prop directly
Do not use awatchif acomputedwould work instead
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vue
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/useFeatureFlags.tssrc/composables/node/usePriceBadge.ts
src/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables as
useXyz.ts
Files:
src/composables/useFeatureFlags.ts
🧠 Learnings (22)
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred
Applied to files:
src/lib/litegraph/src/LGraphIcon.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursor
Applied to files:
src/lib/litegraph/src/LGraphIcon.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`
Applied to files:
src/lib/litegraph/src/LGraphIcon.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Prefer single line `if` syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Applied to files:
src/lib/litegraph/src/LGraphIcon.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/lib/litegraph/src/LGraphIcon.tssrc/composables/useFeatureFlags.tssrc/lib/litegraph/src/LGraphBadge.tssrc/composables/node/usePriceBadge.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 Popover
Applied to files:
src/components/topbar/CurrentUserPopover.vue
📚 Learning: 2025-12-09T04:35:40.491Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:40.491Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/components/topbar/CurrentUserPopover.vuesrc/locales/en/main.json
📚 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/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`
Applied to files:
src/components/topbar/CurrentUserPopover.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,vue} : Use vue-i18n in Composition API for string literals and place new translation entries in `src/locales/en/main.json`
Applied to files:
src/components/topbar/CurrentUserPopover.vue
📚 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} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/components/topbar/CurrentUserPopover.vue
📚 Learning: 2025-12-05T06:11:09.383Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7177
File: src/platform/assets/components/UploadModelFooter.vue:72-78
Timestamp: 2025-12-05T06:11:09.383Z
Learning: For the ComfyUI_frontend repository, avoid suggesting comments that would be redundant when the code is already self-explanatory through descriptive naming (e.g., filenames, prop names, aria-labels). The project prefers clean code without unnecessary documentation comments.
Applied 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,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/components/topbar/CurrentUserPopover.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vue
📚 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:
src/components/topbar/CurrentUserPopover.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/topbar/CurrentUserPopover.vuesrc/components/common/UserCredit.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components
Applied to files:
src/components/common/UserCredit.vue
📚 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/components/common/UserCredit.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.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 : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/components/common/UserCredit.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 TabMenu component with Tabs without panels
Applied to files:
src/components/common/UserCredit.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` instead of using `ref` and `watch`
Applied to files:
src/components/common/UserCredit.vue
📚 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 : Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Applied to files:
src/components/common/UserCredit.vue
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangle's size and position
Applied to files:
src/lib/litegraph/src/LGraphBadge.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/composables/node/usePriceBadge.ts
🧬 Code graph analysis (2)
src/composables/useFeatureFlags.ts (1)
src/scripts/api.ts (1)
api(1289-1289)
src/composables/node/usePriceBadge.ts (3)
src/composables/useFeatureFlags.ts (1)
useFeatureFlags(22-75)src/lib/litegraph/src/LGraphBadge.ts (1)
LGraphBadge(22-128)src/utils/colorUtil.ts (1)
adjustColor(345-352)
⏰ 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: lint-and-format
- GitHub Check: collect
🔇 Additional comments (7)
src/locales/en/main.json (1)
855-859: LGTM! i18n entries correctly structured.The new unified credits messaging follows the existing localization pattern and is properly consumed by
CurrentUserPopover.vue.src/components/common/UserCredit.vue (1)
10-20: LGTM! Feature flag integration is clean.The conditional icon rendering correctly uses the
subscriptionTiersEnabledflag to switch between the lucide component icon and the dollar icon. The implementation follows the Vue 3 Composition API pattern and integrates cleanly with the existing component logic.Also applies to: 30-30, 39-39
src/lib/litegraph/src/LGraphBadge.ts (1)
69-74: LGTM! Width calculation correctly handles both icon types.The conditional logic properly distinguishes between image-based icons (using
icon.size) and unicode glyphs (measuring text width). The font context is correctly saved and restored.src/components/topbar/CurrentUserPopover.vue (1)
29-44: LGTM! Feature flag gated UI correctly implemented.The new unified credits information block is properly gated by
flags.subscriptionTiersEnabledand uses the correct i18n keys that were added tomain.json. The tooltip integration follows the existing pattern in the component.Also applies to: 121-121, 143-143
src/renderer/extensions/vueNodes/components/NodeHeader.vue (1)
41-50: LGTM! Conditional icon rendering follows established pattern.The feature flag integration correctly switches between the component icon and dollar-sign icon based on
flags.subscriptionTiersEnabled. The implementation is consistent with similar changes inUserCredit.vueand properly integrates with the existingisApiNodelogic.Also applies to: 110-110, 141-141
src/composables/node/usePriceBadge.ts (1)
8-10: LGTM! SVG icon properly preloaded.The component icon is correctly initialized as an
Imagewith an inline SVG data URL. Theoklchcolor format works properly in data URLs, as confirmed by the previous review discussion.src/lib/litegraph/src/LGraphIcon.ts (1)
54-92: LGTM! Icon rendering correctly supports both image and unicode modes.The
drawmethod properly branches onthis.imagevsthis.unicode, with correct context save/restore in both paths. The image rendering usesthis.sizefor dimensions while unicode rendering usesthis.fontSize, and both optionally draw a circular background whenbgColoris present. The canvas context is properly managed in both branches.
…rt for subscription tiers - Replace logical OR with nullish coalescing in LGraphIcon.ts to preserve explicit 0 values - Update subscriptionTiersEnabled to check remoteConfig first, matching other feature flags pattern - Add subscription_tiers_enabled to RemoteConfig type definition
christian-byrne
added
needs-backport
This comment was marked as outdated.
This comment was marked as outdated.
christian-byrne
added
needs-backport
This PR changes the credits icons and tooltips based on state of the `subscription_tiers_enabled` feature flag. When the flag is enabled (or undefined -- for local), the dollar icon is replaced with the lucide-component icon in UserCredit and node price badges (Partner Nodes), and a new tooltip row appears in CurrentUserPopover displaying "Credits have been unified" with a detailed hover tooltip explaining the credit unification across Partner Nodes and Cloud workflows. <img width="539" height="535" alt="image" src="https://github.com/user-attachments/assets/7e952f9b-0abb-4979-85b7-0eecdeaf808c" /> Related: - #6115 (borrows badge implementation from this PR) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7276-change-credits-icons-and-tooltips-conditional-on-feature-flag-2c46d73d365081809a6afd5861018a15) by [Unito](https://www.unito.io)
|
@christian-byrne Successfully backported to #7291 |
github-actions
bot
removed
the
needs-backport
…on feature flag) (#7291) Backport of #7276 to `cloud/1.34` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7291-backport-cloud-1-34-change-credits-icons-and-tooltips-conditional-on-feature-flag-2c46d73d36508163b2d6cad792078e4c) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <[email protected]>
…y-Org#7276) This PR changes the credits icons and tooltips based on state of the `subscription_tiers_enabled` feature flag. When the flag is enabled (or undefined -- for local), the dollar icon is replaced with the lucide-component icon in UserCredit and node price badges (Partner Nodes), and a new tooltip row appears in CurrentUserPopover displaying "Credits have been unified" with a detailed hover tooltip explaining the credit unification across Partner Nodes and Cloud workflows. <img width="539" height="535" alt="image" src="https://github.com/user-attachments/assets/7e952f9b-0abb-4979-85b7-0eecdeaf808c" /> Related: - Comfy-Org#6115 (borrows badge implementation from this PR) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7276-change-credits-icons-and-tooltips-conditional-on-feature-flag-2c46d73d365081809a6afd5861018a15) by [Unito](https://www.unito.io)
This PR changes the credits icons and tooltips based on state of the
subscription_tiers_enabledfeature flag.When the flag is enabled (or undefined -- for local), the dollar icon is replaced with the lucide-component icon in UserCredit and node price badges (Partner Nodes), and a new tooltip row appears in CurrentUserPopover displaying "Credits have been unified" with a detailed hover tooltip explaining the credit unification across Partner Nodes and Cloud workflows.
Related:
┆Issue is synchronized with this Notion page by Unito