This section documents the network monitoring subsystem of Clash Verge Rev: the set of pages and components that display real-time and historical data flowing through the Mihomo proxy core. This includes active connections, proxy logs, routing rules, and live traffic/memory statistics.
For configuration of the Mihomo core and proxy settings, see Clash Configuration Backend. For proxy group display and delay testing, see Proxy Groups and Rendering.
The network monitoring system is divided into four functional areas, each with a dedicated page and set of supporting components:
| Area | Entry Point | Child Page |
|---|---|---|
| Active/closed connections with per-connection detail | src/pages/connections.tsx | Connections Monitor |
| Proxy core log output with filtering | src/pages/logs.tsx | Logs Viewer |
| Currently active routing rules and rule providers | src/pages/rules.tsx | Rules Display |
| Real-time traffic graph, session totals, memory usage | src/components/layout/layout-traffic.tsx, src/components/home/enhanced-traffic-stats.tsx | Traffic Graph and Home Dashboard |
An additional UnlockPage (src/pages/unlock.tsx) sits in this section; it checks whether streaming media services (Netflix, Disney+, etc.) are accessible through the current proxy using the check_media_unlock backend command.
Diagram: Network Monitoring Pages and Their Core Components
Sources: src/pages/connections.tsx27-34 src/pages/logs.tsx19-21 src/pages/rules.tsx13-16 src/components/layout/layout-traffic.tsx17-20 src/components/home/enhanced-traffic-stats.tsx28-32
All monitoring data originates from the Mihomo API (exposed via the tauri-plugin-mihomo-api Tauri plugin) and is consumed through a set of SWR-backed hooks. Pages read from these hooks; they do not fetch data directly.
Diagram: Data Flow from Mihomo API to Monitoring Components
Sources: src/hooks/use-log-data.ts48-54 src/components/layout/layout-traffic.tsx30-35 src/components/home/enhanced-traffic-stats.tsx152-162 src/pages/connections.tsx84-87 src/pages/rules.tsx20-24
ConnectionsPage (src/pages/connections.tsx) shows all active and closed proxy connections. It supports two display layouts:
ConnectionItem components inside a VirtualList src/pages/connections.tsx25-31ConnectionTable src/pages/connections.tsx32The page supports filtering by host, destination IP, or process name src/pages/connections.tsx101-106 The page header shows cumulative download/upload totals and a "Close All" button that calls closeAllConnections() from the API plugin src/pages/connections.tsx113-170
See Connections Monitor for full details.
LogPage (src/pages/logs.tsx) streams log output from Mihomo. Key controls:
all, debug, info, warn, or err src/pages/logs.tsx163-174logOrder state src/pages/logs.tsx82-87enableLog state persisted through useClashLog src/pages/logs.tsx78-80BaseSearchBox src/pages/logs.tsx175-180LogItem renders each log entry and applies highlighting matched text using the provided searchState src/pages/logs.tsx189
See Logs Viewer for full details.
RulesPage (src/pages/rules.tsx) renders the active rule set fetched from the Mihomo core, using the rules array from useAppData src/pages/rules.tsx20 Each entry is displayed by RuleItem, which shows the rule payload and metadata.
A ProviderButton in the page header provides access to rule providers and their update functionality src/pages/rules.tsx67 The page includes a ScrollTopButton for quick navigation of long rule lists src/pages/rules.tsx94
See Rules Display for full details.
LayoutTraffic (src/components/layout/layout-traffic.tsx) is the compact traffic widget embedded in the application sidebar. It displays upload/download speeds and optional memory usage src/components/layout/layout-traffic.tsx88-143
EnhancedTrafficStats (src/components/home/enhanced-traffic-stats.tsx) is the larger dashboard widget on the home page. It includes:
EnhancedCanvasTrafficGraph src/components/home/enhanced-traffic-stats.tsx194-214The UnlockPage (src/pages/unlock.tsx) probes streaming service accessibility (Netflix, Disney+, etc.) by invoking the check_media_unlock backend command src/pages/unlock.tsx236
See Traffic Graph and Home Dashboard for full details.
| Utility | Location | Usage |
|---|---|---|
parseTraffic | src/utils/parse-traffic.ts | Converts raw byte values to human-readable strings (KB, MB, GB) src/utils/parse-traffic.ts |
useVisibility | src/hooks/use-visibility.ts | Pauses data polling when the page/window is not visible src/hooks/use-visibility.ts1-30 |
BaseSearchBox | src/components/base/ | Search input used in connections, logs, and rules pages src/pages/logs.tsx175 |
VirtualList | src/components/base/ | Virtualized rendering for long lists of connections, logs, and rules src/pages/rules.tsx86 |
Sources: src/hooks/use-visibility.ts1-30 src/pages/connections.tsx229 src/pages/logs.tsx175 src/pages/rules.tsx86 src/utils/parse-traffic.ts1-35