fix: Model upload UI improvements by DrJKL · Pull Request #7938 · Comfy-Org/ComfyUI_frontend

DrJKL · 2026-01-10T02:12:44Z

Summary

Polishing improvements for the model upload (BYOM) experience.

Changes

HoneyToast z-index: Increased from z-50 to z-9999 so the ModelImportProgressDialog appears above modal backdrops
VideoHelpDialog: Removed pixel-based max-width constraint, now uses 90vw to fill more of the viewport
UploadModelDialog responsive layout: Added max-height: 90vh and scrollable content area to prevent footer buttons from underflowing on small screens
URL validity indicator: Added green checkmark icon inside the URL input when a valid Civitai or HuggingFace URL is entered

Testing

Open the model upload dialog and verify buttons remain accessible on small viewport heights
Enter a valid Civitai/HuggingFace URL and confirm the green checkmark appears
Open the help video and verify it uses more of the viewport
Start a model download and verify the progress toast appears above any open modals

┆Issue is synchronized with this Notion page by Unito

…eens

Amp-Thread-ID: https://ampcode.com/threads/T-019ba54f-b441-748b-8c5a-7ca1e7efa4ce Co-authored-by: Amp <amp@ampcode.com>

coderabbitai · 2026-01-10T02:12:59Z

📝 Walkthrough

Walkthrough

UI/layout and input-feedback updates across toast, upload dialogs, and URL inputs: toast z-index raised; upload dialog made scrollable with fixed footer and height constraints; URL inputs add inline validation and check icons; VideoHelpDialog max-width removed; progress/import layouts adjusted for truncation and non-shrinking controls.

Changes

Cohort / File(s)	Summary
Toast `src/components/honeyToast/HoneyToast.vue`	Increased root container stacking order from `z-50` to `z-9999`.
Video Help Dialog `src/platform/assets/components/VideoHelpDialog.vue`	Removed inline `maxWidth` constraint, keeping `width: '90vw'`.
Upload Dialog Layout `src/platform/assets/components/UploadModelDialog.vue`	Added scrollable wrapper (`min-h-0 flex-auto basis-0 overflow-y-auto`) for steps, moved footer outside scroll area with `flex-shrink-0`, removed `justify-between`, and updated dialog height to `min(400px, 80vh)` and `max-height: 90vh`.
URL Input Validation (shared) `src/platform/assets/components/UploadModelUrlInput.vue`, `src/platform/assets/components/UploadModelUrlInputCivitai.vue`	Wrapped inputs in relatively positioned containers, added `pr-10` padding and conditional checkmark icon; introduced `isValidUrl` computed using `validateSourceUrl` with `civitaiImportSource`/`huggingfaceImportSource`.
Dialog Overflow Config `src/platform/assets/composables/useModelUpload.ts`	Added `overflow-y-hidden` to dialog content classes for upgrade and upload modal configurations.
Progress / Import UI tweaks `src/components/toast/ProgressToastItem.vue`, `src/platform/assets/components/ModelImportProgressDialog.vue`	Adjusted flex/truncation classes: made control/icon areas non-shrinking (`flex-shrink-0`), added `min-w-0`/`truncate` wrappers, spacing (`gap-2`), and set popover `base-z-index="9999"` to stabilize layout and prevent overflow.

Possibly related PRs

[feat] Add PostHog data-attr attributes to Upload Model flow #7173 — Modifies UploadModelUrlInput (adds data-attr changes); likely intersects with the new URL validation/markup.
Feat: Add model import button to Vue model list popover. #7085 — Changes useModelUpload.ts (dialog content overflow classes); directly related to overflow/height adjustments.
feat: add model download progress dialog #7897 — Edits ProgressToastItem and ModelImportProgressDialog layout and z-index handling; overlaps with progress/import UI tweaks.

📜 Recent review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 175a54c and acd6684.

📒 Files selected for processing (1)

src/platform/assets/components/ModelImportProgressDialog.vue

🧰 Additional context used

📓 Path-based instructions (7)

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 in src/locales/en/main.json
Use Tailwind utility classes instead of dark: variant - use semantic values from style.css theme (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging Tailwind class names instead of :class="[]" or hardcoding
Never use !important or ! Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g., w-4/5 instead of w-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid withDefaults or runtime props
Prefer defineModel over separately defining a prop and emit for v-model bindings
Define slots via template usage, not via defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead 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/platform/assets/components/ModelImportProgressDialog.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/components/ModelImportProgressDialog.vue

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: Use separate import type statements instead of inline type in mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, run pnpm format before committing
Never use any type - use proper TypeScript types
Never use as any type 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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

src/**/*.{ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,vue}: Use ref for reactive state, computed() for derived values, and watch/watchEffect for side effects in Composition API
Avoid using ref with watch if a computed would suffice - minimize refs and derived state
Use provide/inject for 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/platform/assets/components/ModelImportProgressDialog.vue

🧠 Learnings (17)

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.vue : Use Tailwind's plurals system via i18n instead of hardcoding pluralization in templates

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.vue : Avoid new usage of PrimeVue components

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-12-05T20:35:28.330Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/locales/en/main.json:2257-2272
Timestamp: 2025-12-05T20:35:28.330Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, vue-i18n pluralization uses a two-parameter pattern: `t('key', { count: value })` where the `count` property in the interpolation object automatically triggers plural selection from pipe-separated locale strings (e.g., "no items | 1 item | {count} items"). This is the correct pattern used throughout the codebase, as validated by Playwright tests.

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: setup
GitHub Check: test
GitHub Check: lint-and-format
GitHub Check: collect

🔇 Additional comments (2)

src/platform/assets/components/ModelImportProgressDialog.vue (2)

173-206: Excellent truncation and flex layout improvements.

The footer layout changes properly handle long job names:

min-w-0 flex-1 on the left section enables growth and proper truncation

flex-shrink-0 on all status icons prevents unwanted squishing

min-w-0 truncate on text spans enables text truncation within flex containers

Consistent pattern across all three states (in-progress, failed, completed)

These changes follow flexbox best practices and align with the PR's responsiveness objectives.

209-220: LGTM: Right-side controls properly constrained.

The addition of flex-shrink-0 to the controls container and whitespace-nowrap to the progress count ensures:

Controls remain accessible and don't shrink on small viewports

Progress count stays on a single line

Proper balance with the growing/shrinking left section

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-01-10T02:13:06Z

🎭 Playwright Test Results

✅ All tests passed!

⏰ Completed at: 01/10/2026, 03:26:21 AM UTC

📈 Summary

Total Tests: 514
Passed: 506 ✅
Failed: 0
Flaky: 0
Skipped: 8 ⏭️

📊 Test Reports by Browser

✅ chromium: View Report • ✅ 494 / ❌ 0 / ⚠️ 0 / ⏭️ 8
✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ mobile-chrome: View Report • ✅ 9 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

github-actions · 2026-01-10T02:13:08Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 01/10/2026, 03:21:09 AM UTC

🔗 Links

📊 View Workflow Run
🎨 View Storybook

🎉 Your Storybook is ready for review!

github-actions · 2026-01-10T02:15:24Z

Bundle Size Report

Summary

Raw size: 18.8 MB baseline 18.8 MB — 🔴 +1.45 kB
Gzip: 3.84 MB baseline 3.84 MB — 🔴 +299 B
Brotli: 2.93 MB baseline 2.93 MB — 🔴 +127 B
Bundles: 94 current • 94 baseline • 38 added / 38 removed

Category Glance
UI Components 🔴 +1.46 kB (199 kB) · Graph Workspace 🟢 -7 B (1.05 MB) · Vendor & Third-Party ⚪ 0 B (9.19 MB) · Other ⚪ 0 B (4.73 MB) · App Entry Points ⚪ 0 B (3.25 MB) · Panels & Settings ⚪ 0 B (337 kB) · + 3 more

Per-category breakdown

App Entry Points — 3.25 MB (baseline 3.25 MB) • ⚪ 0 B

Main entry bundles and manifests

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/index-CGJIy6kS.js (new)	—	3.05 MB	🔴 +3.05 MB	🔴 +641 kB	🔴 +487 kB
~~assets/index-DCJvOnyH.js~~ (removed)	3.05 MB	—	🟢 -3.05 MB	🟢 -641 kB	🟢 -487 kB
assets/index-CAqnHJ9W.js (new)	—	194 kB	🔴 +194 kB	🔴 +42.3 kB	🔴 +35.2 kB
~~assets/index-DWf_mbW8.js~~ (removed)	194 kB	—	🟢 -194 kB	🟢 -42.3 kB	🟢 -35.2 kB
assets/index-68eWBmZV.js (new)	—	345 B	🔴 +345 B	🔴 +246 B	🔴 +239 B
~~assets/index-PWeHzmM3.js~~ (removed)	345 B	—	🟢 -345 B	🟢 -246 B	🟢 -200 B

Status: 3 added / 3 removed

Graph Workspace — 1.05 MB (baseline 1.05 MB) • 🟢 -7 B

Graph editor runtime, canvas, workflow orchestration

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/GraphView-Chh08ssA.js~~ (removed)	1.05 MB	—	🟢 -1.05 MB	🟢 -203 kB	🟢 -154 kB
assets/GraphView-CYupGKe5.js (new)	—	1.05 MB	🔴 +1.05 MB	🔴 +203 kB	🔴 +154 kB

Status: 1 added / 1 removed

Views & Navigation — 6.63 kB (baseline 6.63 kB) • ⚪ 0 B

Top-level views, pages, and routed surfaces

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/UserSelectView-Cn4umSbB.js~~ (removed)	6.63 kB	—	🟢 -6.63 kB	🟢 -2.14 kB	🟢 -1.9 kB
assets/UserSelectView-JPS7Fvyj.js (new)	—	6.63 kB	🔴 +6.63 kB	🔴 +2.15 kB	🔴 +1.9 kB

Status: 1 added / 1 removed

Panels & Settings — 337 kB (baseline 337 kB) • ⚪ 0 B

Configuration panels, inspectors, and settings screens

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/LegacyCreditsPanel-B_GLn1rm.js~~ (removed)	25.1 kB	—	🟢 -25.1 kB	🟢 -5.74 kB	🟢 -5.01 kB
assets/LegacyCreditsPanel-CLv5l7Nq.js (new)	—	25.1 kB	🔴 +25.1 kB	🔴 +5.74 kB	🔴 +5.01 kB
~~assets/KeybindingPanel-BQZatV9m.js~~ (removed)	14.8 kB	—	🟢 -14.8 kB	🟢 -3.58 kB	🟢 -3.12 kB
assets/KeybindingPanel-PJBasDD7.js (new)	—	14.8 kB	🔴 +14.8 kB	🔴 +3.58 kB	🔴 +3.12 kB
assets/ExtensionPanel-BvPeiyvJ.js (new)	—	11.1 kB	🔴 +11.1 kB	🔴 +2.62 kB	🔴 +2.3 kB
~~assets/ExtensionPanel-CjkKUlf4.js~~ (removed)	11.1 kB	—	🟢 -11.1 kB	🟢 -2.62 kB	🟢 -2.3 kB
assets/AboutPanel-B9--xgaT.js (new)	—	9.16 kB	🔴 +9.16 kB	🔴 +2.46 kB	🔴 +2.21 kB
~~assets/AboutPanel-kombVIqZ.js~~ (removed)	9.16 kB	—	🟢 -9.16 kB	🟢 -2.46 kB	🟢 -2.21 kB
~~assets/ServerConfigPanel-BXwzNXwa.js~~ (removed)	7.51 kB	—	🟢 -7.51 kB	🟢 -2.04 kB	🟢 -1.81 kB
assets/ServerConfigPanel-iRHTIe0k.js (new)	—	7.51 kB	🔴 +7.51 kB	🔴 +2.04 kB	🔴 +1.81 kB
~~assets/UserPanel-C6jWvfgH.js~~ (removed)	6.88 kB	—	🟢 -6.88 kB	🟢 -1.79 kB	🟢 -1.57 kB
assets/UserPanel-CrCJ5XIG.js (new)	—	6.88 kB	🔴 +6.88 kB	🔴 +1.79 kB	🔴 +1.57 kB
assets/settings-BbW1wrcp.js	25.2 kB	25.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-CtIClcWI.js	26 kB	26 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-D_f3uAqO.js	22.4 kB	22.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DiVjuKQX.js	34.4 kB	34.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DJiF1Y59.js	25.8 kB	25.8 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DKkx6nFR.js	28.2 kB	28.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-DX5qVgIQ.js	24.9 kB	24.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-MzsBgiwB.js	21.7 kB	21.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-pR7Ue3ei.js	26.7 kB	26.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/settings-y_-zNlA6.js	27.5 kB	27.5 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 6 added / 6 removed

UI Components — 199 kB (baseline 198 kB) • 🔴 +1.46 kB

Reusable component library chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/LazyImage.vue_vue_type_script_setup_true_lang-CxJdNUUK.js (new)	—	64.4 kB	🔴 +64.4 kB	🔴 +13.1 kB	🔴 +11.4 kB
~~assets/LazyImage.vue_vue_type_script_setup_true_lang-Bni88Trv.js~~ (removed)	63 kB	—	🟢 -63 kB	🟢 -12.9 kB	🟢 -11.2 kB
~~assets/Load3D.vue_vue_type_script_setup_true_lang-CuF7Pptw.js~~ (removed)	56.4 kB	—	🟢 -56.4 kB	🟢 -8.78 kB	🟢 -7.53 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-Dt0MmFuw.js (new)	—	56.4 kB	🔴 +56.4 kB	🔴 +8.78 kB	🔴 +7.54 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-DiO8yrJa.js (new)	—	49 kB	🔴 +49 kB	🔴 +10.6 kB	🔴 +9.14 kB
~~assets/WidgetSelect.vue_vue_type_script_setup_true_lang-Dlq6lc7j.js~~ (removed)	49 kB	—	🟢 -49 kB	🟢 -10.5 kB	🟢 -9.15 kB
~~assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-BkzXo6SN.js~~ (removed)	10.9 kB	—	🟢 -10.9 kB	🟢 -2.89 kB	🟢 -2.56 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-Cclsg1IM.js (new)	—	10.9 kB	🔴 +10.9 kB	🔴 +2.89 kB	🔴 +2.56 kB
~~assets/ComfyQueueButton-BlvxPZH1.js~~ (removed)	8.83 kB	—	🟢 -8.83 kB	🟢 -2.58 kB	🟢 -2.3 kB
assets/ComfyQueueButton-N1RFHz6g.js (new)	—	8.83 kB	🔴 +8.83 kB	🔴 +2.58 kB	🔴 +2.3 kB
~~assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-BRXj95o3.js~~ (removed)	3.72 kB	—	🟢 -3.72 kB	🟢 -1.46 kB	🟢 -1.32 kB
assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-CwwoNaCU.js (new)	—	3.72 kB	🔴 +3.72 kB	🔴 +1.46 kB	🔴 +1.32 kB
~~assets/WidgetButton-B8kPTYN7.js~~ (removed)	2.21 kB	—	🟢 -2.21 kB	🟢 -997 B	🟢 -893 B
assets/WidgetButton-C9wgUoXo.js (new)	—	2.21 kB	🔴 +2.21 kB	🔴 +996 B	🔴 +894 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-Ds3yUJWY.js (new)	—	2.14 kB	🔴 +2.14 kB	🔴 +891 B	🔴 +771 B
~~assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-xe0fe1BF.js~~ (removed)	2.14 kB	—	🟢 -2.14 kB	🟢 -889 B	🟢 -768 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-DIK87nsO.js	1.34 kB	1.34 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 8 added / 8 removed

Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 B

Stores, services, APIs, and repositories

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/keybindingService-1LE3Y50A.js~~ (removed)	7.51 kB	—	🟢 -7.51 kB	🟢 -1.83 kB	🟢 -1.57 kB
assets/keybindingService-QcPgB-QQ.js (new)	—	7.51 kB	🔴 +7.51 kB	🔴 +1.83 kB	🔴 +1.57 kB
~~assets/audioService-CGlbQThf.js~~ (removed)	2.2 kB	—	🟢 -2.2 kB	🟢 -960 B	🟢 -824 B
assets/audioService-CLaWTaZH.js (new)	—	2.2 kB	🔴 +2.2 kB	🔴 +962 B	🔴 +824 B
assets/serverConfigStore-B2t_j388.js	2.83 kB	2.83 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 2 added / 2 removed

Utilities & Hooks — 1.41 kB (baseline 1.41 kB) • ⚪ 0 B

Helpers, composables, and utility bundles

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/audioUtils-BM61IXl9.js~~ (removed)	1.41 kB	—	🟢 -1.41 kB	🟢 -652 B	🟢 -549 B
assets/audioUtils-DeOeRExx.js (new)	—	1.41 kB	🔴 +1.41 kB	🔴 +651 B	🔴 +547 B

Status: 1 added / 1 removed

Vendor & Third-Party — 9.19 MB (baseline 9.19 MB) • ⚪ 0 B

External libraries and shared vendor chunks

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
assets/vendor-chart-DUP4WQ_9.js	452 kB	452 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-other-CTAuztsb.js	3.9 MB	3.9 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-primevue-VcXE4r8X.js	1.95 MB	1.95 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-three-B_f9r0GW.js	2.08 MB	2.08 MB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-tiptap-B8b7Kqfl.js	232 kB	232 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-vue-BggM5WRa.js	160 kB	160 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/vendor-xterm-BF8peZ5_.js	420 kB	420 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Other — 4.73 MB (baseline 4.73 MB) • ⚪ 0 B

Bundles that do not match a named category

File	Before	After	Δ Raw	Δ Gzip	Δ Brotli
~~assets/SubscriptionRequiredDialogContent-dg-Mbllr.js~~ (removed)	29.3 kB	—	🟢 -29.3 kB	🟢 -6.51 kB	🟢 -5.64 kB
assets/SubscriptionRequiredDialogContent-U3_3QKM8.js (new)	—	29.3 kB	🔴 +29.3 kB	🔴 +6.51 kB	🔴 +5.66 kB
~~assets/WidgetRecordAudio-1jkyyd6u.js~~ (removed)	20.4 kB	—	🟢 -20.4 kB	🟢 -5.24 kB	🟢 -4.63 kB
assets/WidgetRecordAudio-DKvLhaJl.js (new)	—	20.4 kB	🔴 +20.4 kB	🔴 +5.24 kB	🔴 +4.63 kB
~~assets/AudioPreviewPlayer-BZEL2anA.js~~ (removed)	13.3 kB	—	🟢 -13.3 kB	🟢 -3.35 kB	🟢 -3 kB
assets/AudioPreviewPlayer-CrdvRHv9.js (new)	—	13.3 kB	🔴 +13.3 kB	🔴 +3.35 kB	🔴 +3 kB
assets/ValueControlPopover-D0yod08K.js (new)	—	5.49 kB	🔴 +5.49 kB	🔴 +1.71 kB	🔴 +1.51 kB
~~assets/ValueControlPopover-DlD4Kpq2.js~~ (removed)	5.49 kB	—	🟢 -5.49 kB	🟢 -1.71 kB	🟢 -1.52 kB
~~assets/WidgetGalleria-DMAhkdMQ.js~~ (removed)	4.1 kB	—	🟢 -4.1 kB	🟢 -1.45 kB	🟢 -1.31 kB
assets/WidgetGalleria-mA4GBYlc.js (new)	—	4.1 kB	🔴 +4.1 kB	🔴 +1.45 kB	🔴 +1.31 kB
assets/WidgetColorPicker-B4W44OZo.js (new)	—	3.41 kB	🔴 +3.41 kB	🔴 +1.39 kB	🔴 +1.24 kB
~~assets/WidgetColorPicker-BxiGyt9u.js~~ (removed)	3.41 kB	—	🟢 -3.41 kB	🟢 -1.38 kB	🟢 -1.23 kB
assets/WidgetTextarea-D13iYN45.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.22 kB	🔴 +1.08 kB
~~assets/WidgetTextarea-DdZBxT4P.js~~ (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.22 kB	🟢 -1.08 kB
assets/WidgetMarkdown-Bp4WAg2_.js (new)	—	3.08 kB	🔴 +3.08 kB	🔴 +1.28 kB	🔴 +1.12 kB
~~assets/WidgetMarkdown-T_EHEw0G.js~~ (removed)	3.08 kB	—	🟢 -3.08 kB	🟢 -1.28 kB	🟢 -1.13 kB
assets/WidgetAudioUI-9hzV617b.js (new)	—	2.89 kB	🔴 +2.89 kB	🔴 +1.17 kB	🔴 +1.06 kB
~~assets/WidgetAudioUI-eCOaH63r.js~~ (removed)	2.89 kB	—	🟢 -2.89 kB	🟢 -1.17 kB	🟢 -1.05 kB
assets/WidgetToggleSwitch-B1UuEyEr.js (new)	—	2.66 kB	🔴 +2.66 kB	🔴 +1.13 kB	🔴 +1.02 kB
~~assets/WidgetToggleSwitch-BGlCr3eC.js~~ (removed)	2.66 kB	—	🟢 -2.66 kB	🟢 -1.13 kB	🟢 -1.02 kB
assets/WidgetInputText-BNsM8YEj.js (new)	—	1.99 kB	🔴 +1.99 kB	🔴 +923 B	🔴 +847 B
~~assets/WidgetInputText-BWlP9r2R.js~~ (removed)	1.99 kB	—	🟢 -1.99 kB	🟢 -922 B	🟢 -849 B
~~assets/Media3DTop-DqRW7WNG.js~~ (removed)	1.49 kB	—	🟢 -1.49 kB	🟢 -770 B	🟢 -650 B
assets/Media3DTop-NFxHWfwM.js (new)	—	1.49 kB	🔴 +1.49 kB	🔴 +770 B	🔴 +654 B
~~assets/WidgetSelect--LunTwJz.js~~ (removed)	733 B	—	🟢 -733 B	🟢 -363 B	🟢 -320 B
assets/WidgetSelect-DvuTyVki.js (new)	—	733 B	🔴 +733 B	🔴 +364 B	🔴 +325 B
assets/WidgetInputNumber-CHTK2Fep.js (new)	—	673 B	🔴 +673 B	🔴 +349 B	🔴 +286 B
~~assets/WidgetInputNumber-ClK_9iIQ.js~~ (removed)	673 B	—	🟢 -673 B	🟢 -349 B	🟢 -288 B
~~assets/Load3D-C5GTTpB9.js~~ (removed)	424 B	—	🟢 -424 B	🟢 -269 B	🟢 -224 B
assets/Load3D-DWHJ6gyU.js (new)	—	424 B	🔴 +424 B	🔴 +270 B	🔴 +225 B
~~assets/WidgetLegacy-BakYWUJL.js~~ (removed)	364 B	—	🟢 -364 B	🟢 -239 B	🟢 -195 B
assets/WidgetLegacy-BWDXg-U1.js (new)	—	364 B	🔴 +364 B	🔴 +238 B	🔴 +195 B
assets/commands-BtYX0Lg9.js	17.7 kB	17.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-BwenEAzL.js	14.2 kB	14.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CXF6rcF5.js	14.9 kB	14.9 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-CyGop0zh.js	15.1 kB	15.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DDahbUT-.js	15.7 kB	15.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DlbDMAz3.js	15.2 kB	15.2 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-DLFlLaoZ.js	16.4 kB	16.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-edqUNgZp.js	16 kB	16 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-SQ5j-1oJ.js	14.3 kB	14.3 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/commands-zgiVm_G2.js	15.1 kB	15.1 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-7lTF3od4.js	148 kB	148 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-B2EzieSY.js	108 kB	108 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-B9UYJSy5.js	106 kB	106 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-BKj_6mJM.js	109 kB	109 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-BQbZqz2p.js	128 kB	128 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-Byq_ZSjS.js	122 kB	122 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CCgU1dqT.js	106 kB	106 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CeY1eBVB.js	94.4 kB	94.4 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CM3nY77t.js	93.7 kB	93.7 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/main-CzXbUjyx.js	112 kB	112 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaAudioTop-Dc3cUA9O.js	1.46 kB	1.46 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaImageTop-B_idcQw8.js	1.75 kB	1.75 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/MediaVideoTop-9cP_AzIo.js	2.65 kB	2.65 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-B-XzzBeS.js	317 kB	317 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-BGwoeek4.js	329 kB	329 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-C6xl5-mL.js	358 kB	358 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-CRZGOJB7.js	310 kB	310 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-D8-Yzlzh.js	289 kB	289 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-Du8VrAwA.js	320 kB	320 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-jjlLVrIs.js	317 kB	317 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-JQwk1kgy.js	292 kB	292 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-JuuXdMpv.js	391 kB	391 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/nodeDefs-l2Y20bod.js	314 kB	314 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/OBJLoader2WorkerModule-DTMpvldF.js	109 kB	109 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetChart-CZhjICiW.js	2.48 kB	2.48 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/WidgetImageCompare-BpH9qHbL.js	3.21 kB	3.21 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B
assets/widgetPropFilter-BIbGSUAt.js	1.28 kB	1.28 kB	⚪ 0 B	⚪ 0 B	⚪ 0 B

Status: 16 added / 16 removed

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In @src/platform/assets/components/UploadModelDialog.vue:
- Line 6: Remove the redundant "shrink" utility from the class list on the div
element that currently reads "min-h-0 flex-auto basis-0 shrink overflow-y-auto"
in UploadModelDialog.vue; keep "flex-auto" (which already implies flex-shrink:1)
and the other classes unchanged, so simply delete the "shrink" token from that
element's class attribute.
- Line 7: Remove the redundant HTML comments that label each step in
UploadModelDialog.vue; the v-if checks on currentStep and the component names
already indicate the step, so delete the comments near the blocks that render
when currentStep === 1, currentStep === 2, and currentStep === 3 (locate the
step rendering blocks around the v-if conditions and the child components used
for each step in UploadModelDialog.vue).

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c8e181c and 788391f.

📒 Files selected for processing (6)

src/components/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/composables/useModelUpload.ts

🧰 Additional context used

📓 Path-based instructions (13)

src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only
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 in src/locales/en/main.json
Use Tailwind utility classes instead of dark: variant - use semantic values from style.css theme (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging Tailwind class names instead of :class="[]" or hardcoding
Never use !important or ! Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g., w-4/5 instead of w-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid withDefaults or runtime props
Prefer defineModel over separately defining a prop and emit for v-model bindings
Define slots via template usage, not via defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead 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/honeyToast/HoneyToast.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/composables/useModelUpload.ts
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.vue

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: Use separate import type statements instead of inline type in mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, run pnpm format before committing
Never use any type - use proper TypeScript types
Never use as any type 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/honeyToast/HoneyToast.vue
src/platform/assets/composables/useModelUpload.ts
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.vue

src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

src/components/honeyToast/HoneyToast.vue
src/platform/assets/composables/useModelUpload.ts
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/components/honeyToast/HoneyToast.vue
src/platform/assets/composables/useModelUpload.ts
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.vue

src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

src/components/honeyToast/HoneyToast.vue
src/platform/assets/composables/useModelUpload.ts
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.vue

src/components/**/*.vue

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components

Name Vue components in PascalCase (e.g., MenuHamburger.vue)

Files:

src/components/honeyToast/HoneyToast.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/honeyToast/HoneyToast.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/honeyToast/HoneyToast.vue

src/**/*.{ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,vue}: Use ref for reactive state, computed() for derived values, and watch/watchEffect for side effects in Composition API
Avoid using ref with watch if a computed would suffice - minimize refs and derived state
Use provide/inject for 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/honeyToast/HoneyToast.vue
src/platform/assets/composables/useModelUpload.ts
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.vue

src/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety

src/**/*.ts: Derive component types using vue-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/platform/assets/composables/useModelUpload.ts

src/**/{services,composables}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/{services,composables}/**/*.{ts,tsx}: Use api.apiURL() for backend endpoints instead of constructing URLs directly
Use api.fileURL() for static file access instead of constructing URLs directly

Files:

src/platform/assets/composables/useModelUpload.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/platform/assets/composables/useModelUpload.ts

🧠 Learnings (33)

📓 Common learnings

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7746
File: src/platform/assets/composables/useUploadModelWizard.ts:207-219
Timestamp: 2026-01-06T19:17:12.355Z
Learning: In `src/platform/assets/composables/useUploadModelWizard.ts`, the `uploadModel()` function should have a concurrency guard at the beginning that checks if `isUploading.value` is already true and returns false early to prevent race conditions from multiple rapid invocations.

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Applied to files:

src/components/honeyToast/HoneyToast.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/honeyToast/HoneyToast.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/composables/useModelUpload.ts
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.vue

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

src/components/honeyToast/HoneyToast.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/VideoHelpDialog.vue
src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue

📚 Learning: 2026-01-06T19:17:12.355Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7746
File: src/platform/assets/composables/useUploadModelWizard.ts:207-219
Timestamp: 2026-01-06T19:17:12.355Z
Learning: In `src/platform/assets/composables/useUploadModelWizard.ts`, the `uploadModel()` function should have a concurrency guard at the beginning that checks if `isUploading.value` is already true and returns false early to prevent race conditions from multiple rapid invocations.

Applied to files:

src/platform/assets/composables/useModelUpload.ts
src/platform/assets/components/UploadModelUrlInputCivitai.vue
src/platform/assets/components/UploadModelDialog.vue

📚 Learning: 2025-12-09T03:39:54.501Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.

Applied to files:

src/platform/assets/composables/useModelUpload.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/platform/assets/composables/useModelUpload.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/platform/assets/composables/useModelUpload.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/platform/assets/composables/useModelUpload.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 InputSwitch component with ToggleSwitch

Applied to files:

src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API

Applied to files:

src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement computed properties with computed()

Applied to files:

src/platform/assets/components/UploadModelUrlInput.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties

Applied to files:

src/platform/assets/components/UploadModelUrlInput.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,vue} : Use VueUse function for useI18n in composition API for string literals

Applied to files:

src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,vue} : Leverage VueUse functions for performance-enhancing composables

Applied to files:

src/platform/assets/components/UploadModelUrlInput.vue
src/platform/assets/components/UploadModelUrlInputCivitai.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/UploadModelUrlInput.vue

📚 Learning: 2025-11-24T19:47:02.860Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Applied to files:

src/platform/assets/components/UploadModelUrlInput.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,vue} : Use `ref` for reactive state, `computed()` for derived values, and `watch`/`watchEffect` for side effects in Composition API

Applied to files:

src/platform/assets/components/UploadModelUrlInput.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.vue : Do not import Vue macros unnecessarily

Applied to files:

src/platform/assets/components/UploadModelUrlInput.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.vue : Use `<script setup lang="ts">` for component logic in Vue SFCs

Applied to files:

src/platform/assets/components/UploadModelUrlInputCivitai.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/platform/assets/components/UploadModelUrlInputCivitai.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/platform/assets/components/UploadModelUrlInputCivitai.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.vue : Avoid new usage of PrimeVue components

Applied to files:

src/platform/assets/components/UploadModelUrlInputCivitai.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition API

Applied to files:

src/platform/assets/components/UploadModelUrlInputCivitai.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels

Applied to files:

src/platform/assets/components/UploadModelDialog.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: setup
GitHub Check: lint-and-format
GitHub Check: collect
GitHub Check: test

🔇 Additional comments (11)

src/platform/assets/components/VideoHelpDialog.vue (1)

14-14: LGTM! Width constraint loosened as intended.

The removal of the maxWidth constraint allows the video dialog to utilize more of the viewport, aligning with the PR objective to improve the video help dialog's presentation.

src/platform/assets/composables/useModelUpload.ts (1)

26-26: LGTM! Correct Tailwind v4 important modifier syntax.

The overflow-y-hidden! utility correctly places the ! modifier at the end, following Tailwind v4 syntax. This prevents vertical overflow in the dialog content wrapper and aligns with the scrollable content implementation in UploadModelDialog.vue.

Also applies to: 44-44

src/components/honeyToast/HoneyToast.vue (1)

29-29: LGTM! Z-index elevated for proper layering.

The z-index increase from z-50 to z-[9999] ensures the toast container appears above modal backdrops, as specified in the PR objectives. The arbitrary value syntax is correct.

src/platform/assets/components/UploadModelUrlInput.vue (3)

48-60: LGTM! URL validation UI feedback implemented correctly.

The relative wrapper with the conditional checkmark icon provides clear visual feedback when a valid URL is entered. The icon positioning and styling are appropriate, and the pr-10 padding on the input prevents text overlap.

87-89: LGTM! Validation imports added correctly.

The imports for civitaiImportSource, huggingfaceImportSource, and validateSourceUrl support the new URL validation logic.

107-113: LGTM! URL validation logic implemented correctly.

The isValidUrl computed property correctly validates the URL against both Civitai and HuggingFace sources. The logic trims whitespace and checks for empty input before validation, following best practices.

src/platform/assets/components/UploadModelUrlInputCivitai.vue (3)

41-53: LGTM! Validation UI feedback consistent with generic input.

The relative wrapper and conditional checkmark icon follow the same pattern as UploadModelUrlInput.vue, providing consistent visual feedback across both input components.

82-82: LGTM! Required imports added for validation.

The imports for computed, civitaiImportSource, and validateSourceUrl correctly support the URL validation logic specific to Civitai.

Also applies to: 85-86

96-100: LGTM! Civitai-specific validation logic correct.

The isValidUrl computed property correctly validates against only the civitaiImportSource, which is appropriate for this Civitai-specific input component. The logic mirrors the pattern in UploadModelUrlInput.vue.

src/platform/assets/components/UploadModelDialog.vue (2)

38-40: LGTM! Footer positioning is correct.

Adding flex-shrink-0 ensures the footer remains at its natural height and stays accessible regardless of content overflow. The comment on line 38 usefully highlights the "always visible" behavior.

115-116: Excellent responsive height constraints.

The combination of min-height: min(400px, 80vh) and max-height: 90vh ensures the dialog adapts well to both small and large viewports. Together with the scrollable content wrapper, this provides robust responsive behavior that prevents footer buttons from being cut off on small screens.

src/platform/assets/components/UploadModelDialog.vue

coderabbitai · 2026-01-10T02:16:08Z

src/platform/assets/components/UploadModelDialog.vue

-    />
+    <!-- Scrollable content area -->
+    <div class="min-h-0 flex-auto basis-0 shrink overflow-y-auto">
+      <!-- Step 1: Enter URL -->


🧹 Nitpick | 🔵 Trivial

Remove redundant HTML comments.

The step comments are redundant—the v-if conditions (currentStep === 1/2/3) and component names already convey which step is being rendered.

♻️ Proposed refactor

-  <UploadModelUrlInput

-  <UploadModelConfirmation

-  <UploadModelProgress

Also applies to: 19-19, 27-27

🤖 Prompt for AI Agents

In @src/platform/assets/components/UploadModelDialog.vue at line 7, Remove the redundant HTML comments that label each step in UploadModelDialog.vue; the v-if checks on currentStep and the component names already indicate the step, so delete the comments near the blocks that render when currentStep === 1, currentStep === 2, and currentStep === 3 (locate the step rendering blocks around the v-if conditions and the child components used for each step in UploadModelDialog.vue).

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @src/platform/assets/components/UploadModelDialog.vue:
- Around line 5-38: Remove the redundant inline comments that duplicate
self-explanatory component names and step logic: delete the "Scrollable content
area", "Step 1: Enter URL", "Step 2: Confirm Metadata", "Step 3: Upload
Progress", and "Navigation Footer - always visible" comments around the
UploadModelUrlInput / UploadModelUrlInputCivitai, UploadModelConfirmation,
UploadModelProgress, and footer block; leave any comments only if they add
meaningful context beyond what currentStep checks and component names
(UploadModelUrlInput, UploadModelUrlInputCivitai, UploadModelConfirmation,
UploadModelProgress, UploadModelFooter) already convey.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 788391f and 83bd7d3.

📒 Files selected for processing (2)

src/components/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.vue

🧰 Additional context used

📓 Path-based instructions (10)

src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only
Use <script setup lang="ts"> for component logic in Vue SFCs
Avoid <style> blocks in Vue components - use Tailwind 4 styling instead
Use vue-i18n for all string literals in Vue components - place translation entries in src/locales/en/main.json
Use Tailwind utility classes instead of dark: variant - use semantic values from style.css theme (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging Tailwind class names instead of :class="[]" or hardcoding
Never use !important or ! Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g., w-4/5 instead of w-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid withDefaults or runtime props
Prefer defineModel over separately defining a prop and emit for v-model bindings
Define slots via template usage, not via defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead 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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.vue

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: Use separate import type statements instead of inline type in mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, run pnpm format before committing
Never use any type - use proper TypeScript types
Never use as any type 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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.vue

src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

src/components/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/components/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.vue

src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

src/components/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.vue

src/components/**/*.vue

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components

Name Vue components in PascalCase (e.g., MenuHamburger.vue)

Files:

src/components/honeyToast/HoneyToast.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/honeyToast/HoneyToast.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/honeyToast/HoneyToast.vue

src/**/*.{ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,vue}: Use ref for reactive state, computed() for derived values, and watch/watchEffect for side effects in Composition API
Avoid using ref with watch if a computed would suffice - minimize refs and derived state
Use provide/inject for 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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.vue

🧠 Learnings (16)

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Applied to files:

src/components/honeyToast/HoneyToast.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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.vue

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

src/components/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue
src/platform/assets/components/UploadModelDialog.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/honeyToast/HoneyToast.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels

Applied to files:

src/platform/assets/components/UploadModelDialog.vue

📚 Learning: 2026-01-06T19:17:12.355Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7746
File: src/platform/assets/composables/useUploadModelWizard.ts:207-219
Timestamp: 2026-01-06T19:17:12.355Z
Learning: In `src/platform/assets/composables/useUploadModelWizard.ts`, the `uploadModel()` function should have a concurrency guard at the beginning that checks if `isUploading.value` is already true and returns false early to prevent race conditions from multiple rapid invocations.

Applied to files:

src/platform/assets/components/UploadModelDialog.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Do not add or retain redundant comments - clean as you go

Applied to files:

src/platform/assets/components/UploadModelDialog.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/platform/assets/components/UploadModelDialog.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Write code that is expressive and self-documenting - avoid unnecessary comments

Applied to files:

src/platform/assets/components/UploadModelDialog.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: setup
GitHub Check: test
GitHub Check: lint-and-format
GitHub Check: collect

🔇 Additional comments (4)

src/components/honeyToast/HoneyToast.vue (1)

29-29: LGTM!

The increased z-index ensures the toast appears above modal backdrops. Using z-9999 aligns with Tailwind 4's numeric z-index syntax.

src/platform/assets/components/UploadModelDialog.vue (3)

3-6: Good responsive layout pattern.

The min-h-0 flex-auto basis-0 overflow-y-auto combination is the correct approach for creating a scrollable flex child. This ensures the content area can scroll while respecting the parent's height constraints.

39-51: LGTM!

Placing the footer outside the scrollable wrapper with flex-shrink-0 ensures navigation buttons remain visible and accessible regardless of content height.

111-124: Style block is acceptable here, though guidelines prefer Tailwind.

The min() function and media query are cleaner in CSS than as arbitrary Tailwind values. The viewport-relative constraints (min(400px, 80vh) and 90vh) effectively prevent footer underflow on small screens.

If you wanted to align more closely with Tailwind-only styling, the height constraints could move to the template, but the current approach is pragmatic.

coderabbitai · 2026-01-10T02:20:32Z

src/platform/assets/components/UploadModelDialog.vue

+    <!-- Scrollable content area -->
+    <div class="min-h-0 flex-auto basis-0 overflow-y-auto">
+      <!-- Step 1: Enter URL -->
+      <UploadModelUrlInput
+        v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"
+        v-model="wizardData.url"
+        :error="uploadError"
+      />
+      <UploadModelUrlInputCivitai
+        v-else-if="currentStep === 1"
+        v-model="wizardData.url"
+        :error="uploadError"
+      />

-    <!-- Step 2: Confirm Metadata -->
-    <UploadModelConfirmation
-      v-else-if="currentStep === 2"
-      v-model="selectedModelType"
-      :metadata="wizardData.metadata"
-      :preview-image="wizardData.previewImage"
-    />
+      <!-- Step 2: Confirm Metadata -->
+      <UploadModelConfirmation
+        v-else-if="currentStep === 2"
+        v-model="selectedModelType"
+        :metadata="wizardData.metadata"
+        :preview-image="wizardData.previewImage"
+      />

-    <!-- Step 3: Upload Progress -->
-    <UploadModelProgress
-      v-else-if="currentStep === 3 && uploadStatus != null"
-      :result="uploadStatus"
-      :error="uploadError"
-      :metadata="wizardData.metadata"
-      :model-type="selectedModelType"
-      :preview-image="wizardData.previewImage"
-    />
+      <!-- Step 3: Upload Progress -->
+      <UploadModelProgress
+        v-else-if="currentStep === 3 && uploadStatus != null"
+        :result="uploadStatus"
+        :error="uploadError"
+        :metadata="wizardData.metadata"
+        :model-type="selectedModelType"
+        :preview-image="wizardData.previewImage"
+      />
+    </div>

-    <!-- Navigation Footer -->
+    <!-- Navigation Footer - always visible -->


🧹 Nitpick | 🔵 Trivial

Consider removing redundant comments.

The component names (UploadModelUrlInput, UploadModelConfirmation, UploadModelProgress, UploadModelFooter) and step conditions (currentStep === 1/2/3) are already self-documenting. Per coding guidelines, avoid redundant comments when code is expressive.

♻️ Suggested cleanup

-  <div class="min-h-0 flex-auto basis-0 overflow-y-auto"> -  <UploadModelUrlInput ... /> -  <UploadModelConfirmation ... /> -  <UploadModelProgress ... /> </div> -  <UploadModelFooter ... />

📝 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.

Suggested change



<div class="min-h-0 flex-auto basis-0 overflow-y-auto">



<UploadModelUrlInput

v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"

v-model="wizardData.url"

:error="uploadError"

/>

<UploadModelUrlInputCivitai

v-else-if="currentStep === 1"

v-model="wizardData.url"

:error="uploadError"

/>



<UploadModelConfirmation

v-else-if="currentStep === 2"

v-model="selectedModelType"

:metadata="wizardData.metadata"

:preview-image="wizardData.previewImage"

/>



<UploadModelConfirmation

v-else-if="currentStep === 2"

v-model="selectedModelType"

:metadata="wizardData.metadata"

:preview-image="wizardData.previewImage"

/>



<UploadModelProgress

v-else-if="currentStep === 3 && uploadStatus != null"

:result="uploadStatus"

:error="uploadError"

:metadata="wizardData.metadata"

:model-type="selectedModelType"

:preview-image="wizardData.previewImage"

/>



<UploadModelProgress

v-else-if="currentStep === 3 && uploadStatus != null"

:result="uploadStatus"

:error="uploadError"

:metadata="wizardData.metadata"

:model-type="selectedModelType"

:preview-image="wizardData.previewImage"

/>

</div>





<div class="min-h-0 flex-auto basis-0 overflow-y-auto">

<UploadModelUrlInput

v-if="currentStep === 1 && flags.huggingfaceModelImportEnabled"

v-model="wizardData.url"

:error="uploadError"

/>

<UploadModelUrlInputCivitai

v-else-if="currentStep === 1"

v-model="wizardData.url"

:error="uploadError"

/>

<UploadModelConfirmation

v-else-if="currentStep === 2"

v-model="selectedModelType"

:metadata="wizardData.metadata"

:preview-image="wizardData.previewImage"

/>

<UploadModelProgress

v-else-if="currentStep === 3 && uploadStatus != null"

:result="uploadStatus"

:error="uploadError"

:metadata="wizardData.metadata"

:model-type="selectedModelType"

:preview-image="wizardData.previewImage"

/>

</div>

<UploadModelFooter

🤖 Prompt for AI Agents

In @src/platform/assets/components/UploadModelDialog.vue around lines 5 - 38, Remove the redundant inline comments that duplicate self-explanatory component names and step logic: delete the "Scrollable content area", "Step 1: Enter URL", "Step 2: Confirm Metadata", "Step 3: Upload Progress", and "Navigation Footer - always visible" comments around the UploadModelUrlInput / UploadModelUrlInputCivitai, UploadModelConfirmation, UploadModelProgress, and footer block; leave any comments only if they add meaningful context beyond what currentStep checks and component names (UploadModelUrlInput, UploadModelUrlInputCivitai, UploadModelConfirmation, UploadModelProgress, UploadModelFooter) already convey.

luke-mino-altherr · 2026-01-10T02:46:31Z

src/components/honeyToast/HoneyToast.vue

        role="status"
        aria-live="polite"
-        class="fixed inset-x-0 bottom-6 z-50 mx-auto w-4/5 max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg"
+        class="fixed inset-x-0 bottom-6 z-9999 mx-auto w-4/5 max-w-3xl overflow-hidden rounded-lg border border-border-default bg-base-background shadow-lg"


needs to be a lower z-index than the filter dropdown on the honey toast

Fixed 👍🏻

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @src/platform/assets/components/ModelImportProgressDialog.vue:
- Around line 199-206: The completed-state span in the
ModelImportProgressDialog.vue template (the v-else block showing {{
t('progressToast.allDownloadsCompleted') }}) is missing the min-w-0 and truncate
utility classes present on the in-progress/failed states; add "min-w-0 truncate"
to that span's class list so long i18n strings truncate consistently and prevent
layout overflow.

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 83bd7d3 and d08a17a.

📒 Files selected for processing (2)

src/components/toast/ProgressToastItem.vue
src/platform/assets/components/ModelImportProgressDialog.vue

🧰 Additional context used

📓 Path-based instructions (10)

src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

src/**/*.vue: Use Vue 3 Single File Components (SFCs) with Composition API only
Use <script setup lang="ts"> for component logic in Vue SFCs
Avoid <style> blocks in Vue components - use Tailwind 4 styling instead
Use vue-i18n for all string literals in Vue components - place translation entries in src/locales/en/main.json
Use Tailwind utility classes instead of dark: variant - use semantic values from style.css theme (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging Tailwind class names instead of :class="[]" or hardcoding
Never use !important or ! Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g., w-4/5 instead of w-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid withDefaults or runtime props
Prefer defineModel over separately defining a prop and emit for v-model bindings
Define slots via template usage, not via defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead 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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.vue

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: Use separate import type statements instead of inline type in mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, run pnpm format before committing
Never use any type - use proper TypeScript types
Never use as any type 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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.vue

src/**/*.{ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,vue}: Use ref for reactive state, computed() for derived values, and watch/watchEffect for side effects in Composition API
Avoid using ref with watch if a computed would suffice - minimize refs and derived state
Use provide/inject for 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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.vue

src/components/**/*.vue

📄 CodeRabbit inference engine (src/components/CLAUDE.md)

src/components/**/*.vue: Use setup() function in Vue 3 Composition API
Destructure props using Vue 3.5 style in Vue components
Use ref/reactive for state management in Vue 3 Composition API
Implement computed() for derived state in Vue 3 Composition API
Use provide/inject for dependency injection in Vue components
Prefer emit/@event-name for state changes over other communication patterns
Use defineExpose only for imperative operations (such as form.validate(), modal.open())
Replace PrimeVue Dropdown component with Select
Replace PrimeVue OverlayPanel component with Popover
Replace PrimeVue Calendar component with DatePicker
Replace PrimeVue InputSwitch component with ToggleSwitch
Replace PrimeVue Sidebar component with Drawer
Replace PrimeVue Chips component with AutoComplete with multiple enabled
Replace PrimeVue TabMenu component with Tabs without panels
Replace PrimeVue Steps component with Stepper without panels
Replace PrimeVue InlineMessage component with Message
Extract complex conditionals to computed properties
Implement cleanup for async operations in Vue components
Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API
Use Teleport/Suspense when needed for component rendering
Define proper props and emits definitions in Vue components

Name Vue components in PascalCase (e.g., MenuHamburger.vue)

Files:

src/components/toast/ProgressToastItem.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/toast/ProgressToastItem.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/toast/ProgressToastItem.vue

🧠 Learnings (14)

📚 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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.vue

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.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/platform/assets/components/ModelImportProgressDialog.vue
src/components/toast/ProgressToastItem.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Applied to files:

src/components/toast/ProgressToastItem.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with Message

Applied to files:

src/components/toast/ProgressToastItem.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,css} : Use the correct tokens from style.css in the design system package

Applied to files:

src/components/toast/ProgressToastItem.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/toast/ProgressToastItem.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/toast/ProgressToastItem.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: test
GitHub Check: lint-and-format
GitHub Check: setup
GitHub Check: collect

🔇 Additional comments (6)

src/components/toast/ProgressToastItem.vue (1)

31-37: LGTM! Proper flexbox truncation implementation.

The layout changes correctly prevent text overflow:

min-w-0 flex-1 on the left container allows the asset name to shrink and take available space

block truncate on the span properly handles text overflow with ellipsis

flex-shrink-0 on the right controls ensures icons/badges maintain their size

This follows the correct flexbox truncation pattern and aligns with the PR objective to prevent text overflow and wrapping in progress items.

src/platform/assets/components/ModelImportProgressDialog.vue (5)

174-174: LGTM: Footer spacing improved.

The addition of gap-2 provides consistent spacing between footer elements.

176-176: LGTM: Proper truncation container setup.

The combination of min-w-0 and flex-1 correctly enables truncation behavior in the flex layout.

177-186: LGTM: In-progress state handles long model names correctly.

The icon with flex-shrink-0 preserves its size, and the span with min-w-0 flex-1 truncate properly truncates long model names.

187-198: LGTM: Failed state layout is correct.

The icon preserves its size with flex-shrink-0, and the span has truncation classes. The absence of flex-1 is acceptable since the failed message with count is typically short.

209-220: LGTM: Right container prevents shrinking and wrapping.

The flex-shrink-0 on the container preserves button visibility, and whitespace-nowrap on the progress count prevents the "X / Y" text from wrapping.

src/platform/assets/components/ModelImportProgressDialog.vue

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @src/platform/assets/components/ModelImportProgressDialog.vue:
- Line 110: The Popover in ModelImportProgressDialog.vue sets
:base-z-index="9999" but is missing :auto-z-index="true"; update the Popover
component instance to add the auto-z-index prop (autoZIndex) so the base-z-index
is applied correctly (i.e., add :auto-z-index="true" alongside the existing
:base-z-index on the Popover component).

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d08a17a and 175a54c.

📒 Files selected for processing (1)

src/platform/assets/components/ModelImportProgressDialog.vue

🧰 Additional context used

📓 Path-based instructions (7)

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 in src/locales/en/main.json
Use Tailwind utility classes instead of dark: variant - use semantic values from style.css theme (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging Tailwind class names instead of :class="[]" or hardcoding
Never use !important or ! Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g., w-4/5 instead of w-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid withDefaults or runtime props
Prefer defineModel over separately defining a prop and emit for v-model bindings
Define slots via template usage, not via defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead 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/platform/assets/components/ModelImportProgressDialog.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/components/ModelImportProgressDialog.vue

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: Use separate import type statements instead of inline type in mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, run pnpm format before committing
Never use any type - use proper TypeScript types
Never use as any type 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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

src/**/*.{ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,vue}: Use ref for reactive state, computed() for derived values, and watch/watchEffect for side effects in Composition API
Avoid using ref with watch if a computed would suffice - minimize refs and derived state
Use provide/inject for 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/platform/assets/components/ModelImportProgressDialog.vue

🧠 Learnings (14)

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.vue : Use Tailwind's plurals system via i18n instead of hardcoding pluralization in templates

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: setup
GitHub Check: lint-and-format
GitHub Check: test
GitHub Check: collect

🔇 Additional comments (2)

src/platform/assets/components/ModelImportProgressDialog.vue (2)

174-206: Excellent responsive footer layout improvements!

The flex layout changes correctly implement truncation and prevent overflow:

min-w-0 flex-1 enables proper text truncation in flex containers

flex-shrink-0 on icons prevents visual distortion

gap-2 improves spacing consistency

These changes align with the PR objective to prevent footer buttons from underflowing on small screens.

209-220: Well-structured right-side controls.

The changes ensure controls remain stable and accessible:

flex-shrink-0 prevents the controls container from shrinking

whitespace-nowrap keeps the progress count on a single line

Conditional rendering with v-if is appropriate

These improvements maintain consistent button sizing and positioning.

coderabbitai · 2026-01-10T03:15:53Z

src/platform/assets/components/ModelImportProgressDialog.vue

            :dismissable="true"
            :close-on-escape="true"
            unstyled
+            :base-z-index="9999"


⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash # Search for Popover components with base-z-index usage in the codebase rg -nP --type=vue -B3 -A3 'Popover.*base-z-index|base-z-index.*Popover'

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 97

🌐 Web query:

PrimeVue Popover component base-z-index prop documentation

💡 Result:

PrimeVue Popover exposes a baseZIndex prop (Number, default 0). When autoZIndex is true the component adds this.baseZIndex to the PrimeVue config overlay zIndex to compute the overlay's z-index (i.e. ZIndex.set('overlay', el, baseZIndex + $primevue.config.zIndex.overlay)). See the Popover docs and implementation. [1][2]

Sources:
[1] PrimeVue Popover docs (props listed).
[2] Popover implementation (baseZIndex prop and ZIndex usage).

🏁 Script executed:

#!/bin/bash # Read the ModelImportProgressDialog.vue file to check the Popover prop usage cat -n src/platform/assets/components/ModelImportProgressDialog.vue | sed -n '100,120p'

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 984

🏁 Script executed:

#!/bin/bash # Search for baseZIndex or base-z-index usage in .vue files (without file type filter) rg -nP '(baseZIndex|base-z-index)' --glob='*.vue' -B2 -A2

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 3619

🏁 Script executed:

#!/bin/bash # Check the full Popover component in ModelImportProgressDialog.vue to see complete props cat -n src/platform/assets/components/ModelImportProgressDialog.vue | sed -n '105,130p'

Repository: Comfy-Org/ComfyUI_frontend

Length of output: 1157

Add :auto-z-index="true" to the Popover component.

The base-z-index prop requires autoZIndex to be enabled to function correctly. PrimeVue documentation states that when autoZIndex is true, the component computes the z-index as baseZIndex + config.overlay.zIndex. All other Popover components using base-z-index in the codebase include :auto-z-index="true". Add this prop to ensure the z-index of 9999 is properly applied.

🤖 Prompt for AI Agents

In @src/platform/assets/components/ModelImportProgressDialog.vue at line 110, The Popover in ModelImportProgressDialog.vue sets :base-z-index="9999" but is missing :auto-z-index="true"; update the Popover component instance to add the auto-z-index prop (autoZIndex) so the base-z-index is applied correctly (i.e., add :auto-z-index="true" alongside the existing :base-z-index on the Popover component).

What. is. the default. value?
https://primevue.org/popover/#api.popover.props.autoZIndex

🧩 Analysis chain

🌐 Web query:

PrimeVue Popover autoZIndex default value

💡 Result:

The Popover's autoZIndex default is true. [1][2]

Sources:
[1] PrimeVue Popover docs.
[2] PrimeVue popover source (props: autoZIndex default true).

@DrJKL, you're absolutely right—I apologize for the incorrect suggestion. The autoZIndex prop defaults to true, so the :base-z-index="9999" will work correctly without needing to explicitly add :auto-z-index="true". The change you've made is fine as-is.

(\\_/) (o.o) (> <) sorry!

🧠 Learnings used

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: AGENTS.md:0-0 Timestamp: 2026-01-10T00:24:17.662Z Learning: Applies to src/**/*.vue : Avoid new usage of PrimeVue components

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.

@coderabbitai I accept your apology.

@DrJKL, thank you for your understanding! I appreciate your patience. 🙏

🧠 Learnings used

Learnt from: CR Repo: Comfy-Org/ComfyUI_frontend PR: 0 File: src/components/CLAUDE.md:0-0 Timestamp: 2025-11-24T19:47:45.616Z Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/platform/assets/components/ModelImportProgressDialog.vue (1)

105-117: Add auto-z-index="true" to enable the intended z-index behavior.

The base-z-index="9999" prop is ineffective without auto-z-index="true". PrimeVue only applies baseZIndex when its automatic z-index manager is enabled. Currently, the Popover's z-index is controlled solely by the z-50 CSS class (~50), which will not appear above modal backdrops.

Add auto-z-index="true" to the Popover to enable base-z-index="9999", or remove base-z-index and update the root class to a higher z-value like z-[9999].

📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 175a54c and acd6684.

📒 Files selected for processing (1)

src/platform/assets/components/ModelImportProgressDialog.vue

🧰 Additional context used

📓 Path-based instructions (7)

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 in src/locales/en/main.json
Use Tailwind utility classes instead of dark: variant - use semantic values from style.css theme (e.g., bg-node-component-surface)
Use cn() utility from @/utils/tailwindUtil for merging Tailwind class names instead of :class="[]" or hardcoding
Never use !important or ! Tailwind prefix - fix interfering classes instead
Use Tailwind fraction utilities instead of arbitrary percentage values (e.g., w-4/5 instead of w-[80%])
Use TypeScript Vue 3.5 style default prop declaration with reactive props destructuring - avoid withDefaults or runtime props
Prefer defineModel over separately defining a prop and emit for v-model bindings
Define slots via template usage, not via defineSlots
Use same-name shorthand for slot prop bindings (e.g., :isExpanded instead 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/platform/assets/components/ModelImportProgressDialog.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/components/ModelImportProgressDialog.vue

src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase

src/**/*.{ts,tsx,vue}: Use separate import type statements instead of inline type in mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, run pnpm format before committing
Never use any type - use proper TypeScript types
Never use as any type 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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

src/**/*.{ts,vue}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,vue}: Use ref for reactive state, computed() for derived values, and watch/watchEffect for side effects in Composition API
Avoid using ref with watch if a computed would suffice - minimize refs and derived state
Use provide/inject for 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/platform/assets/components/ModelImportProgressDialog.vue

🧠 Learnings (17)

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue OverlayPanel component with Popover

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Steps component with Stepper without panels

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.vue : Use Tailwind's plurals system via i18n instead of hardcoding pluralization in templates

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2026-01-10T00:24:17.662Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.662Z
Learning: Applies to src/**/*.vue : Avoid new usage of PrimeVue components

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-11-24T19:47:45.616Z

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue Dropdown component with Select

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-12-05T20:35:28.330Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/locales/en/main.json:2257-2272
Timestamp: 2025-12-05T20:35:28.330Z
Learning: In the Comfy-Org/ComfyUI_frontend repository, vue-i18n pluralization uses a two-parameter pattern: `t('key', { count: value })` where the `count` property in the interpolation object automatically triggers plural selection from pipe-separated locale strings (e.g., "no items | 1 item | {count} items"). This is the correct pattern used throughout the codebase, as validated by Playwright tests.

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

📚 Learning: 2025-12-18T02:07:38.870Z

Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7598
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:131-131
Timestamp: 2025-12-18T02:07:38.870Z
Learning: Tailwind CSS v4 safe utilities (e.g., items-center-safe, justify-*-safe, place-*-safe) are allowed in Vue components under src/ and in story files. Do not flag these specific safe variants as invalid when reviewing code in src/**/*.vue or related stories.

Applied to files:

src/platform/assets/components/ModelImportProgressDialog.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/platform/assets/components/ModelImportProgressDialog.vue

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: setup
GitHub Check: test
GitHub Check: lint-and-format
GitHub Check: collect

🔇 Additional comments (2)

src/platform/assets/components/ModelImportProgressDialog.vue (2)

173-206: Excellent truncation and flex layout improvements.

The footer layout changes properly handle long job names:

min-w-0 flex-1 on the left section enables growth and proper truncation

flex-shrink-0 on all status icons prevents unwanted squishing

min-w-0 truncate on text spans enables text truncation within flex containers

Consistent pattern across all three states (in-progress, failed, completed)

These changes follow flexbox best practices and align with the PR's responsiveness objectives.

209-220: LGTM: Right-side controls properly constrained.

The addition of flex-shrink-0 to the controls container and whitespace-nowrap to the progress count ensures:

Controls remain accessible and don't shrink on small viewports

Progress count stays on a single line

Proper balance with the growing/shrinking left section

## Summary Polishing improvements for the model upload (BYOM) experience. ## Changes - **HoneyToast z-index**: Increased from `z-50` to `z-9999` so the ModelImportProgressDialog appears above modal backdrops - **VideoHelpDialog**: Removed pixel-based max-width constraint, now uses `90vw` to fill more of the viewport - **UploadModelDialog responsive layout**: Added `max-height: 90vh` and scrollable content area to prevent footer buttons from underflowing on small screens - **URL validity indicator**: Added green checkmark icon inside the URL input when a valid Civitai or HuggingFace URL is entered ## Testing - Open the model upload dialog and verify buttons remain accessible on small viewport heights - Enter a valid Civitai/HuggingFace URL and confirm the green checkmark appears - Open the help video and verify it uses more of the viewport - Start a model download and verify the progress toast appears above any open modals ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7938-fix-Model-upload-UI-improvements-2e46d73d365081a292f5fda70c6db0f5) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

comfy-pr-bot · 2026-01-10T17:55:53Z

@DrJKL Successfully backported to #7943

Backport of #7938 to `cloud/1.36` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7943-backport-cloud-1-36-fix-Model-upload-UI-improvements-2e46d73d365081fcadd1f71e7fa012d6) by [Unito](https://www.unito.io) Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

DrJKL and others added 6 commits January 9, 2026 16:40

fix(HoneyToast): increase z-index to appear above modal backdrops

5004aa2

fix(VideoHelpDialog): increase max-width for larger viewport usage

9438a28

fix(UploadModelDialog): prevent footer from underflowing on small scr…

35cef8f

…eens

feat(UploadModel): add URL validity indicator with green checkmark

6f3d0b4

Amp-Thread-ID: https://ampcode.com/threads/T-019ba54f-b441-748b-8c5a-7ca1e7efa4ce Co-authored-by: Amp <amp@ampcode.com>

fix(VideoHelpDialog): remove pixel-based max-width constraint

5253b2e

fix(UploadModelDialog): More tweaks to keep the buttons accessible.

788391f

DrJKL requested a review from a team as a code owner January 10, 2026 02:12

dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Jan 10, 2026

style(HoneyToast): use Tailwind 4 numeric z-index syntax

a6cd297

DrJKL assigned luke-mino-altherr Jan 10, 2026

coderabbitai bot reviewed Jan 10, 2026

View reviewed changes

Update src/platform/assets/components/UploadModelDialog.vue

83bd7d3

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

coderabbitai bot reviewed Jan 10, 2026

View reviewed changes

luke-mino-altherr reviewed Jan 10, 2026

View reviewed changes

fix(Toast): prevent text overflow and wrapping in progress items

d08a17a

coderabbitai bot reviewed Jan 10, 2026

View reviewed changes

src/platform/assets/components/ModelImportProgressDialog.vue Show resolved Hide resolved

DrJKL added 2 commits January 9, 2026 19:10

fix(z-index): Make dropdown layer correctly.

175a54c

fix(truncation): Truncate all the strings.

acd6684

coderabbitai bot reviewed Jan 10, 2026

View reviewed changes

christian-byrne previously approved these changes Jan 10, 2026

View reviewed changes

DrJKL dismissed christian-byrne’s stale review via acd6684 January 10, 2026 03:19

DrJKL assigned christian-byrne Jan 10, 2026

DrJKL requested review from comfydesigner and luke-mino-altherr January 10, 2026 03:20

coderabbitai bot reviewed Jan 10, 2026

View reviewed changes

luke-mino-altherr approved these changes Jan 10, 2026

View reviewed changes

DrJKL merged commit 4b095f3 into main Jan 10, 2026
26 checks passed

DrJKL deleted the drjkl/byom-polishing-1 branch January 10, 2026 03:25

luke-mino-altherr added needs-backport Fix/change that needs to be cherry-picked to the current feature freeze branch cloud/1.36 labels Jan 10, 2026

comfy-pr-bot mentioned this pull request Jan 10, 2026

[backport cloud/1.36] fix: Model upload UI improvements #7943

Merged

github-actions bot removed the needs-backport Fix/change that needs to be cherry-picked to the current feature freeze branch label Jan 10, 2026

coderabbitai bot mentioned this pull request Jan 12, 2026

fix(upload-model): UI/UX improvements for Upload Model Dialog #7969

Merged

coderabbitai bot mentioned this pull request Mar 5, 2026

[Bug] Missing models dialog lost desktop download progress UI and per-model error messages #9412

Closed

Conversation

DrJKL commented Jan 10, 2026 • edited by sync-by-unito bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Testing

Uh oh!

coderabbitai bot commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Possibly related PRs

Uh oh!

github-actions bot commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Playwright Test Results

📈 Summary

📊 Test Reports by Browser

Uh oh!

github-actions bot commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Build Status

🔗 Links

Uh oh!

github-actions bot commented Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

luke-mino-altherr Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

DrJKL Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DrJKL Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

DrJKL Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 10, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

comfy-pr-bot commented Jan 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

DrJKL commented Jan 10, 2026 •

edited by sync-by-unito bot

Loading

coderabbitai bot commented Jan 10, 2026 •

edited

Loading

github-actions bot commented Jan 10, 2026 •

edited

Loading

github-actions bot commented Jan 10, 2026 •

edited

Loading

github-actions bot commented Jan 10, 2026 •

edited

Loading

coderabbitai bot Jan 10, 2026 •

edited

Loading