Refactor Queue UI: Inline Progress & Cleanups #7230
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds a Playwright QueueList page object and typed WebSocket messages; refactors queue UI by consolidating controls into ComfyActionbar, removing the active overlay path and JobFiltersBar, introducing inline progress components and useCurrentNodeName, simplifying job-list/composable public APIs, and adjusting overlay states and props. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Actionbar as ComfyActionbar
participant Overlay as QueueProgressOverlay
participant Expanded as QueueOverlayExpanded
participant WS as Status WebSocket
participant Store as Queue/Execution Store
User->>Actionbar: click queue toggle
Actionbar->>Overlay: emit update:queueOverlayExpanded(true)
Overlay->>Expanded: render expanded (props: activeJobsCount, orderedTasks)
WS-->>Store: status event (queue state)
Store-->>Overlay: update orderedTasks / groupedJobItems
Overlay->>Expanded: update job list render
User->>Expanded: click close
Expanded->>Overlay: emit close
Overlay->>Actionbar: emit update:queueOverlayExpanded(false)
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/09/2025, 11:40:22 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 12/09/2025, 11:49:02 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.21 MB (baseline 3.21 MB) • 🔴 +673 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 966 kB (baseline 985 kB) • 🟢 -19 kBGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 176 kB (baseline 176 kB) • ⚪ 0 BReusable component library chunks
Status: 9 added / 9 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 3 added / 3 removed Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Status: 5 added / 5 removed Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 BBundles that do not match a named category
Status: 23 added / 23 removed |
benceruleanlu
changed the base branch from
main
to
hotfix/topmenu-cancel-button
DrJKL
force-pushed
the
hotfix/topmenu-cancel-button
branch
from
48ba7fe to
f10f527
Compare
benceruleanlu
changed the title
# Conflicts: # src/components/TopMenuSection.vue # src/components/queue/job/QueueJobItem.vue
benceruleanlu
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
github-actions
bot
removed
the
New Browser Test Expectations
benceruleanlu
added
the
New Browser Test Expectations
There was a problem hiding this comment.
Pull request overview
This PR refactors the Queue UI to replace the floating "Active" overlay with an inline progress indicator in the top menu bar, improving the user experience. The refactoring includes introducing a configuration-based action system for QueueJobItem, creating new inline progress components, and removing unused components.
Key Changes:
- Replaced
QueueOverlayActivewithQueueInlineProgressandQueueInlineProgressSummarycomponents for inline progress display - Refactored
QueueJobItemto use a declarative configuration-based action system instead of hardcoded button visibility logic - Added new 'destructive' button type for destructive actions and moved queue controls to
ComfyActionbar
Reviewed changes
Copilot reviewed 21 out of 42 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
src/types/buttonTypes.ts |
Added 'destructive' button type with styling for destructive actions |
src/locales/en/main.json |
Added new translation keys for inline progress labels and renamed 'clearQueued' to 'clearQueue' |
src/composables/queue/useJobList.ts |
Removed exports and extracted current node name logic to separate composable |
src/composables/queue/useCurrentNodeName.ts |
New composable extracting current node name logic for reuse |
src/components/queue/job/QueueJobItem.vue |
Refactored to use configuration-based action system with type-safe action configs |
src/components/queue/job/JobFiltersBar.vue |
Removed unused component |
src/components/queue/QueueProgressOverlay.vue |
Removed QueueOverlayActive integration and simplified overlay state |
src/components/queue/QueueOverlayHeader.vue |
Added close button with event emission |
src/components/queue/QueueOverlayExpanded.vue |
Simplified UI and removed filter bar integration |
src/components/queue/QueueOverlayActive.vue |
Removed component (replaced by inline progress) |
src/components/queue/QueueInlineProgressSummary.vue |
New component displaying progress summary text |
src/components/queue/QueueInlineProgress.vue |
New component displaying inline progress bars |
src/components/button/IconTextButton.vue |
Added support for default slot to allow custom content |
src/components/actionbar/ComfyActionbar.vue |
Integrated queue controls (cancel, toggle, count) |
src/components/TopMenuSection.vue |
Integrated inline progress components and simplified layout |
browser_tests/tests/queue/queueList.spec.ts |
Added browser tests for queue UI functionality |
browser_tests/fixtures/components/QueueList.ts |
Added test fixture for queue list component |
browser_tests/fixtures/ComfyPage.ts |
Added queueList fixture to ComfyPage |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/TopMenuSection.vue (1)
92-96: Consider converting scoped style to Tailwind.Per coding guidelines, avoid
<style>blocks in Vue components. The CSS variable can be applied as a Tailwind arbitrary value:<div - class="actionbar-container relative pointer-events-auto flex h-12 items-center overflow-hidden rounded-lg border border-interface-stroke px-2 shadow-interface" + class="relative pointer-events-auto flex h-12 items-center overflow-hidden rounded-lg border border-interface-stroke px-2 shadow-interface bg-[var(--comfy-menu-bg)]" >Then remove the
<style scoped>block entirely.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (21)
browser_tests/tests/nodeSearchBox.spec.ts-snapshots/added-node-no-connection-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/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.pngis excluded by!**/*.png
📒 Files selected for processing (21)
browser_tests/fixtures/ComfyPage.ts(3 hunks)browser_tests/fixtures/components/QueueList.ts(1 hunks)browser_tests/tests/queue/queueList.spec.ts(1 hunks)src/components/TopMenuSection.vue(2 hunks)src/components/actionbar/ComfyActionbar.vue(3 hunks)src/components/button/IconTextButton.vue(2 hunks)src/components/queue/QueueInlineProgress.vue(1 hunks)src/components/queue/QueueInlineProgressSummary.stories.ts(1 hunks)src/components/queue/QueueInlineProgressSummary.vue(1 hunks)src/components/queue/QueueOverlayActive.test.ts(0 hunks)src/components/queue/QueueOverlayActive.vue(0 hunks)src/components/queue/QueueOverlayExpanded.vue(2 hunks)src/components/queue/QueueOverlayHeader.test.ts(2 hunks)src/components/queue/QueueOverlayHeader.vue(2 hunks)src/components/queue/QueueProgressOverlay.vue(5 hunks)src/components/queue/job/JobFiltersBar.vue(0 hunks)src/components/queue/job/QueueJobItem.vue(5 hunks)src/composables/queue/useCurrentNodeName.ts(1 hunks)src/composables/queue/useJobList.ts(3 hunks)src/locales/en/main.json(3 hunks)src/types/buttonTypes.ts(3 hunks)
💤 Files with no reviewable changes (3)
- src/components/queue/QueueOverlayActive.vue
- src/components/queue/job/JobFiltersBar.vue
- src/components/queue/QueueOverlayActive.test.ts
🧰 Additional context used
📓 Path-based instructions (18)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/components/queue/QueueOverlayHeader.test.tssrc/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useCurrentNodeName.tssrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/job/QueueJobItem.vuesrc/types/buttonTypes.tssrc/components/queue/QueueProgressOverlay.vue
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions
Files:
src/components/queue/QueueOverlayHeader.test.tssrc/composables/queue/useCurrentNodeName.tssrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.stories.tssrc/types/buttonTypes.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
src/**/*.{ts,tsx,vue}: Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Use refactoring to make complex code simpler
Keep functions short and functional
Minimize nesting in code (e.g.,if () { ... }orfor () { ... }) to avoid arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions (especially testable ones)
Watch out for code smells and refactor to avoid them
Implement proper error handling in code
If a complex type definition is inlined in multiple related places, extract and name it for reuse
Files:
src/components/queue/QueueOverlayHeader.test.tssrc/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useCurrentNodeName.tssrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/job/QueueJobItem.vuesrc/types/buttonTypes.tssrc/components/queue/QueueProgressOverlay.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/queue/QueueOverlayHeader.test.tssrc/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useCurrentNodeName.tssrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/queue/QueueOverlayHeader.test.tssrc/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useCurrentNodeName.tssrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/job/QueueJobItem.vuesrc/types/buttonTypes.tssrc/components/queue/QueueProgressOverlay.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/components/queue/QueueOverlayHeader.test.tssrc/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useCurrentNodeName.tssrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/queue/QueueOverlayHeader.test.tssrc/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
**/*.{js,ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively (no new JavaScript)
Files:
src/components/queue/QueueOverlayHeader.test.tsbrowser_tests/fixtures/ComfyPage.tssrc/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuebrowser_tests/fixtures/components/QueueList.tssrc/composables/queue/useCurrentNodeName.tsbrowser_tests/tests/queue/queueList.spec.tssrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/job/QueueJobItem.vuesrc/types/buttonTypes.tssrc/components/queue/QueueProgressOverlay.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Do not useanytype in TypeScript code
Do not useas anytype assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; runpnpm formatbefore committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Files:
src/components/queue/QueueOverlayHeader.test.tsbrowser_tests/fixtures/ComfyPage.tssrc/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuebrowser_tests/fixtures/components/QueueList.tssrc/composables/queue/useCurrentNodeName.tsbrowser_tests/tests/queue/queueList.spec.tssrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/job/QueueJobItem.vuesrc/types/buttonTypes.tssrc/components/queue/QueueProgressOverlay.vue
**/*.test.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.test.ts: Write unit and component tests in**/*.test.ts
Use Vitest with happy-dom for unit and component tests
Files:
src/components/queue/QueueOverlayHeader.test.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use vue-i18n in Composition API for string literals and place new translation entries in
src/locales/en/main.json
Files:
src/components/queue/QueueOverlayHeader.test.tsbrowser_tests/fixtures/ComfyPage.tssrc/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuebrowser_tests/fixtures/components/QueueList.tssrc/composables/queue/useCurrentNodeName.tsbrowser_tests/tests/queue/queueList.spec.tssrc/components/TopMenuSection.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/job/QueueJobItem.vuesrc/types/buttonTypes.tssrc/components/queue/QueueProgressOverlay.vue
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsName Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (.vuefiles)
Use Tailwind 4 styling and avoid<style>blocks in Vue components
Use<script setup lang="ts">for component logic in Vue components
Use Vue 3.5 TypeScript style of default prop declaration with reactive props destructuring
Do not usewithDefaultsor runtime props declaration in Vue components
PreferuseModelto separately defining a prop and emit in Vue components
Usereffor reactive state in Vue components
Implement computed properties withcomputed()instead of usingrefandwatch
UsewatchandwatchEffectfor side effects in Vue components
Useprovide/injectfor dependency injection only when simpler alternatives (Store or composable) are not suitable
Do not use thedark:Tailwind variant; use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Useimport { cn } from '@/utils/tailwindUtil'to merge class names instead of:class="[]"
Avoid new usage of PrimeVue components
Use VueUse functions for performance-enhancing styles in Vue components
Do not import Vue macros unnecessarily in components
Be judicious with addition of new refs or other state; prefer using props or composables when possible
Do not add acomputedif it's possible to use arefor prop directly
Do not use awatchif acomputedwould work instead
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/composables/queue/useCurrentNodeName.tssrc/composables/queue/useJobList.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/queue/queueList.spec.ts
browser_tests/**/*.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
Write E2E tests in
browser_tests/**/*.spec.tsusing Playwright
Files:
browser_tests/tests/queue/queueList.spec.ts
🧠 Learnings (43)
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
Applied to files:
src/components/queue/QueueOverlayHeader.test.tsbrowser_tests/fixtures/components/QueueList.tsbrowser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/components/queue/QueueOverlayHeader.test.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/fixtures/components/QueueList.tssrc/composables/queue/useCurrentNodeName.tsbrowser_tests/tests/queue/queueList.spec.tssrc/composables/queue/useJobList.tssrc/components/queue/QueueInlineProgressSummary.stories.tssrc/types/buttonTypes.ts
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, when avoiding PrimeVue components, prefer using the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) rather than plain HTML buttons. These components wrap PrimeVue with custom design system styling.
Applied to files:
browser_tests/fixtures/ComfyPage.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 panels
Applied to files:
browser_tests/fixtures/ComfyPage.tssrc/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueOverlayExpanded.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 Drawer
Applied to files:
browser_tests/fixtures/ComfyPage.tssrc/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
browser_tests/fixtures/ComfyPage.tssrc/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.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 Message
Applied to files:
src/components/queue/QueueInlineProgress.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueInlineProgressSummary.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/queue/QueueInlineProgress.vuesrc/components/queue/QueueOverlayHeader.vuesrc/components/button/IconTextButton.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/queue/QueueOverlayHeader.vuesrc/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vuesrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.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 patterns
Applied to files:
src/components/queue/QueueOverlayHeader.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 ToggleSwitch
Applied to files:
src/components/button/IconTextButton.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Use Vue 3.5 TypeScript style of default prop declaration with reactive props destructuring
Applied to files:
src/components/button/IconTextButton.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useJobList.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state; prefer using props or composables when possible
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useJobList.tssrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to browser_tests/**/*.spec.ts : Write E2E tests in `browser_tests/**/*.spec.ts` using Playwright
Applied to files:
browser_tests/fixtures/components/QueueList.tsbrowser_tests/tests/queue/queueList.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 tests
Applied to files:
browser_tests/fixtures/components/QueueList.tsbrowser_tests/tests/queue/queueList.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 tests
Applied to files:
browser_tests/fixtures/components/QueueList.tsbrowser_tests/tests/queue/queueList.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} : Prefer specific selectors in browser tests
Applied to files:
browser_tests/fixtures/components/QueueList.tsbrowser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/composables/use*.ts : Name composables as `useXyz.ts`
Applied to files:
src/composables/queue/useCurrentNodeName.tssrc/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/composables/queue/useCurrentNodeName.tssrc/components/queue/QueueOverlayExpanded.vue
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Follow naming conventions for browser tests
Applied to files:
browser_tests/tests/queue/queueList.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} : Mock external dependencies in tests
Applied to files:
browser_tests/tests/queue/queueList.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 utilities
Applied to files:
browser_tests/tests/queue/queueList.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 guidelines
Applied to files:
browser_tests/tests/queue/queueList.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 viewports
Applied to files:
browser_tests/tests/queue/queueList.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 codebase
Applied to files:
browser_tests/tests/queue/queueList.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} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
browser_tests/tests/queue/queueList.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 : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/composables/queue/useJobList.tssrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` instead of using `ref` and `watch`
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/composables/queue/useJobList.tssrc/components/queue/QueueProgressOverlay.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 lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks
Applied to files:
src/composables/queue/useJobList.tssrc/components/queue/QueueOverlayExpanded.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/composables/queue/useJobList.tssrc/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI strings
Applied to files:
src/components/queue/QueueOverlayExpanded.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,vue} : Use vue-i18n in Composition API for string literals and place new translation entries in `src/locales/en/main.json`
Applied to files:
src/components/queue/QueueOverlayExpanded.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 guide
Applied to files:
src/components/queue/QueueOverlayExpanded.vue
📚 Learning: 2025-12-09T04:35:40.491Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:40.491Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/locales/en/main.json
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Applied to files:
src/components/queue/QueueProgressOverlay.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 Teleport/Suspense when needed for component rendering
Applied to files:
src/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/components/queue/QueueProgressOverlay.vue
🧬 Code graph analysis (5)
src/components/queue/QueueOverlayHeader.test.ts (1)
browser_tests/fixtures/components/QueueList.ts (1)
closeButton(19-21)
browser_tests/fixtures/ComfyPage.ts (1)
browser_tests/fixtures/components/QueueList.ts (1)
QueueList(4-57)
src/composables/queue/useCurrentNodeName.ts (1)
packages/shared-frontend-utils/src/formatUtil.ts (1)
normalizeI18nKey(126-128)
src/composables/queue/useJobList.ts (1)
src/composables/queue/useCurrentNodeName.ts (1)
useCurrentNodeName(8-23)
src/types/buttonTypes.ts (1)
src/utils/tailwindUtil.ts (1)
cn(1-1)
⏰ 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: setup
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: test
- GitHub Check: collect
- GitHub Check: lint-and-format
🔇 Additional comments (24)
src/components/queue/QueueOverlayHeader.test.ts (1)
39-49: Close i18n stub and emission test look correctIncluding
g.closein the local i18n stub and asserting thecloseevent via the aria‑labelled button cleanly exercise the new header behavior. No issues from a test or accessibility perspective.Also applies to: 99-106
src/components/actionbar/ComfyActionbar.vue (1)
33-68: Inline queue toggle and cancel wiring are solidThe new cancel and queue toggle controls are correctly wired into Pinia stores, use existing button components, respect execution idle state, and expose appropriate aria attributes and test IDs. The tooltip/i18n keys line up with the new locale entries. No functional or accessibility concerns here.
Also applies to: 82-95, 99-110, 136-161
browser_tests/fixtures/ComfyPage.ts (1)
16-18: QueueList fixture integration is correctImporting
QueueListand exposing it ascomfyPage.queueList = new QueueList(page)matches existing fixture patterns and cleanly enables queue UI tests. No issues.Also applies to: 155-159, 188-195
src/components/queue/QueueOverlayHeader.vue (1)
65-77: Close button and emit hook cleanly into header APIThe new close IconButton, tooltip config, and
(e: 'close')emit are consistent with existing patterns and correctly wired for both accessibility (aria-label) and tests (data-testid / emitted event). Looks good.Also applies to: 98-101, 106-107, 112-116
src/composables/queue/useCurrentNodeName.ts (1)
1-23: Current node name composable is clean and robustThe
useCurrentNodeNamecomposable centralizes the executing node label logic with sensible fallbacks and proper i18n usage, which simplifies downstream components like the queue overlay and inline progress. No issues.src/locales/en/main.json (1)
709-711: New queue progress locale keys are consistent and sufficientThe added
inlineTotalLabel,inlineCurrentNodeLabel,clearQueue, andtoggleLabelentries are well‑named, match their consuming components, and keep all new UI text localized appropriately.Also applies to: 719-721, 730-731
src/composables/queue/useJobList.ts (1)
4-5: useCurrentNodeName integration into job list is correctUsing
useCurrentNodeNameto drive bothcurrentNodeNameinbuildJobDisplay(only for the active job) and therunningNodeName/currentNodeNamefields onJobListItemkeeps node‑naming logic centralized and consistent with other queue UI pieces, without altering existing sorting/grouping behavior.Also applies to: 170-172, 250-261, 272-279, 349-350
src/components/queue/QueueInlineProgress.vue (1)
1-33: LGTM!Clean implementation following Vue 3 Composition API guidelines. The component correctly:
- Uses
<script setup lang="ts">with proper props definition- Leverages the
useQueueProgresscomposable for reactive state- Applies Tailwind-only styling with no
<style>block- Uses
aria-hidden="true"appropriately for this decorative progress indicatorsrc/components/queue/QueueInlineProgressSummary.vue (1)
1-64: Component structure looks good overall.The component correctly uses Vue 3 Composition API, vue-i18n for localization, and Tailwind-only styling. The visibility logic properly accounts for execution state and progress values.
browser_tests/tests/queue/queueList.spec.ts (2)
59-104: Well-structured E2E tests covering key user workflows.The tests properly:
- Use Playwright fixtures for page and WebSocket mocking
- Test toggle behavior and count updates from status events
- Verify job rendering and hover-based action visibility
- Use specific
data-testidselectors for reliable element selectionConsider adding viewport-specific tests in the future as per coding guidelines ("Test across multiple viewports").
119-157: Clean test helper implementation.The
createQueueControllerhelper provides a well-encapsulated way to manage mock queue state and synchronize with WebSocket events. The pattern of waiting for the/api/queueresponse after triggering the WebSocket message ensures proper test synchronization.src/components/queue/job/QueueJobItem.vue (2)
298-322: Well-designed action configuration types.The discriminated union pattern with
IconActionConfigandTextActionConfigprovides type-safe action rendering. The separation ofmode: 'hover' | 'always'cleanly handles visibility requirements.
343-423: Clean declarative action system.The refactored action configuration approach eliminates duplicated button markup and centralizes action logic. Each action's visibility, tooltip, and click handler are co-located, improving maintainability.
src/types/buttonTypes.ts (2)
42-44: Consistent implementation across both style functions.The destructive type is properly handled in both
getButtonTypeClassesandgetBorderButtonTypeClasseswith appropriate styling for base, hover, and border states.Also applies to: 59-61, 69-69
5-10: Clean addition of destructive button type.The new
destructivevariant follows the established pattern for other button types. The design system tokensdestructive-backgroundanddestructive-background-hoverare properly defined in the design system's CSS, mapping to coral color tokens for consistent styling across light and dark modes.src/components/queue/QueueInlineProgressSummary.stories.ts (1)
104-169: Good coverage of edge cases in stories.The three stories appropriately test different states: a running node with title, a fallback name scenario, and progress without a current node. This provides good visual testing coverage for the component.
browser_tests/fixtures/components/QueueList.ts (1)
4-57: Well-structured Playwright page object.The
QueueListclass follows the page object pattern correctly with:
- Proper use of
getByTestIdfor specific selectors (per learnings)- Accessible
getByRolefor the clear history button- Idempotent
open()/close()methods that check visibility before acting- Flexible
getJobCount()with optional state filteringsrc/components/queue/QueueProgressOverlay.vue (2)
9-9: Test ID added for E2E testing.The
data-testid="queue-overlay"attribute aligns with the newQueueListpage object fixture, enabling reliable E2E test selectors.
165-176: Clean overlay state management.The
closeOverlayandopenExpandedFromEmptyfunctions clearly express intent and integrate well with the new@closeevent fromQueueOverlayExpanded.src/components/queue/QueueOverlayExpanded.vue (3)
11-35: Action row implementation looks good.The action row:
- Uses vue-i18n for all user-facing strings (
activeJobsSuffix,clearQueue)- Conditionally renders Clear Queue only when
queuedCount > 0- Uses
IconButtonfrom common components (per learnings)- Includes proper
aria-labelfor accessibility
68-84: Props and emits properly defined.The component correctly defines typed props and emits following Vue 3 Composition API patterns. The new
activeJobsCountprop andcloseemit integrate cleanly with the parentQueueProgressOverlay.
3-9: Close event properly propagated.The
@closeevent is correctly forwarded fromQueueOverlayHeaderto the parent, enabling the overlay close flow throughQueueProgressOverlay.closeOverlay().src/components/TopMenuSection.vue (2)
2-44: Clean layout restructuring for inline progress.The two-row vertical layout properly separates:
- Row 1:
SubgraphBreadcrumb- Row 2: Action bar with
ComfyActionbar, authentication controls, panel toggle, andQueueInlineProgress- Below:
QueueInlineProgressSummaryThe
v-model:expandedbinding onQueueProgressOverlayand:hiddenprop on inline progress components correctly coordinate visibility.
55-73: Simplified state management.The component now uses a single
isQueueOverlayExpandedref to coordinate betweenComfyActionbar,QueueInlineProgress, andQueueProgressOverlay. The removal of direct store dependencies (useQueueStore,useExecutionStore,useCommandStore) appropriately delegates queue control logic to dedicated components.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
benceruleanlu
added
New Browser Test Expectations
github-actions
bot
removed
the
New Browser Test Expectations
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
browser_tests/tests/queue/queueList.spec.ts (1)
136-138: Sameanytype issue in inline function signature.This repeats the
anytype issue from theQueueControllertype definition. Update both locations consistently.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (21)
browser_tests/tests/interaction.spec.ts-snapshots/prompt-dialog-closed-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/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.pngis excluded by!**/*.png
📒 Files selected for processing (8)
browser_tests/tests/queue/queueList.spec.ts(1 hunks)src/components/button/IconTextButton.vue(2 hunks)src/components/queue/QueueInlineProgressSummary.stories.ts(1 hunks)src/components/queue/QueueInlineProgressSummary.vue(1 hunks)src/components/queue/QueueProgressOverlay.vue(5 hunks)src/components/queue/job/QueueJobItem.vue(5 hunks)src/composables/queue/useJobList.ts(7 hunks)tests-ui/tests/composables/useJobList.test.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (19)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/composables/queue/useJobList.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
src/**/*.{ts,tsx,vue}: Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Use refactoring to make complex code simpler
Keep functions short and functional
Minimize nesting in code (e.g.,if () { ... }orfor () { ... }) to avoid arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions (especially testable ones)
Watch out for code smells and refactor to avoid them
Implement proper error handling in code
If a complex type definition is inlined in multiple related places, extract and name it for reuse
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/composables/queue/useJobList.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/composables/queue/useJobList.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/composables/queue/useJobList.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/composables/queue/useJobList.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsName Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.stories.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
**/*.{js,ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively (no new JavaScript)
Files:
src/components/button/IconTextButton.vuebrowser_tests/tests/queue/queueList.spec.tssrc/components/queue/QueueInlineProgressSummary.stories.tstests-ui/tests/composables/useJobList.test.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/composables/queue/useJobList.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs with Composition API only (.vuefiles)
Use Tailwind 4 styling and avoid<style>blocks in Vue components
Use<script setup lang="ts">for component logic in Vue components
Use Vue 3.5 TypeScript style of default prop declaration with reactive props destructuring
Do not usewithDefaultsor runtime props declaration in Vue components
PreferuseModelto separately defining a prop and emit in Vue components
Usereffor reactive state in Vue components
Implement computed properties withcomputed()instead of usingrefandwatch
UsewatchandwatchEffectfor side effects in Vue components
Useprovide/injectfor dependency injection only when simpler alternatives (Store or composable) are not suitable
Do not use thedark:Tailwind variant; use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Useimport { cn } from '@/utils/tailwindUtil'to merge class names instead of:class="[]"
Avoid new usage of PrimeVue components
Use VueUse functions for performance-enhancing styles in Vue components
Do not import Vue macros unnecessarily in components
Be judicious with addition of new refs or other state; prefer using props or composables when possible
Do not add acomputedif it's possible to use arefor prop directly
Do not use awatchif acomputedwould work instead
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Do not useanytype in TypeScript code
Do not useas anytype assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; runpnpm formatbefore committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Files:
src/components/button/IconTextButton.vuebrowser_tests/tests/queue/queueList.spec.tssrc/components/queue/QueueInlineProgressSummary.stories.tstests-ui/tests/composables/useJobList.test.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/composables/queue/useJobList.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use vue-i18n in Composition API for string literals and place new translation entries in
src/locales/en/main.json
Files:
src/components/button/IconTextButton.vuebrowser_tests/tests/queue/queueList.spec.tssrc/components/queue/QueueInlineProgressSummary.stories.tstests-ui/tests/composables/useJobList.test.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/composables/queue/useJobList.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.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/queue/queueList.spec.ts
browser_tests/**/*.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
Write E2E tests in
browser_tests/**/*.spec.tsusing Playwright
Files:
browser_tests/tests/queue/queueList.spec.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Minimize the surface area (exported values) of each module and composable
Use es-toolkit for utility functions
Files:
src/components/queue/QueueInlineProgressSummary.stories.tssrc/composables/queue/useJobList.ts
tests-ui/**/*.test.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (tests-ui/CLAUDE.md)
tests-ui/**/*.test.{js,ts,jsx,tsx}: Write tests for new features
Follow existing test patterns in the codebase
Use existing test utilities rather than writing custom utilities
Mock external dependencies in tests
Always prefer vitest mock functions over writing verbose manual mocks
Files:
tests-ui/tests/composables/useJobList.test.ts
**/*.test.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.test.ts: Write unit and component tests in**/*.test.ts
Use Vitest with happy-dom for unit and component tests
Files:
tests-ui/tests/composables/useJobList.test.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/composables/queue/useJobList.ts
🧠 Learnings (60)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Applied to files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Use Vue 3.5 TypeScript style of default prop declaration with reactive props destructuring
Applied to files:
src/components/button/IconTextButton.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/button/IconTextButton.vuesrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to browser_tests/**/*.spec.ts : Write E2E tests in `browser_tests/**/*.spec.ts` using Playwright
Applied to files:
browser_tests/tests/queue/queueList.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 tests
Applied to files:
browser_tests/tests/queue/queueList.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 features
Applied to files:
browser_tests/tests/queue/queueList.spec.tstests-ui/tests/composables/useJobList.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests
Applied to files:
browser_tests/tests/queue/queueList.spec.tssrc/components/queue/QueueInlineProgressSummary.stories.tstests-ui/tests/composables/useJobList.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests
Applied to files:
browser_tests/tests/queue/queueList.spec.tstests-ui/tests/composables/useJobList.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Follow naming conventions for browser tests
Applied to files:
browser_tests/tests/queue/queueList.spec.tstests-ui/tests/composables/useJobList.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Use existing test utilities rather than writing custom utilities
Applied to files:
browser_tests/tests/queue/queueList.spec.tstests-ui/tests/composables/useJobList.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Check tests-ui/README.md for test guidelines
Applied to files:
browser_tests/tests/queue/queueList.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} : Prefer specific selectors in browser tests
Applied to files:
browser_tests/tests/queue/queueList.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 viewports
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Do not use `as any` type assertions in TypeScript code; fix the underlying type issue
Applied to files:
browser_tests/tests/queue/queueList.spec.tssrc/components/queue/QueueInlineProgressSummary.stories.tssrc/composables/queue/useJobList.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Import statements should be sorted and grouped by plugin; run `pnpm format` before committing
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Watch out for code smells and refactor to avoid them
Applied to files:
browser_tests/tests/queue/queueList.spec.tssrc/components/queue/job/QueueJobItem.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Applied to files:
browser_tests/tests/queue/queueList.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} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
browser_tests/tests/queue/queueList.spec.tssrc/components/queue/QueueInlineProgressSummary.stories.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Use refactoring to make complex code simpler
Applied to files:
browser_tests/tests/queue/queueList.spec.tssrc/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/job/QueueJobItem.vue
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`
Applied to files:
browser_tests/tests/queue/queueList.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 codebase
Applied to files:
browser_tests/tests/queue/queueList.spec.tssrc/composables/queue/useJobList.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Applied to files:
browser_tests/tests/queue/queueList.spec.tssrc/components/queue/QueueInlineProgressSummary.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Applied to files:
browser_tests/tests/queue/queueList.spec.tssrc/components/queue/job/QueueJobItem.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 codebase
Applied to files:
browser_tests/tests/queue/queueList.spec.tstests-ui/tests/composables/useJobList.test.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
browser_tests/tests/queue/queueList.spec.tssrc/components/queue/QueueInlineProgressSummary.stories.tstests-ui/tests/composables/useJobList.test.tssrc/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible
Applied to files:
src/components/queue/QueueInlineProgressSummary.stories.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/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
src/components/queue/QueueInlineProgressSummary.stories.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Do not use `any` type in TypeScript code
Applied to files:
src/components/queue/QueueInlineProgressSummary.stories.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/stores/**/*.{ts,tsx} : Use TypeScript for type safety in state management stores
Applied to files:
src/components/queue/QueueInlineProgressSummary.stories.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Favor pure functions (especially testable ones)
Applied to files:
src/components/queue/QueueInlineProgressSummary.stories.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
src/components/queue/QueueInlineProgressSummary.stories.tstests-ui/tests/composables/useJobList.test.ts
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/stores/**/*.{ts,tsx} : Maintain clear public interfaces and restrict extension access in stores
Applied to files:
src/components/queue/QueueInlineProgressSummary.stories.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with Message
Applied to files:
src/components/queue/QueueInlineProgressSummary.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` instead of using `ref` and `watch`
Applied to files:
src/components/queue/QueueInlineProgressSummary.vuesrc/composables/queue/useJobList.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Do not add a `computed` if it's possible to use a `ref` or prop directly
Applied to files:
src/components/queue/QueueInlineProgressSummary.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement computed properties with computed()
Applied to files:
src/components/queue/QueueInlineProgressSummary.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties
Applied to files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/job/QueueJobItem.vue
📚 Learning: 2025-12-05T06:11:09.383Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7177
File: src/platform/assets/components/UploadModelFooter.vue:72-78
Timestamp: 2025-12-05T06:11:09.383Z
Learning: For the ComfyUI_frontend repository, avoid suggesting comments that would be redundant when the code is already self-explanatory through descriptive naming (e.g., filenames, prop names, aria-labels). The project prefers clean code without unnecessary documentation comments.
Applied to files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state; prefer using props or composables when possible
Applied to files:
src/components/queue/QueueInlineProgressSummary.vuesrc/components/queue/job/QueueJobItem.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/composables/use*.ts : Name composables as `useXyz.ts`
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-12-06T02:11:00.366Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/RightSidePanel.vue:174-180
Timestamp: 2025-12-06T02:11:00.366Z
Learning: PrimeVue components have poor TypeScript typing, so type assertions (like `as RightSidePanelTab`) may be necessary when handling emitted events or prop values from PrimeVue components like TabList.
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/composables/queue/useJobList.tssrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/composables/queue/useJobList.tssrc/components/queue/QueueProgressOverlay.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 needed
Applied to files:
src/composables/queue/useJobList.tssrc/components/queue/QueueProgressOverlay.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/composables/queue/useJobList.tssrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,vue} : Use vue-i18n in Composition API for string literals and place new translation entries in `src/locales/en/main.json`
Applied to files:
src/composables/queue/useJobList.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/composables/queue/useJobList.tssrc/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/queue/job/QueueJobItem.vuesrc/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Minimize nesting in code (e.g., `if () { ... }` or `for () { ... }`) to avoid arrow anti-pattern
Applied to files:
src/components/queue/job/QueueJobItem.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Applied to files:
src/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Do not use `withDefaults` or runtime props declaration in Vue components
Applied to files:
src/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-05T08:52:50.787Z
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.787Z
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/queue/QueueProgressOverlay.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 declaration
Applied to files:
src/components/queue/QueueProgressOverlay.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 Teleport/Suspense when needed for component rendering
Applied to files:
src/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/components/queue/QueueProgressOverlay.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use vue-i18n for ALL UI strings
Applied to files:
src/components/queue/QueueProgressOverlay.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 Drawer
Applied to files:
src/components/queue/QueueProgressOverlay.vue
🧬 Code graph analysis (3)
browser_tests/tests/queue/queueList.spec.ts (2)
src/stores/queueStore.ts (4)
url(89-91)queueIndex(286-288)promptId(290-292)clientId(310-312)src/schemas/apiSchema.ts (1)
StatusWsMessage(136-136)
src/components/queue/QueueInlineProgressSummary.stories.ts (2)
src/platform/workflow/management/stores/workflowStore.ts (1)
ComfyWorkflow(35-139)src/schemas/apiSchema.ts (2)
NodeProgressState(151-151)ProgressWsMessage(137-137)
src/composables/queue/useJobList.ts (2)
src/composables/queue/useCurrentNodeName.ts (1)
useCurrentNodeName(8-23)src/utils/queueUtil.ts (1)
jobStateFromTask(11-29)
⏰ 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: collect
- GitHub Check: setup
- GitHub Check: lint-and-format
🔇 Additional comments (16)
src/components/button/IconTextButton.vue (1)
50-52: Slot detection implementation looks good.The
hasDefaultSlotcomputed property correctly usesBoolean(slots.default?.().length)to detect non-empty default slots, ensuring empty slots don't suppress the label fallback. This addresses the refinement from previous review feedback.browser_tests/tests/queue/queueList.spec.ts (3)
34-57: Test setup with mock routes is well-structured.The mock routes for
/api/promptand/api/historyare cleanly implemented, and the queue controller pattern provides a good abstraction for managing test state. The use ofbeforeEachensures clean state for each test.
59-105: Test cases cover essential queue UI workflows.The tests effectively verify the queue overlay toggle behavior, count updates from WebSocket status events, and job item rendering with actions. The use of specific selectors like
data-testidand the page object pattern makes these tests maintainable and reliable.
119-157: Queue controller helper is well-designed.The
createQueueControllerhelper provides a clean abstraction for managing mock queue state and synchronizing it with the UI via WebSocket messages. The pattern of waiting for the/api/queueresponse ensures tests don't proceed until the UI has updated.src/components/queue/job/QueueJobItem.vue (6)
5-9: Data attributes for testing are well-implemented.Adding
data-testid,data-job-id, anddata-job-stateattributes enables robust E2E testing and debugging. ThehandleMouseEnter/handleMouseLeavehandlers cleanly consolidate hover logic.
53-71: Progress bar rendering is well-structured.The conditional rendering logic correctly handles undefined progress values, and the dual progress bars (total/current) provide clear visual feedback. The transition class on width enables smooth animations.
107-134: Consolidated action rendering is a significant improvement.The previous duplicated markup for hover/always actions has been unified into a single
v-forloop overvisibleActions. This follows DRY principles and makes the template more maintainable. Thedata-testidattributes on each action button enable precise E2E test targeting.
267-291: Action config types are well-designed.The discriminated union pattern with
type: 'icon' | 'text'enables type-safe rendering in the template. The separation ofBaseActionConfig,IconActionConfig, andTextActionConfigprovides clear structure while maintaining flexibility.
312-392: Declarative action configuration is maintainable.The
baseActionscomputed provides a clean, declarative way to define all available actions with their visibility conditions, icons, tooltips, and click handlers. TheisVisiblefunctions correctly capture component state for deferred evaluation invisibleActions.
394-414: Visibility filtering and mouse handlers are correctly implemented.The
visibleActionscomputed correctly filters actions based on theirisVisible()result andmode(always vs hover). The mouse handlers cleanly combine hover state updates with row enter/leave semantics. TheactionButtonClassconstant (previously a function) is now properly defined as a static string.src/components/queue/QueueInlineProgressSummary.vue (1)
1-60: Inline summary cleanly reuses shared queue composablesUsing
useCurrentNodeNameanduseQueueProgresshere keeps naming/progress logic centralized, andshouldShowcorrectly gates rendering onhidden,isIdle, and non‑zero progress. Template/i18n usage and bindings look solid.src/components/queue/QueueInlineProgressSummary.stories.ts (1)
13-130: Typed execution-store seeding for stories looks robust
createWorkflow/seedExecutionStateset up realistic workflow + progress state using properComfyWorkflowJSON,NodeProgressState, andProgressWsMessagetypes, and the three stories cover the main UI cases without unsafe casts.Also applies to: 132-211
tests-ui/tests/composables/useJobList.test.ts (2)
315-334:orderedTaskssorting test aligns with queue semanticsThis test clearly asserts that
orderedTasksis sorted byqueueIndexdescending across pending/running/history tasks, matching the new composable behavior.
392-438: Date-grouping test correctly asserts queue-ordered itemsThe updated test verifies both the expected group labels (
Today/Yesterday/Undated) and that items within the “Today” group follow queue order (today-smallbeforetoday-large), which matches the new grouping logic.src/composables/queue/useJobList.ts (1)
160-236: Refactor toorderedTasks+useCurrentNodeNameis cohesive and type-safeUsing
orderedTasksas the single source of truth (queueIndex‑sorted across pending/running/history) and deriving bothtasksWithJobStateandjobItemsfrom it keeps the data flow straightforward. WiringcurrentNodeNamefromuseCurrentNodeNameremoves duplicated naming logic while still exposing it from the composable, andgroupedJobItemsnow groups in queue order with clear date/undated handling. Overall the API surface (orderedTasks,jobItems,groupedJobItems,currentNodeName) is tight and matches the new consumers.Also applies to: 244-282
src/components/queue/QueueProgressOverlay.vue (1)
9-24: Overlay state & job-list wiring cleanly match the new inline-progress UXThe reduced
OverlayStateunion andoverlayStatecomputed make visibility/background rules explicit for just “empty summary” vs “expanded” cases, andcloseOverlaycorrectly drives theexpandedv‑model. Switching touseJobList’sorderedTasks/groupedJobItemsand feedingorderedTasksintouseResultGalleryensures the expanded overlay and result gallery are both in sync with queue order whileactiveJobsCountkeeps the header/summary consistent.Also applies to: 65-117, 137-157, 162-173
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 (3)
browser_tests/fixtures/ws.ts(1 hunks)browser_tests/tests/actionbar.spec.ts(3 hunks)browser_tests/tests/queue/queueList.spec.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
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/actionbar.spec.tsbrowser_tests/tests/queue/queueList.spec.ts
**/*.{js,ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use TypeScript exclusively (no new JavaScript)
Files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.spec.tsbrowser_tests/fixtures/ws.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Do not useanytype in TypeScript code
Do not useas anytype assertions in TypeScript code; fix the underlying type issue
Style formatting: 2 space indent, single quotes, no trailing semicolons, 80 character width
Import statements should be sorted and grouped by plugin; runpnpm formatbefore committing
ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.spec.tsbrowser_tests/fixtures/ws.ts
browser_tests/**/*.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
Write E2E tests in
browser_tests/**/*.spec.tsusing Playwright
Files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.spec.ts
**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
Use vue-i18n in Composition API for string literals and place new translation entries in
src/locales/en/main.json
Files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.spec.tsbrowser_tests/fixtures/ws.ts
🧠 Learnings (26)
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.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 tests
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.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 codebase
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.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} : Prefer specific selectors in browser tests
Applied to files:
browser_tests/tests/actionbar.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 tests
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to browser_tests/**/*.spec.ts : Write E2E tests in `browser_tests/**/*.spec.ts` using Playwright
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.spec.tsbrowser_tests/fixtures/ws.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 tests
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.spec.tsbrowser_tests/fixtures/ws.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/actionbar.spec.tsbrowser_tests/tests/queue/queueList.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} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
browser_tests/tests/actionbar.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 viewports
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.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 utilities
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.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} : Mock external dependencies in tests
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.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} : Always prefer vitest mock functions over writing verbose manual mocks
Applied to files:
browser_tests/tests/actionbar.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 setup
Applied to files:
browser_tests/tests/actionbar.spec.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
browser_tests/tests/actionbar.spec.tsbrowser_tests/tests/queue/queueList.spec.tsbrowser_tests/fixtures/ws.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 guidelines
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Do not use `as any` type assertions in TypeScript code; fix the underlying type issue
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Import statements should be sorted and grouped by plugin; run `pnpm format` before committing
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Watch out for code smells and refactor to avoid them
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : ESLint rules: no floating promises, no unused imports, i18n raw text restrictions in templates
Applied to files:
browser_tests/tests/queue/queueList.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} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
browser_tests/tests/queue/queueList.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 codebase
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Write expressive and self-documenting code to reduce the need for comments; clean redundant comments as you go
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Use refactoring to make complex code simpler
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Consider if there is a simpler way to introduce functionality before writing code; choose the simpler approach when possible
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
📚 Learning: 2025-12-09T02:44:38.234Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T02:44:38.234Z
Learning: Applies to **/*.{ts,tsx,vue} : Do not use `any` type in TypeScript code
Applied to files:
browser_tests/tests/queue/queueList.spec.ts
🧬 Code graph analysis (2)
browser_tests/tests/actionbar.spec.ts (1)
browser_tests/fixtures/ws.ts (1)
WsMessage(5-5)
browser_tests/fixtures/ws.ts (1)
src/schemas/apiSchema.ts (1)
StatusWsMessage(136-136)
⏰ 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: test
- GitHub Check: setup
- GitHub Check: lint-and-format
🔇 Additional comments (7)
browser_tests/tests/actionbar.spec.ts (2)
4-6: Typed fixtures imports look correct and consistentUsing
comfyPageFixture,webSocketFixture, and importingWsMessagefrom the shared fixture keeps the test aligned with the typed ws API and avoidsany. No changes needed.
64-76:satisfies WsMessageis a good, type‑safe patternBuilding the status payload inline and validating it with
satisfies WsMessagegives compile‑time guarantees without widening the value’s type and matches thews.triggersignature in the fixture. This is a solid use of the new WsMessage type.browser_tests/fixtures/ws.ts (1)
3-6: Strongly typed WebSocket fixture aligns with API schemaTyping
WsMessageoffStatusWsMessageand requiring it inws.triggerremovesanyand keeps tests in sync with the real status message schema. This will fail fast if the backend status shape changes, which is desirable. No further changes needed.Also applies to: 8-8
browser_tests/tests/queue/queueList.spec.ts (4)
1-29: Type‑safe test scaffolding for queue state looks solid
QueueState/QueueJobtuple types andQueueControllerwith a typedws.triggergive you strongly typed test helpers withoutany, and mergingcomfyPageFixturewithwebSocketFixturematches the existing Playwright fixture style. This is a clean foundation for the rest of the tests.
34-57: Queue controller helper cleanly models WS‑driven queue refreshRouting
/api/prompt,/api/history, and especially/api/queueoff an in‑memorystateplus thesynchelper that:
- updates
running/pending,- computes the total,
- emits a typed
WsMessage,- waits for the next
/api/queueresponse,nicely mirrors the real app behavior and keeps each test focused on assertions rather than wiring. The pattern should be stable and readable for future queue tests.
Also applies to: 119-157
84-104: Running vs pending jobs test exercises cancel affordance wellDriving distinct
runningandpendingjobs throughqueue.sync, then checking for exactly two items and a visible cancel action (viajob-action-cancel-runningorjob-action-cancel-hover) is a good high‑level assertion of the new job‑item UI and hover behavior. No issues from a test‑design or typing perspective.
107-117:queueJobfactory keeps test data DRY and aligned with queue schemaEncapsulating the queue tuple shape in
queueJobavoids repeated literals and makes it easier to evolve the mocked queue item structure later. This is a good use of a tiny factory helper.
| test('toggles overlay and updates count from status events', async ({ | ||
| comfyPage, | ||
| ws | ||
| }) => { | ||
| await queue.sync(ws, { running: [], pending: [] }) | ||
|
|
||
| await expect(comfyPage.queueList.toggleButton).toContainText('0') | ||
| await expect(comfyPage.queueList.toggleButton).toContainText(/queued/i) | ||
| await expect(comfyPage.queueList.overlay).toBeHidden() | ||
|
|
||
| await queue.sync(ws, { | ||
| pending: [queueJob('1', 'mock-pending', 'client-a')] | ||
| }) | ||
|
|
||
| await expect(comfyPage.queueList.toggleButton).toContainText('1') | ||
| await expect(comfyPage.queueList.toggleButton).toContainText(/queued/i) | ||
|
|
||
| await comfyPage.queueList.open() | ||
| await expect(comfyPage.queueList.overlay).toBeVisible() | ||
| await expect(comfyPage.queueList.jobItems).toHaveCount(1) | ||
|
|
||
| await comfyPage.queueList.close() | ||
| await expect(comfyPage.queueList.overlay).toBeHidden() | ||
| }) |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Good coverage of overlay toggle and count; consider asserting inline progress as well
This test validates the count text, overlay visibility, and item rendering end‑to‑end via mocked WS + /api/queue, which is great. To more directly cover the new inline progress indicator you might also assert on whatever element queueList.inlineProgress exposes (e.g., its visible count or label) so regressions in the top‑menu indicator itself are caught, not just the toggle button text.
🤖 Prompt for AI Agents
In browser_tests/tests/queue/queueList.spec.ts around lines 59-82, the test
verifies the toggle button count and overlay but omits assertions for the new
inline progress indicator; add assertions using
comfyPage.queueList.inlineProgress to assert its text/label reflects the queued
count (e.g., contains '0' and /queued/i initially, then '1' and /queued/i after
the pending update) and assert visibility/state as appropriate so the top-menu
indicator is validated alongside the toggle button and overlay.
christian-byrne
left a comment
christian-byrne
left a comment
There was a problem hiding this comment.
Would it be possible to break into smaller PRs? It's somewhat difficult to review currently.
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/components/TopMenuSection.vue(2 hunks)src/components/actionbar/ComfyActionbar.vue(6 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsVue component file names must use PascalCase; for example,
MenuHamburger.vue
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use<script setup lang="ts">for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
PreferuseModelto separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using<style>blocks in Vue components
Use semantic Tailwind values fromstyle.csstheme instead of thedark:variant; for example, usebg-node-component-surfaceinstead ofdark:prefixes
Always usecn()utility from@/utils/tailwindUtilto merge Tailwind class names; do not use:class="[]"syntax
Usereffor reactive state in Vue Composition API components
Implement computed properties withcomputed()from Vue; avoid using arefwith awatchif acomputedwould work instead
UsewatchandwatchEffectfor side effects in Vue components
Implement lifecycle hooks usingonMounted,onUpdated, and other Vue lifecycle functions
Useprovide/injectfor dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundantcomputed, and prefercomputedoverwatch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries insrc/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
🧠 Learnings (5)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/actionbar/ComfyActionbar.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 : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/actionbar/ComfyActionbar.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 : Replace PrimeVue Sidebar component with Drawer
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
🔇 Additional comments (7)
src/components/actionbar/ComfyActionbar.vue (4)
38-49: Good accessibility and UX implementation for cancel button.The cancel button properly implements:
- Tooltip with configuration
- Disabled state based on execution state
- ARIA label for accessibility
- Semantic styling with destructive color scheme
50-74: Excellent implementation of queue toggle with layout stability.The custom span implementation (lines 62-70) with
min-w-[2ch]andtabular-numsprevents layout shift when the count changes between 1-2 digits, which provides a better user experience.
87-92: Teleport target verification not needed - ref is safely initialized in parent component.The
inlineProgressTargetis populated fromtopMenuContainerprop, which receivesactionbarContainerReffrom TopMenuSection.vue. This ref is assigned directly to a DOM element at template definition (line 10), guaranteeing it's mounted before ComfyActionbar (child component) renders. Thev-if="inlineProgressTarget"check provides defensive safety. No timing issue exists here.
383-387: Clarify inlineProgressTarget logic for maintainability.The
inlineProgressTargetlogic has three paths:
- Returns
nullwhen not visible- Returns
panelElement.valuewhen floating- Returns
props.topMenuContainerwhen dockedThis creates different rendering behaviors between floating and docked modes. Consider adding a comment to explain why the progress is teleported to
panelElementwhen floating versustopMenuContainerwhen docked.Add a clarifying comment:
const inlineProgressTarget = computed(() => { if (!visible.value) return null + // When floating, render progress inside the floating panel + // When docked, render progress in the top menu container if (isFloating.value) return panelElement.value return props.topMenuContainer ?? null })Likely an incorrect or invalid review comment.
src/components/TopMenuSection.vue (3)
42-48: Good coordination of queue summary rendering between components.The conditional rendering of
QueueInlineProgressSummarycorrectly places it:
- In
TopMenuSectionwhen the actionbar is docked (line 44)- In
ComfyActionbarwhen floating (per ComfyActionbar line 79-84)This ensures the summary appears in the appropriate location based on the actionbar's state.
52-71: Appropriate refactoring of store dependencies.The removal of
useQueueStore,useExecutionStore, anduseCommandStoreis correct, as this logic has been moved intoComfyActionbar. TopMenuSection now only usesuseSettingStorefor menu positioning, which properly separates concerns.
19-23: No action needed—the v-model bindings are properly synchronized.The ComfyActionbar component correctly defines both emits:
update:dockedpaired with thedockedpropupdate:queueOverlayExpandedpaired with thequeueOverlayExpandedpropTopMenuSection properly binds these using v-model syntax with matching modifier names (
v-model:dockedandv-model:queue-overlay-expanded), and bothisActionbarDockedandisQueueOverlayExpandedare initialized as refs. The binding synchronization is correct and requires no changes.
| const panelElement = computed(() => { | ||
| const element = unrefElement(panelRef) | ||
| return element instanceof HTMLElement ? element : null | ||
| }) |
There was a problem hiding this comment.
Incorrect element extraction from Panel component ref.
The panelElement computed returns null when panelRef.value is a ComponentPublicInstance (which it will be, since it's bound to a PrimeVue Panel component at line 19). You need to extract the $el property from the component instance.
Apply this fix:
const panelElement = computed(() => {
const element = unrefElement(panelRef)
- return element instanceof HTMLElement ? element : null
+ if (element instanceof HTMLElement) return element
+ // Handle ComponentPublicInstance case
+ if (element && typeof element === 'object' && '$el' in element) {
+ const el = element.$el
+ return el instanceof HTMLElement ? el : null
+ }
+ return null
})📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const panelElement = computed(() => { | |
| const element = unrefElement(panelRef) | |
| return element instanceof HTMLElement ? element : null | |
| }) | |
| const panelElement = computed(() => { | |
| const element = unrefElement(panelRef) | |
| if (element instanceof HTMLElement) return element | |
| // Handle ComponentPublicInstance case | |
| if (element && typeof element === 'object' && '$el' in element) { | |
| const el = element.$el | |
| return el instanceof HTMLElement ? el : null | |
| } | |
| return null | |
| }) |
🤖 Prompt for AI Agents
In src/components/actionbar/ComfyActionbar.vue around lines 165 to 168, the
computed panelElement returns null when panelRef.value is a
ComponentPublicInstance; update the computed to unwrap the ref, detect if the
unwrapped value is a ComponentPublicInstance and if so use its $el, otherwise
use the element directly, then return the $el only if it is an HTMLElement (or
null otherwise); ensure you access $el safely (optional chaining) and keep the
same return type.
| // Queue and Execution logic | ||
| const { isIdle: isExecutionIdle } = storeToRefs(executionStore) | ||
| const queuedCount = computed(() => queueStore.pendingTasks.length) |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider using storeToRefs for consistent reactive access.
For consistency with the pattern used for executionStore at line 183, consider destructuring pendingTasks from queueStore using storeToRefs to ensure proper reactivity:
const { isIdle: isExecutionIdle } = storeToRefs(executionStore)
+const { pendingTasks } = storeToRefs(queueStore)
-const queuedCount = computed(() => queueStore.pendingTasks.length)
+const queuedCount = computed(() => pendingTasks.value.length)While direct store access works due to Pinia's reactivity, using storeToRefs provides consistency and clearer reactive dependencies.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const queuedCount = computed(() => queueStore.pendingTasks.length) | |
| const { isIdle: isExecutionIdle } = storeToRefs(executionStore) | |
| const { pendingTasks } = storeToRefs(queueStore) | |
| const queuedCount = computed(() => pendingTasks.value.length) |
🤖 Prompt for AI Agents
In src/components/actionbar/ComfyActionbar.vue around line 184, the computed
uses queueStore.pendingTasks directly which is inconsistent with the
executionStore pattern; destructure pendingTasks from queueStore using
storeToRefs (e.g., const { pendingTasks } = storeToRefs(queueStore)) and update
the computed to depend on that ref so reactivity is explicit and consistent with
executionStore usage.
| const queueToggleLabel = computed(() => | ||
| t('sideToolbar.queueProgressOverlay.toggleLabel', { | ||
| count: queuedCount.value | ||
| }) | ||
| ) | ||
| const queuedSuffix = computed(() => | ||
| t('sideToolbar.queueProgressOverlay.queuedSuffix') | ||
| ) | ||
| const queueHistoryTooltipConfig = computed(() => | ||
| buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory')) | ||
| ) | ||
| const cancelJobTooltipConfig = computed(() => | ||
| buildTooltipConfig(t('menu.interrupt')) | ||
| ) |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if the translation keys exist in the English locale file
keys=(
"sideToolbar.queueProgressOverlay.toggleLabel"
"sideToolbar.queueProgressOverlay.queuedSuffix"
"sideToolbar.queueProgressOverlay.viewJobHistory"
)
echo "Searching in src/locales/en/main.json:"
for key in "${keys[@]}"; do
echo ""
echo "Checking for key: $key"
rg -n "$key" src/locales/en/main.json || echo "NOT FOUND"
doneRepository: Comfy-Org/ComfyUI_frontend
Length of output: 334
Add missing translation keys to src/locales/en/main.json.
The code references translation keys that do not exist in the locale file:
sideToolbar.queueProgressOverlay.toggleLabelsideToolbar.queueProgressOverlay.queuedSuffixsideToolbar.queueProgressOverlay.viewJobHistory
These keys must be added to src/locales/en/main.json with appropriate English values.
🤖 Prompt for AI Agents
In src/components/actionbar/ComfyActionbar.vue around lines 185–198, the
component references three translation keys that are missing from
src/locales/en/main.json; add the following keys to that JSON file:
sideToolbar.queueProgressOverlay.toggleLabel (an English string with a count
placeholder, e.g. "Queue ({count})" or similar using your i18n placeholder
format), sideToolbar.queueProgressOverlay.queuedSuffix (e.g. "queued"), and
sideToolbar.queueProgressOverlay.viewJobHistory (e.g. "View job history");
ensure the placeholder syntax matches the project's i18n format and that keys
are placed under the correct nested sideToolbar.queueProgressOverlay object in
the English locale file.
| const queuedCount = computed(() => queueStore.pendingTasks.length) | ||
| const queueHistoryTooltipConfig = computed(() => | ||
| buildTooltipConfig(t('sideToolbar.queueProgressOverlay.viewJobHistory')) | ||
| const actionbarContainerRef = ref<HTMLElement>() |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Type mismatch between ref and prop expectation.
The actionbarContainerRef is typed as ref<HTMLElement>() which allows HTMLElement | undefined, but ComfyActionbar's topMenuContainer prop expects HTMLElement | null. While this works at runtime, it creates a type mismatch.
Update the ref type to match the prop expectation:
-const actionbarContainerRef = ref<HTMLElement>()
+const actionbarContainerRef = ref<HTMLElement | null>(null)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const actionbarContainerRef = ref<HTMLElement>() | |
| const actionbarContainerRef = ref<HTMLElement | null>(null) |
🤖 Prompt for AI Agents
In src/components/TopMenuSection.vue around line 80, the actionbarContainerRef
is currently declared as ref<HTMLElement>() which yields HTMLElement | undefined
but ComfyActionbar.topMenuContainer expects HTMLElement | null; update the ref
declaration to use the matching type and initial value (ref<HTMLElement |
null>(null)) so the type is HTMLElement | null and matches the prop expectation.
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 (1)
src/components/TopMenuSection.vue (1)
108-112: Consider using Tailwind instead of scoped CSS.Per coding guidelines, components should use Tailwind CSS only for styling. The
--comfy-menu-bgcustom property could be applied using Tailwind's arbitrary value syntax directly on the element.Replace the scoped style with an inline Tailwind class:
ref="actionbarContainerRef" - class="actionbar-container relative pointer-events-auto flex h-12 items-center overflow-hidden rounded-lg border border-interface-stroke px-2 shadow-interface" + class="relative pointer-events-auto flex h-12 items-center overflow-hidden rounded-lg border border-interface-stroke px-2 shadow-interface bg-[var(--comfy-menu-bg)]"Then remove the
<style scoped>block entirely.
♻️ Duplicate comments (4)
src/components/actionbar/ComfyActionbar.vue (3)
178-194: Verify translation keys exist in locale file.The code references translation keys that were flagged as missing in a previous review:
sideToolbar.queueProgressOverlay.toggleLabelsideToolbar.queueProgressOverlay.queuedSuffixsideToolbar.queueProgressOverlay.viewJobHistory#!/bin/bash # Verify translation keys exist in English locale file echo "Checking for required translation keys:" for key in "toggleLabel" "queuedSuffix" "viewJobHistory"; do echo "" echo "Searching for: $key" rg -n "$key" src/locales/en/main.json || echo "NOT FOUND" done
148-156: Redundant emission in watchEffect causes double updates.The computed setter at line 150 already emits
update:dockedwhen set internally. ThewatchEffectat line 156 emits again wheneverdocked.valuechanges, causing double emissions and potential update cycles when the parent changesprops.docked.Remove the redundant watchEffect:
-watchEffect(() => emit('update:docked', docked.value))
161-164: Incorrect element extraction from Panel component ref.Since
panelRefis bound to a PrimeVue Panel component,unrefElementreturns aComponentPublicInstance, not anHTMLElement. The current check will always returnnull, breakinginlineProgressTargetwhen floating.Apply this fix to extract
$elfrom the component instance:const panelElement = computed(() => { const element = unrefElement(panelRef) - return element instanceof HTMLElement ? element : null + if (element instanceof HTMLElement) return element + if (element && typeof element === 'object' && '$el' in element) { + const el = (element as ComponentPublicInstance).$el + return el instanceof HTMLElement ? el : null + } + return null })src/components/TopMenuSection.vue (1)
81-81: Type mismatch between ref and prop expectation.The
actionbarContainerRefis typed asref<HTMLElement>()which allowsHTMLElement | undefined, but ComfyActionbar'stopMenuContainerprop expectsHTMLElement | null.-const actionbarContainerRef = ref<HTMLElement>() +const actionbarContainerRef = ref<HTMLElement | null>(null)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/components/TopMenuSection.vue(1 hunks)src/components/actionbar/ComfyActionbar.vue(6 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsVue component file names must use PascalCase; for example,
MenuHamburger.vue
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use<script setup lang="ts">for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
PreferuseModelto separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using<style>blocks in Vue components
Use semantic Tailwind values fromstyle.csstheme instead of thedark:variant; for example, usebg-node-component-surfaceinstead ofdark:prefixes
Always usecn()utility from@/utils/tailwindUtilto merge Tailwind class names; do not use:class="[]"syntax
Usereffor reactive state in Vue Composition API components
Implement computed properties withcomputed()from Vue; avoid using arefwith awatchif acomputedwould work instead
UsewatchandwatchEffectfor side effects in Vue components
Implement lifecycle hooks usingonMounted,onUpdated, and other Vue lifecycle functions
Useprovide/injectfor dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundantcomputed, and prefercomputedoverwatch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries insrc/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
🧠 Learnings (24)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `watch` and `watchEffect` for side effects in Vue components
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state: prefer props, avoid redundant `computed`, and prefer `computed` over `watch`
Applied to files:
src/components/actionbar/ComfyActionbar.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 effects
Applied to files:
src/components/actionbar/ComfyActionbar.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 patterns
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work instead
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue Composition API components
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/components/actionbar/ComfyActionbar.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 : Extract complex conditionals to computed properties
Applied to files:
src/components/actionbar/ComfyActionbar.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 panels
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/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 : Implement computed properties with computed()
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T04:35:43.971Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:43.971Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/components/actionbar/ComfyActionbar.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/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use vue-i18n in composition API for any string literals; place new translation entries in `src/locales/en/main.json`
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-05T20:35:28.330Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/locales/en/main.json:2257-2272
Timestamp: 2025-12-05T20:35:28.330Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, vue-i18n pluralization uses a two-parameter pattern: `t('key', { count: value })` where the `count` property in the interpolation object automatically triggers plural selection from pipe-separated locale strings (e.g., "no items | 1 item | {count} items"). This is the correct pattern used throughout the codebase, as validated by Playwright tests.
Applied to files:
src/components/actionbar/ComfyActionbar.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 Drawer
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/components/actionbar/ComfyActionbar.vuesrc/components/TopMenuSection.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} : Avoid using ts-expect-error; use proper TypeScript types instead
Applied to files:
src/components/TopMenuSection.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.{ts,tsx,vue} : Never use `as any` type assertions; fix the underlying type issue instead
Applied to files:
src/components/TopMenuSection.vue
🔇 Additional comments (5)
src/components/actionbar/ComfyActionbar.vue (3)
38-74: Well-structured action bar controls.The queue controls are well-implemented with accessible labels, proper tooltip configurations, and tabular-nums for stable digit widths. The cancel button correctly uses destructive styling and disables when idle.
79-92: Clean conditional Teleport implementation.The inline progress components correctly use Teleport with a computed target, allowing flexible rendering based on dock state. The
v-ifguard on Teleport prevents rendering when no target is available.
410-412: Appropriate use ofdefineExpose.Exposing
isFloatingviadefineExposeis appropriate here as it allows parent components to check the actionbar state for coordinating UI rendering, which aligns with guidelines for imperative operations.src/components/TopMenuSection.vue (2)
19-23: Correct two-way binding with ComfyActionbar.The
v-model:dockedandv-model:queue-overlay-expandedbindings correctly establish two-way communication with ComfyActionbar, and passingactionbarContainerRefastop-menu-containerenables proper Teleport targeting.
42-48: Clean conditional rendering for inline progress.The
QueueInlineProgressSummaryis correctly shown only when the actionbar is docked (not floating), avoiding duplicate progress displays. The:hiddenprop correctly syncs with overlay expansion state.
| const isFloating = computed(() => visible.value && !docked.value) | ||
| const inlineProgressTarget = computed(() => { | ||
| if (!visible.value) return null | ||
| if (isFloating.value) return panelElement.value | ||
| return props.topMenuContainer ?? null | ||
| }) |
There was a problem hiding this comment.
inlineProgressTarget will fail when floating due to panelElement bug.
When isFloating is true, inlineProgressTarget returns panelElement.value, which is currently always null due to the panelElement computed issue flagged above. This will prevent the Teleport from rendering QueueInlineProgress when the actionbar is floating.
This will be resolved once the panelElement computed is fixed to extract $el from the component instance.
🤖 Prompt for AI Agents
In src/components/actionbar/ComfyActionbar.vue around lines 378 to 383,
inlineProgressTarget returns panelElement.value when floating but panelElement
is currently always null; update the panelElement computed so it extracts and
returns the component instance's $el (e.g., if panelRef.value is a component
instance return panelRef.value.$el, otherwise return panelRef.value or null), so
inlineProgressTarget receives a real DOM element and Teleport can render
QueueInlineProgress when floating.
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (5)
src/components/actionbar/ComfyActionbar.vue (5)
161-164: panelElement computed may not handle ComponentPublicInstance correctly.This issue was flagged in a previous review: when
panelRefis bound to a PrimeVuePanelcomponent (line 18),unrefElementreturns aComponentPublicInstance. While VueUse'sunrefElementshould handle component instances, the explicitinstanceof HTMLElementcheck may not work as expected for all cases.Verify that
panelElement.valuecorrectly returns the Panel's root DOM element when floating. Run this script to check VueUse's behavior:#!/bin/bash # Check VueUse version and unrefElement implementation rg -n "unrefElement" package.json rg -A10 "export.*unrefElement" node_modules/@vueuse/core -g "*.ts" | head -30If issues persist, consider extracting
$elexplicitly:const panelElement = computed(() => { const element = unrefElement(panelRef) - return element instanceof HTMLElement ? element : null + if (element instanceof HTMLElement) return element + // Handle ComponentPublicInstance + if (element && typeof element === 'object' && '$el' in element) { + const el = element.$el + return el instanceof HTMLElement ? el : null + } + return null })
181-194: Verify translation keys exist in locale file.This was flagged in a previous review: the translation keys used here may be missing from
src/locales/en/main.json:
sideToolbar.queueProgressOverlay.toggleLabel(line 182)sideToolbar.queueProgressOverlay.queuedSuffix(line 187)sideToolbar.queueProgressOverlay.viewJobHistory(line 190)#!/bin/bash # Verify translation keys exist keys=( "sideToolbar.queueProgressOverlay.toggleLabel" "sideToolbar.queueProgressOverlay.queuedSuffix" "sideToolbar.queueProgressOverlay.viewJobHistory" ) for key in "${keys[@]}"; do echo "Checking: $key" rg -n "$key" src/locales/en/main.json || echo " ❌ NOT FOUND" done
156-156: Redundant watchEffect still present despite previous review.The
watchEffectat line 156 was flagged in a previous review as causing redundant emissions, since the computed setter (lines 148-151) already emitsupdate:docked. This watchEffect causes double emissions and unnecessary emit-back-to-parent cycles. The comment was marked as addressed in commit 33626a5, but the code is still present.Remove this line and rely solely on the computed setter:
-watchEffect(() => emit('update:docked', docked.value))
180-180: Inconsistent reactive access pattern.This issue was flagged in a previous review:
queueStore.pendingTasksis accessed directly (line 180) whileexecutionStoreusesstoreToRefs(line 179). While direct access works with Pinia's reactivity, usingstoreToRefsconsistently makes reactive dependencies explicit.const { isIdle: isExecutionIdle } = storeToRefs(executionStore) +const { pendingTasks } = storeToRefs(queueStore) -const queuedCount = computed(() => queueStore.pendingTasks.length) +const queuedCount = computed(() => pendingTasks.value.length)
379-383: inlineProgressTarget depends on panelElement fix.This was flagged in a previous review: when
isFloatingis true,inlineProgressTargetreturnspanelElement.value, which may benulldue to thepanelElementcomputed issue (lines 161-164). This will prevent the Teleport from renderingQueueInlineProgresswhen floating.This issue will be resolved once the
panelElementcomputed correctly extracts the Panel component's$el.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/actionbar/ComfyActionbar.vue(6 hunks)
🧰 Additional context used
📓 Path-based instructions (12)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/actionbar/ComfyActionbar.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/components/actionbar/ComfyActionbar.vue
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/components/actionbar/ComfyActionbar.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/actionbar/ComfyActionbar.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/actionbar/ComfyActionbar.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/components/actionbar/ComfyActionbar.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsVue component file names must use PascalCase; for example,
MenuHamburger.vue
Files:
src/components/actionbar/ComfyActionbar.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/actionbar/ComfyActionbar.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/actionbar/ComfyActionbar.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use<script setup lang="ts">for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
PreferuseModelto separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using<style>blocks in Vue components
Use semantic Tailwind values fromstyle.csstheme instead of thedark:variant; for example, usebg-node-component-surfaceinstead ofdark:prefixes
Always usecn()utility from@/utils/tailwindUtilto merge Tailwind class names; do not use:class="[]"syntax
Usereffor reactive state in Vue Composition API components
Implement computed properties withcomputed()from Vue; avoid using arefwith awatchif acomputedwould work instead
UsewatchandwatchEffectfor side effects in Vue components
Implement lifecycle hooks usingonMounted,onUpdated, and other Vue lifecycle functions
Useprovide/injectfor dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundantcomputed, and prefercomputedoverwatch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries insrc/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead
Files:
src/components/actionbar/ComfyActionbar.vue
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/components/actionbar/ComfyActionbar.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/components/actionbar/ComfyActionbar.vue
🧠 Learnings (25)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/actionbar/ComfyActionbar.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 Drawer
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue TabMenu component with Tabs without panels
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state: prefer props, avoid redundant `computed`, and prefer `computed` over `watch`
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `watch` and `watchEffect` for side effects in Vue components
Applied to files:
src/components/actionbar/ComfyActionbar.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 effects
Applied to files:
src/components/actionbar/ComfyActionbar.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 patterns
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work instead
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue Composition API components
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties
Applied to files:
src/components/actionbar/ComfyActionbar.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 panels
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement computed properties with computed()
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaks
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T04:35:43.971Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/locales/en/main.json:774-780
Timestamp: 2025-12-09T04:35:43.971Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, locale files other than `src/locales/en/main.json` are generated automatically on every release. Developers only need to add English (en) key/values in `src/locales/en/main.json` when making PRs; manual updates to other locale files (fr, ja, ko, ru, zh, zh-TW, es, ar, tr, etc.) are not required and should not be suggested in reviews.
Applied to files:
src/components/actionbar/ComfyActionbar.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/actionbar/ComfyActionbar.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use vue-i18n in composition API for any string literals; place new translation entries in `src/locales/en/main.json`
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-05T20:35:28.330Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/locales/en/main.json:2257-2272
Timestamp: 2025-12-05T20:35:28.330Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, vue-i18n pluralization uses a two-parameter pattern: `t('key', { count: value })` where the `count` property in the interpolation object automatically triggers plural selection from pipe-separated locale strings (e.g., "no items | 1 item | {count} items"). This is the correct pattern used throughout the codebase, as validated by Playwright tests.
Applied to files:
src/components/actionbar/ComfyActionbar.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 Teleport/Suspense when needed for component rendering
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/components/actionbar/ComfyActionbar.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 needed
Applied to files:
src/components/actionbar/ComfyActionbar.vue
📚 Learning: 2025-12-09T21:40:12.361Z
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.
Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.
Applied to files:
src/components/actionbar/ComfyActionbar.vue
| <Panel | ||
| ref="panelRef" | ||
| :class="panelRootClass" | ||
| :pt="{ | ||
| header: { class: 'hidden' }, | ||
| content: { class: docked ? 'p-0' : 'p-1' } | ||
| }" | ||
| > |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# First, let's examine the ComfyActionbar.vue file to see the full Panel usage
fd -type f -name "ComfyActionbar.vue"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 240
🏁 Script executed:
#!/bin/bash
# Find the ComfyActionbar.vue file
fd "ComfyActionbar.vue"Repository: Comfy-Org/ComfyUI_frontend
Length of output: 113
🏁 Script executed:
#!/bin/bash
# Read the ComfyActionbar.vue file to understand Panel usage
cat -n src/components/actionbar/ComfyActionbar.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 16074
🏁 Script executed:
#!/bin/bash
# Check for other uses of PrimeVue Panel in the codebase
rg "from 'primevue/panel'" --type vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 97
🏁 Script executed:
#!/bin/bash
# Check for other uses of PrimeVue Panel in the codebase
rg "from 'primevue/panel'" --type tsRepository: Comfy-Org/ComfyUI_frontend
Length of output: 185
🏁 Script executed:
#!/bin/bash
# Search for actual <Panel usage in templates
rg "<Panel" --max-count 20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 1307
🏁 Script executed:
#!/bin/bash
# Check SelectionToolbox.vue to see Panel usage pattern
grep -A 20 "<Panel" src/components/graph/SelectionToolbox.vueRepository: Comfy-Org/ComfyUI_frontend
Length of output: 982
🏁 Script executed:
#!/bin/bash
# Check if shadcn/vue is used in the project and what components are available
find src/components -name "*.vue" -path "*/ui/*" | head -20Repository: Comfy-Org/ComfyUI_frontend
Length of output: 105
🏁 Script executed:
#!/bin/bash
# Check package.json for shadcn/vue and Reka UI dependencies
cat package.json | grep -A 100 '"dependencies"' | grep -E '"(shadcn|reka|primevue)"'Repository: Comfy-Org/ComfyUI_frontend
Length of output: 97
🏁 Script executed:
#!/bin/bash
# Check if there's a style.css or design system that defines --p-panel-border-radius
rg "--p-panel-border-radius" --max-count 5Repository: Comfy-Org/ComfyUI_frontend
Length of output: 495
🏁 Script executed:
#!/bin/bash
# Check if there's a style.css or design system that defines PrimeVue panel border radius
rg "panel-border-radius" --max-count 5Repository: Comfy-Org/ComfyUI_frontend
Length of output: 307
🏁 Script executed:
#!/bin/bash
# Let's check what the Panel's border-radius should be by looking at other components
rg "rounded-\[" src/components/actionbar/ComfyActionbar.vue | head -5Repository: Comfy-Org/ComfyUI_frontend
Length of output: 219
🏁 Script executed:
#!/bin/bash
# Quick check: what's the typical rounded value used in the project
rg "rounded-lg|rounded-md|rounded-\[" src/components/button/ | head -3Repository: Comfy-Org/ComfyUI_frontend
Length of output: 344
Replace PrimeVue Panel with HTML div and Tailwind CSS.
The Panel component from PrimeVue is newly introduced in this refactor. Per coding guidelines, avoid new usage of PrimeVue components; instead use standard HTML elements with Tailwind CSS. Since the Panel is only being used as a styled container with a hidden header, replace it with a <div> and adjust the styling to use Tailwind's rounded-lg instead of the PrimeVue CSS variable --p-panel-border-radius. The :pt passthrough props can be removed and their styles merged directly into the Tailwind classes.
🤖 Prompt for AI Agents
In src/components/actionbar/ComfyActionbar.vue around lines 18 to 25, replace
the PrimeVue <Panel> usage with a standard <div>: remove the :pt passthrough
prop and any PrimeVue-specific attributes, keep the existing ref (use
ref="panelRef" on the div), merge styles into Tailwind classes by adding
rounded-lg (instead of --p-panel-border-radius) and combine panelRootClass with
conditional content padding (use docked ? 'p-0' : 'p-1'), and drop the hidden
header passthrough since there is no Panel header to hide.
| const cancelCurrentJob = async () => { | ||
| if (isExecutionIdle.value) return | ||
| await commandStore.execute('Comfy.Interrupt') | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Add error handling for command execution.
The cancelCurrentJob function executes a command without error handling. If commandStore.execute fails, the error will propagate unhandled, potentially causing poor UX.
const cancelCurrentJob = async () => {
if (isExecutionIdle.value) return
- await commandStore.execute('Comfy.Interrupt')
+ try {
+ await commandStore.execute('Comfy.Interrupt')
+ } catch (error) {
+ console.error('Failed to interrupt execution:', error)
+ // Consider showing user feedback (toast/notification)
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const cancelCurrentJob = async () => { | |
| if (isExecutionIdle.value) return | |
| await commandStore.execute('Comfy.Interrupt') | |
| } | |
| const cancelCurrentJob = async () => { | |
| if (isExecutionIdle.value) return | |
| try { | |
| await commandStore.execute('Comfy.Interrupt') | |
| } catch (error) { | |
| console.error('Failed to interrupt execution:', error) | |
| // Consider showing user feedback (toast/notification) | |
| } | |
| } |
🤖 Prompt for AI Agents
In src/components/actionbar/ComfyActionbar.vue around lines 200 to 203,
cancelCurrentJob calls commandStore.execute('Comfy.Interrupt') with no error
handling; wrap the await call in a try/catch, handle failures by catching the
error, logging it (use the component logger or console.error), and surface a
user-friendly notification or set an error state so the UI can reflect the
failure; ensure the function still returns/cleans up appropriately after an
error.
| defineExpose({ | ||
| isFloating | ||
| }) |
There was a problem hiding this comment.
defineExpose used for state instead of imperative operations.
According to coding guidelines: "Use defineExpose only for imperative operations (such as form.validate(), modal.open())". Exposing isFloating (a computed boolean state) violates this guideline.
As per coding guidelines, consider alternatives:
- Emit as event: Emit
update:floatingwheneverisFloatingchanges, similar to thedockedprop pattern - Provide as prop: If parent needs read-only access, add a
floatingprop for two-way binding
Example using emit pattern:
+const emit = defineEmits<{
+ (e: 'update:queueOverlayExpanded', value: boolean): void
+ (e: 'update:docked', value: boolean): void
+ (e: 'update:floating', value: boolean): void
+}>()
+
+watchEffect(() => emit('update:floating', isFloating.value))
+
-defineExpose({
- isFloating
-})Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/components/actionbar/ComfyActionbar.vue around lines 410 to 412, remove
the use of defineExpose({ isFloating }) because we must not expose reactive
state; instead replace it by emitting changes or adding a prop: stop exposing
isFloating and implement either (a) emit an "update:floating" event whenever the
internal computed/boolean changes (mirror the docked prop pattern) so parent can
v-model the floating state, or (b) add a readonly floating prop (or a v-model:
floating prop) and drive the internal state from that prop; ensure you remove
defineExpose and wire the emit/prop updates and types consistently.
yeah I got it |
Summary
Refactor the Queue UI to replace the floating 'Active' overlay with an inline progress indicator in the top menu bar, user experience.
Changes
QueueOverlayActivewithQueueInlineProgressandQueueInlineProgressSummaryinTopMenuSection.QueueJobItemto use a configuration-based action system for improved maintainability.JobFiltersBarandQueueOverlayActivecomponents.QueueOverlayExpandedto polish the layout.Review Focus
TopMenuSection.QueueJobItem.