feat(ui): add TagsInput component with click-to-edit behavior#8066
feat(ui): add TagsInput component with click-to-edit behavior#8066
Conversation
Amp-Thread-ID: https://ampcode.com/threads/T-019bbe59-a4ce-7511-9aa4-d93f1feeadab Co-authored-by: Amp <amp@ampcode.com>
…hover when disabled
📝 Walkthrough✨ Finishing touches
📜 Recent review detailsConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (11)src/**/*.{vue,ts}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.ts📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
src/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{composables,components}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/*.{vue,ts,tsx}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/**/{components,composables}/**/*.{ts,tsx,vue}📄 CodeRabbit inference engine (src/CLAUDE.md)
Files:
src/components/**/*.{vue,ts,js}📄 CodeRabbit inference engine (src/components/CLAUDE.md)
Files:
+(tests-ui|src)/**/*.test.ts📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/**/*.{ts,vue}📄 CodeRabbit inference engine (AGENTS.md)
Files:
src/**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts)📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (32)📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2026-01-08T02:40:15.482ZApplied to files:
📚 Learning: 2025-12-10T03:09:13.807ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2025-11-24T19:47:56.371ZApplied to files:
📚 Learning: 2025-11-24T19:47:22.909ZApplied to files:
📚 Learning: 2025-11-24T19:48:09.318ZApplied to files:
📚 Learning: 2025-11-24T19:48:09.318ZApplied to files:
📚 Learning: 2025-11-24T19:48:09.318ZApplied to files:
📚 Learning: 2025-11-24T19:47:22.909ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2025-12-05T08:52:50.787ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2025-12-09T03:39:54.501ZApplied to files:
📚 Learning: 2025-12-13T11:03:11.264ZApplied to files:
📚 Learning: 2025-12-17T00:40:09.635ZApplied to files:
📚 Learning: 2025-12-30T22:22:33.836ZApplied to files:
📚 Learning: 2025-12-30T01:31:04.927ZApplied to files:
📚 Learning: 2026-01-09T02:07:54.558ZApplied to files:
📚 Learning: 2025-12-11T12:25:15.470ZApplied to files:
📚 Learning: 2026-01-12T17:39:27.738ZApplied to files:
📚 Learning: 2026-01-10T00:24:17.695ZApplied to files:
📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
🧬 Code graph analysis (1)src/components/ui/tags-input/TagsInput.test.ts (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
🔇 Additional comments (5)
✏️ Tip: You can disable this entire section by setting 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/15/2026, 04:48:18 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Tests:
|
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.34 MB (baseline 3.34 MB) • 🔴 +27 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 1.15 MB (baseline 1.15 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.66 kB (baseline 6.66 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 372 kB (baseline 372 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 209 kB (baseline 209 kB) • ⚪ 0 BReusable component library chunks
Status: 8 added / 8 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.34 MB (baseline 9.34 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 5.25 MB (baseline 5.25 MB) • ⚪ 0 BBundles that do not match a named category
Status: 16 added / 16 removed |
dosubot
bot
added
the
size:L
coderabbitai
bot
requested review from
PabloWiedemann,
comfydesigner,
snomiao and
viva-jinyi
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@src/components/ui/tags-input/TagsInput.stories.ts`:
- Around line 68-91: Add an args object to the Empty story so Storybook controls
have initial values; for example, add args: { disabled: false } on the exported
Empty Story and ensure the template continues to reference args.disabled (no
code changes needed elsewhere), enabling the Controls panel to toggle disabled
for the TagsInput story.
In `@src/components/ui/tags-input/TagsInput.test.ts`:
- Around line 49-75: Consolidate the four repetitive structural tests into one
focused test: replace the separate tests ('renders tags as child items',
'renders delete buttons for each tag', 'renders tag text for each tag', 'renders
input for adding new tags') with a single test (e.g., 'renders tags structure
and content') that mounts mountFullTagsInput(['tag1','tag2']), asserts the
number of TagsInputItem, TagsInputItemDelete, and TagsInputItemText all equal
the input length, and also verifies the actual text content of each
TagsInputItemText matches the input array; keep the existing test for
TagsInputInput (or include it in the consolidated test) so presence of the input
is still asserted.
- Around line 29-101: Add unit tests covering click-to-edit behaviors missing
from TagsInput: write three tests using mount/mountFullTagsInput or mounting
TagsInput directly that assert (1) when the component is rendered with prop
disabled=true it does not enter edit mode or focus the input after a click
(reference TagsInput and TagsInputInput), (2) clicking outside the component
exits edit mode—simulate entering edit mode then dispatch a click on
document/body and assert the input is removed or blurred (reference
TagsInputInput and the component's model/update flow), and (3) when modelValue
is an empty array the empty-state placeholder text is rendered (assert
findComponent(TagsInputInput) or placeholder presence); ensure tests use the
existing mounting patterns (mountFullTagsInput or mount<typeof TagsInput>) and
await nextTick where necessary to let DOM updates settle.
In `@src/components/ui/tags-input/TagsInput.vue`:
- Around line 71-74: The decorative pen icon in TagsInput.vue (<i
v-if="!disabled && !isEditing" ... />) lacks an accessibility marker; update
that <i> element to include aria-hidden="true" so assistive tech ignores it
(keep the existing v-if logic tied to disabled and isEditing and do not change
click handlers or visibility).
In `@src/components/ui/tags-input/TagsInputItemDelete.vue`:
- Around line 28-31: In TagsInputItemDelete, the icon-only delete control needs
an accessible label: add aria-label="$t('g.removeTag')" (using vue-i18n) to the
button element that renders the <slot> / icon in the TagsInputItemDelete
component so screen readers get "Remove tag"; also add the translation key
"g.removeTag": "Remove tag" to your English locale (e.g., main.json).
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (8)
src/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/tagsInputContext.ts
🧰 Additional context used
📓 Path-based instructions (14)
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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.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/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.ts
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsName Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.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/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: 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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/tagsInputContext.ts
+(tests-ui|src)/**/*.test.ts
📄 CodeRabbit inference engine (AGENTS.md)
+(tests-ui|src)/**/*.test.ts: Unit and component tests belong intests-ui/orsrc/**/*.test.tsusing Vitest
Write tests for all changes, especially bug fixes to catch future regressions
Do not write tests dependent on non-behavioral features like utility classes or styles
Do not write tests that just test the mocks - ensure tests fail when code behaves unexpectedly
Leverage Vitest's utilities for mocking where possible
Keep module mocks contained - do not use global mutable state within test files; usevi.hoisted()if necessary
Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Aim for behavioral coverage of critical and new features in unit tests
Files:
src/components/ui/tags-input/TagsInput.test.ts
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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/tagsInputContext.ts
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts)
📄 CodeRabbit inference engine (AGENTS.md)
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts): Do not write change detector tests - avoid tests that only assert default values
Be parsimonious in testing - do not write redundant tests
Don't Mock What You Don't Own
Files:
src/components/ui/tags-input/TagsInput.test.ts
🧠 Learnings (56)
📓 Common learnings
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Chips component with AutoComplete with multiple enabled
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guide
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/**/*.vue : Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid `withDefaults` or runtime props
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Destructure props using Vue 3.5 style in Vue components
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/{components,composables}/**/*.{ts,tsx,vue} : Use vue-i18n for ALL user-facing strings by adding them to `src/locales/en/main.json`
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Follow Vue 3 style guide and naming conventions
📚 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/**/*.vue : Use Vue 3 Single File Components (SFCs) with Composition API only
Applied to files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue components
Applied to files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Follow Vue 3 style guide and naming conventions
Applied to files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputInput.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/**/*.vue : Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid `withDefaults` or runtime props
Applied to files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Applied to files:
src/components/ui/tags-input/TagsInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.ts
📚 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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.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/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vue
📚 Learning: 2026-01-12T17:39:27.738Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.
Applied to files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.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 : Implement proper props and emits definitions
Applied to files:
src/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.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 : Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files
Applied to files:
src/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.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/ui/tags-input/TagsInputItemText.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/**/*.vue : Use `cn()` utility from `@/utils/tailwindUtil` for merging Tailwind class names instead of `:class="[]"` or hardcoding
Applied to files:
src/components/ui/tags-input/TagsInputItemText.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/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputItem.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/ui/tags-input/TagsInputItemText.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/**/*.vue : Use `<script setup lang="ts">` for component logic in Vue SFCs
Applied to files:
src/components/ui/tags-input/TagsInputItemText.vuesrc/components/ui/tags-input/TagsInputInput.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 +(tests-ui|src)/**/*.test.ts : Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Write tests for all changes, especially bug fixes to catch future regressions
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Aim for behavioral coverage of critical and new features in unit tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Unit and component tests belong in `tests-ui/` or `src/**/*.test.ts` using Vitest
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Do not write tests dependent on non-behavioral features like utility classes or styles
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Leverage Vitest's utilities for mocking where possible
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 browser_tests/**/*.spec.ts : Use tags like `mobile`, `2x` in Playwright tests for configuration-aware test selection
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts) : Be parsimonious in testing - do not write redundant tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts) : Do not write change detector tests - avoid tests that only assert default values
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Keep module mocks contained - do not use global mutable state within test files; use `vi.hoisted()` if necessary
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `vitest` for unit testing in this project
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `test` instead of `it` for defining test cases in vitest
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/tagsInputContext.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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/tagsInputContext.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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/tagsInputContext.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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/tagsInputContext.ts
📚 Learning: 2025-12-10T03:09:13.807Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:13.807Z
Learning: In test files, prefer selecting or asserting on accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests validate actual user-facing behavior and accessibility, reducing reliance on implementation details like test IDs.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-12-30T01:31:04.927Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7797
File: tests-ui/tests/lib/litegraph/src/widgets/ComboWidget.test.ts:648-648
Timestamp: 2025-12-30T01:31:04.927Z
Learning: In Vitest v4, when mocking functions that may be called as constructors (using new), the mock implementation must use function() or class syntax rather than an arrow function. Arrow mocks can cause '<anonymous> is not a constructor' errors. This is a breaking change from Vitest v3 where mocks could use an arrow function. Apply this guideline to test files that mock constructor-like calls (e.g., in tests under tests-ui, such as ComboWidget.test.ts) and ensure mock implementations are defined with function() { ... } or class { ... } to preserve constructor behavior.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2026-01-08T02:40:15.482Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7894
File: src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts:11-14
Timestamp: 2026-01-08T02:40:15.482Z
Learning: In TypeScript test files (e.g., any test under src), avoid duplicating interface/type definitions. Import real type definitions from the component modules under test and reference them directly, so there is a single source of truth and to prevent type drift. This improves maintainability and consistency across tests.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2026-01-09T02:07:54.558Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:54.558Z
Learning: In test files (e.g., any .test.ts or .test.tsx under src/...), when you create mock objects that partially implement an interface (such as LGraphNode), prefer casting with as Partial<InterfaceType> as InterfaceType rather than as any or as unknown as InterfaceType. This makes the incomplete implementation explicit while preserving type safety, improving readability and maintainability of tests.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with Message
Applied to files:
src/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItemDelete.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,css} : Use Tailwind CSS only for styling (no custom CSS)
Applied to files:
src/components/ui/tags-input/TagsInputItemDelete.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use provide/inject for dependency injection in Vue components
Applied to files:
src/components/ui/tags-input/TagsInputInput.vuesrc/components/ui/tags-input/tagsInputContext.ts
📚 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 `provide`/`inject` for dependency injection only when simpler alternatives (Store or shared composable) won't work
Applied to files:
src/components/ui/tags-input/tagsInputContext.ts
🧬 Code graph analysis (1)
src/components/ui/tags-input/TagsInput.stories.ts (1)
src/components/input/SingleSelect.stories.ts (1)
Story(40-40)
⏰ 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: setup
- GitHub Check: lint-and-format
- GitHub Check: test
🔇 Additional comments (15)
src/components/ui/tags-input/TagsInputItem.vue (1)
1-27: LGTM!Clean wrapper component following Vue 3.5 conventions. Proper use of
cn()for class merging, correct type/value import separation, and appropriate design token usage.src/components/ui/tags-input/TagsInputItemText.vue (1)
1-20: LGTM!Simple, well-structured wrapper component. Follows established patterns with proper props forwarding and class composition.
src/components/ui/tags-input/tagsInputContext.ts (1)
1-10: LGTM!Well-designed context module using Vue's
InjectionKeyfor type-safe dependency injection. TheFocusCallbacktype allowingundefinedcorrectly supports the cleanup pattern used inTagsInputInput.vue.src/components/ui/tags-input/TagsInputInput.vue (2)
26-32: LGTM on lifecycle handling.Clean focus registration pattern with proper cleanup in
onUnmounted. The optional chaining correctly handles cases where the context isn't provided.
11-21: This pattern is correct for Vue 3.5+.Vue 3.5's compiler transformation maintains reactivity for destructured props, including primitives with default values. The pattern
const { isEmpty = false, ... } = defineProps<...>()is the recommended modern approach and correctly updates in thecomputedwhen the parent changes the prop value. No changes needed.Likely an incorrect or invalid review comment.
src/components/ui/tags-input/TagsInputItemDelete.vue (1)
16-27: LGTM on animation implementation.The transition classes using
transition-[opacity,width]withdata-[disabled]states create smooth animations when toggling edit mode. Theoverflow-hiddenprevents visual artifacts during the width transition.src/components/ui/tags-input/TagsInput.test.ts (2)
77-101: Good behavioral coverage for tag addition flow.This test covers the core click-to-edit and tag addition behavior effectively. It verifies user interaction (click → type → Enter) updates the model value.
2-2: Usetestinstead ofitfor defining test cases.Per coding guidelines, prefer
testoveritfor defining test cases in Vitest.Suggested fix
-import { describe, expect, it } from 'vitest' +import { describe, expect, test } from 'vitest'Then replace all
it(occurrences withtest(.⛔ Skipped due to learnings
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursor/rules/unit-test.mdc:0-0 Timestamp: 2025-11-24T19:48:09.318Z Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `test` instead of `it` for defining test cases in vitestLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursor/rules/unit-test.mdc:0-0 Timestamp: 2025-11-24T19:48:09.318Z Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `vitest` for unit testing in this projectLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-10T00:24:17.695Z Learning: Applies to +(tests-ui|src)/**/*.test.ts : Use Vue Test Utils for Component testing and follow best practices for making components easy to testLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursor/rules/unit-test.mdc:0-0 Timestamp: 2025-11-24T19:48:09.318Z Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`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 +(tests-ui|src)/**/*.test.ts : Leverage Vitest's utilities for mocking where possibleLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-10T00:24:17.695Z Learning: Applies to +(tests-ui|src)/**/*.test.ts : Unit and component tests belong in `tests-ui/` or `src/**/*.test.ts` using VitestLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-10T00:24:17.695Z Learning: Applies to +(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts) : Be parsimonious in testing - do not write redundant testsLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-10T00:24:17.695Z Learning: Applies to +(tests-ui|src)/**/*.test.ts : Write tests for all changes, especially bug fixes to catch future regressionsLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: browser_tests/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:22.909Z Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser testsLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-10T00:24:17.695Z Learning: Applies to +(tests-ui|src)/**/*.test.ts : Do not write tests dependent on non-behavioral features like utility classes or stylesLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-10T00:24:17.695Z Learning: Applies to +(tests-ui|src)/**/*.test.ts : Keep module mocks contained - do not use global mutable state within test files; use `vi.hoisted()` if necessaryLearnt 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}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursorLearnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-10T00:24:17.695Z Learning: Applies to browser_tests/**/*.spec.ts : Follow Playwright best practices for E2E testingLearnt 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 setupsrc/components/ui/tags-input/TagsInput.vue (4)
1-22: Well-structured component setup following Vue 3.5 conventions.Good use of:
- Vue 3.5 style props destructuring with defaults (line 17-21)
- Separate
import typestatements (lines 3-7, 10, 15)- VueUse composables for click-outside handling
- Generic typing for flexible value types
24-31: Appropriate use of provide/inject for component coordination.The focus callback registration and shared editing state via provide/inject is a clean pattern for this component family coordination. The scoped nature makes this preferable to a shared store or composable.
33-38: Clean computed state for click-to-edit behavior.The
internalDisabledcomputed correctly implements the read-only-until-clicked UX: the underlying TagsInputRoot is disabled until the user explicitly enters edit mode.
42-48: Correct async enable editing implementation.Good defensive coding with:
- Guard conditions preventing disabled state editing
nextTickensuring DOM updates before focus- Optional chaining handling unregistered focus callback
src/components/ui/tags-input/TagsInput.stories.ts (3)
1-34: Well-structured Storybook meta configuration.The
GenericMetainterface is a clean workaround for typing generic Vue components in Storybook. Good coverage of argTypes with descriptions.
36-66: Comprehensive Default story with good interactivity.The Default story demonstrates:
- Two-way binding with
v-model- Disabled state toggle via args
- Live tag display for debugging
Good pattern for interactive component documentation.
93-179: Good coverage of edge cases and configurations.The ManyTags, Disabled, and CustomWidth stories effectively demonstrate:
- Overflow/wrap behavior with many tags
- Disabled state appearance
- Layout flexibility with custom widths
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
dosubot
bot
added
size:XL
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/components/ui/tags-input/TagsInput.test.ts`:
- Around line 145-161: The test "shows placeholder when modelValue is empty"
passes the slot-scoped isEmpty into TagsInputInput but never asserts its effect;
either assert that isEmpty is true and that this causes the expected behavior
(e.g., the input is auto-shown or a CSS class/prop on TagsInputInput is set) by
reading the slot scope or inspecting TagsInputInput props/classes, or remove the
unused isEmpty prop from the slot to simplify the test; update the test for
TagsInput and TagsInputInput accordingly so the intent is explicit (reference:
isEmpty, TagsInputInput, TagsInput, and the test case name).
- Around line 1-3: The test file uses "it(...)" to define test cases but your
coding guidelines require "test(...)" instead; update every test case
declaration in TagsInput.test.ts by replacing each "it(" call with "test(" while
keeping the same callback functions, descriptions, and any async/await usage
(i.e., preserve the existing describe blocks, callbacks, and imports such as
mount, describe, expect, h, nextTick) so only the test declaration identifier
changes.
♻️ Duplicate comments (1)
src/components/ui/tags-input/TagsInput.test.ts (1)
49-75: Consider consolidating redundant structural tests.These tests verify the same underlying behavior: that N tags result in N rendered subcomponents. They are borderline change-detector tests that only assert counts match input length.
Consider consolidating into a single test that verifies the complete structure, or focus on behavioral aspects like verifying actual tag text content is rendered correctly.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
src/components/ui/tags-input/TagsInput.test.ts
🧰 Additional context used
📓 Path-based instructions (11)
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/ui/tags-input/TagsInput.test.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: 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/components/ui/tags-input/TagsInput.test.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/components/ui/tags-input/TagsInput.test.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/ui/tags-input/TagsInput.test.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/ui/tags-input/TagsInput.test.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/components/ui/tags-input/TagsInput.test.ts
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/ui/tags-input/TagsInput.test.ts
+(tests-ui|src)/**/*.test.ts
📄 CodeRabbit inference engine (AGENTS.md)
+(tests-ui|src)/**/*.test.ts: Unit and component tests belong intests-ui/orsrc/**/*.test.tsusing Vitest
Write tests for all changes, especially bug fixes to catch future regressions
Do not write tests dependent on non-behavioral features like utility classes or styles
Do not write tests that just test the mocks - ensure tests fail when code behaves unexpectedly
Leverage Vitest's utilities for mocking where possible
Keep module mocks contained - do not use global mutable state within test files; usevi.hoisted()if necessary
Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Aim for behavioral coverage of critical and new features in unit tests
Files:
src/components/ui/tags-input/TagsInput.test.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/components/ui/tags-input/TagsInput.test.ts
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/components/ui/tags-input/TagsInput.test.ts
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts)
📄 CodeRabbit inference engine (AGENTS.md)
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts): Do not write change detector tests - avoid tests that only assert default values
Be parsimonious in testing - do not write redundant tests
Don't Mock What You Don't Own
Files:
src/components/ui/tags-input/TagsInput.test.ts
🧠 Learnings (28)
📓 Common learnings
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:54.349Z
Learning: For Vue components in Comfy-Org/ComfyUI_frontend: Do not suggest adding aria-label to buttons that already have visible text content (e.g., <span> elements with labels). The visible text automatically provides the accessible name. aria-label should only be used for elements without visible labels, such as icon-only buttons.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use provide/inject for dependency injection in Vue components
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 +(tests-ui|src)/**/*.test.ts : Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize provide/inject for dependency injection
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
📚 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 +(tests-ui|src)/**/*.test.ts : Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Write tests for all changes, especially bug fixes to catch future regressions
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Aim for behavioral coverage of critical and new features in unit tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Unit and component tests belong in `tests-ui/` or `src/**/*.test.ts` using Vitest
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Do not write tests dependent on non-behavioral features like utility classes or styles
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Leverage Vitest's utilities for mocking where possible
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 browser_tests/**/*.spec.ts : Use tags like `mobile`, `2x` in Playwright tests for configuration-aware test selection
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts) : Be parsimonious in testing - do not write redundant tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts) : Do not write change detector tests - avoid tests that only assert default values
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Keep module mocks contained - do not use global mutable state within test files; use `vi.hoisted()` if necessary
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-12-10T03:09:13.807Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:13.807Z
Learning: In test files, prefer selecting or asserting on accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests validate actual user-facing behavior and accessibility, reducing reliance on implementation details like test IDs.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Do not write tests that just test the mocks - ensure tests fail when code behaves unexpectedly
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursor
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2026-01-08T02:40:15.482Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7894
File: src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts:11-14
Timestamp: 2026-01-08T02:40:15.482Z
Learning: In TypeScript test files (e.g., any test under src), avoid duplicating interface/type definitions. Import real type definitions from the component modules under test and reference them directly, so there is a single source of truth and to prevent type drift. This improves maintainability and consistency across tests.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `vitest` for unit testing in this project
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `test` instead of `it` for defining test cases in vitest
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/components/ui/tags-input/TagsInput.test.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/components/ui/tags-input/TagsInput.test.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/components/ui/tags-input/TagsInput.test.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/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-12-30T01:31:04.927Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7797
File: tests-ui/tests/lib/litegraph/src/widgets/ComboWidget.test.ts:648-648
Timestamp: 2025-12-30T01:31:04.927Z
Learning: In Vitest v4, when mocking functions that may be called as constructors (using new), the mock implementation must use function() or class syntax rather than an arrow function. Arrow mocks can cause '<anonymous> is not a constructor' errors. This is a breaking change from Vitest v3 where mocks could use an arrow function. Apply this guideline to test files that mock constructor-like calls (e.g., in tests under tests-ui, such as ComboWidget.test.ts) and ensure mock implementations are defined with function() { ... } or class { ... } to preserve constructor behavior.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2026-01-09T02:07:54.558Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:54.558Z
Learning: In test files (e.g., any .test.ts or .test.tsx under src/...), when you create mock objects that partially implement an interface (such as LGraphNode), prefer casting with as Partial<InterfaceType> as InterfaceType rather than as any or as unknown as InterfaceType. This makes the incomplete implementation explicit while preserving type safety, improving readability and maintainability of tests.
Applied to files:
src/components/ui/tags-input/TagsInput.test.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/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2026-01-12T17:39:27.738Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
🧬 Code graph analysis (1)
src/components/ui/tags-input/TagsInput.test.ts (1)
src/extensions/core/widgetInputs.ts (1)
input(355-368)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: test
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: collect
🔇 Additional comments (3)
src/components/ui/tags-input/TagsInput.test.ts (3)
77-101: LGTM! Good behavioral test for model updates.This test properly verifies the interaction flow: clicking to enter edit mode, typing a value, pressing Enter, and confirming the model is updated. The use of an external variable to capture emitted payloads is appropriate.
103-120: LGTM! Disabled state test covers critical behavior.This test correctly verifies that when
disabled=true, the input is not shown initially and clicking does not enter edit mode. Good coverage of a key UX requirement.
122-143: LGTM! Click-outside behavior is properly tested with cleanup.The test correctly attaches to
document.bodyfor proper event propagation, verifies edit mode can be entered and exited via outside click, and properly unmounts to prevent memory leaks.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| import { mount } from '@vue/test-utils' | ||
| import { describe, expect, it } from 'vitest' | ||
| import { h, nextTick } from 'vue' |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Use test instead of it per coding guidelines.
The coding guidelines specify using test instead of it for defining test cases in Vitest. This applies throughout the file.
♻️ Suggested change
-import { describe, expect, it } from 'vitest'
+import { describe, expect, test } from 'vitest'Then replace all it(...) calls with test(...) throughout the file.
🤖 Prompt for AI Agents
In `@src/components/ui/tags-input/TagsInput.test.ts` around lines 1 - 3, The test
file uses "it(...)" to define test cases but your coding guidelines require
"test(...)" instead; update every test case declaration in TagsInput.test.ts by
replacing each "it(" call with "test(" while keeping the same callback
functions, descriptions, and any async/await usage (i.e., preserve the existing
describe blocks, callbacks, and imports such as mount, describe, expect, h,
nextTick) so only the test declaration identifier changes.
There was a problem hiding this comment.
What testing guideline says that?
There was a problem hiding this comment.
@coderabbitai What guideline says that? It's wrong.
| it('shows placeholder when modelValue is empty', async () => { | ||
| const wrapper = mount<typeof TagsInput<string>>(TagsInput, { | ||
| props: { | ||
| modelValue: [] | ||
| }, | ||
| slots: { | ||
| default: ({ isEmpty }: { isEmpty: boolean }) => | ||
| h(TagsInputInput, { placeholder: 'Add tag...', isEmpty }) | ||
| } | ||
| }) | ||
|
|
||
| await nextTick() | ||
|
|
||
| const input = wrapper.find('input') | ||
| expect(input.exists()).toBe(true) | ||
| expect(input.attributes('placeholder')).toBe('Add tag...') | ||
| }) |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Clarify the intent of isEmpty prop in placeholder test.
The test passes isEmpty from the slot scope to TagsInputInput, but this appears unused in the assertion. If isEmpty drives specific behavior (e.g., automatically showing the input), consider adding an assertion that validates this relationship, or remove it if unnecessary.
♻️ Suggested simplification if isEmpty is not needed
slots: {
- default: ({ isEmpty }: { isEmpty: boolean }) =>
- h(TagsInputInput, { placeholder: 'Add tag...', isEmpty })
+ default: () => h(TagsInputInput, { placeholder: 'Add tag...' })
}📝 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.
| it('shows placeholder when modelValue is empty', async () => { | |
| const wrapper = mount<typeof TagsInput<string>>(TagsInput, { | |
| props: { | |
| modelValue: [] | |
| }, | |
| slots: { | |
| default: ({ isEmpty }: { isEmpty: boolean }) => | |
| h(TagsInputInput, { placeholder: 'Add tag...', isEmpty }) | |
| } | |
| }) | |
| await nextTick() | |
| const input = wrapper.find('input') | |
| expect(input.exists()).toBe(true) | |
| expect(input.attributes('placeholder')).toBe('Add tag...') | |
| }) | |
| it('shows placeholder when modelValue is empty', async () => { | |
| const wrapper = mount<typeof TagsInput<string>>(TagsInput, { | |
| props: { | |
| modelValue: [] | |
| }, | |
| slots: { | |
| default: () => h(TagsInputInput, { placeholder: 'Add tag...' }) | |
| } | |
| }) | |
| await nextTick() | |
| const input = wrapper.find('input') | |
| expect(input.exists()).toBe(true) | |
| expect(input.attributes('placeholder')).toBe('Add tag...') | |
| }) |
🤖 Prompt for AI Agents
In `@src/components/ui/tags-input/TagsInput.test.ts` around lines 145 - 161, The
test "shows placeholder when modelValue is empty" passes the slot-scoped isEmpty
into TagsInputInput but never asserts its effect; either assert that isEmpty is
true and that this causes the expected behavior (e.g., the input is auto-shown
or a CSS class/prop on TagsInputInput is set) by reading the slot scope or
inspecting TagsInputInput props/classes, or remove the unused isEmpty prop from
the slot to simplify the test; update the test for TagsInput and TagsInputInput
accordingly so the intent is explicit (reference: isEmpty, TagsInputInput,
TagsInput, and the test case name).
|
When not editing tags, gap-1 makes the right side of a tag (when the X isn't visible) appear slightly larger than on the left side. Other than that, looks solid to me |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/components/ui/tags-input/TagsInput.stories.ts`:
- Around line 96-128: The ManyTags story is missing an args property which
prevents Storybook controls from showing consistently; update the export const
ManyTags: Story object to include an args: { disabled: false } (or match default
story controls) so the story provides the same controls as
Default/Empty/Disabled, ensuring the render setup still uses args and v-model
behavior remains unchanged.
- Around line 159-182: The CustomWidth story lacks an args property for
Storybook controls which `render` already expects (it reads args.disabled); add
an args object to the CustomWidth export (e.g., export const CustomWidth: Story
= { args: { disabled: false }, render: (...) }) so controls work consistently
with other stories like ManyTags and ensure the prop name matches usage
(`disabled`) used inside the render function.
♻️ Duplicate comments (2)
src/components/ui/tags-input/TagsInput.test.ts (2)
1-3: Usetestinstead ofitper coding guidelines.The import uses
itbut the coding guidelines requiretestfor defining test cases in Vitest. This applies to all test cases in the file (lines 22, 49, 68, 94, 113, 136).♻️ Suggested change
-import { describe, expect, it } from 'vitest' +import { describe, expect, test } from 'vitest'Then replace all
it(...)calls withtest(...)throughout the file.
136-152: Clarify the purpose of theisEmptyslot prop.The test passes
isEmptyfrom the slot scope toTagsInputInput, but the assertion only checks the placeholder attribute. IfisEmptyis meant to trigger automatic input visibility (which appears to be the case), consider adding an explicit assertion or comment clarifying this relationship.♻️ Option 1: Add clarifying assertion
it('shows placeholder when modelValue is empty', async () => { const wrapper = mount<typeof TagsInput<string>>(TagsInput, { props: { modelValue: [] }, slots: { default: ({ isEmpty }: { isEmpty: boolean }) => h(TagsInputInput, { placeholder: 'Add tag...', isEmpty }) } }) await nextTick() const input = wrapper.find('input') expect(input.exists()).toBe(true) expect(input.attributes('placeholder')).toBe('Add tag...') + // isEmpty=true causes TagsInputInput to auto-show without requiring click })♻️ Option 2: Remove unused prop if isEmpty doesn't affect this test
slots: { - default: ({ isEmpty }: { isEmpty: boolean }) => - h(TagsInputInput, { placeholder: 'Add tag...', isEmpty }) + default: () => h(TagsInputInput, { placeholder: 'Add tag...' }) }
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
src/components/ui/tags-input/TagsInput.stories.tssrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/locales/en/main.json
🧰 Additional context used
📓 Path-based instructions (14)
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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInput.stories.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using@ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInput.stories.ts
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInput.stories.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInput.stories.ts
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInput.stories.ts
src/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsName Vue components in PascalCase (e.g.,
MenuHamburger.vue)
Files:
src/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInput.stories.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/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInput.stories.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: 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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.ts
+(tests-ui|src)/**/*.test.ts
📄 CodeRabbit inference engine (AGENTS.md)
+(tests-ui|src)/**/*.test.ts: Unit and component tests belong intests-ui/orsrc/**/*.test.tsusing Vitest
Write tests for all changes, especially bug fixes to catch future regressions
Do not write tests dependent on non-behavioral features like utility classes or styles
Do not write tests that just test the mocks - ensure tests fail when code behaves unexpectedly
Leverage Vitest's utilities for mocking where possible
Keep module mocks contained - do not use global mutable state within test files; usevi.hoisted()if necessary
Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Aim for behavioral coverage of critical and new features in unit tests
Files:
src/components/ui/tags-input/TagsInput.test.ts
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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.ts
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts)
📄 CodeRabbit inference engine (AGENTS.md)
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts): Do not write change detector tests - avoid tests that only assert default values
Be parsimonious in testing - do not write redundant tests
Don't Mock What You Don't Own
Files:
src/components/ui/tags-input/TagsInput.test.ts
🧠 Learnings (56)
📓 Common learnings
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7603
File: src/components/queue/QueueOverlayHeader.vue:49-59
Timestamp: 2025-12-18T21:15:54.349Z
Learning: For Vue components in Comfy-Org/ComfyUI_frontend: Do not suggest adding aria-label to buttons that already have visible text content (e.g., <span> elements with labels). The visible text automatically provides the accessible name. aria-label should only be used for elements without visible labels, such as icon-only buttons.
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use provide/inject for dependency injection in Vue components
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize provide/inject for dependency injection
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Use Vue Test Utils for Component testing and follow best practices for making components easy to test
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
📚 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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue components
Applied to files:
src/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/**/*.vue : Use Vue 3 Single File Components (SFCs) with Composition API only
Applied to files:
src/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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 : Derive component types using `vue-component-type-helpers` (`ComponentProps`, `ComponentSlots`) instead of separate type files
Applied to files:
src/components/ui/tags-input/TagsInputItem.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement proper props and emits definitions
Applied to files:
src/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInput.stories.ts
📚 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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.vue
📚 Learning: 2026-01-12T17:39:27.738Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.
Applied to files:
src/components/ui/tags-input/TagsInputItem.vuesrc/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInputItemDelete.vuesrc/components/ui/tags-input/TagsInput.stories.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed
Applied to files:
src/components/ui/tags-input/TagsInput.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/**/*.vue : Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid `withDefaults` or runtime props
Applied to files:
src/components/ui/tags-input/TagsInput.vuesrc/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInput.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Follow Vue 3 style guide and naming conventions
Applied to files:
src/components/ui/tags-input/TagsInput.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Applied to files:
src/components/ui/tags-input/TagsInput.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 +(tests-ui|src)/**/*.test.ts : Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Write tests for all changes, especially bug fixes to catch future regressions
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Aim for behavioral coverage of critical and new features in unit tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Unit and component tests belong in `tests-ui/` or `src/**/*.test.ts` using Vitest
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Do not write tests dependent on non-behavioral features like utility classes or styles
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Leverage Vitest's utilities for mocking where possible
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 browser_tests/**/*.spec.ts : Use tags like `mobile`, `2x` in Playwright tests for configuration-aware test selection
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts) : Be parsimonious in testing - do not write redundant tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts) : Do not write change detector tests - avoid tests that only assert default values
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Keep module mocks contained - do not use global mutable state within test files; use `vi.hoisted()` if necessary
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-12-10T03:09:13.807Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:13.807Z
Learning: In test files, prefer selecting or asserting on accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests validate actual user-facing behavior and accessibility, reducing reliance on implementation details like test IDs.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 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 +(tests-ui|src)/**/*.test.ts : Do not write tests that just test the mocks - ensure tests fail when code behaves unexpectedly
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursor
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2026-01-08T02:40:15.482Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7894
File: src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts:11-14
Timestamp: 2026-01-08T02:40:15.482Z
Learning: In TypeScript test files (e.g., any test under src), avoid duplicating interface/type definitions. Import real type definitions from the component modules under test and reference them directly, so there is a single source of truth and to prevent type drift. This improves maintainability and consistency across tests.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `test` instead of `it` for defining test cases in vitest
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Use `vitest` for unit testing in this project
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Prefer the use of `test.extend` over loose variables; import `test as baseTest` from `vitest`
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Follow naming conventions for browser tests
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-12-05T08:52:50.787Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/parameters/SectionWidgets.vue:41-49
Timestamp: 2025-12-05T08:52:50.787Z
Learning: In Vue 3.4+ SFCs with a build step, kebab-case prop shorthand (e.g., `:is-empty`) automatically resolves to the corresponding camelCase variable in scope (e.g., `isEmpty`). This is valid syntax combining same-name shorthand with automatic kebab-case-to-camelCase conversion and should not be flagged as an error.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.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/components/ui/tags-input/TagsInput.test.tssrc/components/ui/tags-input/TagsInput.stories.ts
📚 Learning: 2025-12-30T01:31:04.927Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7797
File: tests-ui/tests/lib/litegraph/src/widgets/ComboWidget.test.ts:648-648
Timestamp: 2025-12-30T01:31:04.927Z
Learning: In Vitest v4, when mocking functions that may be called as constructors (using new), the mock implementation must use function() or class syntax rather than an arrow function. Arrow mocks can cause '<anonymous> is not a constructor' errors. This is a breaking change from Vitest v3 where mocks could use an arrow function. Apply this guideline to test files that mock constructor-like calls (e.g., in tests under tests-ui, such as ComboWidget.test.ts) and ensure mock implementations are defined with function() { ... } or class { ... } to preserve constructor behavior.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2026-01-09T02:07:54.558Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:54.558Z
Learning: In test files (e.g., any .test.ts or .test.tsx under src/...), when you create mock objects that partially implement an interface (such as LGraphNode), prefer casting with as Partial<InterfaceType> as InterfaceType rather than as any or as unknown as InterfaceType. This makes the incomplete implementation explicit while preserving type safety, improving readability and maintainability of tests.
Applied to files:
src/components/ui/tags-input/TagsInput.test.ts
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with Message
Applied to files:
src/components/ui/tags-input/TagsInputItemDelete.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/ui/tags-input/TagsInputItemDelete.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,css} : Use Tailwind CSS only for styling (no custom CSS)
Applied to files:
src/components/ui/tags-input/TagsInputItemDelete.vue
📚 Learning: 2025-12-05T06:11:09.383Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7177
File: src/platform/assets/components/UploadModelFooter.vue:72-78
Timestamp: 2025-12-05T06:11:09.383Z
Learning: For the ComfyUI_frontend repository, avoid suggesting comments that would be redundant when the code is already self-explanatory through descriptive naming (e.g., filenames, prop names, aria-labels). The project prefers clean code without unnecessary documentation comments.
Applied to files:
src/components/ui/tags-input/TagsInputItemDelete.vue
📚 Learning: 2025-12-16T17:30:29.719Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7559
File: .storybook/preview.ts:61-61
Timestamp: 2025-12-16T17:30:29.719Z
Learning: In .storybook/preview.ts for the Comfy-Org/ComfyUI_frontend repository, using `document.body.classList.add('[&_*]:!font-inter')` is the correct approach for applying the Inter font to all Storybook story elements. The simpler `font-inter` class alone does not work in this context. This runtime arbitrary variant pattern is valid and should not be flagged as an issue.
Applied to files:
src/components/ui/tags-input/TagsInput.stories.ts
🧬 Code graph analysis (1)
src/components/ui/tags-input/TagsInput.stories.ts (1)
src/components/input/SingleSelect.stories.ts (1)
Story(40-40)
⏰ 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). (7)
- GitHub Check: deploy-and-comment
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: collect
- GitHub Check: collect
- GitHub Check: lint-and-format
🔇 Additional comments (9)
src/components/ui/tags-input/TagsInputItem.vue (1)
1-27: LGTM!The component correctly wraps reka-ui's TagsInputItem with proper prop forwarding and Tailwind class composition. Good use of Vue 3.5 style prop destructuring and separate type imports.
src/locales/en/main.json (1)
19-19: LGTM!The translation key
g.removeTagis correctly added and matches the usage inTagsInputItemDelete.vue(t('g.removeTag')).src/components/ui/tags-input/TagsInputItemDelete.vue (1)
1-36: LGTM!The component correctly implements an accessible delete button with:
- Proper
aria-labelvia vue-i18n for screen reader support- Smooth transition animations using
data-[disabled]selectors for the click-to-edit UX- Correct use of the shared Button component with appropriate variant/size
src/components/ui/tags-input/TagsInput.vue (1)
1-77: LGTM!The component implements the click-to-edit pattern cleanly with:
- Proper use of
provide/injectfor cross-component focus/editing coordination (per coding guidelines)- VueUse's
onClickOutsidefor exiting edit mode- Correct handling of async focus with
nextTick- Decorative icon marked with
aria-hidden="true"- Clean slot API exposing
isEmptyfor conditional placeholder renderingsrc/components/ui/tags-input/TagsInput.test.ts (5)
11-27: LGTM!The helper function and slot content test are clean and verify actual rendering behavior.
29-47: LGTM!The
mountFullTagsInputhelper cleanly composes the full component tree using render functions, making tests readable and maintainable.
49-66: LGTM!Good consolidation - the test verifies both structural elements and actual text content rendering, making it a meaningful behavioral test rather than just count assertions.
68-92: LGTM!The test properly validates the complete user flow: clicking to enter edit mode, typing a tag, and pressing Enter to add it. Using a mutable variable to capture
onUpdate:modelValueis an acceptable pattern for testing v-model behavior.
94-134: LGTM!Good coverage of critical UX behaviors:
- Disabled state correctly prevents edit mode entry
- Click-outside properly exits edit mode
- The
attachTo: document.bodyand explicitwrapper.unmount()follow best practices for DOM-attached tests to prevent memory leaks.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| export const ManyTags: Story = { | ||
| render: (args) => ({ | ||
| components: { | ||
| TagsInput, | ||
| TagsInputInput, | ||
| TagsInputItem, | ||
| TagsInputItemDelete, | ||
| TagsInputItemText | ||
| }, | ||
| setup() { | ||
| const tags = ref([ | ||
| 'JavaScript', | ||
| 'TypeScript', | ||
| 'Vue', | ||
| 'React', | ||
| 'Svelte', | ||
| 'Node.js', | ||
| 'Python', | ||
| 'Rust' | ||
| ]) | ||
| return { tags, args } | ||
| }, | ||
| template: ` | ||
| <TagsInput v-model="tags" :disabled="args.disabled" class="w-96" v-slot="{ isEmpty }"> | ||
| <TagsInputItem v-for="tag in tags" :key="tag" :value="tag"> | ||
| <TagsInputItemText /> | ||
| <TagsInputItemDelete /> | ||
| </TagsInputItem> | ||
| <TagsInputInput :is-empty="isEmpty" placeholder="Add technology..." /> | ||
| </TagsInput> | ||
| ` | ||
| }) | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding args for Storybook controls consistency.
The ManyTags story doesn't have an args property, unlike Default, Empty, and Disabled. Adding args would enable the Storybook controls panel to work consistently across all stories.
Suggested fix
export const ManyTags: Story = {
+ args: {
+ disabled: false
+ },
render: (args) => ({📝 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.
| export const ManyTags: Story = { | |
| render: (args) => ({ | |
| components: { | |
| TagsInput, | |
| TagsInputInput, | |
| TagsInputItem, | |
| TagsInputItemDelete, | |
| TagsInputItemText | |
| }, | |
| setup() { | |
| const tags = ref([ | |
| 'JavaScript', | |
| 'TypeScript', | |
| 'Vue', | |
| 'React', | |
| 'Svelte', | |
| 'Node.js', | |
| 'Python', | |
| 'Rust' | |
| ]) | |
| return { tags, args } | |
| }, | |
| template: ` | |
| <TagsInput v-model="tags" :disabled="args.disabled" class="w-96" v-slot="{ isEmpty }"> | |
| <TagsInputItem v-for="tag in tags" :key="tag" :value="tag"> | |
| <TagsInputItemText /> | |
| <TagsInputItemDelete /> | |
| </TagsInputItem> | |
| <TagsInputInput :is-empty="isEmpty" placeholder="Add technology..." /> | |
| </TagsInput> | |
| ` | |
| }) | |
| } | |
| export const ManyTags: Story = { | |
| args: { | |
| disabled: false | |
| }, | |
| render: (args) => ({ | |
| components: { | |
| TagsInput, | |
| TagsInputInput, | |
| TagsInputItem, | |
| TagsInputItemDelete, | |
| TagsInputItemText | |
| }, | |
| setup() { | |
| const tags = ref([ | |
| 'JavaScript', | |
| 'TypeScript', | |
| 'Vue', | |
| 'React', | |
| 'Svelte', | |
| 'Node.js', | |
| 'Python', | |
| 'Rust' | |
| ]) | |
| return { tags, args } | |
| }, | |
| template: ` | |
| <TagsInput v-model="tags" :disabled="args.disabled" class="w-96" v-slot="{ isEmpty }"> | |
| <TagsInputItem v-for="tag in tags" :key="tag" :value="tag"> | |
| <TagsInputItemText /> | |
| <TagsInputItemDelete /> | |
| </TagsInputItem> | |
| <TagsInputInput :is-empty="isEmpty" placeholder="Add technology..." /> | |
| </TagsInput> | |
| ` | |
| }) | |
| } |
🤖 Prompt for AI Agents
In `@src/components/ui/tags-input/TagsInput.stories.ts` around lines 96 - 128, The
ManyTags story is missing an args property which prevents Storybook controls
from showing consistently; update the export const ManyTags: Story object to
include an args: { disabled: false } (or match default story controls) so the
story provides the same controls as Default/Empty/Disabled, ensuring the render
setup still uses args and v-model behavior remains unchanged.
| export const CustomWidth: Story = { | ||
| render: (args) => ({ | ||
| components: { | ||
| TagsInput, | ||
| TagsInputInput, | ||
| TagsInputItem, | ||
| TagsInputItemDelete, | ||
| TagsInputItemText | ||
| }, | ||
| setup() { | ||
| const tags = ref(['Full', 'Width']) | ||
| return { tags, args } | ||
| }, | ||
| template: ` | ||
| <TagsInput v-model="tags" :disabled="args.disabled" class="w-full" v-slot="{ isEmpty }"> | ||
| <TagsInputItem v-for="tag in tags" :key="tag" :value="tag"> | ||
| <TagsInputItemText /> | ||
| <TagsInputItemDelete /> | ||
| </TagsInputItem> | ||
| <TagsInputInput :is-empty="isEmpty" placeholder="Add tag..." /> | ||
| </TagsInput> | ||
| ` | ||
| }) | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Consider adding args for Storybook controls consistency.
Similar to ManyTags, the CustomWidth story would benefit from an args property for consistent Storybook controls behavior.
Suggested fix
export const CustomWidth: Story = {
+ args: {
+ disabled: false
+ },
render: (args) => ({🤖 Prompt for AI Agents
In `@src/components/ui/tags-input/TagsInput.stories.ts` around lines 159 - 182,
The CustomWidth story lacks an args property for Storybook controls which
`render` already expects (it reads args.disabled); add an args object to the
CustomWidth export (e.g., export const CustomWidth: Story = { args: { disabled:
false }, render: (...) }) so controls work consistently with other stories like
ManyTags and ensure the prop name matches usage (`disabled`) used inside the
render function.
comfydesigner
left a comment
comfydesigner
left a comment
There was a problem hiding this comment.
Colors and spacing are good now
DrJKL
added
needs-backport
## Summary Add TagsInput component based on shadcn-vue/Reka UI primitives with a click-to-edit UX pattern. ## Features - **Click-to-edit behavior**: Starts in read-only state; clicking enables editing and focuses input; clicking outside exits edit mode - **Disabled state**: When `disabled=true`, component is completely inert - **Empty state placeholder**: Shows input placeholder when tag list is empty - **Animated transitions**: Delete button animates when toggling edit mode --------- Co-authored-by: Amp <amp@ampcode.com>
github-actions
bot
removed
the
needs-backport
…xt and TagsInput escape key (#8238) Backport of #8204 to `cloud/1.37`. Cherry-picked merge commit `7b701ad07b1c34d121448e21d6f8b5c13ef07d73`. ## Original PR Summary This PR improves keyboard event handling consistency and fixes an issue where pressing Escape in nested input components would unintentionally close parent modals/dialogs. ### Changes - **EditableText keyup → keydown Migration**: Changed `@keyup.enter` to `@keydown.enter` and `@keyup.escape` to `@keydown.escape` for more consistent and responsive feedback - Updated corresponding unit tests to use `keydown` triggers > **Note**: The TagsInput escape key handling changes from the original PR are not included in this backport because the TagsInput component (#8066) was added after the cloud/1.37 branch was created. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8238-backport-cloud-1-37-fix-Consistent-keydown-handling-for-EditableText-and-TagsInput-esc-2f06d73d365081288e5ed0c656d78412) by [Unito](https://www.unito.io)
4 participants
Summary
Add TagsInput component based on shadcn-vue/Reka UI primitives with a click-to-edit UX pattern.
Features
disabled=true, component is completely inert