# andronedev/openportal architecture

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

- Interactive diagram: https://gitdiagram.com/andronedev/openportal
- Repository: https://github.com/andronedev/openportal
- Video tour (about a minute): https://gitdiagram.com/andronedev/openportal/video

## Overview

OpenPortal is a browser-based Meta Portal management app: the user connects a Portal over WebUSB/ADB, then manages apps or uses device tools. The README documents the broader toolset; the supplied excerpts establish some, but not all, internal call wiring, so uncertain links are omitted.

Main entry points: [`src/App.tsx`](https://github.com/andronedev/openportal/blob/develop/src/App.tsx) (App routes), [`src/store/app-store.ts`](https://github.com/andronedev/openportal/blob/develop/src/store/app-store.ts) (Installed app state), [`src/pages/AppDetailPage.tsx`](https://github.com/andronedev/openportal/blob/develop/src/pages/AppDetailPage.tsx) (App detail), [`src/lib/programs/broker.ts`](https://github.com/andronedev/openportal/blob/develop/src/lib/programs/broker.ts) (Capability broker)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Browser experience"]
  node_app["App routes<br/>[App.tsx]"]
  node_dashboard["Device dashboard<br/>[DashboardPage.tsx]"]
end

subgraph group_device["Device connection"]
  node_connectui["Connection UI<br/>[ConnectPanel.tsx]"]
  node_devstore["Device state<br/>[device-store.ts]"]
  node_adbconnect["WebUSB ADB<br/>[connection.ts]"]
end

subgraph group_apps["App management"]
  node_appsui["App catalog UI<br/>[AppsPage.tsx]"]
  node_detail["App detail<br/>[AppDetailPage.tsx]"]
  node_catalog[("Community catalog<br/>[index.ts]")]
  node_appstore["Installed app state<br/>[app-store.ts]"]
  node_appmanager["Package operations<br/>[app-manager.ts]"]
  node_installer["APK installation<br/>[install.ts]"]
  node_sources["Download sources<br/>[sources.ts]"]
end

subgraph group_tools["Device tools"]
  node_files["File browser<br/>[FilesPage.tsx]"]
  node_filesystem["Device files<br/>[file-system.ts]"]
  node_terminal["Shell terminal<br/>[TerminalPage.tsx]"]
  node_shell["ADB shell<br/>[shell.ts]"]
  node_logcat["Log viewer<br/>[LogcatPage.tsx]"]
  node_logservice["Logcat reader<br/>[logcat.ts]"]
  node_screen["Screen mirror<br/>[ScreenPage.tsx]"]
  node_scrcpy["Scrcpy transport<br/>[scrcpy.ts]"]
  node_flags["Feature flags<br/>[FlagsPage.tsx]"]
  node_settings["Device settings<br/>[settings.ts]"]
end

subgraph group_programs["Setup programs"]
  node_setupui["Setup panel"]
  node_programapi["Program runtime API<br/>[index.ts]"]
  node_broker["Capability broker<br/>[broker.ts]"]
  node_worker["Sandbox worker<br/>[worker.ts]"]
  node_programcode["Catalog setup program<br/>[openportal.js]"]
end

node_user(("User"))
node_portal(("Meta Portal"))

node_user -->|"opens"| node_app
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_appsui
node_app -->|"routes"| node_detail
node_app -->|"routes"| node_files
node_app -->|"routes"| node_terminal
node_app -->|"routes"| node_logcat
node_app -->|"routes"| node_screen
node_app -->|"routes"| node_flags
node_user -->|"connects"| node_connectui
node_connectui -->|"requests connection"| node_adbconnect
node_adbconnect -->|"ADB over WebUSB"| node_portal
node_adbconnect -->|"updates connection state"| node_devstore
node_dashboard -->|"reads device state"| node_devstore
node_appsui -->|"shows catalog"| node_catalog
node_detail -->|"looks up app"| node_catalog
node_detail -->|"requests app actions"| node_appstore
node_appstore -->|"reads app metadata"| node_catalog
node_appstore -->|"resolves updates"| node_sources
node_appstore -->|"queries and removes packages"| node_appmanager
node_appstore -->|"installs uploaded APK"| node_installer
node_appmanager -->|"runs package commands"| node_portal
node_installer -->|"installs APK"| node_portal
node_sources -.->|"fetches APK sources"| node_user
node_files -->|"browses device files"| node_filesystem
node_filesystem -->|"reads and writes files"| node_portal
node_terminal -->|"runs commands"| node_shell
node_shell -->|"executes shell commands"| node_portal
node_logcat -->|"reads logs"| node_logservice
node_logservice -->|"streams device logs"| node_portal
node_screen -->|"starts mirroring"| node_scrcpy
node_scrcpy -->|"streams screen and input"| node_portal
node_flags -->|"reads and changes flags"| node_settings
node_settings -->|"runs settings commands"| node_portal
node_detail -->|"opens setup"| node_setupui
node_setupui -->|"loads and runs program"| node_programapi
node_programapi -->|"dispatches capabilities"| node_broker
node_broker -->|"sends RPC requests"| node_worker
node_worker -->|"executes setup code"| node_programcode
node_worker -->|"requests device capabilities"| node_broker
node_broker -->|"performs setup operations"| node_portal

click node_app "https://github.com/andronedev/openportal/blob/develop/src/App.tsx"
click node_dashboard "https://github.com/andronedev/openportal/blob/develop/src/pages/DashboardPage.tsx"
click node_connectui "https://github.com/andronedev/openportal/blob/develop/src/components/connection/ConnectPanel.tsx"
click node_devstore "https://github.com/andronedev/openportal/blob/develop/src/store/device-store.ts"
click node_adbconnect "https://github.com/andronedev/openportal/blob/develop/src/lib/adb/connection.ts"
click node_appsui "https://github.com/andronedev/openportal/blob/develop/src/pages/AppsPage.tsx"
click node_detail "https://github.com/andronedev/openportal/blob/develop/src/pages/AppDetailPage.tsx"
click node_catalog "https://github.com/andronedev/openportal/blob/develop/src/lib/catalog/index.ts"
click node_appstore "https://github.com/andronedev/openportal/blob/develop/src/store/app-store.ts"
click node_appmanager "https://github.com/andronedev/openportal/blob/develop/src/lib/adb/app-manager.ts"
click node_installer "https://github.com/andronedev/openportal/blob/develop/src/lib/adb/install.ts"
click node_sources "https://github.com/andronedev/openportal/blob/develop/src/lib/catalog/sources.ts"
click node_files "https://github.com/andronedev/openportal/blob/develop/src/pages/FilesPage.tsx"
click node_filesystem "https://github.com/andronedev/openportal/blob/develop/src/lib/adb/file-system.ts"
click node_terminal "https://github.com/andronedev/openportal/blob/develop/src/pages/TerminalPage.tsx"
click node_shell "https://github.com/andronedev/openportal/blob/develop/src/lib/adb/shell.ts"
click node_logcat "https://github.com/andronedev/openportal/blob/develop/src/pages/LogcatPage.tsx"
click node_logservice "https://github.com/andronedev/openportal/blob/develop/src/lib/adb/logcat.ts"
click node_screen "https://github.com/andronedev/openportal/blob/develop/src/pages/ScreenPage.tsx"
click node_scrcpy "https://github.com/andronedev/openportal/blob/develop/src/lib/adb/scrcpy.ts"
click node_flags "https://github.com/andronedev/openportal/blob/develop/src/pages/FlagsPage.tsx"
click node_settings "https://github.com/andronedev/openportal/blob/develop/src/lib/adb/settings.ts"
click node_setupui "https://github.com/andronedev/openportal/blob/develop/src/components/apps/setup/SandboxedProgramPanel.tsx"
click node_programapi "https://github.com/andronedev/openportal/blob/develop/src/lib/programs/index.ts"
click node_broker "https://github.com/andronedev/openportal/blob/develop/src/lib/programs/broker.ts"
click node_worker "https://github.com/andronedev/openportal/blob/develop/src/lib/programs/worker.ts"
click node_programcode "https://github.com/andronedev/openportal/blob/develop/catalog/apps/immortal-launcher/openportal.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_dashboard,node_user toneBlue
class node_connectui,node_devstore,node_adbconnect toneAmber
class node_appsui,node_detail,node_catalog,node_appstore,node_appmanager,node_installer,node_sources toneMint
class node_files,node_filesystem,node_terminal,node_shell,node_logcat,node_logservice,node_screen,node_scrcpy,node_flags,node_settings toneRose
class node_setupui,node_programapi,node_broker,node_worker,node_programcode,node_portal toneIndigo
```

## Components

### Browser experience

- [App routes](https://github.com/andronedev/openportal/blob/develop/src/App.tsx): `src/App.tsx`
- [Device dashboard](https://github.com/andronedev/openportal/blob/develop/src/pages/DashboardPage.tsx): `src/pages/DashboardPage.tsx`

### Device connection

- [Connection UI](https://github.com/andronedev/openportal/blob/develop/src/components/connection/ConnectPanel.tsx): `src/components/connection/ConnectPanel.tsx`
- [Device state](https://github.com/andronedev/openportal/blob/develop/src/store/device-store.ts): `src/store/device-store.ts`
- [WebUSB ADB](https://github.com/andronedev/openportal/blob/develop/src/lib/adb/connection.ts): `src/lib/adb/connection.ts`

### App management

- [App catalog UI](https://github.com/andronedev/openportal/blob/develop/src/pages/AppsPage.tsx): `src/pages/AppsPage.tsx`
- [App detail](https://github.com/andronedev/openportal/blob/develop/src/pages/AppDetailPage.tsx): `src/pages/AppDetailPage.tsx`
- [Community catalog](https://github.com/andronedev/openportal/blob/develop/src/lib/catalog/index.ts): `src/lib/catalog/index.ts`
- [Installed app state](https://github.com/andronedev/openportal/blob/develop/src/store/app-store.ts): `src/store/app-store.ts`
- [Package operations](https://github.com/andronedev/openportal/blob/develop/src/lib/adb/app-manager.ts): `src/lib/adb/app-manager.ts`
- [APK installation](https://github.com/andronedev/openportal/blob/develop/src/lib/adb/install.ts): `src/lib/adb/install.ts`
- [Download sources](https://github.com/andronedev/openportal/blob/develop/src/lib/catalog/sources.ts): `src/lib/catalog/sources.ts`

### Device tools

- [File browser](https://github.com/andronedev/openportal/blob/develop/src/pages/FilesPage.tsx): `src/pages/FilesPage.tsx`
- [Device files](https://github.com/andronedev/openportal/blob/develop/src/lib/adb/file-system.ts): `src/lib/adb/file-system.ts`
- [Shell terminal](https://github.com/andronedev/openportal/blob/develop/src/pages/TerminalPage.tsx): `src/pages/TerminalPage.tsx`
- [ADB shell](https://github.com/andronedev/openportal/blob/develop/src/lib/adb/shell.ts): `src/lib/adb/shell.ts`
- [Log viewer](https://github.com/andronedev/openportal/blob/develop/src/pages/LogcatPage.tsx): `src/pages/LogcatPage.tsx`
- [Logcat reader](https://github.com/andronedev/openportal/blob/develop/src/lib/adb/logcat.ts): `src/lib/adb/logcat.ts`
- [Screen mirror](https://github.com/andronedev/openportal/blob/develop/src/pages/ScreenPage.tsx): `src/pages/ScreenPage.tsx`
- [Scrcpy transport](https://github.com/andronedev/openportal/blob/develop/src/lib/adb/scrcpy.ts): `src/lib/adb/scrcpy.ts`
- [Feature flags](https://github.com/andronedev/openportal/blob/develop/src/pages/FlagsPage.tsx): `src/pages/FlagsPage.tsx`
- [Device settings](https://github.com/andronedev/openportal/blob/develop/src/lib/adb/settings.ts): `src/lib/adb/settings.ts`

### Setup programs

- [Setup panel](https://github.com/andronedev/openportal/blob/develop/src/components/apps/setup/SandboxedProgramPanel.tsx): `src/components/apps/setup/SandboxedProgramPanel.tsx`
- [Program runtime API](https://github.com/andronedev/openportal/blob/develop/src/lib/programs/index.ts): `src/lib/programs/index.ts`
- [Capability broker](https://github.com/andronedev/openportal/blob/develop/src/lib/programs/broker.ts): `src/lib/programs/broker.ts`
- [Sandbox worker](https://github.com/andronedev/openportal/blob/develop/src/lib/programs/worker.ts): `src/lib/programs/worker.ts`
- [Catalog setup program](https://github.com/andronedev/openportal/blob/develop/catalog/apps/immortal-launcher/openportal.js): `catalog/apps/immortal-launcher/openportal.js`

### Other components

- **User**
- **Meta Portal**

## Connections

- User → App routes: opens
- App routes → Device dashboard: routes
- App routes → App catalog UI: routes
- App routes → App detail: routes
- App routes → File browser: routes
- App routes → Shell terminal: routes
- App routes → Log viewer: routes
- App routes → Screen mirror: routes
- App routes → Feature flags: routes
- User → Connection UI: connects
- Connection UI → WebUSB ADB: requests connection
- WebUSB ADB → Meta Portal: ADB over WebUSB
- WebUSB ADB → Device state: updates connection state
- Device dashboard → Device state: reads device state
- App catalog UI → Community catalog: shows catalog
- App detail → Community catalog: looks up app
- App detail → Installed app state: requests app actions
- Installed app state → Community catalog: reads app metadata
- Installed app state → Download sources: resolves updates
- Installed app state → Package operations: queries and removes packages
- Installed app state → APK installation: installs uploaded APK
- Package operations → Meta Portal: runs package commands
- APK installation → Meta Portal: installs APK
- Download sources → User: fetches APK sources
- File browser → Device files: browses device files
- Device files → Meta Portal: reads and writes files
- Shell terminal → ADB shell: runs commands
- ADB shell → Meta Portal: executes shell commands
- Log viewer → Logcat reader: reads logs
- Logcat reader → Meta Portal: streams device logs
- Screen mirror → Scrcpy transport: starts mirroring
- Scrcpy transport → Meta Portal: streams screen and input
- Feature flags → Device settings: reads and changes flags
- Device settings → Meta Portal: runs settings commands
- App detail → Setup panel: opens setup
- Setup panel → Program runtime API: loads and runs program
- Program runtime API → Capability broker: dispatches capabilities
- Capability broker → Sandbox worker: sends RPC requests
- Sandbox worker → Catalog setup program: executes setup code
- Sandbox worker → Capability broker: requests device capabilities
- Capability broker → Meta Portal: performs setup operations