@startuml
title Demo Settings Surface (Before)
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 /login\nAuthCard" as Login
  component "Route /session\nSessionPanel" as Session
  component "Route /session/activity\nSessionActivityView" as Activity
  component "Route /endpoint-lab\nEndpointLab" as EndpointLab
}

component "athena-auth-js\n(authClient + callAuthEndpoint)" as AthenaJs
component "Athena Auth API" as Api

User --> Login
User --> Session
User --> Activity
User --> EndpointLab

Session --> AthenaJs : useSession()
Activity --> AthenaJs : list/revoke sessions
EndpointLab --> AthenaJs : endpoint probes
AthenaJs --> Api : HTTP requests

note bottom of Session
No dedicated account settings dialog route.
Profile/email/account actions are split
across auth and lab screens.
end note

@enduml
