# galaxy-s10/billd-desk architecture

> Architecture diagram of the GitHub repository galaxy-s10/billd-desk, 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/galaxy-s10/billd-desk
- Repository: https://github.com/galaxy-s10/billd-desk

## Overview

BilldDesk Pro is a cross-platform remote-desktop client. The main workflow is: a user opens the remote view, obtains or verifies device credentials, joins a signaling room, establishes a WebRTC peer connection, then views and controls the remote device. The graph also captures the Electron desktop bridge and the documented group-control and configuration capabilities. Several README features are not represented by sampled implementation excerpts, so their wiring is intentionally left unspecified.

Main entry points: [`src/views/remote/index.vue`](https://github.com/galaxy-s10/billd-desk/blob/main/src/views/remote/index.vue) (Remote view), [`src/hooks/use-websocket.ts`](https://github.com/galaxy-s10/billd-desk/blob/main/src/hooks/use-websocket.ts) (WebSocket session), [`src/api`](https://github.com/galaxy-s10/billd-desk/tree/main/src/api) (HTTP API clients), [`src/App.vue`](https://github.com/galaxy-s10/billd-desk/blob/main/src/App.vue) (Vue application)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client UI"]
  node_app["Vue application<br/>[App.vue]"]
  node_router["Page routing<br/>[index.ts]"]
  node_remote["Remote view<br/>[index.vue]"]
  node_device["Device management<br/>[index.vue]"]
  node_settings["Connection settings<br/>[index.vue]"]
  node_groupcontrol["Group control<br/>[index.vue]"]
  node_appstore["Application state<br/>[index.ts]"]
  node_cache[("Persisted settings<br/>[index.ts]")]
end

subgraph group_session["Remote Session"]
  node_websocket["WebSocket session<br/>[use-websocket.ts]"]
  node_networkstore["Network state<br/>[index.ts]"]
  node_rtc["WebRTC transport<br/>[webRTC.ts]"]
  node_rtcflows["RTC workflows<br/>[remoteDesk.ts]"]
end

subgraph group_connectivity["Connectivity"]
  node_api["HTTP API clients"]
end

subgraph group_desktop["Desktop Integration"]
  node_ipc["Renderer IPC helpers<br/>[index.ts]"]
  node_preload["Electron preload<br/>[preload.ts]"]
  node_main["Electron main<br/>[index.ts]"]
end

node_user(("Remote user"))
node_backend{{"BilldDesk backend"}}
node_signaling{{"Signaling service"}}
node_peer(("Remote device"))
node_osinput{{"Desktop input"}}

node_user -->|"uses"| node_app
node_app -->|"mounts routes"| node_router
node_router -->|"routes to"| node_remote
node_user -->|"starts session"| node_remote
node_remote -->|"requests credentials"| node_api
node_api -->|"calls API"| node_backend
node_remote -->|"reads credentials"| node_cache
node_remote -->|"initializes session"| node_websocket
node_websocket -->|"exchanges messages"| node_signaling
node_websocket -->|"verifies room key"| node_api
node_websocket -->|"updates connections"| node_networkstore
node_websocket -->|"starts peer flows"| node_rtcflows
node_remote -->|"configures remote desk"| node_rtcflows
node_rtcflows -->|"creates peer links"| node_rtc
node_rtc -->|"exchanges media and data"| node_peer
node_groupcontrol -->|"reads peer links"| node_networkstore
node_groupcontrol -->|"sends control data"| node_rtc
node_remote -->|"updates session state"| node_appstore
node_remote -->|"requests display info"| node_ipc
node_app -->|"initializes version"| node_appstore
node_app -->|"checks version"| node_api
node_settings -->|"stores endpoints"| node_cache
node_device -.->|"manages device"| node_api
node_ipc -->|"sends IPC"| node_preload
node_preload -->|"forwards IPC"| node_main
node_main -->|"simulates input"| node_osinput

click node_app "https://github.com/galaxy-s10/billd-desk/blob/main/src/App.vue"
click node_router "https://github.com/galaxy-s10/billd-desk/blob/main/src/router/index.ts"
click node_remote "https://github.com/galaxy-s10/billd-desk/blob/main/src/views/remote/index.vue"
click node_device "https://github.com/galaxy-s10/billd-desk/blob/main/src/views/deviceManage/index.vue"
click node_settings "https://github.com/galaxy-s10/billd-desk/blob/main/src/views/setting/index.vue"
click node_groupcontrol "https://github.com/galaxy-s10/billd-desk/blob/main/src/views/webrtc/index.vue"
click node_api "https://github.com/galaxy-s10/billd-desk/tree/main/src/api"
click node_websocket "https://github.com/galaxy-s10/billd-desk/blob/main/src/hooks/use-websocket.ts"
click node_networkstore "https://github.com/galaxy-s10/billd-desk/blob/main/src/store/network/index.ts"
click node_rtc "https://github.com/galaxy-s10/billd-desk/blob/main/src/utils/network/webRTC.ts"
click node_rtcflows "https://github.com/galaxy-s10/billd-desk/blob/main/src/hooks/webrtc/remoteDesk.ts"
click node_appstore "https://github.com/galaxy-s10/billd-desk/blob/main/src/store/app/index.ts"
click node_cache "https://github.com/galaxy-s10/billd-desk/blob/main/src/store/cache/index.ts"
click node_ipc "https://github.com/galaxy-s10/billd-desk/blob/main/src/utils/index.ts"
click node_preload "https://github.com/galaxy-s10/billd-desk/blob/main/electron-main/preload.ts"
click node_main "https://github.com/galaxy-s10/billd-desk/blob/main/electron-main/index.ts"

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_router,node_remote,node_device,node_settings,node_groupcontrol,node_appstore,node_cache,node_user toneBlue
class node_websocket,node_networkstore,node_rtc,node_rtcflows toneAmber
class node_api toneMint
class node_ipc,node_preload,node_main toneRose
class node_backend,node_signaling,node_peer,node_osinput toneIndigo
```

## Components

### Client UI

- [Vue application](https://github.com/galaxy-s10/billd-desk/blob/main/src/App.vue): `src/App.vue`
- [Page routing](https://github.com/galaxy-s10/billd-desk/blob/main/src/router/index.ts): `src/router/index.ts`
- [Remote view](https://github.com/galaxy-s10/billd-desk/blob/main/src/views/remote/index.vue): `src/views/remote/index.vue`
- [Device management](https://github.com/galaxy-s10/billd-desk/blob/main/src/views/deviceManage/index.vue): `src/views/deviceManage/index.vue`
- [Connection settings](https://github.com/galaxy-s10/billd-desk/blob/main/src/views/setting/index.vue): `src/views/setting/index.vue`
- [Group control](https://github.com/galaxy-s10/billd-desk/blob/main/src/views/webrtc/index.vue): `src/views/webrtc/index.vue`
- [Application state](https://github.com/galaxy-s10/billd-desk/blob/main/src/store/app/index.ts): `src/store/app/index.ts`
- [Persisted settings](https://github.com/galaxy-s10/billd-desk/blob/main/src/store/cache/index.ts): `src/store/cache/index.ts`

### Remote Session

- [WebSocket session](https://github.com/galaxy-s10/billd-desk/blob/main/src/hooks/use-websocket.ts): `src/hooks/use-websocket.ts`
- [Network state](https://github.com/galaxy-s10/billd-desk/blob/main/src/store/network/index.ts): `src/store/network/index.ts`
- [WebRTC transport](https://github.com/galaxy-s10/billd-desk/blob/main/src/utils/network/webRTC.ts): `src/utils/network/webRTC.ts`
- [RTC workflows](https://github.com/galaxy-s10/billd-desk/blob/main/src/hooks/webrtc/remoteDesk.ts): `src/hooks/webrtc/remoteDesk.ts`

### Connectivity

- [HTTP API clients](https://github.com/galaxy-s10/billd-desk/tree/main/src/api): `src/api`

### Desktop Integration

- [Renderer IPC helpers](https://github.com/galaxy-s10/billd-desk/blob/main/src/utils/index.ts): `src/utils/index.ts`
- [Electron preload](https://github.com/galaxy-s10/billd-desk/blob/main/electron-main/preload.ts): `electron-main/preload.ts`
- [Electron main](https://github.com/galaxy-s10/billd-desk/blob/main/electron-main/index.ts): `electron-main/index.ts`

### Other components

- **Remote user**
- **BilldDesk backend**
- **Signaling service**
- **Remote device**
- **Desktop input**

## Connections

- Remote user → Vue application: uses
- Vue application → Page routing: mounts routes
- Page routing → Remote view: routes to
- Remote user → Remote view: starts session
- Remote view → HTTP API clients: requests credentials
- HTTP API clients → BilldDesk backend: calls API
- Remote view → Persisted settings: reads credentials
- Remote view → WebSocket session: initializes session
- WebSocket session → Signaling service: exchanges messages
- WebSocket session → HTTP API clients: verifies room key
- WebSocket session → Network state: updates connections
- WebSocket session → RTC workflows: starts peer flows
- Remote view → RTC workflows: configures remote desk
- RTC workflows → WebRTC transport: creates peer links
- WebRTC transport → Remote device: exchanges media and data
- Group control → Network state: reads peer links
- Group control → WebRTC transport: sends control data
- Remote view → Application state: updates session state
- Remote view → Renderer IPC helpers: requests display info
- Vue application → Application state: initializes version
- Vue application → HTTP API clients: checks version
- Connection settings → Persisted settings: stores endpoints
- Device management → HTTP API clients: manages device
- Renderer IPC helpers → Electron preload: sends IPC
- Electron preload → Electron main: forwards IPC
- Electron main → Desktop input: simulates input