# muddyblack/kde-glassy-system-monitor architecture

> Architecture diagram of the GitHub repository muddyblack/kde-glassy-system-monitor, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/muddyblack/kde-glassy-system-monitor
- Repository: https://github.com/muddyblack/kde-glassy-system-monitor

## Overview

Glassy System Monitor is a configurable desktop system-monitor widget for KDE Plasma and Hyprland. Users choose and arrange metric sections in a studio, preview looks using live or demo data, and view the resulting dashboard; a separate network window explores connections, traffic history, interfaces, containers, and threat checks. The graph preserves those distinct product areas and the probe, model, configuration, and chart layers. Many UI files are not excerpted, so documented capabilities are represented at subsystem level and uncertain implementation links are omitted.

Main entry points: [`package/contents/ui/studio/Studio.qml`](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/Studio.qml) (Studio editor), [`package/contents/ui/network/NetworkWindow.qml`](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/NetworkWindow.qml) (Network window), [`package/contents/ui/MonitorView.qml`](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/MonitorView.qml) (Monitor widget), [`package/contents/ui/Probes.js`](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/Probes.js) (System probes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_dashboard["Monitor dashboard"]
  node_monitor["Monitor widget<br/>[MonitorView.qml]"]
  node_sections["Section catalogue<br/>[Sections.js]"]
  node_metric_sections["Metric sections"]
end

subgraph group_telemetry["Metrics and probes"]
  node_core["Monitor core<br/>[MonitorCore.qml]"]
  node_probes["System probes<br/>[Probes.js]"]
  node_sensor_backend["Sensor backend<br/>[SensorBackend.qml]"]
  node_sensor_readings["Sensor readings<br/>[SensorReadings.qml]"]
  node_demo["Demo data<br/>[DemoData.js]"]
end

subgraph group_studio["Configuration studio"]
  node_studio["Studio editor<br/>[Studio.qml]"]
  node_schema["Settings schema<br/>[Schema.js]"]
  node_looks["Looks and presets<br/>[Looks.js]"]
  node_preview["Live preview<br/>[PreviewPane.qml]"]
  node_hypr_config["Hyprland config<br/>[Configuration.js]"]
end

subgraph group_network["Network analysis"]
  node_network_window["Network window<br/>[NetworkWindow.qml]"]
  node_network_service["Network service<br/>[NetworkService.qml]"]
  node_net_model["Connection model<br/>[NetModel.js]"]
  node_history["Traffic history<br/>[NetHistory.js]"]
  node_threats["Threat checks<br/>[Threats.js]"]
  node_wireshark["Capture integration<br/>[Wireshark.js]"]
  node_browser_tabs["Browser tab parser<br/>[BrowserTabs.mjs]"]
end

subgraph group_visuals["Charts and appearance"]
  node_chart["Chart renderer<br/>[Diagram.qml]"]
  node_chart_data["Chart data<br/>[DiagramData.js]"]
  node_theme["Studio theme<br/>[Theme.js]"]
end

node_user(("Desktop user"))
node_blocklists[("Public blocklists")]
node_wireshark_app["Wireshark"]
node_host["System and OS"]

node_user -->|"views"| node_monitor
node_user -->|"configures"| node_studio
node_studio -.->|"previews"| node_preview
node_preview -.->|"renders"| node_monitor
node_monitor -->|"selects sections"| node_sections
node_sections -.->|"defines"| node_metric_sections
node_monitor -.->|"reads metrics"| node_core
node_core -.->|"uses probes"| node_probes
node_core -.->|"reads sensors"| node_sensor_backend
node_sensor_backend -.->|"provides readings"| node_sensor_readings
node_demo -.->|"feeds demo data"| node_preview
node_studio -->|"edits settings"| node_schema
node_studio -.->|"selects looks"| node_looks
node_hypr_config -->|"uses look keys"| node_looks
node_hypr_config -->|"parses sections"| node_sections
node_user -->|"opens"| node_network_window
node_network_window -.->|"requests network data"| node_network_service
node_network_service -.->|"updates model"| node_net_model
node_net_model -->|"uses probe helpers"| node_probes
node_net_model -->|"uses parser"| node_browser_tabs
node_network_window -.->|"records traffic"| node_history
node_network_window -.->|"shows checks"| node_threats
node_threats -->|"uses probe helpers"| node_probes
node_threats -.->|"optionally fetches"| node_blocklists
node_network_window -.->|"offers capture"| node_wireshark
node_wireshark -.->|"launches"| node_wireshark_app
node_monitor -.->|"renders charts"| node_chart
node_chart -.->|"uses data helpers"| node_chart_data
node_studio -.->|"uses palette"| node_theme
node_probes -.->|"queries system"| node_host

click node_monitor "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/MonitorView.qml"
click node_sections "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/Sections.js"
click node_metric_sections "https://github.com/muddyblack/kde-glassy-system-monitor/tree/master/package/contents/ui"
click node_core "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/MonitorCore.qml"
click node_probes "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/Probes.js"
click node_sensor_backend "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/SensorBackend.qml"
click node_sensor_readings "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/SensorReadings.qml"
click node_demo "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/DemoData.js"
click node_studio "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/Studio.qml"
click node_schema "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/Schema.js"
click node_looks "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/Looks.js"
click node_preview "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/PreviewPane.qml"
click node_hypr_config "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/hyprland/Configuration.js"
click node_network_window "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/NetworkWindow.qml"
click node_network_service "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/NetworkService.qml"
click node_net_model "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/NetModel.js"
click node_history "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/NetHistory.js"
click node_threats "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/Threats.js"
click node_wireshark "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/Wireshark.js"
click node_browser_tabs "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/BrowserTabs.mjs"
click node_chart "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/diagram/Diagram.qml"
click node_chart_data "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/diagram/DiagramData.js"
click node_theme "https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/Theme.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_monitor,node_sections,node_metric_sections,node_user toneBlue
class node_core,node_probes,node_sensor_backend,node_sensor_readings,node_demo,node_blocklists toneAmber
class node_studio,node_schema,node_looks,node_preview,node_hypr_config toneMint
class node_network_window,node_network_service,node_net_model,node_history,node_threats,node_wireshark,node_browser_tabs toneRose
class node_chart,node_chart_data,node_theme,node_wireshark_app,node_host toneIndigo
```

## Components

### Monitor dashboard

- [Monitor widget](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/MonitorView.qml): `package/contents/ui/MonitorView.qml`
- [Section catalogue](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/Sections.js): `package/contents/ui/Sections.js`
- [Metric sections](https://github.com/muddyblack/kde-glassy-system-monitor/tree/master/package/contents/ui): `package/contents/ui`

### Metrics and probes

- [Monitor core](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/MonitorCore.qml): `package/contents/ui/MonitorCore.qml`
- [System probes](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/Probes.js): `package/contents/ui/Probes.js`
- [Sensor backend](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/SensorBackend.qml): `package/contents/ui/SensorBackend.qml`
- [Sensor readings](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/SensorReadings.qml): `package/contents/ui/SensorReadings.qml`
- [Demo data](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/DemoData.js): `package/contents/ui/DemoData.js`

### Configuration studio

- [Studio editor](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/Studio.qml): `package/contents/ui/studio/Studio.qml`
- [Settings schema](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/Schema.js): `package/contents/ui/studio/Schema.js`
- [Looks and presets](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/Looks.js): `package/contents/ui/studio/Looks.js`
- [Live preview](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/PreviewPane.qml): `package/contents/ui/studio/PreviewPane.qml`
- [Hyprland config](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/hyprland/Configuration.js): `hyprland/Configuration.js`

### Network analysis

- [Network window](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/NetworkWindow.qml): `package/contents/ui/network/NetworkWindow.qml`
- [Network service](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/NetworkService.qml): `package/contents/ui/network/NetworkService.qml`
- [Connection model](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/NetModel.js): `package/contents/ui/network/NetModel.js`
- [Traffic history](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/NetHistory.js): `package/contents/ui/network/NetHistory.js`
- [Threat checks](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/Threats.js): `package/contents/ui/network/Threats.js`
- [Capture integration](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/Wireshark.js): `package/contents/ui/network/Wireshark.js`
- [Browser tab parser](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/network/BrowserTabs.mjs): `package/contents/ui/network/BrowserTabs.mjs`

### Charts and appearance

- [Chart renderer](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/diagram/Diagram.qml): `package/contents/ui/diagram/Diagram.qml`
- [Chart data](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/diagram/DiagramData.js): `package/contents/ui/diagram/DiagramData.js`
- [Studio theme](https://github.com/muddyblack/kde-glassy-system-monitor/blob/master/package/contents/ui/studio/Theme.js): `package/contents/ui/studio/Theme.js`

### Other components

- **Desktop user**
- **Public blocklists**
- **Wireshark**
- **System and OS**

## Connections

- Desktop user → Monitor widget: views (evidence: `README.md`)
- Desktop user → Studio editor: configures (evidence: `README.md`)
- Studio editor → Live preview: previews
- Live preview → Monitor widget: renders
- Monitor widget → Section catalogue: selects sections
- Section catalogue → Metric sections: defines (evidence: `package/contents/ui/studio/Schema.js`)
- Monitor widget → Monitor core: reads metrics
- Monitor core → System probes: uses probes
- Monitor core → Sensor backend: reads sensors
- Sensor backend → Sensor readings: provides readings
- Demo data → Live preview: feeds demo data
- Studio editor → Settings schema: edits settings (evidence: `package/contents/ui/studio/Schema.js`)
- Studio editor → Looks and presets: selects looks
- Hyprland config → Looks and presets: uses look keys (evidence: `hyprland/Configuration.js`)
- Hyprland config → Section catalogue: parses sections (evidence: `hyprland/Configuration.js`)
- Desktop user → Network window: opens (evidence: `README.md`)
- Network window → Network service: requests network data
- Network service → Connection model: updates model
- Connection model → System probes: uses probe helpers (evidence: `package/contents/ui/network/NetModel.js`)
- Connection model → Browser tab parser: uses parser (evidence: `package/contents/ui/network/NetModel.js`)
- Network window → Traffic history: records traffic
- Network window → Threat checks: shows checks
- Threat checks → System probes: uses probe helpers (evidence: `package/contents/ui/network/Threats.js`)
- Threat checks → Public blocklists: optionally fetches (evidence: `README.md`)
- Network window → Capture integration: offers capture
- Capture integration → Wireshark: launches (evidence: `README.md`)
- Monitor widget → Chart renderer: renders charts
- Chart renderer → Chart data: uses data helpers
- Studio editor → Studio theme: uses palette
- System probes → System and OS: queries system