graph TB
    subgraph "Frontend Layer"
        WEB[React Frontend<br/>Port 5176]
        DESKTOP[Electron Desktop<br/>Port 5173]
        MOBILE[React Native Mobile<br/>In Development]
    end

    subgraph "API Gateway & Load Balancer"
        HAPROXY[HAProxy<br/>Port 80/443]
        NGINX[Nginx<br/>Port 8080]
    end

    subgraph "Backend Services"
        API[Go Backend API<br/>Port 8080<br/>Gin Framework]
        CHAT[Rust Chat Server<br/>Port 3001<br/>WebSocket + Axum]
        STREAM[Rust Stream Server<br/>Port 3002<br/>Audio Streaming]
    end

    subgraph "Data Layer"
        POSTGRES[(PostgreSQL<br/>Port 5432<br/>Main Database)]
        REDIS[(Redis Cache<br/>Port 6379<br/>Session & Cache)]
    end

    subgraph "Monitoring & Logging"
        PROMETHEUS[Prometheus<br/>Port 9090<br/>Metrics Collection]
        GRAFANA[Grafana<br/>Port 3000<br/>Dashboards]
        ELASTICSEARCH[Elasticsearch<br/>Port 9200<br/>Log Storage]
        KIBANA[Kibana<br/>Port 5601<br/>Log Analysis]
        FILEBEAT[Filebeat<br/>Log Shipping]
    end

    subgraph "External Services"
        OAUTH[OAuth Providers<br/>Google, GitHub, Discord]
        EMAIL[Email Service<br/>Magic Links]
        CDN[CDN<br/>Static Assets]
    end

    subgraph "Infrastructure"
        DOCKER[Docker Containers]
        COMPOSE[Docker Compose]
        VOLUMES[Persistent Volumes]
    end

    %% Frontend connections
    WEB --> HAPROXY
    DESKTOP --> HAPROXY
    MOBILE --> HAPROXY

    %% Load balancer routing
    HAPROXY --> API
    HAPROXY --> CHAT
    HAPROXY --> STREAM
    NGINX --> WEB

    %% Backend to data
    API --> POSTGRES
    API --> REDIS
    CHAT --> POSTGRES
    CHAT --> REDIS
    STREAM --> POSTGRES
    STREAM --> REDIS

    %% Inter-service communication
    API -.->|gRPC| CHAT
    API -.->|gRPC| STREAM
    CHAT -.->|WebSocket| WEB
    STREAM -.->|HTTP Streaming| WEB

    %% External integrations
    API --> OAUTH
    API --> EMAIL
    WEB --> CDN

    %% Monitoring connections
    API --> PROMETHEUS
    CHAT --> PROMETHEUS
    STREAM --> PROMETHEUS
    PROMETHEUS --> GRAFANA
    API --> ELASTICSEARCH
    CHAT --> ELASTICSEARCH
    STREAM --> ELASTICSEARCH
    FILEBEAT --> ELASTICSEARCH
    ELASTICSEARCH --> KIBANA

    %% Infrastructure
    DOCKER --> API
    DOCKER --> CHAT
    DOCKER --> STREAM
    DOCKER --> POSTGRES
    DOCKER --> REDIS
    DOCKER --> PROMETHEUS
    DOCKER --> GRAFANA
    DOCKER --> ELASTICSEARCH
    DOCKER --> KIBANA
    DOCKER --> FILEBEAT

    %% Styling
    classDef frontend fill:#e1f5fe
    classDef backend fill:#f3e5f5
    classDef data fill:#e8f5e8
    classDef monitoring fill:#fff3e0
    classDef external fill:#fce4ec
    classDef infra fill:#f5f5f5

    class WEB,DESKTOP,MOBILE frontend
    class API,CHAT,STREAM backend
    class POSTGRES,REDIS data
    class PROMETHEUS,GRAFANA,ELASTICSEARCH,KIBANA,FILEBEAT monitoring
    class OAUTH,EMAIL,CDN external
    class DOCKER,COMPOSE,VOLUMES infra