# audioreach/audioreach-creator-ui architecture

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

- Interactive diagram: https://gitdiagram.com/audioreach/audioreach-creator-ui
- Repository: https://github.com/audioreach/audioreach-creator-ui

## Overview

AudioReach Creator UI is an Electron desktop application for creating, visualizing, and managing AudioReach audio graphs and use cases. The principal workflow is to open a project, edit its graph and module configuration, inspect validation or visualization, then save project files. The React frontend separates domain entities, interaction features, and composite workspace UI; shared API code connects it to the backend, while Electron handles desktop file operations. The graph highlights documented capabilities, but several feature paths are unsampled, so their internal connections are omitted or marked unverified.

Main entry points: [`packages/react-app/src/features/graph-designer/model/graph-designer-store.ts`](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/graph-designer-store.ts) (Graph designer state), [`packages/react-app/src/widgets/session-workspace/ui/SessionWorkspace.tsx`](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/widgets/session-workspace/ui/SessionWorkspace.tsx) (Editor workspace), [`packages/react-app/src/entities/project/services/project-service.ts`](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/entities/project/services/project-service.ts) (Project services), [`packages/electron-app/src/main.ts`](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/electron-app/src/main.ts) (Electron IPC)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_desktop["Desktop runtime"]
  node_bootstrap["App bootstrap<br/>[main.tsx]"]
  node_project_file["Project file handling"]
  node_electron_main["Electron IPC<br/>[main.ts]"]
end

subgraph group_project["Projects and API"]
  node_http["HTTP client<br/>[http-client.ts]"]
  node_project_service["Project services<br/>[project-service.ts]"]
  node_project_ops["Project lifecycle"]
end

subgraph group_design["Graph design"]
  node_graph_store["Graph designer state"]
  node_edit_session["Edit sessions"]
  node_graph_data["Graph data"]
  node_module_data["Module data"]
  node_module_list["Module catalog"]
  node_module_ops["Module operations"]
  node_subgraph_ops["Subgraph operations"]
  node_subsystem_ops["Subsystem operations"]
  node_key_config["Key configuration"]
end

subgraph group_experience["Use cases and views"]
  node_editor["Editor workspace"]
  node_visualizer["Use case visualizer"]
  node_usecase_select["Use case selection"]
  node_validation["Validation results"]
  node_device["Device tuning"]
end

node_engineer(("Audio engineer"))
node_backend{{"Creator API"}}

node_engineer -->|"opens app"| node_bootstrap
node_bootstrap -->|"loads workspace"| node_editor
node_editor -.->|"edits graph"| node_graph_store
node_graph_store -->|"composes"| node_edit_session
node_graph_store -->|"composes"| node_graph_data
node_graph_store -->|"composes"| node_module_data
node_graph_store -->|"composes"| node_module_list
node_graph_store -->|"composes"| node_module_ops
node_graph_store -->|"composes"| node_subgraph_ops
node_graph_store -->|"composes"| node_subsystem_ops
node_edit_session -->|"reads project"| node_project_service
node_project_service -.->|"requests data"| node_http
node_http -->|"sends requests"| node_backend
node_project_ops -.->|"manages projects"| node_project_service
node_electron_main -->|"dispatches file actions"| node_project_file
node_electron_main -.->|"serves renderer"| node_editor
node_editor -.->|"configures modules"| node_key_config
node_editor -.->|"views pipelines"| node_visualizer
node_editor -.->|"selects use cases"| node_usecase_select
node_editor -.->|"reviews validation"| node_validation
node_editor -.->|"tunes devices"| node_device

click node_bootstrap "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/main.tsx"
click node_editor "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/widgets/session-workspace/ui/SessionWorkspace.tsx"
click node_http "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/shared/api/http-client.ts"
click node_project_service "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/entities/project/services/project-service.ts"
click node_project_ops "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/project-operations/hooks/use-project-lifecycle.ts"
click node_project_file "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/electron-app/src/project-file-api.ts"
click node_electron_main "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/electron-app/src/main.ts"
click node_graph_store "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/graph-designer-store.ts"
click node_edit_session "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/edit-session-slice.ts"
click node_graph_data "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/graph-data-slice.ts"
click node_module_data "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/module-data-slice.ts"
click node_module_list "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/module-list-slice.ts"
click node_module_ops "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/lib/module-operations.ts"
click node_subgraph_ops "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/lib/subgraph-operations.ts"
click node_subsystem_ops "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/lib/subsystem-operations.ts"
click node_key_config "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/key-configurator/model/key-configurator-store.ts"
click node_visualizer "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/usecase-visualizer/ui/usecase-visualizer.tsx"
click node_usecase_select "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/usecase-selection/ui/usecase-selection-control.tsx"
click node_validation "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/validation-result-view/validation-result-panel.tsx"
click node_device "https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/device-operations/hooks/use-device-manager.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_bootstrap,node_project_file,node_electron_main toneBlue
class node_http,node_project_service,node_project_ops toneAmber
class node_graph_store,node_edit_session,node_graph_data,node_module_data,node_module_list,node_module_ops,node_subgraph_ops,node_subsystem_ops,node_key_config,node_backend toneMint
class node_editor,node_visualizer,node_usecase_select,node_validation,node_device toneRose
class node_engineer toneIndigo
```

## Components

### Desktop runtime

- [App bootstrap](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/main.tsx): `packages/react-app/src/main.tsx`
- [Project file handling](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/electron-app/src/project-file-api.ts): `packages/electron-app/src/project-file-api.ts`
- [Electron IPC](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/electron-app/src/main.ts): `packages/electron-app/src/main.ts`

### Projects and API

- [HTTP client](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/shared/api/http-client.ts): `packages/react-app/src/shared/api/http-client.ts`
- [Project services](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/entities/project/services/project-service.ts): `packages/react-app/src/entities/project/services/project-service.ts`
- [Project lifecycle](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/project-operations/hooks/use-project-lifecycle.ts): `packages/react-app/src/features/project-operations/hooks/use-project-lifecycle.ts`

### Graph design

- [Graph designer state](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/graph-designer-store.ts): `packages/react-app/src/features/graph-designer/model/graph-designer-store.ts`
- [Edit sessions](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/edit-session-slice.ts): `packages/react-app/src/features/graph-designer/model/edit-session-slice.ts`
- [Graph data](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/graph-data-slice.ts): `packages/react-app/src/features/graph-designer/model/graph-data-slice.ts`
- [Module data](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/module-data-slice.ts): `packages/react-app/src/features/graph-designer/model/module-data-slice.ts`
- [Module catalog](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/model/module-list-slice.ts): `packages/react-app/src/features/graph-designer/model/module-list-slice.ts`
- [Module operations](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/lib/module-operations.ts): `packages/react-app/src/features/graph-designer/lib/module-operations.ts`
- [Subgraph operations](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/lib/subgraph-operations.ts): `packages/react-app/src/features/graph-designer/lib/subgraph-operations.ts`
- [Subsystem operations](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/graph-designer/lib/subsystem-operations.ts): `packages/react-app/src/features/graph-designer/lib/subsystem-operations.ts`
- [Key configuration](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/key-configurator/model/key-configurator-store.ts): `packages/react-app/src/features/key-configurator/model/key-configurator-store.ts`

### Use cases and views

- [Editor workspace](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/widgets/session-workspace/ui/SessionWorkspace.tsx): `packages/react-app/src/widgets/session-workspace/ui/SessionWorkspace.tsx`
- [Use case visualizer](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/usecase-visualizer/ui/usecase-visualizer.tsx): `packages/react-app/src/features/usecase-visualizer/ui/usecase-visualizer.tsx`
- [Use case selection](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/usecase-selection/ui/usecase-selection-control.tsx): `packages/react-app/src/features/usecase-selection/ui/usecase-selection-control.tsx`
- [Validation results](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/validation-result-view/validation-result-panel.tsx): `packages/react-app/src/features/validation-result-view/validation-result-panel.tsx`
- [Device tuning](https://github.com/audioreach/audioreach-creator-ui/blob/feature/use-case-designer/packages/react-app/src/features/device-operations/hooks/use-device-manager.ts): `packages/react-app/src/features/device-operations/hooks/use-device-manager.ts`

### Other components

- **Audio engineer**
- **Creator API**

## Connections

- Audio engineer → App bootstrap: opens app (evidence: `README.md`)
- App bootstrap → Editor workspace: loads workspace (evidence: `packages/react-app/src/main.tsx`)
- Editor workspace → Graph designer state: edits graph
- Graph designer state → Edit sessions: composes (evidence: `packages/react-app/src/features/graph-designer/model/graph-designer-store.ts`)
- Graph designer state → Graph data: composes (evidence: `packages/react-app/src/features/graph-designer/model/graph-designer-store.ts`)
- Graph designer state → Module data: composes (evidence: `packages/react-app/src/features/graph-designer/model/graph-designer-store.ts`)
- Graph designer state → Module catalog: composes (evidence: `packages/react-app/src/features/graph-designer/model/graph-designer-store.ts`)
- Graph designer state → Module operations: composes (evidence: `packages/react-app/src/features/graph-designer/model/graph-designer-store.ts`)
- Graph designer state → Subgraph operations: composes (evidence: `packages/react-app/src/features/graph-designer/model/graph-designer-store.ts`)
- Graph designer state → Subsystem operations: composes (evidence: `packages/react-app/src/features/graph-designer/model/graph-designer-store.ts`)
- Edit sessions → Project services: reads project (evidence: `packages/react-app/src/features/graph-designer/model/edit-session-slice.ts`)
- Project services → HTTP client: requests data
- HTTP client → Creator API: sends requests (evidence: `README.md`)
- Project lifecycle → Project services: manages projects
- Electron IPC → Project file handling: dispatches file actions (evidence: `packages/electron-app/src/main.ts`)
- Electron IPC → Editor workspace: serves renderer
- Editor workspace → Key configuration: configures modules
- Editor workspace → Use case visualizer: views pipelines
- Editor workspace → Use case selection: selects use cases
- Editor workspace → Validation results: reviews validation
- Editor workspace → Device tuning: tunes devices