Skip to content

Conversation

@benceruleanlu
Copy link
Member

@benceruleanlu benceruleanlu commented Dec 16, 2025

Desktop builds should not send users to git-update docs from the release notification toast; route the toast “Update” action into the Desktop updater flow.

On Electron, the release toast “Update” button executes Comfy-Desktop.CheckForUpdates; failures surface via useErrorHandling.

Fixes #7543

┆Issue is synchronized with this Notion page by Unito

@benceruleanlu benceruleanlu requested a review from a team as a code owner December 16, 2025 05:56
Copilot AI review requested due to automatic review settings December 16, 2025 05:56
@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Dec 16, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 16, 2025

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Replaces the toast's previous docs-opening Update action with an Electron-specific flow: when running in Electron, the toast awaits a desktop updater command via the command store and routes errors to the central error handler; otherwise it opens the update docs. Adds tests for success and failure of the Electron command.

Changes

Cohort / File(s) Summary
Update toast component and tests
src/platform/updates/components/ReleaseNotificationToast.vue, src/platform/updates/components/ReleaseNotificationToast.test.ts
Converts handleUpdate to async. On Electron, calls the Comfy-Desktop.CheckForUpdates command via the command store, dismisses the toast on success, and forwards errors to the centralized error handler; on non-Electron opens the update docs URL. Adds tests mocking command execution and error handling for both success and failure paths.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Toast as ReleaseNotificationToast
    participant CmdStore as CommandStore
    participant ErrHandler as useErrorHandling
    participant Window as window

    User->>Toast: Click "Update"
    Toast->>Toast: isElectron?
    alt Electron
        Toast->>CmdStore: execute("Comfy-Desktop.CheckForUpdates")
        opt success
            CmdStore-->>Toast: resolved
            Toast->>Toast: dismiss toast
        end
        alt failure
            CmdStore-->>Toast: rejected (error)
            Toast->>ErrHandler: showToast(error)
        end
    else Non-Electron
        Toast->>Window: open(update docs URL, _blank)
        Toast->>Toast: dismiss toast
    end
Loading

Possibly related PRs

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The pull request successfully implements the core requirement from issue #7543: routing the release toast Update button to the Electron desktop updater flow (Comfy-Desktop.CheckForUpdates) instead of git documentation, with centralized error handling.
Out of Scope Changes check ✅ Passed All changes are directly scoped to implementing the desktop updater flow in ReleaseNotificationToast, with necessary infrastructure additions (error handling composable, command store integration, Electron detection). No unrelated modifications detected.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/7543-desktop-update-actions

📜 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 143bcb1 and 130a722.

📒 Files selected for processing (1)
  • src/platform/updates/components/ReleaseNotificationToast.vue (2 hunks)
🧰 Additional context used
📓 Path-based instructions (8)
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: Vue 3 SFCs must use Composition API only - no Options API
Use <script setup lang="ts"> for component logic
Use Tailwind 4 utility classes for styling - avoid <style> blocks
Use cn() utility from @/utils/tailwindUtil to merge Tailwind class names - never use :class="[]" syntax
Never use the dark: Tailwind variant - use semantic values from style.css theme instead (e.g., bg-node-component-surface)
Use Vue 3.5+ TypeScript style default prop declaration with reactive destructuring - prefer useModel to prop/emit pairs, do not use withDefaults
Do not import Vue macros unnecessarily
Use vue-i18n in composition API for string literals - place translation entries in src/locales/en/main.json
Implement proper props and emits definitions in Vue components
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Avoid new usage of PrimeVue components

Files:

  • src/platform/updates/components/ReleaseNotificationToast.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

src/**/*.{vue,ts}: Avoid using ref and watch together - use computed instead if possible
Do not add ref if a prop would suffice; do not add computed if the ref/prop directly would work; use watch only when computed won't accomplish the goal
Leverage VueUse functions for performance-enhancing styles

Files:

  • src/platform/updates/components/ReleaseNotificationToast.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}: ESLint rules: Vue + TS rules, no floating promises, unused imports disallowed, i18n raw text restrictions in templates
Use es-toolkit for utility functions
Avoid mutable state - prefer immutability and assignment at point of declaration
Never use any type - use proper TypeScript types
Never use as any type assertions - fix the underlying type issue

Files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
src/**/*.{js,ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript exclusively - no new JavaScript files

Files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
src/**/*.{ts,tsx,vue,js}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,tsx,vue,js}: Indent with 2 spaces, use single quotes, no trailing semicolons, line width 80 - see .prettierrc
Sort and group imports by plugin, run pnpm format before committing

Files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
🧠 Learnings (15)
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Implement proper error handling

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guide

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-12-17T01:01:03.609Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-17T01:01:03.609Z
Learning: Applies to src/**/*.{vue,ts} : Avoid using `ref` and `watch` together - use `computed` instead if possible

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: lint-and-format
  • GitHub Check: setup
  • GitHub Check: test
  • GitHub Check: collect
🔇 Additional comments (3)
src/platform/updates/components/ReleaseNotificationToast.vue (3)

72-75: LGTM - imports address the missing error handling composable.

The error handling composable (useErrorHandling) is now properly imported, resolving the concern from the previous review. The isElectron utility and useCommandStore are appropriate for the Desktop updater flow.


83-83: LGTM - error handling composable properly initialized.

The toastErrorHandler is correctly extracted from the composable for use in the Electron update flow.


190-195: LGTM - non-Electron flow preserved correctly.

The fallback behavior for non-Desktop environments correctly opens the update documentation and dismisses the toast, maintaining backward compatibility.


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
Copy link

github-actions bot commented Dec 16, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 12/20/2025, 01:36:11 AM UTC

🔗 Links


🎉 Your Storybook is ready for review!

@github-actions
Copy link

github-actions bot commented Dec 16, 2025

🎭 Playwright Test Results

All tests passed!

⏰ Completed at: 12/20/2025, 01:44:42 AM UTC

📈 Summary

  • Total Tests: 510
  • Passed: 502 ✅
  • Failed: 0
  • Flaky: 0
  • Skipped: 8 ⏭️

📊 Test Reports by Browser

  • chromium: View Report • ✅ 490 / ❌ 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
Copy link

github-actions bot commented Dec 16, 2025

Bundle Size Report

Summary

  • Raw size: 16.6 MB baseline 16.6 MB — 🔴 +298 B
  • Gzip: 3.37 MB baseline 3.37 MB — 🔴 +103 B
  • Brotli: 2.6 MB baseline 2.6 MB — 🔴 +290 B
  • Bundles: 99 current • 99 baseline • 42 added / 42 removed

Category Glance
Graph Workspace 🔴 +298 B (998 kB) · Vendor & Third-Party ⚪ 0 B (8.46 MB) · Other ⚪ 0 B (3.44 MB) · App Entry Points ⚪ 0 B (3.21 MB) · Panels & Settings ⚪ 0 B (297 kB) · UI Components ⚪ 0 B (184 kB) · + 3 more

Per-category breakdown
App Entry Points — 3.21 MB (baseline 3.21 MB) • ⚪ 0 B

Main entry bundles and manifests

File Before After Δ Raw Δ Gzip Δ Brotli
assets/index-DDU0L5EJ.js (new) 2.98 MB 🔴 +2.98 MB 🔴 +629 kB 🔴 +478 kB
assets/index-DQrXeNfG.js (removed) 2.98 MB 🟢 -2.98 MB 🟢 -629 kB 🟢 -478 kB
assets/index-DCRDscRd.js (new) 227 kB 🔴 +227 kB 🔴 +48.5 kB 🔴 +39.8 kB
assets/index-DoOQXhfr.js (removed) 227 kB 🟢 -227 kB 🟢 -48.5 kB 🟢 -39.8 kB
assets/index-CaCousko.js (new) 345 B 🔴 +345 B 🔴 +245 B 🔴 +230 B
assets/index-CT5WAbNp.js (removed) 345 B 🟢 -345 B 🟢 -245 B 🟢 -234 B

Status: 3 added / 3 removed

Graph Workspace — 998 kB (baseline 998 kB) • 🔴 +298 B

Graph editor runtime, canvas, workflow orchestration

File Before After Δ Raw Δ Gzip Δ Brotli
assets/GraphView-mSQXZc8y.js (new) 998 kB 🔴 +998 kB 🔴 +195 kB 🔴 +148 kB
assets/GraphView-CqY7frRi.js (removed) 998 kB 🟢 -998 kB 🟢 -195 kB 🟢 -148 kB

Status: 1 added / 1 removed

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

Top-level views, pages, and routed surfaces

File Before After Δ Raw Δ Gzip Δ Brotli
assets/UserSelectView-BczaWqh9.js (removed) 6.54 kB 🟢 -6.54 kB 🟢 -2.14 kB 🟢 -1.89 kB
assets/UserSelectView-CQbqSId3.js (new) 6.54 kB 🔴 +6.54 kB 🔴 +2.14 kB 🔴 +1.89 kB

Status: 1 added / 1 removed

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

Configuration panels, inspectors, and settings screens

File Before After Δ Raw Δ Gzip Δ Brotli
assets/LegacyCreditsPanel-B6513I65.js (removed) 21.4 kB 🟢 -21.4 kB 🟢 -5.16 kB 🟢 -4.5 kB
assets/LegacyCreditsPanel-CkXBuzKb.js (new) 21.4 kB 🔴 +21.4 kB 🔴 +5.16 kB 🔴 +4.51 kB
assets/KeybindingPanel-BT6cb00v.js (new) 13.6 kB 🔴 +13.6 kB 🔴 +3.42 kB 🔴 +3.01 kB
assets/KeybindingPanel-C9bqpYqp.js (removed) 13.6 kB 🟢 -13.6 kB 🟢 -3.42 kB 🟢 -3.02 kB
assets/ExtensionPanel-CCxIQNUa.js (new) 10.8 kB 🔴 +10.8 kB 🔴 +2.57 kB 🔴 +2.24 kB
assets/ExtensionPanel-EhlzPFGM.js (removed) 10.8 kB 🟢 -10.8 kB 🟢 -2.57 kB 🟢 -2.24 kB
assets/AboutPanel-CUIwdNpv.js (removed) 9.16 kB 🟢 -9.16 kB 🟢 -2.46 kB 🟢 -2.21 kB
assets/AboutPanel-DoQf5aMC.js (new) 9.16 kB 🔴 +9.16 kB 🔴 +2.46 kB 🔴 +2.2 kB
assets/ServerConfigPanel-bga8ImHv.js (new) 7.07 kB 🔴 +7.07 kB 🔴 +1.98 kB 🔴 +1.76 kB
assets/ServerConfigPanel-D8rT94w-.js (removed) 7.07 kB 🟢 -7.07 kB 🟢 -1.98 kB 🟢 -1.76 kB
assets/UserPanel-_7S2Sqxm.js (new) 6.23 kB 🔴 +6.23 kB 🔴 +1.71 kB 🔴 +1.5 kB
assets/UserPanel-Cy-MX9FE.js (removed) 6.23 kB 🟢 -6.23 kB 🟢 -1.72 kB 🟢 -1.5 kB
assets/settings-BhbWhsRg.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-BvFz-TmQ.js 33.1 kB 33.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-BxYnTA2y.js 21.5 kB 21.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-C6bMjAne.js 27.1 kB 27.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-C7Yhp7H7.js 24 kB 24 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-CsnOn8G0.js 25.7 kB 25.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-D5BGNZ7M.js 24.8 kB 24.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-D7k3huHm.js 25 kB 25 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DamkILzl.js 26.4 kB 26.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-s1k0gw1Y.js 20.9 kB 20.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 6 added / 6 removed

UI Components — 184 kB (baseline 184 kB) • ⚪ 0 B

Reusable component library chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/Load3D.vue_vue_type_script_setup_true_lang-DUL5WYsX.js (removed) 53.5 kB 🟢 -53.5 kB 🟢 -8.45 kB 🟢 -7.26 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-PS_1I7wK.js (new) 53.5 kB 🔴 +53.5 kB 🔴 +8.45 kB 🔴 +7.25 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-Dfxw77HF.js (new) 48.8 kB 🔴 +48.8 kB 🔴 +10.5 kB 🔴 +9.15 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-DIjL2vv8.js (removed) 48.8 kB 🟢 -48.8 kB 🟢 -10.5 kB 🟢 -9.14 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-DTnbeXnf.js (removed) 48.4 kB 🟢 -48.4 kB 🟢 -10.6 kB 🟢 -9.3 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-HQAz7Xz7.js (new) 48.4 kB 🔴 +48.4 kB 🔴 +10.6 kB 🔴 +9.31 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-CsvQ87f5.js (new) 14.3 kB 🔴 +14.3 kB 🔴 +3.73 kB 🔴 +3.28 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-siELUkLf.js (removed) 14.3 kB 🟢 -14.3 kB 🟢 -3.74 kB 🟢 -3.29 kB
assets/ComfyQueueButton-B5Odll89.js (removed) 8.49 kB 🟢 -8.49 kB 🟢 -2.48 kB 🟢 -2.21 kB
assets/ComfyQueueButton-CNS-j9lM.js (new) 8.49 kB 🔴 +8.49 kB 🔴 +2.49 kB 🔴 +2.21 kB
assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-92ubFl37.js (new) 3.68 kB 🔴 +3.68 kB 🔴 +1.45 kB 🔴 +1.3 kB
assets/WidgetWithControl.vue_vue_type_script_setup_true_lang-DoxrqSqO.js (removed) 3.68 kB 🟢 -3.68 kB 🟢 -1.45 kB 🟢 -1.31 kB
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-B7eJ_Y72.js (removed) 2.14 kB 🟢 -2.14 kB 🟢 -890 B 🟢 -774 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-CucUSSfy.js (new) 2.14 kB 🔴 +2.14 kB 🔴 +890 B 🔴 +768 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-B-WIlcnt.js (new) 897 B 🔴 +897 B 🔴 +502 B 🔴 +430 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-BZUBz1NC.js (removed) 897 B 🟢 -897 B 🟢 -503 B 🟢 -438 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-Bumg4_L2.js 1.34 kB 1.34 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetButton-z3dAsplW.js 2.04 kB 2.04 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-6fKvvf8R.js (new) 7.51 kB 🔴 +7.51 kB 🔴 +1.83 kB 🔴 +1.58 kB
assets/keybindingService-RxQxo2ap.js (removed) 7.51 kB 🟢 -7.51 kB 🟢 -1.83 kB 🟢 -1.57 kB
assets/audioService-BdIKM7Lp.js (removed) 2.2 kB 🟢 -2.2 kB 🟢 -961 B 🟢 -821 B
assets/audioService-X3OZ2eyj.js (new) 2.2 kB 🔴 +2.2 kB 🔴 +963 B 🔴 +827 B
assets/serverConfigStore-7JI8VFS2.js 2.83 kB 2.83 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 2 added / 2 removed

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

Helpers, composables, and utility bundles

File Before After Δ Raw Δ Gzip Δ Brotli
assets/audioUtils-C9854eHx.js (removed) 1.41 kB 🟢 -1.41 kB 🟢 -652 B 🟢 -547 B
assets/audioUtils-DyKmxKv_.js (new) 1.41 kB 🔴 +1.41 kB 🔴 +651 B 🔴 +543 B
assets/nodeFilterUtil-CXKCRJ-m.js 460 B 460 B ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 1 added / 1 removed

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

External libraries and shared vendor chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/vendor-chart-DaR9dw3X.js 452 kB 452 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-other-Cf7iqkoX.js 3.86 MB 3.86 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-primevue-DZ--Ysu_.js 1.96 MB 1.96 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-three-C1LfRdh4.js 1.37 MB 1.37 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-tiptap-C1NB2Q_L.js 232 kB 232 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-vue-DSfeuQOV.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 — 3.44 MB (baseline 3.44 MB) • ⚪ 0 B

Bundles that do not match a named category

File Before After Δ Raw Δ Gzip Δ Brotli
assets/SubscriptionRequiredDialogContent-BTjtkc8a.js (new) 28.1 kB 🔴 +28.1 kB 🔴 +6.36 kB 🔴 +5.51 kB
assets/SubscriptionRequiredDialogContent-DKGLoZKM.js (removed) 28.1 kB 🟢 -28.1 kB 🟢 -6.35 kB 🟢 -5.51 kB
assets/WidgetRecordAudio-BGdS8KNE.js (removed) 20.4 kB 🟢 -20.4 kB 🟢 -5.23 kB 🟢 -4.63 kB
assets/WidgetRecordAudio-Cq-cqQwB.js (new) 20.4 kB 🔴 +20.4 kB 🔴 +5.23 kB 🔴 +4.63 kB
assets/AudioPreviewPlayer-Cm_BJ79Y.js (new) 13.4 kB 🔴 +13.4 kB 🔴 +3.37 kB 🔴 +3.01 kB
assets/AudioPreviewPlayer-VVw5eO_F.js (removed) 13.4 kB 🟢 -13.4 kB 🟢 -3.37 kB 🟢 -3.01 kB
assets/ValueControlPopover-Bg3vUVrH.js (new) 5.49 kB 🔴 +5.49 kB 🔴 +1.7 kB 🔴 +1.51 kB
assets/ValueControlPopover-DIq4kVnk.js (removed) 5.49 kB 🟢 -5.49 kB 🟢 -1.7 kB 🟢 -1.51 kB
assets/WidgetGalleria-BDze-QkJ.js (removed) 4.1 kB 🟢 -4.1 kB 🟢 -1.44 kB 🟢 -1.3 kB
assets/WidgetGalleria-BgiYvdav.js (new) 4.1 kB 🔴 +4.1 kB 🔴 +1.44 kB 🔴 +1.3 kB
assets/WidgetColorPicker-BbucZUOr.js (new) 3.41 kB 🔴 +3.41 kB 🔴 +1.38 kB 🔴 +1.23 kB
assets/WidgetColorPicker-BGr4CByf.js (removed) 3.41 kB 🟢 -3.41 kB 🟢 -1.38 kB 🟢 -1.23 kB
assets/WidgetTextarea-DYIC1K-g.js (new) 3.08 kB 🔴 +3.08 kB 🔴 +1.21 kB 🔴 +1.08 kB
assets/WidgetTextarea-XCfwFcjN.js (removed) 3.08 kB 🟢 -3.08 kB 🟢 -1.21 kB 🟢 -1.08 kB
assets/WidgetMarkdown-CDx-rFxC.js (removed) 3.08 kB 🟢 -3.08 kB 🟢 -1.28 kB 🟢 -1.12 kB
assets/WidgetMarkdown-DBqrYTsi.js (new) 3.08 kB 🔴 +3.08 kB 🔴 +1.28 kB 🔴 +1.12 kB
assets/WidgetAudioUI-BdhDLxhU.js (new) 2.94 kB 🔴 +2.94 kB 🔴 +1.18 kB 🔴 +1.07 kB
assets/WidgetAudioUI-CftnU2JS.js (removed) 2.94 kB 🟢 -2.94 kB 🟢 -1.18 kB 🟢 -1.07 kB
assets/WidgetInputText-C2L4-oEt.js (new) 1.99 kB 🔴 +1.99 kB 🔴 +916 B 🔴 +844 B
assets/WidgetInputText-D4MQRs4L.js (removed) 1.99 kB 🟢 -1.99 kB 🟢 -917 B 🟢 -824 B
assets/WidgetToggleSwitch-BLpMGjkp.js (new) 1.76 kB 🔴 +1.76 kB 🔴 +832 B 🔴 +733 B
assets/WidgetToggleSwitch-V1nOn-xz.js (removed) 1.76 kB 🟢 -1.76 kB 🟢 -832 B 🟢 -731 B
assets/MediaImageBottom-B5BGMZ_s.js (new) 1.55 kB 🔴 +1.55 kB 🔴 +733 B 🔴 +640 B
assets/MediaImageBottom-ip-phmpe.js (removed) 1.55 kB 🟢 -1.55 kB 🟢 -729 B 🟢 -640 B
assets/MediaAudioBottom-C3eeJMcc.js (new) 1.51 kB 🔴 +1.51 kB 🔴 +729 B 🔴 +648 B
assets/MediaAudioBottom-CzwXxncK.js (removed) 1.51 kB 🟢 -1.51 kB 🟢 -730 B 🟢 -648 B
assets/Media3DBottom-CLZ-E7yD.js (new) 1.5 kB 🔴 +1.5 kB 🔴 +729 B 🔴 +647 B
assets/Media3DBottom-CoTN010f.js (removed) 1.5 kB 🟢 -1.5 kB 🟢 -727 B 🟢 -644 B
assets/MediaVideoBottom-DjPSueqs.js (removed) 1.5 kB 🟢 -1.5 kB 🟢 -727 B 🟢 -646 B
assets/MediaVideoBottom-DXu-_WPt.js (new) 1.5 kB 🔴 +1.5 kB 🔴 +726 B 🔴 +644 B
assets/Media3DTop-Dopv-NB4.js (new) 1.49 kB 🔴 +1.49 kB 🔴 +758 B 🔴 +650 B
assets/Media3DTop-q2rLi44b.js (removed) 1.49 kB 🟢 -1.49 kB 🟢 -762 B 🟢 -654 B
assets/WidgetSelect-BZi0--Vm.js (new) 733 B 🔴 +733 B 🔴 +362 B 🔴 +319 B
assets/WidgetSelect-DEoAxsfI.js (removed) 733 B 🟢 -733 B 🟢 -359 B 🟢 -307 B
assets/WidgetInputNumber-BYAvQr72.js (new) 673 B 🔴 +673 B 🔴 +346 B 🔴 +287 B
assets/WidgetInputNumber-fTST3zGZ.js (removed) 673 B 🟢 -673 B 🟢 -347 B 🟢 -288 B
assets/Load3D-2W2Cm9-5.js (new) 424 B 🔴 +424 B 🔴 +270 B 🔴 +223 B
assets/Load3D-D110q6eq.js (removed) 424 B 🟢 -424 B 🟢 -267 B 🟢 -228 B
assets/WidgetLegacy-CqBc-W_u.js (removed) 364 B 🟢 -364 B 🟢 -234 B 🟢 -192 B
assets/WidgetLegacy-DTbJCZoI.js (new) 364 B 🔴 +364 B 🔴 +237 B 🔴 +194 B
assets/commands-BWp4HdfU.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CcfGaui5.js 14.4 kB 14.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CisfgZf5.js 13.7 kB 13.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CkU12Foh.js 13 kB 13 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CoH2DJa6.js 14.2 kB 14.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-COSt-Bjx.js 14.9 kB 14.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DalfIW5f.js 15.9 kB 15.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DfTl0eCm.js 13.5 kB 13.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DwSJL865.js 13.7 kB 13.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-Zxyx15Vd.js 12.8 kB 12.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-BDhxs-bB.js 79.9 kB 79.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-BtXVDFw6.js 84.7 kB 84.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Buv6RhU4.js 82.4 kB 82.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-CgJ6zvJL.js 97.2 kB 97.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-CI9qb0E5.js 112 kB 112 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Cu4LqtW0.js 81.6 kB 81.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Cw9RZWRY.js 89 B 89 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Dm19QY4N.js 92.2 kB 92.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Tihe0h_r.js 71.3 kB 71.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-wPWMutMw.js 70.4 kB 70.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaAudioTop-Dr0afgCA.js 1.46 kB 1.46 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaImageTop-BXa-oKEc.js 1.75 kB 1.75 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaVideoTop-BVdg2b8C.js 2.65 kB 2.65 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-1Vh3MCrN.js 240 kB 240 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-aW9En70v.js 260 kB 260 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-BIckSVgU.js 273 kB 273 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-BiYpVi7D.js 263 kB 263 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Bw_Jitw_.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CCEXtYfM.js 243 kB 243 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CvmVDWYd.js 323 kB 323 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-D_wreoPJ.js 267 kB 267 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Dz-0ZIBN.js 297 kB 297 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-VZsNmhG7.js 264 kB 264 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetChart-DT6E_SOn.js 2.48 kB 2.48 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetImageCompare-BB9nVmFq.js 2.21 kB 2.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: 20 added / 20 removed

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3ee6d53 and 5174dfb.

📒 Files selected for processing (2)
  • src/platform/updates/components/ReleaseNotificationToast.test.ts (3 hunks)
  • src/platform/updates/components/ReleaseNotificationToast.vue (3 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
src/**/*.{vue,ts}

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

src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json

Files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
  • src/platform/updates/components/ReleaseNotificationToast.vue
src/**/*.ts

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

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

Minimize the surface area (exported values) of each module and composable

Files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

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

Files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.test.ts
  • src/platform/updates/components/ReleaseNotificationToast.vue
src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.test.ts
  • src/platform/updates/components/ReleaseNotificationToast.vue
**/*.{ts,tsx,js,jsx,vue,json}

📄 CodeRabbit inference engine (AGENTS.md)

Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see .prettierrc)

Files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
  • src/platform/updates/components/ReleaseNotificationToast.vue
**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; run pnpm format before committing
Use TypeScript for type safety; never use any type - use proper TypeScript types
Never use as any type assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nested if or for statements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones

Files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
  • src/platform/updates/components/ReleaseNotificationToast.vue
**/*.test.ts

📄 CodeRabbit inference engine (AGENTS.md)

**/*.test.ts: Write tests for all changes, especially bug fixes to catch future regressions
Unit/component test files must be named **/*.test.ts or in tests-ui/ directory
Do not write change detector tests that just assert default values
Do not write tests dependent on non-behavioral features like utility classes or styles
Be parsimonious in testing; do not write redundant tests; see composable tests approach
Follow 'Don't Mock What You Don't Own' principle - avoid mocking external dependencies
Do not write tests that just test the mocks; ensure tests fail when code behaves unexpectedly
Leverage Vitest's mocking utilities where possible for test mocking
Keep module mocks contained in test files; do not use global mutable state within test files; use vi.hoisted() if necessary
For Component testing, use Vue Test Utils and follow advice about making components easy to test
Aim for behavioral coverage of critical and new features in unit tests

Files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
src/**/*.vue

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

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

Files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use <script setup lang="ts"> for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use withDefaults or runtime props declaration
Prefer useModel to separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using <style> blocks in Vue components
Use semantic Tailwind values from style.css theme instead of the dark: variant; for example, use bg-node-component-surface instead of dark: prefixes
Always use cn() utility from @/utils/tailwindUtil to merge Tailwind class names; do not use :class="[]" syntax
Use ref for reactive state in Vue Composition API components
Implement computed properties with computed() from Vue; avoid using a ref with a watch if a computed would work instead
Use watch and watchEffect for side effects in Vue components
Implement lifecycle hooks using onMounted, onUpdated, and other Vue lifecycle functions
Use provide/inject for dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundant computed, and prefer computed over watch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries in src/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead

Files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
🧠 Learnings (29)
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Write tests for new features

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.test.ts : Write tests for all changes, especially bug fixes to catch future regressions

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Mock external dependencies in tests

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.test.ts : Do not write tests that just test the mocks; ensure tests fail when code behaves unexpectedly

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.test.ts : Keep module mocks contained in test files; do not use global mutable state within test files; use `vi.hoisted()` if necessary

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.test.ts : Leverage Vitest's mocking utilities where possible for test mocking

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:09.318Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursor/rules/unit-test.mdc:0-0
Timestamp: 2025-11-24T19:48:09.318Z
Learning: Applies to test/**/*.{test,spec}.{js,ts,jsx,tsx} : Mocks should be cleanly written and easy to understand, with reusable mocks where possible

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.test.ts : Aim for behavioral coverage of critical and new features in unit tests

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Follow existing test patterns in the codebase

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.test.ts : Follow 'Don't Mock What You Don't Own' principle - avoid mocking external dependencies

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:48:03.270Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: tests-ui/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:48:03.270Z
Learning: Applies to tests-ui/**/*.test.{js,ts,jsx,tsx} : Always prefer vitest mock functions over writing verbose manual mocks

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.test.ts : For Component testing, use Vue Test Utils and follow advice about making components easy to test

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests

Applied to files:

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

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-10T03:09:13.807Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:13.807Z
Learning: In test files, prefer selecting or asserting on accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests validate actual user-facing behavior and accessibility, reducing reliance on implementation details like test IDs.

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.test.ts
  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement proper error handling in Vue components

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work instead

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue Composition API components

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Utilize Vue 3's Teleport component when needed

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
🧬 Code graph analysis (1)
src/platform/updates/components/ReleaseNotificationToast.test.ts (1)
src/platform/updates/common/releaseService.ts (1)
  • ReleaseNote (10-10)
⏰ 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). (6)
  • GitHub Check: CodeQL analysis (javascript-typescript)
  • GitHub Check: Agent
  • GitHub Check: test
  • GitHub Check: setup
  • GitHub Check: lint-and-format
  • GitHub Check: collect
🔇 Additional comments (4)
src/platform/updates/components/ReleaseNotificationToast.vue (2)

72-75: LGTM! Imports support the new Electron update flow.

The new imports correctly support the Electron-specific update flow: useErrorHandling for centralized error handling, useCommandStore for command execution, and isElectron for environment detection.

Also applies to: 85-85


179-195: Implementation correctly uses isElectron() to detect Electron environment.

The isElectron() utility (in ./apps/desktop-ui/src/utils/envUtil.ts) checks 'electronAPI' in window && window.electronAPI !== undefined, which aligns with the test mocking approach where tests set window.electronAPI = {} to simulate the Electron environment. The routing logic in handleUpdate() properly uses this detection to invoke the Desktop updater command with appropriate error handling.

src/platform/updates/components/ReleaseNotificationToast.test.ts (2)

8-14: LGTM! Mock setup follows Vitest best practices.

The mocks are properly hoisted using vi.hoisted() and correctly wire the command execution and error handling dependencies. This approach keeps mocks contained within the test file and follows the project's testing guidelines.

Also applies to: 47-57


209-232: LGTM! Proper coverage of Electron error path.

The test correctly simulates a command execution failure and verifies that the error handler is invoked while the fallback behavior (opening documentation) is prevented. This ensures that users see appropriate error feedback when the Desktop updater fails.

Comment on lines +182 to +207
it('executes desktop updater flow when running in Electron', async () => {
mockReleaseStore.recentRelease = {
version: '1.2.3',
content: '# Test Release'
} as ReleaseNote

commandExecuteMock.mockResolvedValueOnce(undefined)

const mockWindowOpen = vi.fn()
Object.defineProperty(window, 'open', {
value: mockWindowOpen,
writable: true
})
;(window as any).electronAPI = {}

wrapper = mountComponent()
await wrapper.vm.handleUpdate()

expect(commandExecuteMock).toHaveBeenCalledWith(
'Comfy-Desktop.CheckForUpdates'
)
expect(mockWindowOpen).not.toHaveBeenCalled()
expect(toastErrorHandlerMock).not.toHaveBeenCalled()

delete (window as any).electronAPI
})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

Consider verifying toast dismissal behavior.

The test correctly verifies that the Desktop updater command is invoked and the fallback behavior is prevented. Good cleanup of window.electronAPI.

However, the test doesn't explicitly verify that the toast is dismissed after a successful command execution. Consider adding an assertion to check that isDismissed becomes true or that the toast is no longer visible after handleUpdate() completes.

Apply this diff to add toast dismissal verification:

 expect(commandExecuteMock).toHaveBeenCalledWith(
   'Comfy-Desktop.CheckForUpdates'
 )
 expect(mockWindowOpen).not.toHaveBeenCalled()
 expect(toastErrorHandlerMock).not.toHaveBeenCalled()
+await wrapper.vm.$nextTick()
+expect(wrapper.find('.release-toast-popup').exists()).toBe(false)

 delete (window as any).electronAPI
📝 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
it('executes desktop updater flow when running in Electron', async () => {
mockReleaseStore.recentRelease = {
version: '1.2.3',
content: '# Test Release'
} as ReleaseNote
commandExecuteMock.mockResolvedValueOnce(undefined)
const mockWindowOpen = vi.fn()
Object.defineProperty(window, 'open', {
value: mockWindowOpen,
writable: true
})
;(window as any).electronAPI = {}
wrapper = mountComponent()
await wrapper.vm.handleUpdate()
expect(commandExecuteMock).toHaveBeenCalledWith(
'Comfy-Desktop.CheckForUpdates'
)
expect(mockWindowOpen).not.toHaveBeenCalled()
expect(toastErrorHandlerMock).not.toHaveBeenCalled()
delete (window as any).electronAPI
})
it('executes desktop updater flow when running in Electron', async () => {
mockReleaseStore.recentRelease = {
version: '1.2.3',
content: '# Test Release'
} as ReleaseNote
commandExecuteMock.mockResolvedValueOnce(undefined)
const mockWindowOpen = vi.fn()
Object.defineProperty(window, 'open', {
value: mockWindowOpen,
writable: true
})
;(window as any).electronAPI = {}
wrapper = mountComponent()
await wrapper.vm.handleUpdate()
expect(commandExecuteMock).toHaveBeenCalledWith(
'Comfy-Desktop.CheckForUpdates'
)
expect(mockWindowOpen).not.toHaveBeenCalled()
expect(toastErrorHandlerMock).not.toHaveBeenCalled()
await wrapper.vm.$nextTick()
expect(wrapper.find('.release-toast-popup').exists()).toBe(false)
delete (window as any).electronAPI
})
🤖 Prompt for AI Agents
In src/platform/updates/components/ReleaseNotificationToast.test.ts around lines
182 to 207, the test exercises the Electron update flow but doesn't assert that
the toast is dismissed; after awaiting wrapper.vm.handleUpdate(), add an
assertion that verifies the toast was dismissed (for example,
expect(wrapper.vm.isDismissed).toBe(true) or assert the toast DOM is gone e.g.
expect(wrapper.find('.release-notification-toast').exists()).toBe(false)), then
keep the existing cleanup of delete (window as any).electronAPI.

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR modifies the release notification toast to trigger the Desktop updater flow when running in Electron, instead of opening the git-update documentation. The toast's "Update" button now executes the Comfy-Desktop.CheckForUpdates command on Electron platforms, with error handling via the useErrorHandling composable.

  • Added Electron-specific update flow using command execution
  • Implemented error handling with try-catch and toastErrorHandler
  • Added comprehensive tests for both success and error scenarios

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
src/platform/updates/components/ReleaseNotificationToast.vue Modified handleUpdate to execute Desktop updater command on Electron instead of opening docs; added imports for error handling, command store, and environment detection
src/platform/updates/components/ReleaseNotificationToast.test.ts Added mocks for command store and error handling; added two new test cases for Electron update flow (success and error scenarios)

Comment on lines +182 to +185
await useCommandStore().execute('Comfy-Desktop.CheckForUpdates')
dismissToast()
} catch (error) {
toastErrorHandler(error)
Copy link

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The current error handling has a subtle issue. When the command exists but its execution fails, commandStore.execute uses wrapWithErrorHandlingAsync internally, which catches the error, shows a toast, and then resolves successfully without re-throwing. This means dismissToast() on line 183 will still be called even when the command execution fails.

To properly handle errors and prevent the toast from being dismissed on failure, you should pass a custom errorHandler to the execute function that throws the error after handling it, or check the return value. Alternatively, you could pass an errorHandler option to execute that re-throws the error:

await useCommandStore().execute('Comfy-Desktop.CheckForUpdates', {
  errorHandler: (error) => {
    toastErrorHandler(error)
    throw error
  }
})

This ensures the catch block is reached when the command execution fails, preventing dismissToast from being called.

Suggested change
await useCommandStore().execute('Comfy-Desktop.CheckForUpdates')
dismissToast()
} catch (error) {
toastErrorHandler(error)
await useCommandStore().execute('Comfy-Desktop.CheckForUpdates', {
errorHandler: (error) => {
toastErrorHandler(error)
throw error
}
})
dismissToast()
} catch (error) {
// toastErrorHandler already called in errorHandler above

Copilot uses AI. Check for mistakes.
Comment on lines +209 to +232
it('shows an error toast if the desktop updater flow fails in Electron', async () => {
mockReleaseStore.recentRelease = {
version: '1.2.3',
content: '# Test Release'
} as ReleaseNote

const error = new Error('Command Comfy-Desktop.CheckForUpdates not found')
commandExecuteMock.mockRejectedValueOnce(error)

const mockWindowOpen = vi.fn()
Object.defineProperty(window, 'open', {
value: mockWindowOpen,
writable: true
})
;(window as any).electronAPI = {}

wrapper = mountComponent()
await wrapper.vm.handleUpdate()

expect(toastErrorHandlerMock).toHaveBeenCalledWith(error)
expect(mockWindowOpen).not.toHaveBeenCalled()

delete (window as any).electronAPI
})
Copy link

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test mocks commandExecuteMock.mockRejectedValueOnce(error), but in reality, commandStore.execute uses wrapWithErrorHandlingAsync internally, which catches errors and returns undefined instead of rejecting the promise. This means the test doesn't accurately reflect the actual behavior.

The test should either:

  1. Mock the scenario where the command doesn't exist (which does throw), or
  2. Update the component code to properly handle the case where the command exists but fails (by using a custom errorHandler that throws)

Currently, if the command exists but its execution fails, the component will call dismissToast() on line 183 instead of entering the catch block.

Copilot uses AI. Check for mistakes.
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
src/platform/updates/components/ReleaseNotificationToast.vue (1)

177-189: Critical: Toast dismissed even when update command fails.

A previous review comment correctly identified that commandStore.execute uses wrapWithErrorHandlingAsync internally, which catches errors and resolves successfully without re-throwing. This means dismissToast() on line 180 will be called even when the command execution fails, causing the user to lose the release notification toast with no way to retry.

This contradicts the PR description's claim that "Failures are surfaced via useErrorHandling" and breaks the expected user experience.

Apply the fix suggested in the previous review (pass a custom errorHandler that re-throws):

 const handleUpdate = async () => {
   if (isElectron()) {
-    await useCommandStore().execute('Comfy-Desktop.CheckForUpdates')
+    try {
+      await useCommandStore().execute('Comfy-Desktop.CheckForUpdates', {
+        errorHandler: (error) => {
+          // Let the command store show the error toast, then re-throw
+          // so we don't dismiss this release notification toast
+          throw error
+        }
+      })
-    dismissToast()
-    return
+      dismissToast()
+    } catch (error) {
+      // Error already displayed by command store; keep toast visible for retry
+      return
+    }
+    return
   }

   window.open(

Alternatively, if you want more control over the error message, import and use a dedicated error handler:

import { useErrorHandling } from '@/composables/useErrorHandling'

// In handleUpdate:
const { handleError } = useErrorHandling()
try {
  await useCommandStore().execute('Comfy-Desktop.CheckForUpdates')
  dismissToast()
} catch (error) {
  handleError(error, { title: 'Failed to check for updates' })
  // Don't dismiss toast so user can retry
}
📜 Review details

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5174dfb and 143bcb1.

📒 Files selected for processing (1)
  • src/platform/updates/components/ReleaseNotificationToast.vue (2 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/**/*.vue

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

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

Files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
src/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

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

Files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use <script setup lang="ts"> for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use withDefaults or runtime props declaration
Prefer useModel to separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using <style> blocks in Vue components
Use semantic Tailwind values from style.css theme instead of the dark: variant; for example, use bg-node-component-surface instead of dark: prefixes
Always use cn() utility from @/utils/tailwindUtil to merge Tailwind class names; do not use :class="[]" syntax
Use ref for reactive state in Vue Composition API components
Implement computed properties with computed() from Vue; avoid using a ref with a watch if a computed would work instead
Use watch and watchEffect for side effects in Vue components
Implement lifecycle hooks using onMounted, onUpdated, and other Vue lifecycle functions
Use provide/inject for dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundant computed, and prefer computed over watch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries in src/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead

Files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
**/*.{ts,tsx,js,jsx,vue,json}

📄 CodeRabbit inference engine (AGENTS.md)

Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see .prettierrc)

Files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; run pnpm format before committing
Use TypeScript for type safety; never use any type - use proper TypeScript types
Never use as any type assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nested if or for statements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones

Files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
🧠 Learnings (14)
📚 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/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use vue-i18n in composition API for any string literals; place new translation entries in `src/locales/en/main.json`

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use existing VueUse composables (such as useElementHover) instead of manually managing event listeners

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `provide`/`inject` for dependency injection; do not use dependency injection if a Store or shared composable would be simpler

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-12-09T20:22:23.620Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Utilize Vue 3's Teleport component when needed

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.vue
📚 Learning: 2025-11-24T19:47:34.324Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:34.324Z
Learning: Applies to src/**/*.{vue,ts,tsx} : Follow Vue 3 composition API style guide

Applied to files:

  • src/platform/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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/updates/components/ReleaseNotificationToast.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). (5)
  • GitHub Check: deploy-and-comment
  • GitHub Check: setup
  • GitHub Check: test
  • GitHub Check: collect
  • GitHub Check: lint-and-format

value: mockWindowOpen,
writable: true
})
;(window as any).electronAPI = {}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we could go some global typing for this so we don't use any

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will TAL later

wrapper = mountComponent()
await wrapper.vm.handleUpdate()

expect(toastErrorHandlerMock).toHaveBeenCalledWith(error)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
expect(toastErrorHandlerMock).toHaveBeenCalledWith(error)
expect(toastErrorHandlerMock).toHaveBeenCalledWith(error)
expect(toastErrorHandlerMock).toThrow(error)

https://vitest.dev/api/expect.html#tothrowerror

Copy link
Member Author

@benceruleanlu benceruleanlu Dec 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like the two are equivalent by intent?

Also, toastErrorHandlerMock is mocked, it cannot throw here, that is why toHaveBeenCalledWith(error) is used.

@christian-byrne christian-byrne assigned Myestery and unassigned Myestery Dec 20, 2025
@benceruleanlu benceruleanlu enabled auto-merge (squash) December 20, 2025 01:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M This PR changes 30-99 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Desktop: Replace UI “Update” actions with todesktop update flow (checkForUpdates/restartAndInstall)

4 participants