# sevenflanks/opencode-manager-web architecture

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

- Interactive diagram: https://gitdiagram.com/sevenflanks/opencode-manager-web
- Repository: https://github.com/sevenflanks/opencode-manager-web

## Overview

OMW is a Windows-hosted manager for OpenCode projects and instances, with browser-based oversight and optional Tailnet remote access. The primary workflow is: a user selects a project and starts a background instance in the web console; the manager coordinates the OpenCode runtime, records instance and primary-session state, and returns overview and session information for display. Users can also inspect connectivity, stop or resume instances, and continue work in OpenCode Web. The launcher provides a separate CLI path. The sampled excerpts show the server composition and selected service, storage, and UI behavior; some route-to-service details and runtime internals are inferred only where documented capabilities support them.

Main entry points: [`apps/manager/src/app.ts`](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/app.ts) (HTTP routes), [`apps/manager/src/service.ts`](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/service.ts) (Instance service), [`apps/web/src/api.ts`](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/web/src/api.ts) (Manager API client), [`apps/web/src/App.vue`](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/web/src/App.vue) (Web console)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["User interfaces"]
  node_web["Web console<br/>[App.vue]"]
  node_webapi["Manager API client<br/>[api.ts]"]
  node_sessiontree["Session tree"]
end

subgraph group_manager["Manager service"]
  node_server["Manager server<br/>[server.ts]"]
  node_routes["HTTP routes<br/>[app.ts]"]
  node_service["Instance service<br/>[service.ts]"]
  node_repository[("Manager repository<br/>[repository.ts]")]
  node_contracts["Shared contracts<br/>[index.ts]"]
end

subgraph group_runtime["Instance runtime"]
  node_runtime["OpenCode runtime<br/>[runtime.ts]"]
  node_process["Process control<br/>[process-control.ts]"]
  node_projection["Session projection"]
end

subgraph group_access["Access and launch"]
  node_connectivity["Connectivity control<br/>[connectivity.ts]"]
  node_remote["Remote access<br/>[remote-access.ts]"]
  node_auth["Request authentication<br/>[auth.ts]"]
  node_launcher["CLI launcher<br/>[manager-cli.ts]"]
end

node_user(("Operator"))
node_opencodecli["OpenCode CLI"]
node_tailscale["Tailscale Serve"]
node_sqlite[("SQLite state")]
node_browser(("Browser"))

node_user -->|"uses"| node_browser
node_browser -->|"opens"| node_web
node_web -->|"requests"| node_webapi
node_webapi -->|"calls API"| node_routes
node_routes -->|"authenticates"| node_auth
node_server -->|"builds"| node_routes
node_server -->|"configures"| node_service
node_routes -->|"dispatches"| node_service
node_service -->|"reads and writes"| node_repository
node_repository -->|"persists"| node_sqlite
node_service -->|"manages instances"| node_runtime
node_runtime -->|"controls processes"| node_process
node_runtime -->|"runs and queries"| node_opencodecli
node_service -->|"projects sessions"| node_projection
node_web -->|"renders sessions"| node_sessiontree
node_sessiontree -->|"loads children"| node_webapi
node_routes -->|"serves connectivity"| node_connectivity
node_connectivity -->|"registers mappings"| node_remote
node_remote -->|"configures Serve"| node_tailscale
node_launcher -->|"starts or reuses"| node_server
node_launcher -->|"launches wrapper"| node_opencodecli
node_webapi -->|"uses types"| node_contracts

click node_web "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/web/src/App.vue"
click node_webapi "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/web/src/api.ts"
click node_sessiontree "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/web/src/components/SessionTreeNode.vue"
click node_server "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/server.ts"
click node_routes "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/app.ts"
click node_service "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/service.ts"
click node_repository "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/repository.ts"
click node_contracts "https://github.com/sevenflanks/opencode-manager-web/blob/main/packages/contracts/src/index.ts"
click node_runtime "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/agents/opencode/runtime.ts"
click node_process "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/process-control.ts"
click node_projection "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/session-projection.ts"
click node_connectivity "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/connectivity.ts"
click node_remote "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/remote-access.ts"
click node_auth "https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/auth.ts"
click node_launcher "https://github.com/sevenflanks/opencode-manager-web/blob/main/packages/launcher/src/manager-cli.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_web,node_webapi,node_sessiontree,node_browser toneBlue
class node_server,node_routes,node_service,node_repository,node_contracts,node_sqlite toneAmber
class node_runtime,node_process,node_projection toneMint
class node_connectivity,node_remote,node_auth,node_launcher toneRose
class node_user,node_opencodecli,node_tailscale toneIndigo
```

## Components

### User interfaces

- [Web console](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/web/src/App.vue): `apps/web/src/App.vue`
- [Manager API client](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/web/src/api.ts): `apps/web/src/api.ts`
- [Session tree](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/web/src/components/SessionTreeNode.vue): `apps/web/src/components/SessionTreeNode.vue`

### Manager service

- [Manager server](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/server.ts): `apps/manager/src/server.ts`
- [HTTP routes](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/app.ts): `apps/manager/src/app.ts`
- [Instance service](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/service.ts): `apps/manager/src/service.ts`
- [Manager repository](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/repository.ts): `apps/manager/src/repository.ts`
- [Shared contracts](https://github.com/sevenflanks/opencode-manager-web/blob/main/packages/contracts/src/index.ts): `packages/contracts/src/index.ts`

### Instance runtime

- [OpenCode runtime](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/agents/opencode/runtime.ts): `apps/manager/src/agents/opencode/runtime.ts`
- [Process control](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/process-control.ts): `apps/manager/src/process-control.ts`
- [Session projection](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/session-projection.ts): `apps/manager/src/session-projection.ts`

### Access and launch

- [Connectivity control](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/connectivity.ts): `apps/manager/src/connectivity.ts`
- [Remote access](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/remote-access.ts): `apps/manager/src/remote-access.ts`
- [Request authentication](https://github.com/sevenflanks/opencode-manager-web/blob/main/apps/manager/src/auth.ts): `apps/manager/src/auth.ts`
- [CLI launcher](https://github.com/sevenflanks/opencode-manager-web/blob/main/packages/launcher/src/manager-cli.ts): `packages/launcher/src/manager-cli.ts`

### Other components

- **Operator**
- **OpenCode CLI**
- **Tailscale Serve**
- **SQLite state**
- **Browser**

## Connections

- Operator → Browser: uses
- Browser → Web console: opens
- Web console → Manager API client: requests
- Manager API client → HTTP routes: calls API
- HTTP routes → Request authentication: authenticates
- Manager server → HTTP routes: builds
- Manager server → Instance service: configures
- HTTP routes → Instance service: dispatches
- Instance service → Manager repository: reads and writes
- Manager repository → SQLite state: persists
- Instance service → OpenCode runtime: manages instances
- OpenCode runtime → Process control: controls processes
- OpenCode runtime → OpenCode CLI: runs and queries
- Instance service → Session projection: projects sessions
- Web console → Session tree: renders sessions
- Session tree → Manager API client: loads children
- HTTP routes → Connectivity control: serves connectivity
- Connectivity control → Remote access: registers mappings
- Remote access → Tailscale Serve: configures Serve
- CLI launcher → Manager server: starts or reuses
- CLI launcher → OpenCode CLI: launches wrapper
- Manager API client → Shared contracts: uses types