feat: enhance server stats widgets and fix TypeScript/ESLint errors #394

Merged
ZacharyZcR merged 50 commits from feature-server-stats-customization into dev-1.8.0 2025-10-10 03:48:34 +00:00
ZacharyZcR commented 2025-10-09 15:12:21 +00:00 (Migrated from github.com)

Summary

This PR enhances the server statistics visualization system with customizable widgets and resolves numerous TypeScript and ESLint issues across the codebase.

Features

Server Statistics Enhancements

  • New Widgets: Added System, Uptime, Network, and Processes monitoring widgets
  • Customizable Layout: Implemented widget size customization with responsive chart visualizations
  • Improved UX: Enhanced widget styling and user experience consistency
  • Widget System Refactor: Simplified and streamlined the server stats widget architecture
  • Edit Mode: Fixed layout saving behavior when exiting edit mode

Code Quality Improvements

  • TypeScript Errors: Resolved all TypeScript compilation errors

    • Fixed type assertions in database operations
    • Improved type safety in authentication and encryption modules
    • Enhanced type definitions for API routes and SSH operations
  • ESLint Fixes: Fixed 192+ ESLint issues including:

    • @typescript-eslint/no-unused-vars (31 instances)
    • @typescript-eslint/no-explicit-any in backend (~22 instances)
    • @typescript-eslint/no-explicit-any in frontend (~60 instances)
    • prefer-const errors (5 instances)
    • no-empty-object-type and rules-of-hooks errors

Testing

  • Frontend builds successfully
  • Backend compiles without errors
  • Application runs successfully in development mode
  • API endpoints respond correctly

Server Stats Features:

  • feat: add customizable widget sizes with chart visualizations
  • feat: add system, uptime, network and processes widgets
  • refactor: simplify server stats widget system
  • refactor: improve widget styling and UX consistency

Code Quality:

  • fix: resolve TypeScript and ESLint errors across the codebase
  • fix: resolve unused variables in backend utils
  • fix: replace explicit any types with proper TypeScript types
## Summary This PR enhances the server statistics visualization system with customizable widgets and resolves numerous TypeScript and ESLint issues across the codebase. ## Features ### Server Statistics Enhancements - **New Widgets**: Added System, Uptime, Network, and Processes monitoring widgets - **Customizable Layout**: Implemented widget size customization with responsive chart visualizations - **Improved UX**: Enhanced widget styling and user experience consistency - **Widget System Refactor**: Simplified and streamlined the server stats widget architecture - **Edit Mode**: Fixed layout saving behavior when exiting edit mode ### Code Quality Improvements - **TypeScript Errors**: Resolved all TypeScript compilation errors - Fixed type assertions in database operations - Improved type safety in authentication and encryption modules - Enhanced type definitions for API routes and SSH operations - **ESLint Fixes**: Fixed 192+ ESLint issues including: - @typescript-eslint/no-unused-vars (31 instances) - @typescript-eslint/no-explicit-any in backend (~22 instances) - @typescript-eslint/no-explicit-any in frontend (~60 instances) - prefer-const errors (5 instances) - no-empty-object-type and rules-of-hooks errors ## Testing - ✅ Frontend builds successfully - ✅ Backend compiles without errors - ✅ Application runs successfully in development mode - ✅ API endpoints respond correctly ## Related Commits Server Stats Features: - feat: add customizable widget sizes with chart visualizations - feat: add system, uptime, network and processes widgets - refactor: simplify server stats widget system - refactor: improve widget styling and UX consistency Code Quality: - fix: resolve TypeScript and ESLint errors across the codebase - fix: resolve unused variables in backend utils - fix: replace explicit any types with proper TypeScript types
gemini-code-assist[bot] commented 2025-10-09 15:33:04 +00:00 (Migrated from github.com)

Summary of Changes

Hello @ZacharyZcR, I'm Gemini Code Assist1 ! 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 significantly upgrades the server statistics visualization system by adding new, customizable widgets and refining existing ones for a better user experience. Concurrently, it undertakes a comprehensive code quality initiative, eliminating numerous TypeScript errors and ESLint warnings to enhance the stability, maintainability, and type safety of the codebase.

Highlights

  • Server Statistics Enhancements: Introduced new monitoring widgets for System, Uptime, Network, and Processes. Implemented customizable widget sizes with responsive chart visualizations and improved overall user experience consistency. The server stats widget architecture has also been refactored for simplicity and efficiency, and a bug related to layout saving in edit mode was fixed.
  • Code Quality Improvements: Resolved all TypeScript compilation errors, including fixing type assertions in database operations, enhancing type safety in authentication and encryption modules, and improving type definitions for API routes and SSH operations. Over 192 ESLint issues were also addressed, covering unused variables, explicit any types in both backend and frontend, prefer-const errors, and React Hooks rules.
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.


  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. ↩︎

## Summary of Changes Hello @ZacharyZcR, I'm Gemini Code Assist[^1]! 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 significantly upgrades the server statistics visualization system by adding new, customizable widgets and refining existing ones for a better user experience. Concurrently, it undertakes a comprehensive code quality initiative, eliminating numerous TypeScript errors and ESLint warnings to enhance the stability, maintainability, and type safety of the codebase. ### Highlights * **Server Statistics Enhancements**: Introduced new monitoring widgets for System, Uptime, Network, and Processes. Implemented customizable widget sizes with responsive chart visualizations and improved overall user experience consistency. The server stats widget architecture has also been refactored for simplicity and efficiency, and a bug related to layout saving in edit mode was fixed. * **Code Quality Improvements**: Resolved all TypeScript compilation errors, including fixing type assertions in database operations, enhancing type safety in authentication and encryption modules, and improving type definitions for API routes and SSH operations. Over 192 ESLint issues were also addressed, covering unused variables, explicit any types in both backend and frontend, `prefer-const` errors, and React Hooks rules. <details> <summary><b>Using Gemini Code Assist</b></summary> <br> The full guide for Gemini Code Assist can be found on our [documentation page](https://developers.google.com/gemini-code-assist/docs/review-github-code), here are some quick tips. <b>Invoking Gemini</b> 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. <b>Customization</b> 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](https://developers.google.com/gemini-code-assist/docs/customize-gemini-behavior-github). <b>Limitations & Feedback</b> Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with :thumbsup: and :thumbsdown: 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](https://google.qualtrics.com/jfe/form/SV_2cyuGuTWsEw84yG). <b>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](https://cloud.google.com/products/gemini/code-assist).</b> </details> [^1]: Review the [Privacy Notices](https://policies.google.com/privacy), [Generative AI Prohibited Use Policy](https://policies.google.com/terms/generative-ai/use-policy), [Terms of Service](https://policies.google.com/terms), and learn how to configure Gemini Code Assist in GitHub [here](https://developers.google.com/gemini-code-assist/docs/customize-gemini-behavior-github). Gemini can make mistakes, so double check it and [use code with caution](https://support.google.com/legal/answer/13505487).
gemini-code-assist[bot] (Migrated from github.com) reviewed 2025-10-09 15:36:39 +00:00
gemini-code-assist[bot] (Migrated from github.com) left a comment

Code Review

This is an excellent pull request that introduces valuable new features for server statistics and significantly improves code quality by addressing numerous TypeScript and ESLint issues. The move towards stricter typing with generics and specific interfaces is a great step forward for maintainability. I've identified a couple of areas that could be further improved.

## Code Review This is an excellent pull request that introduces valuable new features for server statistics and significantly improves code quality by addressing numerous TypeScript and ESLint issues. The move towards stricter typing with generics and specific interfaces is a great step forward for maintainability. I've identified a couple of areas that could be further improved.
gemini-code-assist[bot] (Migrated from github.com) commented 2025-10-09 15:36:39 +00:00

high

The env property has been removed from the connectConfig object. This property is crucial for setting up the correct terminal environment on the remote server, including variables like TERM and LANG. Its absence can lead to rendering issues, such as incorrect colors or character display. This appears to be a regression that could negatively impact user experience.

      readyTimeout: 60000,
      env: {
        TERM: "xterm-256color",
        LANG: "en_US.UTF-8",
        LC_ALL: "en_US.UTF-8",
        LC_CTYPE: "en_US.UTF-8",
        LC_MESSAGES: "en_US.UTF-8",
        LC_MONETARY: "en_US.UTF-8",
        LC_NUMERIC: "en_US.UTF-8",
        LC_TIME: "en_US.UTF-8",
        LC_COLLATE: "en_US.UTF-8",
        COLORTERM: "truecolor",
      },
![high](https://www.gstatic.com/codereviewagent/high-priority.svg) The `env` property has been removed from the `connectConfig` object. This property is crucial for setting up the correct terminal environment on the remote server, including variables like `TERM` and `LANG`. Its absence can lead to rendering issues, such as incorrect colors or character display. This appears to be a regression that could negatively impact user experience. ```typescript readyTimeout: 60000, env: { TERM: "xterm-256color", LANG: "en_US.UTF-8", LC_ALL: "en_US.UTF-8", LC_CTYPE: "en_US.UTF-8", LC_MESSAGES: "en_US.UTF-8", LC_MONETARY: "en_US.UTF-8", LC_NUMERIC: "en_US.UTF-8", LC_TIME: "en_US.UTF-8", LC_COLLATE: "en_US.UTF-8", COLORTERM: "truecolor", }, ```
@@ -261,8 +264,8 @@ export interface TabContextTab {
| "file_manager"
gemini-code-assist[bot] (Migrated from github.com) commented 2025-10-09 15:36:39 +00:00

medium

The type for terminalRef in the TabContextTab interface has been changed to React.RefObject<HTMLElement>, which is incorrect. This ref is used for an imperative handle on the Terminal component, which exposes methods like fit() and sendInput(). Using HTMLElement loses type safety and could lead to runtime errors.

A TerminalHandle interface is defined in src/backend/ssh/terminal.ts. It would be best to move this interface to a shared types file (like this one) and use React.RefObject<TerminalHandle> here and in other related components.

  terminalRef?: React.RefObject<TerminalHandle>;
![medium](https://www.gstatic.com/codereviewagent/medium-priority.svg) The type for `terminalRef` in the `TabContextTab` interface has been changed to `React.RefObject<HTMLElement>`, which is incorrect. This ref is used for an imperative handle on the `Terminal` component, which exposes methods like `fit()` and `sendInput()`. Using `HTMLElement` loses type safety and could lead to runtime errors. A `TerminalHandle` interface is defined in `src/backend/ssh/terminal.ts`. It would be best to move this interface to a shared types file (like this one) and use `React.RefObject<TerminalHandle>` here and in other related components. ```suggestion terminalRef?: React.RefObject<TerminalHandle>; ```
Sign in to join this conversation.