@startuml
skinparam componentStyle rectangle

component "Flutter Mobile App" {
  [Presentation Screens]
  [ApiClient + Interceptors]
  [TTS/STT/YOLO/Location Services]
  [WebSocketService]
  [CallService]
}

component "Spring Boot Backend" {
  [Controllers]
  [Services]
  [Repositories]
  [Security/JWT]
  [WebSocket Broker]
}

database "PostgreSQL" as DB
cloud "Firebase FCM" as FCM
cloud "Agora RTC" as Agora
cloud "OpenStreetMap/OSRM" as Maps

[Presentation Screens] --> [ApiClient + Interceptors]
[ApiClient + Interceptors] --> [Controllers] : REST /api/v1
[WebSocketService] --> [WebSocket Broker] : STOMP /ws
[CallService] --> [Controllers] : /shared/call
[Controllers] --> [Services]
[Services] --> [Repositories]
[Repositories] --> DB
[Services] --> FCM
[CallService] --> Agora
[Presentation Screens] --> Maps
@enduml