feat(spx-gui): notification for new versions of XBuilder

[cn0809]

close: #2575

[gemini-code-assist]

Summary of Changes

Hello @cn0809, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a crucial user experience enhancement by providing timely notifications for new application versions. It ensures users are always on the latest build by gently prompting them to refresh their browser, thereby improving access to new features and bug fixes without manual intervention.

Highlights

• New Version Notification System: Implemented a new feature to automatically detect and notify users when a new version of the application is available, prompting them to reload the page for updates.
• ETag-based Update Checker: Developed a robust update checking mechanism that leverages HTTP ETag headers of the index.html file to efficiently determine if a new deployment has occurred, minimizing bandwidth usage.
• Asynchronous Component Loading: Integrated the UpdateNotification component asynchronously into the main application, ensuring it only loads when needed and improving initial page load performance.
• Comprehensive Unit Tests: Added a dedicated test suite for the update checker logic, covering various scenarios including ETag changes, no changes, fetch failures, and checker lifecycle management.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• spx-gui/src/App.vue
  • Integrated the new UpdateNotification component into the main application template.
  • Imported defineAsyncComponent to enable asynchronous loading of the update notification.
• spx-gui/src/components/app/UpdateNotification.vue
  • Added a new Vue component responsible for displaying a confirmation dialog when an application update is detected.
  • Implemented methods to show/hide the dialog and handle user actions like reloading or canceling.
• spx-gui/src/components/app/update-checker.test.ts
  • Created a new test file containing unit tests for the update-checker module.
  • Verified the functionality of checkForUpdates, startUpdateChecker, stopUpdateChecker, and reloadApp under various conditions.
• spx-gui/src/components/app/update-checker.ts
  • Introduced a new module containing the core logic for detecting application updates.
  • Implemented checkForUpdates to compare ETag headers and startUpdateChecker to periodically check for updates.
  • Added stopUpdateChecker to clear the update interval and reloadApp to refresh the browser.
• spx-gui/src/utils/env.ts
  • Exported a new constant isDev to indicate whether the application is running in development mode, used to control update checker behavior.

Activity

• No specific human activity (comments, reviews) has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a valuable feature for notifying users about new application versions. The implementation is well-structured, utilizing ETag checking for efficiency and asynchronous component loading. I've identified a logic error in event handling that could cause a function to be called twice, and a couple of opportunities to enhance code clarity and robustness, particularly concerning magic numbers and behavior in multi-tab environments. My specific comments are detailed below.

[Copilot]

Pull request overview

This PR implements an update notification system for XBuilder to detect and notify users when a new version of the application is deployed. The system checks for updates by comparing the ETag of the index.html file and prompts users to reload the page when an update is available.

Changes:

• Added update checker utility that periodically checks for new versions via ETag comparison
• Implemented UpdateNotification dialog component to prompt users to reload
• Added isDev flag to environment utilities to disable update checking in development mode

Reviewed changes

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

Show a summary per file

File	Description
spx-gui/src/utils/env.ts	Added isDev flag to identify development mode
spx-gui/src/components/app/update-checker.ts	Core update checking logic using ETag-based version detection
spx-gui/src/components/app/update-checker.test.ts	Comprehensive test suite for update checker functionality
spx-gui/src/components/app/UpdateNotification.vue	Dialog component that displays update notification and handles reload
spx-gui/src/App.vue	Integrated UpdateNotification component as async component

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[cn0809]

/review