Mac Monotor

A lightweight system monitoring tool prototype for macOS, designed to detect CPU, memory, and network status in real-time(more would be added).

My first attempt at Vibe Coding(I used Chinese prompt so you could find Chinese comments among codes), documenting the complete process from technology stack selection to resolving underlying macOS environment conflicts.

Core Features

• Window Characteristics: Features a semi-transparent, frameless floating window design, supporting drag-and-drop positioning via the top area.
• Run Mode: Configured as an Accessory application to avoid occupying Dock space.
• Real-time Monitoring:
  • CPU: Displays usage percentage and logical cores.
  • Memory: Displays used capacity / total capacity (GB) and real-time usage percentage.
  • Network: Displays real-time download speed, supporting automatic switching between KB/s and MB/s.

Tech Stack

• Frontend: Pure native HTML / JavaScript (Vanilla)
• Backend: Rust + sysinfo library
• Framework: Tauri v2

Environment Dependencies

Before running the project, ensure the following are installed on your system:

1. Node.js and npm
2. Xcode Command Line Tools (xcode-select --install)
3. Rust compilation environment (rustup)

Project Initialization Steps

The project was generated using the official Tauri CLI. The specific configuration path is as follows:

1. Execute the creation command:

   npm create tauri-app@latest mac-sysmon -- --template vanilla

2. Select the following configurations based on the wizard:

   • Identifier: com.cherongtian.mac-sysmon
   • Choose which language to use for your frontend: TypeScript / JavaScript
   • Choose your package manager: npm
   • Choose your UI template: Vanilla (Pure native web page without frameworks)
   • Choose your UI flavor: JavaScript (To keep logic minimal)

3. Install dependencies and enter the directory:

   cd mac-sysmon
   npm install

Run and Debug

Start the development mode in the project root directory:

npm run tauri dev

Note: The current version displays the monitoring panel directly via the main window (visible: true). Due to macOS menu bar icon specification requirements and physical obstruction from the hardware "notch," the tray icon display is temporarily disabled. All data interaction is currently handled through the floating window on the screen.

Core Configuration Notes

• Permissions: Manually added the core:window:allow-start-dragging permission in capabilities/default.json to enable frameless window dragging.
• API Calls: Enabled withGlobalTauri in tauri.conf.json to support frontend listening for Rust backend data.
• Private API: Enabled macOSPrivateApi to support native transparency effects for the Webview.

Updates

Since the initial MVP, the following features and deep optimizations have been implemented:

1. Data Dimension Expansion

• Added Disk & Temperature Monitoring: Integrated disk_usage (total physical disk space usage) and temp (CPU temperature) via the sysinfo library.
• Frontend UI Completion: Added corresponding DOM elements in src/index.html and rendering logic in src/main.js to neatly display all 5 data points in the floating window.

2. Core Performance Optimizations (Background Residency)

• Frontend Sleep Mode (Visibility Detection): The Rust backend now checks is_visible() and is_minimized(). JSON data is only serialized and emitted to the frontend when the floating window is actively displayed on the screen. If minimized or hidden, the frontend sleeps entirely, ensuring near-zero CPU usage.
• Tray Debounce Rendering: Introduced a last_tray_title cache in the Rust loop. The application only sends tray redraw requests to macOS when the underlying data visually changes, significantly reducing system rendering overhead.

3. Interaction & Run Mode Refactoring (Dock + Tray Dual Mode)

• Dock Icon Restored: Removed the ActivationPolicy::Accessory restriction. The application icon now displays in the bottom Dock while seamlessly coexisting with the top-right menu bar tray.
• Native Animations: Rewrote the tray and Dock click logic. Clicking either the tray icon or the Dock icon now triggers macOS's native minimize() and unminimize() window behaviors, providing a fluid "suck/pop" scaling animation.

4. Visual & Developer Experience Cleanup

• Minimalist Tray Icon: Replaced lengthy dynamic text strings in the menu bar with a fixed, minimalist text symbol: ≥ ε) ≤ to prevent overlap with the MacBook "notch" and avoid visual clutter.
• Custom Application Icon: Replaced the default Tauri mascot with a custom logo. The custom image has been placed in the folder. To automatically generate and apply all required macOS application icons (for the Dock, .icns, etc.), run the following command in the project root:

  npm run tauri icon "path to your logo.png" (I left one sample in the folder)

• Zero Warnings: Cleaned up unused variables (e.g., renaming tray to _tray) and fixed Tauri v2 chain-calling type inference bugs to ensure a clean compilation output.