UI/Channels Architecture

graph TB
    Users[👥 Users]
    
    subgraph "Web Channel"
        WebApp[Next.js 15 Web App<br/>chat.mysakura.ca]
        Pages[40+ Pages<br/>Dashboard, Chat, Tracking]
        Components[100+ Components<br/>Reusable UI]
    end
    
    subgraph "Mobile Channel"
        RN[React Native App<br/>iOS & Android]
        MobilePages[Mobile-Optimized Pages]
        MobileComp[Mobile Components]
    end
    
    subgraph "Native Channel"
        iOS[iOS Native App<br/>Swift/SwiftUI]
        Android[Android Native App<br/>Kotlin/Jetpack]
    end
    
    subgraph "Communication Protocols"
        HTTP[HTTP/HTTPS<br/>REST API]
        WS[WebSocket<br/>Real-time]
        SSE[Server-Sent Events<br/>Streaming]
    end
    
    subgraph "Backend Services"
        FastAPI[FastAPI Backend<br/>40+ Endpoints]
        AgentSystem[Multi-Agent System<br/>18+ Agents]
    end
    
    subgraph "State Management"
        Context[React Context<br/>Global State]
        LocalStorage[Browser Storage<br/>Persistence]
        Cache[Client-side Cache<br/>Performance]
    end

    Users --> WebApp
    Users --> RN
    Users --> iOS
    Users --> Android
    
    WebApp --> Pages
    WebApp --> Components
    RN --> MobilePages
    RN --> MobileComp
    
    WebApp --> HTTP
    WebApp --> WS
    WebApp --> SSE
    RN --> HTTP
    RN --> WS
    iOS --> HTTP
    iOS --> WS
    Android --> HTTP
    Android --> WS
    
    HTTP --> FastAPI
    WS --> FastAPI
    SSE --> FastAPI
    
    FastAPI --> AgentSystem
    
    WebApp --> Context
    WebApp --> LocalStorage
    WebApp --> Cache
    RN --> Context
    RN --> LocalStorage

    style Users fill:#e3f2fd
    style WebApp fill:#c8e6c9
    style RN fill:#fff3e0
    style iOS fill:#f3e5f5
    style Android fill:#e1f5fe
    style HTTP fill:#ffebee
    style WS fill:#fce4ec
    style FastAPI fill:#f0f4c3