# krisitvvv/ai-usage-monitor architecture

> Architecture diagram of the GitHub repository krisitvvv/ai-usage-monitor, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/krisitvvv/ai-usage-monitor
- Repository: https://github.com/krisitvvv/ai-usage-monitor

## Overview

AI Usage Monitor is an Electron desktop app for tracking model-provider balances and usage. Users add a provider and credentials, the Electron main process manages provider monitors and scheduled refreshes, collected results are cached and token usage is aggregated, then the workbench and provider-detail pages display the results. The UI also supports progress views and settings, including backup and cache actions. Provider coverage and major screens are documented in the README and tree; several IPC, monitor, and page implementations were not sampled, so uncertain internal links are omitted.

Main entry points: [`AI-Usage-Monitor-Desktop/electron/main.js`](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/main.js) (Main process), [`AI-Usage-Monitor-Desktop/electron/preload.js`](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/preload.js) (IPC bridge), [`AI-Usage-Monitor-Desktop/src/router/index.js`](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/router/index.js) (Page router), [`AI-Usage-Monitor-Desktop/electron/mimo-monitor.js`](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/mimo-monitor.js) (MIMO monitor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Desktop interface"]
  node_app["Vue app<br/>[App.vue]"]
  node_shell["Navigation shell<br/>[MainPage.vue]"]
  node_router["Page router<br/>[index.js]"]
  node_vendorform["Add provider<br/>[AddVendorModal.vue]"]
  node_workbench["Usage workbench<br/>[WorkbenchPage.vue]"]
  node_progress["Provider progress<br/>[ProgressPage.vue]"]
  node_detail["Provider detail"]
  node_settings["Settings and backup<br/>[SettingsPage.vue]"]
end

subgraph group_runtime["Electron runtime"]
  node_preload["IPC bridge<br/>[preload.js]"]
  node_main["Main process<br/>[main.js]"]
  node_scheduler["Refresh scheduler<br/>[scheduler.js]"]
end

subgraph group_collection["Usage collection"]
  node_collector["Usage collector<br/>[usage-collector.js]"]
  node_deepseek["DeepSeek monitor"]
  node_kimi["Kimi monitor<br/>[kimi-monitor.js]"]
  node_mimo["MIMO monitor<br/>[mimo-monitor.js]"]
  node_trae["Trae monitor<br/>[trae-monitor.js]"]
end

subgraph group_state["Local data"]
  node_localdata[("Usage and vendor files<br/>[usage-collector.js]")]
end

node_user(("Desktop user"))
node_deepseekapi{{"DeepSeek service"}}
node_kimiservice{{"Kimi service"}}
node_mimoservice{{"Xiaomi MIMO service"}}
node_traeservice{{"Trae CN service"}}

node_user -->|"uses"| node_shell
node_app -->|"renders"| node_shell
node_shell -->|"routes"| node_router
node_router -->|"opens"| node_workbench
node_router -->|"opens"| node_progress
node_router -->|"opens"| node_detail
node_router -->|"opens"| node_settings
node_vendorform -->|"saves provider"| node_preload
node_workbench -->|"requests stats"| node_preload
node_progress -->|"requests providers"| node_preload
node_detail -->|"requests details"| node_preload
node_settings -->|"requests settings"| node_preload
node_preload -->|"forwards IPC"| node_main
node_main -->|"registers monitors"| node_scheduler
node_main -->|"starts and stops"| node_deepseek
node_main -->|"starts and stops"| node_kimi
node_main -->|"starts and stops"| node_mimo
node_main -->|"starts and stops"| node_trae
node_deepseek -->|"reports results"| node_main
node_kimi -->|"reports results"| node_main
node_mimo -->|"reports results"| node_main
node_trae -->|"reports results"| node_main
node_main -->|"collects and queries"| node_collector
node_collector -->|"reads and writes"| node_localdata
node_main -->|"pushes updates"| node_workbench
node_main -.->|"fetches provider data"| node_deepseekapi
node_main -.->|"fetches balance"| node_kimiservice
node_mimo -.->|"reads console data"| node_mimoservice
node_trae -.->|"fetches provider data"| node_traeservice

click node_app "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/App.vue"
click node_shell "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/MainPage.vue"
click node_router "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/router/index.js"
click node_vendorform "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/AddVendorModal.vue"
click node_workbench "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/pages/WorkbenchPage.vue"
click node_progress "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/pages/ProgressPage.vue"
click node_detail "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/pages/ModelDetailPage.vue"
click node_settings "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/pages/SettingsPage.vue"
click node_preload "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/preload.js"
click node_main "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/main.js"
click node_scheduler "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/scheduler.js"
click node_collector "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/usage-collector.js"
click node_deepseek "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/deepseek-monitor.js"
click node_kimi "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/kimi-monitor.js"
click node_mimo "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/mimo-monitor.js"
click node_trae "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/trae-monitor.js"
click node_localdata "https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/usage-collector.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_shell,node_router,node_vendorform,node_workbench,node_progress,node_detail,node_settings,node_user toneBlue
class node_preload,node_main,node_scheduler toneAmber
class node_collector,node_deepseek,node_kimi,node_mimo,node_trae toneMint
class node_localdata toneRose
class node_deepseekapi,node_kimiservice,node_mimoservice,node_traeservice toneIndigo
```

## Components

### Desktop interface

- [Vue app](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/App.vue): `AI-Usage-Monitor-Desktop/src/App.vue`
- [Navigation shell](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/MainPage.vue): `AI-Usage-Monitor-Desktop/src/components/MainPage.vue`
- [Page router](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/router/index.js): `AI-Usage-Monitor-Desktop/src/router/index.js`
- [Add provider](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/AddVendorModal.vue): `AI-Usage-Monitor-Desktop/src/components/AddVendorModal.vue`
- [Usage workbench](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/pages/WorkbenchPage.vue): `AI-Usage-Monitor-Desktop/src/components/pages/WorkbenchPage.vue`
- [Provider progress](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/pages/ProgressPage.vue): `AI-Usage-Monitor-Desktop/src/components/pages/ProgressPage.vue`
- [Provider detail](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/pages/ModelDetailPage.vue): `AI-Usage-Monitor-Desktop/src/components/pages/ModelDetailPage.vue`
- [Settings and backup](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/src/components/pages/SettingsPage.vue): `AI-Usage-Monitor-Desktop/src/components/pages/SettingsPage.vue`

### Electron runtime

- [IPC bridge](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/preload.js): `AI-Usage-Monitor-Desktop/electron/preload.js`
- [Main process](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/main.js): `AI-Usage-Monitor-Desktop/electron/main.js`
- [Refresh scheduler](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/scheduler.js): `AI-Usage-Monitor-Desktop/electron/scheduler.js`

### Usage collection

- [Usage collector](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/usage-collector.js): `AI-Usage-Monitor-Desktop/electron/usage-collector.js`
- [DeepSeek monitor](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/deepseek-monitor.js): `AI-Usage-Monitor-Desktop/electron/deepseek-monitor.js`
- [Kimi monitor](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/kimi-monitor.js): `AI-Usage-Monitor-Desktop/electron/kimi-monitor.js`
- [MIMO monitor](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/mimo-monitor.js): `AI-Usage-Monitor-Desktop/electron/mimo-monitor.js`
- [Trae monitor](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/trae-monitor.js): `AI-Usage-Monitor-Desktop/electron/trae-monitor.js`

### Local data

- [Usage and vendor files](https://github.com/krisitvvv/ai-usage-monitor/blob/main/AI-Usage-Monitor-Desktop/electron/usage-collector.js): `AI-Usage-Monitor-Desktop/electron/usage-collector.js`

### Other components

- **Desktop user**
- **DeepSeek service**
- **Kimi service**
- **Xiaomi MIMO service**
- **Trae CN service**

## Connections

- Desktop user → Navigation shell: uses
- Vue app → Navigation shell: renders
- Navigation shell → Page router: routes
- Page router → Usage workbench: opens
- Page router → Provider progress: opens
- Page router → Provider detail: opens
- Page router → Settings and backup: opens
- Add provider → IPC bridge: saves provider
- Usage workbench → IPC bridge: requests stats
- Provider progress → IPC bridge: requests providers
- Provider detail → IPC bridge: requests details
- Settings and backup → IPC bridge: requests settings
- IPC bridge → Main process: forwards IPC
- Main process → Refresh scheduler: registers monitors
- Main process → DeepSeek monitor: starts and stops
- Main process → Kimi monitor: starts and stops
- Main process → MIMO monitor: starts and stops
- Main process → Trae monitor: starts and stops
- DeepSeek monitor → Main process: reports results
- Kimi monitor → Main process: reports results
- MIMO monitor → Main process: reports results
- Trae monitor → Main process: reports results
- Main process → Usage collector: collects and queries
- Usage collector → Usage and vendor files: reads and writes
- Main process → Usage workbench: pushes updates
- Main process → DeepSeek service: fetches provider data
- Main process → Kimi service: fetches balance
- MIMO monitor → Xiaomi MIMO service: reads console data
- Trae monitor → Trae CN service: fetches provider data