Feat: Rename and Delete for imported Models ☁️ #6969
Conversation
|
Warning Rate limit exceeded@DrJKL has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 0 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds confirm dialog components and a showConfirmDialog API; refactors AssetCard for editable names, rename/delete flows, and a select emit; adds assetService.updateAsset; tightens dialog typings to ComponentAttrs generics; adjusts EditableText key handling; small button, i18n, feature-flag, styling, and util updates. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant AssetCard
participant DialogStore
participant ConfirmDialog
participant AssetService
participant Backend
User->>AssetCard: Click "Delete"
AssetCard->>DialogStore: showConfirmDialog(options)
DialogStore->>ConfirmDialog: render(header, body, footer)
ConfirmDialog->>User: display confirm UI
alt User confirms
User->>ConfirmDialog: Click Confirm
ConfirmDialog->>AssetCard: emit confirm
AssetCard->>AssetService: update/delete asset
AssetService->>Backend: HTTP PUT/DELETE
Backend-->>AssetService: response
AssetService-->>AssetCard: result
AssetCard->>DialogStore: close dialog / update UI
else User cancels
User->>ConfirmDialog: Click Cancel
ConfirmDialog->>DialogStore: close dialog
end
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/01/2025, 10:26:34 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results⏰ Completed at: 12/01/2025, 10:41:46 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.18 MB (baseline 3.18 MB) • 🔴 +1 kBMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 956 kB (baseline 948 kB) • 🔴 +8.29 kBGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • 🔴 +2 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 139 kB (baseline 139 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 — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Status: 1 added / 1 removed Other — 3.84 MB (baseline 3.84 MB) • ⚪ 0 BBundles that do not match a named category
Status: 20 added / 20 removed |
DrJKL
changed the title
DrJKL
requested review from
christian-byrne,
luke-mino-altherr and
viva-jinyi
DrJKL
requested review from
a team,
KarryCharon,
Yorha4D and
shinshin86
as code owners
dosubot
bot
added
the
size:XL
DrJKL
added
preview
claude-review
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (3)
src/components/button/MoreButton.vue (1)
3-3: Click handler does not invoketogglemethodThe expression
@click="popover?.toggle"evaluates the property but doesn't call the method, so the popover won't open/close on click.Apply this fix:
- <IconButton :size="size" :type="type" @click="popover?.toggle"> + <IconButton :size="size" :type="type" @click="(e) => popover?.toggle(e)">Alternatively, define a
togglefunction in the script and use@click="toggle".src/platform/assets/components/AssetCard.vue (2)
141-143: Deletion flow still lacks list update and user-facing error feedbackThe delete confirm dialog improves things, but two issues from earlier reviews remain:
- After a successful
assetService.deleteAsset(asset.id), the asset is not removed from the UI (TODO comment is still there), so the card appears as if it still exists.- On failure, the error is only logged to the console; the user gets no feedback and the dialog closes anyway.
A common pattern here would be:
- Emit an event (e.g.
deleted) with the asset id so the parent/grid can remove it.- Surface an error via your standard toast/notification with an i18n message (e.g.
assetBrowser.deletion.error), and keep the list unchanged.Sketch of the wiring:
-defineEmits<{ - select: [asset: AssetDisplayItem] -}>() +const emit = defineEmits<{ + select: [asset: AssetDisplayItem] + deleted: [assetId: string] +}>() @@ onConfirm: async () => { try { await assetService.deleteAsset(asset.id) - // TODO: Remove this from the list on success. + emit('deleted', asset.id) } catch (err: unknown) { - console.error(err) + console.error(err) + // TODO: show user-facing error (toast/dialog) using your + // existing notification helper, e.g. t('assetBrowser.deletion.error') } closeDialog(confirmDialog) }This keeps backend, store, and UI in sync and aligns with the “proper error handling / user feedback” guideline.
Also applies to: 168-195
81-87: Add error handling and basic guards toassetRename
assetRenamedirectly callsassetService.updateAssetand updatesnewNameRefwithout any error handling or basic guards, so:
- A failed API call can leave the UI showing the new name even though it wasn’t persisted.
- Users never see that the rename failed.
Consider:
- Short-circuiting when the new name is empty or unchanged.
- Wrapping the update in try/catch and only updating
newNameRefon success.- Surfacing errors via your standard toast/notification with an i18n message.
For example:
async function assetRename(newName?: string) { isEditing.value = false - if (newName) { - await assetService.updateAsset(asset.id, { - name: newName - }) - newNameRef.value = newName - } + const trimmed = newName?.trim() + if (!trimmed || trimmed === asset.name) return + + try { + await assetService.updateAsset(asset.id, { name: trimmed }) + newNameRef.value = trimmed + } catch (err: unknown) { + console.error(err) + // TODO: show user-facing error (toast/dialog), e.g. t('assetBrowser.rename.error') + } }This keeps the visual state aligned with the backend and improves UX on failure.
Also applies to: 156-158, 204-212
🧹 Nitpick comments (5)
src/types/buttonTypes.ts (1)
42-61: Bordered button variants use consistent base tokens; consider deduplicating border classesThe updated base and border maps for primary/secondary/transparent look coherent and keep behavior simple. If you want to cut repetition, you could factor out the shared
border border-solidand keep only the color per type:export const getBorderButtonTypeClasses = (type: ButtonType = 'primary') => { const baseByType = { - primary: 'bg-base-background text-base-foreground', - secondary: 'bg-secondary-background text-base-foreground', + primary: 'bg-base-background text-base-foreground', + secondary: 'bg-secondary-background text-base-foreground', transparent: cn( 'bg-transparent text-base-foreground hover:bg-secondary-background-hover' ), accent: 'bg-primary-background hover:bg-primary-background-hover text-white font-bold' } as const - const borderByType = { - primary: 'border border-solid border-base-background', - secondary: 'border border-solid border-base-foreground', - transparent: 'border border-solid border-base-foreground', - accent: 'border border-solid border-primary-background' - } as const - - return `${baseByType[type]} ${borderByType[type]}` + const borderColorByType = { + primary: 'border-base-background', + secondary: 'border-base-foreground', + transparent: 'border-base-foreground', + accent: 'border-primary-background' + } as const + + return cn( + baseByType[type], + 'border border-solid', + borderColorByType[type] + ) }Purely optional, but keeps the mapping DRY and leans on
cnconsistently.src/components/button/MoreButton.vue (1)
28-39: Consider extracting inline handlers to named functionsThe inline arrow functions work correctly but are verbose. For improved readability, consider extracting them:
+function onShow() { + isOpen.value = true + emit('menuOpened') +} + +function onHide() { + isOpen.value = false + emit('menuClosed') +}Then use
@show="onShow"and@hide="onHide".src/stores/dialogStore.ts (1)
37-56: TightencreateDialog/showDialoggenerics to preserve component-specific propsThe move to
ComponentAttrsand genericDialogInstance/ShowDialogOptionslooks good, but the generics aren’t fully carried through:
createDialoginfersdialogas a plain object, notDialogInstance<H, B, F>, so consumers don’t benefit from the stronger typing ofheaderProps/contentProps/footerProps.showExtensionDialogusesShowDialogOptions & { key: string }without generics, so extension dialogs effectively lose their specific header/body/footer prop typing.You can tighten this by explicitly annotating the
dialogliteral and makingshowExtensionDialoggeneric as well, e.g.:- function createDialog< - H extends Component = Component, - B extends Component = Component, - F extends Component = Component - >(options: ShowDialogOptions<H, B, F> & { key: string }) { + function createDialog< + H extends Component = Component, + B extends Component = Component, + F extends Component = Component + >(options: ShowDialogOptions<H, B, F> & { key: string }) { @@ - const dialog = { + const dialog: DialogInstance<H, B, F> = { key: options.key, // ... }and optionally:
- function showExtensionDialog(options: ShowDialogOptions & { key: string }) { + function showExtensionDialog< + H extends Component = Component, + B extends Component = Component, + F extends Component = Component + >(options: ShowDialogOptions<H, B, F> & { key: string }) {This keeps the runtime behavior the same but gives much better type feedback for composed dialogs like your new confirm dialog.
Also applies to: 58-78, 137-143, 212-216
src/platform/assets/components/AssetCard.vue (2)
33-68: Remove deadIconButtonusage to avoid unused import / noise
IconButtonis imported and rendered withv-if="false", so it will never be shown but still forces the component and styles into the bundle.If this is just a placeholder, it’s cleaner to drop it until the action is implemented:
- <IconButton v-if="false" size="sm"> - <i class="icon-[lucide--file-text]" /> - </IconButton>You can reintroduce it when the extra action is ready.
156-158: Clarify or remove thenewNameRef“TEMPORARY” comment
newNameRefis now updated from the rename API call, but the comment still says “TEMPORARY: Replace with actual response from API”, which is no longer accurate and can confuse future readers.Either update the comment to describe the current behavior, or remove it entirely if the current approach is acceptable.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
src/components/button/IconGroup.vue(1 hunks)src/components/button/MoreButton.vue(3 hunks)src/components/common/EditableText.vue(2 hunks)src/components/dialog/GlobalDialog.vue(1 hunks)src/components/dialog/confirm/ConfirmBody.vue(1 hunks)src/components/dialog/confirm/ConfirmFooter.vue(1 hunks)src/components/dialog/confirm/ConfirmHeader.vue(1 hunks)src/components/dialog/confirm/confirmDialog.ts(1 hunks)src/locales/en/main.json(2 hunks)src/platform/assets/components/AssetBadgeGroup.vue(1 hunks)src/platform/assets/components/AssetBrowserModal.vue(1 hunks)src/platform/assets/components/AssetCard.vue(2 hunks)src/platform/assets/components/AssetGrid.vue(2 hunks)src/platform/assets/components/UploadModelDialog.vue(1 hunks)src/platform/assets/services/assetService.ts(2 hunks)src/services/dialogService.ts(8 hunks)src/stores/dialogStore.ts(5 hunks)src/types/buttonTypes.ts(3 hunks)src/utils/gridUtil.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (11)
- src/platform/assets/components/AssetBrowserModal.vue
- src/platform/assets/components/AssetBadgeGroup.vue
- src/components/dialog/confirm/ConfirmFooter.vue
- src/platform/assets/components/AssetGrid.vue
- src/utils/gridUtil.ts
- src/services/dialogService.ts
- src/components/common/EditableText.vue
- src/components/dialog/confirm/ConfirmHeader.vue
- src/components/dialog/confirm/confirmDialog.ts
- src/locales/en/main.json
- src/components/button/IconGroup.vue
🧰 Additional context used
📓 Path-based instructions (22)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/components/dialog/GlobalDialog.vuesrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/platform/assets/components/UploadModelDialog.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/components/dialog/GlobalDialog.vuesrc/platform/assets/services/assetService.tssrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/stores/dialogStore.tssrc/types/buttonTypes.tssrc/platform/assets/components/UploadModelDialog.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/components/dialog/GlobalDialog.vuesrc/platform/assets/services/assetService.tssrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/stores/dialogStore.tssrc/types/buttonTypes.tssrc/platform/assets/components/UploadModelDialog.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/components/dialog/GlobalDialog.vuesrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/components/dialog/GlobalDialog.vuesrc/platform/assets/services/assetService.tssrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/stores/dialogStore.tssrc/types/buttonTypes.tssrc/platform/assets/components/UploadModelDialog.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/components/dialog/GlobalDialog.vuesrc/platform/assets/services/assetService.tssrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/stores/dialogStore.tssrc/types/buttonTypes.tssrc/platform/assets/components/UploadModelDialog.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/components/dialog/GlobalDialog.vuesrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/platform/assets/components/UploadModelDialog.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/components/dialog/GlobalDialog.vuesrc/platform/assets/services/assetService.tssrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/stores/dialogStore.tssrc/types/buttonTypes.tssrc/platform/assets/components/UploadModelDialog.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/components/dialog/GlobalDialog.vuesrc/platform/assets/services/assetService.tssrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/stores/dialogStore.tssrc/types/buttonTypes.tssrc/platform/assets/components/UploadModelDialog.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/components/dialog/GlobalDialog.vuesrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/components/dialog/GlobalDialog.vuesrc/platform/assets/services/assetService.tssrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/stores/dialogStore.tssrc/types/buttonTypes.tssrc/platform/assets/components/UploadModelDialog.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/components/dialog/GlobalDialog.vuesrc/components/button/MoreButton.vuesrc/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/platform/assets/components/UploadModelDialog.vuesrc/components/**/*.vue
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue componentsFiles:
src/components/dialog/GlobalDialog.vuesrc/components/button/MoreButton.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/components/**/*.{vue,css}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,css}: Use Tailwind CSS only for styling (no custom CSS)
Use the correct tokens from style.css in the design system packageFiles:
src/components/dialog/GlobalDialog.vuesrc/components/button/MoreButton.vuesrc/components/dialog/confirm/ConfirmBody.vuesrc/components/**/*.{vue,ts,js}
📄 CodeRabbit inference engine (src/components/CLAUDE.md)
src/components/**/*.{vue,ts,js}: Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners
Use useIntersectionObserver for visibility detection instead of custom scroll handlers
Use vue-i18n for ALL UI stringsFiles:
src/components/dialog/GlobalDialog.vuesrc/components/button/MoreButton.vuesrc/components/dialog/confirm/ConfirmBody.vue**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/platform/assets/services/assetService.tssrc/stores/dialogStore.tssrc/types/buttonTypes.ts**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issueFiles:
src/platform/assets/services/assetService.tssrc/stores/dialogStore.tssrc/types/buttonTypes.tssrc/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyFiles:
src/platform/assets/services/assetService.tssrc/stores/dialogStore.tssrc/types/buttonTypes.ts**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configurationFiles:
src/platform/assets/services/assetService.tssrc/stores/dialogStore.tssrc/types/buttonTypes.tssrc/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directlyFiles:
src/platform/assets/services/assetService.tssrc/**/stores/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/stores/**/*.{ts,tsx}: Maintain clear public interfaces and restrict extension access in stores
Use TypeScript for type safety in state management storesFiles:
src/stores/dialogStore.ts**/stores/*Store.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name Pinia stores with the
*Store.tssuffixFiles:
src/stores/dialogStore.ts🧠 Learnings (21)
📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue componentsApplied to files:
src/components/dialog/GlobalDialog.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue componentsApplied to files:
src/components/dialog/GlobalDialog.vuesrc/components/dialog/confirm/ConfirmBody.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Implement proper props and emits definitionsApplied to files:
src/components/dialog/GlobalDialog.vuesrc/components/dialog/confirm/ConfirmBody.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with PopoverApplied to files:
src/components/dialog/GlobalDialog.vuesrc/components/button/MoreButton.vuesrc/platform/assets/components/UploadModelDialog.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Use vue 3.5 style of default prop declarationApplied to files:
src/components/dialog/GlobalDialog.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Destructure props using Vue 3.5 style in Vue componentsApplied to files:
src/components/dialog/GlobalDialog.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 defineExpose only for imperative operations (such as form.validate(), modal.open())Applied to files:
src/components/button/MoreButton.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitchApplied to files:
src/components/button/MoreButton.vuesrc/platform/assets/components/UploadModelDialog.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: User-friendly and actionable error messages in error handlingApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaksApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.vue : Name Vue components in PascalCase (e.g., `MenuHamburger.vue`)Applied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive stateApplied to files:
src/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/platform/assets/components/AssetCard.vuesrc/components/dialog/confirm/ConfirmBody.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition APIApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/*.{ts,tsx,vue} : Avoid using ts-expect-error; use proper TypeScript types insteadApplied to files:
src/components/dialog/confirm/ConfirmBody.vue📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx} : Never use `as any` type assertions - fix the underlying type issueApplied to files:
src/components/dialog/confirm/ConfirmBody.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.{ts,tsx,vue} : Enforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templatesApplied to files:
src/components/dialog/confirm/ConfirmBody.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} : Implement proper error handlingApplied to files:
src/components/dialog/confirm/ConfirmBody.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guideApplied to files:
src/components/dialog/confirm/ConfirmBody.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/platform/assets/components/UploadModelDialog.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/platform/assets/components/UploadModelDialog.vue🧬 Code graph analysis (1)
src/platform/assets/services/assetService.ts (2)
src/platform/assets/schemas/assetSchema.ts (1)
AssetMetadata(74-74)src/scripts/api.ts (1)
api(1289-1289)⏰ 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). (8)
- GitHub Check: playwright-tests-chromium-sharded (2, 8)
- GitHub Check: playwright-tests-chromium-sharded (6, 8)
- GitHub Check: playwright-tests-chromium-sharded (8, 8)
- GitHub Check: playwright-tests-chromium-sharded (4, 8)
- GitHub Check: playwright-tests-chromium-sharded (5, 8)
- GitHub Check: playwright-tests-chromium-sharded (3, 8)
- GitHub Check: playwright-tests-chromium-sharded (7, 8)
- GitHub Check: playwright-tests-chromium-sharded (1, 8)
🔇 Additional comments (6)
src/types/buttonTypes.ts (1)
26-40: Primary button token mapping change looks consistentSwitching the solid primary variant to
bg-base-foreground text-base-backgroundkeeps the API intact while moving to semantic tokens; no TS or runtime risks here.src/platform/assets/components/UploadModelDialog.vue (1)
3-3: LGTM!The border utility change from
border-t-[1px]toborder-tis a valid simplification. Tailwind'sborder-tdefaults to 1px width, making this functionally equivalent but more idiomatic.src/components/dialog/GlobalDialog.vue (1)
14-19: LGTM!The addition of
v-bind="item.headerProps"correctly enables prop propagation to dynamic header components. This is essential for the new confirm dialog pattern whereConfirmHeaderreceives configurable props.src/components/button/MoreButton.vue (1)
72-82: LGTM!The state management and
defineExposepattern are correct. ExposingisOpenalongsidehidefollows guidelines for imperative operations and allows parent components to check menu state when needed.src/platform/assets/services/assetService.ts (1)
392-392: LGTM!The
updateAssetfunction is correctly exposed in the service's public API.src/components/dialog/confirm/ConfirmBody.vue (1)
1-19: LGTM!The component correctly unwraps
MaybeRefOrGetter<string>usingtoValuein a computed property. This addresses the previous review concern and ensures refs/getters are properly resolved before rendering.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (3)
src/platform/assets/components/AssetCard.vue (3)
2-17: Interactive card focus behavior and ARIA wiring look goodTying
tabindexand the Enter key handler tointeractiveand wiringaria-labelledby/aria-describedbyto stable IDs is a solid fix for earlier keyboard/semantics issues. Optional: if you want closer button semantics for screen readers, you could addrole="button"and a Space key handler wheninteractiveis true, as long as that doesn’t reintroduce nested-button problems.
19-32: Preview/loading state and action menu integration are in good shapeUsing
useImageto drive the loading/error overlay and falling back to a gradient block is a clean pattern, and adding:alt="asset.name"on the preview image fixes the earlier accessibility gap while keeping the card clickable via@click.selfand the root key handler. The More menu wiring for rename/delete with i18n labels also looks correct.Also applies to: 35-70
151-153: Prevent duplicate deletes and surface rename errors to the userTwo behavioral issues worth tightening up:
optionsDisabledis never toggled during delete.
That means the confirm button can be clicked multiple times while the DELETE request is in flight. Since you already passoptionsDisabledinto the footer, you can disable it during the async call:onConfirm: async () => { - try { + try { + optionsDisabled.value = true promptText.value = t('assetBrowser.deletion.inProgress', { asset: asset.name }) await assetService.deleteAsset(asset.id) @@ - } catch (err: unknown) { + } catch (err: unknown) { console.error(err) promptText.value = t('assetBrowser.deletion.failed', { asset: asset.name }) @@ - } finally { - closeDialog(confirmDialog) - } + } finally { + optionsDisabled.value = false + closeDialog(confirmDialog) + }
- Rename failures are silent from the user’s perspective.
assetRenamelogs the error and revertsnewNameRef, but the user doesn’t get any feedback that their rename failed. Based on learnings, it would be better to surface a toast or dialog (using an i18n key likeassetBrowser.rename.failed) or emit an error event so the parent can notify the user. That keeps error handling user-friendly instead of just writing to the console.Also applies to: 171-217, 224-240
🧹 Nitpick comments (2)
src/platform/assets/services/assetService.ts (1)
4-7:updateAssetflow is solid; consider improving invalid-response error formattingThe new
updateAssetmethod is well-typed and consistent with the rest of this service: correct endpoint, JSON body,Partial<AssetMetadata>, and Zod validation viaassetItemSchema.safeParseall make sense.One small improvement: when validation fails you currently interpolate the raw ZodError object, which will stringify poorly. You already use
fromZodErrorandEXPERIMENTAL_WARNINGelsewhere; mirroring that here would keep errors readable and consistent:const newAsset = assetItemSchema.safeParse(await res.json()) if (newAsset.success) { return newAsset.data } - throw new Error( - `Unable to update asset ${id}: Invalid response - ${newAsset.error}` - ) + const parsedError = fromZodError(newAsset.error) + throw new Error( + `${EXPERIMENTAL_WARNING}Unable to update asset ${id}: Invalid asset response against zod schema:\n${parsedError}` + )Because this relies on Zod schema behavior, please confirm in your environment that
assetItemSchemamatches the actual PUT/assets/{id}response shape and thatfromZodErrorformatting remains acceptable for production logs.Also applies to: 287-322, 403-403
src/platform/assets/components/AssetCard.vue (1)
72-116: Unify displayed name to avoid divergence between UI, tooltips, and dialogsRight now the visible name comes from
newNameRef ?? asset.name, but other parts of the card still read fromasset.name(e.g., tooltip value, alt text, deletion copy inconfirmDeletion). If the parent doesn’t immediately refreshasset, these can drift.Consider introducing a single computed
displayName:const displayName = computed(() => newNameRef.value ?? asset.name)and then using
displayNameeverywhere the user sees the name (EditableTextmodel-value, tooltips, alt text, deletion prompt bindings, etc.). That keeps the UI consistent regardless of how quickly the parent updates its asset list.Also applies to: 158-161, 224-240
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/components/dialog/confirm/ConfirmFooter.vue(1 hunks)src/i18n.ts(1 hunks)src/locales/en/main.json(2 hunks)src/platform/assets/components/AssetCard.vue(2 hunks)src/platform/assets/services/assetService.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/dialog/confirm/ConfirmFooter.vue
🧰 Additional context used
📓 Path-based instructions (17)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
src/platform/assets/services/assetService.tssrc/i18n.tssrc/platform/assets/components/AssetCard.vue
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/platform/assets/services/assetService.tssrc/i18n.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
src/platform/assets/services/assetService.tssrc/i18n.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
src/platform/assets/services/assetService.tssrc/i18n.tssrc/platform/assets/components/AssetCard.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/platform/assets/services/assetService.tssrc/i18n.tssrc/platform/assets/components/AssetCard.vue
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/platform/assets/services/assetService.tssrc/i18n.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/platform/assets/services/assetService.tssrc/i18n.tssrc/platform/assets/components/AssetCard.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/platform/assets/services/assetService.tssrc/i18n.tssrc/platform/assets/components/AssetCard.vue
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
src/platform/assets/services/assetService.tssrc/i18n.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/platform/assets/services/assetService.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/platform/assets/services/assetService.tssrc/i18n.tssrc/platform/assets/components/AssetCard.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/services/assetService.tssrc/i18n.tssrc/platform/assets/components/AssetCard.vue
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/platform/assets/components/AssetCard.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/platform/assets/components/AssetCard.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/platform/assets/components/AssetCard.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/AssetCard.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/platform/assets/components/AssetCard.vue🧠 Learnings (6)
📚 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: User-friendly and actionable error messages in error handlingApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaksApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.vue : Name Vue components in PascalCase (e.g., `MenuHamburger.vue`)Applied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive stateApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition APIApplied to files:
src/platform/assets/components/AssetCard.vue🧬 Code graph analysis (1)
src/platform/assets/services/assetService.ts (2)
src/platform/assets/schemas/assetSchema.ts (3)
AssetMetadata(74-74)AssetItem(72-72)assetItemSchema(68-68)src/scripts/api.ts (1)
api(1289-1289)⏰ 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). (2)
- GitHub Check: setup
- GitHub Check: test
🔇 Additional comments (2)
src/i18n.ts (1)
166-166:escapeParameterenablement looks correct and security-friendlySetting
escapeParameter: truehere is aligned with vue-i18n’s API and adds a useful safeguard for interpolated parameters in HTML contexts. No issues from a config or typing perspective.If you upgrade vue-i18n later, please double‑check the docs for
escapeParameteron your exact version to ensure the option name and semantics are still the same.src/locales/en/main.json (1)
127-127: Sharedg.searchPlaceholderkey is a good consolidationDefining a generic
"g.searchPlaceholder": "Search..."is a nice way to reuse a consistent placeholder across components and keeps things i18n‑friendly.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
src/platform/assets/components/AssetCard.vue (2)
44-46: Remove dead code.This
IconButtonis disabled withv-if="false"and appears to be leftover from development.- <IconButton v-if="false" size="sm"> - <i class="icon-[lucide--file-text]" /> - </IconButton>
191-191: Consider removing unusedoptionsDisabledref.The
optionsDisabledref is declared and passed tofooterPropsbut is never set totruein the code. If it's intended for future use to disable buttons during the async operation, consider implementing it now for better UX.const optionsDisabled = ref(false) const confirmDialog = showConfirmDialog({ // ... footerProps: { // ... optionsDisabled, onConfirm: async () => { + optionsDisabled.value = true try { // ... deletion logic } finally { + optionsDisabled.value = false closeDialog(confirmDialog) } } } })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/composables/useFeatureFlags.ts(2 hunks)src/locales/en/main.json(2 hunks)src/platform/assets/components/AssetCard.vue(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/locales/en/main.json
🧰 Additional context used
📓 Path-based instructions (18)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
src/composables/useFeatureFlags.tssrc/platform/assets/components/AssetCard.vue
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/composables/useFeatureFlags.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
src/composables/useFeatureFlags.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
src/composables/useFeatureFlags.tssrc/platform/assets/components/AssetCard.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/composables/useFeatureFlags.tssrc/platform/assets/components/AssetCard.vue
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/composables/useFeatureFlags.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/composables/useFeatureFlags.tssrc/platform/assets/components/AssetCard.vue
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/composables/useFeatureFlags.tssrc/platform/assets/components/AssetCard.vue
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
src/composables/useFeatureFlags.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/composables/useFeatureFlags.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/composables/useFeatureFlags.tssrc/platform/assets/components/AssetCard.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/composables/useFeatureFlags.tssrc/platform/assets/components/AssetCard.vue
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/composables/useFeatureFlags.tssrc/platform/assets/components/AssetCard.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.json
Files:
src/composables/useFeatureFlags.tssrc/platform/assets/components/AssetCard.vue
**/composables/use*.ts
📄 CodeRabbit inference engine (AGENTS.md)
Name composables in the format
useXyz.ts
Files:
src/composables/useFeatureFlags.ts
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/platform/assets/components/AssetCard.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/platform/assets/components/AssetCard.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/platform/assets/components/AssetCard.vue🧠 Learnings (9)
📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:14.779Z Learning: Applies to **/*.{ts,tsx,vue} : Check server capabilities using `api.serverSupportsFeature('feature_name')` before using enhanced featuresApplied to files:
src/composables/useFeatureFlags.ts📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue componentsApplied to files:
src/platform/assets/components/AssetCard.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: User-friendly and actionable error messages in error handlingApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaksApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.vue : Name Vue components in PascalCase (e.g., `MenuHamburger.vue`)Applied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive stateApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition APIApplied to files:
src/platform/assets/components/AssetCard.vue🧬 Code graph analysis (1)
src/composables/useFeatureFlags.ts (1)
src/scripts/api.ts (1)
api(1289-1289)⏰ 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 (5)
src/composables/useFeatureFlags.ts (1)
12-13: LGTM! Feature flag implementation follows the established pattern.The
MODEL_EDIT_ENABLEDflag is correctly implemented with a default value offalse, consistent with other feature flags likeMODEL_UPLOAD_BUTTON_ENABLED.Also applies to: 36-38
src/platform/assets/components/AssetCard.vue (4)
2-17: Accessibility improvements look good.The conditional
tabindex(line 8) and gated keyboard handler (line 16) properly restrict focus and activation to interactive cards, addressing previous accessibility concerns. The ARIA attributes enhance screen reader support.
19-32: Image accessibility properly implemented.The
altattribute is correctly bound toasset.name(line 28), and the loading/error placeholder includes appropriate role and click handling. This addresses the previous accessibility review comment.
73-117: Metadata display and editable name implementation looks solid.The
EditableTextcomponent integration with optimistic updates (newNameRef ?? asset.nameon line 85) provides good UX. The fallback pattern ensures the UI shows the correct name even if the server update fails.
122-172: Script setup follows Vue 3 Composition API best practices.Proper use of composables, type-safe props/emits definitions, and
useTemplateReffor accessing child component instances. The reactive state management is clean and follows guidelines.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
src/platform/assets/components/AssetCard.vue (4)
2-17: Interactive card focus and click behaviorTying
tabindexand@keydown.entertointeractiveis a good fix for the previous keyboard dead‑end. Note that pointer activation is now only wired to the preview area (@click.selfon the placeholder and<img>), so clicking on the text/meta region of an interactive card does nothing. If the intended UX is “click anywhere on the card to select”, consider also wiring@clickon the root container (gated byinteractive) so keyboard and mouse behavior stay aligned.Also applies to: 19-32
35-47: Remove dead IconButton stub in the action group
<IconButton v-if="false" ...>is unreachable and can be safely removed to keep the action surface lean and maintainable.
73-91: Rename flow wiring is solid; consider tightening validation and cancel handlingThe EditableText →
assetRenamepipeline with optimisticnewNameRefand server reconciliation looks good. Two small refinements you might consider:
- Avoid treating an empty string as “no rename”:
if (newName)will skip a legitimate (though probably invalid) empty name; using something likeif (!newName?.trim()) { isEditing.value = false; return }makes the intent explicit.- For cancel,
@cancel="assetRename()"currently calls an async function that does nothing beyondisEditing.value = false. A tiny dedicated handler (e.g.@cancel="isEditing = false") would read clearer and avoid the extra async surface.These are minor clarity/UX tweaks; the current behavior is functionally correct.
Also applies to: 230-246
59-68: Improve delete dialog button state during async operationThe delete flow is nicely localized and gives the user clear in‑progress/complete/failed messages, plus hides the card via
deletedLocalon success. You already pass anoptionsDisabledref intofooterProps, but it’s never updated, so the confirm/cancel controls stay active while the async delete is running.Consider setting
optionsDisabled.value = trueat the start ofonConfirmand resetting it infinally(just beforecloseDialog(confirmDialog)), so the dialog buttons are disabled while the deletion is in progress and can’t be double‑triggered.Also applies to: 176-223
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/composables/useFeatureFlags.ts(2 hunks)src/locales/en/main.json(2 hunks)src/platform/assets/components/AssetCard.vue(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/composables/useFeatureFlags.ts
🧰 Additional context used
📓 Path-based instructions (12)
**/*.vue
📄 CodeRabbit inference engine (.cursorrules)
**/*.vue: Use setup() function for component logic in Vue 3 Composition API
Utilize ref and reactive for reactive state in Vue 3
Implement computed properties with computed() function
Use watch and watchEffect for side effects in Vue 3
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection in Vue 3
Use Vue 3.5 style of default prop declaration with defineProps()
Organize Vue components in <script> <style> order
Use Tailwind CSS for styling Vue components
Implement responsive design with Tailwind CSS
Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components in Vue 3
Follow Vue 3 style guide and naming conventions
Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Never use
:class="[]"to merge class names - always useimport { cn } from '@/utils/tailwindUtil'for class merging in Vue templates
**/*.vue: Use TypeScript with Vue 3 Single File Components (.vuefiles)
Name Vue components in PascalCase (e.g.,MenuHamburger.vue)Files:
src/platform/assets/components/AssetCard.vue**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/AssetCard.vue**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committingFiles:
src/platform/assets/components/AssetCard.vuesrc/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventionsFiles:
src/platform/assets/components/AssetCard.vuesrc/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.jsonFiles:
src/platform/assets/components/AssetCard.vue**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/platform/assets/components/AssetCard.vue**/*.{vue,html}
📄 CodeRabbit inference engine (CLAUDE.md)
Never use
dark:ordark-theme:Tailwind variants - instead use semantic values fromstyle.csstheme, e.g.bg-node-component-surfaceFiles:
src/platform/assets/components/AssetCard.vue**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/platform/assets/components/AssetCard.vuesrc/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebaseFiles:
src/platform/assets/components/AssetCard.vuesrc/**/{composables,components}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Clean up subscriptions in state management to prevent memory leaks
Files:
src/platform/assets/components/AssetCard.vuesrc/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/platform/assets/components/AssetCard.vuesrc/**/{components,composables}/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Use vue-i18n for ALL user-facing strings by adding them to
src/locales/en/main.jsonFiles:
src/platform/assets/components/AssetCard.vue🧠 Learnings (15)
📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectivelyApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Define proper props and emits definitions in Vue componentsApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Never use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage)Applied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Implement proper props and emits definitions in Vue componentsApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Implement proper props and emits definitionsApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with PopoverApplied to files:
src/platform/assets/components/AssetCard.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: User-friendly and actionable error messages in error handlingApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:34.324Z Learning: Applies to src/**/{composables,components}/**/*.{ts,tsx,vue} : Clean up subscriptions in state management to prevent memory leaksApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:48:23.088Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-11-24T19:48:23.088Z Learning: Applies to **/*.vue : Name Vue components in PascalCase (e.g., `MenuHamburger.vue`)Applied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-11-24T19:47:02.860Z Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive stateApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3Applied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition APIApplied to files:
src/platform/assets/components/AssetCard.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/platform/assets/components/AssetCard.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} : Implement proper error handlingApplied to files:
src/platform/assets/components/AssetCard.vue📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: .cursorrules:0-0 Timestamp: 2025-11-24T19:46:52.279Z Learning: Applies to **/*.{ts,tsx,js,vue} : Implement proper error handling in components and servicesApplied to files:
src/platform/assets/components/AssetCard.vue⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: test
- GitHub Check: setup
🔇 Additional comments (1)
src/locales/en/main.json (1)
2155-2161: Grammar issue resolved from previous review.The "failed" message at line 2160 now correctly reads "could not be deleted" (previously flagged as "could not deleted"). The deletion block is well-structured with consistent
{assetName}placeholders across all messages.To ensure complete correctness, verify that the consuming code (asset service/components) correctly substitutes the
{assetName}placeholder in these localization keys.
|
Note Docstrings generation - SUCCESS |
Docstrings generation was requested by @guill. * #6969 (comment) The following files were modified: * `src/components/dialog/confirm/confirmDialog.ts` * `src/composables/useFeatureFlags.ts` * `src/platform/assets/services/assetService.ts` * `src/services/dialogService.ts` * `src/stores/dialogStore.ts`
Summary
Add Rename and Delete options for Personal Models.
Also updates and standardizes some styles for Cards and adds a simple Confirmation dialog.
┆Issue is synchronized with this Notion page by Unito