# yuanchaoy03-dot/ai-media-center architecture

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

- Interactive diagram: https://gitdiagram.com/yuanchaoy03-dot/ai-media-center
- Repository: https://github.com/yuanchaoy03-dot/ai-media-center

## Overview

Personal Cinema is a personal media-library application: users can create an account, configure WebDAV media sources and scan folders, then browse and organize movies. The frontend includes library, collection, favorites, watched/unwatched, recent, detail, and AI-discovery views; the sampled implementation uses mock data for much of this experience. The sampled backend implements authentication and a limited source-list endpoint; its source query deliberately rejects non-empty results. Unsampled feature wiring is therefore shown as capability nodes without speculative call edges.

Main entry points: [`frontend/src/App.vue`](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/App.vue) (App shell), [`frontend/src/views/MediaSourcesPreviewView.vue`](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/MediaSourcesPreviewView.vue) (Source preview), [`frontend/src/services/movieService.ts`](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/movieService.ts) (Movie queries), [`backend/src/main/java/com/shichaoya/aimediacenter/media/web/controller/MediaSourceController.java`](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/media/web/controller/MediaSourceController.java) (Media source API)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Frontend experience"]
  node_app["App shell<br/>[App.vue]"]
  node_authform["Login and register<br/>[AuthForm.vue]"]
  node_authclient["Auth session<br/>[authService.ts]"]
  node_http["HTTP client<br/>[http.ts]"]
  node_libraryviews["Library and movie views<br/>[LibraryView.vue]"]
  node_movieviews["Movie detail and status views"]
  node_collectionviews["Collections and favorites"]
  node_discovery["AI discovery"]
  node_search["Global search<br/>[GlobalSearch.vue]"]
end

subgraph group_media["Media management"]
  node_sourcesview["Source preview"]
  node_sourceservice["Source operations"]
  node_sourcemocks["Source fixtures<br/>[mediaSources.ts]"]
  node_movieservice["Movie queries<br/>[movieService.ts]"]
  node_libraryfixtures["Library fixtures<br/>[library.ts]"]
  node_collectionservice["Collection queries"]
end

subgraph group_backend["Backend API"]
  node_backendapp["Spring application"]
  node_authapi["Auth API"]
  node_sourceapi["Media source API"]
  node_sourcesquery["Source query"]
  node_sourcedb[("Source persistence")]
  node_apierrors["API error handling"]
end

subgraph group_identity["Identity and persistence"]
  node_authservice["Auth service<br/>[AuthService.java]"]
  node_users[("User persistence<br/>[UserMapper.java]")]
  node_tokens["JWT access tokens"]
end

node_user(("Viewer"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_authform
node_authform -->|"authenticates"| node_authclient
node_authclient -->|"sends requests"| node_http
node_http -.->|"calls API"| node_authapi
node_authapi -->|"delegates"| node_authservice
node_authservice -->|"reads and writes"| node_users
node_authservice -->|"issues token"| node_tokens
node_app -->|"hosts preview"| node_sourcesview
node_sourcesview -->|"manages sources"| node_sourceservice
node_sourcesview -->|"loads movies"| node_movieservice
node_sourceservice -->|"uses fixtures"| node_sourcemocks
node_sourcesview -.->|"not production-wired"| node_sourceapi
node_sourceapi -->|"delegates"| node_sourcesquery
node_sourcesquery -->|"reads source IDs"| node_sourcedb
node_app -->|"routes to"| node_libraryviews
node_app -->|"routes to"| node_movieviews
node_app -->|"routes to"| node_collectionviews
node_app -->|"routes to"| node_discovery
node_app -->|"opens preview search"| node_search
node_search -->|"searches movies"| node_movieservice
node_libraryviews -->|"loads movies"| node_movieservice
node_movieservice -->|"reads fixtures"| node_libraryfixtures
node_collectionviews -.->|"uses collections"| node_collectionservice
node_sourceapi -->|"errors handled by"| node_apierrors

click node_app "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/App.vue"
click node_authform "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/components/auth/AuthForm.vue"
click node_authclient "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/authService.ts"
click node_http "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/http.ts"
click node_sourcesview "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/MediaSourcesPreviewView.vue"
click node_sourceservice "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/mediaSourceService.ts"
click node_sourcemocks "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/mocks/mediaSources.ts"
click node_libraryviews "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/LibraryView.vue"
click node_movieviews "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/MovieDetailView.vue"
click node_collectionviews "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/CollectionDetailView.vue"
click node_discovery "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/AiDiscoveryView.vue"
click node_search "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/components/layout/GlobalSearch.vue"
click node_movieservice "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/movieService.ts"
click node_libraryfixtures "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/mocks/library.ts"
click node_collectionservice "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/collectionService.ts"
click node_backendapp "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/AiMediaCenterApplication.java"
click node_authapi "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/user/web/controller/AuthController.java"
click node_authservice "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/user/application/service/AuthService.java"
click node_users "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/user/infrastructure/persistence/UserMapper.java"
click node_tokens "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/user/infrastructure/security/JwtAccessTokens.java"
click node_sourceapi "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/media/web/controller/MediaSourceController.java"
click node_sourcesquery "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/media/application/service/MediaSourceQueryService.java"
click node_sourcedb "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/media/infrastructure/persistence/MediaSourceMapper.java"
click node_apierrors "https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/common/web/ApiExceptionHandler.java"

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_authform,node_authclient,node_http,node_libraryviews,node_movieviews,node_collectionviews,node_discovery,node_search,node_user toneBlue
class node_sourcesview,node_sourceservice,node_sourcemocks,node_movieservice,node_libraryfixtures,node_collectionservice toneAmber
class node_backendapp,node_authapi,node_sourceapi,node_sourcesquery,node_sourcedb,node_apierrors toneMint
class node_authservice,node_users,node_tokens toneRose
```

## Components

### Frontend experience

- [App shell](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/App.vue): `frontend/src/App.vue`
- [Login and register](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/components/auth/AuthForm.vue): `frontend/src/components/auth/AuthForm.vue`
- [Auth session](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/authService.ts): `frontend/src/services/authService.ts`
- [HTTP client](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/http.ts): `frontend/src/services/http.ts`
- [Library and movie views](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/LibraryView.vue): `frontend/src/views/LibraryView.vue`
- [Movie detail and status views](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/MovieDetailView.vue): `frontend/src/views/MovieDetailView.vue`
- [Collections and favorites](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/CollectionDetailView.vue): `frontend/src/views/CollectionDetailView.vue`
- [AI discovery](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/AiDiscoveryView.vue): `frontend/src/views/AiDiscoveryView.vue`
- [Global search](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/components/layout/GlobalSearch.vue): `frontend/src/components/layout/GlobalSearch.vue`

### Media management

- [Source preview](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/views/MediaSourcesPreviewView.vue): `frontend/src/views/MediaSourcesPreviewView.vue`
- [Source operations](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/mediaSourceService.ts): `frontend/src/services/mediaSourceService.ts`
- [Source fixtures](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/mocks/mediaSources.ts): `frontend/src/mocks/mediaSources.ts`
- [Movie queries](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/movieService.ts): `frontend/src/services/movieService.ts`
- [Library fixtures](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/mocks/library.ts): `frontend/src/mocks/library.ts`
- [Collection queries](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/frontend/src/services/collectionService.ts): `frontend/src/services/collectionService.ts`

### Backend API

- [Spring application](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/AiMediaCenterApplication.java): `backend/src/main/java/com/shichaoya/aimediacenter/AiMediaCenterApplication.java`
- [Auth API](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/user/web/controller/AuthController.java): `backend/src/main/java/com/shichaoya/aimediacenter/user/web/controller/AuthController.java`
- [Media source API](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/media/web/controller/MediaSourceController.java): `backend/src/main/java/com/shichaoya/aimediacenter/media/web/controller/MediaSourceController.java`
- [Source query](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/media/application/service/MediaSourceQueryService.java): `backend/src/main/java/com/shichaoya/aimediacenter/media/application/service/MediaSourceQueryService.java`
- [Source persistence](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/media/infrastructure/persistence/MediaSourceMapper.java): `backend/src/main/java/com/shichaoya/aimediacenter/media/infrastructure/persistence/MediaSourceMapper.java`
- [API error handling](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/common/web/ApiExceptionHandler.java): `backend/src/main/java/com/shichaoya/aimediacenter/common/web/ApiExceptionHandler.java`

### Identity and persistence

- [Auth service](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/user/application/service/AuthService.java): `backend/src/main/java/com/shichaoya/aimediacenter/user/application/service/AuthService.java`
- [User persistence](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/user/infrastructure/persistence/UserMapper.java): `backend/src/main/java/com/shichaoya/aimediacenter/user/infrastructure/persistence/UserMapper.java`
- [JWT access tokens](https://github.com/yuanchaoy03-dot/ai-media-center/blob/main/backend/src/main/java/com/shichaoya/aimediacenter/user/infrastructure/security/JwtAccessTokens.java): `backend/src/main/java/com/shichaoya/aimediacenter/user/infrastructure/security/JwtAccessTokens.java`

### Other components

- **Viewer**

## Connections

- Viewer → App shell: uses
- App shell → Login and register: renders
- Login and register → Auth session: authenticates
- Auth session → HTTP client: sends requests
- HTTP client → Auth API: calls API
- Auth API → Auth service: delegates
- Auth service → User persistence: reads and writes
- Auth service → JWT access tokens: issues token
- App shell → Source preview: hosts preview
- Source preview → Source operations: manages sources
- Source preview → Movie queries: loads movies
- Source operations → Source fixtures: uses fixtures
- Source preview → Media source API: not production-wired
- Media source API → Source query: delegates
- Source query → Source persistence: reads source IDs
- App shell → Library and movie views: routes to
- App shell → Movie detail and status views: routes to
- App shell → Collections and favorites: routes to
- App shell → AI discovery: routes to
- App shell → Global search: opens preview search
- Global search → Movie queries: searches movies
- Library and movie views → Movie queries: loads movies
- Movie queries → Library fixtures: reads fixtures
- Collections and favorites → Collection queries: uses collections
- Media source API → API error handling: errors handled by