Feature Implemented: Warning displayed when frontend version mismatches #4363

shivansh-gupta4 · 2025-07-06T08:31:26Z

Issue: [Feature Request] Display warning when frontend version mismatches backend requirements #4356

Created a store for automatic version compatibility check.
The dismissal state is persisted using hidden settings
A warning message component at the top of UI to show version mismatch warning with dismiss and update actions
Backend /system_stats API exposes new field required_frontend_version to compute version mismatches
Tests file for testing all the cases for the version compatibility.

┆Issue is synchronized with this Notion page by Unito

SrijitaBanerjee2002 · 2025-07-09T20:16:04Z

Hi Shivansh!
I was actually reviewing your code just now and have a suggestion for you. I saw your implementation for the version compatibility in your commit, however, there is already a good backend implementation of the same in the ComfyUI workspace.

Path is: ComfyUI/app/frontend_management.py

I would highly recommend checking the function check_frontend_version() and try to incorporate that into your implementation, for better code reusability.

Hope that helps!

Best,
Srijita

christian-byrne · 2025-07-10T02:16:30Z

This looks like a very high quality PR. I can review fully this week.

Should we make a corresponding PR to the backend to change this code so that it returns required_frontend_version https://github.com/comfyanonymous/ComfyUI/blob/1205afc708d963d160f38c1d6613a384ddf6c564/server.py#L526-L548. We could use the module mentioned by SrijitaBanerjee2002.

shivansh-gupta4 · 2025-07-10T03:42:16Z

Thank you for the detailed review and thoughtful feedback — I really appreciate it!

I'm glad to hear the implementation aligns with the expectations and integrates well with the existing architecture. I’ve also taken note of Srijita’s suggestion regarding reusing the check_frontend_version() logic from the backend. If the team decides to incorporate that, I’d be happy to refactor accordingly.

Please let me know if there are any adjustments or changes you'd like me to make — I’ll be ready to update the PR as needed.

Thanks again for the opportunity!

christian-byrne

Looking good!

Should we edit this code to include required_frontend_version https://github.com/comfyanonymous/ComfyUI/blob/1205afc708d963d160f38c1d6613a384ddf6c564/server.py#L526-L548? I can also review that PR once you make it!

src/components/dialog/content/VersionMismatchWarning.vue

src/stores/versionCompatibilityStore.ts

shivansh-gupta4 · 2025-07-11T16:48:49Z

Looking good!

Should we edit this code to include required_frontend_version https://github.com/comfyanonymous/ComfyUI/blob/1205afc708d963d160f38c1d6613a384ddf6c564/server.py#L526-L548? I can also review that PR once you make it!

@christian-byrne I have raised the PR comfyanonymous/ComfyUI#8875 to include the required_frontend_version parameter. Also, I will be waiting for a heads-up on the approach shared for the issues in the previously raised PR to shape it perfectly.

…r validation

shivansh-gupta4 · 2025-07-12T10:23:26Z

@christian-byrne I’ve committed the suggested improvements.

Additionally, I’ve used a computed property for currentVersionKey to prioritize performance. Though it have a small memory overhead but have better performance compared to recalculating via a helper function. Please let me know if this approach is correct or if I might be overlooking any important considerations.

Let me know if the current implementation aligns with your expectations — I’d be happy to make further adjustments if needed.

shivansh-gupta4 · 2025-07-19T17:07:33Z

@christian-byrne Can we run the workflow for this PR as well, so that if anything is breaking, I'll fix it.

github-actions · 2025-07-19T19:23:35Z

⚠️ Warnings

⚠️ Warning: Visual Documentation Missing

If this PR changes user-facing behavior, visual proof (screen recording or screenshot) is required. PRs without applicable visual documentation may not be reviewed until provided.
You can add it by:

GitHub: Drag & drop media directly into the PR description
YouTube: Include a link to a short demo

shivansh-gupta4 · 2025-07-19T20:08:20Z

@christian-byrne Thank you for running the workflows. Can you please guide me on how to solve the chromium errors. Will fix all the errors and commit the changes ASAP.

christian-byrne · 2025-07-19T21:54:58Z

It's possible that the chromium tests will fail if the backend PR is not merged yet and the frontend relies on it.

For ESLint and Prettier, please refer to:

General dev setup for ComfyUI_frontend: https://github.com/Comfy-Org/ComfyUI_frontend?tab=readme-ov-file#development, make sure to run npm run prepare to enable pre-commit

The dev scripts we have in package.json:

ComfyUI_frontend/package.json

Lines 10 to 29 in ed1d944

    
           "scripts": { 
        
             "dev": "vite", 
        
             "dev:electron": "vite --config vite.electron.config.mts", 
        
             "build": "npm run typecheck && vite build", 
        
             "build:types": "vite build --config vite.types.config.mts && node scripts/prepare-types.js", 
        
             "zipdist": "node scripts/zipdist.js", 
        
             "typecheck": "vue-tsc --noEmit", 
        
             "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}'", 
        
             "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}'", 
        
             "test:browser": "npx playwright test", 
        
             "test:unit": "vitest run tests-ui/tests", 
        
             "test:component": "vitest run src/components/", 
        
             "prepare": "husky || true", 
        
             "preview": "vite preview", 
        
             "lint": "eslint src", 
        
             "lint:fix": "eslint src --fix", 
        
             "locale": "lobe-i18n locale", 
        
             "collect-i18n": "playwright test --config=playwright.i18n.config.ts", 
        
             "json-schema": "tsx scripts/generate-json-schema.ts" 
        
           },

In particular, format, test:unit, test:component, lint:fix, build

Our CLAUDE.md if you use LLMs for developemnt, especially lines like these

ComfyUI_frontend/CLAUDE.md

Line 3 in ed1d944

    
           - After making code changes, follow this general process: (1) Create unit tests, component tests, browser tests (if appropriate for each), (2) run unit tests, component tests, and browser tests until passing, (3) run typecheck, lint, format (with prettier) -- you can use `npm run` command to see the scripts available, (4) check if any READMEs (including nested) or documentation needs to be updated, (5) Decide whether the changes are worth adding new content to the external documentation for (or would requires changes to the external documentation) at https://docs.comfy.org, then present your suggestion

…lacement of component in graphview.vue so that it only loads after the versions are fetched from api and corrected the UI of the banner to be more smooth with better UX

shivansh-gupta4 · 2025-07-20T19:33:04Z

@christian-byrne I have corrected the workflow errors encountered. Also, I am attaching the image for the warning banner to show how it will actually look, please ignore the backend version upgradation to 1.27.4, that was staged to display the update frontend button as well. I have tested it locally and the dismissal state is properly persisting across tab and window refreshes along with the proper fetching of particular version parameters from backend. I have made a commit 561bb00 which contains all the final corrections incorporating all the actions stated.

shivansh-gupta4 · 2025-07-21T16:14:06Z

@christian-byrne I have corrected the workflow errors encountered. Also, I am attaching the image for the warning banner to show how it will actually look, please ignore the backend version upgradation to 1.27.4, that was staged to display the update frontend button as well. I have tested it locally and the dismissal state is properly persisting across tab and window refreshes along with the proper fetching of particular version parameters from backend. I have made a commit 561bb00 which contains all the final corrections incorporating all the actions stated.

@christian-byrne Awaiting for your feedback. Please let me know if this aligns with your expectations. Also, it's been some time that I have been working on the same issue and I badly want to take new issues to contribute as well. So, can we have a final testing and close both the PRs. Thank you.

shivansh-gupta4 · 2025-07-22T17:19:54Z

@christian-byrne I understand you might have been busy, but please squeeze some time to review this. I have shared more details about the solution implemented. Awaiting for your feedback.

kevinpaik1 · 2025-07-23T23:36:51Z

Thank you for your contribution @shivansh-gupta4 !

…l and code cleanup - Fix dismissal persistence: warnings now automatically dismiss for 7 days when shown - Eliminate code duplication by consolidating key generation into computed properties - Replace Vue component with composable for better reusability and testability - Add comprehensive test coverage for both composable and store - Ensure clean separation of concerns between display logic and state management

…g system - Add comprehensive JSDoc documentation to composable - Replace localStorage with vueuse useStorage for better reactivity and client/server compatibility - Simplify whenever callback by removing unnecessary boolean parameter check - Update all tests to work with new useStorage-based storage format - Maintain full functionality while improving code quality and maintainability

- Consolidate all version mismatch dismissals into single 'comfy.versionMismatch.dismissals' key - Prevents localStorage clutter with multiple individual keys - Fix test suite to properly mock useStorage from VueUse instead of direct localStorage - Use reactive storage mocking for better test reliability and accuracy - All tests now pass with proper reactive behavior verification

- Replace custom version comparison with robust semver library - Fix bug where warnings showed when frontend meets/exceeds required version - Only warn when frontend is significantly ahead (>2 minor versions or major version mismatch) - Don't warn when there's no required version but frontend is newer than backend - Add comprehensive test coverage for all warning scenarios Co-Authored-By: Claude <noreply@anthropic.com>

- Remove isFrontendNewer logic - only warn when required version > installed version - Simplify warningMessage computed to only handle outdated case - Update tests to reflect the simplified behavior - Clean up unnecessary complexity in version comparison The warning system now only shows when the frontend is behind the required version, which is the only case where user action is needed. Co-Authored-By: Claude <noreply@anthropic.com>

shivansh-gupta4 · 2025-07-28T16:09:14Z

@christian-byrne Wanted to know what are the problems that are causing the CI playwright tests to fail. Is there anything more that needs to be fixed in this PR? Would love to help and make further changes if needed. Thank you.

socket-security · 2025-07-28T22:55:26Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@types/semver@7.7.0
	postcss@8.5.1

View full report

christian-byrne · 2025-07-28T22:59:55Z

Nope, this is all good, just going to switch to using the toast API and add a test!

…ssary code - Remove unused Comfy.VersionMismatch.DismissedVersion setting and schema - Remove unnecessary setTimeout wrapper in version compatibility initialization - Remove redundant comments about version compatibility setup The dismissal mechanism now uses localStorage directly via useStorage.

christian-byrne

LGTM!!

…es (#4363) Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com>

Feature Implemented: Warning displayed when frontend version mismatches

54b7fa3

shivansh-gupta4 requested review from Yorha4D, KarryCharon, shinshin86 and a team as code owners July 6, 2025 08:31

shivansh-gupta4 mentioned this pull request Jul 6, 2025

[Feature Request]: Display warning when frontend version mismatches backend requirements #4356

Open

1 task

christian-byrne reviewed Jul 11, 2025

View reviewed changes

shivansh-gupta4 mentioned this pull request Jul 11, 2025

Added parameter required_frontend_version in the /system_stats API response comfyanonymous/ComfyUI#8875

Merged

Created a computed for generating current_version_key and added semve…

e131621

…r validation

Merge branch 'main' into warning-when-frontend-version-mismatches

abe5c94

shivansh-gupta4 requested a review from christian-byrne July 19, 2025 17:08

shivansh-gupta4 and others added 2 commits July 20, 2025 11:48

Corrected the Eslint and Prettier errors

4f336f7

Corrected persisting logic in versioncompatibility store, corrected p…

561bb00

…lacement of component in graphview.vue so that it only loads after the versions are fetched from api and corrected the UI of the banner to be more smooth with better UX

Update VersionMismatchWarning.vue

6a36557

christian-byrne added 2 commits July 26, 2025 12:24

christian-byrne and others added 3 commits July 26, 2025 13:14

add browser test

aee5f8f

christian-byrne approved these changes Jul 29, 2025

View reviewed changes

christian-byrne merged commit 577cd23 into Comfy-Org:main Jul 29, 2025
12 checks passed

shivansh-gupta4 deleted the warning-when-frontend-version-mismatches branch July 29, 2025 03:31

christian-byrne added a commit that referenced this pull request Jul 29, 2025

Feature Implemented: Warning displayed when frontend version mismatch…

be20906

…es (#4363) Co-authored-by: bymyself <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com>

christian-byrne mentioned this pull request Jul 29, 2025

1.25.2 #4580

Merged

3 tasks

christian-byrne mentioned this pull request Aug 6, 2025

Replace all manual semver operations/utils with semver package #4787

Open

Feature Implemented: Warning displayed when frontend version mismatches #4363

Feature Implemented: Warning displayed when frontend version mismatches #4363

Uh oh!

Conversation

shivansh-gupta4 commented Jul 6, 2025 • edited by sync-by-unito bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue: [Feature Request] Display warning when frontend version mismatches backend requirements #4356

Uh oh!

SrijitaBanerjee2002 commented Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

christian-byrne commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shivansh-gupta4 commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

christian-byrne left a comment • 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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

shivansh-gupta4 commented Jul 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shivansh-gupta4 commented Jul 12, 2025

Uh oh!

shivansh-gupta4 commented Jul 19, 2025

Uh oh!

github-actions bot commented Jul 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ Warnings

Uh oh!

shivansh-gupta4 commented Jul 19, 2025

Uh oh!

christian-byrne commented Jul 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shivansh-gupta4 commented Jul 20, 2025

Uh oh!

shivansh-gupta4 commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shivansh-gupta4 commented Jul 22, 2025

Uh oh!

kevinpaik1 commented Jul 23, 2025

Uh oh!

shivansh-gupta4 commented Jul 28, 2025

Uh oh!

socket-security bot commented Jul 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

christian-byrne commented Jul 28, 2025

Uh oh!

christian-byrne left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

shivansh-gupta4 commented Jul 6, 2025 •

edited by sync-by-unito bot

Loading

SrijitaBanerjee2002 commented Jul 9, 2025 •

edited

Loading

christian-byrne commented Jul 10, 2025 •

edited

Loading

shivansh-gupta4 commented Jul 10, 2025 •

edited

Loading

christian-byrne left a comment •

edited

Loading

shivansh-gupta4 commented Jul 11, 2025 •

edited

Loading

github-actions bot commented Jul 19, 2025 •

edited

Loading

christian-byrne commented Jul 19, 2025 •

edited

Loading

shivansh-gupta4 commented Jul 21, 2025 •

edited

Loading

socket-security bot commented Jul 28, 2025 •

edited

Loading