UI Display
This section is focused on what users see in the product UI.
For implementation details, data flow, and source-level behavior, jump to UI Contributing.
Screens and experience
1. Login
- Route:
/login - What users do: authenticate and enter the app.
- Tech details: Auth and route guard flow
2. Explorer dashboard
- Route:
/ - What users do:
- switch card/list views
- sort and paginate explorers
- watch live state updates
- Tech details:
3. Sidebar filters
- Context: dashboard sidebar
- What users do: narrow explorers by phase, namespace, scope, mount state, labels, and more.
- Tech details: Filter panel component
4. Explorer detail
- Route:
/explorers/:ns/:name - What users do:
- inspect status, mount state, labels, conditions, consumers
- connect/disconnect
- open file browser
- Tech details:
5. File browser
- Route:
/explorers/:ns/:name/files - What users do:
- browse tree and directories
- preview or edit files
- upload/rename/delete
- reconnect after idle sleep
- Tech details:
6. Scope list and detail
- Routes:
/scopes/scopes/:name
- What users do:
- inspect managed namespaces and explorer counts
- review defaults and generated manifest
- Screenshots:
- Tech details:
7. Scope creation
- Route:
/scopes/create - What users do:
- configure scope form
- verify live YAML preview
- copy/download manifest
- Tech details:
8. Settings
- Route:
/settings - What users do: toggle theme, view version and role, sign out.
- Tech details: Settings component details
Screenshot notes
To capture screenshots, run the UI in mock mode (cd ui && npm run dev) and open the app in your browser. Replace each comment above with a markdown image: . Store images under site/docs/public/images/ui/.