Cleanup: Properties Panel #7137
Conversation
📝 WalkthroughWalkthroughReworks splitter overlay positioning and panel visibility, centralizes workspace panel state via Pinia refs, introduces editable properties-panel titles and multi-node settings, adds widgetRegistry.shouldExpand API, updates many right-side panel components and stores for typed tabs and subgraph editing, and adjusts browser tests to target the new properties panel. Changes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/05/2025, 09:36:28 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/05/2025, 09:45:38 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.2 MB (baseline 3.2 MB) • 🟢 -265 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 975 kB (baseline 975 kB) • 🔴 +560 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) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 173 kB (baseline 173 kB) • ⚪ 0 BReusable component library chunks
Status: 6 added / 6 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue (1)
12-18: Potential reactivity issue with initialdefaultCollapsecheck.The
if (defaultCollapse)block (lines 12-14) runs once during setup. IfdefaultCollapseis initiallyfalsebut changes totruelater, the initial check won't setisCollapse. While thewatchhandles subsequent changes, the{ immediate: true }option could unify this logic and eliminate the conditional block.Consider using
immediate: truein the watcher to handle both initial and subsequent values:-if (defaultCollapse) { - isCollapse.value = true -} watch( () => defaultCollapse, - (value) => (isCollapse.value = value) + (value) => { + if (value !== undefined) { + isCollapse.value = value + } + }, + { immediate: true } )src/components/LiteGraphCanvasSplitterOverlay.vue (1)
25-26: Inconsistent use ofv-ifvsv-showfor focus mode gating.The left sidebar (line 25) and right panel (line 89) use
v-ifwhile the bottom panel (line 61) usesv-show. This inconsistency could cause subtle behavioral differences:
v-ifdestroys and recreates the component, losing internal statev-showkeeps the component mounted but hidden, preserving stateConsider unifying the approach. If state preservation matters, use
v-showconsistently:<SplitterPanel - v-if="sidebarLocation === 'left' && !focusMode" + v-show="sidebarLocation === 'left' && !focusMode"Or if DOM cleanup is preferred, use
v-iffor the bottom panel as well:<SplitterPanel - v-show="bottomPanelVisible && !focusMode" + v-if="bottomPanelVisible && !focusMode"Also applies to: 61-62, 88-90
src/components/rightSidePanel/RightSidePanel.vue (2)
86-91: Consider using store action instead of direct ref mutation.Directly mutating
activeTab.valuebypasses any centralized logic inrightSidePanelStore.openPanel(). For consistency with the tab click handler at line 142, consider using the store action here as well.watchEffect(() => { if (!tabs.value.some((tab) => tab.value === activeTab.value)) { - activeTab.value = tabs.value[0].value as 'parameters' | 'settings' | 'info' + rightSidePanelStore.openPanel(tabs.value[0].value) } })
104-124: Remove duplicate background classes from staticclassattribute.The static
classattribute (line 108) includesbg-secondary-background hover:bg-secondary-background-hoverwhich are also conditionally applied in the:classbinding (lines 111-115). This creates redundancy and confusion about which classes are active. Keep only the dynamic:classbinding for conditional background styling.<IconButton v-if="isSubgraphNode" type="transparent" size="sm" - class="bg-secondary-background hover:bg-secondary-background-hover text-base-foreground" + class="text-base-foreground" :class=" cn( 'bg-secondary-background hover:bg-secondary-background-hover', isEditingSubgraph ? 'bg-secondary-background-selected' : 'bg-secondary-background' ) "
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/components/LiteGraphCanvasSplitterOverlay.vue(8 hunks)src/components/MenuHamburger.vue(1 hunks)src/components/TopMenuSection.vue(4 hunks)src/components/graph/GraphCanvas.vue(1 hunks)src/components/graph/selectionToolbox/InfoButton.vue(2 hunks)src/components/rightSidePanel/RightSidePanel.vue(6 hunks)src/components/rightSidePanel/info/TabInfo.vue(2 hunks)src/components/rightSidePanel/layout/PropertiesAccordionItem.vue(1 hunks)src/components/rightSidePanel/layout/SidePanelSearch.vue(3 hunks)src/components/rightSidePanel/parameters/SectionWidgets.vue(3 hunks)src/components/rightSidePanel/parameters/TabParameters.vue(2 hunks)src/components/rightSidePanel/settings/TabSettings.vue(8 hunks)src/locales/en/main.json(1 hunks)src/stores/workspace/rightSidePanelStore.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (20)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/graph/GraphCanvas.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/stores/workspace/rightSidePanelStore.ts**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issueFiles:
src/stores/workspace/rightSidePanelStore.tssrc/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyFiles:
src/stores/workspace/rightSidePanelStore.ts**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configurationFiles:
src/stores/workspace/rightSidePanelStore.tssrc/**/stores/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/stores/**/*.{ts,tsx}: Maintain clear public interfaces and restrict extension access in stores
Use TypeScript for type safety in state management storesFiles:
src/stores/workspace/rightSidePanelStore.ts🧠 Learnings (45)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Source code should be organized in `src/` directory with key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`📚 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 panelsApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.vue : Name Vue components in PascalCase (e.g., `MenuHamburger.vue`)Applied to files:
src/components/MenuHamburger.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 Sidebar component with DrawerApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.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 InlineMessage component with MessageApplied to files:
src/components/MenuHamburger.vuesrc/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.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/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guideApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/info/TabInfo.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 PopoverApplied to files:
src/components/MenuHamburger.vuesrc/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/RightSidePanel.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 : Follow Vue 3 style guide and naming conventionsApplied to files:
src/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Organize Vue components in <template> <script> <style> orderApplied to files:
src/components/MenuHamburger.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 Steps component with Stepper without panelsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/info/TabInfo.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 Dropdown component with SelectApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Prefer emit/event-name for state changes over other communication patternsApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonApplied to files:
src/components/TopMenuSection.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.jsonApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue filesApplied to files:
src/components/TopMenuSection.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.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 APIApplied to files:
src/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/info/TabInfo.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 stringsApplied to files:
src/components/TopMenuSection.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 APIApplied to files:
src/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.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/**/{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/TopMenuSection.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 stateApplied to files:
src/components/TopMenuSection.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilitiesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/info/TabInfo.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 stylesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.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 propertiesApplied to files:
src/components/graph/GraphCanvas.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/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in storesApplied to files:
src/stores/workspace/rightSidePanelStore.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/**/stores/**/*.{ts,tsx} : Use TypeScript for type safety in state management storesApplied to files:
src/stores/workspace/rightSidePanelStore.ts📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `await settingStore.set('Comfy.SomeSetting', newValue)` to update settings in TypeScript/Vue filesApplied to files:
src/stores/workspace/rightSidePanelStore.ts📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlersApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement responsive design with Tailwind CSSApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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 Vue 3's Teleport component when neededApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{vue,html} : Never use `dark:` or `dark-theme:` Tailwind variants - instead use semantic values from `style.css` theme, e.g. `bg-node-component-surface`Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Vue 3.5 style of default prop declaration with defineProps<T>()Applied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use watch and watchEffect for side effects in Vue 3Applied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/rightSidePanel/info/TabInfo.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 vue 3.5 style of default prop declarationApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.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 : Destructure props using Vue 3.5 style in Vue componentsApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue componentsApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.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 watch and watchEffect for side effectsApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use setup() function for component logic in Vue 3 Composition APIApplied to files:
src/components/rightSidePanel/info/TabInfo.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 logicApplied to files:
src/components/rightSidePanel/info/TabInfo.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 listenersApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issuesApplied to files:
src/components/rightSidePanel/RightSidePanel.vue🪛 ESLint
src/components/rightSidePanel/parameters/SectionWidgets.vue
[error] 10-10: Unable to resolve path to module '../layout/PropertiesAccordionItem.vue'.
(import-x/no-unresolved)
src/components/TopMenuSection.vue
[error] 65-65: Unable to resolve path to module 'pinia'.
(import-x/no-unresolved)
src/components/graph/selectionToolbox/InfoButton.vue
[error] 17-17: Unable to resolve path to module 'primevue/button'.
(import-x/no-unresolved)
[error] 19-19: Unable to resolve path to module '@/platform/telemetry'.
(import-x/no-unresolved)
[error] 20-20: Unable to resolve path to module '@/stores/workspace/rightSidePanelStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/settings/TabSettings.vue
[error] 81-81: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
src/stores/workspace/rightSidePanelStore.ts
[error] 2-2: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
src/components/LiteGraphCanvasSplitterOverlay.vue
[error] 102-102: Unable to resolve path to module '@comfyorg/tailwind-utils'.
(import-x/no-unresolved)
[error] 103-103: Unable to resolve path to module 'pinia'.
(import-x/no-unresolved)
[error] 112-112: Unable to resolve path to module '@/stores/workspaceStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/layout/SidePanelSearch.vue
[error] 6-6: Unable to resolve path to module '@/utils/tailwindUtil'.
(import-x/no-unresolved)
src/components/rightSidePanel/info/TabInfo.vue
[error] 2-2: Unable to resolve path to module '@vueuse/core'.
(import-x/no-unresolved)
[error] 3-3: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
[error] 5-5: Unable to resolve path to module '@/components/node/NodeHelpContent.vue'.
(import-x/no-unresolved)
[error] 7-7: Unable to resolve path to module '@/stores/nodeDefStore'.
(import-x/no-unresolved)
[error] 8-8: Unable to resolve path to module '@/stores/workspace/nodeHelpStore'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: merge-reports
🔇 Additional comments (30)
src/components/graph/GraphCanvas.vue (1)
46-49: LGTM! Minimap now independent of UI visibility.The minimap now renders based solely on readiness and its own setting, decoupling it from
showUI. This allows the minimap to remain visible in focus mode, treating it as a canvas tool rather than UI chrome. The user retains control via theComfy.Minimap.Visiblesetting.src/components/MenuHamburger.vue (1)
4-4: Confirmz-9999Tailwind utility and stacking behaviorSwitching from a custom class to pure utility classes looks good and matches the “Tailwind-only, no custom CSS” guideline. Please double-check that
z-9999is actually defined in your Tailwind/theme config (or intentionally mapped) and that this z-index fits the global overlay stacking order so the hamburger neither hides under nor unintentionally sits above other high-priority overlays.As per coding guidelines, using Tailwind utilities instead of custom CSS is preferred.
src/components/rightSidePanel/layout/SidePanelSearch.vue (5)
25-25: LGTM!Using
toRef(props, 'updateKey')is cleaner and more idiomatic than the previous conditional function handling approach.
27-44: LGTM!The watcher implementation correctly handles cleanup to prevent memory leaks, and the
voidoperator properly addresses the floating promise. Thefinallyblock ensuresisQueryingis reset even if thesearcherfunction throws.
47-74: LGTM!Template changes follow coding guidelines:
- Uses semantic design tokens (e.g.,
bg-secondary-background) withoutdark:variants- Uses
cn()utility for class merging- Implements i18n for the placeholder text
- Dynamic icon rendering provides good visual feedback during search
19-21: Verify performance impact of reduced debounce timing.The debounce delay was reduced from 700ms to 100ms (a 7x reduction). While this improves responsiveness, it may cause significantly more frequent calls to the
searcherfunction. Ifsearcherperforms network requests or expensive operations, this could impact performance or overload the backend.Consider testing the impact with rapid typing, or adjust the debounce value based on the cost of the
searcheroperation. Alternatively, implement request cancellation in thesearcherfunction to handle rapid successive calls efficiently.
8-14: Props refactoring follows Vue 3.5 style.The change from
withDefaultsto direct destructuring with inline defaults is clean and follows the coding guidelines. TheupdateKeytype change toMaybeRefOrGetter<unknown>is more flexible and idiomatic. Existing usages are compatible:TabParameters.vuepasses aComputedRefwhich is fully supported byMaybeRefOrGetter, andSubgraphEditor.vuerelies on the default value. The component correctly usestoRefto convert the prop to a reactive reference, enabling proper reactivity in the watcher.src/components/rightSidePanel/settings/TabSettings.vue (2)
128-136: LGTM - isPinned multi-node logic is sound.The getter using
some()(any pinned → true) and setter applying to all nodes provides intuitive multi-select behavior. The asymmetry is appropriate for bulk operations.
175-209: LGTM - nodeColor multi-node handling is well-implemented.Good defensive check for empty array on line 177, and clean use of
falseas sentinel value to distinguish "mixed colors" from "no color". The iteration in the setter correctly applies to all nodes.src/locales/en/main.json (2)
2255-2268: LGTM - Locale updates follow vue-i18n conventions.The pluralization syntax using pipe separators is correct for vue-i18n's
$twith count parameter. The three forms handle zero, singular, and plural cases appropriately.
2258-2258: Removed locale keys are safely unused.Verification confirms that the removed keys (
multipleSelection,nodeType,nodeId,description,properties,settings) fromrightSidePanelare not referenced anywhere in the codebase. The removal is safe and will not cause runtime translation failures.src/components/graph/selectionToolbox/InfoButton.vue (1)
20-31: LGTM - Clean migration to store-based panel management.The refactor from
useSelectionState().toggleHelp()torightSidePanelStore.openPanel('info')properly centralizes panel state in the Pinia store, aligning with the PR's architecture changes.src/components/rightSidePanel/parameters/SectionWidgets.vue (1)
10-10: LGTM - Component wrapper updated to PropertiesAccordionItem.The swap from
RightPanelSectiontoPropertiesAccordionItemmaintains the same slot interface (#labeland default content). This aligns with the broader panel layout refactoring in this PR.Also applies to: 37-37, 69-69
src/components/rightSidePanel/parameters/TabParameters.vue (3)
10-12: Props destructuring note.Destructuring
nodesfromdefinePropsworks correctly here sincenodesis an array (reference type). The component will react to changes in the array reference passed by the parent. However, if the parent mutates the array in-place rather than replacing it, the computed properties won't re-trigger.
20-31: LGTM - Data structure refactoring is clean.The nested structure
{ node, widgets: [...] }improves data organization for multi-node support. The destructuring with defaultwidgets = []handles nodes without widgets gracefully.
73-83: LGTM - Section rendering with conditional collapse.The
defaultCollapselogic using reference equality (===) is intentional - when the search query is empty,searchedWidgetsSectionDataListis assigned the same reference aswidgetsSectionDataList(line 42), making them equal. This ensures sections are collapsed by default only when there are multiple nodes and no active search filter.src/components/TopMenuSection.vue (1)
65-65: LGTM! Clean store integration withstoreToRefs.Using
storeToRefsto destructure reactive state from the Pinia store is the correct pattern for maintaining reactivity. The direct invocation ofrightSidePanelStore.togglePanel(line 51) is cleaner than the previous local wrapper function.Also applies to: 98-98
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue (1)
39-43: LGTM! Chevron icon and rotation changes.The switch from
chevron-downwithrotate-90tochevron-upwith-rotate-180provides the same visual behavior with cleaner semantics. Usingcn()for class merging follows the coding guidelines.src/components/rightSidePanel/info/TabInfo.vue (2)
23-29: Good use ofwheneverfrom VueUse.Replacing
watchwithwheneveris a cleaner pattern when you only want to react to truthy values. This aligns with the coding guideline to leverage VueUse composables.
10-13: The parent component (RightSidePanel.vue) guarantees a non-emptynodesarray before renderingTabInfo. The 'info' tab is only added to the available tabs whenisSingleNodeSelectedistrue(lines 74-82), which meansselectedNodes.length === 1. Combined with thewatchEffectvalidation (lines 87-90) that ensures the active tab is always in the valid tabs list, accessingnodes[0]is safe. The template'sv-if="nodeInfo"guard (line 33 of TabInfo.vue) provides additional defensive coverage. No change is needed.Likely an incorrect or invalid review comment.
src/stores/workspace/rightSidePanelStore.ts (3)
4-4: Good addition of typed tab union.Exporting
RightSidePanelTabtype provides type safety for components that need to reference tab values, aligning with the guideline to maintain clear public interfaces in stores.
13-13: Clean refactor: derivingisEditingSubgraphfromactiveTab.Computing
isEditingSubgraphfromactiveTabinstead of maintaining separate state is the right approach - it follows the principle of deriving state rather than duplicating it, reducing the risk of state synchronization bugs.
15-20: SimplifiedopenPanelfunction.The simplified signature
openPanel(tab?: RightSidePanelTab)with direct tab assignment is cleaner than the previous subgraph-specific branching logic. The optional parameter provides flexibility while keeping the API minimal.src/components/LiteGraphCanvasSplitterOverlay.vue (3)
48-53: Good use ofcn()for conditional class merging.Using
cn()from@comfyorg/tailwind-utilsfor merging classes with the conditionalhiddenclass follows the coding guideline to never use:class="[]"for class merging.
126-132: Clean store integration withstoreToRefs.Good use of
storeToRefsto destructure reactive state from multiple stores while maintaining reactivity. The renamed destructuring (isOpen: rightSidePanelVisible) provides clearer naming in the component context.
134-139: SimplifiedsidebarStateKeylogic.The refactored computed property is more readable with clear ternary logic. Using nullish coalescing (
??) for the fallback to'default-sidebar'is appropriate.src/components/rightSidePanel/RightSidePanel.vue (4)
1-27: LGTM!Imports are well-organized, store refs are properly destructured using
storeToRefs, and the type import forRightSidePanelTabis correctly separated from the runtime import.
29-52: LGTM!The computed property chain is well-structured. The
instanceof SubgraphNodecheck at line 36 is safe even whenselectedNode.valueis null (returnsfalse), and the panel title correctly falls back to an i18n key with a count for multi-selection scenarios.
58-84: LGTM!The typed tab list and the computed logic for conditionally including the info tab are well-structured. Using arrow functions for labels ensures i18n translations remain reactive.
158-181: LGTM!The content rendering logic correctly handles the three states: no selection, subgraph editing mode, and normal tab display. The conditional chain ensures
selectedNodeis guaranteed to be aSubgraphNodewhen passed toSubgraphEditor.
DrJKL
force-pushed
the
drjkl/cleanup/sidebar
branch
from
1b80448 to
ef73441
Compare
DrJKL
requested review from
a team,
KarryCharon,
Myestery,
Yorha4D and
shinshin86
as code owners
dosubot
bot
added
the
size:L
DrJKL
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/rightSidePanel/RightSidePanel.vue (1)
106-127: Reduce duplicated background classes on the subgraph toggle IconButtonThe first
IconButtoncurrently sets background/hover colors both statically and viacn, which is redundant. You can simplify by leaving text color static and moving all background variants into the computed classes.- <IconButton - v-if="isSubgraphNode" - type="transparent" - size="sm" - class="bg-secondary-background hover:bg-secondary-background-hover text-base-foreground" - :class=" - cn( - 'bg-secondary-background hover:bg-secondary-background-hover', - isEditingSubgraph - ? 'bg-secondary-background-selected' - : 'bg-secondary-background' - ) - " + <IconButton + v-if="isSubgraphNode" + type="transparent" + size="sm" + class="text-base-foreground" + :class=" + cn( + 'bg-secondary-background hover:bg-secondary-background-hover', + isEditingSubgraph + ? 'bg-secondary-background-selected' + : 'bg-secondary-background' + ) + "As per coding guidelines, this keeps class merging centralized through
cnwhile avoiding duplication.Also applies to: 129-137
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/graph/GraphCanvas.vue(1 hunks)src/components/rightSidePanel/RightSidePanel.vue(6 hunks)src/components/rightSidePanel/layout/PropertiesAccordionItem.vue(1 hunks)src/components/rightSidePanel/settings/TabSettings.vue(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
🧰 Additional context used
📓 Path-based instructions (15)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/graph/GraphCanvas.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue🧠 Learnings (14)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Source code should be organized in `src/` directory with key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`📚 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 propertiesApplied to files:
src/components/graph/GraphCanvas.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 panelsApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/components/rightSidePanel/settings/TabSettings.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 stateApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilitiesApplied to files:
src/components/rightSidePanel/settings/TabSettings.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 Steps component with Stepper without panelsApplied to files:
src/components/rightSidePanel/settings/TabSettings.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 stylesApplied to files:
src/components/rightSidePanel/settings/TabSettings.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 APIApplied to files:
src/components/rightSidePanel/settings/TabSettings.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issuesApplied to files:
src/components/rightSidePanel/RightSidePanel.vue🪛 ESLint
src/components/rightSidePanel/settings/TabSettings.vue
[error] 81-81: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (10)
- GitHub Check: playwright-tests-chromium-sharded (7, 8)
- GitHub Check: playwright-tests-chromium-sharded (8, 8)
- GitHub Check: playwright-tests-chromium-sharded (6, 8)
- GitHub Check: playwright-tests-chromium-sharded (5, 8)
- GitHub Check: playwright-tests-chromium-sharded (4, 8)
- GitHub Check: playwright-tests-chromium-sharded (2, 8)
- GitHub Check: playwright-tests-chromium-sharded (3, 8)
- GitHub Check: playwright-tests-chromium-sharded (1, 8)
- GitHub Check: playwright-tests (mobile-chrome)
- GitHub Check: playwright-tests (chromium-2x)
🔇 Additional comments (5)
src/components/graph/GraphCanvas.vue (1)
45-49: MiniMap now shows even in focus mode — confirm UX intentSwitching the
MiniMapcondition tocomfyAppReady && minimapEnabled && betaMenuEnabledmeans it will still render whenfocusModeis active (since it no longer depends onshowUI), as long as the minimap and new menu are enabled. This seems reasonable to keep navigation available while panels are hidden, but please confirm that the desired behavior is to show the minimap in focus mode as well.src/components/rightSidePanel/settings/TabSettings.vue (2)
2-76: Template styling updates and color picker behavior look consistentThe updated container/label styling and the color picker button classes correctly use the project’s semantic Tailwind tokens and keep hit targets and focus areas intact. No functional issues from these template changes.
93-137: Multi-node state derivation for mode, pin, and color is soundThe
nodesprop with a default empty array, plus the new computednodeState,isPinned, andnodeColorall correctly handle 0, 1, and many-node selections (including mixed-state cases) and consistently mark the canvas dirty after mutations. This addresses the earlier empty-array edge case while aligning with the multi-node UX in the rest of the right-side panel.Also applies to: 176-210
src/components/rightSidePanel/RightSidePanel.vue (2)
13-14: Typed tab model and activeTab guard correctly handle new 'subgraph' flowUsing
RightSidePanelTabplus theRightSidePanelTabListalias makes the tab config type-safe, and thetabscomputed correctly includes the info tab only when it’s actually relevant. ThewatchEffectthat falls back to the first tab whenactiveTabis invalid—but still allows'subgraph'when on a subgraph node—keeps global tab state coherent with the current selection and edit mode.Also applies to: 31-52, 58-85, 86-94
98-105: Selection gating and subgraph editor routing are coherent with multi-node propsThe header + nav layout,
hasSelection-gated TabList,noSelectionmessage, and theSubgraphEditorbranch (isSubgraphNode && isEditingSubgraph) all line up with the newselectedNodesflow. Passing:nodes="selectedNodes"down toTabParameters,TabInfo, andTabSettingsensures all tabs consume the same multi-node context derived from the canvas store.Also applies to: 140-159, 162-182
github-actions
bot
removed
the
New Browser Test Expectations
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
browser_tests/tests/nodeHelp.spec.ts (2)
98-100: Update selector for consistency.This test still uses the old
.sidebar-content-containerselector, while all other tests in this file have been updated to[data-testid="properties-panel"]. This inconsistency could lead to test failures if the component structure has changed.Apply this diff to align with the selector updates in other tests:
- const helpPage = comfyPage.page.locator('.sidebar-content-container') + const helpPage = comfyPage.page.locator( + '[data-testid="properties-panel"]' + )As per coding guidelines: "Prefer specific selectors in browser tests"
127-128: Update selector for consistency.This test also uses the old
.sidebar-content-containerselector instead of the updated[data-testid="properties-panel"]. This creates inconsistency with the rest of the test suite.Apply this diff to align with the selector updates:
- const helpPage = comfyPage.page.locator('.sidebar-content-container') + const helpPage = comfyPage.page.locator( + '[data-testid="properties-panel"]' + )As per coding guidelines: "Prefer specific selectors in browser tests"
🧹 Nitpick comments (2)
src/components/rightSidePanel/RightSidePanel.vue (2)
47-52: Hardcoded string 'Node' should be internationalized.The fallback
'Node'string on line 49 should uset()for consistency with i18n requirements.const panelTitle = computed(() => { if (isSingleNodeSelected.value && selectedNode.value) { - return selectedNode.value.title || selectedNode.value.type || 'Node' + return selectedNode.value.title || selectedNode.value.type || t('g.node') } return t('rightSidePanel.title', { count: selectionCount.value }) })Ensure
g.node(or similar key) exists insrc/locales/en/main.json. As per coding guidelines, use vue-i18n for all user-facing strings.
169-169: Inconsistent i18n function usage.This line uses
$t()while the rest of the component usest()fromuseI18n(). Consider usingt()for consistency.- {{ $t('rightSidePanel.noSelection') }} + {{ t('rightSidePanel.noSelection') }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (21)
browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.pngis excluded by!**/*.pngbrowser_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/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 (2)
browser_tests/tests/nodeHelp.spec.ts(10 hunks)src/components/rightSidePanel/RightSidePanel.vue(5 hunks)
🧰 Additional context used
📓 Path-based instructions (21)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
browser_tests/tests/nodeHelp.spec.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
browser_tests/tests/nodeHelp.spec.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
browser_tests/tests/nodeHelp.spec.ts
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (browser_tests/CLAUDE.md)
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}: Test user workflows in browser tests
Use Playwright fixtures for browser tests
Follow naming conventions for browser tests
Check assets/ directory for test data when writing tests
Prefer specific selectors in browser tests
Test across multiple viewports
Files:
browser_tests/tests/nodeHelp.spec.ts
**/*.{test,spec}.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Unit and component tests should be located in
tests-ui/or co-located with components assrc/components/**/*.{test,spec}.ts; E2E tests should be inbrowser_tests/
Files:
browser_tests/tests/nodeHelp.spec.ts
browser_tests/**/*.{test,spec}.ts
📄 CodeRabbit inference engine (AGENTS.md)
Playwright E2E tests can use optional tags like
@mobileand@2xwhich are respected by the Playwright configuration
Files:
browser_tests/tests/nodeHelp.spec.ts
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/RightSidePanel.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/rightSidePanel/RightSidePanel.vue🧠 Learnings (13)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Source code should be organized in `src/` directory with key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`📚 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 testsApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new featuresApplied to files:
browser_tests/tests/nodeHelp.spec.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 testsApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
browser_tests/tests/nodeHelp.spec.tssrc/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebaseApplied to files:
browser_tests/tests/nodeHelp.spec.ts📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to browser_tests/**/*.{test,spec}.ts : Playwright E2E tests can use optional tags like `mobile` and `2x` which are respected by the Playwright configurationApplied to files:
browser_tests/tests/nodeHelp.spec.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} : Use Playwright fixtures for browser testsApplied to files:
browser_tests/tests/nodeHelp.spec.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 testsApplied to files:
browser_tests/tests/nodeHelp.spec.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} : Check assets/ directory for test data when writing testsApplied to files:
browser_tests/tests/nodeHelp.spec.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 utilitiesApplied to files:
browser_tests/tests/nodeHelp.spec.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 TabMenu component with Tabs without panelsApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issuesApplied to files:
src/components/rightSidePanel/RightSidePanel.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). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: test
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (1)
browser_tests/tests/nodeHelp.spec.ts (1)
61-63: LGTM! More stable selector.The change from
.sidebar-content-containerto[data-testid="properties-panel"]provides a more specific, stable selector that is less likely to break with DOM structure changes.As per coding guidelines: "Prefer specific selectors in browser tests"
DrJKL
force-pushed
the
drjkl/cleanup/sidebar
branch
from
f9483c9 to
50c76d9
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/components/rightSidePanel/RightSidePanel.vue (1)
143-149: Past review comment remains unaddressed.The redundant two-way binding with
v-modeland@update:model-valuenoted in the previous review has not been resolved. Thev-modeldirectly updatesactiveTabviastoreToRefs, while the handler also callsrightSidePanelStore.openPanel(), causing double updates.As previously suggested, remove the redundant binding:
<TabList - v-model="activeTab" + :model-value="activeTab" @update:model-value=" (newTab) => { rightSidePanelStore.openPanel(newTab as RightSidePanelTab) } " >
🧹 Nitpick comments (2)
src/components/LiteGraphCanvasSplitterOverlay.vue (1)
3-3: Review z-index value: z-999 is very high.The
z-999class places this overlay at an extremely high z-index. Ensure this doesn't conflict with other overlays, modals, or tooltips in the application. Consider using a semantic z-index value from your design system.Verify the z-index hierarchy:
#!/bin/bash # Find other high z-index values in the codebase rg -n "z-\[?\d{3,}" --type vue --type css -C 2src/components/rightSidePanel/settings/TabSettings.vue (1)
176-210: Prefer strict equality.The multi-node color aggregation logic is correct. However, line 187 uses loose equality (
==) for the null check.Apply this diff to use strict equality:
- if (colorOption == null || (!colorOption.bgcolor && !colorOption.color)) + if (colorOption === null || colorOption === undefined || (!colorOption.bgcolor && !colorOption.color))Or if checking for both null and undefined is intentional:
- if (colorOption == null || (!colorOption.bgcolor && !colorOption.color)) + if (colorOption == null || (!colorOption.bgcolor && !colorOption.color)) // intentionally checks null and undefined
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (21)
browser_tests/tests/domWidget.spec.ts-snapshots/focus-mode-on-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/rerouteNode.spec.ts-snapshots/reroute-inserted-chromium-linux.pngis excluded by!**/*.pngbrowser_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/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 (15)
browser_tests/tests/nodeHelp.spec.ts(10 hunks)src/components/LiteGraphCanvasSplitterOverlay.vue(8 hunks)src/components/MenuHamburger.vue(1 hunks)src/components/TopMenuSection.vue(4 hunks)src/components/graph/GraphCanvas.vue(1 hunks)src/components/graph/selectionToolbox/InfoButton.vue(2 hunks)src/components/rightSidePanel/RightSidePanel.vue(5 hunks)src/components/rightSidePanel/info/TabInfo.vue(2 hunks)src/components/rightSidePanel/layout/PropertiesAccordionItem.vue(1 hunks)src/components/rightSidePanel/layout/SidePanelSearch.vue(3 hunks)src/components/rightSidePanel/parameters/SectionWidgets.vue(3 hunks)src/components/rightSidePanel/parameters/TabParameters.vue(2 hunks)src/components/rightSidePanel/settings/TabSettings.vue(8 hunks)src/locales/en/main.json(1 hunks)src/stores/workspace/rightSidePanelStore.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- browser_tests/tests/nodeHelp.spec.ts
- src/components/graph/GraphCanvas.vue
- src/locales/en/main.json
🧰 Additional context used
📓 Path-based instructions (20)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/graph/selectionToolbox/InfoButton.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/stores/workspace/rightSidePanelStore.ts**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issueFiles:
src/stores/workspace/rightSidePanelStore.tssrc/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyFiles:
src/stores/workspace/rightSidePanelStore.ts**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configurationFiles:
src/stores/workspace/rightSidePanelStore.tssrc/**/stores/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/stores/**/*.{ts,tsx}: Maintain clear public interfaces and restrict extension access in stores
Use TypeScript for type safety in state management storesFiles:
src/stores/workspace/rightSidePanelStore.ts🧠 Learnings (45)
📓 Common learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Source code should be organized in `src/` directory with key areas: `components/`, `views/`, `stores/` (Pinia), `composables/`, `services/`, `utils/`, `assets/`, `locales/`📚 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 DrawerApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.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 PopoverApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.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 Steps component with Stepper without panelsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.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 panelsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/MenuHamburger.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/parameters/TabParameters.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.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 Dropdown component with SelectApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.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 InlineMessage component with MessageApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/TopMenuSection.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/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.vue : Name Vue components in PascalCase (e.g., `MenuHamburger.vue`)Applied to files:
src/components/MenuHamburger.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement responsive design with Tailwind CSSApplied to files:
src/components/MenuHamburger.vuesrc/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Tailwind CSS for styling Vue componentsApplied to files:
src/components/MenuHamburger.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 stylingApplied to files:
src/components/MenuHamburger.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/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in storesApplied to files:
src/stores/workspace/rightSidePanelStore.ts📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue filesApplied to files:
src/stores/workspace/rightSidePanelStore.tssrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.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 APIApplied to files:
src/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `await settingStore.set('Comfy.SomeSetting', newValue)` to update settings in TypeScript/Vue filesApplied to files:
src/stores/workspace/rightSidePanelStore.ts📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive stateApplied to files:
src/stores/workspace/rightSidePanelStore.tssrc/components/rightSidePanel/settings/TabSettings.vuesrc/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/RightSidePanel.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.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 vue 3.5 style of default prop declarationApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.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 : Define proper props and emits definitions in Vue componentsApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue componentsApplied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Vue 3.5 style of default prop declaration with defineProps<T>()Applied to files:
src/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilitiesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.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 stylesApplied to files:
src/components/rightSidePanel/settings/TabSettings.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Prefer emit/event-name for state changes over other communication patternsApplied to files:
src/components/TopMenuSection.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonApplied to files:
src/components/TopMenuSection.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.jsonApplied to files:
src/components/TopMenuSection.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 stringsApplied to files:
src/components/TopMenuSection.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 APIApplied to files:
src/components/TopMenuSection.vuesrc/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.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/**/{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/TopMenuSection.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 handlersApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/rightSidePanel/info/TabInfo.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 Vue 3's Teleport component when neededApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{vue,html} : Never use `dark:` or `dark-theme:` Tailwind variants - instead use semantic values from `style.css` theme, e.g. `bg-node-component-surface`Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issuesApplied to files:
src/components/rightSidePanel/RightSidePanel.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 watch and watchEffect for side effectsApplied to files:
src/components/rightSidePanel/info/TabInfo.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use watch and watchEffect for side effects in Vue 3Applied to files:
src/components/rightSidePanel/info/TabInfo.vuesrc/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use setup() function for component logic in Vue 3 Composition APIApplied to files:
src/components/rightSidePanel/info/TabInfo.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 logicApplied to files:
src/components/rightSidePanel/info/TabInfo.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 listenersApplied to files:
src/components/rightSidePanel/info/TabInfo.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 : Destructure props using Vue 3.5 style in Vue componentsApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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 proper props and emits definitionsApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vue🪛 ESLint
src/components/rightSidePanel/parameters/SectionWidgets.vue
[error] 10-10: Unable to resolve path to module '../layout/PropertiesAccordionItem.vue'.
(import-x/no-unresolved)
src/stores/workspace/rightSidePanelStore.ts
[error] 2-2: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
src/components/graph/selectionToolbox/InfoButton.vue
[error] 17-17: Unable to resolve path to module 'primevue/button'.
(import-x/no-unresolved)
[error] 19-19: Unable to resolve path to module '@/platform/telemetry'.
(import-x/no-unresolved)
[error] 20-20: Unable to resolve path to module '@/stores/workspace/rightSidePanelStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/settings/TabSettings.vue
[error] 81-81: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
src/components/TopMenuSection.vue
[error] 65-65: Unable to resolve path to module 'pinia'.
(import-x/no-unresolved)
src/components/LiteGraphCanvasSplitterOverlay.vue
[error] 102-102: Unable to resolve path to module '@comfyorg/tailwind-utils'.
(import-x/no-unresolved)
[error] 103-103: Unable to resolve path to module 'pinia'.
(import-x/no-unresolved)
[error] 112-112: Unable to resolve path to module '@/stores/workspaceStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/info/TabInfo.vue
[error] 2-2: Unable to resolve path to module '@vueuse/core'.
(import-x/no-unresolved)
[error] 3-3: Unable to resolve path to module 'vue'.
(import-x/no-unresolved)
[error] 5-5: Unable to resolve path to module '@/components/node/NodeHelpContent.vue'.
(import-x/no-unresolved)
[error] 7-7: Unable to resolve path to module '@/stores/nodeDefStore'.
(import-x/no-unresolved)
[error] 8-8: Unable to resolve path to module '@/stores/workspace/nodeHelpStore'.
(import-x/no-unresolved)
src/components/rightSidePanel/layout/SidePanelSearch.vue
[error] 6-6: Unable to resolve path to module '@/utils/tailwindUtil'.
(import-x/no-unresolved)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (30)
src/components/MenuHamburger.vue (1)
2-5: Tailwind-only styling migration on container looks goodSwitching from the
.comfy-menu-hamburgerscoped style to inline Tailwind utilities on the root div (fixed z-9999 flex flex-row no-drag top-0 right-0) aligns with the “Tailwind CSS only in components, no custom CSS” guideline and avoids extra scoped rules. Just make sure the new explicitz-9999still plays nicely with other overlays/modals in the app’s stacking order, but otherwise this change looks solid.Based on learnings, this matches the project’s preference for Tailwind utilities in
src/components/**/*.vue.src/components/rightSidePanel/layout/PropertiesAccordionItem.vue (2)
4-4: LGTM: Clean v-model pattern with defineModel.The use of
defineModelfor the collapse state is idiomatic Vue 3.5 and simplifies the component API by enabling two-way binding.
17-17: Remove this comment — no breaking change exists.The component only supports label via
<slot name="label" />and has never had a label prop. The single consumer (SectionWidgets.vue) already correctly provides labels through the slot mechanism using<template #label>. No verification needed.Likely an incorrect or invalid review comment.
src/stores/workspace/rightSidePanelStore.ts (3)
4-4: LGTM: Type-safe tab definitions.The
RightSidePanelTabunion type provides clear documentation of available tabs and enables type-safe tab navigation throughout the codebase.
15-20: Simplified API: openPanel signature is cleaner.The updated signature makes the tab parameter optional and removes the special subgraph handling. This simplification aligns well with the computed
isEditingSubgraphapproach.
13-13: No action needed. All usages ofisEditingSubgraphare read-only—it's only accessed in conditional expressions, template directives, and ternary logic within RightSidePanel.vue. No direct assignments to this computed property exist in the codebase.src/components/TopMenuSection.vue (2)
65-65: LGTM: Correct use of storeToRefs for reactive state.Using
storeToRefsproperly extracts reactive references from the store while maintaining reactivity. This is the recommended pattern for accessing Pinia store state in components.Also applies to: 98-98
51-51: LGTM: Simplified panel toggle logic.Directly calling
rightSidePanelStore.togglePanel()is cleaner than the previous approach and aligns with store-driven state management.src/components/LiteGraphCanvasSplitterOverlay.vue (4)
19-19: LGTM: Stable splitter key prevents unnecessary re-renders.Using a fixed key
"main-splitter-stable"eliminates unnecessary component re-initialization and preserves splitter state across updates.
25-25: LGTM: Consistent focusMode gating across panels.The
focusModecheck consistently hides all panels (left sidebar, bottom panel, and right panel) when focus mode is active, providing a clean canvas-only view.Also applies to: 61-61, 89-89
102-103: LGTM: Correct imports for utility functions.Importing
cnfrom@comfyorg/tailwind-utilsandstoreToRefsfrom Pinia follows the project's patterns for class name merging and reactive store access.As per coding guidelines, using
cnfor class merging is the correct approach instead of:class="[]".
49-53: Gutter visibility logic is correctly implemented.The
bottomPanelVisiblecomputed property inuseBottomPanelStore()properly derives its state fromactivePanel, which starts asnullon initial load. This ensures the gutter is hidden when no panel is active. The state transitions are handled correctly through the reactive computed property and the store's action methods (togglePanel,toggleBottomPanelTab), which safely manage all scenarios including rapid state changes. The gutter correctly applies thehiddenclass when!bottomPanelVisibleand remains visible when a panel is active.src/components/rightSidePanel/layout/SidePanelSearch.vue (3)
8-14: LGTM: Clean props destructuring with MaybeRefOrGetter.The updated prop signature using
MaybeRefOrGetter<unknown>forupdateKeyprovides better flexibility, allowing consumers to pass refs, getters, or raw values. The destructuring pattern with a default searcher is idiomatic Vue 3.5.
19-21: Verify debounce timing: 100ms is significantly faster.The debounce interval changed from 700ms to 100ms with maxWait also at 100ms. This makes the search much more responsive but could increase the frequency of searcher calls substantially.
Consider the performance implications:
- Will the searcher function handle rapid-fire calls efficiently?
- Is there rate limiting or caching on the backend if this triggers API calls?
- The
maxWait: 100means it will execute at least every 100ms during continuous typing.Would you like me to help test the performance impact of this change?
29-41: LGTM: Proper cleanup handling in watch.The watch callback correctly uses the
onCleanupparameter to handle async operation cancellation, preventing stale results from updating the UI after the search query changes.src/components/graph/selectionToolbox/InfoButton.vue (1)
20-22: LGTM: Clean migration to store-driven panel management.The refactor from
toggleHelp()torightSidePanelStore.openPanel('info')centralizes panel state management in the store, making the component simpler and the state flow more predictable.Also applies to: 31-31
src/components/rightSidePanel/parameters/SectionWidgets.vue (1)
10-10: LGTM: Clean component replacement.Replacing
RightPanelSectionwithPropertiesAccordionItemstandardizes the accordion pattern across the properties panel. The component correctly provides thelabelslot expected by the new wrapper.Also applies to: 37-37, 69-69
src/components/rightSidePanel/info/TabInfo.vue (3)
2-3: LGTM: whenever is cleaner for conditional reactivity.Using
wheneverfrom VueUse is more idiomatic thanwatchfor triggering effects when a value becomes truthy. This simplifies the logic and makes the intent clearer.Based on learnings, VueUse functions should be preferred for common reactive patterns.
Also applies to: 23-29
10-13: LGTM: Clean props destructuring.Destructuring props directly in
definePropsand computing the first node is idiomatic Vue 3.5 and improves code readability.
26-26: No validation needed—the implementation is already safely guarded.The
openHelpmethod directly assigns the parameter to state without validation, but this is not a concern because:
- The
whenever()guard in TabInfo.vue ensuresnodeInfois truthy before invokingopenHelp(). ThefromLGraphNode()method returnsComfyNodeDefImpl | null, butwhenever()only executes the callback when the source value is truthy, preventing null values from reachingopenHelp()- TypeScript enforces the
ComfyNodeDefImpltype on the received parameter, preventing shape mismatches at compile time- The
watchinnodeHelpStoresafely handles the stored value with explicit null checks (if (!node) return '') before accessing propertiesThe code is correctly defended at both the call site (truthy guard via
whenever()) and type level (TypeScript typing).src/components/rightSidePanel/parameters/TabParameters.vue (2)
10-18: LGTM! Excellent type safety improvement.The Vue 3.5 style prop destructuring and explicit type definitions for the nested widget data model improve both type safety and code clarity.
20-31: LGTM! Data model refactor maintains correct behavior.The refactored
widgetsSectionDataListuses a more explicit nested structure while preserving the existing widget filtering logic. The data flow remains correct.src/components/rightSidePanel/settings/TabSettings.vue (4)
2-2: LGTM! Styling consolidation improves consistency.The styling updates consolidate text colors using semantic theme tokens and simplify the class structure without changing functionality.
Also applies to: 5-5, 30-30, 34-34, 42-44, 71-71
81-81: LGTM! Props updated for multi-node support.The props signature correctly migrates to support multiple nodes with proper defaults. The import cleanup removes unused refs.
Note: The ESLint error flagging the 'vue' import is a false positive from the linter configuration.
Also applies to: 93-95
105-126: LGTM! Multi-node state handling is correct.The
nodeStatecomputed properly handles empty arrays, single nodes, and multiple nodes. The aggregation logic correctly returns a common mode or null, and the setter updates all nodes appropriately.
129-137: LGTM! Pinned state properly aggregates across nodes.The
isPinnedcomputed correctly returnstrueif any node is pinned, and the setter applies the value to all nodes.src/components/rightSidePanel/RightSidePanel.vue (4)
13-13: LGTM! Proper type usage and selection state derivation.The import of
RightSidePanelTabaligns with the store refactor, and the computed properties correctly derive selection state for the panel.Also applies to: 29-52
87-94: LGTM! Tab validation correctly handles subgraph editing.The
watchEffectproperly validates thatactiveTabis in the available tabs list, with special handling for the'subgraph'tab when editing subgraph nodes.
98-141: LGTM! Improved semantic structure and consistent styling.The template restructuring uses semantic HTML elements and consistent theme-based styling. The subgraph toggle button properly switches between subgraph and parameters views via the store.
164-186: LGTM! Content rendering properly handles all states.The panel content correctly renders different views based on selection state, subgraph editing mode, and active tab. All tab components properly receive
selectedNodesfor multi-node support.
DrJKL
force-pushed
the
drjkl/cleanup/sidebar
branch
from
6e88d4d to
df4c23e
Compare
dosubot
bot
added
size:XL
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/LiteGraphCanvasSplitterOverlay.vue (1)
69-80: Right sidebar panel still reserves space in focus mode when sidebar is on the right
SplitterPanelfor the sidebar on the right is not gated byfocusMode, so whensidebarLocation === 'right'and focus mode is enabled, the empty panel can still occupy width (sincesidebarPanelVisibleis independent of focus mode). That partially defeats the goal of focus mode.Consider gating the right sidebar panel the same way as the left:
- <SplitterPanel - v-if="sidebarLocation === 'right'" + <SplitterPanel + v-if="sidebarLocation === 'right' && !focusMode"This keeps the canvas truly full-width in focus mode regardless of sidebar side.
Also applies to: 132-139
♻️ Duplicate comments (4)
browser_tests/helpers/actionbar.ts (1)
8-8: ScopepropertiesButtonto the actionbar root for a more specific locatorUsing
page.getByLabel('Toggle properties panel')can match buttons outside this action bar. Prefer scoping viathis.root(likequeueButton) to keep the selector resilient:- this.queueButton = new ComfyQueueButton(this) - this.propertiesButton = page.getByLabel('Toggle properties panel') + this.queueButton = new ComfyQueueButton(this) + this.propertiesButton = this.root.getByLabel('Toggle properties panel')This aligns with the “specific selectors in browser tests” guideline.
Also applies to: 13-13
src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts (1)
201-215: Reduce alias duplication inEXPANDING_TYPESby usinggetCanonicalTypeRight now
EXPANDING_TYPESlists both canonical types and their aliases (e.g.'textarea'/'TEXTAREA','markdown'/'MARKDOWN','progressText','LOAD_3D'), whilecoreWidgetDefinitionsalready encode aliases andgetCanonicalTypenormalizes them. This duplicates mapping and can drift if aliases change.You can let
EXPANDING_TYPEScontain only canonical types and rely ongetCanonicalType:-const EXPANDING_TYPES = [ - 'textarea', - 'TEXTAREA', - 'multiline', - 'customtext', - 'markdown', - 'MARKDOWN', - 'progressText', - 'load3D', - 'LOAD_3D' -] as const - -export function shouldExpand(type: string): boolean { - return EXPANDING_TYPES.includes(type as (typeof EXPANDING_TYPES)[number]) -} +const EXPANDING_TYPES = ['textarea', 'markdown', 'load3D'] as const + +export function shouldExpand(type: string): boolean { + const canonicalType = getCanonicalType(type) + return EXPANDING_TYPES.includes( + canonicalType as (typeof EXPANDING_TYPES)[number] + ) +}This keeps the expanding‑widget list in sync with the registry’s single source of truth.
src/components/rightSidePanel/parameters/SectionWidgets.vue (1)
2-2: Fix inconsistent import path forcnutility.This file imports
cnfrom'@comfyorg/tailwind-utils', but other files in the codebase import from'@/utils/tailwindUtil'. This inconsistency can lead to bundle duplication and maintenance confusion.Apply this diff to align with the codebase standard:
-import { cn } from '@comfyorg/tailwind-utils' +import { cn } from '@/utils/tailwindUtil'browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts (1)
5-16: Make the properties panel test name and selectors more specific.The test name
'complex test'doesn't convey intent and the globalpage.getByTextselectors are brittle.Consider:
- Rename to describe behavior:
'shows multi-node selection summary in properties panel'- Scope assertions to properties panel using a test ID:
+const propertiesPanel = page.getByTestId('properties-panel') -await expect(page.getByText('No node(s) selected')).toBeVisible() +await expect(propertiesPanel.getByText('No node(s) selected')).toBeVisible()Based on learnings, prefer specific selectors and clear naming in browser tests.
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (5)
browser_tests/fixtures/ComfyPage.ts(1 hunks)browser_tests/helpers/actionbar.ts(1 hunks)browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts(1 hunks)src/components/LiteGraphCanvasSplitterOverlay.vue(8 hunks)src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (22)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/helpers/actionbar.tssrc/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tsbrowser_tests/tests/propertiesPanel/propertiesPanel.spec.tssrc/components/LiteGraphCanvasSplitterOverlay.vue
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/helpers/actionbar.tssrc/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tsbrowser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/helpers/actionbar.tssrc/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tsbrowser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/helpers/actionbar.tssrc/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tsbrowser_tests/tests/propertiesPanel/propertiesPanel.spec.tssrc/components/LiteGraphCanvasSplitterOverlay.vue
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/helpers/actionbar.tssrc/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tsbrowser_tests/tests/propertiesPanel/propertiesPanel.spec.tssrc/components/LiteGraphCanvasSplitterOverlay.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/helpers/actionbar.tssrc/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tsbrowser_tests/tests/propertiesPanel/propertiesPanel.spec.tssrc/components/LiteGraphCanvasSplitterOverlay.vue
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/helpers/actionbar.tssrc/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tsbrowser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tssrc/components/LiteGraphCanvasSplitterOverlay.vue
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.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/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tssrc/components/LiteGraphCanvasSplitterOverlay.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.tssrc/components/LiteGraphCanvasSplitterOverlay.vue
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (browser_tests/CLAUDE.md)
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}: Test user workflows in browser tests
Use Playwright fixtures for browser tests
Follow naming conventions for browser tests
Check assets/ directory for test data when writing tests
Prefer specific selectors in browser tests
Test across multiple viewports
Files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
**/*.{test,spec}.{ts,tsx,js}
📄 CodeRabbit inference engine (AGENTS.md)
Unit and component tests should be located in
tests-ui/or co-located with components assrc/components/**/*.{test,spec}.ts; E2E tests should be inbrowser_tests/
Files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
browser_tests/**/*.{test,spec}.ts
📄 CodeRabbit inference engine (AGENTS.md)
Playwright E2E tests can use optional tags like
@mobileand@2xwhich are respected by the Playwright configuration
Files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/LiteGraphCanvasSplitterOverlay.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/LiteGraphCanvasSplitterOverlay.vue🧠 Learnings (47)
📚 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 testsApplied to files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/helpers/actionbar.tsbrowser_tests/tests/propertiesPanel/propertiesPanel.spec.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new featuresApplied to files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/propertiesPanel/propertiesPanel.spec.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/**/*.{ts,tsx,vue} : Implement proper TypeScript types throughout the codebaseApplied to files:
src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.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} : Use Playwright fixtures for browser testsApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to browser_tests/**/*.{test,spec}.ts : Playwright E2E tests can use optional tags like `mobile` and `2x` which are respected by the Playwright configurationApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.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 testsApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: tests-ui/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:48:03.270Z Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebaseApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.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 across multiple viewportsApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.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 testsApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.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 utilitiesApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.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: Check tests-ui/README.md for test guidelinesApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.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:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursor/rules/unit-test.mdc:0-0 Timestamp: 2025-11-24T19:48:09.318Z Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possibleApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.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} : Use `test` instead of `it` for defining test cases in vitestApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Use Vitest (with happy-dom) for unit and component tests, and Playwright for E2E testsApplied to files:
browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with PopoverApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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 Sidebar component with DrawerApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.vue : Never use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'` for class merging in Vue templatesApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-12-04T22:01:48.124Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7137 File: src/components/LiteGraphCanvasSplitterOverlay.vue:2-4 Timestamp: 2025-12-04T22:01:48.124Z 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/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{vue,html} : Never use `dark:` or `dark-theme:` Tailwind variants - instead use semantic values from `style.css` theme, e.g. `bg-node-component-surface`Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-12-04T21:47:07.800Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7137 File: src/components/LiteGraphCanvasSplitterOverlay.vue:43-43 Timestamp: 2025-12-04T21:47:07.800Z Learning: In Vue SFCs with a build step (pre-compilation), kebab-case attribute names in templates are automatically converted to camelCase, so `:sidebar-panel-visible` as a shorthand binding correctly resolves to a variable named `sidebarPanelVisible`. The `.camel` modifier is only needed when using in-DOM templates without a build step.Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-12-03T03:14:48.687Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7121 File: src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue:3-18 Timestamp: 2025-12-03T03:14:48.687Z Learning: Vue 3.4+ supports same-name shorthand syntax for attribute bindings where `:id` is equivalent to `:id="id"` when the attribute name matches the variable name in scope. This is valid syntax and should not be flagged as an error.Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Follow Vue 3 style guide and naming conventionsApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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 : Follow Vue 3 style guide and naming conventionsApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guideApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue componentsApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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 : Define proper props and emits definitions in Vue componentsApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,js,jsx,vue} : Use camelCase for variable and setting names in TypeScript/Vue filesApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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/components/LiteGraphCanvasSplitterOverlay.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 stylingApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement responsive design with Tailwind CSSApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Tailwind CSS for styling Vue componentsApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-12-01T23:41:16.238Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7084 File: src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue:23-26 Timestamp: 2025-12-01T23:41:16.238Z Learning: Tailwind CSS automatically sets `content: ""` for `::before` and `::after` pseudo-elements when using the `before:` and `after:` variants. No explicit `before:content-['']` or `after:content-['']` is needed.Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-12-05T06:11:09.374Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7177 File: src/platform/assets/components/UploadModelFooter.vue:72-78 Timestamp: 2025-12-05T06:11:09.374Z Learning: For the ComfyUI_frontend repository, avoid suggesting comments that would be redundant when the code is already self-explanatory through descriptive naming (e.g., filenames, prop names, aria-labels). The project prefers clean code without unnecessary documentation comments.Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.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/components/LiteGraphCanvasSplitterOverlay.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 panelsApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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 stateApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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 Steps component with Stepper without panelsApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue filesApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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 APIApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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 Vue 3's Teleport component when neededApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.vue📚 Learning: 2025-12-04T21:43:49.343Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7137 File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0 Timestamp: 2025-12-04T21:43:49.343Z Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.Applied to files:
src/components/LiteGraphCanvasSplitterOverlay.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 APIApplied to files:
src/components/LiteGraphCanvasSplitterOverlay.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: lint-and-format
- GitHub Check: test
- GitHub Check: setup
- GitHub Check: collect
🔇 Additional comments (5)
src/components/LiteGraphCanvasSplitterOverlay.vue (2)
2-4: Overlay container and interaction model look correctFull-screen flex container with
pointer-events-noneon the root andpointer-events-autoon interactive children is a good pattern here, and the high z-index utility is valid for this Tailwind v4 setup; no change needed.Based on learnings, the
z-999utility is acceptable in this project.
102-103: Pinia refs and sidebar state key logic look consistentUsing
storeToRefsforfocusMode, sidebar/bottom/right-panel visibility, and computingsidebarPanelVisiblefromactiveSidebarTabis clean and reactive-friendly. The updatedsidebarStateKeythat switches between a unified key and per-tab keys (with adefault-sidebarfallback) should give predictable splitter persistence across configurations.Also applies to: 112-133, 135-138
browser_tests/helpers/actionbar.ts (1)
8-13: LGTM! Properties button is correctly scoped.The
propertiesButtonlocator is properly scoped tothis.root, which makes it specific to the actionbar instance and aligns with the previous review feedback. The label selector is appropriate for accessibility-based targeting.browser_tests/fixtures/ComfyPage.ts (1)
36-43: LGTM! Clean addition of properties panel locator.The properties panel locator uses
getByTestId, which is the recommended approach for stable, specific selectors in browser tests. This follows the existing patterns in theComfyMenuclass.browser_tests/tests/propertiesPanel/propertiesPanel.spec.ts (1)
17-17: Clarify or remove the incomplete Vue mode comment.The comment
// Will be 2 in Vue modesuggests this is a known limitation or work in progress. This creates confusion for future maintainers.Either:
- File a TODO/issue to track the Vue mode behavior and reference it in the comment
- Remove the comment if this is the expected behavior
- Update the test to handle both modes if that's feasible
What is the intended behavior difference between the current mode and Vue mode? Should this test be updated to cover both scenarios?
DrJKL
added
the
New Browser Test Expectations
github-actions
bot
removed
the
New Browser Test Expectations
dosubot
bot
added
size:L
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/components/rightSidePanel/RightSidePanel.vue (1)
87-95: Consider guarding against empty tabs array.While
tabscurrently always includes at leastparametersandsettings, accessingtabs.value[0].valuewithout checking array length could fail if future refactoring filters out all tabs. A small guard would future-proof this logic:watchEffect(() => { + if (tabs.value.length === 0) return + if ( !tabs.value.some((tab) => tab.value === activeTab.value) && !(activeTab.value === 'subgraph' && isSubgraphNode.value) ) { rightSidePanelStore.openPanel(tabs.value[0].value) } })Based on learnings, this mirrors a previous nitpick suggestion to add defensive checks.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (6)
browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-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/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/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 (1)
src/components/rightSidePanel/RightSidePanel.vue(4 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/rightSidePanel/RightSidePanel.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/rightSidePanel/RightSidePanel.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/rightSidePanel/RightSidePanel.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/rightSidePanel/RightSidePanel.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/rightSidePanel/RightSidePanel.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/rightSidePanel/RightSidePanel.vue🧠 Learnings (12)
📚 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 panelsApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-12-04T21:47:07.800Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7137 File: src/components/LiteGraphCanvasSplitterOverlay.vue:43-43 Timestamp: 2025-12-04T21:47:07.800Z Learning: In Vue SFCs with a build step (pre-compilation), kebab-case attribute names in templates are automatically converted to camelCase, so `:sidebar-panel-visible` as a shorthand binding correctly resolves to a variable named `sidebarPanelVisible`. The `.camel` modifier is only needed when using in-DOM templates without a build step.Applied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use watch and watchEffect for side effects in Vue 3Applied to files:
src/components/rightSidePanel/RightSidePanel.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 watch and watchEffect for side effectsApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue filesApplied to files:
src/components/rightSidePanel/RightSidePanel.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 stateApplied to files:
src/components/rightSidePanel/RightSidePanel.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 APIApplied to files:
src/components/rightSidePanel/RightSidePanel.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 APIApplied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-12-04T21:43:49.343Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7137 File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0 Timestamp: 2025-12-04T21:43:49.343Z Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.Applied to files:
src/components/rightSidePanel/RightSidePanel.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use setup() function for component logic in Vue 3 Composition APIApplied to files:
src/components/rightSidePanel/RightSidePanel.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 logicApplied to files:
src/components/rightSidePanel/RightSidePanel.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: collect
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
🔇 Additional comments (6)
src/components/rightSidePanel/RightSidePanel.vue (6)
1-28: LGTM!The imports and setup follow Vue 3 Composition API best practices. The addition of
RightSidePanelTabtype import improves type safety, andtoValueis appropriately imported for use in the title editing handler.
97-116: LGTM!The title editing logic correctly compares against
node.title(line 108) rather than the computedpanelTitle, which addresses the previous concern about missing legitimate edits when titles match default labels. The canvas dirty marking (line 111) ensures proper state tracking.
120-123: LGTM!The panel container properly uses semantic CSS values from the theme (
bg-interface-panel-surface) and includesdata-testidfor testing, following project guidelines.
173-191: LGTM!The
TabListcorrectly uses one-way binding with:model-valueand an explicit@update:model-valuehandler (lines 175-180). This ensures a single source of truth through the store, avoiding the double-update issue from earlier feedback.
194-217: LGTM!The panel content rendering uses appropriate conditional logic and semantic CSS values. The i18n usage for the no-selection message (line 200) follows project guidelines, and the component structure cleanly handles all display states.
59-85: All translation keys are properly configured insrc/locales/en/main.json.The tabs computation correctly implements the vue-i18n requirement with all necessary translation keys present:
rightSidePanel.parameters,g.settings, andrightSidePanel.infoare all defined. The typed structure and conditional logic for displaying the info tab are properly implemented.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/components/rightSidePanel/parameters/SectionWidgets.vue (1)
13-13: Use@comfyorg/tailwind-utilsforcninstead of the local shimThis file is still importing
cnfrom the@/utils/tailwindUtilshim, which is being phased out in favor of the@comfyorg/tailwind-utilspackage (see prior discussion on this PR about removing the shim). To avoid new shim usages and keep imports consistent, switch to the package here:-import { cn } from '@/utils/tailwindUtil' +import { cn } from '@comfyorg/tailwind-utils'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue(1 hunks)src/components/rightSidePanel/parameters/SectionWidgets.vue(3 hunks)src/locales/en/main.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.vue🧠 Learnings (21)
📚 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 DrawerApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.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 PopoverApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vuesrc/components/rightSidePanel/layout/PropertiesAccordionItem.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 Steps component with Stepper without panelsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.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 panelsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.vue : Never use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'` for class merging in Vue templatesApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.{vue,css} : Use the correct tokens from style.css in the design system packageApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.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 : Follow Vue 3 style guide and naming conventionsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.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 librariesApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Follow Vue 3 style guide and naming conventionsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.{ts,tsx,js,vue} : Organize imports by sorting and grouping by plugin, and run `pnpm format` before committingApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.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/**/{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/rightSidePanel/parameters/SectionWidgets.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/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guideApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-12-04T21:43:49.343Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7137 File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0 Timestamp: 2025-12-04T21:43:49.343Z Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.Applied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilitiesApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.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 stylesApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue filesApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize provide/inject for dependency injection in Vue 3Applied to files:
src/components/rightSidePanel/parameters/SectionWidgets.vue📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/lib/litegraph/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:56.371Z Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setupApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.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 stringsApplied to files:
src/components/rightSidePanel/parameters/SectionWidgets.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: test
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (3)
src/locales/en/main.json (2)
2269-2271: Localization keys properly integrated into Properties Panel components.All three keys (
inputsNone,inputsNoneTooltip,nodeState) are correctly wired up and actively used via vue-i18n in the rightSidePanel components:
inputsNonereferenced in SectionWidgets.vueinputsNoneTooltipreferenced in PropertiesAccordionItem.vuenodeStatereferenced in TabSettings.vueIntegration is complete and follows vue-i18n conventions.
2260-2260: No action needed. The pipe-separated pluralization format is the standard syntax for vue-i18n and is implemented correctly in your project. The component (RightSidePanel.vue, line 52) properly callst('rightSidePanel.title', { count: selectionCount.value }), which correctly interpolates the{count}placeholder using vue-i18n's built-in pluralization handling.Likely an incorrect or invalid review comment.
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue (1)
2-2: Aligncnimport with@comfyorg/tailwind-utilsinstead of shimThis new component is introducing a fresh dependency on the
@/utils/tailwindUtilshim, while the ongoing migration in this repo is to remove that shim and importcndirectly from@comfyorg/tailwind-utils. To avoid backsliding and keep the migration surface small, wire this directly to the package:-import { cn } from '@/utils/tailwindUtil' +import { cn } from '@comfyorg/tailwind-utils'The rest of the collapse/tooltip logic looks good.
⛔ Skipped due to learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.vue : Never use `:class="[]"` to merge class names - always use `import { cn } from '@/utils/tailwindUtil'` for class merging in Vue templatesLearnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7177 File: src/platform/assets/components/UploadModelFooter.vue:72-78 Timestamp: 2025-12-05T06:11:09.374Z Learning: For the ComfyUI_frontend repository, avoid suggesting comments that would be redundant when the code is already self-explanatory through descriptive naming (e.g., filenames, prop names, aria-labels). The project prefers clean code without unnecessary documentation comments.Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions 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 : Replace PrimeVue OverlayPanel component with PopoverLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyLearnt 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 guideLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)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 componentsLearnt 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 proper props and emits definitionsLearnt 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: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement responsive design with Tailwind CSSLearnt 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 stylingLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Tailwind CSS for styling 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 Tailwind CSS only for styling (no custom CSS)
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/components/rightSidePanel/layout/SidePanelSearch.vue(3 hunks)
🧰 Additional context used
📓 Path-based instructions (15)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/rightSidePanel/layout/SidePanelSearch.vue🧠 Learnings (15)
📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use Vue 3.5 style of default prop declaration with defineProps<T>()Applied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-12-04T21:43:49.343Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7137 File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0 Timestamp: 2025-12-04T21:43:49.343Z Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.Applied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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 : Destructure props using Vue 3.5 style in Vue componentsApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-12-05T08:52:50.780Z
Learnt from: DrJKL Repo: Comfy-Org/ComfyUI_frontend PR: 7137 File: src/components/rightSidePanel/parameters/SectionWidgets.vue:41-49 Timestamp: 2025-12-05T08:52:50.780Z Learning: In Vue 3.4+ SFCs with a build step, kebab-case prop shorthand (e.g., `:is-empty`) automatically resolves to the corresponding camelCase variable in scope (e.g., `isEmpty`). This is valid syntax combining same-name shorthand with automatic kebab-case-to-camelCase conversion and should not be flagged as an error.Applied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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 vue 3.5 style of default prop declarationApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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 stateApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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 proper props and emits definitionsApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guideApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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 APIApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilitiesApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Use watch and watchEffect for side effects in Vue 3Applied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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 APIApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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 stylesApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue filesApplied to files:
src/components/rightSidePanel/layout/SidePanelSearch.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). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: collect
- GitHub Check: lint-and-format
🔇 Additional comments (2)
src/components/rightSidePanel/layout/SidePanelSearch.vue (2)
51-55: Styling and i18n usage in the template look consistent.Using
cn()for class merging, the updated design tokens (bg-secondary-background, focus ring class, etc.), and$t('g.searchPlaceholder')for the placeholder all align with the Tailwind + vue-i18n guidelines. I don’t see any issues in these template changes.Also applies to: 71-72
3-4: The reactive props destructuring with optionalMaybeRefOrGetteris correct as-is.The pattern of destructuring an optional prop as
updateKey?: MaybeRefOrGetter<unknown>and passing it directly totoValue()is correct and aligns with how Vue 3.5 handles optional ref-like props. This exact pattern is already used elsewhere in the codebase (e.g.,ConfirmBody.vue), wherepromptText?: MaybeRefOrGetter<string>is passed directly totoValue()without guards. Vue's type system handles this correctly—toValue()is designed to work with optionalMaybeRefOrGettervalues and safely returns the unwrapped value orundefinedwhen appropriate.Likely an incorrect or invalid review comment.
| const debouncedSearchQuery = refDebounced(searchQuery, 100, { | ||
| maxWait: 100 | ||
| }) | ||
| watch(searchQuery, (value) => { | ||
| isQuerying.value = value !== debouncedSearchQuery.value | ||
| }) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cd src/components/rightSidePanel/layout && wc -l SidePanelSearch.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 92
🏁 Script executed:
cat -n src/components/rightSidePanel/layout/SidePanelSearch.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 2480
🏁 Script executed:
rg -n "catch|error" src/components/rightSidePanel/layout/SidePanelSearch.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 52
🏁 Script executed:
rg -A5 -B5 "searcher" src/components/rightSidePanel/layout/ | head -60Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1966
🏁 Script executed:
rg "Implement proper error handling" . --type md | head -10Repository: Comfy-Org/ComfyUI_frontend
Length of output: 119
Add explicit error handling to searcher promise and improve isQuerying lifecycle tracking.
The current implementation has two related issues:
-
Missing error handler: The
searcherpromise (line 37) only has.finally()and no.catch(), which means errors will surface as unhandled promise rejections. This violates the error handling requirement in the coding guidelines. -
Incomplete loading state:
isQueryingis set true based onsearchQueryvsdebouncedSearchQueryinequality (lines 22–24), but set false only whensearchercompletes. Ifsearchertakes significant time, the spinner may appear to settle before the actual request finishes, providing inaccurate feedback.
Minimal fix for error handling:
- void searcher(debouncedSearchQuery.value, (cb) => (cleanupFn = cb)).finally(
- () => {
- if (!isCleanup) isQuerying.value = false
- }
- )
+ void searcher(debouncedSearchQuery.value, (cb) => (cleanupFn = cb))
+ .catch((error) => {
+ console.error('[SidePanelSearch] searcher failed', error)
+ })
+ .finally(() => {
+ if (!isCleanup) isQuerying.value = false
+ })For better loading state alignment, consider setting isQuerying.value = true immediately before invoking searcher and relying solely on the finally block to reset it, decoupling the spinner from the debounce timing.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/components/rightSidePanel/layout/SidePanelSearch.vue around lines 19 to
24, the debounced watch currently toggles isQuerying by comparing searchQuery
and debouncedSearchQuery and the downstream searcher promise lacks error
handling; change the logic to set isQuerying.value = true immediately before
calling the searcher (remove or stop relying on the searchQuery vs
debouncedSearchQuery inequality to drive loading state) and ensure the searcher
promise has a .catch(...) that routes errors to your logger/error handler, while
keeping the existing .finally(...) to reset isQuerying.value = false so the
spinner reflects the actual request lifecycle.
Summary
Still to-do
┆Issue is synchronized with this Notion page by Unito