Feature Implemented: Warning displayed when frontend version mismatches

[shivansh-gupta4]

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]

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]

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]

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!

[shivansh-gupta4]

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.

[shivansh-gupta4]

@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]

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

[github-actions]

⚠️ Warnings

⚠️ Warning: E2E Test Coverage Missing

If this PR modifies behavior that can be covered by browser-based E2E tests, those tests are required. PRs lacking applicable test coverage may not be reviewed until added. Please add or update browser tests to ensure code quality and prevent regressions.

⚠️ 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]

@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]

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

[shivansh-gupta4]

@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]

@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]

@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]

Thank you for your contribution @shivansh-gupta4 !