Style: Larger Node Text, More Sidebar Alignment #7223
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (22)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 WalkthroughWalkthroughSearchBox was refactored and moved from Changes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/11/2025, 08:11:50 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 12/11/2025, 08:27:47 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
DrJKL
force-pushed
the
drjkl/reverse-shrink-ray
branch
from
6479bac to
30f9668
Compare
DrJKL
force-pushed
the
drjkl/consistency-is-inter
branch
2 times, most recently
from
d2ebe0f to
b702361
Compare
DrJKL
force-pushed
the
drjkl/reverse-shrink-ray
branch
from
25bf976 to
b0476bd
Compare
DrJKL
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
github-actions
bot
removed
the
New Browser Test Expectations
DrJKL
force-pushed
the
drjkl/consistency-is-inter
branch
3 times, most recently
from
b1f64a6 to
b7d26e9
Compare
DrJKL
force-pushed
the
drjkl/reverse-shrink-ray
branch
from
8197219 to
bc7d097
Compare
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.23 MB (baseline 3.23 MB) • 🟢 -1.58 kBMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 991 kB (baseline 991 kB) • 🟢 -7 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • 🟢 -2 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 178 kB (baseline 178 kB) • 🟢 -323 BReusable component library chunks
Status: 9 added / 9 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 3 added / 3 removed Utilities & Hooks — 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) • 🔴 +418 BExternal libraries and shared vendor chunks
Status: 5 added / 5 removed Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 23 added / 23 removed |
DrJKL
changed the title
DrJKL
added
Design
DrJKL
force-pushed
the
drjkl/reverse-shrink-ray
branch
from
ae7fa98 to
e258e03
Compare
DrJKL
added
New Browser Test Expectations
github-actions
bot
removed
the
New Browser Test Expectations
DrJKL
force-pushed
the
drjkl/reverse-shrink-ray
branch
from
6745b42 to
71a25cc
Compare
dosubot
bot
added
the
size:L
DrJKL
force-pushed
the
drjkl/reverse-shrink-ray
branch
from
1cd5ed3 to
45ea979
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/common/SearchBox.vue (1)
119-129: Style block should be removed when migrating away from PrimeVue.Per guidelines,
<style>blocks should be avoided in favor of Tailwind utility classes. The current style block exists primarily for PrimeVue component overrides (:deep(.p-inputtext)). When the PrimeVue components are migrated to shadcn/vue or Reka UI alternatives, this block should be eliminated in favor of utility classes or component props.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (20)
browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-touch-mobile-chrome-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.pngis excluded by!**/*.png
📒 Files selected for processing (24)
packages/design-system/src/css/style.css(1 hunks)src/components/common/SearchBox.stories.ts(2 hunks)src/components/common/SearchBox.test.ts(4 hunks)src/components/common/SearchBox.vue(2 hunks)src/components/custom/widget/WorkflowTemplateSelectorDialog.vue(1 hunks)src/components/input/MultiSelect.vue(1 hunks)src/components/input/SearchBox.vue(0 hunks)src/components/sidebar/tabs/AssetsSidebarTab.vue(4 hunks)src/components/sidebar/tabs/ModelLibrarySidebarTab.vue(2 hunks)src/components/sidebar/tabs/NodeLibrarySidebarTab.vue(1 hunks)src/components/sidebar/tabs/SidebarTabTemplate.vue(1 hunks)src/components/sidebar/tabs/WorkflowsSidebarTab.vue(1 hunks)src/components/widget/SampleModelSelector.vue(1 hunks)src/components/widget/layout/BaseModalLayout.stories.ts(1 hunks)src/locales/en/main.json(1 hunks)src/platform/assets/components/AssetBrowserModal.vue(1 hunks)src/platform/assets/components/MediaAssetFilterBar.vue(2 hunks)src/renderer/extensions/vueNodes/components/InputSlot.vue(2 hunks)src/renderer/extensions/vueNodes/components/LGraphNode.vue(1 hunks)src/renderer/extensions/vueNodes/components/NodeHeader.vue(4 hunks)src/renderer/extensions/vueNodes/components/NodeWidgets.vue(2 hunks)src/renderer/extensions/vueNodes/components/OutputSlot.vue(1 hunks)src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue(1 hunks)tests-ui/platform/assets/components/AssetBrowserModal.test.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/components/input/SearchBox.vue
🧰 Additional context used
📓 Path-based instructions (15)
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/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/common/SearchBox.stories.tssrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/components/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/common/SearchBox.stories.tssrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.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/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/common/SearchBox.stories.tssrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/common/SearchBox.stories.tssrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.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/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/common/SearchBox.stories.tssrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.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 componentsVue component file names must use PascalCase; for example,
MenuHamburger.vue
Files:
src/components/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/components/common/SearchBox.test.tssrc/components/common/SearchBox.stories.tssrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.ts
**/*.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 usewithDefaultsor runtime props declaration
PreferuseModelto separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using<style>blocks in Vue components
Use semantic Tailwind values fromstyle.csstheme instead of thedark:variant; for example, usebg-node-component-surfaceinstead ofdark:prefixes
Always usecn()utility from@/utils/tailwindUtilto merge Tailwind class names; do not use:class="[]"syntax
Usereffor reactive state in Vue Composition API components
Implement computed properties withcomputed()from Vue; avoid using arefwith awatchif acomputedwould work instead
UsewatchandwatchEffectfor side effects in Vue components
Implement lifecycle hooks usingonMounted,onUpdated, and other Vue lifecycle functions
Useprovide/injectfor 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 redundantcomputed, and prefercomputedoverwatch
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 insrc/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Files:
src/components/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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/components/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/locales/en/main.jsonsrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuetests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/common/SearchBox.stories.tssrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype 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 nestediforforstatements); 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/components/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuetests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/common/SearchBox.stories.tssrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.ts
tests-ui/**/*.test.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)
tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features
Follow existing test patterns in the codebase
Use existing test utilities rather than writing custom utilities
Mock external dependencies in tests
Always prefer vitest mock functions over writing verbose manual mocks
Files:
tests-ui/platform/assets/components/AssetBrowserModal.test.ts
**/*.test.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.test.ts: Write tests for all changes, especially bug fixes to catch future regressions
Unit/component test files must be named**/*.test.tsor intests-ui/directory
Do not write change detector tests that just assert default values
Do not write tests dependent on non-behavioral features like utility classes or styles
Be parsimonious in testing; do not write redundant tests; see composable tests approach
Follow 'Don't Mock What You Don't Own' principle - avoid mocking external dependencies
Do not write tests that just test the mocks; ensure tests fail when code behaves unexpectedly
Leverage Vitest's mocking utilities where possible for test mocking
Keep module mocks contained in test files; do not use global mutable state within test files; usevi.hoisted()if necessary
For Component testing, use Vue Test Utils and follow advice about making components easy to test
Aim for behavioral coverage of critical and new features in unit tests
Files:
tests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/components/common/SearchBox.test.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyMinimize the surface area (exported values) of each module and composable
Files:
src/components/common/SearchBox.test.tssrc/components/common/SearchBox.stories.tssrc/components/widget/layout/BaseModalLayout.stories.ts
🧠 Learnings (68)
📓 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
📚 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 Dropdown component with Select
Applied to files:
src/components/input/MultiSelect.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.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 InputSwitch component with ToggleSwitch
Applied to files:
src/components/input/MultiSelect.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.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 Chips component with AutoComplete with multiple enabled
Applied to files:
src/components/input/MultiSelect.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/components/common/SearchBox.vuesrc/components/widget/layout/BaseModalLayout.stories.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{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/input/MultiSelect.vuesrc/locales/en/main.jsonsrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Sidebar component with Drawer
Applied to files:
src/components/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.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 Steps component with Stepper without panels
Applied to files:
src/components/input/MultiSelect.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.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 InlineMessage component with Message
Applied to files:
src/components/input/MultiSelect.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.tssrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.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 vue-i18n for ALL UI strings
Applied to files:
src/components/input/MultiSelect.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/components/input/MultiSelect.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/components/common/SearchBox.test.tssrc/components/widget/layout/BaseModalLayout.stories.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 Calendar component with DatePicker
Applied to files:
src/components/input/MultiSelect.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/components/input/MultiSelect.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 : Extract complex conditionals to computed properties
Applied to files:
src/components/input/MultiSelect.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/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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 : Implement computed properties with computed()
Applied to files:
src/components/input/MultiSelect.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/input/MultiSelect.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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/input/MultiSelect.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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 : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work instead
Applied to files:
src/components/input/MultiSelect.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/input/MultiSelect.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.ts
📚 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/components/input/MultiSelect.vuesrc/components/sidebar/tabs/SidebarTabTemplate.vuesrc/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/components/NodeWidgets.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/renderer/extensions/vueNodes/components/InputSlot.vuesrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/renderer/extensions/vueNodes/components/NodeHeader.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/common/SearchBox.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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/sidebar/tabs/SidebarTabTemplate.vuesrc/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/sidebar/tabs/WorkflowsSidebarTab.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.ts
📚 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/renderer/extensions/vueNodes/components/LGraphNode.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/renderer/extensions/vueNodes/components/LGraphNode.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 Tailwind CSS for styling
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.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 Tailwind CSS only for styling (no custom CSS)
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.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 : Always use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names; do not use `:class="[]"` syntax
Applied to files:
src/renderer/extensions/vueNodes/components/LGraphNode.vuesrc/renderer/extensions/vueNodes/components/InputSlot.vue
📚 Learning: 2025-12-09T04:35:43.971Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:43.971Z
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-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 : Vue components must use `<script setup lang="ts">` for component logic
Applied to files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 : Use setup() function in Vue 3 Composition API
Applied to files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 setup() function for component logic
Applied to files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 : Utilize Vue 3's Teleport component when needed
Applied to files:
src/platform/assets/components/MediaAssetFilterBar.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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 OverlayPanel component with Popover
Applied to files:
src/components/sidebar/tabs/NodeLibrarySidebarTab.vuesrc/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/widget/SampleModelSelector.vuesrc/platform/assets/components/AssetBrowserModal.vuesrc/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/sidebar/tabs/AssetsSidebarTab.vuesrc/components/widget/layout/BaseModalLayout.stories.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,css} : Use the correct tokens from style.css in the design system package
Applied to files:
src/renderer/extensions/vueNodes/components/OutputSlot.vuesrc/platform/assets/components/AssetBrowserModal.vuepackages/design-system/src/css/style.css
📚 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 : Follow Vue 3 style guide and naming conventions
Applied to files:
src/renderer/extensions/vueNodes/components/OutputSlot.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 : Use provide/inject for dependency injection in Vue components
Applied to files:
src/components/custom/widget/WorkflowTemplateSelectorDialog.vuesrc/components/common/SearchBox.test.ts
📚 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 : Prefer `useModel` to separately defining a prop and emit
Applied to files:
src/components/widget/SampleModelSelector.vuesrc/components/common/SearchBox.vue
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Check assets/ directory for test data when writing tests
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/components/common/SearchBox.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebase
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/components/common/SearchBox.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/components/common/SearchBox.test.ts
📚 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 **/*.test.ts : Keep module mocks contained in test files; do not use global mutable state within test files; use `vi.hoisted()` if necessary
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/components/common/SearchBox.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Use existing test utilities rather than writing custom utilities
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/components/common/SearchBox.test.ts
📚 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 **/*.test.ts : Leverage Vitest's mocking utilities where possible for test mocking
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.ts
📚 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 **/*.test.ts : For Component testing, use Vue Test Utils and follow advice about making components easy to test
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/components/common/SearchBox.test.tssrc/components/common/SearchBox.stories.tssrc/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.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:
tests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/components/common/SearchBox.test.tssrc/components/common/SearchBox.stories.tssrc/components/widget/layout/BaseModalLayout.stories.ts
📚 Learning: 2025-12-10T03:09:13.807Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:13.807Z
Learning: In test files, prefer selecting or asserting on accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests validate actual user-facing behavior and accessibility, reducing reliance on implementation details like test IDs.
Applied to files:
tests-ui/platform/assets/components/AssetBrowserModal.test.tssrc/components/common/SearchBox.test.ts
📚 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 vue-i18n in composition API for any string literals; place new translation entries in `src/locales/en/main.json`
Applied to files:
src/platform/assets/components/AssetBrowserModal.vuesrc/components/common/SearchBox.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`
Applied to files:
src/components/common/SearchBox.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests
Applied to files:
src/components/common/SearchBox.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Follow naming conventions for browser tests
Applied to files:
src/components/common/SearchBox.test.ts
📚 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 **/*.test.ts : Write tests for all changes, especially bug fixes to catch future regressions
Applied to files:
src/components/common/SearchBox.test.ts
📚 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 browser_tests/**/*.spec.ts : Do not use `waitForTimeout` in Playwright tests; use Locator actions and retrying assertions instead
Applied to files:
src/components/common/SearchBox.test.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue components
Applied to files:
src/components/common/SearchBox.stories.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guide
Applied to files:
src/components/common/SearchBox.stories.ts
📚 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 : Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Applied to files:
src/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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 `ref` for reactive state in Vue Composition API components
Applied to files:
src/components/sidebar/tabs/ModelLibrarySidebarTab.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 : Utilize ref and reactive for reactive state
Applied to files:
src/components/sidebar/tabs/ModelLibrarySidebarTab.vuesrc/components/sidebar/tabs/AssetsSidebarTab.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 : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/components/sidebar/tabs/ModelLibrarySidebarTab.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 **/*.{ts,tsx,vue} : Use es-toolkit for utility functions
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 `provide`/`inject` for dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 : Utilize provide/inject for dependency injection
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/**/*.{ts,tsx,vue} : Use es-toolkit for utility functions instead of other utility libraries
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 useIntersectionObserver for visibility detection instead of custom scroll handlers
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.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 VueUse functions for performance-enhancing styles
Applied to files:
src/components/sidebar/tabs/AssetsSidebarTab.vue
📚 Learning: 2025-12-09T03:50:03.127Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:50:03.127Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.
Applied to files:
src/components/widget/layout/BaseModalLayout.stories.ts
DrJKL
added
the
New Browser Test Expectations
github-actions
bot
removed
the
New Browser Test Expectations
This was referenced Dec 11, 2025
comfydesigner
approved these changes
Dec 11, 2025
DrJKL
force-pushed
the
drjkl/reverse-shrink-ray
branch
from
d6c36bc to
550bad6
Compare
DrJKL
added
the
New Browser Test Expectations
Contributor
There was a problem hiding this comment.
Actionable comments posted: 6
♻️ Duplicate comments (1)
src/components/common/SearchBox.vue (1)
104-116: Size prop is still ignored whenshowBorderis true.The
wrapperStylecomputed returns early whenshowBorderis true, which means thesizeprop has no effect in that case. If both props should work independently, apply size classes regardless of border state.const wrapperStyle = computed(() => { + const sizeClasses = { + md: 'h-8 px-2 py-1.5', + lg: 'h-10 px-4 py-2' + }[size] + if (showBorder) { - return cn('rounded p-2 border border-solid border-border-default') + return cn('rounded border border-solid border-border-default', sizeClasses) } - // Size-specific classes matching button sizes for consistency - const sizeClasses = { - md: 'h-8 px-2 py-1.5', // Matches button sm size - lg: 'h-10 px-4 py-2' // Matches button md size - }[size] - return cn('rounded-lg', sizeClasses) })
|
|
||
| <script setup lang="ts" generic="TFilter extends SearchFilter"> | ||
| import { debounce } from 'es-toolkit/compat' | ||
| import { cn } from '@comfyorg/tailwind-utils' |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check which cn import sources are used across the codebase
echo "=== cn imports from @comfyorg/tailwind-utils ==="
rg "from ['\"]@comfyorg/tailwind-utils['\"]" --type vue -c
echo ""
echo "=== cn imports from @/utils/tailwindUtil ==="
rg "from ['\"]@/utils/tailwindUtil['\"]" --type vue -c
echo ""
echo "=== Check if @/utils/tailwindUtil file exists ==="
find . -path "*@/utils/tailwindUtil*" -o -name "tailwindUtil*" | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 360
🏁 Script executed:
#!/bin/bash
# Verify the actual SearchBox.vue import on line 49
echo "=== SearchBox.vue line 49 ==="
sed -n '49p' src/components/common/SearchBox.vue
echo ""
echo "=== Verify InputSlot.vue import of cn ==="
rg "import.*cn.*from" src/components/node/InputSlot.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 279
🏁 Script executed:
#!/bin/bash
# Check if @comfyorg/tailwind-utils is a legitimate package
echo "=== Check for @comfyorg packages in the codebase ==="
rg "@comfyorg" --type vue --type ts --type json | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 167
🏁 Script executed:
#!/bin/bash
# Search for cn imports without file type restrictions
echo "=== All cn imports from @comfyorg/tailwind-utils ==="
rg "from ['\"]@comfyorg/tailwind-utils['\"]" -c
echo ""
echo "=== All cn imports from @/utils/tailwindUtil ==="
rg "from ['\"]@/utils/tailwindUtil['\"]" -c
echo ""
echo "=== Check @/utils/tailwindUtil.ts contents ==="
cat -n src/utils/tailwindUtil.ts | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 4438
🏁 Script executed:
#!/bin/bash
# Check all imports in SearchBox.vue
echo "=== SearchBox.vue imports (first 20 lines) ==="
head -60 src/components/common/SearchBox.vue | cat -n
echo ""
echo "=== Search for all @comfyorg usage in entire codebase ==="
rg "@comfyorg" | head -30Repository: Comfy-Org/ComfyUI_frontend
Length of output: 4596
Use the local cn import from @/utils/tailwindUtil instead of directly importing from @comfyorg/tailwind-utils.
The cn utility should be imported from @/utils/tailwindUtil, which re-exports it from the package. This follows the project's coding guidelines and matches the pattern used throughout the codebase.
-import { cn } from '@comfyorg/tailwind-utils'
+import { cn } from '@/utils/tailwindUtil'📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import { cn } from '@comfyorg/tailwind-utils' | |
| import { cn } from '@/utils/tailwindUtil' |
🤖 Prompt for AI Agents
In src/components/common/SearchBox.vue around line 49, the file imports cn
directly from '@comfyorg/tailwind-utils' instead of using the project's local
re-export; change the import to use '@/utils/tailwindUtil' so the component
imports cn from the local utility module (replace the existing import statement
with one that imports cn from '@/utils/tailwindUtil').
| cn( | ||
| 'bg-component-node-background lg-node absolute pb-1', | ||
| 'bg-component-node-background lg-node absolute pb-1 text-sm', |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Verify text-sm aligns with "Larger Node Text" PR objective.
The PR title indicates "Larger Node Text," but adding the text-sm class typically sets a smaller text size (0.875rem in standard Tailwind). Confirm that:
- This establishes a baseline where previously there was no explicit text size
- The text-sm value is larger than the previous implicit browser default
- Or this change is intentional and the "larger text" refers to other components
If the goal is truly larger text, consider whether text-base or no explicit size class would be more appropriate for node content.
🤖 Prompt for AI Agents
In src/renderer/extensions/vueNodes/components/LGraphNode.vue around line 11,
the class list adds text-sm which actually reduces text size relative to
Tailwind's base; verify whether the PR's "Larger Node Text" objective intended a
larger font — if so remove text-sm or replace it with text-base (or the
appropriate larger class) to restore/increase size, and confirm by checking the
previous CSS/no-explicit-size baseline and running the component to ensure node
labels match the intended larger typography.
| :node-id="nodeData?.id != null ? String(nodeData.id) : ''" | ||
| :node-type="nodeType" | ||
| class="flex-1 col-span-2" | ||
| class="col-span-2" |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Verify widget sizing after removing flex-1.
Removing the flex-1 class changes the widget from flexible growth (filling available space) to fixed width based on the grid column. This could affect the appearance of widgets that previously relied on flexible sizing. Verify that all widget types render correctly with this fixed-width behavior, especially longer widgets like text inputs or sliders.
🤖 Prompt for AI Agents
In src/renderer/extensions/vueNodes/components/NodeWidgets.vue around line 60,
removing the flex-1 class and replacing it with class="col-span-2" changes
widgets from flexible growth to fixed grid width; verify and restore correct
sizing by: check all widget variants (text inputs, sliders, toggles, long
labels) in different container widths and states, if any overflow or truncation
occurs either reintroduce flex-1 alongside col-span-2 for those specific widget
wrappers or adjust grid column spans / add responsive utility classes (e.g.,
sm:col-span-? or min-w-?) to allow flexible growth where necessary, and update
snapshots/styles accordingly.
| v-if="!dotOnly" | ||
| class="text-xs font-normal truncate text-node-component-slot-text" | ||
| > | ||
| <span v-if="!dotOnly" class="truncate text-node-component-slot-text"> |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find style.css files in the repository
fd "style\.css" -t fRepository: Comfy-Org/ComfyUI_frontend
Length of output: 176
🏁 Script executed:
# Search for the design token in all style.css files
rg "text-node-component-slot-text" apps/desktop-ui/src/assets/css/style.css packages/design-system/src/css/style.css src/assets/css/style.cssRepository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
# Check the design system style.css file content
cat packages/design-system/src/css/style.css | head -100Repository: Comfy-Org/ComfyUI_frontend
Length of output: 2394
🏁 Script executed:
# Search full design-system style.css for the token
rg "text-node-component-slot-text" packages/design-system/src/css/style.cssRepository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
# Read OutputSlot.vue to verify the actual code at line 6
sed -n '1,15p' src/renderer/extensions/vueNodes/components/OutputSlot.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 668
🏁 Script executed:
# Search for any text-node-* tokens in style.css to see naming pattern
rg "text-node" packages/design-system/src/css/style.cssRepository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
# Search for typography/text tokens in design-system style.css
rg "^ --text" packages/design-system/src/css/style.css | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 378
Remove undefined design token text-node-component-slot-text and use valid typography tokens.
The class text-node-component-slot-text does not exist in the design system's style.css. The design system defines tokens like --text-xxs, --text-primary, and --text-secondary, but no text-node-component-slot-text token. This results in no typography styling being applied to the slot name. Replace with an appropriate existing design token or restore the working classes (text-xs font-normal).
🤖 Prompt for AI Agents
In src/renderer/extensions/vueNodes/components/OutputSlot.vue around line 6, the
span uses a nonexistent design token class "text-node-component-slot-text", so
no typography is applied; replace that class with a valid design-system token or
restore working utility classes. Update the span to use an existing token such
as a typography variable (e.g. --text-primary/--text-secondary) or standard
classes like "text-xs font-normal" so the slot name receives proper styling;
ensure the chosen class/token exists in style.css and remove the invalid class.
| <div | ||
| v-if="!hideLayoutField" | ||
| class="relative flex h-full min-w-0 items-center" | ||
| class="relative flow-root min-w-0 truncate content-center-safe w-full" |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for content-center-safe definition in the codebase
rg -n "content-center-safe" -g "*.css" -g "*.scss" -g "*.ts" -g "*.tsx" -g "*.vue" -g "*.json"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 230
🏁 Script executed:
# Check style.css and theme configuration
fd -e css -e scss | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 415
🏁 Script executed:
# Read the specific file to understand context
cat -n "src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1572
🏁 Script executed:
# Check src/assets/css/style.css for content-center-safe or similar
cat "src/assets/css/style.css" | head -100Repository: Comfy-Org/ComfyUI_frontend
Length of output: 118
🏁 Script executed:
# Search for any content-center pattern in CSS files
rg -n "content-center" -g "*.css"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
# Search for similar utility definitions in style.css
rg -n "\.content-" -g "*.css"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
# Check if packages/design-system exists and search there
fd -e css "packages/design-system" | xargs cat 2>/dev/null | rg -n "content-center"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 463
🏁 Script executed:
# Search for any recent changes or git history of this file
git log --oneline -20 "src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue" 2>/dev/null || echo "Git history not available"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 94
🏁 Script executed:
# Check if content-center-safe might be a typo - search for similar classes
rg -n "content-" src/assets/css/ packages/design-system/src/css/ 2>/dev/null || rg -n "safe" -g "*.css"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 729
🏁 Script executed:
cat "packages/design-system/src/css/style.css" | grep -A 5 -B 5 "content-center" || echo "No content-center found"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 93
🏁 Script executed:
# Check for any utility class definitions that might include content-center-safe
rg -n "@apply|content-center-safe" packages/design-system/src/css/style.cssRepository: Comfy-Org/ComfyUI_frontend
Length of output: 52
Remove or replace the undefined content-center-safe class
The class content-center-safe used on line 23 does not exist in the codebase—it is neither a standard Tailwind v4 utility nor a custom class defined in src/assets/css/style.css or the design system. This will result in no styling being applied.
The layout also changed from flex h-full items-center to flow-root, which fundamentally alters how child elements are positioned and sized. Verify that:
- The
content-center-safeclass is either defined in your design system or replaced with a valid utility (e.g.,flex items-centerif vertical centering is still needed) - The
flow-rootlayout change is intentional and preserves the required vertical alignment behavior - Removing
h-fulldoes not break the component's height constraints
🤖 Prompt for AI Agents
In
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
around line 23, the class "content-center-safe" is undefined and "flow-root"
plus removal of "flex h-full items-center" changed layout behavior; replace
"content-center-safe" with a valid utility (e.g., use "flex items-center" if you
need vertical centering), or define the class in the design system if it was
intentional, and restore "h-full" if the component relied on full-height
constraints (ensure switching from "flow-root" back to a flex-based layout if
child alignment is required); verify the change preserves previous
sizing/alignment and update snapshot/style tests accordingly.
Contributor
Author
There was a problem hiding this comment.
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Fetch the content from the Tailwind CSS source to verify content-center-safe
curl -s "https://raw.githubusercontent.com/tailwindlabs/tailwindcss/5065de4f9e0012bd99756a5317623885d2ae6cd6/packages/tailwindcss/src/utilities.ts" | sed -n '1970,1985p'
Length of output: 957
@DrJKL, you're absolutely right! I apologize for the incorrect review comment.
The source code confirms that content-center-safe is indeed a valid Tailwind CSS v4 utility that maps to align-content: safe center. The "safe" keyword is a CSS alignment feature that prevents overflow when the aligned content is larger than its container, which is exactly what you need here for proper widget label alignment.
Thank you for providing the reference—I've noted this for future reviews.
🐰✨
🧠 Learnings used
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:19.792Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, inline Tailwind CSS class strings, even when long, are acceptable and preferred over extracting them to computed properties when the classes are static. This is a common Tailwind pattern and doesn't need to be flagged as a readability issue.
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7084
File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26
Timestamp: 2025-12-01T23:42:30.894Z
Learning: In the ComfyUI frontend codebase, Tailwind CSS is configured with Preflight enabled (default), which automatically provides `content: ''` for pseudo-elements when using `after:` or `before:` variants - no need to explicitly add `after:content-['']`.
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
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 : Always use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names; do not use `:class="[]"` syntax
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7084
File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26
Timestamp: 2025-12-01T23:45:28.610Z
Learning: Tailwind CSS supports arbitrary fractional width utilities beyond the common predefined ones. For example, `w-5/2` is valid syntax that represents 250% width (5÷2 = 2.5 = 250%). This applies to all utility variants including pseudo-elements like `after:w-5/2`.
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/LiteGraphCanvasSplitterOverlay.vue:2-4
Timestamp: 2025-12-04T22:01:48.135Z
Learning: In Tailwind CSS v4, z-index utilities support direct numeric values without brackets. For example, `z-999` generates `z-index: 999;` automatically. This is different from v3 which required bracket syntax `z-[999]` for arbitrary values.
Comment on lines
+38
to
+37
| @pointerdown.stop | ||
| @pointermove.stop | ||
| @pointerup.stop |
Contributor
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
LGTM – Cleaner event handler syntax
Removing the noop function and using just the .stop modifier is more idiomatic Vue and eliminates the unnecessary import. The .stop modifier alone prevents event propagation without needing a no-op handler function.
🤖 Prompt for AI Agents
In
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
around lines 38-40, the template currently attaches event handlers that call a
no-op function; remove the noop usage and rely solely on the Vue .stop modifier
(as shown: @pointerdown.stop, @pointermove.stop, @pointerup.stop), then delete
any corresponding noop method definition and its import/reference so there are
no unused functions or imports left in the component.
550bad6 to
5d570fb
Compare
github-actions
bot
removed
the
New Browser Test Expectations
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue(2 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 usewithDefaultsor runtime props declaration
PreferuseModelto separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using<style>blocks in Vue components
Use semantic Tailwind values fromstyle.csstheme instead of thedark:variant; for example, usebg-node-component-surfaceinstead ofdark:prefixes
Always usecn()utility from@/utils/tailwindUtilto merge Tailwind class names; do not use:class="[]"syntax
Usereffor reactive state in Vue Composition API components
Implement computed properties withcomputed()from Vue; avoid using arefwith awatchif acomputedwould work instead
UsewatchandwatchEffectfor side effects in Vue components
Implement lifecycle hooks usingonMounted,onUpdated, and other Vue lifecycle functions
Useprovide/injectfor 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 redundantcomputed, and prefercomputedoverwatch
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 insrc/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype 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 nestediforforstatements); 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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
🧠 Learnings (18)
📓 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: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
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 Sidebar component with Drawer
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 Dropdown component with Select
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 Chips component with AutoComplete with multiple enabled
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`
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:50:03.127Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.
📚 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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
📚 Learning: 2025-12-01T23:42:30.894Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7084
File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26
Timestamp: 2025-12-01T23:42:30.894Z
Learning: In the ComfyUI frontend codebase, Tailwind CSS is configured with Preflight enabled (default), which automatically provides `content: ''` for pseudo-elements when using `after:` or `before:` variants - no need to explicitly add `after:content-['']`.
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
📚 Learning: 2025-12-01T23:45:28.610Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7084
File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26
Timestamp: 2025-12-01T23:45:28.610Z
Learning: Tailwind CSS supports arbitrary fractional width utilities beyond the common predefined ones. For example, `w-5/2` is valid syntax that represents 250% width (5÷2 = 2.5 = 250%). This applies to all utility variants including pseudo-elements like `after:w-5/2`.
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
📚 Learning: 2025-12-04T22:01:48.135Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/LiteGraphCanvasSplitterOverlay.vue:2-4
Timestamp: 2025-12-04T22:01:48.135Z
Learning: In Tailwind CSS v4, z-index utilities support direct numeric values without brackets. For example, `z-999` generates `z-index: 999;` automatically. This is different from v3 which required bracket syntax `z-[999]` for arbitrary values.
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 : Always use `cn()` utility from `@/utils/tailwindUtil` to merge Tailwind class names; do not use `:class="[]"` syntax
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 : Vue components must use `<script setup lang="ts">` for component logic
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 **/*.{ts,tsx,vue} : Use es-toolkit for utility functions
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 : Use setup() function in Vue 3 Composition API
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 `provide`/`inject` for dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 : Utilize provide/inject for dependency injection
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 **/*.test.ts : For Component testing, use Vue Test Utils and follow advice about making components easy to test
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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 setup() function for component logic
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/**/*.{ts,tsx,vue} : Use es-toolkit for utility functions instead of other utility libraries
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
📚 Learning: 2025-12-11T03:55:51.755Z
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:51.755Z
Learning: In Vue components under src/renderer/extensions/vueNodes (e.g., ImagePreview.vue and LGraphNode.vue), implement image gallery keyboard navigation so that it responds to the node's focus state rather than requiring focus inside the image preview wrapper. Achieve this by wiring keyEvent handling at the node focus level and injecting or propagating key events (arrow keys) to the gallery when the node is focused/selected. This improves accessibility and aligns navigation with node-level focus behavior.
Applied to files:
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.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: setup
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (1)
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue (1)
19-19: Thetext-node-component-slot-textTailwind utility class does not exist in the design system and will not apply any styling.The CSS custom property
--node-component-slot-textexists in the design system, but Tailwind requires a corresponding--text-node-component-slot-textin the@themeblock to generate thetext-node-component-slot-textutility class. Currently, only--text-xxsand--text-xxxsare defined in the@themeblock for text utilities. Usetext-[color:var(--node-component-slot-text)]as an arbitrary value, or add--text-node-component-slot-textto the design system@themeblock inpackages/design-system/src/css/style.css.⛔ Skipped due to learnings
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 componentsLearnt 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 packageLearnt from: benceruleanlu Repo: Comfy-Org/ComfyUI_frontend PR: 7297 File: src/components/actionbar/ComfyActionbar.vue:33-43 Timestamp: 2025-12-09T21:40:19.792Z Learning: In the Comfy-Org/ComfyUI_frontend repository, inline Tailwind CSS class strings, even when long, are acceptable and preferred over extracting them to computed properties when the classes are static. This is a common Tailwind pattern and doesn't need to be flagged as a readability issue.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:` prefixesLearnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7084 File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26 Timestamp: 2025-12-01T23:42:30.894Z Learning: In the ComfyUI frontend codebase, Tailwind CSS is configured with Preflight enabled (default), which automatically provides `content: ''` for pseudo-elements when using `after:` or `before:` variants - no need to explicitly add `after:content-['']`.
Comment on lines
+21
to
+24
| <div v-if="!hideLayoutField" class="truncate content-center-safe"> | ||
| <template v-if="widget.name"> | ||
| {{ widget.label || widget.name }} | ||
| </p> | ||
| </template> |
Contributor
There was a problem hiding this comment.
Verify the conditional rendering logic for widget label.
The v-if="widget.name" condition means the label won't render when widget.name is falsy, even if widget.label exists. This changes the previous behavior where the element would always render.
Consider whether the condition should check for either field:
- <div v-if="!hideLayoutField" class="truncate content-center-safe">
- <template v-if="widget.name">
+ <div v-if="!hideLayoutField" class="truncate content-center-safe">
+ <template v-if="widget.name || widget.label">
{{ widget.label || widget.name }}
</template>
</div>Alternatively, if widgets always have a name property (even if empty string should be treated as "no label to show"), the current logic may be intentional.
🤖 Prompt for AI Agents
In
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
around lines 21-24, the current v-if="widget.name" prevents rendering when
widget.name is falsy even if widget.label exists; update the conditional to
check either field (e.g., v-if="widget.label || widget.name") so the label shows
when either label or name is present, or remove the v-if entirely if the element
should always render.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
See what it looks like. How it feels. What do you think?
┆Issue is synchronized with this Notion page by Unito