Add CLI Update Button to Settings Dashboard

[benzntech]

Summary

Adds a CLI update feature to the EasyCLI settings dashboard, allowing users to check for and install CLIProxyAPI updates directly from the GUI without returning to the login screen.

Changes

New Features

• Version Display: Shows current CLIProxyAPI version in the sidebar
• Check Update Button: Manual update checking with one click
• Update Dialog: Displays version comparison (current vs latest) before updating
• Progress Tracking: Real-time download progress with percentage and file size
• Auto-restart: Automatically restarts CLIProxyAPI process after successful update

Implementation Details

Frontend:

• Added version display and update button in sidebar (Local mode only)
• Created update confirmation dialog with version comparison
• Added progress dialog for download tracking
• Integrated with existing Tauri event system for real-time progress

Backend:

• Leverages existing check_version_and_download and download_cliproxyapi Tauri commands
• Reuses existing download infrastructure from login flow
• Supports proxy configuration from settings

Styling:

• Consistent with existing design system (purple accent color)
• Responsive layout with smooth transitions
• Progress bar with real-time updates

Files Changed

Added

• js/settings-update.js - Update logic, event handling, and UI management

Modified

• settings.html - Added UI elements (version display, update button, dialogs)
• css/settings.css - Styles for CLI version container and update components

Technical Notes

• Local Mode Only: Update feature only visible in Local mode (uses local-only class)
• Proxy Support: Respects proxy settings from localStorage
• Event-Driven: Listens to download-progress and download-status events from Tauri backend
• Version Source: Reads current version from localStorage.getItem('cliproxyapi-version')
• No Backend Changes: Reuses all existing Tauri commands and infrastructure

Testing Checklist

• Update button appears in Local mode sidebar
• Update button hidden in Remote mode
• Version display shows current CLI version correctly
• Clicking "Check Update" queries GitHub API for latest version
• Update dialog shows correct version comparison
• Download progress displays percentage and file sizes
• Update completes successfully and extracts files
• CLIProxyAPI process restarts after update
• Version display updates to show new version
• Proxy settings are respected during download
• Error messages display correctly on failure

Screenshots

(To be added during review)

Related Issues

(If applicable)

[gemini-code-assist]

Summary of Changes

Hello @benzntech, 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 integrates a comprehensive CLI update mechanism into the EasyCLI settings dashboard. The primary goal is to empower users to manage CLIProxyAPI updates seamlessly through the graphical interface, eliminating the need for manual intervention or navigating away from the settings. It provides a user-friendly experience by displaying the current version, offering a one-click update check, presenting a clear update dialog with version comparisons, and showing real-time download progress, culminating in an automatic restart of the CLIProxyAPI.

Highlights

• CLI Update Feature: Introduces a new feature to the EasyCLI settings dashboard, allowing users to check for and install CLIProxyAPI updates directly from the GUI.
• Version Display: The current CLIProxyAPI version is now displayed in the sidebar, providing immediate visibility to the user.
• Interactive Update Process: Includes a 'Check Update' button, an update dialog showing version comparison, real-time download progress tracking, and automatic restart of the CLIProxyAPI process after a successful update.
• Local Mode Only: The update functionality is specifically designed and visible only when the application is running in Local mode.
• Backend Reusability: Leverages existing Tauri commands and download infrastructure for checking versions and downloading updates, ensuring consistency and minimizing new backend code.

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 CLI update feature to the settings dashboard. The implementation is well-structured, leveraging Tauri events for communication between the frontend and backend. The changes in the HTML and CSS are clear and consistent with the existing design.

I've identified a few areas for improvement in the new js/settings-update.js file, primarily focusing on security, maintainability, and robustness. My main concerns are a potential Cross-Site Scripting (XSS) vulnerability and the use of inline styles, which I've addressed with a high-severity comment. I've also included a couple of medium-severity suggestions to improve error handling and code encapsulation.

Overall, this is a great addition to the application. Addressing these points will make the new feature more secure and maintainable.