How audioreach/audioreach-creator-ui works
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: graph-designer-store.ts Graph designer state · SessionWorkspace.tsx Editor workspace · project-service.ts Project services · main.ts Electron IPC
Components 22
Desktop runtime
- App bootstrap
packages/react-app/src/main.tsx - Project file handling
packages/electron-app/src/project-file-api.ts - Electron IPC
packages/electron-app/src/main.ts
Projects and API
- HTTP client
packages/react-app/src/shared/api/http-client.ts - Project services
packages/react-app/src/entities/project/services/project-service.ts - Project lifecycle
packages/react-app/src/features/project-operations/hooks/use-project-lifecycle.ts
Graph design
- Graph designer state
packages/react-app/src/features/graph-designer/model/graph-designer-store.ts - Edit sessions
packages/react-app/src/features/graph-designer/model/edit-session-slice.ts - Graph data
packages/react-app/src/features/graph-designer/model/graph-data-slice.ts - Module data
packages/react-app/src/features/graph-designer/model/module-data-slice.ts - Module catalog
packages/react-app/src/features/graph-designer/model/module-list-slice.ts - Module operations
packages/react-app/src/features/graph-designer/lib/module-operations.ts - Subgraph operations
packages/react-app/src/features/graph-designer/lib/subgraph-operations.ts - Subsystem operations
packages/react-app/src/features/graph-designer/lib/subsystem-operations.ts - Key configuration
packages/react-app/src/features/key-configurator/model/key-configurator-store.ts
Use cases and views
- Editor workspace
packages/react-app/src/widgets/session-workspace/ui/SessionWorkspace.tsx - Use case visualizer
packages/react-app/src/features/usecase-visualizer/ui/usecase-visualizer.tsx - Use case selection
packages/react-app/src/features/usecase-selection/ui/usecase-selection-control.tsx - Validation results
packages/react-app/src/features/validation-result-view/validation-result-panel.tsx - Device tuning
packages/react-app/src/features/device-operations/hooks/use-device-manager.ts
Other components
- Audio engineer
- Creator API
Connections 21
- Audio engineer → App bootstrap: opens app
README.md - App bootstrap → Editor workspace: loads workspace
packages/react-app/src/main.tsx - Editor workspace → Graph designer state: edits graph
- Graph designer state → Edit sessions: composes
packages/react-app/src/features/graph-designer/model/graph-designer-store.ts - Graph designer state → Graph data: composes
packages/react-app/src/features/graph-designer/model/graph-designer-store.ts - Graph designer state → Module data: composes
packages/react-app/src/features/graph-designer/model/graph-designer-store.ts - Graph designer state → Module catalog: composes
packages/react-app/src/features/graph-designer/model/graph-designer-store.ts - Graph designer state → Module operations: composes
packages/react-app/src/features/graph-designer/model/graph-designer-store.ts - Graph designer state → Subgraph operations: composes
packages/react-app/src/features/graph-designer/model/graph-designer-store.ts - Graph designer state → Subsystem operations: composes
packages/react-app/src/features/graph-designer/model/graph-designer-store.ts - Edit sessions → Project services: reads project
packages/react-app/src/features/graph-designer/model/edit-session-slice.ts - Project services → HTTP client: requests data
- HTTP client → Creator API: sends requests
README.md - Project lifecycle → Project services: manages projects
- Electron IPC → Project file handling: dispatches file actions
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