fix: hardcoded color tokens (not theme-aware)

[christian-byrne]

Summary

Fixes instances of hardcoded color tokens (not semantic) which are not theme-aware and therefore are incorrect on e.g. light mode.

┆Issue is synchronized with this Notion page by Unito

[coderabbitai]

📝 Walkthrough

Walkthrough

CSS class color tokens updated across four Vue components (TopUpCreditsDialogContent, CreditTopUpOption, PricingTable, and SubscriptionRequiredDialogContent) to replace hardcoded white text and background colors with semantic design tokens (base-foreground, primary-foreground, success-foreground, muted-foreground, etc.). One HTTP link upgraded to HTTPS.

Changes

Cohort / File(s)	Change Summary
Dialog Content src/components/dialog/content/TopUpCreditsDialogContent.vue, src/components/dialog/content/SubscriptionRequiredDialogContent.vue	Text color classes updated from text-white to text-base-foreground for header titles and button hover states.
Credit Components src/components/dialog/content/credit/CreditTopUpOption.vue	Numeric value and description text colors updated from text-white to text-base-foreground and text-muted-foreground respectively.
Subscription Pricing src/platform/cloud/subscription/components/PricingTable.vue	Styling updates: isPopular badge uses semantic color tokens; check icons and customLoRAs indicator updated to success-foreground/muted-foreground; button label text changed to primary-foreground; video template link href changed from HTTP to HTTPS and link colors updated from blue-600/blue-400 to azure-600/azure-400.

Possibly related PRs

• style: redesign TopUpCredits dialog #7305: Modifies TopUpCreditsDialogContent.vue and CreditTopUpOption.vue with structural/prop changes alongside styling updates.
• feat: replace Stripe pricing table with custom implementation #7359: Updates src/platform/cloud/subscription/components/PricingTable.vue, replacing Stripe pricing table implementation with custom component.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/pricing-table-theme-tokens

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5cba1e3 and 2e4ee32.

📒 Files selected for processing (4)

• src/components/dialog/content/TopUpCreditsDialogContent.vue (2 hunks)
• src/components/dialog/content/credit/CreditTopUpOption.vue (1 hunks)
• src/platform/cloud/subscription/components/PricingTable.vue (4 hunks)
• src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue (2 hunks)

🧰 Additional context used

📓 Path-based instructions (12)

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/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.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/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.vue

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/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.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/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

• src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.vue

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/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.vue

**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use <script setup lang="ts"> for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use withDefaults or runtime props declaration
Prefer useModel to separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using <style> blocks in Vue components
Use semantic Tailwind values from style.css theme instead of the dark: variant; for example, use bg-node-component-surface instead of dark: prefixes
Always use cn() utility from @/utils/tailwindUtil to merge Tailwind class names; do not use :class="[]" syntax
Use ref for reactive state in Vue Composition API components
Implement computed properties with computed() from Vue; avoid using a ref with a watch if a computed would work instead
Use watch and watchEffect for side effects in Vue components
Implement lifecycle hooks using onMounted, onUpdated, and other Vue lifecycle functions
Use provide/inject for dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundant computed, and prefer computed over watch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries in src/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead

Files:

• src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.vue

**/*.{ts,tsx,js,jsx,vue,json}

📄 CodeRabbit inference engine (AGENTS.md)

Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see .prettierrc)

Files:

• src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.vue

**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; run pnpm format before committing
Use TypeScript for type safety; never use any type - use proper TypeScript types
Never use as any type assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nested if or for statements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones

Files:

• src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.vue

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 components

Vue component file names must use PascalCase; for example, MenuHamburger.vue

Files:

• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.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/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.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/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue

🧠 Learnings (6)

📓 Common learnings

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,css} : Use the correct tokens from style.css in the design system package

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use semantic Tailwind values from `style.css` theme instead of the `dark:` variant; for example, use `bg-node-component-surface` instead of `dark:` prefixes

📚 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/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.vue

📚 Learning: 2025-12-09T21:40:12.361Z

Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.

Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.

Applied to files:

• src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
• src/components/dialog/content/TopUpCreditsDialogContent.vue
• src/components/dialog/content/credit/CreditTopUpOption.vue
• src/platform/cloud/subscription/components/PricingTable.vue

📚 Learning: 2025-12-09T20:22:23.620Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use Tailwind 4 utility classes for styling; avoid using `<style>` blocks in Vue components

Applied to files:

• src/components/dialog/content/credit/CreditTopUpOption.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,css} : Use the correct tokens from style.css in the design system package

Applied to files:

• src/components/dialog/content/credit/CreditTopUpOption.vue

📚 Learning: 2025-12-09T20:22:23.620Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use semantic Tailwind values from `style.css` theme instead of the `dark:` variant; for example, use `bg-node-component-surface` instead of `dark:` prefixes

Applied to files:

• src/components/dialog/content/credit/CreditTopUpOption.vue

⏰ 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: test
• GitHub Check: lint-and-format
• GitHub Check: setup
• GitHub Check: collect

🔇 Additional comments (9)

src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue (1)

43-61: Semantic hover color for secondary buttons looks correct

Using hover:text-base-foreground on these secondary text Buttons aligns them with the design-system foreground token and should behave correctly across themes.

src/components/dialog/content/TopUpCreditsDialogContent.vue (2)

5-13: Header now uses base foreground token

text-base-foreground on the header title makes the text theme-aware instead of assuming white, which aligns with the design-system token usage.

---

59-66: Primary button label color uses semantic foreground token

Setting the Button label class to text-primary-foreground via :pt correctly ties the label color to the primary theme palette rather than a hardcoded white.

src/components/dialog/content/credit/CreditTopUpOption.vue (1)

11-16: Credit option texts use base/muted foreground tokens

Switching the value to text-base-foreground and the description to text-muted-foreground makes both pieces of text theme-aware and consistent with the design system.

src/platform/cloud/subscription/components/PricingTable.vue (5)

15-20: Most-popular badge now uses background/foreground tokens

bg-background and text-foreground on the “most popular” badge align it with theme surface/foreground tokens instead of hardcoded colors, improving theme support.

---

64-87: Feature check/times icons now use success/muted tokens

Using text-success-foreground for the checkmarks and text-muted-foreground for the false case makes these status icons semantic and theme-aware, which is consistent with the rest of the pricing table.

---

95-104: Video estimate help label hover color is theme-aware

The hover:text-base-foreground class on the help label replaces a hardcoded hover color with the base foreground token, keeping hover behavior consistent across themes.

---

116-129: Subscribe button label uses primary foreground token

The Button’s :pt label class now uses text-primary-foreground, which ties its text color to the primary palette instead of a fixed white and should work correctly across themes.

---

151-163: Template link uses HTTPS and azure theme tokens

Switching the link to https://cloud.comfy.org/... and using text-azure-600 hover:text-azure-400 aligns with both security best practices and the azure color tokens from the design system.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎭 Playwright Test Results

❌ Some tests failed

⏰ Completed at: 12/11/2025, 11:01:25 AM UTC

📈 Summary

• Total Tests: 490
• Passed: 471 ✅
• Failed: 2 ❌
• Flaky: 8 ⚠️
• Skipped: 9 ⏭️

📊 Test Reports by Browser

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

---

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

[github-actions]

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 12/11/2025, 10:52:06 AM UTC

🔗 Links

• 📊 View Workflow Run
• 🎨 View Storybook

---

🎉 Your Storybook is ready for review!

[github-actions]

Bundle Size Report

Summary

• Raw size: 17.1 MB baseline 17.1 MB — 🔴 +44 B
• Gzip: 3.39 MB baseline 3.39 MB — 🔴 +31 B
• Brotli: 2.6 MB baseline 2.6 MB — 🔴 +345 B
• Bundles: 97 current • 97 baseline • 39 added / 39 removed

Category Glance
App Entry Points 🔴 +44 B (3.23 MB) · Vendor & Third-Party ⚪ 0 B (8.56 MB) · Other ⚪ 0 B (3.81 MB) · Graph Workspace ⚪ 0 B (992 kB) · Panels & Settings ⚪ 0 B (298 kB) · UI Components ⚪ 0 B (178 kB) · + 3 more

Per-category breakdown

App Entry Points — 3.23 MB (baseline 3.23 MB) • 🔴 +44 B

Main entry bundles and manifests

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/index-BQpOKK3E.js (new)	—	3.01 MB	🔴 +3.01 MB	🔴 +625 kB	🔴 +475 kB
assets/index-Beeh5j7B.js (removed)	3.01 MB	—	🟢 -3.01 MB	🟢 -625 kB	🟢 -475 kB
assets/index-8Uo7vI_I.js (removed)	224 kB	—	🟢 -224 kB	🟢 -47.7 kB	🟢 -39.4 kB
assets/index-DgglBoPx.js (new)	—	224 kB	🔴 +224 kB	🔴 +47.7 kB	🔴 +39.4 kB
assets/index-Co18QMyG.js (new)	—	345 B	🔴 +345 B	🔴 +246 B	🔴 +237 B
assets/index-DDc-LELd.js (removed)	345 B	—	🟢 -345 B	🟢 -244 B	🟢 -202 B

Status: 3 added / 3 removed

Graph Workspace — 992 kB (baseline 992 kB) • ⚪ 0 B

Graph editor runtime, canvas, workflow orchestration

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/GraphView-CkwbXEhC.js (removed)	992 kB	—	🟢 -992 kB	🟢 -192 kB	🟢 -146 kB
assets/GraphView-D9Ar16le.js (new)	—	992 kB	🔴 +992 kB	🔴 +192 kB	🔴 +146 kB

Status: 1 added / 1 removed

Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 B

Top-level views, pages, and routed surfaces

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/UserSelectView-B57cdg17.js (new)	—	6.54 kB	🔴 +6.54 kB	🔴 +2.14 kB	🔴 +1.9 kB
assets/UserSelectView-C-Onvp_T.js (removed)	6.54 kB	—	🟢 -6.54 kB	🟢 -2.14 kB	🟢 -1.89 kB

Status: 1 added / 1 removed

Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 B

Configuration panels, inspectors, and settings screens

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/LegacyCreditsPanel-Bgnd8D-G.js (removed)	21.4 kB	—	🟢 -21.4 kB	🟢 -5.15 kB	🟢 -4.5 kB
assets/LegacyCreditsPanel-Bp62ORNh.js (new)	—	21.4 kB	🔴 +21.4 kB	🔴 +5.16 kB	🔴 +4.5 kB
assets/KeybindingPanel-BVUsVv6v.js (new)	—	13.6 kB	🔴 +13.6 kB	🔴 +3.42 kB	🔴 +3.01 kB
assets/KeybindingPanel-CBnX7_CM.js (removed)	13.6 kB	—	🟢 -13.6 kB	🟢 -3.42 kB	🟢 -3.01 kB
assets/ExtensionPanel-BwXbgScJ.js (new)	—	10.8 kB	🔴 +10.8 kB	🔴 +2.58 kB	🔴 +2.26 kB
assets/ExtensionPanel-CHsYjwqi.js (removed)	10.8 kB	—	🟢 -10.8 kB	🟢 -2.57 kB	🟢 -2.26 kB
assets/AboutPanel-Cf5u6J14.js (new)	—	9.16 kB	🔴 +9.16 kB	🔴 +2.46 kB	🔴 +2.21 kB
assets/AboutPanel-CNzcUNju.js (removed)	9.16 kB	—	🟢 -9.16 kB	🟢 -2.46 kB	🟢 -2.21 kB
assets/ServerConfigPanel-BX0o_0cG.js (removed)	6.56 kB	—	🟢 -6.56 kB	🟢 -1.83 kB	🟢 -1.63 kB
assets/ServerConfigPanel-jvMQ4XZE.js (new)	—	6.56 kB	🔴 +6.56 kB	🔴 +1.83 kB	🔴 +1.63 kB
assets/UserPanel-BaOX_fSE.js (removed)	6.23 kB	—	🟢 -6.23 kB	🟢 -1.72 kB	🟢 -1.51 kB
assets/UserPanel-E0Vdfwin.js (new)	—	6.23 kB	🔴 +6.23 kB	🔴 +1.72 kB	🔴 +1.51 kB
assets/settings-BhbWhsRg.js	101 B	101 B	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-BXTtSH4O.js	33.3 kB	33.3 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-C9Pzn-NG.js	25.2 kB	25.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-CCy2fA_h.js	27.3 kB	27.3 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-CQpqEFfl.js	26.6 kB	26.6 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DHcnxypw.js	21.7 kB	21.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DhFTK9fY.js	25.1 kB	25.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DlT4t_ui.js	25.9 kB	25.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DRgSrIdD.js	24.2 kB	24.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-tjkeqiZq.js	21.1 kB	21.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 6 added / 6 removed

UI Components — 178 kB (baseline 178 kB) • ⚪ 0 B

Reusable component library chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/Load3D.vue_vue_type_script_setup_true_lang-CQmtfeWm.js (new)	—	53.7 kB	🔴 +53.7 kB	🔴 +8.49 kB	🔴 +7.29 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-Xdz9D9hj.js (removed)	53.7 kB	—	🟢 -53.7 kB	🟢 -8.48 kB	🟢 -7.29 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-D6_trXxg.js (removed)	48.1 kB	—	🟢 -48.1 kB	🟢 -10.4 kB	🟢 -8.98 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-DX-z-d-G.js (new)	—	48.1 kB	🔴 +48.1 kB	🔴 +10.4 kB	🔴 +8.98 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-Cc5I3NCa.js (removed)	48 kB	—	🟢 -48 kB	🟢 -10.7 kB	🟢 -9.33 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-CHlcvKhu.js (new)	—	48 kB	🔴 +48 kB	🔴 +10.7 kB	🔴 +9.32 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-9KXeEVpD.js (removed)	12.9 kB	—	🟢 -12.9 kB	🟢 -3.37 kB	🟢 -2.97 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-k0D8ke0J.js (new)	—	12.9 kB	🔴 +12.9 kB	🔴 +3.37 kB	🔴 +2.98 kB
assets/ComfyQueueButton-BiXKyHkp.js (new)	—	8.44 kB	🔴 +8.44 kB	🔴 +2.48 kB	🔴 +2.21 kB
assets/ComfyQueueButton-NqgYidqz.js (removed)	8.44 kB	—	🟢 -8.44 kB	🟢 -2.48 kB	🟢 -2.21 kB
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-CSNQiaEZ.js (new)	—	2.47 kB	🔴 +2.47 kB	🔴 +938 B	🔴 +807 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-mYFJM_Qp.js (removed)	2.47 kB	—	🟢 -2.47 kB	🟢 -936 B	🟢 -809 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-B1pjqqsM.js (new)	—	897 B	🔴 +897 B	🔴 +504 B	🔴 +432 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-CBmDWKzW.js (removed)	897 B	—	🟢 -897 B	🟢 -504 B	🟢 -432 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-Cwpu8HZY.js	1.34 kB	1.34 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetButton-DF5qH0wo.js	2.04 kB	2.04 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 7 added / 7 removed

Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 B

Stores, services, APIs, and repositories

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/keybindingService-Be1BpRr5.js (removed)	7.51 kB	—	🟢 -7.51 kB	🟢 -1.83 kB	🟢 -1.58 kB
assets/keybindingService-BHGvHooT.js (new)	—	7.51 kB	🔴 +7.51 kB	🔴 +1.83 kB	🔴 +1.58 kB
assets/audioService-CO0w-Sai.js (removed)	2.2 kB	—	🟢 -2.2 kB	🟢 -960 B	🟢 -821 B
assets/audioService-ULwW-vPn.js (new)	—	2.2 kB	🔴 +2.2 kB	🔴 +961 B	🔴 +828 B
assets/serverConfigStore-BHXc4r-I.js	2.83 kB	2.83 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 2 added / 2 removed

Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 B

Helpers, composables, and utility bundles

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/audioUtils-BgQ5toDB.js (new)	—	1.41 kB	🔴 +1.41 kB	🔴 +651 B	🔴 +550 B
assets/audioUtils-kIHWOvYC.js (removed)	1.41 kB	—	🟢 -1.41 kB	🟢 -652 B	🟢 -553 B
assets/mathUtil-CD4DsosH.js	1.32 kB	1.32 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeFilterUtil-CXKCRJ-m.js	460 B	460 B	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 1 added / 1 removed

Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 B

External libraries and shared vendor chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/vendor-chart-CLbS5yW5.js	452 kB	452 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-other-DTTVAq37.js	3.98 MB	3.98 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-primevue-BOn_1tHb.js	1.96 MB	1.96 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-three-aR6ntw5X.js	1.37 MB	1.37 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-tiptap-CvMnMneH.js	232 kB	232 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-vue-C5KrCLZ4.js	160 kB	160 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-xterm-BZLod3g9.js	407 kB	407 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 B

Bundles that do not match a named category

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/WidgetRecordAudio-Bt1N3nA3.js (removed)	20.4 kB	—	🟢 -20.4 kB	🟢 -5.23 kB	🟢 -4.62 kB
assets/WidgetRecordAudio-CmnZLr-K.js (new)	—	20.4 kB	🔴 +20.4 kB	🔴 +5.23 kB	🔴 +4.62 kB
assets/AudioPreviewPlayer-D7eyPLP_.js (new)	—	13.4 kB	🔴 +13.4 kB	🔴 +3.37 kB	🔴 +3.02 kB
assets/AudioPreviewPlayer-DOI_Yc1y.js (removed)	13.4 kB	—	🟢 -13.4 kB	🟢 -3.37 kB	🟢 -3.02 kB
assets/WidgetGalleria-BeVbloEg.js (removed)	4.1 kB	—	🟢 -4.1 kB	🟢 -1.45 kB	🟢 -1.3 kB
assets/WidgetGalleria-CTkdyE0s.js (new)	—	4.1 kB	🔴 +4.1 kB	🔴 +1.45 kB	🔴 +1.31 kB
assets/WidgetColorPicker-BF1qPdFa.js (removed)	3.41 kB	—	🟢 -3.41 kB	🟢 -1.38 kB	🟢 -1.23 kB
assets/WidgetColorPicker-JNu0WwW_.js (new)	—	3.41 kB	🔴 +3.41 kB	🔴 +1.38 kB	🔴 +1.23 kB
assets/WidgetTextarea-B8O23G9n.js (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.22 kB	🟢 -1.09 kB
assets/WidgetTextarea-dhmguXyH.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.22 kB	🔴 +1.07 kB
assets/WidgetMarkdown-CGFTEXey.js (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.28 kB	🟢 -1.12 kB
assets/WidgetMarkdown-DgAvGpCD.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.28 kB	🔴 +1.13 kB
assets/WidgetAudioUI-BFWxvWQl.js (removed)	2.85 kB	—	🟢 -2.85 kB	🟢 -1.16 kB	🟢 -1.06 kB
assets/WidgetAudioUI-CqCaLq95.js (new)	—	2.85 kB	🔴 +2.85 kB	🔴 +1.16 kB	🔴 +1.05 kB
assets/WidgetInputText-BDp1K0V5.js (new)	—	1.99 kB	🔴 +1.99 kB	🔴 +919 B	🔴 +849 B
assets/WidgetInputText-DhQLJoh0.js (removed)	1.99 kB	—	🟢 -1.99 kB	🟢 -918 B	🟢 -847 B
assets/WidgetToggleSwitch-BbXKc02L.js (removed)	1.76 kB	—	🟢 -1.76 kB	🟢 -836 B	🟢 -727 B
assets/WidgetToggleSwitch-C0mG49iM.js (new)	—	1.76 kB	🔴 +1.76 kB	🔴 +835 B	🔴 +729 B
assets/MediaImageBottom-DZzOSOwp.js (removed)	1.55 kB	—	🟢 -1.55 kB	🟢 -736 B	🟢 -643 B
assets/MediaImageBottom-JRLSp1vE.js (new)	—	1.55 kB	🔴 +1.55 kB	🔴 +732 B	🔴 +637 B
assets/MediaAudioBottom-B37yywa2.js (new)	—	1.51 kB	🔴 +1.51 kB	🔴 +734 B	🔴 +651 B
assets/MediaAudioBottom-oBTPR0rK.js (removed)	1.51 kB	—	🟢 -1.51 kB	🟢 -734 B	🟢 -651 B
assets/Media3DBottom-C9qnwU6l.js (new)	—	1.5 kB	🔴 +1.5 kB	🔴 +732 B	🔴 +650 B
assets/Media3DBottom-CI5BJPbO.js (removed)	1.5 kB	—	🟢 -1.5 kB	🟢 -734 B	🟢 -649 B
assets/MediaVideoBottom--KPDUhCO.js (new)	—	1.5 kB	🔴 +1.5 kB	🔴 +732 B	🔴 +652 B
assets/MediaVideoBottom-DBq7vWwd.js (removed)	1.5 kB	—	🟢 -1.5 kB	🟢 -733 B	🟢 -653 B
assets/Media3DTop-CwIOnAfB.js (new)	—	1.49 kB	🔴 +1.49 kB	🔴 +767 B	🔴 +653 B
assets/Media3DTop-D7uh0qCF.js (removed)	1.49 kB	—	🟢 -1.49 kB	🟢 -765 B	🟢 -648 B
assets/WidgetSelect-_06rKIxA.js (new)	—	655 B	🔴 +655 B	🔴 +343 B	🔴 +289 B
assets/WidgetSelect-9pD--Swl.js (removed)	655 B	—	🟢 -655 B	🟢 -343 B	🟢 -289 B
assets/WidgetInputNumber-Bp08zJXW.js (removed)	595 B	—	🟢 -595 B	🟢 -331 B	🟢 -273 B
assets/WidgetInputNumber-W7ez11Yp.js (new)	—	595 B	🔴 +595 B	🔴 +332 B	🔴 +278 B
assets/Load3D-DHc6rt3j.js (new)	—	424 B	🔴 +424 B	🔴 +266 B	🔴 +223 B
assets/Load3D-DJN3_uJi.js (removed)	424 B	—	🟢 -424 B	🟢 -267 B	🟢 -222 B
assets/WidgetLegacy-BMRH9Ag3.js (new)	—	364 B	🔴 +364 B	🔴 +238 B	🔴 +194 B
assets/WidgetLegacy-DdXitalg.js (removed)	364 B	—	🟢 -364 B	🟢 -236 B	🟢 -195 B
assets/commands-_s-RvhJR.js	13.6 kB	13.6 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-BuUILW6P.js	13 kB	13 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-BV4R6fLx.js	14.9 kB	14.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-BWp4HdfU.js	101 B	101 B	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CLwPdnT6.js	14.2 kB	14.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CWMchBmd.js	15.9 kB	15.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DazTQhtc.js	12.9 kB	12.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DmWrOe93.js	13.7 kB	13.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DwiH7Kr6.js	13.8 kB	13.8 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-mS3LCNPn.js	14.5 kB	14.5 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-BMi-Aksj.js	99 kB	99 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CqR8skJT.js	73.1 kB	73.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Cw9RZWRY.js	89 B	89 B	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-DcRHAFEy.js	81.7 kB	81.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-DdFdLxku.js	72.2 kB	72.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-DJAtuVu5.js	84.3 kB	84.3 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-DK8I9Rk3.js	114 kB	114 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-gP_ssnMb.js	83.4 kB	83.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-nxXY9vGp.js	94 kB	94 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Ycd3gqkA.js	86.5 kB	86.5 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaAudioTop-DBM2-uF8.js	1.46 kB	1.46 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaImageTop-Dv8etOwH.js	1.75 kB	1.75 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaVideoTop-DPTn18Gu.js	2.65 kB	2.65 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-BC3OlaIn.js	342 kB	342 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-BsqN8-W1.js	285 kB	285 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-Bw_Jitw_.js	101 B	101 B	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-CK2saYDx.js	307 kB	307 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-Cm5kR4Hi.js	306 kB	306 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-CMrh-uxB.js	310 kB	310 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-DlUIOit1.js	369 kB	369 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-DNu_xoP2.js	282 kB	282 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-DpcvlpZe.js	303 kB	303 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-IyjOYIl-.js	317 kB	317 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetChart-BAE_xj62.js	2.48 kB	2.48 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetImageCompare-CoEHTkmg.js	2.21 kB	2.21 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/widgetPropFilter-BIbGSUAt.js	1.28 kB	1.28 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 18 added / 18 removed

[comfy-pr-bot]

@christian-byrne Successfully backported to #7368