# アーキテクチャ構成図

## システム全体構成図

```mermaid
graph TB
    subgraph "クライアント層"
        subgraph "Electron Desktop App"
            EL[Electron Main Process]
            ELR[Electron Renderer Process]
            ELS[Local Sync Server<br/>sync-server]
        end

        subgraph "Browser App"
            BA[React SPA<br/>desktop-client]
            SW[Service Worker]
        end
    end

    subgraph "同期サーバー層"
        SS[Sync Server<br/>Express.js]
        AD[Account DB<br/>SQLite]
        UF[User Files<br/>ファイルシステム]
    end

    subgraph "外部サービス"
        GC[GoCardless API]
        SF[SimpleFIN API]
        PA[PluggyAI API]
        OID[OpenID Provider]
    end

    EL --> ELR
    EL --> ELS
    ELR --> |IPC| EL
    BA --> |HTTP/WS| SS
    ELS --> |HTTP| SS

    SS --> AD
    SS --> UF
    SS --> GC
    SS --> SF
    SS --> PA
    SS --> OID
```

## パッケージ依存関係図

```mermaid
graph TD
    subgraph "アプリケーションパッケージ"
        DE[desktop-electron]
        DC[desktop-client<br/>@actual-app/web]
        SS[sync-server<br/>@actual-app/sync-server]
        API[api<br/>@actual-app/api]
    end

    subgraph "コアパッケージ"
        LC[loot-core]
        CRDT[@actual-app/crdt]
        CL[component-library<br/>@actual-app/components]
    end

    subgraph "開発ツール"
        ESL[eslint-plugin-actual]
        CI[ci-actions]
        DOCS[docs]
        PS[plugins-service]
    end

    DE --> LC
    DE --> DC
    DE --> SS
    DC --> LC
    DC --> CL
    SS --> CRDT
    SS --> DC
    API --> LC
    API --> CRDT
    LC --> CRDT
```

## loot-core 内部構成図

```mermaid
graph TD
    subgraph "loot-core"
        subgraph "Client Layer"
            CL_ST[Redux Store]
            CL_HD[Client Handlers]
            CL_QH[Query Hooks]
        end

        subgraph "Server Layer"
            SV_MAIN[Main Handler]
            SV_API[API]

            subgraph "Domain Modules"
                DM_BUD[Budget]
                DM_TRX[Transactions]
                DM_ACC[Accounts]
                DM_RUL[Rules]
                DM_SCH[Schedules]
                DM_PAY[Payees]
                DM_TAG[Tags]
                DM_RPT[Reports]
            end

            subgraph "Infrastructure"
                INF_DB[Database<br/>SQLite]
                INF_SYN[Sync Engine<br/>CRDT]
                INF_ENC[Encryption]
            end
        end

        subgraph "Platform Abstraction"
            PL_FS[File System]
            PL_SQL[SQLite Driver]
            PL_FET[Fetch]
            PL_LOG[Logger]
        end

        subgraph "Shared"
            SH_UTL[Utilities]
            SH_QRY[Query Builder<br/>AQL]
            SH_TYP[Type Definitions]
        end
    end

    CL_ST --> CL_HD
    CL_HD --> SV_MAIN
    CL_QH --> SV_API

    SV_MAIN --> DM_BUD
    SV_MAIN --> DM_TRX
    SV_MAIN --> DM_ACC
    SV_MAIN --> DM_RUL
    SV_MAIN --> DM_SCH
    SV_MAIN --> DM_PAY
    SV_MAIN --> DM_TAG
    SV_MAIN --> DM_RPT

    DM_BUD --> INF_DB
    DM_TRX --> INF_DB
    DM_ACC --> INF_DB
    DM_RUL --> INF_DB

    INF_SYN --> INF_DB
    INF_SYN --> INF_ENC

    INF_DB --> PL_SQL
    INF_SYN --> PL_FET
```

## 同期サーバー構成図

```mermaid
graph TD
    subgraph "sync-server"
        APP[Express App]

        subgraph "Middleware"
            MW_CORS[CORS]
            MW_RATE[Rate Limit]
            MW_AUTH[Session Validation]
            MW_LOG[Request Logger]
            MW_ERR[Error Handler]
        end

        subgraph "Route Handlers"
            RT_SYNC[/sync<br/>Sync API]
            RT_ACC[/account<br/>Account API]
            RT_ADM[/admin<br/>Admin API]
            RT_GC[/gocardless<br/>Bank Sync]
            RT_SF[/simplefin<br/>Bank Sync]
            RT_PA[/pluggyai<br/>Bank Sync]
            RT_OID[/openid<br/>SSO]
            RT_SEC[/secret<br/>Secrets]
        end

        subgraph "Services"
            SV_FILE[Files Service]
            SV_SYNC[Simple Sync]
            SV_AUTH[Auth Service]
        end

        subgraph "Data Layer"
            DL_ACCDB[Account DB<br/>SQLite]
            DL_FILES[User Files<br/>File System]
        end
    end

    APP --> MW_CORS
    MW_CORS --> MW_RATE
    MW_RATE --> MW_AUTH
    MW_AUTH --> MW_LOG

    MW_LOG --> RT_SYNC
    MW_LOG --> RT_ACC
    MW_LOG --> RT_ADM
    MW_LOG --> RT_GC
    MW_LOG --> RT_SF
    MW_LOG --> RT_PA
    MW_LOG --> RT_OID
    MW_LOG --> RT_SEC

    RT_SYNC --> SV_SYNC
    RT_ACC --> SV_AUTH
    RT_SYNC --> SV_FILE

    SV_FILE --> DL_ACCDB
    SV_FILE --> DL_FILES
    SV_AUTH --> DL_ACCDB
    SV_SYNC --> DL_FILES
```

## CRDT同期フロー図

```mermaid
sequenceDiagram
    participant C1 as Client 1
    participant DB1 as Local DB 1
    participant SS as Sync Server
    participant DB2 as Local DB 2
    participant C2 as Client 2

    Note over C1,C2: データ変更発生
    C1->>DB1: データ更新
    DB1->>DB1: CRDTメッセージ生成<br/>(Timestamp付き)
    DB1->>DB1: Merkle Trie更新

    Note over C1,SS: 同期開始
    C1->>SS: POST /sync<br/>(SyncRequest: messages, since)
    SS->>SS: メッセージマージ
    SS->>SS: 新しいメッセージ抽出
    SS-->>C1: SyncResponse<br/>(merkle, newMessages)

    C1->>DB1: 受信メッセージ適用
    DB1->>DB1: Merkle Trie更新

    Note over SS,C2: 他クライアントへの伝播
    C2->>SS: POST /sync<br/>(SyncRequest: messages, since)
    SS-->>C2: SyncResponse<br/>(C1の変更を含む)
    C2->>DB2: 受信メッセージ適用
```

## Electron アプリケーション構成図

```mermaid
graph TD
    subgraph "Electron Application"
        subgraph "Main Process"
            MAIN[index.ts<br/>アプリケーションエントリ]
            MENU[Menu Manager]
            IPC_M[IPC Main Handlers]
            WIN[Window Management]
            SRV_PROC[Server Process<br/>Utility Process]
            SYNC_SRV[Sync Server Process<br/>Utility Process]
            OAUTH[OAuth Server]
        end

        subgraph "Renderer Process"
            PRELOAD[Preload Script]
            REACT[React Application<br/>desktop-client]
            IPC_R[IPC Renderer]
        end

        subgraph "Utility Processes"
            LOOT[loot-core<br/>Background Processing]
            SS_LOCAL[Local Sync Server]
        end
    end

    subgraph "File System"
        USER_DATA[User Data Dir]
        DOC_DIR[Documents Dir]
        PREFS[global-store.json]
    end

    MAIN --> WIN
    MAIN --> MENU
    MAIN --> IPC_M
    MAIN --> SRV_PROC
    MAIN --> SYNC_SRV
    MAIN --> OAUTH

    WIN --> PRELOAD
    PRELOAD --> REACT
    REACT --> IPC_R
    IPC_R --> IPC_M

    SRV_PROC --> LOOT
    SYNC_SRV --> SS_LOCAL

    LOOT --> USER_DATA
    SS_LOCAL --> DOC_DIR
    MAIN --> PREFS
```

## 認証フロー図

```mermaid
sequenceDiagram
    participant U as User
    participant C as Client
    participant SS as Sync Server
    participant OID as OpenID Provider

    alt パスワード認証
        U->>C: パスワード入力
        C->>SS: POST /account/login
        SS->>SS: bcrypt検証
        SS-->>C: Session Token
        C->>C: トークン保存
    else OpenID認証
        U->>C: OpenIDログイン選択
        C->>SS: GET /openid/config
        SS-->>C: OpenID設定
        C->>OID: 認証リクエスト
        OID-->>U: ログインページ
        U->>OID: 認証情報入力
        OID-->>C: 認可コード
        C->>SS: POST /openid/callback
        SS->>OID: トークン交換
        OID-->>SS: ID Token
        SS->>SS: ユーザー作成/更新
        SS-->>C: Session Token
    end

    Note over C,SS: 以降のAPIリクエスト
    C->>SS: API Request + Token
    SS->>SS: validateSessionMiddleware
    SS-->>C: Response
```

## レイヤー構成図

```mermaid
graph TB
    subgraph "Presentation Layer"
        UI[React Components<br/>desktop-client/components]
        STYLE[Styles<br/>Emotion CSS]
        ICONS[Icons<br/>component-library]
    end

    subgraph "Application Layer"
        REDUX[Redux Store<br/>@reduxjs/toolkit]
        HOOKS[React Hooks<br/>desktop-client/hooks]
        SLICES[Redux Slices<br/>accounts, budget, etc.]
    end

    subgraph "Domain Layer"
        HANDLERS[Handlers<br/>loot-core/server]
        DOMAIN[Domain Logic<br/>budget, transactions, rules]
        AQL[Query Language<br/>AQL]
    end

    subgraph "Infrastructure Layer"
        DB[SQLite<br/>better-sqlite3 / sql.js]
        SYNC[CRDT Sync<br/>@actual-app/crdt]
        ENC[Encryption<br/>loot-core/encryption]
        FETCH[HTTP Client<br/>platform/fetch]
    end

    subgraph "Platform Layer"
        PL_ELEC[Electron APIs]
        PL_WEB[Web APIs]
        PL_NODE[Node.js APIs]
    end

    UI --> REDUX
    UI --> HOOKS
    HOOKS --> REDUX
    REDUX --> SLICES
    SLICES --> HANDLERS
    HANDLERS --> DOMAIN
    DOMAIN --> DB
    DOMAIN --> AQL
    SYNC --> DB
    SYNC --> FETCH
    ENC --> DB
    DB --> PL_ELEC
    DB --> PL_WEB
    FETCH --> PL_NODE
```
