@startuml
title Demo Settings Surface (After)
skinparam backgroundColor #FFFFFF
skinparam defaultFontColor #111111
skinparam shadowing false
skinparam ArrowColor #111111
skinparam componentStyle rectangle
skinparam component {
  BackgroundColor #FFFFFF
  BorderColor #111111
  FontColor #111111
}
skinparam rectangle {
  BackgroundColor #FFFFFF
  BorderColor #111111
  FontColor #111111
}
skinparam note {
  BackgroundColor #FFFFFF
  BorderColor #111111
  FontColor #111111
}

actor "User" as User

rectangle "apps/demo (Next.js)" as Demo {
  component "Route /settings\nAccountSettingsView" as SettingsPage
  component "Route /session\nSessionPanel (link to settings)" as SessionPanel
}

component "athena-auth-ui-js\nAthenaAuthAccountSettingsDialog" as UiPackage
component "athena-auth-js\nauthClient.useSession + callAuthEndpoint(/list-accounts)" as AthenaJs
component "Athena Auth API" as Api

User --> SessionPanel
SessionPanel --> SettingsPage : opens /settings
User --> SettingsPage

SettingsPage --> UiPackage : render profile/security panels
SettingsPage --> AthenaJs : load session + accounts
AthenaJs --> Api : HTTP requests

note right of UiPackage
Sidebar sections:
- Profile
- Security

Profile rows:
- Profile
- Email addresses
- Connected accounts
end note

@enduml
