Subgraph/workflow breadcrumbs menu updates #7852
Conversation
- Add menu button to WorkflowTab for quick workflow actions - Add menu and back button to SubgraphBreadcrumb - Extract shared menu items to useBreadcrumbMenu composable - Add Comfy.RenameWorkflow command for renaming persisted workflows - Menu always shows root workflow menu, even when in subgraph
📝 WalkthroughWalkthroughAdds a workflow actions composable and OverlayIcon component, integrates menu/rename flows into breadcrumb and topbar components, introduces a Rename Workflow core command, and updates breadcrumb navigation with menu/back controls, per-item refs, and rename/menu wiring. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BreadcrumbItem as SubgraphBreadcrumbItem
participant ActionsMenu as useWorkflowActionsMenu
participant CommandStore
participant WorkflowService
User->>BreadcrumbItem: Click menu button (handleClick / handleMenuClick)
BreadcrumbItem->>ActionsMenu: request menu items / startRename
ActionsMenu->>CommandStore: invoke command (e.g., Comfy.RenameWorkflow) or trigger action
alt Rename via command
CommandStore->>User: prompt for new filename
User->>CommandStore: submit name
CommandStore->>WorkflowService: renameWorkflow(workflow, newPath)
WorkflowService-->>ActionsMenu: confirm rename
ActionsMenu-->>BreadcrumbItem: update label/title via updateTitle
else Other menu action (navigate/duplicate/etc.)
ActionsMenu->>WorkflowService: perform action (open/navigate/duplicate)
WorkflowService-->>CommandStore: update state
CommandStore-->>BreadcrumbItem: reflect state changes
end
sequenceDiagram
participant User
participant Breadcrumb as SubgraphBreadcrumb
participant CommandStore
participant Canvas
User->>Breadcrumb: Click subgraph breadcrumb item
Breadcrumb->>CommandStore: execute navigation command (subgraph-{id})
CommandStore->>Canvas: switch to subgraph context
Canvas-->>Breadcrumb: update navigationStack / active item
Breadcrumb->>User: show breadcrumb controls (isInSubgraph = true)
User->>Breadcrumb: Click Back button
Breadcrumb->>CommandStore: execute ExitSubgraph
CommandStore->>Canvas: switch to parent/root graph
Canvas-->>Breadcrumb: clear navigationStack
Breadcrumb->>User: hide breadcrumb controls
Possibly related PRs
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/12/2026, 10:24:55 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Tests: ❌ FailedResults: 502 passed, 1 failed, 1 flaky, 8 skipped (Total: 512) ❌ Failed Tests📊 Browser Reports
|
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.32 MB (baseline 3.32 MB) • ⚪ 0 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 1.04 MB (baseline 1.03 MB) • 🔴 +8.4 kBGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.63 kB (baseline 6.63 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 337 kB (baseline 337 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 199 kB (baseline 199 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: 2 added / 2 removed Utilities & Hooks — 1.41 kB (baseline 1.41 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 9.19 MB (baseline 9.19 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Status: 1 added / 1 removed Other — 4.74 MB (baseline 4.74 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
pythongosssss
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
github-actions
bot
removed
the
New Browser Test Expectations
dosubot
bot
added
the
size:L
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/breadcrumb/SubgraphBreadcrumb.vue (1)
119-127: Missing error handling in subgraph navigation command.Lines 123-126 throw a TypeError if
canvas.graphis null, similar to the home command. This should handle errors gracefully instead of throwing.🔎 Proposed fix
command: () => { useTelemetry()?.trackUiButtonClicked({ button_id: 'breadcrumb_subgraph_item_selected' }) const canvas = useCanvasStore().getCanvas() - if (!canvas.graph) throw new TypeError('Canvas has no graph') + if (!canvas.graph) { + console.error('Canvas has no graph') + return + } canvas.setGraph(subgraph) },
🤖 Fix all issues with AI Agents
In @src/components/breadcrumb/SubgraphBreadcrumb.vue:
- Around line 99-113: The breadcrumb's home computed property command currently
throws a TypeError when canvas.graph is missing; wrap the command body in a
try/catch to prevent an unhandled exception, e.g., in the computed property home
-> command: call useCanvasStore().getCanvas(), check for canvas and
canvas.graph, and if missing handle gracefully in the catch by logging the error
(or using the app's notifier/telemetry) and returning early instead of throwing;
keep the existing telemetry.trackUiButtonClicked call and only call
canvas.setGraph(canvas.graph.rootGraph) when canvas.graph is present.
- Around line 150-152: The handler handleBackClick is calling
useCommandStore().execute('Comfy.Graph.ExitSubgraph') and dropping the returned
Promise with void, so failures will be lost; make handleBackClick async, await
useCommandStore().execute(...) and wrap the await in a try/catch (or return the
Promise) to surface/log errors (reference handleBackClick and
useCommandStore().execute).
In @src/components/topbar/WorkflowTab.vue:
- Around line 150-159: Guard against a null/undefined workflow before accessing
its properties: check props.workflowOption.workflow and use a safe fallback when
building rootMenuItem (e.g., use a default label like 'Untitled' and isBlueprint
= false) so that label and the call to
useSubgraphStore().isSubgraphBlueprint(...) never read properties of null; then
pass that safe rootMenuItem into useBreadcrumbMenu and keep the existing command
invocation useCommandStore().execute('Comfy.RenameWorkflow').
In @src/composables/useBreadcrumbMenu.ts:
- Around line 29-30: The code dereferences workflowStore.activeWorkflow with a
non-null assertion when calling workflowService.duplicateWorkflow, risking a
runtime error if no workflow is active; add a guard in the useBreadcrumbMenu
action so you check that workflowStore.activeWorkflow is defined before calling
duplicateWorkflow (e.g., if not defined, return early or show an error/disable
the action), and use the non-asserted value (no "!") when passing it to
workflowService.duplicateWorkflow to ensure safe runtime behavior.
- Line 71: The code dereferences workflowStore.activeWorkflow with a non-null
assertion when calling saveWorkflowAs, which can throw if activeWorkflow is
null; add a null/undefined guard before calling workflowService.saveWorkflowAs
(e.g., check if workflowStore.activeWorkflow is present and handle the missing
case by returning early or showing an error) and only call
workflowService.saveWorkflowAs(workflowStore.activeWorkflow) when the guard
passes; update any caller paths that assume success accordingly.
- Line 85: The code dereferences workflowStore.activeWorkflow with a non-null
assertion when calling workflowService.deleteWorkflow; add a null/undefined
guard before calling deleteWorkflow (e.g., check if workflowStore.activeWorkflow
exists and return or throw a handled error if not) and pass the validated value
to workflowService.deleteWorkflow instead of using the `!` operator so you avoid
potential runtime exceptions.
- Around line 17-90: The computed menuItems currently includes entries with a
visible property so hidden items remain in the array; change the logic inside
the computed menuItems to only return items that meet their visibility
conditions (e.g., include entries conditionally instead of setting visible) and
filter out falsy entries before returning, ensuring you also avoid
leading/trailing or duplicate separators when conditions remove neighboring
items; update the computed block that builds MenuItem[] (menuItems) to construct
items conditionally and then call a final .filter(Boolean) and a small pass to
collapse/remove redundant separators.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (24)
browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-default-workflow-mobile-chrome-linux.pngis excluded by!**/*.pngbrowser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-empty-canvas-mobile-chrome-linux.pngis excluded by!**/*.pngbrowser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-linux.pngis excluded by!**/*.pngbrowser_tests/tests/viewport.spec.ts-snapshots/viewport-fits-when-saved-offscreen-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 (5)
src/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/topbar/WorkflowTab.vuesrc/composables/useBreadcrumbMenu.tssrc/composables/useCoreCommands.ts
🧰 Additional context used
📓 Path-based instructions (16)
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/components/topbar/WorkflowTab.vuesrc/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.tssrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.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/topbar/WorkflowTab.vuesrc/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.tssrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/topbar/WorkflowTab.vuesrc/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.tssrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/topbar/WorkflowTab.vuesrc/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.tssrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.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/topbar/WorkflowTab.vuesrc/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.tssrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components
Files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
**/*.vue
📄 CodeRabbit inference engine (AGENTS.md)
**/*.vue: Use Vue 3.5+ with TypeScript in.vuefiles, exclusively using Composition API with<script setup lang="ts">syntax
Use Tailwind 4 for styling in Vue components; avoid<style>blocks
Name Vue components using PascalCase (e.g.,MenuHamburger.vue)
Use Vue 3.5 TypeScript-style default prop declaration with reactive props destructuring; do not usewithDefaultsor runtime props declaration
Prefercomputed()overrefwithwatchwhen deriving values
PreferuseModelover separately defining prop and emit for two-way binding
Usevue-i18nin composition API for string literals; place new translation entries insrc/locales/en/main.json
Usecn()utility function from@/utils/tailwindUtilfor merging Tailwind class names; do not use:class="[]"syntax
Do not use thedark:Tailwind variant; use semantic values from thestyle.csstheme instead (e.g.,bg-node-component-surface)
Do not use!importantor the!important prefix for Tailwind classes; find and correct interfering!importantclasses instead
Avoid new usage of PrimeVue components; use VueUse, shadcn/vue, or Reka UI instead
Leverage VueUse functions for performance-enhancing styles in Vue components
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
Files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Use TypeScript exclusively; do not write new JavaScript code
Use sorted and grouped imports organized by plugin/source
Enforce ESLint rules including Vue + TypeScript rules, disallow floating promises, disallow unused imports, and restrict i18n raw text in templates
Do not useanytype oras anytype assertions; fix the underlying type issue instead
Write code that is expressive and self-documenting; avoid redundant comments and clean as you go
Keep functions short and functional; minimize nesting and follow the arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Use function declarations instead of function expressions when possible
Use es-toolkit for utility functions
Implement proper error handling in code
Files:
src/components/topbar/WorkflowTab.vuesrc/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.tssrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
**/*.{ts,tsx,vue,js,jsx,json,css}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, and 80-character line width
Files:
src/components/topbar/WorkflowTab.vuesrc/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.tssrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.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/useCoreCommands.tssrc/composables/useBreadcrumbMenu.ts
**/**/use[A-Z]*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables using the pattern
useXyz.ts
Files:
src/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Minimize the surface area (exported values) of each module and composable
Files:
src/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.ts
🧠 Learnings (34)
📓 Common learnings
Learnt from: Myestery
Repo: Comfy-Org/ComfyUI_frontend PR: 7422
File: .github/workflows/pr-update-playwright-expectations.yaml:131-135
Timestamp: 2025-12-12T23:02:37.473Z
Learning: In the `.github/workflows/pr-update-playwright-expectations.yaml` workflow in the Comfy-Org/ComfyUI_frontend repository, the snapshot update process is intentionally scoped to only add and update snapshot images. Deletions of snapshot files are handled explicitly outside this workflow and should not be suggested as part of this automation.
📚 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/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.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/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.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/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumb.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/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.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/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-16T22:26:49.463Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-22T21:36:08.369Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.tssrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-18T21:15:46.862Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-21T01:06:02.786Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-18T16:03:02.066Z
Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/composables/useCoreCommands.tssrc/composables/useBreadcrumbMenu.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumbItem.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/breadcrumb/SubgraphBreadcrumbItem.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/breadcrumb/SubgraphBreadcrumbItem.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumbItem.vue
📚 Learning: 2025-12-21T06:04:12.562Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.vue : Leverage VueUse functions for performance-enhancing styles in Vue components
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumbItem.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/breadcrumb/SubgraphBreadcrumbItem.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/breadcrumb/SubgraphBreadcrumbItem.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/breadcrumb/SubgraphBreadcrumbItem.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/breadcrumb/SubgraphBreadcrumbItem.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/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-21T06:04:12.562Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.vue : Use Vue 3.5+ with TypeScript in `.vue` files, exclusively using Composition API with `<script setup lang="ts">` syntax
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-21T06:04:12.562Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components; use VueUse, shadcn/vue, or Reka UI instead
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.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 Chips component with AutoComplete with multiple enabled
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/stores/**/*.{ts,tsx} : Use TypeScript for type safety in state management stores
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
🧬 Code graph analysis (2)
src/composables/useCoreCommands.ts (1)
src/stores/queueStore.ts (1)
workflow(314-316)
src/composables/useBreadcrumbMenu.ts (1)
src/stores/commandStore.ts (1)
useCommandStore(75-147)
🔇 Additional comments (11)
src/composables/useCoreCommands.ts (1)
177-196: LGTM! The rename workflow command is well-implemented.The command correctly:
- Guards against null workflows and non-persisted workflows
- Prompts for a new filename with the current filename as default
- Validates that the new name differs from the current name
- Constructs the new path by combining directory + filename + extension
- Delegates to the workflow service for the actual rename operation
The path construction on line 193 correctly uses the workflow's directory and appends
.json, ensuring the renamed file stays in the same location.src/components/topbar/WorkflowTab.vue (2)
10-18: LGTM! Context menu button is correctly implemented.The button:
- Only renders when
isActiveTabis true- Uses appropriate styling and size
- Stops event propagation with
@click.stopto prevent triggering the parent click handler- Uses PrimeIcons consistently with other menu buttons in the codebase
174-180: No action needed; the implementation is correct.The Menu ref is properly initialized because both the button (line 11,
v-if="isActiveTab") and the Menu component (line 48,v-if="isActiveTab") are conditionally rendered with the same reactive condition. WhenisActiveTabis true, both the triggering button and the Menu are mounted. SincehandleMenuClickcan only be called when the button is visible,menu.valuewill always be defined. The optional chaining (?.toggle()) is appropriate defensive programming and consistent with similar patterns throughout the codebase (e.g.,TopbarBadge.vue,ComfyMenuButton.vue). No race conditions exist because both button and menu visibility are tied to the same reactive value.src/components/breadcrumb/SubgraphBreadcrumbItem.vue (4)
28-28: Menu rendering extended to root item - verify menu items are appropriate.The Menu now renders when
isActive || isRoot, meaning the root item can show a menu even when not active. Ensure the menu items returned byuseBreadcrumbMenuare appropriate for both active and inactive root items.Based on the
useBreadcrumbMenuimplementation, whenisRootis true, the menu includes save/delete actions even if not active. This might be intentional for allowing quick access to workflow actions from the collapsed breadcrumb.Verify this behavior aligns with the UX design intent, especially when the breadcrumb is collapsed and only the root item is visible.
139-158: LGTM! The startRename function handles collapsed breadcrumb correctly.The function:
- Checks if the root element is hidden using
offsetParent === null(correct check for CSSdisplay:none)- Falls back to executing the rename command when collapsed (line 143)
- Otherwise enables in-place editing with proper focus and selection (lines 147-157)
- Dynamically sizes the input to match or exceed the wrapper width (line 154)
This is a well-thought-out solution for handling both expanded and collapsed states.
189-195: LGTM! Exposing toggleMenu enables external control.The
toggleMenumethod is exposed viadefineExpose, allowing parent components (like SubgraphBreadcrumb.vue) to programmatically open the menu. This is a clean API for inter-component communication.
10-10: No layout concern — height is consistently aligned across all breadcrumb components.The
h-8height is already applied consistently throughout the breadcrumb system. The parent container (SubgraphBreadcrumb.vue) usesh-8, as do the menu buttons and all breadcrumb items. All components are uniformly sized, so there is no visual misalignment risk with adjacent elements.src/components/breadcrumb/SubgraphBreadcrumb.vue (3)
16-23: LGTM! Context menu button is well-implemented.The button:
- Uses consistent styling with other breadcrumb controls
- Has appropriate transitions and hover states
- Uses PrimeVue Button component as per project guidelines
- Has proper icon and accessibility attributes
24-33: LGTM! Back button is conditionally rendered and accessible.The button:
- Only shows when in a subgraph (
v-if="isInSubgraph")- Uses a clear "undo" icon to indicate navigation back
- Has consistent styling with the menu button
- Properly wires to
handleBackClick
143-148: LGTM! Menu click handler is correctly implemented.The handler:
- Logs telemetry for UI tracking
- Safely accesses
rootItemRefwith optional chaining- Passes the event to toggle the menu at the correct position
src/composables/useBreadcrumbMenu.ts (1)
23-23: The rename action is properly protected against non-persisted workflows.The disabled state at line 23 correctly prevents UI interaction for non-persisted workflows (
disabled: isRoot && !workflowStore.activeWorkflow?.isPersisted). The edge case concern about direct callback invocation is already mitigated: the underlyingComfy.RenameWorkflowcommand handler validatesif (!workflow || !workflow.isPersisted) return, providing a safeguard against programmatic invocation bypassing the disabled state. No changes needed.
| :ref=" | ||
| (el) => { | ||
| const ref = el as | ||
| | InstanceType<typeof SubgraphBreadcrumbItem> | ||
| | undefined | ||
| if (item.key === 'root') rootItemRef = ref | ||
| if (item.key === activeItemKey) activeItemRef = ref | ||
| } | ||
| " |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Verify type safety of ref callback.
The ref callback casts el to InstanceType<typeof SubgraphBreadcrumbItem> | undefined and assigns refs based on item keys. This pattern works but could be fragile if the component type changes.
Consider using a more type-safe approach with a Map or dedicated ref handling:
🔎 Alternative approach
const itemRefs = new Map<string, InstanceType<typeof SubgraphBreadcrumbItem>>()
const setItemRef = (key: string) => (el: unknown) => {
const ref = el as InstanceType<typeof SubgraphBreadcrumbItem> | undefined
if (ref) {
itemRefs.set(key, ref)
if (key === 'root') rootItemRef.value = ref
if (key === activeItemKey.value) activeItemRef.value = ref
}
}
// In template:
// :ref="setItemRef(item.key)"| const handleBackClick = () => { | ||
| void useCommandStore().execute('Comfy.Graph.ExitSubgraph') | ||
| } |
There was a problem hiding this comment.
Missing await for async command execution.
Line 151 calls useCommandStore().execute() which returns a Promise, but the result is voided without awaiting. If the command fails, the error won't be caught.
🔎 Proposed fix
-const handleBackClick = () => {
+const handleBackClick = async () => {
- void useCommandStore().execute('Comfy.Graph.ExitSubgraph')
+ try {
+ await useCommandStore().execute('Comfy.Graph.ExitSubgraph')
+ } catch (error) {
+ console.error('Failed to exit subgraph:', error)
+ }
}📝 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 handleBackClick = () => { | |
| void useCommandStore().execute('Comfy.Graph.ExitSubgraph') | |
| } | |
| const handleBackClick = async () => { | |
| try { | |
| await useCommandStore().execute('Comfy.Graph.ExitSubgraph') | |
| } catch (error) { | |
| console.error('Failed to exit subgraph:', error) | |
| } | |
| } |
🤖 Prompt for AI Agents
In @src/components/breadcrumb/SubgraphBreadcrumb.vue around lines 150 - 152, The
handler handleBackClick is calling
useCommandStore().execute('Comfy.Graph.ExitSubgraph') and dropping the returned
Promise with void, so failures will be lost; make handleBackClick async, await
useCommandStore().execute(...) and wrap the await in a try/catch (or return the
Promise) to surface/log errors (reference handleBackClick and
useCommandStore().execute).
src/composables/useBreadcrumbMenu.ts
Outdated
| await workflowService.duplicateWorkflow(workflowStore.activeWorkflow!) | ||
| }, |
There was a problem hiding this comment.
Missing null check before dereferencing activeWorkflow.
Line 29 uses workflowStore.activeWorkflow! with a non-null assertion, but there's no guard ensuring activeWorkflow exists. If duplicateWorkflow is invoked when no workflow is active, this will throw a runtime error.
🔎 Proposed fix
command: async () => {
+ if (!workflowStore.activeWorkflow) return
await workflowService.duplicateWorkflow(workflowStore.activeWorkflow!)
},📝 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.
| await workflowService.duplicateWorkflow(workflowStore.activeWorkflow!) | |
| }, | |
| command: async () => { | |
| if (!workflowStore.activeWorkflow) return | |
| await workflowService.duplicateWorkflow(workflowStore.activeWorkflow!) | |
| }, |
🤖 Prompt for AI Agents
In @src/composables/useBreadcrumbMenu.ts around lines 29 - 30, The code
dereferences workflowStore.activeWorkflow with a non-null assertion when calling
workflowService.duplicateWorkflow, risking a runtime error if no workflow is
active; add a guard in the useBreadcrumbMenu action so you check that
workflowStore.activeWorkflow is defined before calling duplicateWorkflow (e.g.,
if not defined, return early or show an error/disable the action), and use the
non-asserted value (no "!") when passing it to workflowService.duplicateWorkflow
to ensure safe runtime behavior.
src/composables/useBreadcrumbMenu.ts
Outdated
| label: t('subgraphStore.publish'), | ||
| icon: 'pi pi-copy', | ||
| command: async () => { | ||
| await workflowService.saveWorkflowAs(workflowStore.activeWorkflow!) |
There was a problem hiding this comment.
Missing null check before dereferencing activeWorkflow.
Line 71 uses workflowStore.activeWorkflow! with a non-null assertion, but there's no guard ensuring activeWorkflow exists when publishing a blueprint.
🔎 Proposed fix
command: async () => {
+ if (!workflowStore.activeWorkflow) return
await workflowService.saveWorkflowAs(workflowStore.activeWorkflow!)
},📝 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.
| await workflowService.saveWorkflowAs(workflowStore.activeWorkflow!) | |
| command: async () => { | |
| if (!workflowStore.activeWorkflow) return | |
| await workflowService.saveWorkflowAs(workflowStore.activeWorkflow!) | |
| }, |
🤖 Prompt for AI Agents
In @src/composables/useBreadcrumbMenu.ts at line 71, The code dereferences
workflowStore.activeWorkflow with a non-null assertion when calling
saveWorkflowAs, which can throw if activeWorkflow is null; add a null/undefined
guard before calling workflowService.saveWorkflowAs (e.g., check if
workflowStore.activeWorkflow is present and handle the missing case by returning
early or showing an error) and only call
workflowService.saveWorkflowAs(workflowStore.activeWorkflow) when the guard
passes; update any caller paths that assume success accordingly.
src/composables/useBreadcrumbMenu.ts
Outdated
| : t('breadcrumbsMenu.deleteWorkflow'), | ||
| icon: 'pi pi-times', | ||
| command: async () => { | ||
| await workflowService.deleteWorkflow(workflowStore.activeWorkflow!) |
There was a problem hiding this comment.
Missing null check before dereferencing activeWorkflow.
Line 85 uses workflowStore.activeWorkflow! with a non-null assertion, but there's no guard ensuring activeWorkflow exists when deleting.
🔎 Proposed fix
command: async () => {
+ if (!workflowStore.activeWorkflow) return
await workflowService.deleteWorkflow(workflowStore.activeWorkflow!)
},Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In @src/composables/useBreadcrumbMenu.ts at line 85, The code dereferences
workflowStore.activeWorkflow with a non-null assertion when calling
workflowService.deleteWorkflow; add a null/undefined guard before calling
deleteWorkflow (e.g., check if workflowStore.activeWorkflow exists and return or
throw a handled error if not) and pass the validated value to
workflowService.deleteWorkflow instead of using the `!` operator so you avoid
potential runtime exceptions.
|
Is it possible to also put "Export, "Export (API)", and "Bookmark" into this menu as well? 
Into 
|
|
Thoughts on also showing this menu on right clicking the tab too? We should utilize right click more (long press on mobile) To keep the functionality I suppose we should throw the other tab closing options in here as well, but I'm not sure how often they're used. They're more dangerous than just closing the current workflow, so placing them at the bottom away from the other actions is preferred. Maybe these extra tab options should only show up when right clicking? Thoughts? |
- add overlay icon for close tab variants - simplify subgraphbreadcrumb ref handling - refactor breadcrumb menu composable to more generic - ensure actions that require active workflow set it
dosubot
bot
added
size:XL
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Fix all issues with AI agents
In @src/components/breadcrumb/SubgraphBreadcrumb.vue:
- Around line 95-109: The breadcrumb home computed's command currently throws a
TypeError when canvas.graph is missing; instead catch and handle this case:
update the command function inside the home computed (the command property on
the computed returned object) to check for canvas and canvas.graph early, and if
missing log the error via the existing logger/telemetry and show a user-facing
notification or toast (or disable/return early) rather than throwing; ensure you
still call useTelemetry()?.trackUiButtonClicked and only call
canvas.setGraph(canvas.graph.rootGraph) when canvas.graph is valid, and add a
clear telemetry/log message and a user notification to surface the problem.
- Around line 16-33: Replace the PrimeVue <Button> usages in
SubgraphBreadcrumb.vue with the repo’s IconButton component: add an import for
IconButton, swap the two <Button> elements (the menu button that calls
handleMenuClick and the conditional back button that calls handleBackClick) to
use IconButton, keep the existing class attributes and click handlers, set the
menu icon to "pi pi-bars" and the back icon to "lucide--undo-2", and remove
PrimeVue-specific props (text, severity, size) in favor of IconButton’s API so
the visual/behavioral intent is preserved.
In @src/components/topbar/WorkflowTab.vue:
- Around line 10-18: The icon-only context menu Button (rendered when
isActiveTab) lacks an accessible name; add an aria-label to the Button (the same
component that uses @click.stop="handleMenuClick") using the i18n key (e.g.
$t('g.menu') or $t('tabMenu.contextMenu')) so screen readers get a meaningful
label, and ensure the chosen key exists in src/locales/en/main.json (or add it)
with appropriate text.
In @src/composables/useCoreCommands.ts:
- Around line 185-204: The Rename Workflow menu action (id
'Comfy.RenameWorkflow') calls workflowService.renameWorkflow without protection;
wrap the await workflowService.renameWorkflow(workflow, newPath) call in a
try-catch, and on catch show a user-visible error dialog (e.g., via
dialogService.alert or similar) with a translated title and the caught error
message so filesystem/permission/path errors don't become unhandled rejections.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (7)
src/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/topbar/WorkflowTabs.vuesrc/composables/useCoreCommands.tssrc/composables/useWorkflowActionsMenu.ts
🧰 Additional context used
📓 Path-based instructions (13)
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
src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only; never use Options API
Use<script setup lang="ts">syntax for component logic
Use Tailwind 4 utility classes for styling; avoid<style>blocks in Vue components
Do not use thedark:Tailwind variant; use semantic values fromstyle.csstheme instead (e.g.,bg-node-component-surface)
Usecn()utility from@/utils/tailwindUtilfor merging class names; never use:class="[]"syntax
Never use!importantor the!prefix for Tailwind classes; find and fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentages (e.g.,w-4/5instead ofw-[80%],w-1/2instead ofw-[50%])
Use Vue 3.5 TypeScript style default prop declaration with destructuring; avoidwithDefaultsand runtime props
UsedefineModelfor v-model bindings instead of separately defining props and emits
Prefer reactive props destructuring overconst props = defineProps<...>
Define slots via template usage, notdefineSlots
Use same-name shorthand for slot prop bindings (e.g.,:isExpandedinstead of:is-expanded="isExpanded")
Usereffor reactive state,computed()for computed properties, andwatch/watchEffectfor side effects
Avoid usingrefandwatcht...
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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.jsonLeverage VueUse functions for performance-enhancing utilities
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.tssrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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}: Use separateimport typestatements; do not mix inlinetypeimports in the same statement
Sort and group imports by plugin; runpnpm formatbefore committing
Derive component types usingvue-component-type-helpers(ComponentProps,ComponentSlots) instead of separate type files
Code should be well-designed with clear names for everything; write code that is expressive and self-documenting
Avoid redundant comments and clean up code as you go; comments should explain why, not what
Ask if there is a simpler way to implement functionality; refactor complex code to simplify it
Minimize nesting depth (e.g.,if () { ... }orfor () { ... }); watch for arrow anti-pattern
Watch out for code smells and refactor to avoid them
Never useanytype; use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Indent with 2 spaces; use single quotes; no trailing semicolons; max line width 80 (per .prettierrc)
Complex type definitions used in multiple related places should be extracted and named for reuse
Implement proper error handling
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.tssrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.tssrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.tssrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.tssrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.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/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.ts
src/composables/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables using the
useXyz.tspattern
Files:
src/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Keep functions short and functional; use function declarations instead of function expressions when possible
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.ts
🧠 Learnings (45)
📚 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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumb.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/common/OverlayIcon.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumb.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-16T22:26:49.463Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-22T21:36:08.369Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-08T02:26:18.357Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7893
File: src/components/button/IconGroup.vue:5-6
Timestamp: 2026-01-08T02:26:18.357Z
Learning: In components that use the cn utility from '@/utils/tailwindUtil' with tailwind-merge, rely on the behavior that conflicting Tailwind classes are resolved by keeping the last one. For example, cn('base-classes bg-default', propClass) will have any conflicting background class from propClass override bg-default. This additive pattern is intentional and aligns with the shadcn-ui convention; ensure you document or review expectations accordingly in Vue components.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.tssrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T21:15:46.862Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-21T01:06:02.786Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T16:03:02.066Z
Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vuesrc/components/topbar/WorkflowTabs.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/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-12-12T23:02:37.473Z
Learnt from: Myestery
Repo: Comfy-Org/ComfyUI_frontend PR: 7422
File: .github/workflows/pr-update-playwright-expectations.yaml:131-135
Timestamp: 2025-12-12T23:02:37.473Z
Learning: In the `.github/workflows/pr-update-playwright-expectations.yaml` workflow in the Comfy-Org/ComfyUI_frontend repository, the snapshot update process is intentionally scoped to only add and update snapshot images. Deletions of snapshot files are handled explicitly outside this workflow and should not be suggested as part of this automation.
Applied to files:
src/components/topbar/WorkflowTab.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-09T00:50:57.103Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing utilities
Applied to files:
src/components/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/topbar/WorkflowTabs.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/topbar/WorkflowTab.vuesrc/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-09T07:29:27.929Z
Learnt from: LittleSound
Repo: Comfy-Org/ComfyUI_frontend PR: 7812
File: src/components/rightSidePanel/RightSidePanel.vue:100-132
Timestamp: 2026-01-09T07:29:27.929Z
Learning: The `findParentGroupInGraph` function in `src/components/rightSidePanel/RightSidePanel.vue` is a temporary workaround for a bug where group sub-items were not updating correctly after a page refresh. It can be removed once that underlying bug is fixed.
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumbItem.vuesrc/components/breadcrumb/SubgraphBreadcrumb.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/breadcrumb/SubgraphBreadcrumbItem.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumbItem.vue
📚 Learning: 2026-01-09T00:50:57.103Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.vue : Use `ref` for reactive state, `computed()` for computed properties, and `watch`/`watchEffect` for side effects
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumbItem.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/breadcrumb/SubgraphBreadcrumbItem.vue
📚 Learning: 2026-01-09T00:50:57.103Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.vue : Avoid using `ref` and `watch` together if a `computed` would work instead
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumbItem.vue
📚 Learning: 2026-01-09T00:50:57.103Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.vue : Use vue-i18n in Composition API for any string literals; place new translations in `src/locales/en/main.json`
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumbItem.vue
📚 Learning: 2026-01-09T00:50:57.103Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/composables/**/*.ts : Name composables using the `useXyz.ts` pattern
Applied to files:
src/composables/useWorkflowActionsMenu.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/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/composables/useWorkflowActionsMenu.tssrc/composables/useCoreCommands.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} : Implement proper error handling
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2026-01-09T00:50:57.103Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Implement proper error handling
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement cleanup for async operations in Vue components
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2026-01-09T00:50:57.103Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.vue : Avoid new usage of PrimeVue components
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2026-01-09T00:50:57.103Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-09T00:50:57.103Z
Learning: Applies to src/**/*.vue : Use `<script setup lang="ts">` syntax for component logic
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.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 Chips component with AutoComplete with multiple enabled
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/stores/**/*.{ts,tsx} : Use TypeScript for type safety in state management stores
Applied to files:
src/components/breadcrumb/SubgraphBreadcrumb.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: lint-and-format
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (13)
src/composables/useWorkflowActionsMenu.ts (2)
67-76: Consider consistency in active workflow handling.The Rename action (lines 67-76) calls
ensureWorkflowActivebeforestartRename(), but thestartRenamecallback eventually executesComfy.RenameWorkflow, which also checks and uses the active workflow. Since the command inuseCoreCommands.ts(line 191) directly accessesworkflowStore.activeWorkflow, theensureWorkflowActivecall here ensures the correct workflow is active when the rename dialog opens. This is correct, but consider documenting this coordination pattern.
89-109: LGTM! Proper separation of Save actions.The Save and Save As menu items correctly use the command store to execute their respective commands, ensuring consistency with keyboard shortcuts and other invocation paths. The separator on line 98 appropriately groups these actions.
src/components/topbar/WorkflowTab.vue (2)
46-61: LGTM! Menu component properly configured.The Menu component is correctly set up with popup mode, appropriate styling via PrimeVue's passthrough props, and conditional rendering for performance optimization.
148-150: Verify command execution pattern.The composable is invoked with
() => useCommandStore().execute('Comfy.RenameWorkflow')as thestartRenamecallback. This pattern works, but consider whether it's better to pass a ref to commandStore created at setup time (line 81 showsuseCommandStore()is available). Current implementation is fine but creates a new store instance on each rename invocation.♻️ Optional: Use setup-time store reference
+const commandStore = useCommandStore() + const { menuItems } = useWorkflowActionsMenu(() => - useCommandStore().execute('Comfy.RenameWorkflow') + commandStore.execute('Comfy.RenameWorkflow') )Note: Both patterns are valid; this is a micro-optimization.
Likely an incorrect or invalid review comment.
src/components/breadcrumb/SubgraphBreadcrumbItem.vue (3)
27-40: LGTM! Menu visibility logic updated correctly.The Menu component now renders when
isActive || isRoot(line 28), which is necessary for the collapsed breadcrumb feature where the root item may be visible but not marked as active. This ensures users can access the workflow menu from the root breadcrumb item even when navigated into subgraphs.
189-195: LGTM! Proper use ofdefineExposefor imperative API.The
toggleMenumethod (lines 189-195) is correctly exposed viadefineExpose, following the guideline to usedefineExposeonly for imperative operations. This allows parent components (likeSubgraphBreadcrumb.vue) to programmatically trigger the menu.
139-158: TheoffsetParent === nullcheck appropriately detects when the breadcrumb collapses.The
startRenamefunction usesoffsetParent === nullto detect when the root breadcrumb item is hidden, falling back to the command-based rename dialog. This is correct for this specific use case because the collapse mechanism (inSubgraphBreadcrumb.vuelines 294–305) exclusively uses CSSdisplay: nonevia Tailwind'shiddenclass to hide breadcrumb items—noposition: fixedor element removal occurs. The element remains in the DOM, sooffsetParentreliably indicates visibility state here.src/components/topbar/WorkflowTabs.vue (3)
70-84: LGTM! Custom icon slot implementation.The
itemiconslot template (lines 70-84) properly handles both overlay icons and regular icons, with all necessary props bound to theOverlayIconcomponent. This enables the visual distinction for composite actions like "Close Tabs To Right".
190-196: VerifyincludeDelete: falsereasoning.The
useWorkflowActionsMenucomposable is invoked withincludeDelete: false(line 193). This prevents the Delete action from appearing in the tab context menu. Confirm this is intentional, as users might expect to delete workflows from tab right-click menus (though it could be considered too destructive for that context).Based on the PR objectives and comments, verify whether:
- Delete should be available in tab context menus
- If not, whether it's accessible through other UI paths (e.g., breadcrumb menu, file browser)
204-251: No action required — overlayIcon property structure is correct.The overlayIcon objects correctly use
main,sub,positionX,positionY, andscaleproperties, which properly map to the OverlayIcon component'smainIcon,subIcon,positionX,positionY, andsubIconScaleprops. TheoffsetXandoffsetYprops are optional with default values in the OverlayIcon component, so omitting them is valid. No TypeScript errors occur.Likely an incorrect or invalid review comment.
src/components/common/OverlayIcon.vue (1)
1-64: LGTM! Well-designed overlay icon component.The component correctly implements:
- Vue 3.5 destructured props with defaults
- Tailwind CSS with the
cnutility for dynamic classes- Proper TypeScript typing
- Font-relative sizing (
1em) for flexible icon scaling- Multi-directional text shadow for visual consistency
- Dynamic positioning logic based on props
The implementation is clean and follows all coding guidelines.
src/components/breadcrumb/SubgraphBreadcrumb.vue (2)
44-44: LGTM! Improved ref handling and active item detection.The refactor to use
item.keyfor active item detection is more robust than object identity comparison. ThesetItemRefcallback correctly captures the root item reference for menu operations.Also applies to: 46-46, 81-85, 137-137
150-156: Acceptable approach for accessing PrimeVue internals.The type assertion and DOM query to access the internal breadcrumb list element is necessary for overflow handling. While not ideal, it's a pragmatic solution given the constraints of working with PrimeVue component internals.
| <Button | ||
| class="context-menu-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg" | ||
| icon="pi pi-bars" | ||
| text | ||
| severity="secondary" | ||
| size="small" | ||
| @click="handleMenuClick" | ||
| /> | ||
| <Button | ||
| v-if="isInSubgraph" | ||
| class="back-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg" | ||
| text | ||
| severity="secondary" | ||
| size="small" | ||
| @click="handleBackClick" | ||
| > | ||
| <i class="icon-[lucide--undo-2]" /> | ||
| </Button> |
There was a problem hiding this comment.
Replace PrimeVue Button with IconButton from common components.
The new menu and back buttons use PrimeVue's Button component directly, which violates the coding guideline to avoid new PrimeVue usage and prefer the repo's common button components.
Based on coding guidelines, the project prefers common button components from src/components/button/.
♻️ Proposed refactor to use IconButton
Update the import:
-import Button from 'primevue/button'
+import IconButton from '@/components/button/IconButton.vue'Replace the menu button:
- <Button
- class="context-menu-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
- icon="pi pi-bars"
- text
- severity="secondary"
- size="small"
- @click="handleMenuClick"
- />
+ <IconButton
+ class="context-menu-button"
+ icon="pi pi-bars"
+ @click="handleMenuClick"
+ />Replace the back button:
- <Button
- v-if="isInSubgraph"
- class="back-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
- text
- severity="secondary"
- size="small"
- @click="handleBackClick"
- >
- <i class="icon-[lucide--undo-2]" />
- </Button>
+ <IconButton
+ v-if="isInSubgraph"
+ class="back-button"
+ icon="icon-[lucide--undo-2]"
+ @click="handleBackClick"
+ />Also applies to: 58-58
🤖 Prompt for AI Agents
In @src/components/breadcrumb/SubgraphBreadcrumb.vue around lines 16 - 33,
Replace the PrimeVue <Button> usages in SubgraphBreadcrumb.vue with the repo’s
IconButton component: add an import for IconButton, swap the two <Button>
elements (the menu button that calls handleMenuClick and the conditional back
button that calls handleBackClick) to use IconButton, keep the existing class
attributes and click handlers, set the menu icon to "pi pi-bars" and the back
icon to "lucide--undo-2", and remove PrimeVue-specific props (text, severity,
size) in favor of IconButton’s API so the visual/behavioral intent is preserved.
| const home = computed(() => ({ | ||
| label: workflowName.value, | ||
| icon: 'pi pi-home', | ||
| key: 'root', | ||
| isBlueprint: isBlueprint.value, | ||
| command: () => { | ||
| useTelemetry()?.trackUiButtonClicked({ | ||
| button_id: 'breadcrumb_subgraph_root_selected' | ||
| }) | ||
| const canvas = useCanvasStore().getCanvas() | ||
| if (!canvas.graph) throw new TypeError('Canvas has no graph') | ||
| canvas.setGraph(canvas.graph.rootGraph) | ||
| } | ||
| })) |
There was a problem hiding this comment.
Consider improving error handling for missing graph.
The code throws a TypeError when canvas.graph is missing. While this surfaces the issue during development, it provides no user feedback and doesn't follow proper error handling patterns.
Consider one of these approaches:
- Log the error and gracefully disable the command
- Show a user-facing error message via a toast/notification
- Guard the command execution earlier to prevent invalid states
💡 Example: Graceful error handling
command: () => {
useTelemetry()?.trackUiButtonClicked({
button_id: 'breadcrumb_subgraph_root_selected'
})
const canvas = useCanvasStore().getCanvas()
- if (!canvas.graph) throw new TypeError('Canvas has no graph')
+ if (!canvas.graph) {
+ console.error('[SubgraphBreadcrumb] Canvas has no graph')
+ return
+ }
canvas.setGraph(canvas.graph.rootGraph)
}📝 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 home = computed(() => ({ | |
| label: workflowName.value, | |
| icon: 'pi pi-home', | |
| key: 'root', | |
| isBlueprint: isBlueprint.value, | |
| command: () => { | |
| useTelemetry()?.trackUiButtonClicked({ | |
| button_id: 'breadcrumb_subgraph_root_selected' | |
| }) | |
| const canvas = useCanvasStore().getCanvas() | |
| if (!canvas.graph) throw new TypeError('Canvas has no graph') | |
| canvas.setGraph(canvas.graph.rootGraph) | |
| } | |
| })) | |
| const home = computed(() => ({ | |
| label: workflowName.value, | |
| icon: 'pi pi-home', | |
| key: 'root', | |
| isBlueprint: isBlueprint.value, | |
| command: () => { | |
| useTelemetry()?.trackUiButtonClicked({ | |
| button_id: 'breadcrumb_subgraph_root_selected' | |
| }) | |
| const canvas = useCanvasStore().getCanvas() | |
| if (!canvas.graph) { | |
| console.error('[SubgraphBreadcrumb] Canvas has no graph') | |
| return | |
| } | |
| canvas.setGraph(canvas.graph.rootGraph) | |
| } | |
| })) |
🤖 Prompt for AI Agents
In @src/components/breadcrumb/SubgraphBreadcrumb.vue around lines 95 - 109, The
breadcrumb home computed's command currently throws a TypeError when
canvas.graph is missing; instead catch and handle this case: update the command
function inside the home computed (the command property on the computed returned
object) to check for canvas and canvas.graph early, and if missing log the error
via the existing logger/telemetry and show a user-facing notification or toast
(or disable/return early) rather than throwing; ensure you still call
useTelemetry()?.trackUiButtonClicked and only call
canvas.setGraph(canvas.graph.rootGraph) when canvas.graph is valid, and add a
clear telemetry/log message and a user notification to surface the problem.
| <Button | ||
| v-if="isActiveTab" | ||
| class="context-menu-button -mx-1 w-auto px-1 py-0" | ||
| variant="muted-textonly" | ||
| size="icon-sm" | ||
| @click.stop="handleMenuClick" | ||
| > | ||
| <i class="pi pi-bars" /> | ||
| </Button> |
There was a problem hiding this comment.
Add accessible label to context menu button.
The context menu button (lines 10-18) displays only an icon without visible text. According to coding guidelines and learnings, icon-only buttons should have an aria-label to provide an accessible name for screen readers.
♿ Add aria-label
<Button
v-if="isActiveTab"
class="context-menu-button -mx-1 w-auto px-1 py-0"
variant="muted-textonly"
size="icon-sm"
+ :aria-label="t('g.menu')"
@click.stop="handleMenuClick"
>
<i class="pi pi-bars" />
</Button>Note: Ensure the g.menu i18n key exists in src/locales/en/main.json, or use an appropriate existing key like 'tabMenu.contextMenu'.
🤖 Prompt for AI Agents
In @src/components/topbar/WorkflowTab.vue around lines 10 - 18, The icon-only
context menu Button (rendered when isActiveTab) lacks an accessible name; add an
aria-label to the Button (the same component that uses
@click.stop="handleMenuClick") using the i18n key (e.g. $t('g.menu') or
$t('tabMenu.contextMenu')) so screen readers get a meaningful label, and ensure
the chosen key exists in src/locales/en/main.json (or add it) with appropriate
text.
|
Speedy right clicks show a context menu that would be hidden under the tooltip or workflow preview. No issues when manually clicking on the "menu" button of an active tab though 
|
Perhaps when right clicking on a tab, it should close the older menu that was triggered from the button? (Also a future iteration for the close tab variants could be to hide them behind a submenu? No need to take action on this yet) I could see the list as: | Clear workflow | |
comfydesigner
requested review from
comfydesigner
and removed request for
comfydesigner
|
@pythongosssss Sorry there is a conflict after merging #7853 (seemingly) |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @src/components/topbar/WorkflowTabs.vue:
- Around line 222-275: The overlayIcon objects inside the computed
contextMenuItems use wrong prop names and must be renamed to match the
OverlayIcon component: in each overlayIcon object (the ones on the
closeTabsToLeft, closeTabsToRight and closeOtherTabs menu items) change main →
mainIcon, sub → subIcon, and scale → subIconScale so the OverlayIcon receives
mainIcon, subIcon and subIconScale; keep the existing values and positions
otherwise and ensure the computed contextMenuItems retains the same structure
and disabled/command behavior.
In @src/composables/useCoreCommands.ts:
- Around line 191-210: The RenameWorkflow command (id 'Comfy.RenameWorkflow')
lacks validation, sanitization, error handling and user feedback; wrap the async
flow (dialogService.prompt and workflowService.renameWorkflow) in a try/catch,
validate and sanitize the user input (strip any trailing ".json", disallow path
traversal sequences like "../" or "..\\", and reject characters invalid for
filenames), build the new path safely using the workflow.directory plus the
sanitized filename and a single ".json" suffix (avoid simple string
concatenation), call workflowService.renameWorkflow(workflow, newPath) inside
the try and show success via
toastService.success(t('workflowService.workflowRenamed')), and on error show
toastService.error(t('workflowService.renameFailed')) while logging the caught
error for debugging; ensure you use the existing symbols workflow.filename,
workflow.directory, dialogService.prompt and workflowService.renameWorkflow and
add the translation keys suggested for messages.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (4)
browser_tests/tests/mobileBaseline.spec.ts-snapshots/mobile-settings-dialog-mobile-chrome-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/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/widget.spec.ts-snapshots/image-preview-changed-by-combo-value-chromium-linux.pngis excluded by!**/*.png
📒 Files selected for processing (2)
src/components/topbar/WorkflowTabs.vuesrc/composables/useCoreCommands.ts
🧰 Additional context used
📓 Path-based instructions (14)
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/composables/useCoreCommands.tssrc/components/topbar/WorkflowTabs.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: Derive component types usingvue-component-type-helpers(ComponentProps,ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/composables/useCoreCommands.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/useCoreCommands.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}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/composables/useCoreCommands.tssrc/components/topbar/WorkflowTabs.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/composables/useCoreCommands.tssrc/components/topbar/WorkflowTabs.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/composables/useCoreCommands.tssrc/components/topbar/WorkflowTabs.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/composables/useCoreCommands.tssrc/components/topbar/WorkflowTabs.vue
src/composables/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables as
useXyz.ts(e.g.,useForm.ts)
Files:
src/composables/useCoreCommands.ts
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/composables/useCoreCommands.tssrc/components/topbar/WorkflowTabs.vue
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible
Files:
src/composables/useCoreCommands.ts
src/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions
src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only
Use<script setup lang="ts">for component logic in Vue SFCs
Avoid<style>blocks in Vue components - use Tailwind 4 styling instead
Use vue-i18n for all string literals in Vue components - place translation entries insrc/locales/en/main.json
Use Tailwind utility classes instead ofdark:variant - use semantic values fromstyle.csstheme (e.g.,bg-node-component-surface)
Usecn()utility from@/utils/tailwindUtilfor merging Tailwind class names instead of:class="[]"or hardcoding
Never use!importantor!Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g.,w-4/5instead ofw-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoidwithDefaultsor runtime props
PreferdefineModelover separately defining a prop and emit for v-model bindings
Define slots via template usage, not viadefineSlots
Use same-name shorthand for slot prop bindings (e.g.,:isExpandedinstead of:is-expanded="isExpanded")
Do not import Vue macros unnecessarily
Avoid new usage of PrimeVue components
Use Tailwind's plurals system via i18n instead of hardcoding ...
Files:
src/components/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/topbar/WorkflowTabs.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/topbar/WorkflowTabs.vue
🧠 Learnings (27)
📚 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} : Implement proper error handling
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-12-12T23:02:37.473Z
Learnt from: Myestery
Repo: Comfy-Org/ComfyUI_frontend PR: 7422
File: .github/workflows/pr-update-playwright-expectations.yaml:131-135
Timestamp: 2025-12-12T23:02:37.473Z
Learning: In the `.github/workflows/pr-update-playwright-expectations.yaml` workflow in the Comfy-Org/ComfyUI_frontend repository, the snapshot update process is intentionally scoped to only add and update snapshot images. Deletions of snapshot files are handled explicitly outside this workflow and should not be suggested as part of this automation.
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2026-01-06T19:17:12.355Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7746
File: src/platform/assets/composables/useUploadModelWizard.ts:207-219
Timestamp: 2026-01-06T19:17:12.355Z
Learning: In `src/platform/assets/composables/useUploadModelWizard.ts`, the `uploadModel()` function should have a concurrency guard at the beginning that checks if `isUploading.value` is already true and returns false early to prevent race conditions from multiple rapid invocations.
Applied to files:
src/composables/useCoreCommands.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/composables/useCoreCommands.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/composables/useCoreCommands.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/composables/useCoreCommands.tssrc/components/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,vue} : Leverage VueUse functions for performance-enhancing composables
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/components/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,vue} : Use VueUse function for useI18n in composition API for string literals
Applied to files:
src/components/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-16T22:26:49.463Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-22T21:36:08.369Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-08T02:26:18.357Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7893
File: src/components/button/IconGroup.vue:5-6
Timestamp: 2026-01-08T02:26:18.357Z
Learning: In components that use the cn utility from '@/utils/tailwindUtil' with tailwind-merge, rely on the behavior that conflicting Tailwind classes are resolved by keeping the last one. For example, cn('base-classes bg-default', propClass) will have any conflicting background class from propClass override bg-default. This additive pattern is intentional and aligns with the shadcn-ui convention; ensure you document or review expectations accordingly in Vue components.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T21:15:46.862Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-21T01:06:02.786Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T16:03:02.066Z
Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.
Applied to files:
src/components/topbar/WorkflowTabs.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (3)
src/components/topbar/WorkflowTabs.vue (3)
83-97: LGTM! Clean template structure with proper conditionals.The itemicon slot implementation correctly handles both overlay icons and simple icons with appropriate fallbacks. The conditional rendering pattern is clear and follows Vue best practices.
111-111: LGTM! Import changes align with new functionality.The new imports for
OverlayIcon,useWorkflowActionsMenu, andcommandStoreare properly structured and support the enhanced menu functionality.Also applies to: 119-119, 123-123, 145-145
214-220: No action needed — error handling is already in place.The
commandStore.execute()method wraps all command execution withwrapWithErrorHandlingAsync, which includes a try-catch block that automatically catches errors and displays them to the user viatoastErrorHandler. Errors in theComfy.RenameWorkflowcommand will not propagate as unhandled rejections; they are caught and shown in a toast notification.Likely an incorrect or invalid review comment.
| { | ||
| id: 'Comfy.RenameWorkflow', | ||
| icon: 'pi pi-pencil', | ||
| label: 'Rename Workflow', | ||
| menubarLabel: 'Rename', | ||
| function: async () => { | ||
| const workflow = workflowStore.activeWorkflow | ||
| if (!workflow || !workflow.isPersisted) return | ||
|
|
||
| const newName = await dialogService.prompt({ | ||
| title: t('g.rename'), | ||
| message: t('workflowService.enterFilename') + ':', | ||
| defaultValue: workflow.filename | ||
| }) | ||
| if (!newName || newName === workflow.filename) return | ||
|
|
||
| const newPath = workflow.directory + '/' + newName + '.json' | ||
| await workflowService.renameWorkflow(workflow, newPath) | ||
| } | ||
| }, |
There was a problem hiding this comment.
Add error handling and input validation for the rename workflow command.
The command has several critical and major issues:
-
Missing error handling: No try-catch blocks around async operations. If
dialogService.prompt()orworkflowService.renameWorkflow()throw, the error will be unhandled. -
Path construction vulnerability (line 207): The path is built using string concatenation without sanitization. If the user enters
myfile.json, the result becomesdirectory/myfile.json.json. Additionally, there's no validation to prevent path traversal characters (e.g.,../,..\\) or invalid filename characters. -
No filename validation: Line 205 only checks if
newNameis truthy and different, but doesn't validate it's safe or appropriate as a filename. -
No user feedback: Unlike other commands in this file, there's no success/failure toast notification.
🛡️ Proposed fix with error handling and validation
{
id: 'Comfy.RenameWorkflow',
icon: 'pi pi-pencil',
label: 'Rename Workflow',
menubarLabel: 'Rename',
function: async () => {
- const workflow = workflowStore.activeWorkflow
- if (!workflow || !workflow.isPersisted) return
-
- const newName = await dialogService.prompt({
- title: t('g.rename'),
- message: t('workflowService.enterFilename') + ':',
- defaultValue: workflow.filename
- })
- if (!newName || newName === workflow.filename) return
-
- const newPath = workflow.directory + '/' + newName + '.json'
- await workflowService.renameWorkflow(workflow, newPath)
+ try {
+ const workflow = workflowStore.activeWorkflow
+ if (!workflow || !workflow.isPersisted) return
+
+ const newName = await dialogService.prompt({
+ title: t('g.rename'),
+ message: t('workflowService.enterFilename') + ':',
+ defaultValue: workflow.filename
+ })
+ if (!newName || newName === workflow.filename) return
+
+ // Validate filename
+ const sanitizedName = newName.trim()
+ if (!sanitizedName || /[<>:"|?*\\/]/.test(sanitizedName)) {
+ toastStore.add({
+ severity: 'error',
+ summary: t('g.error'),
+ detail: t('workflowService.invalidFilename'),
+ life: 3000
+ })
+ return
+ }
+
+ // Remove .json extension if user provided it
+ const nameWithoutExt = sanitizedName.replace(/\.json$/i, '')
+ const newPath = `${workflow.directory}/${nameWithoutExt}.json`
+
+ await workflowService.renameWorkflow(workflow, newPath)
+
+ toastStore.add({
+ severity: 'success',
+ summary: t('g.success'),
+ detail: t('workflowService.workflowRenamed'),
+ life: 3000
+ })
+ } catch (error) {
+ toastStore.add({
+ severity: 'error',
+ summary: t('g.error'),
+ detail: t('workflowService.renameFailed'),
+ life: 3000
+ })
+ console.error('Failed to rename workflow:', error)
+ }
}
},Note: Add corresponding translation keys to src/locales/en/main.json:
{
"workflowService": {
"invalidFilename": "Invalid filename. Avoid special characters like < > : \" | ? * / \\",
"workflowRenamed": "Workflow renamed successfully",
"renameFailed": "Failed to rename workflow"
}
}Based on learnings, proper error handling is required throughout the codebase.
🤖 Prompt for AI Agents
In @src/composables/useCoreCommands.ts around lines 191 - 210, The
RenameWorkflow command (id 'Comfy.RenameWorkflow') lacks validation,
sanitization, error handling and user feedback; wrap the async flow
(dialogService.prompt and workflowService.renameWorkflow) in a try/catch,
validate and sanitize the user input (strip any trailing ".json", disallow path
traversal sequences like "../" or "..\\", and reject characters invalid for
filenames), build the new path safely using the workflow.directory plus the
sanitized filename and a single ".json" suffix (avoid simple string
concatenation), call workflowService.renameWorkflow(workflow, newPath) inside
the try and show success via
toastService.success(t('workflowService.workflowRenamed')), and on error show
toastService.error(t('workflowService.renameFailed')) while logging the caught
error for debugging; ensure you use the existing symbols workflow.filename,
workflow.directory, dialogService.prompt and workflowService.renameWorkflow and
add the translation keys suggested for messages.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/components/common/OverlayIcon.vue:
- Around line 23-29: The Position union is too broad; create two specific types
(e.g., HorizontalPosition = 'left' | 'right' and VerticalPosition = 'top' |
'bottom') and update the OverlayIconProps to use positionX?: HorizontalPosition
and positionY?: VerticalPosition instead of Position; also update any
occurrences that reference Position (props definitions, default values, prop
validators, or usages in methods/templates) to use the new types so horizontal
and vertical props cannot be assigned invalid values.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
🧰 Additional context used
📓 Path-based instructions (10)
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
src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only
Use<script setup lang="ts">for component logic in Vue SFCs
Avoid<style>blocks in Vue components - use Tailwind 4 styling instead
Use vue-i18n for all string literals in Vue components - place translation entries insrc/locales/en/main.json
Use Tailwind utility classes instead ofdark:variant - use semantic values fromstyle.csstheme (e.g.,bg-node-component-surface)
Usecn()utility from@/utils/tailwindUtilfor merging Tailwind class names instead of:class="[]"or hardcoding
Never use!importantor!Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g.,w-4/5instead ofw-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoidwithDefaultsor runtime props
PreferdefineModelover separately defining a prop and emit for v-model bindings
Define slots via template usage, not viadefineSlots
Use same-name shorthand for slot prop bindings (e.g.,:isExpandedinstead of:is-expanded="isExpanded")
Do not import Vue macros unnecessarily
Avoid new usage of PrimeVue components
Use Tailwind's plurals system via i18n instead of hardcoding ...
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.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}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
🧠 Learnings (21)
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.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/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-16T22:26:49.463Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-22T21:36:08.369Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-08T02:26:18.357Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7893
File: src/components/button/IconGroup.vue:5-6
Timestamp: 2026-01-08T02:26:18.357Z
Learning: In components that use the cn utility from '@/utils/tailwindUtil' with tailwind-merge, rely on the behavior that conflicting Tailwind classes are resolved by keeping the last one. For example, cn('base-classes bg-default', propClass) will have any conflicting background class from propClass override bg-default. This additive pattern is intentional and aligns with the shadcn-ui convention; ensure you document or review expectations accordingly in Vue components.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T21:15:46.862Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-21T01:06:02.786Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T16:03:02.066Z
Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.
Applied to files:
src/components/common/OverlayIcon.vuesrc/components/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,vue} : Leverage VueUse functions for performance-enhancing composables
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/components/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,vue} : Use VueUse function for useI18n in composition API for string literals
Applied to files:
src/components/topbar/WorkflowTabs.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (4)
src/components/common/OverlayIcon.vue (1)
1-65: LGTM!Clean implementation following Vue 3.5 Composition API patterns. Good use of
cn()for class composition, proper reactive prop destructuring, and computed style for dynamic properties.src/components/topbar/WorkflowTabs.vue (3)
83-88: LGTM!Clean slot implementation with proper conditional rendering. The
v-bindspread pattern correctly passesoverlayIconprops to theOverlayIconcomponent.
102-103: LGTM!Imports correctly use separate
import typestatement forOverlayIconPropsas per coding guidelines.Also applies to: 111-111
214-267: LGTM!The
contextMenuItemscomputed property is well-structured:
- Properly spreads
baseMenuItems.valuefor shared workflow actions- Consistent
overlayIconconfiguration across close tab variants- Correct index-based disabled states for edge cases
| type Position = 'top' | 'bottom' | 'left' | 'right' | ||
| export interface OverlayIconProps { | ||
| mainIcon: string | ||
| subIcon: string | ||
| positionX?: Position | ||
| positionY?: Position |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Refine Position type for better type safety.
The Position type allows 'top' | 'bottom' | 'left' | 'right' for both positionX and positionY, but semantically positionX should only accept horizontal values and positionY should only accept vertical values. This could lead to invalid usage like positionX: 'top'.
♻️ Suggested improvement
-type Position = 'top' | 'bottom' | 'left' | 'right'
+type PositionX = 'left' | 'right'
+type PositionY = 'top' | 'bottom'
export interface OverlayIconProps {
mainIcon: string
subIcon: string
- positionX?: Position
- positionY?: Position
+ positionX?: PositionX
+ positionY?: PositionY
offsetX?: number
offsetY?: number
subIconScale?: number
}📝 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.
| type Position = 'top' | 'bottom' | 'left' | 'right' | |
| export interface OverlayIconProps { | |
| mainIcon: string | |
| subIcon: string | |
| positionX?: Position | |
| positionY?: Position | |
| type PositionX = 'left' | 'right' | |
| type PositionY = 'top' | 'bottom' | |
| export interface OverlayIconProps { | |
| mainIcon: string | |
| subIcon: string | |
| positionX?: PositionX | |
| positionY?: PositionY |
🤖 Prompt for AI Agents
In @src/components/common/OverlayIcon.vue around lines 23 - 29, The Position
union is too broad; create two specific types (e.g., HorizontalPosition = 'left'
| 'right' and VerticalPosition = 'top' | 'bottom') and update the
OverlayIconProps to use positionX?: HorizontalPosition and positionY?:
VerticalPosition instead of Position; also update any occurrences that reference
Position (props definitions, default values, prop validators, or usages in
methods/templates) to use the new types so horizontal and vertical props cannot
be assigned invalid values.
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/components/topbar/WorkflowTabs.vue:
- Around line 226-265: The overlayIcon object is duplicated across the three
menu items in the context menu (the items that call closeWorkflows and use
options.value slices); extract the shared properties into a single constant
(e.g., closeIconBase) defined alongside the contextMenuItems computed and then
use object spread to add the differing subIcon values (e.g., { ...closeIconBase,
subIcon: 'pi pi-arrow-left' }) when building each item's overlayIcon; keep the
constant typed appropriately (OverlayIconProps or as const) and ensure existing
disabled/command values (the closeWorkflows calls) remain unchanged.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/topbar/WorkflowTabs.vue
🧰 Additional context used
📓 Path-based instructions (10)
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
src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only
Use<script setup lang="ts">for component logic in Vue SFCs
Avoid<style>blocks in Vue components - use Tailwind 4 styling instead
Use vue-i18n for all string literals in Vue components - place translation entries insrc/locales/en/main.json
Use Tailwind utility classes instead ofdark:variant - use semantic values fromstyle.csstheme (e.g.,bg-node-component-surface)
Usecn()utility from@/utils/tailwindUtilfor merging Tailwind class names instead of:class="[]"or hardcoding
Never use!importantor!Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g.,w-4/5instead ofw-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoidwithDefaultsor runtime props
PreferdefineModelover separately defining a prop and emit for v-model bindings
Define slots via template usage, not viadefineSlots
Use same-name shorthand for slot prop bindings (e.g.,:isExpandedinstead of:is-expanded="isExpanded")
Do not import Vue macros unnecessarily
Avoid new usage of PrimeVue components
Use Tailwind's plurals system via i18n instead of hardcoding ...
Files:
src/components/topbar/WorkflowTabs.vue
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/components/topbar/WorkflowTabs.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}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/components/topbar/WorkflowTabs.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/topbar/WorkflowTabs.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
src/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system package
Files:
src/components/topbar/WorkflowTabs.vue
src/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI strings
Files:
src/components/topbar/WorkflowTabs.vue
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/components/topbar/WorkflowTabs.vue
🧠 Learnings (20)
📚 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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T21:15:46.862Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:46.862Z
Learning: In the ComfyUI_frontend repository, for Vue components, do not add aria-label to buttons that have visible text content (e.g., buttons containing <span> text). The visible text provides the accessible name. Use aria-label only for elements without visible labels (e.g., icon-only buttons). If a button has no visible label, provide a clear aria-label or associate with an aria-labelledby describing its action.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-09T03:49:52.828Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,vue} : Leverage VueUse functions for performance-enhancing composables
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Applied to files:
src/components/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,vue} : Use VueUse function for useI18n in composition API for string literals
Applied to files:
src/components/topbar/WorkflowTabs.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/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-16T22:26:49.463Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.vue:17-17
Timestamp: 2025-12-16T22:26:49.463Z
Learning: In Vue 3.5+ with <script setup>, when using defineProps<Props>() with partial destructuring (e.g., const { as = 'button', class: customClass = '' } = defineProps<Props>() ), props that are not destructured (e.g., variant, size) stay accessible by name in the template scope. This pattern is valid: you can destructure only a subset of props for convenience while referencing the remaining props directly in template expressions. Apply this guideline to Vue components across the codebase (all .vue files).
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-22T21:36:08.369Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/platform/cloud/subscription/components/PricingTable.vue:185-201
Timestamp: 2025-12-22T21:36:08.369Z
Learning: In Vue components, avoid creating single-use variants for common UI components (e.g., Button and other shared components). Aim for reusable variants that cover multiple use cases. It’s acceptable to temporarily mix variant props with inline Tailwind classes when a styling need is unique to one place, but plan and consolidate into shared, reusable variants as patterns emerge across the codebase.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2026-01-08T02:26:18.357Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7893
File: src/components/button/IconGroup.vue:5-6
Timestamp: 2026-01-08T02:26:18.357Z
Learning: In components that use the cn utility from '@/utils/tailwindUtil' with tailwind-merge, rely on the behavior that conflicting Tailwind classes are resolved by keeping the last one. For example, cn('base-classes bg-default', propClass) will have any conflicting background class from propClass override bg-default. This additive pattern is intentional and aligns with the shadcn-ui convention; ensure you document or review expectations accordingly in Vue components.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T02:07:38.870Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-21T01:06:02.786Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: src/components/graph/selectionToolbox/ColorPickerButton.vue:15-18
Timestamp: 2025-12-21T01:06:02.786Z
Learning: In Comfy-Org/ComfyUI_frontend, in Vue component files, when a filled icon is required (e.g., 'pi pi-circle-fill'), you may mix PrimeIcons with Lucide icons since Lucide lacks filled variants. This mixed usage is acceptable when one icon library does not provide an equivalent filled icon. Apply consistently across Vue components in the src directory where icons are used, and document the rationale when a mixed approach is chosen.
Applied to files:
src/components/topbar/WorkflowTabs.vue
📚 Learning: 2025-12-18T16:03:02.066Z
Learnt from: henrikvilhelmberglund
Repo: Comfy-Org/ComfyUI_frontend PR: 7617
File: src/components/actionbar/ComfyActionbar.vue:301-308
Timestamp: 2025-12-18T16:03:02.066Z
Learning: In the ComfyUI frontend queue system, useQueuePendingTaskCountStore().count indicates the number of tasks in the queue, where count = 1 means a single active/running task and count > 1 means there are pending tasks in addition to the active task. Therefore, in src/components/actionbar/ComfyActionbar.vue, enable the 'Clear Pending Tasks' button only when count > 1 to avoid clearing the currently running task. The active task should be canceled using the 'Cancel current run' button instead. This rule should be enforced via a conditional check on the queue count, with appropriate disabled/aria-disabled states for accessibility, and tests should verify behavior for count = 1 and count > 1.
Applied to files:
src/components/topbar/WorkflowTabs.vue
🔇 Additional comments (3)
src/components/topbar/WorkflowTabs.vue (3)
83-88: LGTM - Clean slot implementation for custom menu icons.The conditional rendering logic correctly prioritizes
overlayIconfor composite icons while falling back to the standarditem.iconclass-based approach. This integrates well with PrimeVue's ContextMenu slot API.
93-120: LGTM - Clean imports and composition API usage.The imports are well-organized with proper type imports separated. The component correctly uses Vue 3 Composition API patterns with
<script setup lang="ts">and leverages VueUse composables as recommended.
201-212: No changes needed; composable properly handles nullable reactive workflow.The
useWorkflowActionsMenucomposable already:
- Accepts
Ref<ComfyWorkflow | null> | ComputedRef<ComfyWorkflow | null>(line 21)- Falls back to
activeWorkflowviatargetWorkflowcomputed, ensuring workflow is always available for menu generation- Safely guards all operations that require workflow with optional chaining (
?.) and explicit null checks (if (workflow))The menu item generation handles null workflow gracefully and poses no issues.
| { | ||
| label: t('tabMenu.closeTabsToLeft'), | ||
| overlayIcon: { | ||
| mainIcon: 'pi pi-times', | ||
| subIcon: 'pi pi-arrow-left', | ||
| positionX: 'right', | ||
| positionY: 'bottom', | ||
| subIconScale: 0.5 | ||
| } as OverlayIconProps, | ||
| command: () => closeWorkflows(options.value.slice(0, index)), | ||
| disabled: index <= 0 | ||
| }, | ||
| { | ||
| label: t('tabMenu.closeTabsToRight'), | ||
| overlayIcon: { | ||
| mainIcon: 'pi pi-times', | ||
| subIcon: 'pi pi-arrow-right', | ||
| positionX: 'right', | ||
| positionY: 'bottom', | ||
| subIconScale: 0.5 | ||
| } as OverlayIconProps, | ||
| command: () => closeWorkflows(options.value.slice(index + 1)), | ||
| disabled: index === options.value.length - 1 | ||
| }, | ||
| { | ||
| label: t('tabMenu.closeOtherTabs'), | ||
| overlayIcon: { | ||
| mainIcon: 'pi pi-times', | ||
| subIcon: 'pi pi-arrows-h', | ||
| positionX: 'right', | ||
| positionY: 'bottom', | ||
| subIconScale: 0.5 | ||
| } as OverlayIconProps, | ||
| command: () => | ||
| closeWorkflows([ | ||
| ...options.value.slice(index + 1), | ||
| ...options.value.slice(0, index) | ||
| ]), | ||
| disabled: options.value.length <= 1 | ||
| }, | ||
| { | ||
| label: workflowBookmarkStore.isBookmarked(tab.workflow.path) | ||
| ? t('tabMenu.removeFromBookmarks') | ||
| : t('tabMenu.addToBookmarks'), | ||
| command: () => workflowBookmarkStore.toggleBookmarked(tab.workflow.path), | ||
| disabled: tab.workflow.isTemporary | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider extracting repeated overlayIcon configuration.
The three close actions share identical positionX, positionY, and subIconScale values. While the current approach is clear and readable, you could reduce duplication with a helper:
♻️ Optional: Extract common overlayIcon config
// Helper at top of contextMenuItems computed or as a constant
const closeIconBase = {
mainIcon: 'pi pi-times',
positionX: 'right',
positionY: 'bottom',
subIconScale: 0.5
} as const
// Usage in menu items:
overlayIcon: { ...closeIconBase, subIcon: 'pi pi-arrow-left' } as OverlayIconProps,🤖 Prompt for AI Agents
In @src/components/topbar/WorkflowTabs.vue around lines 226 - 265, The
overlayIcon object is duplicated across the three menu items in the context menu
(the items that call closeWorkflows and use options.value slices); extract the
shared properties into a single constant (e.g., closeIconBase) defined alongside
the contextMenuItems computed and then use object spread to add the differing
subIcon values (e.g., { ...closeIconBase, subIcon: 'pi pi-arrow-left' }) when
building each item's overlayIcon; keep the constant typed appropriately
(OverlayIconProps or as const) and ensure existing disabled/command values (the
closeWorkflows calls) remain unchanged.
Summary
For users who don't use subgraphs, the workflow name in the top left can be unnecessarily obstructive so this updated collapses it to a simple icon until a subgraph is entered.
Changes
Screenshots (if applicable)
┆Issue is synchronized with this Notion page by Unito