# ushan0v/forkop architecture

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

- Interactive diagram: https://gitdiagram.com/ushan0v/forkop
- Repository: https://github.com/ushan0v/forkop

## Overview

Forkop is a LuCI front end for configuring and operating a router proxy/VPN service. Users enter through LuCI pages to manage server and routing configuration, inspect dashboard and live connection data, run diagnostics, or check and apply component updates. The sampled code shows tab controllers coordinating service methods, runtime state, and rendered UI. The README also describes backend capabilities such as subscriptions, DNS/routing features, and proxy integrations; their implementation is outside this tree, so those are not mapped as internal components.

Main entry points: [`luci-app-forkop/htdocs/luci-static/resources/view/forkop/main.js`](https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/main.js) (LuCI pages), [`fe-app-forkop/src/forkop/services/store.service.ts`](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/services/store.service.ts) (UI state store), [`fe-app-forkop/src/forkop/tabs/diagnostic/initController.ts`](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/tabs/diagnostic/initController.ts) (Diagnostics), [`fe-app-forkop/src/main.ts`](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/main.ts) (Frontend exports)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["LuCI interface"]
  node_luci["LuCI pages<br/>[main.js]"]
  node_dashboard["Dashboard<br/>[initController.ts]"]
  node_diagnostics["Diagnostics<br/>[initController.ts]"]
  node_monitoring["Connection monitoring<br/>[initController.ts]"]
  node_updates["Component updates<br/>[initController.ts]"]
  node_entry["Frontend exports<br/>[main.ts]"]
end

subgraph group_operations["Runtime operations"]
  node_methods["Service methods<br/>[index.ts]"]
  node_shellmethods["Shell RPC methods<br/>[index.ts]"]
  node_custommethods["Custom methods<br/>[index.ts]"]
  node_serviceinfo["Service status fetch"]
  node_runtime["Runtime state refresh"]
  node_clash{{"Clash API"}}
  node_backend{{"Forkop service"}}
  node_diagnosticchecks["Diagnostic checks"]
end

subgraph group_configuration["Configuration"]
  node_server["Proxy server setup<br/>[server.js]"]
  node_sections["Routing sections<br/>[section.js]"]
  node_settings["Service settings<br/>[settings.js]"]
  node_localdevices["Local devices<br/>[local_devices.js]"]
  node_uci[("OpenWrt UCI")]
end

subgraph group_state["Shared state"]
  node_store[("UI state store<br/>[store.service.ts]")]
  node_uistate["UI state mapping<br/>[uiState.service.ts]"]
end

node_operator(("Router operator"))

node_operator -->|"opens pages"| node_luci
node_luci -->|"loads exports"| node_entry
node_entry -->|"exposes tab"| node_dashboard
node_entry -->|"exposes tab"| node_diagnostics
node_entry -->|"exposes tab"| node_monitoring
node_entry -->|"exposes tab"| node_updates
node_luci -->|"opens page"| node_server
node_luci -->|"opens page"| node_sections
node_luci -->|"opens page"| node_settings
node_luci -->|"opens page"| node_localdevices
node_server -->|"reads/writes config"| node_uci
node_sections -->|"reads/writes config"| node_uci
node_settings -->|"reads/writes config"| node_uci
node_localdevices -->|"reads/writes config"| node_uci
node_dashboard -->|"loads sections"| node_custommethods
node_dashboard -->|"fetches status"| node_serviceinfo
node_diagnostics -->|"runs checks"| node_diagnosticchecks
node_diagnostics -->|"fetches status"| node_serviceinfo
node_diagnostics -->|"refreshes state"| node_runtime
node_updates -->|"refreshes state"| node_runtime
node_monitoring -->|"reads connections"| node_clash
node_serviceinfo -->|"refreshes state"| node_runtime
node_serviceinfo -->|"queries status"| node_shellmethods
node_runtime -->|"fetches state"| node_shellmethods
node_shellmethods -->|"calls service"| node_backend
node_custommethods -->|"calls service"| node_backend
node_runtime -->|"applies snapshot"| node_uistate
node_uistate -->|"updates state"| node_store
node_serviceinfo -->|"stores status"| node_store
node_dashboard -->|"reads state"| node_store
node_diagnostics -->|"reads/writes state"| node_store
node_monitoring -->|"reads state"| node_store
node_updates -->|"reads/writes state"| node_store

click node_luci "https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/main.js"
click node_dashboard "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/tabs/dashboard/initController.ts"
click node_diagnostics "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/tabs/diagnostic/initController.ts"
click node_monitoring "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/tabs/monitoring/initController.ts"
click node_updates "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/tabs/updates/initController.ts"
click node_server "https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/server.js"
click node_sections "https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/section.js"
click node_settings "https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/settings.js"
click node_localdevices "https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/local_devices.js"
click node_entry "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/main.ts"
click node_methods "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/methods/index.ts"
click node_shellmethods "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/methods/shell/index.ts"
click node_custommethods "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/methods/custom/index.ts"
click node_serviceinfo "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/fetchers/fetchServicesInfo.ts"
click node_runtime "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/services/runtimeUiState.service.ts"
click node_store "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/services/store.service.ts"
click node_uistate "https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/services/uiState.service.ts"
click node_diagnosticchecks "https://github.com/ushan0v/forkop/tree/main/fe-app-forkop/src/forkop/tabs/diagnostic/checks"

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_luci,node_dashboard,node_diagnostics,node_monitoring,node_updates,node_entry toneBlue
class node_methods,node_shellmethods,node_custommethods,node_serviceinfo,node_runtime,node_clash,node_backend,node_diagnosticchecks toneAmber
class node_server,node_sections,node_settings,node_localdevices,node_uci,node_operator toneMint
class node_store,node_uistate toneRose
```

## Components

### LuCI interface

- [LuCI pages](https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/main.js): `luci-app-forkop/htdocs/luci-static/resources/view/forkop/main.js`
- [Dashboard](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/tabs/dashboard/initController.ts): `fe-app-forkop/src/forkop/tabs/dashboard/initController.ts`
- [Diagnostics](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/tabs/diagnostic/initController.ts): `fe-app-forkop/src/forkop/tabs/diagnostic/initController.ts`
- [Connection monitoring](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/tabs/monitoring/initController.ts): `fe-app-forkop/src/forkop/tabs/monitoring/initController.ts`
- [Component updates](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/tabs/updates/initController.ts): `fe-app-forkop/src/forkop/tabs/updates/initController.ts`
- [Frontend exports](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/main.ts): `fe-app-forkop/src/main.ts`

### Runtime operations

- [Service methods](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/methods/index.ts): `fe-app-forkop/src/forkop/methods/index.ts`
- [Shell RPC methods](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/methods/shell/index.ts): `fe-app-forkop/src/forkop/methods/shell/index.ts`
- [Custom methods](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/methods/custom/index.ts): `fe-app-forkop/src/forkop/methods/custom/index.ts`
- [Service status fetch](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/fetchers/fetchServicesInfo.ts): `fe-app-forkop/src/forkop/fetchers/fetchServicesInfo.ts`
- [Runtime state refresh](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/services/runtimeUiState.service.ts): `fe-app-forkop/src/forkop/services/runtimeUiState.service.ts`
- **Clash API**
- **Forkop service**
- [Diagnostic checks](https://github.com/ushan0v/forkop/tree/main/fe-app-forkop/src/forkop/tabs/diagnostic/checks): `fe-app-forkop/src/forkop/tabs/diagnostic/checks`

### Configuration

- [Proxy server setup](https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/server.js): `luci-app-forkop/htdocs/luci-static/resources/view/forkop/server.js`
- [Routing sections](https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/section.js): `luci-app-forkop/htdocs/luci-static/resources/view/forkop/section.js`
- [Service settings](https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/settings.js): `luci-app-forkop/htdocs/luci-static/resources/view/forkop/settings.js`
- [Local devices](https://github.com/ushan0v/forkop/blob/main/luci-app-forkop/htdocs/luci-static/resources/view/forkop/local_devices.js): `luci-app-forkop/htdocs/luci-static/resources/view/forkop/local_devices.js`
- **OpenWrt UCI**

### Shared state

- [UI state store](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/services/store.service.ts): `fe-app-forkop/src/forkop/services/store.service.ts`
- [UI state mapping](https://github.com/ushan0v/forkop/blob/main/fe-app-forkop/src/forkop/services/uiState.service.ts): `fe-app-forkop/src/forkop/services/uiState.service.ts`

### Other components

- **Router operator**

## Connections

- Router operator → LuCI pages: opens pages
- LuCI pages → Frontend exports: loads exports
- Frontend exports → Dashboard: exposes tab
- Frontend exports → Diagnostics: exposes tab
- Frontend exports → Connection monitoring: exposes tab
- Frontend exports → Component updates: exposes tab
- LuCI pages → Proxy server setup: opens page
- LuCI pages → Routing sections: opens page
- LuCI pages → Service settings: opens page
- LuCI pages → Local devices: opens page
- Proxy server setup → OpenWrt UCI: reads/writes config
- Routing sections → OpenWrt UCI: reads/writes config
- Service settings → OpenWrt UCI: reads/writes config
- Local devices → OpenWrt UCI: reads/writes config
- Dashboard → Custom methods: loads sections
- Dashboard → Service status fetch: fetches status
- Diagnostics → Diagnostic checks: runs checks
- Diagnostics → Service status fetch: fetches status
- Diagnostics → Runtime state refresh: refreshes state
- Component updates → Runtime state refresh: refreshes state
- Connection monitoring → Clash API: reads connections
- Service status fetch → Runtime state refresh: refreshes state
- Service status fetch → Shell RPC methods: queries status
- Runtime state refresh → Shell RPC methods: fetches state
- Shell RPC methods → Forkop service: calls service
- Custom methods → Forkop service: calls service
- Runtime state refresh → UI state mapping: applies snapshot
- UI state mapping → UI state store: updates state
- Service status fetch → UI state store: stores status
- Dashboard → UI state store: reads state
- Diagnostics → UI state store: reads/writes state
- Connection monitoring → UI state store: reads state
- Component updates → UI state store: reads/writes state