Check max-age only after checking permissions: if neither is passing, we want a 403 error; simply authenticating again won't fix it so don't bother reauth flow. After forbidden flow e.g. account change we are already good with max-age too.

perm=a|b+c now means (a or b) and c; repeated perm args remain ANDed.
Out-of-spec values (empty alternatives, chars outside the scope charset,
stray %2B) are rejected with 400 instead of being silently misparsed;
extra spaces between groups are tolerated. Forward endpoint 400/500
details name /auth/api/forward as origin without echoing query args.
Wildcards are now filename-like: * stays within a :- or /-separated
segment, ** spans segments, partial segments allowed. Slash added to
allowed scope characters for path-based permissions.

.gitignore

@@ -5,6 +5,8 @@ dist/
 *.lock
 package-lock.json
 paskia.sqlite
+*.paskiadb
+*.data
 /paskia/frontend-build
 /paskia/_version.py
 coverage-html/

API.md

@@ -1,105 +0,0 @@
-# Paskia API Documentation
-
-This document lists the HTTP and WebSocket endpoints exposed by the Paskia
-service and how they behave depending on whether a dedicated authentication host
-(`--auth-host` / environment `PASSKEY_AUTH_HOST`) is configured.
-
-## Base Paths & Host Modes
-
-Two deployment modes:
-
-1. Multi‑host (default – no `--auth-host` provided)
-   - All endpoints are reachable on any host under the `/auth/` prefix.
-   - A convenience root (`/`) also serves the main app.
-
-2. Dedicated auth host (`--auth-host auth.example.com`)
-   - The specified auth host serves the UI at the root (`/`, `/admin/`, reset tokens, etc.).
-   - Other (non‑auth) hosts show a lightweight account summary at `/` or `/auth/`, while other UI routes still redirect to the auth host.
-   - Restricted endpoints on non‑auth hosts return `404` instead of redirecting.
-
-### Path Mapping When Auth Host Enabled
-
-| Purpose | On Auth Host | On Other Hosts (incoming) | Action |
-|---------|--------------|---------------------------|--------|
-| Main UI | `/` | `/auth/` or `/` | Serve account summary SPA (no redirect) |
-| Admin UI root | `/admin/` | `/auth/admin/` or `/admin/` | Redirect -> auth host `/admin/` (strip `/auth`) |
-| Reset / device addition token | `/{token}` | `/auth/{token}` | Redirect -> auth host `/{token}` (strip `/auth`) |
-| Static assets | `/auth/assets/*` | `/auth/assets/*` | Served directly (no redirect) |
-| Unrestricted API | `/auth/api/...` | `/auth/api/...` | Served directly |
-| Restricted API (admin,user,ws namespaces) | `/auth/api/{admin|user|ws}*` | same path | 404 on non‑auth hosts |
-| WebSocket (register/auth) | `/auth/ws/*` | `/auth/ws/*` | 404 on non‑auth hosts |
-
-Notes:
-- “Strip `/auth`” means only when the path starts with that exact segment.
-- A reset token is a single path segment validated by server logic; malformed tokens 404.
-- Method and body are preserved for UI redirects (307 Temporary Redirect).
-
-## HTTP UI Endpoints
-
-| Method | Path (multi‑host) | Path (auth host) | Description |
-|--------|-------------------|------------------|-------------|
-| GET | `/auth/` | `/` | Main authentication SPA (non-auth hosts show an account summary view) |
-| GET | `/auth/admin/` | `/admin/` | Admin SPA root |
-| GET | `/auth/{reset_token}` | `/{reset_token}` | Reset / device addition SPA (token validated) |
-
-## Core API (Unrestricted – available on all hosts)
-
-Always under `/auth/api/` (even on auth host):
-
-| Method | Path | Description |
-|--------|------|-------------|
-| GET | `/auth/restricted/` | Authentication UI for iframe embedding (supports `?mode=login` or `?mode=reauth`) |
-|--------|------|-------------|
-| POST | `/auth/api/validate` | Validate & (conditionally) renew session |
-| GET | `/auth/api/forward` | Auth proxy endpoint for reverse proxies (204 or 4xx) |
-| POST | `/auth/api/set-session` | Set cookie from Bearer token |
-| POST | `/auth/api/logout` | Logout current session |
-| POST | `/auth/api/user-info` | Authenticated user + context info (also handles reset tokens) |
-| POST | `/auth/api/create-link` | Create a device addition link (reset token) |
-| DELETE | `/auth/api/credential/{uuid}` | Delete user credential |
-| DELETE | `/auth/api/session/{session_id}` | Terminate a specific session |
-| POST | `/auth/api/user/logout-all` | Terminate all sessions for the user |
-| PUT | `/auth/api/user/display-name` | Update display name |
-
-## Restricted API Namespaces
-
-When `--auth-host` is set, requests to these paths on non‑auth hosts return 404:
-
-| Namespace | Examples |
-|-----------|----------|
-| `/auth/api/admin` | `/auth/api/admin/orgs`, `/auth/api/admin/orgs/{uuid}` ... |
-| `/auth/api/user` | Segment prefix – includes `/auth/api/user/...` endpoints (logout-all, display-name, session, credential) |
-| `/auth/api/ws` | (Reserved / future) |
-
-## WebSockets (Passkey)
-
-| Path | Description | Host Mode Behavior |
-|------|-------------|--------------------|
-| `/auth/ws/register` | Register new credential (new or existing user) | 404 on non‑auth hosts when auth host configured |
-| `/auth/ws/authenticate` | Authenticate user & issue session | 404 on non‑auth hosts when auth host configured |
-
-## Redirection & Status Codes
-
-| Scenario | Response |
-|----------|----------|
-| UI path on non‑auth host (auth host configured) | 307 redirect to auth host; `/auth` prefix stripped |
-| Reset token UI path on non‑auth host | 307 redirect (token preserved) |
-| Restricted API on non‑auth host | 404 |
-| Unrestricted API on any host | Normal response |
-| No auth host configured | All hosts behave like multi-host mode (no redirects; everything accessible) |
-
-## Headers for /auth/api/forward
-See `Headers.md` for details of headers returned on success (204).
-
-## Notes for Integrators
-1. Always use absolute `/auth/api/...` paths for programmatic requests (they do not move when an auth host is introduced).
-2. Bookmark / deep links to UI should resolve correctly after redirection if users access via a non-auth application host.
-3. Treat 404 from restricted namespaces on non-auth hosts as a signal to direct users to the central auth site.
-
-## Environment & CLI Summary
-| Option | Effect |
-|--------|--------|
-| `--auth-host` / `PASSKEY_AUTH_HOST` | Enables dedicated host mode, root-mounts UI there, restricts certain namespaces elsewhere |
-
----
-This document reflects current behavior of the middleware-based host routing logic.

Caddy.md

@@ -1,64 +0,0 @@
-## Caddy configuration
-
-We provide a few Caddy snippets that make the configuration easier, although the `forward_auth` directive of Caddy can be used directly as well. Place the auth folder with the snippets where your Caddyfile is.
-
-What these snippets do
-- Mount the auth UI at `/auth/` proxying to `:4401` (auth backend)
-- Use the forward-auth interface `/auth/api/forward` to verify the required credentials
-- Render a login page or a permission denied page if needed (without changing URL)
-
-Your backend may not use authentication at all, or it can make use of the user information passed via `Remote-*` headers by the authentication system, see [Headers.md](Headers.md) for details.
-
-### 1) Protect the full site (auth/all)
-
-Use this when you want “login required everywhere” which is useful to protect some service that doesn't have any authentication of its own:
-
-```caddyfile
-localhost {
-    import auth/all "" {
-        reverse_proxy :3000  # your app
-    }
-}
-```
-
-The auth/all protects the entire site with a simple directive. Put your normal setup inside the block. In this example we don't require any permissions, only that the user is logged in. Instead of `""` you may specify `perm=myapp:login` or other permissions.
-
-It is possible to add your own `handle @matcher` blocks prior importing `auth/all` for endpoints that don't require authentication, e.g. to exclude `/favicon.ico`.
-
-### 2) Different areas, different permissions (auth/setup, auth/require)
-
-When you need a more fine-grained control, use the auth/setup and auth/require snippets:
-
-```caddyfile
-localhost {
-    import auth/setup
-
-    @public path /.well-known/* /favicon.ico
-    handle @public {
-        root * /var/www/
-        file_server
-    }
-
-    @reports path /reports
-    handle @reports {
-        import auth/require perm=myapp:reports
-        reverse_proxy :3000
-    }
-
-    # Anywhere else, require login only
-    handle {
-        import auth/require ""
-        reverse_proxy :3000
-    }
-}
-```
-
-Note: We use the `handle @name` approach rather than `handle_path` to prevent the matched path being removed out of upstream URL. Unlike bare directives, these blocks will be tried in sequence and each can contain what you'd typically put in your site definition.
-
----
-
-## Override the auth backend URL (AUTH_UPSTREAM)
-
-By default, the auth service is contacted at localhost port 4401 ("for authentication required"). You can point Caddy to a different by setting the `AUTH_UPSTREAM` environment variable for Caddy.
-
-If unset, the snippets use `:4401` by default.

Headers.md

@@ -1,17 +0,0 @@
-## Headers your app receives
-
-When a request is allowed, the auth service adds these headers before proxying to your app (e.g., the service at `:3000`). Your app can use them for user context and authorization.
-
-| Header | Meaning | Example |
-|---|---|---|
-| `Remote-User` | Authenticated user UUID | `3f1a2b3c-4d5e-6789-abcd-ef0123456789` |
-| `Remote-Name` | User display name | `Jane Doe` |
-| `Remote-Org` | Organization UUID | `a1b2c3d4-1111-2222-3333-444455556666` |
-| `Remote-Org-Name` | Organization display name | `Acme Inc` |
-| `Remote-Role` | Role UUID | `b2c3d4e5-2222-3333-4444-555566667777` |
-| `Remote-Role-Name` | Role display name | `Administrators` |
-| `Remote-Groups` | Comma‑separated permissions the user has | `myapp:reports,auth:admin` |
-| `Remote-Session-Expires` | Session expiry timestamp (ISO 8601) | `2025-09-25T14:30:00Z` |
-| `Remote-Credential` | Credential UUID backing the session | `c3d4e5f6-3333-4444-5555-666677778888` |
-
-Note: Any incoming `Remote-*` headers from clients are stripped by our [Caddy configuration](Caddy.md), so that apps can trust these values.

README.md

@@ -1,72 +1,225 @@
 # Paskia
 
+![Login dialog screenshot](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/login-light.webp)
+
 An easy to install passkey-based authentication service that protects any web application with strong passwordless login.
 
 ## What is Paskia?
 
 - Easy to use fully featured auth&auth system (login and permissions)
-- Organization and role-based access control (optional)
+- Organization and role-based access control
    * Org admins control their users and roles
-   * Master admin can create multiple independent orgs
-   * Master admin makes permissions available for orgs to assign
-- User Profile and Administration by API and web interface.
-under `/auth/` or `auth.example.com`
-- Reset tokens and additional device linking via QR code or codewords.
-- Pure Python, FastAPI, packaged with prebuilt Vue frontend
+   * Multiple independent orgs
+   * Master admin can do everything or delegate to org admins
+- User Profile and Admin by API and web interface
+- Implements login/reauth/forbidden flows for you
+- Single Sign-On (SSO): Users register once and authenticate across your services
+- Remote autentication by entering random keywords from another device (like 2fa)
+- No CORS, NodeJS or anything extra needed.
+
+## Authenticate to get to your app, or in your app
 
-Two interfaces:
 - API fetch: auth checks and login without leaving your app
-- Forward-auth proxy: protect any unprotected site or service (Caddy, Nginx)
+- Forward-auth proxy: protect any unprotected site or service ([Caddy](docs/proxy/caddy.md), [Nginx](docs/proxy/nginx.md), and [others](docs/proxy/index.md))
 
 The API mode is useful for applications that can be customized to run with Paskia. Forward auth can also protect your javascript and other assets. Each provides fine-grained permission control and reauthentication requests where needed, and both can be mixed where needed.
 
-Single Sign-On (SSO): Users register once and authenticate across all applications under your domain name (configured rp-id).
+## Authentication flows already done
+
+![Forbidden dialog, dark mode](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/forbidden-dark.webp)
+**Automatic light/dark mode switching with overrides by user profile and protected app's theme.**
+
+Paskia includes set of login, reauthentication and forbidden dialogs that it can use to perform the needed flows. We never leave the URL, no redirections, and if you make use of API mode, we won't even interrupt whatever your app was doing but retry the blocked API fetch after login like nothing happened.
 
 ## Quick Start
 
 Install [UV](https://docs.astral.sh/uv/getting-started/installation/) and run:
 
-```fish
-uvx paskia serve --rp-id example.com
+```sh
+uvx paskia --rp-id example.com
 ```
 
-On the first run it downloads the software and prints a registration link for the Admin. If you are going to be connecting `localhost` directly, for testing, leave out the rp-id.
+On the first run it downloads the software and prints a registration link for the Admin. The server starts on [localhost:4401](http://localhost:4401), serving authentication for `*.example.com`. For local testing, leave out `--rp-id`.
 
-The server will start up on [localhost:4401](http://localhost:4401) "for authentication required", serving for `*.example.com`.
-
-Otherwise you will need a web server such as [Caddy](https://caddyserver.com/) to serve HTTPS on your actual domain names and proxy requests to Paskia and your backend apps.
-
-A quick example without any config file:
-```fish
-sudo caddy reverse-proxy --from example.com --to :4401
-```
+For production you need a web server such as [Caddy](https://caddyserver.com/) to serve HTTPS on your actual domain names and proxy requests to Paskia and your backend apps (see documentation below).
 
 For a permanent install of `paskia` CLI command, not needing `uvx`:
 
-```fish
+```sh
 uv tool install paskia
 ```
 
 ## Configuration
 
-There is no config file. Pass only the options on CLI:
+You will need to specify your main domain to which all passkeys will be tied as rp-id. Use your main domain even if Paskia is not running there. All other options are optional.
 
 ```text
-paskia serve [options]
+paskia [options]
 ```
 
-Optional options:
+| Option | Description | Default |
+|--------|-------------|---------|
+| -l, --listen *endpoint* | Listen address: *host*:*port*, :*port* (all interfaces), or */path.sock* | **localhost:4401** |
+| --rp-id *domain* | Main/top domain for passkeys | **localhost** |
+| --rp-name *"text"* | Branding name for the entire system (passkey auth, login dialog). | Same as rp-id |
+| --origin *url* | Only sites listed can login (repeatable) | rp-id and all subdomains |
+| --auth-host *url* | Dedicated authentication site, e.g. **auth.example.com** | Use **/auth/** path on each site |
+| --save | Save current options to database | (only --rp-id required on further invocations) |
 
-- Listen address (one of):
-    * `[host]:port`: Address and port (default: `localhost:4401`)
-    * `unix:/path.sock`: Unix socket
-- `--rp-id <domain>`: Main domain (required for production)
-- `--rp-name "<text>"`: Name of your company or site (default: same as rp-id)
-- `--origin <url>`: Explicit single site (default: `https://<rp-id>`)
-- `--auth-host <domain>`: Dedicated authentication site (e.g., `auth.example.com`)
+To clear a stored setting, pass an empty value like `--auth-host=`. The database is stored in `{rp-id}.paskiadb` folder in current directory. This can be overridden by environment `PASKIA_DB` if needed.
 
-## Documentation
+## Tutorial: From Local Testing to Production
 
-- `API.md`: Complete HTTP and WebSocket API reference
-- `Caddy.md`: Caddy configuration examples
-- `Headers.md`: HTTP headers passed to protected applications
+This section walks you through a complete example, from running Paskia locally to protecting a real site in production.
+
+### Step 1: Production Configuration
+
+For a real deployment, configure Paskia with your domain name (rp-id). This enables SSO setup for that domain and any subdomains.
+
+```sh
+uvx paskia --rp-id=example.com --rp-name="Example Corp"
+```
+
+This binds passkeys to the rp-id, allowing them to be used there or on any subdomain of it. The `--rp-name` is the branding shown in UI and registered with passkeys for everything on your domain (rp id). On the first run, you'll see a registration link—use it to create your Admin account. You may enter your real name here for a more suitable account name.
+
+### Step 2: Set Up Caddy
+
+Install [Caddy](https://caddyserver.com/) and copy the [auth folder](caddy/auth) to `/etc/caddy/auth`. Say your current unprotected Caddyfile looks like this:
+
+```caddyfile
+app.example.com {
+    reverse_proxy :3000
+}
+```
+
+Add Paskia full site protection:
+
+```caddyfile
+app.example.com {
+    import auth/setup
+    handle {
+        import auth/require perm=myapp:login
+        reverse_proxy :3000
+    }
+}
+```
+
+Run `systemctl reload caddy`. Now `app.example.com` requires the `myapp:login` permission. Try accessing it and you'll land on a login dialog.
+
+### Step 3: Assign Permissions via Admin Panel
+
+![Admin panel permissions](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/master-permissions.webp)
+
+1. Go to `app.example.com/auth/admin/`
+2. Create a permission, give it a name and scope `myapp:login`
+3. Assign it to Organization
+4. In that organization, assign it to the Administration role
+
+Now you have granted yourself the new permission.
+
+Permission scopes are text identifiers with colons as separators that we can use for permission checks. The `myapp:` prefix is a convention to namespace permissions per application—you but you can use other forms as you see fit (urlsafe characters, no spaces allowed).
+
+### Step 4: Add API Authentication to Your App
+
+Your backend already receives `Remote-*` headers from Caddy's forward-auth. For frontend API calls, we provide a [JS paskia module](https://www.npmjs.com/package/paskia):
+
+```js
+import { apiJson } from 'https://cdn.jsdelivr.net/npm/paskia@latest/dist/paskia.js'
+
+const data = await apiJson('/api/sensitive', { method: 'POST' })
+```
+
+When a 401/403 occurs, the auth dialog appears automatically, and the request retries after authentication.
+
+To protect the API path with a different permission, update your Caddyfile:
+
+```caddyfile
+app.example.com {
+    import auth/setup
+
+    @api path /api/*
+    handle @api {
+        import auth/require perm=myapp:api
+        reverse_proxy :3000
+    }
+
+    handle {
+        import auth/require perm=myapp:login
+        reverse_proxy :3000
+    }
+}
+```
+
+Create the `myapp:api` permission in the admin panel, that will be required for all API access. Link to `/auth/` for the built-in profile page.
+
+You may also remove the `myapp:login` protection from the rest of your site paths, unless you wish to keep all your assets behind a login page. Having this as the last entry in your config allows free access to everything not matched by other sections.
+
+```Caddyfile
+    handle {
+        reverse_proxy :3000
+    }
+```
+
+### Step 5: Run Paskia as a Service
+
+Create a system user paskia, install UV on the system, and create a systemd unit:
+
+```sh
+sudo useradd --system --home-dir /srv/paskia --create-home paskia
+```
+
+Install UV on the system (or arch btw `pacman -S uv`):
+
+```sh
+curl -LsSf https://astral.sh/uv/install.sh | sudo env UV_INSTALL_DIR=/usr/local/bin sh
+```
+
+Create a systemd unit:
+
+```sh
+sudo systemctl edit --force --full paskia@.service
+```
+
+Paste the following and save:
+
+```ini
+[Unit]
+Description=Paskia for %i
+
+[Service]
+Type=simple
+User=paskia
+WorkingDirectory=/srv/paskia
+ExecStart=uvx paskia@latest --rp-id=%i
+
+[Install]
+WantedBy=multi-user.target
+```
+
+Run the service and view log:
+
+```sh
+sudo systemctl enable --now paskia@example.com && sudo journalctl -n30 -ocat -fu paskia@example.com
+```
+
+### Optional: Dedicated Authentication Site
+
+Add a Caddy configuration for the authentication domain:
+
+```caddyfile
+auth.example.com {
+    reverse_proxy :4401
+}
+```
+
+Now all authentication happens at `auth.example.com` instead of `/auth/` paths on your apps. Your existing protected sites continue to work as before but they just forward to the dedicated site for user profile and other such functionality.
+
+Enter your auth site domain on Admin / Server Options panel or use `--auth-host=auth.example.com` when starting the server.
+
+
+## Further Documentation
+
+- [Forward-Auth Guides](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/proxy/index.md) (Caddy, Nginx, ...)
+- [Trusted Headers for Backend Apps](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Headers.md)
+- [Frontend integration](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/Integration.md)
+- [Paskia API](https://git.zi.fi/LeoVasanko/paskia/src/branch/main/docs/API.md)

docs/API.md

@@ -0,0 +1,101 @@
+# Paskia API
+
+[Integration](Integration.md) · [Proxy guides](proxy/index.md)
+
+For integrating Paskia with your app frontend, see [integration](Integration.md).
+
+## Web Interface
+
+| Method | Path | What it is for | Responses |
+|---:|---|---|---|
+| GET | /auth/ | User profile page | HTML 200/401 |
+| GET | /auth/admin/ | Admin panel, requires auth:admin or org admin permissions | HTML 200/401/403 |
+| GET | /auth/{token} | Reset / add credential URL (QR code link), e.g. /auth/fun.cotton.fresh.xray.lava | HTML 200 |
+
+### Public JSON API: /auth/api/*
+
+| Method | Path | Used for | Responses |
+|---:|---|---|---|
+| GET | /auth/api/settings | Paskia configuration: RP info, base paths, session cookie name | 200 |
+| GET | /auth/api/user-info | Full user profile: info, credentials, sessions, permissions | 200/401 |
+| POST | /auth/api/logout | Terminate session and delete session cookie on the current host | 200 |
+| POST | [/auth/api/validate](api/validate.md) | Validate and renew the session cookie; query [perm](api/perm.md), [max_age](api/max-age.md) | 200/401/403 |
+| GET | [/auth/api/forward](api/forward.md) | Forward-auth with reverse proxies; see [proxy guides](proxy/index.md), query [perm](api/perm.md), [max_age](api/max-age.md) | 204/401/403 empty, json or html|
+
+### User JSON API: /auth/api/user/*
+
+| Method | Path | Used for | Responses |
+|---:|---|---|---|
+| PATCH | /auth/api/user/display-name | Update the user's display name | 200/401 |
+| POST | /auth/api/user/logout-all | Terminate all user sessions | 200/401 |
+| DELETE | /auth/api/user/session/{session_id} | Terminate one session | 200/401 |
+| DELETE | /auth/api/user/credential/{uuid} | Delete a credential; requires recent authentication | 200/401/403 |
+| POST | /auth/api/user/create-link | Create a device-add link; requires recent authentication | 200/401/403 |
+| GET | /auth/api/user/{uuid}/profile.webp | Canonical avatar image URL, public on the auth host | 200/304/404 |
+| PUT | /auth/api/user/{uuid}/profile.webp | Upload or replace an avatar; square WebP prepared in the browser | 200/401/403 |
+| DELETE | /auth/api/user/{uuid}/profile.webp | Remove an avatar; allowed for the user or an admin | 200/401/403 |
+
+These are used mostly from the user profile panel by the user himself, but the profile pictures are public for all to read.
+
+### Admin API: /auth/api/admin/*
+
+Normally only used via admin panel, requires auth admin permissions and can modify any users, orgs and permissions the session has access to.
+
+E.g. Org admin cannot see anything of the other orgs that he has no admin access to. Master admin auth:admin can see everything and create and manage orgs.
+
+| Method | Path | Used for | Responses |
+|---:|---|---|---|
+| GET | /auth/api/admin/info | Admin overview: orgs, permissions, OIDC clients | 200/401/403 |
+| POST | /auth/api/admin/permissions/ | Create permission | 200/401/403 |
+| PATCH | /auth/api/admin/permissions/{uuid} | Update permission | 200/401/403 |
+| DELETE | /auth/api/admin/permissions/{uuid} | Delete permission | 200/401/403 |
+| POST | /auth/api/admin/orgs/ | Create organization | 200/401/403 |
+| GET | /auth/api/admin/orgs/{uuid} | Get organization details | 200/401/403 |
+| PATCH | /auth/api/admin/orgs/{uuid} | Update organization | 200/401/403 |
+| DELETE | /auth/api/admin/orgs/{uuid} | Delete organization | 200/401/403 |
+| POST | /auth/api/admin/orgs/{uuid}/users | Create user in org | 200/401/403 |
+| POST | /auth/api/admin/orgs/{uuid}/roles | Create role in org | 200/401/403 |
+| POST | /auth/api/admin/orgs/{uuid}/permission | Grant permission to org | 200/401/403 |
+| DELETE | /auth/api/admin/orgs/{uuid}/permission | Revoke permission from org | 200/401/403 |
+| PATCH | /auth/api/admin/roles/{uuid} | Update role | 200/401/403 |
+| POST | /auth/api/admin/roles/{uuid}/permissions/{uuid} | Add permission to role | 200/401/403 |
+| DELETE | /auth/api/admin/roles/{uuid}/permissions/{uuid} | Remove permission from role | 200/401/403 |
+| DELETE | /auth/api/admin/roles/{uuid} | Delete role | 200/401/403 |
+| PATCH | /auth/api/admin/users/{uuid}/role | Update user role | 200/401/403 |
+| PATCH | /auth/api/admin/users/{uuid}/info | Update user info | 200/401/403 |
+| GET | /auth/api/admin/users/{uuid} | Get user details | 200/401/403 |
+| DELETE | /auth/api/admin/users/{uuid} | Delete user | 200/401/403 |
+| POST | /auth/api/admin/users/{uuid}/create-link | Create device add link | 200/401/403 |
+| DELETE | /auth/api/admin/users/{uuid}/credentials/{uuid} | Delete user credential | 200/401/403 |
+| DELETE | /auth/api/admin/users/{uuid}/sessions/{key} | Delete user session | 200/401/403 |
+| POST | /auth/api/admin/oidc-clients/ | Create OIDC client | 200/401/403 |
+| PATCH | /auth/api/admin/oidc-clients/{uuid} | Update OIDC client | 200/401/403 |
+| PATCH | /auth/api/admin/oidc-clients/{uuid}/reset-secret | Reset client secret | 200/401/403 |
+| DELETE | /auth/api/admin/oidc-clients/{uuid} | Delete OIDC client | 200/401/403 |
+| GET | /auth/api/admin/server-config/ | Get server config | 200/401/403 |
+| PATCH | /auth/api/admin/server-config/ | Update server config | 200/401/403 |
+
+### WebSockets: /auth/ws/*
+
+| Path | Used for | Notes |
+|---|---|---|
+| WS /auth/ws/authenticate | Passkey authentication | Returns a session token |
+| WS /auth/ws/register | Register a new credential | Adding another passkey to current user or via reset token |
+| WS /auth/ws/remote-auth/request | Start a cross-device login/registration request | Used from unauthenticated client |
+| WS /auth/ws/remote-auth/permit | Approve/deny a pairing code | Used to accept the request, if same words are entered |
+
+These are for internal use only, but are documented here because they are the core piece in all passkey operations.
+
+### Auth host mode (--auth-host)
+
+#### On the auth host:
+- The Web UI is served at site root instead of /auth/* (that redirects to root paths)
+- All of the API stays under /auth/api/*
+- Auth WebSockets remain at /auth/ws/* but take connections from other hosts to issue sessions for each of those.
+
+#### On non-auth hosts:
+- /auth/ shows only minimal profile and allows logging out of the current site, link to full profile on auth host
+- /auth/api/* is served normally.
+- /auth/api/user/*, /auth/api/admin/*, and /auth/ws/* don't exist.
+
+The WebSocket connections are directed to auth host, and must have an allowed origin corresponding to the host where the user is logging in, that the session is tied with.

docs/Headers.md

@@ -0,0 +1,25 @@
+# Paskia Trusted Headers for Backend Apps
+
+[Proxy guides](proxy/index.md) · [`/auth/api/forward`](api/forward.md)
+
+| HTTP Header | Meaning | Example |
+|---|---|---|
+| Remote-User | Authenticated user UUID | **01c03276-b8f0-**… (string) |
+| Remote-Name | User display name | **John Doe** |
+| Remote-Org | Organization UUID | Identifier for user's org (string) |
+| Remote-Org-Name | Organization display name | **The Company Ltd.** |
+| Remote-Role | Role UUID | Identifier for user's role (string) |
+| Remote-Role-Name | Role display name | **Employee** |
+| Remote-Groups | Permissions the user has, comma separated | **auth:admin,yourapp:reports** |
+| Remote-Session-Expires | Session expiry timestamp (ISO 8601 UTC) | **2030-12-31T23:59:59Z** |
+| Remote-Credential | Credential UUID | Identifier for the sign-in passkey (string) |
+
+Similar headers are also used by other authentication systems like [Authelia](https://www.authelia.com/integration/trusted-header-sso/introduction/) to signal the backend application information about the signed in user.
+
+When a request is allowed, the auth service adds these headers by the forward-auth mechanism before proxying to your app as **request headers**. Your app can use them for user context to show on UI, or for its own authentication needs (e.g. prevent different orgs messing up with each other's data, logging which user performed an action).
+
+Only the UUID values should be used for identification needs, because they never change, even when things are renamed (display names change), and are never reused (created on authentication server). They are UUIDv7 so you can also extract the creation timestamp from them.
+
+Any `Remote-*` headers from clients are stripped by the proxy configuration (see our [Caddy configuration](proxy/caddy.md) and [Forward-Auth Proxy Guides](proxy/index.md)) to avoid dealing with any fake headers.
+
+Note: the headers are intended primarily for the backend, while either frontend or backend (passing the session cookie) can request `/auth/api/user-info` for more complete information, and that is the recommended way to do it in the frontend. See [integration](Integration.md) for more.

docs/Integration.md

@@ -0,0 +1,177 @@
+# Integrating Paskia with your App
+
+[API overview](API.md) · [Proxy guides](proxy/index.md)
+
+This guide covers frontend and backend integration with Paskia. For forward-auth setup, see the [Forward-Auth Proxy Guides](proxy/index.md); Caddy users can also start from the dedicated [Caddy configuration](proxy/caddy.md).
+
+## Frontend Integration
+
+### Using the paskia-js Module
+
+The [paskia](https://www.npmjs.com/package/paskia) JavaScript module provides utilities for API calls, session validation, and authentication overlays. Works with any framework or vanilla JS.
+
+```html
+<script type="module">
+  import { apiJson, apiFetch, SessionValidator } from 'https://cdn.jsdelivr.net/npm/paskia@latest/dist/paskia.js'
+</script>
+```
+
+Or install to your project:
+
+```sh
+npm install paskia
+```
+
+### API Fetch with Automatic Auth
+
+Use `apiJson` or `apiFetch` for API calls. When a 401/403 response includes an auth URL, the authentication dialog appears automatically, then the request retries. The JSON variant is purely for convenience, doing JSON headers and conversions for you.
+
+```js
+import { apiJson, apiFetch, AuthCancelledError } from 'paskia'
+
+// JSON API call (sets Content-Type, parses response)
+try {
+  const data = await apiJson('/api/endpoint', { method: 'POST', body: { key: 'value' } })
+} catch (e) {
+  if (e instanceof AuthCancelledError) {
+    // User cancelled auth dialog
+  }
+}
+
+// Raw fetch with auth handling (returns Response object)
+const response = await apiFetch('/api/endpoint')
+```
+
+For requests that shouldn't trigger auth dialogs, use standard `fetch` or our `fetchJson`.
+
+### Session Validation Polling
+
+Keep sessions alive and detect when the user logs out or switches accounts:
+
+```js
+import { SessionValidator } from 'paskia'
+
+const validator = new SessionValidator(
+  () => currentUser?.uuid,              // getter for current user ID
+  (error) => handleSessionLost(error)   // callback when session is lost or user changes
+)
+
+validator.start()  // start polling (pauses on idle)
+validator.stop()   // stop polling
+```
+
+The validator calls `/auth/api/validate` (see below) periodically to:
+- Renew the session cookie (24h lifetime)
+- Detect if the user logged out or switched accounts
+- Pause polling when the page is idle, allowing sessions to expire when not used
+
+### Manual Auth Flow
+
+If you need custom control, handle 401/403 responses manually:
+
+```js
+import { showAuthIframe, AuthCancelledError } from 'paskia'
+
+const response = await fetch('/api/protected')
+if (response.status === 401 || response.status === 403) {
+  const data = await response.json()
+  if (data.auth?.iframe) {
+    try {
+      await showAuthIframe(data.auth.iframe)
+      // Retry the original request
+    } catch (e) {
+      if (e instanceof AuthCancelledError) {
+        // User clicked Back
+      }
+    }
+  }
+}
+```
+
+### User Info and Profile
+
+Get current user details:
+
+```js
+const user = await apiJson('/auth/api/user-info', { method: 'GET' })
+// Returns: { uuid, display_name, credentials, sessions, permissions, ... }
+```
+
+Or link to the built-in profile page: `/auth/`
+
+## Backend Integration
+
+### Using Forward-Auth Headers
+
+When using forward-auth, your backend receives `Remote-*` headers on authenticated requests. See [Headers](Headers.md) for the full list and [Forward-Auth Proxy Guides](proxy/index.md) for proxy configuration.
+
+```python
+# Example: Python/FastAPI
+@app.get("/api/data")
+def get_data(request: Request):
+    user_id = request.headers.get("Remote-User")
+    org_id = request.headers.get("Remote-Org")
+    permissions = request.headers.get("Remote-Groups", "").split(",")
+    # ...
+```
+
+### Direct Validation from Backend
+
+This is useful for:
+- Apps/APIs not behind proxy Forward-Auth protection
+- Background jobs that need to verify a stored session
+- Check extra permissions, get user context or renew session
+
+Your backend can validate sessions directly by calling Paskia's validate endpoint [`/auth/api/validate`](api/validate.md). It generally expects client headers proxied as is, while on the URL you can specify exact requirements.
+
+Usually it is sufficient to simply forward the headers the client sent, assuming your proxy already preserved `Host` and set `X-Forwarded-For` (otherwise set them here with original host and IP). `User-Agent` should also be forwarded if available, omitted if not: do not let your backend HTTP client add its own header.
+
+Be sure to REMOVE connection hop-by-hop headers (these will break WebSockets among other things):
+
+```python
+"Connection", "Keep-Alive", "Proxy-Connection", "TE", "Transfer-Encoding", "Upgrade"
+```
+
+## Proxying /auth/ to Paskia
+
+Your app server needs to proxy `/auth/` paths to Paskia. This can be done by your application but is much easier done by a reverse proxy. The [Forward-Auth Proxy Guides](proxy/index.md) cover Caddy, Nginx, Traefik, Apache APISIX, Envoy and HAProxy.
+
+### Caddy
+
+This handles both HTTP and WebSocket connections. Caddy's `reverse_proxy` handles HTTP and WebSocket transparently. This is essentially what our Caddy [auth/setup](../caddy/auth/setup) snippet does: `reverse_proxy :4401`.
+
+```caddyfile
+app.example.com {
+    import auth/setup
+    # ... your routes in handle blocks
+}
+```
+
+### Nginx
+
+Certain headers need to be configured for correct host and WS support:
+
+```nginx
+location /auth/ {
+    proxy_pass http://localhost:4401;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+    proxy_set_header Host $host;
+}
+```
+
+### Node.js / Express
+
+Using `http-proxy-middleware`:
+
+```js
+import { createProxyMiddleware } from 'http-proxy-middleware'
+
+app.use('/auth', createProxyMiddleware({ target: 'http://localhost:4401', ws: true, changeOrigin: false }))
+```
+
+### Python / FastAPI
+
+You will need to process and handle `/auth/` for HTTP requests and `/auth/ws/` for WebSockets manually, which is beyond the scope of this documentation.
+
+We highly recommend Caddy instead as the simpler and more production-worthy solution that Just Works.

docs/api/forward.md

@@ -0,0 +1,71 @@
+# GET /auth/api/forward
+
+[API overview](../API.md) · [Proxy guides](../proxy/index.md)
+
+Forward-auth validation for reverse proxies. The proxy calls this endpoint for every incoming request; Paskia validates the session and either authorizes the request by returning 204 with `Remote-*` headers, or rejects it with 401/403 error responses with an HTML login page if `text/html` was requested (i.e. it's a browser viewing the page), or otherwise JSON with details on the error and a URL to initiate API authentication flow.
+
+The proxy server follows the 204 response with the original request to protected service, adding those remote headers to original user request, sent to the service. Any error response is sent directly back to client, never connecting to the protected service.
+
+See [Forward-Auth Proxy Guides](../proxy/index.md) for Caddy, Nginx, Traefik, Apache APISIX, Envoy and HAProxy configuration examples. Caddy users can also start from the dedicated [Caddy configuration guide](../proxy/caddy.md).
+
+
+## Query parameters
+
+| Parameter | Description |
+|-----------|-------------|
+| perm | Required permissions. See the [perm argument](perm.md). |
+| max_age | Require recent passkey use. See the [max_age argument](max-age.md). |
+
+## Request headers
+
+| Header | Expected value / note | How Paskia uses it |
+|---|---|---|
+| Host | Forwarded directly from the client | Verifying the session's bound host |
+| Cookie | Forwarded directly or just cookie `__Host-paskia` | Session ID |
+| X-Forwarded-Method | The HTTP method, e.g. POST | Logging of original request |
+| X-Forwarded-Uri | Request path and query, e.g. /reports?foo=bar | Logging of original request |
+| Accept | text/html or anything else | Determines whether failures return an HTML page or JSON |
+
+Connection hop-by-hop headers (Connection, Upgrade, Transfer-Encoding, etc.) must not be forwarded.
+
+## Response
+
+### Success (204)
+
+No response body. Only [Remote headers](../Headers.md) are set on the response and your proxy should forward them to the backend request. The headers, not a response body, are the whole point of this endpoint: they are how the authenticated identity reaches the protected service, which can trust them because it is only reachable through the proxy.
+
+### Failure (400 / 401 / 403)
+
+| Status | Meaning |
+|---|---|
+| 400 | Malformed perm argument (see [perm](perm.md#syntax-errors)). The error detail names `/auth/api/forward` as the origin and never echoes query arguments. |
+| 401 | Session missing or expired, or max_age not satisfied — the user needs to (re)authenticate. |
+| 403 | Requested permissions are missing — the forbidden flow allows signing in with another account. |
+
+Failure responses come in two flavors, chosen by the Accept header, because the audience differs:
+
+- A browser asking for a page (Accept includes text/html) gets a full authentication page it can show directly — the proxy simply passes the response through and the user can sign in without any application involvement.
+- Any other request (fetch, img, ...) gets JSON intended for programmatic handling. Besides the error detail, it carries an auth section whose iframe URL points to a ready-made authentication dialog your frontend can embed, so the user can sign in without leaving your app:
+
+```json
+{
+  "detail": "Additional authentication required",
+  "auth": {
+    "mode": "reauth",
+    "iframe": "/auth/restricted/iframe#mode=reauth&theme=dark"
+  }
+}
+```
+
+The mode field:
+- login: no valid session, need to sign in
+- reauth: additional authentication required (using same passkey)
+- forbidden: lacking required permissions
+
+Extra metadata such as the user's theme override may appear as additional fields and iframe fragment parameters.
+
+Note: we provide a JavaScript package [paskia](https://www.npmjs.com/package/paskia) with helpers for the embedding, fetch 401/403 handling, session renewals and more.
+
+## Session renewal
+
+The forward endpoint **does not renew** the session because in the forward-auth mechanism it could not send the client a renewed session cookie. It only validates the current cookie and returns the trusted headers. Use [/auth/api/validate](validate.md) when you need to refresh the session lifetime. Otherwise the user will have to sign in again every 24h even if they are actively using the service.

docs/api/max-age.md

@@ -0,0 +1,47 @@
+# The max_age argument
+
+[API overview](../API.md) · [`/auth/api/validate`](validate.md) · [`/auth/api/forward`](../forward.md)
+
+The max_age argument is used by endpoints that validate sessions to require a recent passkey use. It is supported by:
+
+- [POST /auth/api/validate](validate.md)
+- [GET /auth/api/forward](forward.md)
+
+## What it checks
+
+max_age limits how long ago the user last authenticated with their passkey. It is intended for high-risk actions where you want to be sure the user recently proved possession of their credential, not just that they still have a valid session cookie.
+
+The check compares the elapsed time since the credential was last used against the given limit:
+
+- If the credential has a last_used timestamp, that time is used.
+- Otherwise, the session's validated timestamp is used as a fallback.
+
+If the authentication is older than max_age, the endpoint returns 401 with mode reauth, prompting the user to re-authenticate.
+
+## Time units
+
+max_age accepts a number followed by one of these units:
+
+| Unit | Meaning |
+|---|---|
+| s | seconds |
+| m / min | minutes |
+| h | hours |
+| d | days |
+
+Examples:
+
+```text
+?max_age=30s
+?max_age=5m
+?max_age=5min
+?max_age=1h
+?max_age=1d
+```
+
+An invalid format is logged as a warning but does not cause the request to fail; the requirement is simply ignored in that case.
+
+## Important notes
+
+- Session renewal by /auth/api/validate does **not** count as fresh authentication. The check is based on the credential's last_used time, not on how recently the session cookie was renewed.
+- max_age is independent of perm. You can use either or both at the same time.

docs/api/perm.md

@@ -0,0 +1,96 @@
+# The perm argument
+
+[API overview](../API.md) · [`/auth/api/validate`](validate.md) · [`/auth/api/forward`](../forward.md)
+
+The perm argument is used by endpoints that validate sessions to require one or more permission scopes. It is supported by:
+
+- [POST /auth/api/validate](validate.md)
+- [GET /auth/api/forward](forward.md)
+
+## Passing the argument
+
+Repeat the query parameter for each required scope:
+
+```text
+?perm=myapp:read&perm=myapp:write
+```
+
+You can also pass multiple scopes in one parameter by separating them with whitespace (a literal space, i.e. `+` or `%20` in the query string):
+
+```text
+?perm=myapp:read%20myapp:write
+```
+
+Both forms produce the same result.
+
+## Semantics
+
+The perm argument uses **AND** semantics between groups: **every** listed scope group must be satisfied by the effective permissions for the request to succeed. If any required group is not satisfied, the endpoint returns 403.
+
+Within a single group, use `|` to list alternatives with **OR** semantics — the group is satisfied when **any one** of the alternatives is present:
+
+```text
+?perm=myapp:read|myapp:write+myapp:login
+```
+
+This requires `myapp:login` **and** (`myapp:read` **or** `myapp:write`). No whitespace is allowed around the `|` operator.
+
+## Syntax errors
+
+Parsing is strict: anything out of spec is rejected with **400 Bad Request** rather than guessed at. This includes:
+
+- Empty values or alternatives (`?perm=`, `?perm=a||b`, `?perm=|a`, `?perm=a|`)
+- Whitespace around `|` (`?perm=a+|+b`)
+- Characters not allowed in scopes other than the operators (space and `|`); scopes match `^[A-Za-z0-9:._~/-]+$` plus the `*` wildcard. In particular a literal `+` in the decoded value (from a `%2B` in the query string) is rejected — use `+` or `%20` to encode a space, never `%2B`.
+
+Extra spaces between groups (leading, trailing, or repeated) are tolerated, since they can easily result from URL formatting and carry no ambiguity — they only ever add required permissions, never remove them. The `|` operator is parsed strictly: `?perm=foo&perm=|bar` is an error, never a way to make `foo` optional.
+
+## Wildcards
+
+Wildcards work like filenames, with `:` and `/` acting as path separators:
+
+- `*` matches any sequence of characters **within a single segment** (it never crosses a `:` or `/`)
+- `**` matches any sequence of characters, **across separators**
+- Part of a segment can be wildcarded, with required text on either or both sides
+
+```text
+?perm=myapp:*
+```
+
+This matches myapp:read and myapp:write, but **not** myapp:read:all — use `myapp:**` for that. Partial wildcards like `myapp:re*` or `myapp:r*d` match myapp:read. The same applies to path-based scopes: `myapp:path:/api/*` matches myapp:path:/api/clients but not myapp:path:/api/v2/clients — use `myapp:path:/api/**` to span path segments.
+
+## Effective permissions
+
+The permissions available to a session are determined as follows:
+
+1. **Role permissions** — the role assigned to the user contains a set of permission UUIDs.
+2. **Org grantable permissions** — only permissions that the user's organization is allowed to grant are effective.
+3. **Domain filtering** — a permission can be restricted to a specific domain via its domain field. If the request's Host header does not match that domain, the permission is excluded.
+
+The result is the set of effective permission scopes used for the perm check. Domain-restricted permissions let you grant a scope only for a specific site or subdomain without making it global.
+
+## Examples
+
+Require a single permission:
+
+```text
+?perm=myapp:login
+```
+
+Require two permissions:
+
+```text
+?perm=myapp:login&perm=myapp:api
+```
+
+Require any scope under myapp:
+
+```text
+?perm=myapp:*
+```
+
+Require myapp:login and either myapp:read or myapp:write:
+
+```text
+?perm=myapp:login&perm=myapp:read|myapp:write
+```

docs/api/validate.md

@@ -0,0 +1,66 @@
+# POST /auth/api/validate
+
+[API overview](../API.md) · [`/auth/api/forward`](../forward.md) · [max_age](max-age.md) · [perm](perm.md)
+
+Validate a session and renew its lifetime when needed. This endpoint is normally called by the browser/session validator, but backends may also call it directly when not behind a forward-auth proxy.
+
+See also the [API overview](../API.md) and the [integration guide](../Integration.md).
+
+## Query parameters
+
+| Parameter | Description |
+|-----------|-------------|
+| perm | Required permissions. See the [perm argument](perm.md). |
+| max_age | Require recent passkey use. See the [max_age argument](max-age.md). |
+
+## Request headers
+
+| Header | Expected value / note | How Paskia uses it |
+|---|---|---|
+| Host | Forwarded directly from the client | Verifying the session's bound host |
+| Cookie | Forwarded directly or just cookie `__Host-paskia` | Session ID |
+| X-Forwarded-For | Real client IP | Recorded in session data instead of the backend/proxy IP; requires FORWARDED_ALLOW_IPS to trust the immediate peer |
+| User-Agent | Forward the original client UA if available; do not let your backend client add its own default | Recorded in session data only when the header is present; omitting it preserves the existing value |
+
+See [integration documentation for backend validate requests](../Integration.md) for more detailed instructions, in particular for forwarding of client-provided headers.
+
+## Response
+
+The endpoint always responds with JSON.
+
+### Success (200)
+
+```json
+{
+  "valid": true,
+  "renewed": false,
+  "ctx": {
+    "user": {
+      "uuid": "...",
+      "display_name": "John Smith",
+      "theme": "dark"
+    },
+    "org": {
+      "uuid": "...",
+      "display_name": "The Company Ltd."
+    },
+    "role": {
+      "uuid": "...",
+      "display_name": "Employee"
+    },
+    "permissions": ["auth:admin", "myapp:login"]
+  }
+}
+```
+
+If the response includes a Set-Cookie header, the session has been renewed (renewed is true) and you should forward that cookie to the client so the browser updates its expiry. Not forwarding it means the session lifetime is not extended, so the user may need to re-authenticate sooner. Renewals are throttled, so frequent calls usually return renewed: false with no Set-Cookie.
+
+### Failure (400 / 401 / 403)
+
+| Status | Meaning |
+|---|---|
+| 400 | Malformed perm argument (see [perm](perm.md#syntax-errors)). |
+| 401 | Session missing, expired, or max_age not satisfied. The response body includes auth metadata for the login/reauth iframe. |
+| 403 | Session is valid but one or more requested permissions are missing. |
+
+A failure response never contains a refreshed Set-Cookie.

docs/proxy/apisix.md

@@ -0,0 +1,163 @@
+# Apache APISIX Forward-Auth
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+This guide uses the Apache APISIX [`forward-auth`](https://apisix.apache.org/docs/apisix/plugins/forward-auth/) plugin to ask Paskia whether each request is allowed.
+
+## Overview
+
+APISIX adds the standard `X-Forwarded-*` headers automatically, but we still tell the plugin to forward `Host`, `Cookie`, and `Accept` from the client request. On a `204` response from Paskia we copy the `Remote-*` headers to the backend request.
+
+## Admin API example
+
+```sh
+# Route that proxies /auth/ to Paskia without forward-auth.
+curl "http://127.0.0.1:9180/apisix/admin/routes" -X PUT \
+  -H "X-API-KEY: ${admin_key}" \
+  -H 'Content-Type: application/json' \
+  -d '{
+    "id": "paskia-auth-ui",
+    "uri": "/auth/*",
+    "upstream": {
+      "nodes": { "localhost:4401": 1 },
+      "type": "roundrobin"
+    }
+  }'
+
+# Protected route that uses Paskia forward-auth.
+curl "http://127.0.0.1:9180/apisix/admin/routes" -X PUT \
+  -H "X-API-KEY: ${admin_key}" \
+  -H 'Content-Type: application/json' \
+  -d '{
+    "id": "app-protected",
+    "uri": "/*",
+    "priority": 10,
+    "plugins": {
+      "forward-auth": {
+        "uri": "http://localhost:4401/auth/api/forward?perm=myapp:login",
+        "request_headers": [
+          "Host",
+          "Cookie",
+          "Accept",
+          "X-Forwarded-Method",
+          "X-Forwarded-Uri",
+          "X-Forwarded-Host",
+          "X-Forwarded-Proto",
+          "X-Forwarded-For"
+        ],
+        "upstream_headers": [
+          "Remote-User",
+          "Remote-Name",
+          "Remote-Groups",
+          "Remote-Org",
+          "Remote-Org-Name",
+          "Remote-Role",
+          "Remote-Role-Name",
+          "Remote-Session-Expires",
+          "Remote-Credential"
+        ]
+      }
+    },
+    "upstream": {
+      "nodes": { "localhost:3000": 1 },
+      "type": "roundrobin"
+    }
+  }'
+```
+
+The `paskia-auth-ui` route has a higher priority (`priority` defaults to the same value for both routes; you can also rely on the more specific `/auth/*` URI matching first). Because it does not use the `forward-auth` plugin, users can reach the login/profile pages without already being authenticated.
+
+## ADC / declarative example
+
+```yaml
+services:
+  - name: paskia-auth-ui
+    routes:
+      - name: auth-route
+        uris:
+          - /auth/*
+        upstream:
+          type: roundrobin
+          nodes:
+            - host: localhost
+              port: 4401
+              weight: 1
+
+  - name: app-protected
+    routes:
+      - name: app-route
+        uris:
+          - /*
+        plugins:
+          forward-auth:
+            uri: http://localhost:4401/auth/api/forward?perm=myapp:login
+            request_headers:
+              - Host
+              - Cookie
+              - Accept
+              - X-Forwarded-Method
+              - X-Forwarded-Uri
+              - X-Forwarded-Host
+              - X-Forwarded-Proto
+              - X-Forwarded-For
+            upstream_headers:
+              - Remote-User
+              - Remote-Name
+              - Remote-Groups
+              - Remote-Org
+              - Remote-Org-Name
+              - Remote-Role
+              - Remote-Role-Name
+              - Remote-Session-Expires
+              - Remote-Credential
+        upstream:
+          type: roundrobin
+          nodes:
+            - host: localhost
+              port: 3000
+              weight: 1
+```
+
+Apply it with:
+
+```sh
+adc sync -f paskia.yaml
+```
+
+## What APISIX sends to Paskia
+
+APISIX automatically adds these headers to the auth request:
+
+| Header | Value |
+|---|---|
+| `X-Forwarded-Method` | Original HTTP method |
+| `X-Forwarded-Proto` | Request scheme (`http`/`https`) |
+| `X-Forwarded-Host` | Original host |
+| `X-Forwarded-Uri` | Original request URI |
+| `X-Forwarded-For` | Client IP address |
+
+We list them again in `request_headers` to make sure they are not accidentally filtered out when the list is explicit.
+
+## Response headers
+
+`upstream_headers` lists the `Remote-*` headers that APISIX copies from the auth response to the backend request. The plugin does not support a wildcard here, so each header must be named.
+
+If you want Paskia's failure-response headers (such as `Content-Type` or `Set-Cookie`) to reach the client, list them in `client_headers`. For Paskia this is usually not needed; the response body already contains the JSON auth URL or the HTML login page.
+
+## Adjusting requirements
+
+Change the `uri` query string to require different permissions or recent authentication:
+
+```yaml
+uri: http://localhost:4401/auth/api/forward?perm=myapp:login
+uri: http://localhost:4401/auth/api/forward?perm=myapp:admin&max_age=5min
+uri: http://localhost:4401/auth/api/forward
+```
+
+The last form requires only authentication. See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md).
+
+## Notes
+
+- The auth request is `GET` by default. Since the `forward-auth` plugin does not forward the request body unless `request_method` is set to `POST`, the default `GET` is the right choice for Paskia.
+- Hop-by-hop headers are handled by APISIX when it builds the auth request, so no extra configuration is needed for `Connection`/`Upgrade`.
+- If Paskia is running on a different host, replace `localhost:4401` with the Paskia service address. For a dedicated authentication host (`--auth-host`), route `auth.example.com` to Paskia instead of `/auth/`.

docs/proxy/caddy.md

@@ -0,0 +1,81 @@
+# Paskia Caddy Configuration
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+[Caddy](https://caddyserver.com/) is a modern web server that makes setting up web services easy. We provide a few Caddy snippets that make the configuration even easier, although the `forward_auth` directive of Caddy can be used directly as well. Place the [auth folder](../../caddy/auth) with the snippets `require` and `setup` where your config file is (e.g. `/etc/caddy/auth`)
+
+What these snippets do
+- `setup`: Mount the auth UI at `/auth/` proxying to `:4401`
+- `require`: Use `/auth/api/forward` for access control
+- Render a login page or a permission denied page if needed (without changing URL)
+
+Your backend may not use authentication at all, or it can make use of the user information passed via `Remote-*` headers by the authentication system, see [trusted headers](../Headers.md) for details.
+
+We assume the normal unprotected **Caddyfile** for your site looks like this:
+
+```caddyfile
+app.example.com {
+    @public path /.well-known/* /favicon.ico
+    handle @public {
+        root * /var/www/
+        file_server
+    }
+
+    handle {
+        reverse_proxy :3000  # Your app backend
+    }
+}
+```
+
+Note: We use the `handle @name` approach rather than `handle_path` to keep the path unaltered. Unlike bare directives, these blocks will be tried in sequence and each can contain what you'd typically put in your site definition (by default `reverse_proxy` takes precedence and nothing reaches the static files).
+
+We will adapt from this to protect your app.
+
+### Protect your site (auth/setup, auth/require)
+
+```caddyfile
+app.example.com {
+    import auth/setup
+
+    @public path /.well-known/* /favicon.ico
+    handle @public {
+        root * /var/www/
+        file_server
+    }
+
+    @reports path /reports
+    handle @reports {
+        import auth/require perm=myapp:reports
+        reverse_proxy :3000
+    }
+
+    handle {
+        import auth/require max-age=12h
+        reverse_proxy :3000
+    }
+}
+```
+
+The above setup allows unauthenticated access to certain files, then implements two different access controls for your backend app depending on which path is accessed. Note that the perm and max-age options may be combined, e.g. `perm=myapp:admin&max-age=5min` on a very sensitive endpoint. This will require additional authentication if the passkey hasn't been used in the last 5 minutes (automatic session renewals don't affect this). Use `""` if you only want the user to be authenticated with no time or perm requirements.
+
+### Dedicated Authentication Site
+
+When you setup a separate subdomain for the authentication site, just add to your config another section for the auth host:
+
+```caddyfile
+auth.example.com {
+    reverse_proxy :4401
+}
+```
+
+Remember to specify `paskia serve --auth-host auth.example.com` to restrict the authentication services to this domain.
+
+Note that we still reserve `/auth/` on each site for logout page and any APIs your application may require, while full user profile and global options are only available on the auth host.
+
+Paskia does not require CORS configuration, but it can access the authentication and registration of auth host WS API from the other sites as WebSockets don't require any CORS.
+
+### Override the paskia backend address (AUTH_UPSTREAM)
+
+By default, the auth service is contacted at localhost port 4401. You can point Caddy to a different address by setting the `AUTH_UPSTREAM` environment variable for Caddy.
+
+If unset, the snippets use `:4401` by default.

docs/proxy/envoy.md

@@ -0,0 +1,170 @@
+# Envoy External Authorization (ext_authz)
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+This guide uses Envoy's [external authorization filter](https://www.envoyproxy.io/docs/envoy/latest/configuration/http/http_filters/ext_authz_filter) (`ext_authz`) to ask Paskia whether each request is allowed.
+
+## Overview
+
+Envoy's `ext_authz` HTTP filter calls an external HTTP service before forwarding a request to the upstream. The filter needs to know which headers from the original request to send to Paskia, and which headers from Paskia's response to add to the upstream request or to the client response.
+
+A minimal static configuration looks like this:
+
+```yaml
+static_resources:
+  listeners:
+    - name: app_listener
+      address:
+        socket_address:
+          address: 0.0.0.0
+          port_value: 8080
+      filter_chains:
+        - filters:
+            - name: envoy.filters.network.http_connection_manager
+              typed_config:
+                "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
+                stat_prefix: ingress_http
+                use_remote_address: true
+                route_config:
+                  name: local_route
+                  virtual_hosts:
+                    - name: app
+                      domains: ["*"]
+                      routes:
+                        # Pass /auth/ straight to Paskia, bypassing ext_authz.
+                        - match:
+                            prefix: "/auth/"
+                          route:
+                            cluster: paskia
+                          typed_per_filter_config:
+                            envoy.filters.http.ext_authz:
+                              "@type": type.googleapis.com/envoy.extensions.filters.http.ext_authz.v3.ExtAuthzPerRoute
+                              disabled: true
+
+                        # Protect everything else.
+                        - match:
+                            prefix: "/"
+                          route:
+                            cluster: app_backend
+                http_filters:
+                  - name: envoy.filters.http.ext_authz
+                    typed_config:
+                      "@type": type.googleapis.com/envoy.extensions.filters.http.ext_authz.v3.ExtAuthz
+                      transport_api_version: v3
+                      http_service:
+                        server_uri:
+                          uri: localhost:4401
+                          cluster: paskia
+                          timeout: 0.5s
+                        # Send every auth check to /auth/api/forward with the
+                        # required permission, regardless of the original path.
+                        path_override: "/auth/api/forward?perm=myapp:login"
+                        authorization_request:
+                          allowed_headers:
+                            patterns:
+                              - exact: Host
+                              - exact: Cookie
+                              - exact: Accept
+                          # Add the headers Paskia logs / expects.
+                          headers_to_add:
+                            - key: X-Forwarded-Method
+                              value: "%REQ(:METHOD)%"
+                            - key: X-Forwarded-Uri
+                              value: "%REQ(:PATH)%"
+                            - key: X-Forwarded-Proto
+                              value: "%REQ(:SCHEME)%"
+                            - key: X-Forwarded-For
+                              value: "%REQ(X-Forwarded-For)%"
+                        authorization_response:
+                          # Forward every Remote-* header to the backend.
+                          allowed_upstream_headers:
+                            patterns:
+                              - prefix: Remote-
+                          # Forward the response Content-Type to the client on 401/403.
+                          allowed_client_headers:
+                            patterns:
+                              - exact: Content-Type
+                      failure_mode_allow: false
+                  - name: envoy.filters.http.router
+                    typed_config:
+                      "@type": type.googleapis.com/envoy.extensions.filters.http.router.v3.Router
+
+  clusters:
+    - name: app_backend
+      connect_timeout: 0.25s
+      type: logical_dns
+      lb_policy: round_robin
+      load_assignment:
+        cluster_name: app_backend
+        endpoints:
+          - lb_endpoints:
+              - endpoint:
+                  address:
+                    socket_address:
+                      address: localhost
+                      port_value: 3000
+
+    - name: paskia
+      connect_timeout: 0.25s
+      type: logical_dns
+      lb_policy: round_robin
+      load_assignment:
+        cluster_name: paskia
+        endpoints:
+          - lb_endpoints:
+              - endpoint:
+                  address:
+                    socket_address:
+                      address: localhost
+                      port_value: 4401
+```
+
+## Important configuration details
+
+- **`path_override`** — the auth request always goes to `/auth/api/forward?perm=myapp:login`, no matter which path the client requested. The original path is sent in `X-Forwarded-Uri` for Paskia to log.
+- **`authorization_request.allowed_headers`** — Envoy only forwards the headers you explicitly allow. We allow `Host`, `Cookie`, and `Accept`. The `X-Forwarded-*` headers are added via `headers_to_add` so they are based on Envoy's view of the request, not spoofed client values.
+- **`headers_to_add`** — Envoy supports substitution format strings such as `%REQ(:METHOD)%` and `%REQ(:PATH)%`. These set the headers Paskia uses for logging and host validation.
+- **`authorization_response.allowed_upstream_headers`** — `prefix: Remote-` tells Envoy to copy every response header starting with `Remote-` to the upstream request. This also removes any client-supplied `Remote-*` headers, so the backend can trust them.
+- **`authorization_response.allowed_client_headers`** — on a 401/403 response, Envoy forwards only the allowed response headers to the client. Paskia returns HTML or JSON with a `Content-Type` header, so we allow that. (Paskia does not set cookies on the forward-auth response.)
+- **`typed_per_filter_config`** on the `/auth/` route disables `ext_authz` so users can reach the login/profile pages without already being authenticated.
+
+## Per-route requirements
+
+Different routes often need different permissions or `max_age` values. Use `typed_per_filter_config` on each route to override the `http_service.path_override`:
+
+```yaml
+routes:
+  - match:
+      prefix: "/reports"
+    route:
+      cluster: app_backend
+    typed_per_filter_config:
+      envoy.filters.http.ext_authz:
+        "@type": type.googleapis.com/envoy.extensions.filters.http.ext_authz.v3.ExtAuthzPerRoute
+        check_settings:
+          http_service:
+            path_override: "/auth/api/forward?perm=myapp:reports&max_age=5min"
+
+  - match:
+      prefix: "/"
+    route:
+      cluster: app_backend
+    typed_per_filter_config:
+      envoy.filters.http.ext_authz:
+        "@type": type.googleapis.com/envoy.extensions.filters.http.ext_authz.v3.ExtAuthzPerRoute
+        check_settings:
+          http_service:
+            path_override: "/auth/api/forward?perm=myapp:login"
+```
+
+See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md) for query parameter syntax.
+
+## WebSocket support for `/auth/`
+
+If you use a dedicated authentication host (`--auth-host`), route `auth.example.com` to the Paskia cluster and you do not need the `/auth/` bypass above. Otherwise, make sure the `/auth/` route keeps the `Upgrade` and `Connection` headers so passkey WebSocket endpoints work. The default Envoy router handles `Upgrade` headers when the client requests them.
+
+## Notes
+
+- Envoy's `ext_authz` filter does not send the request body to the auth server by default. For Paskia this is fine.
+- If Paskia is running behind TLS, use `https://` in `server_uri.uri` and configure the cluster's transport socket.
+- The `failure_mode_allow: false` setting means that if Paskia cannot be reached, Envoy will reject the request. In testing you may prefer `true`, but use `false` in production so a failed auth service cannot accidentally allow traffic.

docs/proxy/haproxy.md

@@ -0,0 +1,114 @@
+# HAProxy Forward-Auth
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+HAProxy does not have a built-in forward-auth primitive, but the community [`haproxy-auth-request`](https://github.com/TimWolla/haproxy-auth-request) Lua script provides an `auth-intercept` action that works very similarly to Nginx's `auth_request`. It makes an internal HTTP request to Paskia and copies the response headers to the backend request.
+
+## Requirements
+
+- HAProxy 2.2 or newer (2.0+ may work but 2.2+ supports all features shown here).
+- Compiled with `USE_LUA=1`.
+- The [`haproxy-auth-request`](https://github.com/TimWolla/haproxy-auth-request) Lua script loaded.
+- The [`haproxy-lua-http`](https://github.com/haproxytech/haproxy-lua-http) dependency in the Lua path.
+
+## Overview
+
+```haproxy
+global
+    lua-load /usr/share/haproxy/auth-request.lua
+
+defaults
+    mode http
+    timeout connect 5s
+    timeout client 30s
+    timeout server 30s
+
+# Backend that runs the Paskia auth check.
+backend paskia_auth
+    server paskia 127.0.0.1:4401
+
+# Backend that runs the Paskia UI / WebSocket / API.
+backend paskia_ui
+    server paskia 127.0.0.1:4401
+
+# Your protected application.
+backend app_backend
+    server app 127.0.0.1:3000
+
+frontend app
+    bind *:80
+
+    # 1. Route /auth/ straight to Paskia, bypassing the auth check.
+    acl is_auth path_beg /auth/
+    use_backend paskia_ui if is_auth
+
+    # 2. Add the headers Paskia logs / expects. These are then copied to the
+    #    auth subrequest by auth-intercept.
+    http-request set-header X-Forwarded-Method %[method]
+    http-request set-header X-Forwarded-Uri %[url]
+
+    # 3. Run the auth check. The parameters are:
+    #    backend       path                                   method
+    #    req-headers   success-headers                        failure-headers
+    #
+    #    - req-headers:   headers copied from client to Paskia.
+    #    - success-headers: headers copied from Paskia response to backend request.
+    #    - failure-headers: headers copied from Paskia response to client response.
+    http-request lua.auth-intercept paskia_auth /auth/api/forward?perm=myapp:login GET Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri Remote-* *
+
+    # 4. If the subrequest was not successful, deny the request.
+    http-request deny if ! { var(txn.auth_response_successful) -m bool }
+
+    default_backend app_backend
+```
+
+## What the configuration does
+
+1. **Route `/auth/` to Paskia** — users must be able to reach the login/profile UI without already being authenticated. HAProxy will proxy WebSocket upgrade headers automatically for this backend when the client requests them.
+2. **Set `X-Forwarded-Method` and `X-Forwarded-Uri`** — HAProxy adds these headers to the incoming request so the Lua script can copy them to the auth subrequest. `%[method]` returns the HTTP method and `%[url]` returns the path and query string.
+3. **`lua.auth-intercept`** — sends a `GET` request to `/auth/api/forward?perm=myapp:login` on the `paskia_auth` backend. It copies the listed request headers (including the dynamic ones we just set) to the auth subrequest.
+4. **On success (`2xx`)** — copies every response header matching `Remote-*` from Paskia to the backend request. This overrides any client-supplied `Remote-*` headers, so the backend can trust them.
+5. **On failure (`4xx`)** — copies all response headers (`*`) to the client response and uses Paskia's response body, so the browser gets the login HTML or the JSON auth URL.
+6. **Deny if auth failed** — the final `http-request deny` rule is a safety net. In practice, `auth-intercept` with `*` as the failure-headers already terminates the transaction with Paskia's response.
+
+## Backend definition for the auth subrequest
+
+The `paskia_auth` backend can be the same physical server as `paskia_ui`, but using a separate backend is convenient because the Lua script will use the first available server in the backend. The auth subrequest is a plain HTTP request, so no special WebSocket options are needed here.
+
+```haproxy
+backend paskia_auth
+    server paskia 127.0.0.1:4401
+```
+
+## Per-route permissions
+
+You can run different auth checks for different paths by using HAProxy ACLs. Place the more specific rules before the generic one:
+
+```haproxy
+frontend app
+    bind *:80
+
+    acl is_auth path_beg /auth/
+    use_backend paskia_ui if is_auth
+
+    acl is_reports path_beg /reports
+    http-request set-header X-Forwarded-Method %[method] if is_reports
+    http-request set-header X-Forwarded-Uri %[url] if is_reports
+    http-request lua.auth-intercept paskia_auth /auth/api/forward?perm=myapp:reports&max_age=5min GET Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri Remote-* * if is_reports
+
+    http-request set-header X-Forwarded-Method %[method]
+    http-request set-header X-Forwarded-Uri %[url]
+    http-request lua.auth-intercept paskia_auth /auth/api/forward?perm=myapp:login GET Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri Remote-* *
+
+    http-request deny if ! { var(txn.auth_response_successful) -m bool }
+    default_backend app_backend
+```
+
+See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md) for query parameter syntax.
+
+## Notes
+
+- The Lua script strips the request body from the auth subrequest, so Paskia's `/auth/api/forward` will only see the headers.
+- HAProxy variables are limited to alphanumeric characters, dots, and underscores, but the script already normalizes header names for you (e.g. `Remote-User` becomes `req.auth_response_header.remote_user`). The `Remote-*` glob pattern in the success-headers argument handles this automatically.
+- The auth backend must be reachable without TLS. If you need TLS to Paskia, run a local TCP forwarder or use HAProxy's Lua HTTP support directly (not covered by this script).
+- If you use a dedicated authentication host (`--auth-host`), route `auth.example.com` to the Paskia backend and start Paskia with `--auth-host auth.example.com` instead of exposing `/auth/` on every site.

docs/proxy/index.md

@@ -0,0 +1,47 @@
+# Forward-Auth Proxy Guides
+
+[`/auth/api/forward`](../api/forward.md) · [Trusted headers](../Headers.md)
+
+These guides show how to protect a backend application with Paskia using the forward-auth (also called "external authentication") mechanism. The reverse proxy asks Paskia whether a request is allowed before forwarding it to the protected service.
+
+For details about the endpoint the proxy calls, see [`/auth/api/forward`](../api/forward.md). For the headers your backend receives on successful requests, see [Trusted Headers](../Headers.md).
+
+## Available guides
+
+- [Caddy](caddy.md) — fully supported with ready-to-use snippets (`auth/setup` and `auth/require`).
+- [Nginx](nginx.md) — using the `auth_request` module.
+- [Traefik](traefik.md) — using the `ForwardAuth` middleware.
+- [Apache APISIX](apisix.md) — using the `forward-auth` plugin.
+- [Envoy](envoy.md) — using the `ext_authz` HTTP filter.
+- [HAProxy](haproxy.md) — using a Lua auth request.
+
+## Common requirements
+
+No matter which proxy you use, the auth subrequest must:
+
+1. Be sent to `GET /auth/api/forward` on the Paskia backend. By default Paskia listens on `localhost:4401`; set the `AUTH_UPSTREAM` environment variable in our Caddy snippets, or point your proxy at wherever Paskia is running.
+2. Include the query parameters Paskia needs for access control:
+   - `perm` — required permission scope, repeatable (e.g. `perm=myapp:login`). See [perm argument](../api/perm.md).
+   - `max_age` — how recently the user must have authenticated (e.g. `max_age=5min`). See [max_age argument](../api/max-age.md).
+3. Forward these request headers from the original client request:
+   - `Host` — the site the user is visiting.
+   - `Cookie` — the session cookie, normally `__Host-paskia`.
+   - `X-Forwarded-Method` — the original HTTP method (e.g. `GET`, `POST`).
+   - `X-Forwarded-Uri` — the original path and query string (e.g. `/reports?foo=bar`).
+   - `Accept` — decides whether a 401/403 response should be HTML (browser) or JSON (API/fetch).
+4. Strip hop-by-hop headers (`Connection`, `Upgrade`, `Transfer-Encoding`, `Keep-Alive`, `Proxy-Connection`, `TE`) from the auth subrequest. The auth check is a plain HTTP request and must not carry WebSocket/body framing headers.
+5. On a `204 No Content` response, copy the `Remote-*` response headers to the request that is forwarded to the protected backend. The headers are the whole point of the auth check.
+6. On a 401/403 response, send Paskia's response back to the client without contacting the protected backend.
+7. Also proxy the `/auth/` path prefix to Paskia so the login/profile UI, API endpoints, and WebSockets are reachable. Paskia's WebSocket endpoints need `Upgrade` and `Connection` headers passed through for that path.
+
+## Backend usage
+
+After the proxy forwards the request, your backend can read the trusted headers. For example, in Python/FastAPI:
+
+```python
+user_id = request.headers.get("Remote-User")
+org_id = request.headers.get("Remote-Org")
+permissions = request.headers.get("Remote-Groups", "").split(",")
+```
+
+Only trust headers that come from the proxy; never trust `Remote-*` headers that arrive directly from the internet. Your proxy configuration should strip any client-supplied `Remote-*` headers before the auth check.

docs/proxy/nginx.md

@@ -0,0 +1,130 @@
+# Nginx Forward-Auth
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+This guide uses the [Nginx `auth_request`](http://nginx.org/en/docs/http/ngx_http_auth_request_module.html) module to ask Paskia whether each request is allowed before proxying it to your backend.
+
+## Overview
+
+```nginx
+server {
+    listen 80;
+    server_name app.example.com;
+
+    # 1. Proxy /auth/ to Paskia (HTTP + WebSocket).
+    location /auth/ {
+        proxy_pass http://localhost:4401;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection $connection_upgrade;
+    }
+
+    # 2. All other paths are protected.
+    location / {
+        auth_request /auth-internal;
+
+        # 3. Capture the Remote-* headers from the auth response and
+        #    pass them to the backend request.
+        auth_request_set $remote_user        $upstream_http_remote_user;
+        auth_request_set $remote_name        $upstream_http_remote_name;
+        auth_request_set $remote_groups      $upstream_http_remote_groups;
+        auth_request_set $remote_org         $upstream_http_remote_org;
+        auth_request_set $remote_org_name    $upstream_http_remote_org_name;
+        auth_request_set $remote_role        $upstream_http_remote_role;
+        auth_request_set $remote_role_name   $upstream_http_remote_role_name;
+        auth_request_set $remote_session_exp $upstream_http_remote_session_expires;
+        auth_request_set $remote_credential  $upstream_http_remote_credential;
+
+        proxy_set_header Remote-User             $remote_user;
+        proxy_set_header Remote-Name             $remote_name;
+        proxy_set_header Remote-Groups           $remote_groups;
+        proxy_set_header Remote-Org              $remote_org;
+        proxy_set_header Remote-Org-Name         $remote_org_name;
+        proxy_set_header Remote-Role             $remote_role;
+        proxy_set_header Remote-Role-Name        $remote_role_name;
+        proxy_set_header Remote-Session-Expires  $remote_session_exp;
+        proxy_set_header Remote-Credential       $remote_credential;
+
+        # 4. The proxy_set_header lines above override any client-supplied
+        #    Remote-* headers, so the backend receives only the values from
+        #    Paskia's auth response.
+
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    # 5. Internal endpoint used by auth_request.
+    location = /auth-internal {
+        internal;
+        proxy_pass http://localhost:4401/auth/api/forward?perm=myapp:login;
+        proxy_http_version 1.1;
+        proxy_pass_request_body off;
+        proxy_set_header Content-Length "";
+        proxy_set_header X-Forwarded-Method $request_method;
+        proxy_set_header X-Forwarded-Uri $request_uri;
+        proxy_set_header Host $host;
+        proxy_set_header Cookie $http_cookie;
+        proxy_set_header Accept $http_accept;
+        # Drop hop-by-hop headers that must not reach the auth subrequest.
+        proxy_set_header Connection "";
+        proxy_set_header Upgrade "";
+        proxy_set_header Transfer-Encoding "";
+        proxy_set_header Keep-Alive "";
+        proxy_set_header Proxy-Connection "";
+        proxy_set_header TE "";
+    }
+}
+
+# WebSocket upgrade map.
+map $http_upgrade $connection_upgrade {
+    default upgrade;
+    ''      close;
+}
+```
+
+## What the configuration does
+
+1. **`/auth/`** is proxied straight to Paskia. The `Upgrade` and `Connection` headers are passed through so WebSocket endpoints such as `/auth/ws/authenticate` work.
+2. **`/`** is protected by `auth_request /auth-internal`. Nginx makes an internal subrequest to that location before proxying the original request to the app.
+3. **`auth_request_set`** captures each `Remote-*` header from the Paskia response. Nginx does not have wildcard capture, so every header must be listed explicitly. The captured values are then attached to the backend request with `proxy_set_header`.
+4. The `proxy_set_header` lines override any `Remote-*` headers the client might have sent, so the backend can trust the headers that come from Paskia.
+5. **`/auth-internal`** is the actual forward-auth call. It must:
+   - point to `/auth/api/forward`,
+   - not forward the request body (`proxy_pass_request_body off;`),
+   - pass `Host`, `Cookie`, `Accept`, `X-Forwarded-Method`, and `X-Forwarded-Uri`,
+   - strip hop-by-hop headers.
+
+## Adjusting requirements
+
+Change the query string on the `proxy_pass` line inside `/auth-internal` to require different permissions or recent authentication:
+
+```nginx
+proxy_pass http://localhost:4401/auth/api/forward?perm=myapp:login;
+proxy_pass http://localhost:4401/auth/api/forward?perm=myapp:admin&max_age=5min;
+proxy_pass http://localhost:4401/auth/api/forward?"";
+```
+
+The last form (`?""`) requires only authentication and no specific permission. See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md) for details.
+
+## Public paths
+
+To leave some paths unprotected (for example `/.well-known/` or `/static/`), add `location` blocks before the protected `location /` block:
+
+```nginx
+location /.well-known/ {
+    root /var/www;
+}
+
+location /static/ {
+    root /var/www;
+}
+```
+
+## Notes
+
+- Nginx `auth_request` always makes the auth subrequest with the same HTTP method as the original request, but the body is suppressed by the configuration above. Paskia uses the `X-Forwarded-Method` and `X-Forwarded-Uri` headers for logging.
+- The `auth_request_set` variables are empty when the auth request fails, so on 401/403 the backend is never contacted; Nginx returns Paskia's response directly.
+- For HTTPS, add `listen 443 ssl;` and your certificate configuration as usual.

docs/proxy/traefik.md

@@ -0,0 +1,126 @@
+# Traefik ForwardAuth
+
+[`/auth/api/forward`](../api/forward.md) · [Proxy guides](index.md)
+
+This guide uses Traefik's [ForwardAuth middleware](https://doc.traefik.io/traefik/reference/routing-configuration/http/middlewares/forwardauth/) to ask Paskia whether each request is allowed.
+
+## Overview
+
+A typical dynamic (YAML) configuration looks like this:
+
+```yaml
+http:
+  routers:
+    app:
+      rule: "Host(`app.example.com`)"
+      service: app-backend
+      middlewares:
+        - paskia-auth
+
+    # Route /auth/ straight to Paskia, bypassing the auth middleware.
+    auth:
+      rule: "Host(`app.example.com`) && PathPrefix(`/auth/`)"
+      service: paskia
+      middlewares: []
+
+  middlewares:
+    paskia-auth:
+      forwardAuth:
+        address: "http://localhost:4401/auth/api/forward?perm=myapp:login"
+        # Forward every Remote-* header from the auth response to the backend.
+        authResponseHeadersRegex: "^Remote-"
+        # Explicitly pass the headers Paskia needs. If left empty, all headers
+        # are forwarded; being explicit avoids accidentally leaking hop-by-hop
+        # headers to the auth server.
+        authRequestHeaders:
+          - Host
+          - Cookie
+          - Accept
+          - X-Forwarded-Method
+          - X-Forwarded-Uri
+          - X-Forwarded-Host
+          - X-Forwarded-Proto
+          - X-Forwarded-For
+
+  services:
+    app-backend:
+      loadBalancer:
+        servers:
+          - url: "http://localhost:3000"
+
+    paskia:
+      loadBalancer:
+        servers:
+          - url: "http://localhost:4401"
+```
+
+## What Traefik sends automatically
+
+Traefik's ForwardAuth middleware sends the auth request to the configured `address` and includes the following headers derived from the original request:
+
+| Header | Value |
+|---|---|
+| `X-Forwarded-Method` | Original HTTP method |
+| `X-Forwarded-Proto` | Original protocol (`http`/`https`) |
+| `X-Forwarded-Host` | Original host |
+| `X-Forwarded-Uri` | Original request URI (path and query) |
+| `X-Forwarded-For` | Client IP address |
+
+These are exactly the headers Paskia logs. You should still include them in `authRequestHeaders` if you set that list explicitly, to make sure they are not filtered out.
+
+## Response headers
+
+`authResponseHeadersRegex: "^Remote-"` tells Traefik to copy every response header starting with `Remote-` from Paskia's `204` response and add it to the request that is forwarded to your backend. It also strips any `Remote-*` headers that the client may have sent, so the backend can trust the values.
+
+For stricter control, you can list the headers explicitly instead of using the regex:
+
+```yaml
+authResponseHeaders:
+  - Remote-User
+  - Remote-Name
+  - Remote-Groups
+  - Remote-Org
+  - Remote-Org-Name
+  - Remote-Role
+  - Remote-Role-Name
+  - Remote-Session-Expires
+  - Remote-Credential
+```
+
+## Proxying `/auth/` to Paskia
+
+The `/auth/` router above forwards all authentication UI, API, and WebSocket traffic to Paskia. Because this router does **not** use the `paskia-auth` middleware, users can reach the login page and profile UI without being authenticated first. Traefik handles WebSocket upgrades automatically when the client requests them.
+
+If you are using a dedicated authentication host instead of `/auth/`, create a separate router for `auth.example.com` pointing to the Paskia service and start Paskia with `--auth-host auth.example.com`.
+
+## Adjusting requirements
+
+Change the `address` query string to require different permissions or recent authentication:
+
+```yaml
+address: "http://localhost:4401/auth/api/forward?perm=myapp:login"
+address: "http://localhost:4401/auth/api/forward?perm=myapp:admin&max_age=5min"
+address: "http://localhost:4401/auth/api/forward"
+```
+
+The last form requires only authentication, no specific permission. See [perm argument](../api/perm.md) and [max_age argument](../api/max-age.md).
+
+## Docker labels example
+
+When using Traefik with Docker Compose, you can define the middleware with labels:
+
+```yaml
+labels:
+  - "traefik.enable=true"
+  - "traefik.http.routers.myapp.rule=Host(`app.example.com`)"
+  - "traefik.http.routers.myapp.middlewares=paskia-auth"
+  - "traefik.http.middlewares.paskia-auth.forwardauth.address=http://localhost:4401/auth/api/forward?perm=myapp:login"
+  - "traefik.http.middlewares.paskia-auth.forwardauth.authResponseHeadersRegex=^Remote-"
+  - "traefik.http.middlewares.paskia-auth.forwardauth.authRequestHeaders=Host,Cookie,Accept,X-Forwarded-Method,X-Forwarded-Uri"
+```
+
+## Notes
+
+- By default ForwardAuth sends a request without the original body. If you need to forward the body for logging/validation, set `forwardBody: true` and a sensible `maxBodySize`, but for Paskia this is not required.
+- Paskia does not set cookies on the forward-auth response; it only returns `Remote-*` headers. Use the JavaScript helpers from the [paskia](https://www.npmjs.com/package/paskia) package for session renewal in the frontend.
+- For HTTPS, use `https://` in the `address` and configure TLS options (`tls.insecureSkipVerify: true` only for testing).

e2e/package-lock.json

@@ -10,7 +10,7 @@
       "devDependencies": {
         "@playwright/test": "^1.49.0",
         "@simplewebauthn/browser": "^13.1.2",
-        "@types/bun": "^1.3.3",
+        "@types/node": "*",
         "c8": "^10.1.3"
       }
     },
@@ -92,11 +92,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.57.0",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.2.tgz",
+      "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.57.0"
+        "playwright": "1.58.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -107,17 +109,11 @@
     },
     "node_modules/@simplewebauthn/browser": {
       "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/@simplewebauthn/browser/-/browser-13.2.2.tgz",
+      "integrity": "sha512-FNW1oLQpTJyqG5kkDg5ZsotvWgmBaC6jCHR7Ej0qUNep36Wl9tj2eZu7J5rP+uhXgHaLk+QQ3lqcw2vS5MX1IA==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/bun": {
-      "version": "1.3.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bun-types": "1.3.3"
-      }
-    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -126,7 +122,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "24.10.1",
+      "version": "25.2.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.3.tgz",
+      "integrity": "sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -176,14 +174,6 @@
         "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/bun-types": {
-      "version": "1.3.3",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/c8": {
       "version": "10.1.3",
       "resolved": "https://registry.npmjs.org/c8/-/c8-10.1.3.tgz",
@@ -412,6 +402,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -426,6 +431,7 @@
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
       "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -674,11 +680,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.57.0",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.57.0"
+        "playwright-core": "1.58.2"
       },
       "bin": {
         "playwright": "cli.js"
@@ -691,7 +699,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.57.0",
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -712,9 +722,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -894,6 +904,8 @@
     },
     "node_modules/undici-types": {
       "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
       "dev": true,
       "license": "MIT"
     },

e2e/package.json

@@ -5,18 +5,18 @@
   "description": "E2E tests for Paskia using Playwright with Virtual Authenticator",
   "type": "module",
   "scripts": {
-    "test": "bunx playwright test",
-    "test:headed": "bunx playwright test --headed",
-    "test:debug": "bunx playwright test --debug",
-    "test:ui": "bunx playwright test --ui",
-    "test:coverage": "COVERAGE=1 bunx playwright test",
-    "report": "bunx playwright show-report",
-    "install:browsers": "bunx playwright install chromium"
+    "test": "npx playwright test",
+    "test:headed": "npx playwright test --headed",
+    "test:debug": "npx playwright test --debug",
+    "test:ui": "npx playwright test --ui",
+    "test:coverage": "COVERAGE=1 npx playwright test",
+    "report": "npx playwright show-report",
+    "install:browsers": "npx playwright install chromium"
   },
   "devDependencies": {
     "@playwright/test": "^1.49.0",
     "@simplewebauthn/browser": "^13.1.2",
-    "@types/bun": "^1.3.3",
+    "@types/node": "*",
     "c8": "^10.1.3"
   }
 }

e2e/playwright.config.js

@@ -4,7 +4,7 @@ import { defineConfig, devices } from '@playwright/test'
  * Playwright configuration for Paskia E2E tests.
  * Uses Chrome's Virtual Authenticator for automated passkey testing.
  *
- * Run with: bun run test
+ * Run with: npm test
  */
 
 export default defineConfig({

e2e/tests/10-passkey.spec.ts

@@ -97,14 +97,14 @@ test.describe('Passkey Authentication E2E', () => {
     // Verify registration result
     expect(result.session_token).toBeDefined()
     expect(result.session_token).toHaveLength(16)
-    expect(result.user_uuid).toBeDefined()
-    expect(result.credential_uuid).toBeDefined()
+    expect(result.user).toBeDefined()
+    expect(result.credential).toBeDefined()
     expect(result.message).toContain('successfully')
 
     // Store for subsequent tests
     sessionToken = result.session_token
-    userUuid = result.user_uuid
-    credentialUuid = result.credential_uuid
+    userUuid = result.user
+    credentialUuid = result.credential
 
     // Save session token for other test groups to use
     saveSessionToken(sessionToken)
@@ -138,9 +138,9 @@ test.describe('Passkey Authentication E2E', () => {
     const validation = await validateSession(page, baseUrl, sessionToken)
 
     expect(validation.valid).toBe(true)
-    expect(validation.user_uuid).toBe(userUuid)
+    expect(validation.ctx.user.uuid).toBe(userUuid)
 
-    console.log(`✓ Session validated for user: ${validation.user_uuid}`)
+    console.log(`✓ Session validated for user: ${validation.ctx.user.uuid}`)
   })
 
   test('should retrieve user info', async ({ page }) => {
@@ -148,10 +148,10 @@ test.describe('Passkey Authentication E2E', () => {
 
     const userInfo = await getUserInfo(page, baseUrl, sessionToken)
 
-    expect(userInfo.user.user_uuid).toBe(userUuid)
-    expect(userInfo.user.user_name).toBe('Admin User')
+    expect(userInfo.user.uuid).toBe(userUuid)
+    expect(userInfo.user.display_name).toBe('Admin User')
     expect(userInfo.credentials).toBeDefined()
-    expect(userInfo.credentials.length).toBeGreaterThanOrEqual(1)
+    expect(Object.keys(userInfo.credentials).length).toBeGreaterThanOrEqual(1)
 
     // Navigate to profile and take screenshot
     const cookieName = getSessionCookieName()
@@ -169,8 +169,8 @@ test.describe('Passkey Authentication E2E', () => {
     await page.screenshot({ path: 'test-results/profile-view.png' })
     console.log('✓ Screenshot saved: test-results/profile-view.png')
 
-    console.log(`✓ User info retrieved: ${userInfo.user.user_name}`)
-    console.log(`✓ Credentials count: ${userInfo.credentials.length}`)
+    console.log(`✓ User info retrieved: ${userInfo.user.display_name}`)
+    console.log(`✓ Credentials count: ${Object.keys(userInfo.credentials).length}`)
   })
 
   test('should authenticate with existing passkey', async ({ page, virtualAuthenticator }) => {
@@ -190,7 +190,7 @@ test.describe('Passkey Authentication E2E', () => {
       displayName: 'Admin User (test device)'
     })
 
-    console.log(`✓ Added test credential: ${regResult.credential_uuid}`)
+    console.log(`✓ Added test credential: ${regResult.credential}`)
 
     // Now logout and authenticate with the fresh credential
     await logout(page, baseUrl, regResult.session_token)
@@ -201,7 +201,7 @@ test.describe('Passkey Authentication E2E', () => {
 
     expect(result.session_token).toBeDefined()
     expect(result.session_token).toHaveLength(16)
-    expect(result.user_uuid).toBe(userUuid)
+    expect(result.user).toBe(userUuid)
 
     // Update session token for subsequent tests
     sessionToken = result.session_token
@@ -209,7 +209,7 @@ test.describe('Passkey Authentication E2E', () => {
     // Save session token for other test groups to use
     saveSessionToken(sessionToken)
 
-    console.log(`✓ Authenticated as user: ${result.user_uuid}`)
+    console.log(`✓ Authenticated as user: ${result.user}`)
     console.log(`✓ New session token: ${sessionToken.substring(0, 4)}...`)
   })
 
@@ -219,7 +219,7 @@ test.describe('Passkey Authentication E2E', () => {
     const validation = await validateSession(page, baseUrl, sessionToken)
 
     expect(validation.valid).toBe(true)
-    expect(validation.user_uuid).toBe(userUuid)
+    expect(validation.ctx.user.uuid).toBe(userUuid)
 
     console.log(`✓ New session validated`)
   })
@@ -291,8 +291,8 @@ test.describe('Device Addition Dialog', () => {
     // Wait for the profile view to load
     await page.waitForSelector('[data-view="profile"]', { timeout: 5000 })
 
-    // Click the "Add Another Device" button
-    const addDeviceButton = page.getByRole('button', { name: 'Add Another Device' })
+    // Click the "Another Device" button
+    const addDeviceButton = page.getByRole('button', { name: 'Another Device' })
     await expect(addDeviceButton).toBeVisible()
     await addDeviceButton.click()
 
@@ -301,7 +301,7 @@ test.describe('Device Addition Dialog', () => {
     await expect(dialog).toBeVisible({ timeout: 5000 })
 
     // Verify dialog contains expected elements
-    await expect(dialog.locator('h2')).toContainText('Device Registration Link')
+    await expect(dialog.locator('h2')).toContainText('Add Another Device')
 
     // Wait for QR code to be generated (canvas should have content)
     const qrCanvas = dialog.locator('.qr-code')
@@ -318,16 +318,16 @@ test.describe('Device Addition Dialog', () => {
     expect(linkHref).toContain('http://localhost:4404/auth/')
     console.log(`✓ Device link displayed: ${linkText} (href: ${linkHref})`)
 
-    // Verify expiration warning is shown
-    await expect(dialog.locator('.reg-help')).toContainText('Expires')
+    // Verify help text is shown
+    await expect(dialog.locator('.reg-help')).toContainText('Scan this QR code')
 
     // Take screenshot of the dialog
     await dialog.screenshot({ path: 'test-results/device-addition-dialog.png' })
     console.log(`✓ Screenshot saved: test-results/device-addition-dialog.png`)
 
-    // Verify Copy Link button exists
-    const copyButton = dialog.getByRole('button', { name: 'Copy Link' })
-    await expect(copyButton).toBeVisible()
+    // Verify the QR link element is clickable (copy functionality is built into clicking it)
+    const qrLink = dialog.locator('a.qr-link')
+    await expect(qrLink).toBeVisible()
 
     // Close the dialog (use the text button, not the icon button)
     const closeButton = dialog.locator('button.btn-secondary', { hasText: 'Close' })
@@ -357,12 +357,12 @@ test.describe('Device Addition Dialog', () => {
     await page.waitForSelector('[data-view="profile"]', { timeout: 5000 })
 
     // Open the dialog
-    await page.getByRole('button', { name: 'Add Another Device' }).click()
+    await page.getByRole('button', { name: 'Another Device' }).click()
     const dialog = page.locator('.device-dialog')
     await expect(dialog).toBeVisible({ timeout: 5000 })
 
     // Extract the reset token from the displayed URL
-    const linkText = dialog.locator('.qr-link p')
+    const linkText = dialog.locator('.qr-link .link-text')
     const linkContent = await linkText.textContent()
 
     // URL format: localhost/auth/word1.word2.word3.word4.word5
@@ -405,7 +405,7 @@ test.describe('Device Addition Dialog', () => {
   })
 })
 
-test.describe('ProfileView - Add New Passkey', () => {
+test.describe('ProfileView - Register New', () => {
   const baseUrl = process.env.BASE_URL || 'http://localhost:4404'
 
   test('should show credentials list in profile', async ({ page }) => {
@@ -427,7 +427,7 @@ test.describe('ProfileView - Add New Passkey', () => {
     console.log(`✓ Profile shows ${credentialItems} credential(s) in list`)
   })
 
-  test('should add a new passkey using Add New Passkey button', async ({ page }) => {
+  test('should add a new passkey using Register New button', async ({ page }) => {
     const sessionToken = getSavedSessionToken()
     test.skip(!sessionToken, 'Requires saved session token')
 
@@ -444,8 +444,8 @@ test.describe('ProfileView - Add New Passkey', () => {
     const initialCredentialCount = await page.locator('.credential-item').count()
     console.log(`Initial credential count: ${initialCredentialCount}`)
 
-    // Click "Add New Passkey" button
-    const addPasskeyBtn = page.locator('button:has-text("Add New Passkey")')
+    // Click "Register New" button
+    const addPasskeyBtn = page.locator('button:has-text("Register New")')
     await expect(addPasskeyBtn).toBeVisible()
     await addPasskeyBtn.click()
 
@@ -490,7 +490,7 @@ test.describe('ProfileView - Add New Passkey', () => {
 
     // Try to add a passkey - with excludeCredentials the authenticator should
     // prevent re-registration of the same credential
-    const addPasskeyBtn = page.locator('button:has-text("Add New Passkey")')
+    const addPasskeyBtn = page.locator('button:has-text("Register New")')
     await expect(addPasskeyBtn).toBeVisible()
     await addPasskeyBtn.click()
 
@@ -541,8 +541,8 @@ test.describe('ProfileView - Multi-Authenticator', () => {
     await page.waitForSelector('.credential-list', { timeout: 10000 })
     const initialCredentialCount = await page.locator('.credential-item').count()
 
-    // Click "Add New Passkey" button
-    const addPasskeyBtn = page.locator('button:has-text("Add New Passkey")')
+    // Click "Register New" button
+    const addPasskeyBtn = page.locator('button:has-text("Register New")')
     await expect(addPasskeyBtn).toBeVisible()
     await addPasskeyBtn.click()
 

e2e/tests/20-api-auth.spec.ts

@@ -10,6 +10,12 @@ import {
   logout,
 } from './fixtures/passkey-helpers'
 import type { Page, Frame } from '@playwright/test'
+import { readFileSync } from 'fs'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
 
 /**
  * E2E tests for API mode authentication flows.
@@ -55,8 +61,18 @@ async function clearSessionCookie(page: Page): Promise<void> {
 /**
  * Set up the test page using the examples page directly.
  * The examples page already has iframe handling - we just add a Promise wrapper.
+ * We route the paskia-js module request to serve from the local dist.
  */
 async function setupTestHarness(page: Page): Promise<void> {
+  // Serve paskia.js from the local filesystem since the server doesn't serve /paskia-js/
+  const paskiaJsPath = join(__dirname, '..', '..', 'paskia-js', 'dist', 'paskia.js')
+  await page.route('**/paskia-js/dist/paskia.js', async route => {
+    const body = readFileSync(paskiaJsPath, 'utf-8')
+    await route.fulfill({
+      body,
+      contentType: 'application/javascript',
+    })
+  })
   // Navigate to the examples page which already has the auth iframe handling
   await page.goto(`${baseUrl}/auth/examples/`)
 }
@@ -84,7 +100,7 @@ async function makeApiCall(page: Page, url: string, method = 'GET'): Promise<{ s
           // Wait a tick for the page's handler to retry, then make our own call
           setTimeout(async () => {
             try {
-              const response = await fetch(url, { method, credentials: 'include' });
+              const response = await fetch(url, { method });
               if (response.status === 204) {
                 resolve({ status: 204 });
               } else if (response.ok) {
@@ -111,7 +127,7 @@ async function makeApiCall(page: Page, url: string, method = 'GET'): Promise<{ s
       setTimeout(async () => {
         if (resolved) return;
         try {
-          const response = await fetch(url, { method, credentials: 'include' });
+          const response = await fetch(url, { method });
           // Only resolve if this is a success or non-auth error
           if (response.status !== 401 && response.status !== 403) {
             if (resolved) return;
@@ -143,8 +159,8 @@ async function makeApiCall(page: Page, url: string, method = 'GET'): Promise<{ s
  * Wait for auth iframe to appear and return a reference to it.
  */
 async function waitForAuthIframe(page: Page, timeout = 5000): Promise<Frame> {
-  await page.waitForSelector('#auth-iframe', { timeout })
-  const iframe = page.frameLocator('#auth-iframe')
+  await page.waitForSelector('#paskia-iframe', { timeout })
+  const iframe = page.frameLocator('#paskia-iframe')
   // Wait for iframe content to load
   await iframe.locator('.view-root').waitFor({ timeout })
   return page.frame({ url: /\/auth\/restricted\// })!
@@ -154,14 +170,14 @@ async function waitForAuthIframe(page: Page, timeout = 5000): Promise<Frame> {
  * Wait for auth iframe to disappear.
  */
 async function waitForAuthIframeHidden(page: Page, timeout = 5000): Promise<void> {
-  await page.waitForSelector('#auth-iframe', { state: 'detached', timeout })
+  await page.waitForSelector('#paskia-iframe', { state: 'detached', timeout })
 }
 
 /**
  * Click Back button in auth iframe.
  */
 async function clickBackInIframe(page: Page): Promise<void> {
-  const iframe = page.frameLocator('#auth-iframe')
+  const iframe = page.frameLocator('#paskia-iframe')
   await iframe.getByRole('button', { name: 'Back' }).click()
 }
 
@@ -169,7 +185,7 @@ async function clickBackInIframe(page: Page): Promise<void> {
  * Click Login button in auth iframe.
  */
 async function clickLoginInIframe(page: Page): Promise<void> {
-  const iframe = page.frameLocator('#auth-iframe')
+  const iframe = page.frameLocator('#paskia-iframe')
   await iframe.getByRole('button', { name: 'Login' }).click()
 }
 
@@ -177,7 +193,7 @@ async function clickLoginInIframe(page: Page): Promise<void> {
  * Click Verify button in auth iframe (for reauth mode).
  */
 async function clickVerifyInIframe(page: Page): Promise<void> {
-  const iframe = page.frameLocator('#auth-iframe')
+  const iframe = page.frameLocator('#paskia-iframe')
   await iframe.getByRole('button', { name: 'Verify' }).click()
 }
 
@@ -185,7 +201,7 @@ async function clickVerifyInIframe(page: Page): Promise<void> {
  * Click Logout button in auth iframe (for forbidden mode).
  */
 async function clickLogoutInIframe(page: Page): Promise<void> {
-  const iframe = page.frameLocator('#auth-iframe')
+  const iframe = page.frameLocator('#paskia-iframe')
   await iframe.getByRole('button', { name: 'Logout' }).click()
 }
 
@@ -200,11 +216,11 @@ test.describe('API Mode - 401 Login Flow', () => {
     await clearSessionCookie(page)
 
     // Make API call that triggers 401 (don't await - it blocks until iframe resolves)
-    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'POST').catch(e => e)
+    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'GET').catch(e => e)
     console.log('✓ Auth iframe appeared on 401')
 
     // Verify it's in login mode (not reauth)
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     await expect(iframe.locator('h1')).toContainText('🔐')
     await expect(iframe.getByRole('button', { name: 'Login' })).toBeVisible()
 
@@ -242,7 +258,7 @@ test.describe('API Mode - 401 Login Flow', () => {
       resetToken: deviceToken,
       displayName: 'API Test Device',
     })
-    console.log(`✓ Registered credential: ${regResult.credential_uuid}`)
+    console.log(`✓ Registered credential: ${regResult.credential}`)
 
     // Logout to clear session (but keep the passkey in virtual authenticator)
     await logout(page, baseUrl, regResult.session_token)
@@ -252,7 +268,7 @@ test.describe('API Mode - 401 Login Flow', () => {
     await setupTestHarness(page)
 
     // Make API call that triggers 401
-    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'POST')
+    const apiCallPromise = makeApiCall(page, '/auth/api/user-info', 'GET')
 
     // Wait for auth iframe to appear
     await waitForAuthIframe(page)
@@ -314,7 +330,7 @@ test.describe('API Mode - 401 Reauth Flow', () => {
     console.log('✓ Reauth iframe appeared (session older than max_age)')
 
     // Verify it's in reauth mode
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     await expect(iframe.locator('h1')).toContainText('Additional Authentication')
     await expect(iframe.getByRole('button', { name: 'Verify' })).toBeVisible()
 
@@ -362,7 +378,7 @@ test.describe('API Mode - 401 Reauth Flow', () => {
     await waitForAuthIframe(page)
     console.log('✓ Reauth iframe appeared')
 
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     await expect(iframe.locator('h1')).toContainText('Additional Authentication')
 
     // Click Verify - virtual authenticator handles passkey
@@ -394,7 +410,7 @@ test.describe('API Mode - 403 Forbidden Flow', () => {
     const apiCallPromise = makeApiCall(page, '/auth/api/forward?perm=auth:admin', 'GET').catch(e => e)
 
     // Check if auth iframe appeared
-    const iframeAppeared = await page.waitForSelector('#auth-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
+    const iframeAppeared = await page.waitForSelector('#paskia-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
 
     if (!iframeAppeared) {
       // User might already have admin permission
@@ -410,7 +426,7 @@ test.describe('API Mode - 403 Forbidden Flow', () => {
 
     // Wait for view to stabilize and check mode
     await page.waitForTimeout(500)
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     const headingText = await iframe.locator('h1').textContent()
     console.log(`  Heading: ${headingText}`)
 
@@ -459,7 +475,7 @@ test.describe('API Mode - 403 Forbidden Flow', () => {
     const apiCallPromise = makeApiCall(page, '/auth/api/forward?perm=auth:admin', 'GET').catch(e => e)
 
     // Check if auth iframe appeared
-    const iframeAppeared = await page.waitForSelector('#auth-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
+    const iframeAppeared = await page.waitForSelector('#paskia-iframe', { timeout: 3000 }).then(() => true).catch(() => false)
 
     if (!iframeAppeared) {
       const result = await apiCallPromise
@@ -470,7 +486,7 @@ test.describe('API Mode - 403 Forbidden Flow', () => {
     }
 
     await waitForAuthIframe(page)
-    const iframe = page.frameLocator('#auth-iframe')
+    const iframe = page.frameLocator('#paskia-iframe')
     await page.waitForTimeout(500)
 
     const headingText = await iframe.locator('h1').textContent()
@@ -534,7 +550,7 @@ test.describe('API Mode - Direct API Response Format', () => {
     expect(data.auth).toBeDefined()
     expect(data.auth.iframe).toBeDefined()
     expect(data.auth.mode).toBe('login')
-    expect(data.auth.iframe).toContain('/auth/restricted/')
+    expect(data.auth.iframe).toContain('/auth/restricted/iframe')
 
     console.log(`✓ 401 response includes auth.iframe: ${data.auth.iframe}`)
   })

e2e/tests/fixtures/passkey-helpers.ts

@@ -12,17 +12,51 @@ const stateFile = join(__dirname, '..', '..', 'test-data', 'test-state.json')
  */
 
 export interface RegistrationResult {
-  user_uuid: string
-  credential_uuid: string
+  user: string
+  credential: string
   session_token: string
   message: string
 }
 
 export interface AuthenticationResult {
-  user_uuid: string
+  user: string
   session_token: string
 }
 
+export interface SessionContext {
+  user: { uuid: string; display_name: string }
+  org: { uuid: string; display_name: string }
+  role: { uuid: string; display_name: string }
+  permissions: string[]
+}
+
+export interface UserInfo {
+  ctx: SessionContext
+  created_at: string
+  last_seen: string
+  visits: number
+  credentials: Array<{
+    credential: string
+    aaguid: string
+    created_at: string
+    last_used: string | null
+    last_verified: string | null
+    sign_count: number
+    is_current_session: boolean
+  }>
+  aaguid_info: Record<string, { name: string; icon?: string; icon_dark?: string }>
+  sessions: Array<{
+    id: string
+    credential: string
+    host: string
+    ip: string
+    user_agent: string
+    last_renewed: string
+    is_current: boolean
+    is_current_host: boolean
+  }>
+}
+
 /**
  * Get the bootstrap reset token from the test state file.
  */
@@ -159,7 +193,8 @@ export async function registerPasskey(
   baseUrl: string,
   options: { resetToken?: string; displayName?: string } = {}
 ): Promise<RegistrationResult> {
-  return await page.evaluate(async ({ baseUrl, resetToken, displayName }) => {
+  // Step 1: Do WebSocket registration + exchange code in browser context
+  const wsResult = await page.evaluate(async ({ baseUrl, resetToken, displayName }) => {
     // Build WebSocket URL with query parameters
     let wsUrl = `${baseUrl.replace('http', 'ws')}/auth/ws/register`
     const params: string[] = []
@@ -169,6 +204,7 @@ export async function registerPasskey(
 
     return new Promise<any>((resolve, reject) => {
       const ws = new WebSocket(wsUrl)
+      let done = false
 
       ws.onopen = () => {
         console.log('WebSocket connected for registration')
@@ -179,15 +215,31 @@ export async function registerPasskey(
 
         // Check for error response
         if (data.detail) {
+          done = true
           ws.close()
           reject(new Error(data.detail))
           return
         }
 
-        // Check if this is the final success response
-        if (data.session_token) {
+        // Check if this is the final success response (exchange_code flow)
+        if (data.exchange_code) {
+          done = true
           ws.close()
-          resolve(data)
+          // Exchange the code for a session cookie
+          try {
+            const resp = await fetch(`${baseUrl}/auth/api/set-session`, {
+              method: 'POST',
+              headers: { 'Authorization': `Bearer ${data.exchange_code}` },
+            })
+            if (!resp.ok) throw new Error(`Exchange failed: ${resp.status}`)
+            resolve({
+              user: data.user,
+              credential: data.credential,
+              message: data.message || 'Registration successful',
+            })
+          } catch (err: any) {
+            reject(new Error(`Code exchange failed: ${err.message}`))
+          }
           return
         }
 
@@ -259,12 +311,21 @@ export async function registerPasskey(
       }
 
       ws.onclose = (event) => {
-        if (!event.wasClean && event.code !== 1000) {
+        if (!done && !event.wasClean && event.code !== 1000) {
           reject(new Error(`WebSocket closed unexpectedly: ${event.code}`))
         }
       }
     })
   }, { baseUrl, resetToken: options.resetToken, displayName: options.displayName })
+
+  // Step 2: Extract the session token from the cookie set by the exchange
+  const cookies = await page.context().cookies()
+  const cookieName = getSessionCookieName()
+  const sessionCookie = cookies.find(c => c.name === cookieName)
+  return {
+    ...wsResult,
+    session_token: sessionCookie?.value || '',
+  }
 }
 
 /**
@@ -275,11 +336,13 @@ export async function authenticatePasskey(
   page: Page,
   baseUrl: string
 ): Promise<AuthenticationResult> {
-  return await page.evaluate(async ({ baseUrl }) => {
+  // Step 1: Do WebSocket authentication + exchange code in browser context
+  const wsResult = await page.evaluate(async ({ baseUrl }) => {
     const wsUrl = `${baseUrl.replace('http', 'ws')}/auth/ws/authenticate`
 
     return new Promise<any>((resolve, reject) => {
       const ws = new WebSocket(wsUrl)
+      let done = false
 
       ws.onopen = () => {
         console.log('WebSocket connected for authentication')
@@ -290,15 +353,27 @@ export async function authenticatePasskey(
 
         // Check for error response
         if (data.detail) {
+          done = true
           ws.close()
           reject(new Error(data.detail))
           return
         }
 
-        // Check if this is the final success response
-        if (data.session_token) {
+        // Check if this is the final success response (exchange_code flow)
+        if (data.exchange_code) {
+          done = true
           ws.close()
-          resolve(data)
+          // Exchange the code for a session cookie
+          try {
+            const resp = await fetch(`${baseUrl}/auth/api/set-session`, {
+              method: 'POST',
+              headers: { 'Authorization': `Bearer ${data.exchange_code}` },
+            })
+            if (!resp.ok) throw new Error(`Exchange failed: ${resp.status}`)
+            resolve({ user: data.user })
+          } catch (err: any) {
+            reject(new Error(`Code exchange failed: ${err.message}`))
+          }
           return
         }
 
@@ -361,12 +436,21 @@ export async function authenticatePasskey(
       }
 
       ws.onclose = (event) => {
-        if (!event.wasClean && event.code !== 1000) {
+        if (!done && !event.wasClean && event.code !== 1000) {
           reject(new Error(`WebSocket closed unexpectedly: ${event.code}`))
         }
       }
     })
   }, { baseUrl })
+
+  // Step 2: Extract the session token from the cookie set by the exchange
+  const cookies = await page.context().cookies()
+  const cookieName = getSessionCookieName()
+  const sessionCookie = cookies.find(c => c.name === cookieName)
+  return {
+    ...wsResult,
+    session_token: sessionCookie?.value || '',
+  }
 }
 
 /**
@@ -376,7 +460,7 @@ export async function validateSession(
   page: Page,
   baseUrl: string,
   sessionToken: string
-): Promise<{ valid: boolean; user_uuid: string; renewed: boolean }> {
+): Promise<{ valid: boolean; ctx: SessionContext; renewed: boolean }> {
   const cookieName = getSessionCookieName()
   const response = await page.request.post(`${baseUrl}/auth/api/validate`, {
     headers: {
@@ -393,9 +477,9 @@ export async function getUserInfo(
   page: Page,
   baseUrl: string,
   sessionToken: string
-): Promise<any> {
+): Promise<UserInfo> {
   const cookieName = getSessionCookieName()
-  const response = await page.request.post(`${baseUrl}/auth/api/user-info`, {
+  const response = await page.request.get(`${baseUrl}/auth/api/user-info`, {
     headers: {
       'Cookie': `${cookieName}=${sessionToken}`,
     },

e2e/tests/global-setup.ts

@@ -1,6 +1,6 @@
-import { spawn } from 'child_process'
+import { execSync, spawn } from 'child_process'
 import { join, dirname } from 'path'
-import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import { existsSync, mkdirSync, rmSync, writeFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -31,6 +31,11 @@ export default async function globalSetup() {
     mkdirSync(testDataDir, { recursive: true })
   }
 
+  // Build the package first
+  console.log('  Building package with uv build...')
+  execSync('uv build', { cwd: projectRoot, stdio: 'inherit' })
+  console.log('  ✅ Build complete\n')
+
   console.log('  Starting server with in-memory database...')
   if (COLLECT_COVERAGE) {
     console.log('  📊 Coverage collection enabled for Python backend')
@@ -42,21 +47,28 @@ export default async function globalSetup() {
   const serverArgs = COLLECT_COVERAGE
     ? [
         'run', 'coverage', 'run', '--parallel-mode',
-        '-m', 'paskia.fastapi', 'serve', 'localhost:4404',
+        '-m', 'paskia', '-l', 'localhost:4404',
         '--rp-id', 'localhost'
       ]
     : [
-        'run', 'paskia', 'serve', 'localhost:4404',
+        'run', 'paskia', '-l', 'localhost:4404',
         '--rp-id', 'localhost'
       ]
 
+  // Use a fresh database file for tests
+  const testDbFile = join(testDataDir, 'test.paskiadb')
+
+  if (existsSync(testDbFile)) {
+    console.log('  Removing stale test database...')
+    rmSync(testDbFile, { force: true, recursive: true })
+  }
+
   // Start the server using Node's spawn
-  // Use in-memory SQLite for faster tests
   const serverProcess = spawn('uv', serverArgs, {
     cwd: projectRoot,
     env: {
       ...process.env,
-      PASKIA_DB: 'sqlite+aiosqlite:///:memory:',
+      PASKIA_DB: testDbFile,
       COVERAGE_FILE: join(projectRoot, '.coverage'),
     },
     stdio: ['ignore', 'pipe', 'pipe'],

e2e/tests/global-teardown.ts

@@ -59,18 +59,11 @@ export default async function globalTeardown() {
     rmSync(stateFile, { force: true })
   }
 
-  // Optionally clean up test database (keep it for debugging by default)
-  if (process.env.CLEANUP_TEST_DB === 'true') {
-    const dbPath = join(testDataDir, 'test.sqlite')
-    if (existsSync(dbPath)) {
-      console.log('  Removing test database...')
-      rmSync(dbPath)
-    }
-    // Remove wal/shm files too
-    for (const ext of ['-wal', '-shm']) {
-      const file = dbPath + ext
-      if (existsSync(file)) rmSync(file)
-    }
+  // Clean up test database
+  const testDbFile = join(testDataDir, 'test.paskiadb')
+  if (existsSync(testDbFile)) {
+    console.log('  Removing test database...')
+    rmSync(testDbFile, { force: true, recursive: true })
   }
 
   // Generate Python coverage report if coverage was collected

e2e/tsconfig.json

@@ -8,7 +8,7 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
-    "types": ["bun-types"]
+    "types": ["node"]
   },
   "include": ["tests/**/*.ts", "playwright.config.ts"],
   "exclude": ["node_modules"]

examples/index.html

@@ -8,26 +8,6 @@
         :root {
             color-scheme: light dark;  /* Automatic themes by browser */
         }
-        /* Login/reauth/forbidden dialog will appear in this iframe */
-        #auth-iframe {
-            /* Full viewport overlay */
-            border: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 9999;
-            /* Optional transparent background with optional blur backdrop */
-            color-scheme: auto;
-            background: transparent;
-            backdrop-filter: blur(.1rem) brightness(0.7);
-            -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
-        }
-        /* Prevent background scroll when auth-iframe is shown */
-        body:has(#auth-iframe) {
-            overflow: hidden;
-        }
     </style>
 </head>
 <body>
@@ -47,7 +27,7 @@
             <div class="section">
                 <h2>API Mode (not leaving the page)</h2>
                 <p>For SPAs and fetch() calls - shows auth in an iframe overlay:</p>
-                <button onclick="apiCall('/auth/api/user-info', 'POST')">📋 Get User Info</button>
+                <button onclick="apiCall('/auth/api/user-info', 'GET')">📋 Get User Info</button>
                 <button onclick="apiCall('/auth/api/forward?max_age=10s')">🔄 Reauth (max_age=10s)</button>
                 <button onclick="apiCall('/auth/api/forward?perm=auth:admin')">🛡️ Admin Only</button>
                 <button onclick="logout()">🚪 Logout</button>
@@ -65,99 +45,50 @@
         </div>
     </div>
 
-    <script>
+    <script type="module">
+        import { apiFetch, apiJson, AuthCancelledError } from '/paskia-js/dist/paskia.js'
+
         const output = document.getElementById('output');
-        let pendingCall = null;  // Stores the API call to retry after auth
-
-        // The auth iframe posts messages when authentication completes or is cancelled.
-        // Message types: 'auth-success' (proceed), 'auth-back' (user cancelled)
-        // Errors during auth stay in the dialog allowing retry, no message is sent.
-        window.addEventListener('message', (event) => {
-            const { type, message } = event.data || {};
-
-            if (type === 'auth-success') {
-                log('✓ Authentication successful, retrying...');
-                hideAuthIframe();
-                // Retry the original API call that triggered authentication
-                if (pendingCall) {
-                    const { url, method } = pendingCall;
-                    pendingCall = null;
-                    apiCall(url, method);
-                }
-            } else if (type === 'auth-back') {
-                log(message || 'Authentication cancelled');
-                hideAuthIframe();
-                pendingCall = null;
-            }
-        });
-
-        // Make an API call, handling 401/403 by showing the auth iframe.
-        // The server returns JSON with auth.iframe URL when authentication is needed.
-        async function apiCall(url, method = 'GET') {
-            log(`${method} ${url}...`);
-
-            const response = await fetch(url, { method, credentials: 'include' });
-
-            // Server returns 401 (login/reauth) or 403 (missing permissions)
-            // with a JSON body containing the iframe URL for authentication
-            if (response.status === 401 || response.status === 403) {
-                const data = await response.json();
-                if (data.auth?.iframe) {
-                    const mode = data.auth.mode;  // 'login' or 'reauth'
-                    log(`${mode === 'reauth' ? 'Re-authentication' : 'Authentication'} required...`);
-                    pendingCall = { url, method };
-                    showAuthIframe(data.auth.iframe);
-                    return;
-                }
-                log(`Error: ${response.status} - ${data.detail}`);
-                return;
-            }
-
-            // Forward endpoint returns 204 on success (Caddy then adds Remote-* headers)
-            if (response.status === 204) {
-                log('✓ Success (204 No Content)\nHeaders:\n' +
-                    [...response.headers].filter(([k]) => k.startsWith('remote-'))
-                        .map(([k, v]) => `  ${k}: ${v}`).join('\n'));
-                return;
-            }
-
-            if (!response.ok) {
-                log(`Error: ${response.status} ${response.statusText}`);
-                return;
-            }
-
-            const data = await response.json();
-            log('✓ Response:\n' + JSON.stringify(data, null, 2));
-        }
-
-        async function logout() {
-            await fetch('/auth/api/logout', { method: 'POST', credentials: 'include' });
-            log('Logged out');
-        }
-
-        // Create fullscreen iframe for authentication.
-        // The 'allow' attribute enables WebAuthn (passkey) API inside the iframe.
-        function showAuthIframe(url) {
-            hideAuthIframe();
-            const iframe = document.createElement('iframe');
-            iframe.id = 'auth-iframe';
-            iframe.src = url;
-            document.body.appendChild(iframe);
-            log("Authentication dialog open...")
-        }
-
-        function hideAuthIframe() {
-            document.getElementById('auth-iframe')?.remove();
-        }
 
         function log(msg) {
             output.textContent = msg;
         }
 
+        // Make an API call using paskia module (handles 401/403 automatically)
+        window.apiCall = async function(url, method = 'GET') {
+            log(`${method} ${url}...`);
+            try {
+                const response = await apiFetch(url, { method });
+
+                // Forward endpoint returns 204 on success
+                if (response.status === 204) {
+                    log('✓ Success (204 No Content)');
+                    return;
+                }
+
+                if (!response.ok) {
+                    log(`Error: ${response.status} ${response.statusText}`);
+                    return;
+                }
+
+                const data = await response.json();
+                log('✓ Response:\n' + JSON.stringify(data, null, 2));
+            } catch (e) {
+                if (e instanceof AuthCancelledError) {
+                    log('Authentication cancelled');
+                } else {
+                    log(`Error: ${e.message}`);
+                }
+            }
+        }
+
+        window.logout = async function() {
+            await fetch('/auth/api/logout', { method: 'POST' });
+            log('Logged out');
+        }
+
         // Browser mode: open the forward endpoint directly in a new window.
-        // When Accept: text/html, the server redirects to the login page if needed,
-        // then back to the original URL after authentication.
-        function browserNav(url) {
+        window.browserNav = function(url) {
             log('Opening in new window...\nIf not authenticated, you\'ll see the login page.\nAfter auth, you\'ll see a 204 response (blank page = success).');
             window.open(url, '_blank');
         }

frontend/auth/App.vue

@@ -2,10 +2,10 @@
   <div class="app-shell">
     <StatusMessage />
     <main class="app-main">
-      <HostProfileView v-if="authenticated && isHostMode" :initializing="loading" />
-      <ProfileView v-else-if="authenticated" />
-      <LoadingView v-else-if="loading" :message="loadingMessage" />
-      <AuthRequiredMessage v-else-if="showBackMessage" @reload="reloadPage" />
+      <HostProfileView v-if="viewState === 'profile' && isHostMode" />
+      <ProfileView v-else-if="viewState === 'profile'" />
+      <LoadingView v-else-if="viewState === 'loading'" :message="loadingMessage" />
+      <AccessDenied v-else-if="viewState === 'terminal'" />
     </main>
   </div>
 </template>
@@ -13,18 +13,17 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useAuthStore } from '@/stores/auth'
-import { apiJson, getAuthIframeUrl } from '@/utils/api'
+import { apiJson, SessionValidator, settings as paskiaSettings } from 'paskia'
+import { updateThemeFromSession } from '@/utils/theme'
 import StatusMessage from '@/components/StatusMessage.vue'
 import ProfileView from '@/components/ProfileView.vue'
 import HostProfileView from '@/components/HostProfileView.vue'
 import LoadingView from '@/components/LoadingView.vue'
-import AuthRequiredMessage from '@/components/AccessDenied.vue'
+import AccessDenied from '@/components/AccessDenied.vue'
 
 const store = useAuthStore()
-const loading = ref(true)
+const viewState = ref('loading')  // 'loading' | 'profile' | 'terminal'
 const loadingMessage = ref('Loading...')
-const authenticated = ref(false)
-const showBackMessage = ref(false)
 
 /**
  * Normalize a host string for comparison (lowercase, strip default ports).
@@ -48,128 +47,50 @@ const isHostMode = computed(() => {
   const configuredHost = normalizeHost(authHost)
   return currentHost !== configuredHost
 })
-let validationTimer = null
-let authIframe = null
+
+function onSessionLost(e) {
+  store.userInfo = null
+  store.ctx = null
+  if (e?.name === 'AuthCancelledError') {
+    viewState.value = 'terminal'
+  } else {
+    store.showMessage(e?.message || 'Session lost', 'error', 5000)
+    viewState.value = 'terminal'
+  }
+}
+
+const userUuidGetter = () => store.ctx?.user.uuid
+const sessionValidator = new SessionValidator(userUuidGetter, onSessionLost)
+
+onMounted(() => sessionValidator.start())
+onUnmounted(() => sessionValidator.stop())
 
 async function loadUserInfo() {
+  viewState.value = 'loading'
+  loadingMessage.value = 'Loading...'
   try {
-    store.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
-    authenticated.value = true
-    loading.value = false
-    startSessionValidation()
-    return true
-  } catch (e) {
-    return false
-  }
-}
-
-async function showAuthIframe() {
-  // Remove existing iframe if any
-  hideAuthIframe()
-
-  // Create new iframe for authentication using src URL
-  const url = await getAuthIframeUrl('login')
-  authIframe = document.createElement('iframe')
-  authIframe.id = 'auth-iframe'
-  authIframe.title = 'Authentication'
-  authIframe.allow = 'publickey-credentials-get; publickey-credentials-create'
-  authIframe.src = url
-  document.body.appendChild(authIframe)
-  loadingMessage.value = 'Authentication required...'
-}
-
-function hideAuthIframe() {
-  if (authIframe) {
-    authIframe.remove()
-    authIframe = null
-  }
-}
-
-function reloadPage() {
-  window.location.reload()
-}
-
-function handleAuthMessage(event) {
-  const data = event.data
-  if (!data?.type) return
-
-  switch (data.type) {
-    case 'auth-success':
-      // Authentication successful - reload user info
-      hideAuthIframe()
-      loading.value = true
-      loadingMessage.value = 'Loading user profile...'
-      loadUserInfo()
-      break
-
-    case 'auth-error':
-      // Authentication failed - keep iframe open so user can retry
-      if (data.cancelled) {
-        console.log('Authentication cancelled by user')
-      } else {
-        store.showMessage(data.message || 'Authentication failed', 'error', 5000)
-      }
-      break
-
-    case 'auth-cancelled':
-      // Legacy support - treat as auth-error with cancelled flag
-      console.log('Authentication cancelled')
-      break
-
-    case 'auth-back':
-      // User clicked Back - show message with reload option
-      hideAuthIframe()
-      loading.value = false
-      showBackMessage.value = true
-      store.showMessage('Authentication cancelled', 'info', 3000)
-      break
-
-    case 'auth-close-request':
-      // Legacy support - treat as back
-      hideAuthIframe()
-      break
-  }
-}
-
-async function validateSession() {
-  try {
-    await apiJson('/auth/api/validate', {
-      method: 'POST',
-      credentials: 'include'
-    })
-    // If successful, session was renewed automatically
-  } catch (error) {
-    if (error.status === 401) {
-      // Session expired - need to re-authenticate
-      console.log('Session expired, requiring re-authentication')
-      authenticated.value = false
-      loading.value = true
-      stopSessionValidation()
-      showAuthIframe()
-    } else {
-      console.error('Session validation error:', error)
-      // Don't treat network errors as session expiry
+    // apiJson handles 401/403 with auth.iframe automatically:
+    // shows overlay iframe, waits for auth, retries the request.
+    const [validateData, userInfoData] = await Promise.all([
+      apiJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms }),
+      apiJson('/auth/api/user-info', { method: 'GET', timeout: paskiaSettings.auth_ms })
+    ])
+    store.userInfo = userInfoData
+    store.ctx = validateData.ctx
+    updateThemeFromSession(store.userInfo)
+    // Verify that the user UUIDs match between user-info and validate responses
+    if (store.userInfo.user.uuid !== store.ctx.user.uuid) {
+      console.error('User UUID mismatch between user-info and validate responses')
+      window.location.reload()
+      return
     }
-  }
-}
-
-function startSessionValidation() {
-  // Validate session every 2 minutes
-  stopSessionValidation()
-  validationTimer = setInterval(validateSession, 2 * 60 * 1000)
-}
-
-function stopSessionValidation() {
-  if (validationTimer) {
-    clearInterval(validationTimer)
-    validationTimer = null
+    viewState.value = 'profile'
+  } catch (e) {
+    onSessionLost(e)
   }
 }
 
 onMounted(async () => {
-  // Listen for postMessage from auth iframe
-  window.addEventListener('message', handleAuthMessage)
-
   // Load settings
   await store.loadSettings()
 
@@ -183,21 +104,7 @@ onMounted(async () => {
     document.title = inHostMode ? `${rpName} · Account summary` : rpName
   }
 
-  // Try to load user info
-  const success = await loadUserInfo()
-
-  if (!success) {
-    // Need authentication - show login iframe
-    showAuthIframe()
-  }
-})
-
-onUnmounted(() => {
-  window.removeEventListener('message', handleAuthMessage)
-  stopSessionValidation()
-  hideAuthIframe()
+  // Load user info (apiJson handles auth iframe if needed)
+  await loadUserInfo()
 })
 </script>
-
-<style scoped>
-</style>

frontend/auth/admin/index.html

@@ -1,12 +1,14 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Admin</title>
+    <title>Admin</title>
+    <script>(localStorage.getItem('paskia-theme')==='dark'||localStorage.getItem('paskia-theme')!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark')</script>
+    <link rel="stylesheet" href="/src/assets/style.css">
   </head>
   <body>
     <div id="admin-app"></div>
-    <script type="module" src="./main.js"></script>
+    <script type="module" src="/auth/admin/main.js"></script>
   </body>
   </html>

frontend/auth/admin/main.js

@@ -1,9 +1,12 @@
-import '@/assets/style.css'
+import { initThemeFromCache } from '@/utils/theme'
+initThemeFromCache()
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import AdminApp from './AdminApp.vue'
+import { initKeyboardNavigation } from '@/utils/keynav'
 
 const app = createApp(AdminApp)
 app.use(createPinia())
 app.mount('#admin-app')
+initKeyboardNavigation()

frontend/auth/index.html

@@ -1,12 +1,14 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Auth Profile</title>
+    <script>(localStorage.getItem('paskia-theme')==='dark'||localStorage.getItem('paskia-theme')!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark')</script>
+    <link rel="stylesheet" href="/src/assets/style.css">
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="main.js"></script>
+    <script type="module" src="/auth/main.js"></script>
   </body>
 </html>

frontend/auth/main.js

@@ -1,11 +1,14 @@
-import '@/assets/style.css'
+import { initThemeFromCache } from '@/utils/theme'
+initThemeFromCache()
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
+import { initKeyboardNavigation } from '@/utils/keynav'
 
 const app = createApp(App)
 
 app.use(createPinia())
 
 app.mount('#app')
+initKeyboardNavigation()

frontend/auth/restricted/RestrictedApi.vue

@@ -2,19 +2,23 @@
   <RestrictedAuth
     :mode="authMode"
     :remote-auth-token="remoteAuthToken"
+    :oidc-query-string="oidcQueryString"
     @authenticated="handleAuthenticated"
     @back="handleBack"
   />
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import RestrictedAuth from '@/components/RestrictedAuth.vue'
 
 // Check if this is a remote auth URL: /auth/{token}
 // The token is a 5-word passphrase like "word1.word2.word3.word4.word5"
 const remoteAuthToken = ref(null)
 
+// For OIDC flow, pass the raw query string to preserve exact param values
+const oidcQueryString = window.location.search.includes('client_id=') ? window.location.search : null
+
 function extractRemoteToken() {
   const path = window.location.pathname
   // Match /auth/{token} where token is a passphrase with dots
@@ -30,14 +34,20 @@ function extractRemoteToken() {
   return null
 }
 
-// Detect mode from URL hash fragment
-const authMode = computed(() => {
-  const params = new URLSearchParams(window.location.hash.slice(1))
-  const mode = params.get('mode')
-  if (mode === 'reauth') return 'reauth'
-  if (mode === 'forbidden') return 'forbidden'
-  return 'login'
-})
+// Parse URL hash fragment
+const hashParams = new URLSearchParams(window.location.hash.slice(1))
+
+// Determine auth mode based on URL path
+// - /auth/restricted/oidc: OIDC flow, no session dependency
+// - /auth/restricted/iframe: iframe embedding, mode from hash params
+// - Other paths: forward auth, mode from hash params
+let authMode
+if (window.location.pathname === '/auth/restricted/oidc') {
+  authMode = 'oidc'
+} else {
+  // Both iframe and forward auth use hash params for mode (forbidden/login/reauth)
+  authMode = ['reauth', 'forbidden'].includes(hashParams.get('mode')) ? hashParams.get('mode') : 'login'
+}
 
 function postToParent(message) {
   if (window.parent && window.parent !== window) {
@@ -46,10 +56,15 @@ function postToParent(message) {
 }
 
 function handleAuthenticated(result) {
+  if (result.redirect_url) {
+    // OIDC flow: redirect to client with auth code
+    window.location.href = result.redirect_url
+    return
+  }
   postToParent({
     type: 'auth-success',
     authenticated: true,
-    sessionToken: result.session_token
+    exchangeCode: result.exchange_code
   })
 }
 

frontend/auth/restricted/index.html

@@ -1,4 +1,13 @@
-<html style="background: transparent"><meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<div id="app"></div>
-<script type="module" src="/auth/restricted/main.js"></script>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>{let t=localStorage.getItem('paskia-theme');if(!t){let p=new URLSearchParams(location.hash.slice(1)).get('theme');if(p==='light'||p==='dark')t=p}(t==='dark'||t!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark');if(window.location.pathname==='/auth/restricted/iframe')document.documentElement.style.background='transparent'}</script>
+    <link rel="stylesheet" href="/src/assets/style.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/auth/restricted/main.js"></script>
+  </body>
+</html>

frontend/auth/restricted/main.js

@@ -1,5 +1,7 @@
+import './theme.js'
 import { createApp } from 'vue'
 import RestrictedApi from './RestrictedApi.vue'
-import '@/assets/style.css'
+import { initKeyboardNavigation } from '@/utils/keynav'
 
 createApp(RestrictedApi).mount('#app')
+initKeyboardNavigation()

frontend/auth/restricted/theme.js

@@ -0,0 +1,11 @@
+// Early theme for restricted app - user preference (localStorage) wins, then URL param
+import { applyTheme, getCachedTheme } from '@/utils/theme.js'
+
+function getTheme() {
+  const params = new URLSearchParams(location.hash.slice(1))
+  return getCachedTheme() || params.get('theme') || ''
+}
+
+// Apply theme class to document root
+applyTheme(getTheme())
+addEventListener('hashchange', () => applyTheme(getTheme()))

frontend/int/forward/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Access Restricted</title>
+    <script>(localStorage.getItem('paskia-theme')==='dark'||localStorage.getItem('paskia-theme')!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark')</script>
   </head>
   <body>
     <div id="app"></div>

frontend/int/forward/main.js

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './RestrictedForward.vue'
 import '@/assets/style.css'
+import { initKeyboardNavigation } from '@/utils/keynav'
 
 createApp(App).mount('#app')
+initKeyboardNavigation()

frontend/int/reset/ResetApp.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="app-shell">
-    <div v-if="status.show" class="global-status" style="display: block;">
+    <div v-if="status.show" class="global-status show">
       <div :class="['status', status.type]">
         {{ status.message }}
       </div>
     </div>
 
     <main class="view-root">
-      <div class="surface surface--tight" style="max-width: 560px; margin: 0 auto; width: 100%;">
-        <header class="view-header" style="text-align: center;">
+      <div class="surface surface--tight reset-container">
+        <header class="view-header center">
           <h1>🔑 Registration</h1>
           <p class="view-lede">
             {{ subtitleMessage }}
@@ -23,7 +23,7 @@
 
         <section class="section-block" v-else-if="!canRegister">
           <div class="section-body center">
-            <div class="button-row center" style="justify-content: center;">
+            <div class="button-row button-row--center">
               <button class="btn-secondary" @click="goHome">Return to sign-in</button>
             </div>
           </div>
@@ -59,7 +59,8 @@
 import { computed, onMounted, reactive, ref } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings, uiBasePath } from '@/utils/settings'
-import { apiJson, ApiError, getUserFriendlyErrorMessage } from '@/utils/api'
+import { apiJson, ApiError, getUserFriendlyErrorMessage, settings as paskiaSettings } from 'paskia'
+import { updateThemeFromSession } from '@/utils/theme'
 
 const status = reactive({
   show: false,
@@ -71,21 +72,21 @@ const initializing = ref(true)
 const loading = ref(false)
 const token = ref('')
 const settings = ref(null)
-const userInfo = ref(null)
+const tokenInfo = ref(null)
 const displayName = ref('')
 const errorMessage = ref('')
 let statusTimer = null
 
-const sessionDescriptor = computed(() => userInfo.value?.session_type || 'your enrollment')
+const sessionDescriptor = computed(() => tokenInfo.value?.token_type || 'your enrollment')
 const subtitleMessage = computed(() => {
   if (initializing.value) return 'Preparing your secure enrollment…'
   if (!canRegister.value) return 'This authentication link is no longer valid.'
-  return `Finish up ${sessionDescriptor.value}. You may edit the name below if needed, and it will be saved to your passkey.`
+  return `Finish up ${sessionDescriptor.value}. The name entered will be stored on your passkey and on our system.`
 })
 
 const basePath = computed(() => uiBasePath())
 
-const canRegister = computed(() => !!(token.value && userInfo.value))
+const canRegister = computed(() => !!(token.value && tokenInfo.value))
 
 function showMessage(message, type = 'info', duration = 3000) {
   status.show = true
@@ -109,15 +110,17 @@ async function fetchSettings() {
   }
 }
 
-async function fetchUserInfo() {
+async function fetchTokenInfo() {
   if (!token.value) return
   try {
-    userInfo.value = await apiJson(`/auth/api/user-info?reset=${encodeURIComponent(token.value)}`, {
-      method: 'POST'
+    tokenInfo.value = await apiJson('/auth/api/token-info', {
+      method: 'GET',
+      headers: { 'Authorization': `Bearer ${token.value}` },
     })
-    displayName.value = userInfo.value?.user?.user_name || ''
+    displayName.value = tokenInfo.value.display_name
+    if (tokenInfo.value.theme) updateThemeFromSession({ user: { theme: tokenInfo.value.theme } })
   } catch (error) {
-    console.error('Failed to load user info', error)
+    console.error('Failed to load token info', error)
     const message = error instanceof ApiError
       ? (error.data?.detail || 'The authentication link is invalid or expired.')
       : getUserFriendlyErrorMessage(error)
@@ -143,7 +146,7 @@ async function registerPasskey() {
   }
 
   try {
-    await setSessionCookie(result)
+    await exchangeCode(result)
   } catch (error) {
     loading.value = false
     const message = error?.message || 'Failed to establish session'
@@ -155,15 +158,14 @@ async function registerPasskey() {
   setTimeout(() => { loading.value = false; goHome() }, 800)
 }
 
-async function setSessionCookie(result) {
-  if (!result?.session_token) {
-    throw new Error('Registration response missing session_token')
+async function exchangeCode(result) {
+  if (!result?.exchange_code) {
+    throw new Error('Registration response missing exchange_code')
   }
   return await apiJson('/auth/api/set-session', {
     method: 'POST',
-    headers: {
-      Authorization: `Bearer ${result.session_token}`
-    }
+    headers: { 'Authorization': `Bearer ${result.exchange_code}` },
+    timeout: paskiaSettings.auth_ms,
   })
 }
 
@@ -196,19 +198,20 @@ onMounted(async () => {
     initializing.value = false
     return
   }
-  await fetchUserInfo()
+  await fetchTokenInfo()
   initializing.value = false
 })
 </script>
 
 <style scoped>
-.center {
-  text-align: center;
-}
-
-.button-row.center {
+main.view-root { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
+.reset-container {
+  max-width: 520px;
+  margin: 0 auto;
+  width: 100%;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  gap: 1.75rem;
 }
 
 .section-body {

frontend/int/reset/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Complete Passkey Setup</title>
+    <script>(localStorage.getItem('paskia-theme')==='dark'||localStorage.getItem('paskia-theme')!=='light'&&matchMedia('(prefers-color-scheme:dark)').matches)&&document.documentElement.classList.add('dark')</script>
   </head>
   <body>
     <div id="app"></div>

frontend/int/reset/main.js

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import ResetApp from './ResetApp.vue'
 import '@/assets/style.css'
+import { initKeyboardNavigation } from '@/utils/keynav'
 
 createApp(ResetApp).mount('#app')
+initKeyboardNavigation()

frontend/package.json

@@ -10,10 +10,13 @@
   },
   "dependencies": {
     "@simplewebauthn/browser": "^13.1.2",
+    "paskia": "file:../paskia-js",
     "pinia": "^3.0.3",
     "qrcode": "^1.5.4",
     "sirv": "^3.0.2",
-    "vue": "^3.5.17"
+    "uuidv7": "^1.1.0",
+    "vue": "^3.5.17",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",

frontend/src/admin/AdminDialogs.vue

@@ -1,34 +1,173 @@
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { computed } from 'vue'
 import Modal from '@/components/Modal.vue'
 import NameEditForm from '@/components/NameEditForm.vue'
+import { useAuthStore } from '@/stores/auth'
 
 const props = defineProps({
   dialog: Object,
-  PERMISSION_ID_PATTERN: String
+  PERMISSION_ID_PATTERN: String,
+  settings: Object
 })
 
-const emit = defineEmits(['submitDialog', 'closeDialog'])
-
-const nameInput = ref(null)
-const displayNameInput = ref(null)
+const emit = defineEmits(['submitDialog', 'closeDialog', 'resetOidcSecret', 'createPermissionForClient'])
 
 const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'])
+const NO_SUBMIT_TYPES = new Set([])
+const rpId = computed(() => props.settings?.rp_id || 'the configured domain')
+const discoveryUrl = computed(() => `${window.location.origin}/.well-known/openid-configuration`)
 
-watch(() => props.dialog.type, (newType) => {
-  if (newType === 'org-create') {
-    nextTick(() => {
-      nameInput.value?.focus()
-    })
-  } else if (newType === 'perm-display' || newType === 'perm-create') {
-    nextTick(() => {
-      displayNameInput.value?.focus()
-      if (newType === 'perm-display') {
-        displayNameInput.value?.select()
-      }
-    })
+// Initialize validation properties
+if (props.dialog?.data && props.dialog.type === 'server-config') {
+  if (!('authHostValidation' in props.dialog.data)) {
+    props.dialog.data.authHostValidation = null
   }
+}
+
+const isValidationInvalid = computed(() => {
+  if (props.dialog?.type !== 'server-config') return false
+  const d = props.dialog.data
+  if (d.authHostValidation?.startsWith('invalid') || d.authHostValidation === 'validating') return true
+  if (d.originValidation?.some(v => v === 'invalid' || v === 'validating')) return true
+  return false
 })
+
+// Copy-to-clipboard helper
+const authStore = useAuthStore()
+function copyText(value, label) {
+  navigator.clipboard.writeText(value).then(() => {
+    authStore.showMessage(`${label} copied to clipboard`, 'success', 1500)
+  })
+}
+
+function addOrigin() {
+  const d = props.dialog?.data
+  if (d) {
+    d.origins.push(rpId.value)
+    d.originValidation.push(null)
+    validateOrigin(d.origins[d.origins.length - 1], d.origins.length - 1)
+  }
+}
+function removeOrigin(i) {
+  const d = props.dialog?.data
+  if (d) {
+    d.origins.splice(i, 1)
+    d.originValidation.splice(i, 1)
+  }
+}
+function stripScheme(val, i) {
+  const d = props.dialog?.data
+  if (d) d.origins[i] = val.replace(/^https:\/\//, '').replace(/\/+$/, '')
+}
+function stripSchemeAuthHost() {
+  const d = props.dialog?.data
+  if (d && d.auth_host) d.auth_host = d.auth_host.replace(/^https:\/\//, '').replace(/\/+$/, '')
+}
+function focusOriginStart(e) {
+  e.target.setSelectionRange(0, 0)
+}
+
+function validateOriginDomain(origin, rpId) {
+  if (!origin.trim()) return false
+  try {
+    const url = origin.startsWith('http') ? new URL(origin) : new URL('https://' + origin)
+    const hostname = url.hostname
+    return hostname === rpId || hostname.endsWith('.' + rpId)
+  } catch {
+    return false
+  }
+}
+
+async function validateOriginConnectivity(origin, i) {
+  const d = props.dialog?.data
+  if (!d) return
+
+  d.originValidation[i] = 'validating'
+  try {
+    const cleanOrigin = origin.replace(/\/+$/, '')
+    const testUrl = cleanOrigin.startsWith('http') ? cleanOrigin : 'https://' + cleanOrigin
+    const response = await fetch(testUrl + '/auth/api/settings', {
+      method: 'GET',
+      headers: { 'Accept': 'application/json' }
+    })
+    if (response.ok) {
+      const data = await response.json()
+      // Check if it returns valid settings (has rp_id and matches current rp_id)
+      const result = (data.rp_id && data.rp_id === rpId.value) ? 'valid' : 'invalid'
+      // Only update if the origin hasn't changed
+      if (d.origins[i] === origin) {
+        d.originValidation[i] = result
+      }
+    } else {
+      if (d.origins[i] === origin) {
+        d.originValidation[i] = 'invalid'
+      }
+    }
+  } catch (e) {
+    if (d.origins[i] === origin) {
+      d.originValidation[i] = 'invalid'
+    }
+  }
+}
+
+function validateOrigin(origin, i) {
+  const d = props.dialog?.data
+  if (!d) return
+
+  const id = rpId.value
+  if (validateOriginDomain(origin, id)) {
+    validateOriginConnectivity(origin, i)
+  } else {
+    d.originValidation[i] = 'invalid'
+  }
+}
+
+async function validateAuthHostConnectivity(authHost) {
+  const d = props.dialog?.data
+  if (!d) return
+
+  d.authHostValidation = 'validating'
+  try {
+    const cleanAuthHost = authHost.replace(/\/+$/, '')
+    const testUrl = cleanAuthHost.startsWith('http') ? cleanAuthHost : 'https://' + cleanAuthHost
+    const response = await fetch(testUrl + '/auth/api/settings', {
+      method: 'GET',
+      headers: { 'Accept': 'application/json' }
+    })
+    if (response.ok) {
+      const data = await response.json()
+      // Check if it returns valid settings (has rp_id and matches current rp_id)
+      const result = (data.rp_id && data.rp_id === rpId.value) ? 'valid' : 'invalid'
+      // Only update if the auth_host hasn't changed
+      if (d.auth_host === authHost) {
+        d.authHostValidation = result
+      }
+    } else {
+      if (d.auth_host === authHost) {
+        d.authHostValidation = 'invalid-connectivity'
+      }
+    }
+  } catch (e) {
+    if (d.auth_host === authHost) {
+      d.authHostValidation = 'invalid-connectivity'
+    }
+  }
+}
+
+function validateAuthHost() {
+  const d = props.dialog?.data
+  if (!d || !d.auth_host?.trim()) {
+    d.authHostValidation = null // Allow empty
+    return
+  }
+
+  const id = rpId.value
+  if (validateOriginDomain(d.auth_host, id)) {
+    validateAuthHostConnectivity(d.auth_host)
+  } else {
+    d.authHostValidation = 'invalid-domain'
+  }
+}
 </script>
 
 <template>
@@ -40,7 +179,9 @@ watch(() => props.dialog.type, (newType) => {
         <template v-else-if="dialog.type==='role-update'">Edit Role</template>
         <template v-else-if="dialog.type==='user-create'">Add User To Role</template>
         <template v-else-if="dialog.type==='user-update-name'">Edit User Name</template>
-        <template v-else-if="dialog.type==='perm-create' || dialog.type==='perm-display'">{{ dialog.type === 'perm-create' ? 'Create Permission' : 'Edit Permission Display' }}</template>
+        <template v-else-if="dialog.type==='perm-create' || dialog.type==='perm-display'">{{ dialog.type === 'perm-create' ? 'Create Permission' : 'Edit Permission' }}</template>
+        <template v-else-if="dialog.type==='oidc-edit'">{{ dialog.data?.isNew ? 'New OIDC Client' : 'OIDC Client' }}</template>
+        <template v-else-if="dialog.type==='server-config'">Server Options</template>
         <template v-else-if="dialog.type==='confirm'">Confirm</template>
       </h3>
       <form @submit.prevent="$emit('submitDialog')" class="modal-form">
@@ -91,16 +232,52 @@ watch(() => props.dialog.type, (newType) => {
           <label>Display Name
             <input ref="displayNameInput" v-model="dialog.data.display_name" required />
           </label>
-          <label>Permission ID
-            <input v-model="dialog.data.id" :placeholder="dialog.type === 'perm-create' ? 'yourapp:login' : dialog.data.permission.id" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" />
+          <label>Permission Scope
+            <input v-model="dialog.data.scope" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" data-form-type="other" />
           </label>
-          <p class="small muted">The permission ID is used for permission checks in the application. Changing it may break deployed applications that reference this permission.</p>
+          <p class="small muted">E.g. yourapp:reports. Changing the scope name may break deployed applications.</p>
+          <label>Domain Scope
+            <input v-model="dialog.data.domain" data-form-type="other" />
+          </label>
+          <p class="small muted">A domain ({{ rpId }} or subdomain) restricts this permission to that host. An OIDC client UUID sends it as a <em>groups</em> claim to that client.</p>
+        </template>
+        <template v-else-if="dialog.type==='server-config'">
+          <label>Site Branding (rp-name)
+            <input v-model="dialog.data.rp_name" :placeholder="rpId" />
+          </label>
+          <label>Dedicated Authentication Site (auth-host)
+            <input v-model="dialog.data.auth_host" @input="validateAuthHost()" :class="{ 'input-error': dialog.data.authHostValidation?.startsWith('invalid') }" />
+          </label>
+          <p v-if="dialog.data.authHostValidation === 'validating'" class="small muted">Validating...</p>
+          <p v-else-if="dialog.data.authHostValidation === 'valid'" class="small muted">Valid</p>
+          <p v-else-if="dialog.data.authHostValidation === 'invalid-domain'" class="small muted">Invalid domain</p>
+          <p v-else-if="dialog.data.authHostValidation === 'invalid-connectivity'" class="small muted">Well-formed but unreachable</p>
+          <p v-else-if="dialog.data.authHostValidation === 'invalid'" class="small muted">Invalid configuration</p>
+          <p v-else-if="dialog.data.authHostValidation === 'invalid'" class="small muted">Enter {{ rpId }} or any subdomain of it.</p>
+          <div class="origin-label">
+            Allowed Origins
+            <button type="button" class="icon-btn origin-add-btn" @click="addOrigin" aria-label="Add origin" title="Add origin">➕</button>
+          </div>
+          <div v-if="dialog.data.origins.length" class="origin-list">
+            <div v-for="(_, i) in dialog.data.origins" :key="i" class="origin-row">
+              <input
+                :value="dialog.data.origins[i]"
+                @input="e => { dialog.data.origins[i] = e.target.value; validateOrigin(e.target.value, i) }"
+                @focus="focusOriginStart"
+                class="origin-input"
+                :class="{ 'input-error': dialog.data.originValidation[i] === 'invalid' }"
+              />
+              <button type="button" class="icon-btn delete-icon" @click="removeOrigin(i)" aria-label="Remove origin" title="Remove origin">❌</button>
+            </div>
+          </div>
+          <p v-if="!dialog.data.origins.length" class="small muted">{{ rpId }} and all subdomains allowed.</p>
+          <p v-else class="small muted">Only the above sites are allowed to authenticate.</p>
         </template>
         <template v-else-if="dialog.type==='confirm'">
           <p>{{ dialog.data.message }}</p>
         </template>
         <div v-if="dialog.error && !NAME_EDIT_TYPES.has(dialog.type)" class="error small">{{ dialog.error }}</div>
-        <div v-if="!NAME_EDIT_TYPES.has(dialog.type)" class="modal-actions">
+        <div v-if="!NAME_EDIT_TYPES.has(dialog.type) && !NO_SUBMIT_TYPES.has(dialog.type)" class="modal-actions">
           <button
             type="button"
             class="btn-secondary"
@@ -112,17 +289,46 @@ watch(() => props.dialog.type, (newType) => {
           <button
             type="submit"
             class="btn-primary"
-            :disabled="dialog.busy"
+            :disabled="dialog.busy || isValidationInvalid"
           >
             {{ dialog.type==='confirm' ? 'OK' : 'Save' }}
           </button>
         </div>
+        <div v-else-if="NO_SUBMIT_TYPES.has(dialog.type)" class="modal-actions">
+          <button
+            type="button"
+            class="btn-primary"
+            @click="$emit('closeDialog')"
+          >
+            Close
+          </button>
+        </div>
       </form>
   </Modal>
 </template>
 
 <style scoped>
-.error { color: var(--color-danger-text); }
-.small { font-size: 0.9rem; }
-.muted { color: var(--color-text-muted); }
-</style>
+.optional { font-weight: normal; color: var(--color-text-muted); font-size: 0.85em; }
+.oidc-divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-sm) 0; }
+.oidc-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: baseline; margin: 0; }
+.oidc-dl dt { font-size: 0.85rem; color: var(--color-text-muted); white-space: nowrap; }
+.oidc-dl dd { margin: 0; cursor: pointer; overflow: hidden; }
+.oidc-dl output { font-family: var(--font-mono, monospace); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+.oidc-reset-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
+.oidc-groups { cursor: default; }
+.oidc-group { cursor: pointer; }
+.oidc-group output { white-space: normal; word-break: break-all; }
+
+/* Server config origins */
+.origin-label { font-weight: 600; font-size: 0.95rem; margin-top: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); }
+.origin-list { display: flex; flex-direction: column; gap: 0.4rem; }
+.origin-row { display: flex; align-items: center; gap: var(--space-xs); }
+.origin-input { flex: 1; min-width: 8rem; font-family: var(--font-mono, monospace); }
+.origin-row .delete-icon { flex-shrink: 0; }
+.origin-add-btn { font-size: 1.2rem; }
+
+.input-error {
+  border-color: var(--color-error);
+  background: var(--color-error-bg, rgba(239, 68, 68, 0.05));
+}
+</style>

frontend/src/admin/AdminOidcDetail.vue

@@ -0,0 +1,283 @@
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { getDirection, navigateButtonRow } from '@/utils/keynav'
+import { useAuthStore } from '@/stores/auth'
+
+const props = defineProps({
+  client: Object,
+  permissions: Array,
+  isNew: { type: Boolean, default: false },
+  navigationDisabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['save', 'cancel', 'delete', 'resetSecret', 'createPermission', 'navigateOut'])
+
+const authStore = useAuthStore()
+const headerRef = ref(null)
+
+// Helper function to build URLs
+function authSitePath(path) {
+  const url = new URL(authStore.settings.auth_site_url)
+  url.pathname = path
+  return url.toString()
+}
+
+// Local form state
+const name = ref('')
+const redirectUris = ref('')
+const clientSecret = ref(null)
+
+// Computed
+const clientId = computed(() => props.client?.client_id || props.client?.uuid || '')
+const discoveryUrl = computed(() => authSitePath('/.well-known/openid-configuration'))
+const iconUrl = computed(() => authSitePath('/favicon.ico'))
+
+// Groups (permissions) scoped to this client
+const clientGroups = computed(() => {
+  if (!props.client || !props.permissions) return []
+  const clientUuid = props.client.uuid || props.client.client_id
+  return props.permissions.filter(p => p.domain === clientUuid).sort((a, b) => a.scope.localeCompare(b.scope))
+})
+
+// Initialize form data from props
+watch(() => props.client, (c) => {
+  if (c) {
+    name.value = c.name || ''
+    redirectUris.value = Array.isArray(c.redirect_uris) ? c.redirect_uris.join('\n') : (c.redirect_uris || '')
+    clientSecret.value = c.client_secret || null
+  }
+}, { immediate: true })
+
+// Copy-to-clipboard helper
+function copyText(value, label) {
+  navigator.clipboard.writeText(value).then(() => {
+    authStore.showMessage(`${label} copied to clipboard`, 'success', 1500)
+  })
+}
+
+function handleResetSecret() {
+  emit('resetSecret', clientId.value)
+}
+
+// When parent resets secret, update local state
+watch(() => props.client?.client_secret, (newSecret) => {
+  if (newSecret) {
+    clientSecret.value = newSecret
+  }
+})
+
+function handleSave() {
+  const trimmedName = name.value.trim()
+  if (!trimmedName) {
+    authStore.showMessage('Client name is required', 'error')
+    return
+  }
+  const uris = redirectUris.value.trim()
+  const redirect_uris = uris ? uris.split('\n').map(u => u.trim()).filter(u => u) : []
+
+  emit('save', {
+    client_id: clientId.value,
+    client_secret: clientSecret.value,
+    name: trimmedName,
+    redirect_uris,
+    isNew: props.isNew
+  })
+}
+
+function handleDelete() {
+  emit('delete', props.client)
+}
+
+function handleCreatePermission() {
+  emit('createPermission', clientId.value)
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+// Keyboard navigation
+function handleHeaderKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(headerRef.value, event.target, direction, { itemSelector: 'button, a' })
+  } else if (direction === 'up') {
+    emit('navigateOut', 'up')
+  }
+}
+
+function focusFirstElement() {
+  const firstFocusable = headerRef.value?.querySelector('button, a, input')
+  if (firstFocusable) firstFocusable.focus()
+}
+
+defineExpose({ focusFirstElement })
+</script>
+
+<template>
+  <div class="oidc-detail">
+    <form @submit.prevent="handleSave" class="oidc-form">
+      <!-- Client credentials section -->
+      <section class="section-block">
+        <div class="section-header">
+          <h2>Client Configuration</h2>
+          <p class="section-description">Configure these values in the client application.</p>
+        </div>
+        <div class="section-body">
+
+        <dl class="oidc-dl">
+          <dt>Authentication Name</dt>
+          <dd>
+            <output @click="copyText(authStore.settings.rp_name, 'Authentication Name')" title="Click to copy">{{ authStore.settings.rp_name }}</output>
+            <span class="small muted"> (Login With, may affect URLs – optional)</span>
+          </dd>
+
+          <dt>Client ID</dt>
+          <dd><output @click="copyText(clientId, 'Client ID')" title="Click to copy">{{ clientId }}</output></dd>
+
+          <dt>Client Secret <button v-if="!clientSecret" type="button" class="icon-btn" @click="handleResetSecret" title="Revoke and re-generate secret">🔄</button></dt>
+          <dd>
+            <output v-if="clientSecret" @click="copyText(clientSecret, 'Client Secret')" title="Click to copy">{{ clientSecret }}</output>
+            <span v-else class="small muted">(only stored in hashed form)</span>
+          </dd>
+
+          <dt>Auto Discovery URL</dt>
+          <dd><output @click="copyText(discoveryUrl, 'OpenID Connect Auto Discovery URL')" title="Click to copy">{{ discoveryUrl }}</output></dd>
+
+          <dt>Icon URL</dt>
+          <dd>
+            <output @click="copyText(iconUrl, 'Icon URL')" title="Click to copy">{{ iconUrl }}</output>
+            <span class="small muted"> (optional)</span>
+          </dd>
+
+
+          <template v-if="clientGroups.length">
+            <dt>Groups Claim Name</dt>
+            <dd>
+              <output @click="copyText('groups', 'Groups Claim Name')" title="Click to copy">groups</output>
+            </dd>
+          </template>
+
+          <dt>Groups <button type="button" class="icon-btn" @click="handleCreatePermission" title="Add permission scoped to this client">➕</button></dt>
+          <dd class="oidc-groups">
+            <template v-if="clientGroups.length">
+              <output v-for="group in clientGroups" :key="group.uuid" class="oidc-group" @click="copyText(group.scope, 'Group Value')" :title="group.display_name">{{ group.scope }}</output>
+            </template>
+            <span v-else class="small muted">(no permissions defined)</span>
+          </dd>
+        </dl>
+
+        <span class="warning-text">
+          <strong v-if="clientSecret">⚠️ {{ isNew ? 'Save the secret now — it cannot be retrieved later.' : 'Saving will prevent access with the old secret.' }}</strong>
+          <span v-else>ℹ️ The client may use groups to check for required permissions.</span>
+        </span>
+        </div>
+      </section>
+
+      <!-- Editable fields -->
+      <section class="section-block">
+        <div class="section-header">
+          <h2>Paskia Configuration</h2>
+        </div>
+        <div class="section-body">
+        <label>Client Name
+          <input v-model="name" required />
+        </label>
+
+        <label>Redirect URIs
+          <p class="small muted">This should be provided by the client application.</p>
+          <textarea v-model="redirectUris" placeholder="(autodiscover one on first use)" rows="3"></textarea>
+        </label>
+        </div>
+      </section>
+
+      <!-- Actions -->
+      <div class="oidc-actions">
+        <button type="button" class="btn-secondary" @click="handleCancel">Cancel</button>
+        <button v-if="!isNew" type="button" class="btn-danger" @click="handleDelete">Delete Client</button>
+        <button type="submit" class="btn-primary">Save</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.oidc-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.oidc-header {
+  margin-bottom: 0;
+}
+
+.oidc-header h2 {
+  margin: 0;
+}
+
+.oidc-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.oidc-dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.3rem 1rem;
+  align-items: baseline;
+  margin: var(--space-sm) 0;
+}
+
+.oidc-dl dt {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.oidc-dl dd {
+  margin: 0;
+  overflow: hidden;
+  display: flex;
+  align-items: baseline;
+  gap: 0.5em;
+}
+
+.oidc-dl output {
+  font-family: var(--font-mono, monospace);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.warning-text {
+  display: block;
+  font-size: 0.9rem;
+  min-height: 1.4em;
+}
+
+.oidc-group { display: block; }
+.oidc-group { white-space: normal; word-break: break-all; }
+
+.section-body label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  font-weight: 500;
+}
+
+.oidc-actions {
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+  margin-top: var(--space-md);
+}
+</style>

frontend/src/admin/AdminOrgDetail.vue

@@ -1,15 +1,25 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import draggable from 'vuedraggable'
+import ProfilePicture from '@/components/ProfilePicture.vue'
+import { getDirection, navigateButtonRow, focusPreferred } from '@/utils/keynav'
 
 const props = defineProps({
   selectedOrg: Object,
-  permissions: Array
+  permissions: Array,
+  navigationDisabled: { type: Boolean, default: false }
 })
 
-const emit = defineEmits(['updateOrg', 'createRole', 'updateRole', 'deleteRole', 'createUserInRole', 'openUser', 'toggleRolePermission', 'onRoleDragOver', 'onRoleDrop', 'onUserDragStart'])
+const emit = defineEmits(['updateOrg', 'createRole', 'updateRole', 'deleteRole', 'createUserInRole', 'openUser', 'toggleRolePermission', 'moveUserToRole', 'navigateOut'])
+
+// Template refs for navigation
+const orgTitleRef = ref(null)
+const permMatrixRef = ref(null)
+const rolesGridRef = ref(null)
 
 const sortedRoles = computed(() => {
-  return [...props.selectedOrg.roles].sort((a, b) => {
+  // o.roles is dict[UUID, Role], convert to array for sorting with uuid added
+  return Object.entries(props.selectedOrg.roles).map(([uuid, r]) => ({ uuid, ...r })).sort((a, b) => {
     const nameA = a.display_name.toLowerCase()
     const nameB = b.display_name.toLowerCase()
     if (nameA !== nameB) {
@@ -19,22 +29,305 @@ const sortedRoles = computed(() => {
   })
 })
 
-function permissionDisplayName(id) {
-  return props.permissions.find(p => p.id === id)?.display_name || id
+// Get org's grantable permissions as full permission objects (with UUIDs)
+const orgPermissions = computed(() => {
+  // props.selectedOrg.permissions is dict[UUID, Permission]
+  const uuidSet = new Set(Object.keys(props.selectedOrg.permissions || {}))
+  return props.permissions.filter(p => uuidSet.has(p.uuid))
+})
+
+// Get users for a role as sorted array of { uuid, ...user }
+function getNormalizedName(name) {
+  let cleaned = name.replace(/\([^)]*\)/g, '').trim();
+  if (cleaned.includes(',')) {
+    return cleaned.toLowerCase();
+  } else {
+    const parts = cleaned.split(/\s+/);
+    const last = parts.pop();
+    const first = parts.join(' ');
+    return `${last}, ${first}`.toLowerCase();
+  }
+}
+
+function roleUsers(roleUuid) {
+  return Object.entries(props.selectedOrg.users)
+    .filter(([_, u]) => u.role === roleUuid)
+    .map(([uuid, u]) => ({ uuid, ...u }))
+    .sort((a, b) => {
+      const normA = getNormalizedName(a.display_name);
+      const normB = getNormalizedName(b.display_name);
+      return normA.localeCompare(normB);
+    })
+}
+
+function roleUserCount(roleUuid) {
+  return Object.values(props.selectedOrg.users).filter(u => u.role === roleUuid).length
+}
+
+function onUserChange(evt, targetRoleUuid) {
+  // Only handle 'added' events (when a user is dropped into this role)
+  if (evt.added) {
+    const userUuid = evt.added.element.uuid
+    emit('moveUserToRole', userUuid, targetRoleUuid)
+  }
 }
 
 function toggleRolePermission(role, pid, checked) {
   emit('toggleRolePermission', role, pid, checked)
 }
+
+// Handle org title header keynav
+function handleTitleKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(orgTitleRef.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    emit('navigateOut', 'up')
+  } else if (direction === 'down') {
+    // Move to permission matrix
+    const firstCheckbox = permMatrixRef.value?.querySelector('input[type="checkbox"]')
+    if (firstCheckbox) {
+      firstCheckbox.focus()
+    } else {
+      // No matrix, go to roles grid
+      focusFirstRoleElement()
+    }
+  }
+}
+
+// Handle permission matrix grid navigation
+function handleMatrixKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const target = event.target
+  if (target.tagName !== 'INPUT') return
+
+  event.preventDefault()
+
+  const checkboxes = Array.from(permMatrixRef.value.querySelectorAll('input[type="checkbox"]'))
+  const currentIndex = checkboxes.indexOf(target)
+  if (currentIndex === -1) return
+
+  // Calculate grid dimensions
+  const cols = sortedRoles.value.length
+  const rows = Object.keys(props.selectedOrg.permissions).length
+
+  const currentRow = Math.floor(currentIndex / cols)
+  const currentCol = currentIndex % cols
+
+  let newIndex = currentIndex
+  if (direction === 'left' && currentCol > 0) {
+    newIndex = currentIndex - 1
+  } else if (direction === 'right' && currentCol < cols - 1) {
+    newIndex = currentIndex + 1
+  } else if (direction === 'up' && currentRow > 0) {
+    newIndex = currentIndex - cols
+  } else if (direction === 'down' && currentRow < rows - 1) {
+    newIndex = currentIndex + cols
+  } else if (direction === 'up' && currentRow === 0) {
+    // Navigate up to title
+    const titleButton = orgTitleRef.value?.querySelector('button')
+    if (titleButton) titleButton.focus()
+    return
+  } else if (direction === 'down' && currentRow === rows - 1) {
+    // Navigate down to roles grid
+    focusFirstRoleElement()
+    return
+  }
+
+  if (newIndex !== currentIndex && checkboxes[newIndex]) {
+    checkboxes[newIndex].focus()
+  }
+}
+
+// Handle navigation within user list
+function handleUserListKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const target = event.target
+  if (!target.classList.contains('user-chip')) return
+
+  const list = target.closest('.user-list')
+  if (!list) return
+
+  const items = Array.from(list.querySelectorAll('.user-chip'))
+  const currentIndex = items.indexOf(target)
+  if (currentIndex === -1) return
+
+  // For vertical navigation within the list
+  if (direction === 'up' && currentIndex > 0) {
+    event.preventDefault()
+    items[currentIndex - 1].focus()
+    return
+  } else if (direction === 'down' && currentIndex < items.length - 1) {
+    event.preventDefault()
+    items[currentIndex + 1].focus()
+    return
+  }
+
+  // Handle boundary navigation
+  if (direction === 'up' && currentIndex === 0) {
+    event.preventDefault()
+    // Go to role header buttons
+    const roleColumn = list.closest('.role-column')
+    const headerButton = roleColumn?.querySelector('.role-header button')
+    if (headerButton) headerButton.focus()
+    return
+  }
+
+  if (direction === 'down' && currentIndex === items.length - 1) {
+    // At bottom - nothing below
+    return
+  }
+
+  // Handle left/right to navigate between role columns
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    const roleColumns = Array.from(rolesGridRef.value?.querySelectorAll('.role-column') || [])
+    const currentColumn = list.closest('.role-column')
+    const colIndex = roleColumns.indexOf(currentColumn)
+
+    let targetColIndex = direction === 'left' ? colIndex - 1 : colIndex + 1
+    if (targetColIndex >= 0 && targetColIndex < roleColumns.length) {
+      const targetColumn = roleColumns[targetColIndex]
+      const targetUsers = targetColumn.querySelectorAll('.user-chip')
+      const targetIndex = Math.min(currentIndex, targetUsers.length - 1)
+      if (targetUsers[targetIndex]) {
+        targetUsers[targetIndex].focus()
+      } else {
+        // No users in target column, focus the add user button
+        const addBtn = targetColumn.querySelector('.plus-btn')
+        if (addBtn) addBtn.focus()
+      }
+    } else if (direction === 'left' && colIndex === 0) {
+      // At leftmost column, go up to matrix
+      const lastCheckbox = permMatrixRef.value?.querySelector('input[type="checkbox"]:last-of-type')
+      if (lastCheckbox) lastCheckbox.focus()
+    }
+  }
+}
+
+// Handle role header button navigation
+function handleRoleHeaderKeydown(event, roleIndex) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const roleColumns = Array.from(rolesGridRef.value?.querySelectorAll('.role-column') || [])
+
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    const buttons = event.currentTarget.querySelectorAll('button:not([disabled])')
+    const btnIndex = Array.from(buttons).indexOf(event.target)
+
+    if (direction === 'left' && btnIndex > 0) {
+      buttons[btnIndex - 1].focus()
+    } else if (direction === 'right' && btnIndex < buttons.length - 1) {
+      buttons[btnIndex + 1].focus()
+    } else if (direction === 'left' && btnIndex === 0 && roleIndex > 0) {
+      // Move to previous column's header
+      const prevColumn = roleColumns[roleIndex - 1]
+      const prevButtons = prevColumn?.querySelectorAll('.role-header button')
+      if (prevButtons?.length) prevButtons[prevButtons.length - 1].focus()
+    } else if (direction === 'right' && btnIndex === buttons.length - 1 && roleIndex < roleColumns.length - 1) {
+      // Move to next column's header
+      const nextColumn = roleColumns[roleIndex + 1]
+      const nextButton = nextColumn?.querySelector('.role-header button')
+      if (nextButton) nextButton.focus()
+    }
+  } else if (direction === 'up') {
+    event.preventDefault()
+    // Go to permission matrix
+    const checkboxes = permMatrixRef.value?.querySelectorAll('input[type="checkbox"]')
+    if (checkboxes?.length) {
+      // Focus the checkbox in the corresponding column
+      const cols = sortedRoles.value.length
+      const rows = Object.keys(props.selectedOrg.permissions).length
+      const targetIndex = (rows - 1) * cols + roleIndex
+      if (checkboxes[targetIndex]) checkboxes[targetIndex].focus()
+      else checkboxes[checkboxes.length - 1].focus()
+    } else {
+      const titleButton = orgTitleRef.value?.querySelector('button')
+      if (titleButton) titleButton.focus()
+    }
+  } else if (direction === 'down') {
+    event.preventDefault()
+    // Go to first user in this column
+    const roleColumn = roleColumns[roleIndex]
+    const firstUser = roleColumn?.querySelector('.user-chip')
+    if (firstUser) {
+      firstUser.focus()
+    }
+  }
+}
+
+// Handle empty role section keynav
+function handleEmptyRoleKeydown(event, roleIndex) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const roleColumns = Array.from(rolesGridRef.value?.querySelectorAll('.role-column') || [])
+
+  if (direction === 'up') {
+    event.preventDefault()
+    const roleColumn = roleColumns[roleIndex]
+    const headerButton = roleColumn?.querySelector('.role-header button')
+    if (headerButton) headerButton.focus()
+  } else if (direction === 'left' && roleIndex > 0) {
+    event.preventDefault()
+    const prevColumn = roleColumns[roleIndex - 1]
+    const prevEmpty = prevColumn?.querySelector('.empty-role button')
+    const prevUser = prevColumn?.querySelector('.user-chip:last-child')
+    if (prevEmpty) prevEmpty.focus()
+    else if (prevUser) prevUser.focus()
+  } else if (direction === 'right' && roleIndex < roleColumns.length - 1) {
+    event.preventDefault()
+    const nextColumn = roleColumns[roleIndex + 1]
+    const nextEmpty = nextColumn?.querySelector('.empty-role button')
+    const nextUser = nextColumn?.querySelector('.user-chip')
+    if (nextEmpty) nextEmpty.focus()
+    else if (nextUser) nextUser.focus()
+  }
+}
+
+// Helper to focus first element in roles grid
+function focusFirstRoleElement() {
+  const firstRoleColumn = rolesGridRef.value?.querySelector('.role-column')
+  const firstButton = firstRoleColumn?.querySelector('.role-header button')
+  if (firstButton) firstButton.focus()
+}
+
+// Focus helper for external navigation
+function focusFirstElement() {
+  const titleButton = orgTitleRef.value?.querySelector('button')
+  if (titleButton) titleButton.focus()
+}
+
+defineExpose({ focusFirstElement })
 </script>
 
 <template>
-  <h2 class="org-title" :title="selectedOrg.uuid">
-    <span class="org-name">{{ selectedOrg.display_name }}</span>
+  <h2 class="org-title" ref="orgTitleRef" @keydown="handleTitleKeydown" :title="selectedOrg.uuid">
+    <span class="org-name">{{ selectedOrg.org.display_name }}</span>
     <button @click="$emit('updateOrg', selectedOrg)" class="icon-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
   </h2>
 
-    <div class="matrix-wrapper">
+    <div class="matrix-wrapper" ref="permMatrixRef" @keydown="handleMatrixKeydown">
       <div class="matrix-scroll">
         <div
           class="perm-matrix-grid"
@@ -49,19 +342,19 @@ function toggleRolePermission(role, pid, checked) {
           >
             <span>{{ r.display_name }}</span>
           </div>
-          <div class="grid-head role-head add-role-head" title="Add role" @click="$emit('createRole', selectedOrg)" role="button">➕</div>
+          <div class="grid-head role-head add-role-head" title="Add role" @click="$emit('createRole', selectedOrg)" role="button" tabindex="0" @keydown.enter="$emit('createRole', selectedOrg)">➕</div>
 
-          <template v-for="pid in selectedOrg.permissions" :key="pid">
-            <div class="perm-name" :title="pid">{{ permissionDisplayName(pid) }}</div>
+          <template v-for="p in orgPermissions" :key="p.uuid">
+            <div class="perm-name" :title="p.scope">{{ p.display_name }}</div>
             <div
               v-for="r in sortedRoles"
-              :key="r.uuid + '-' + pid"
+              :key="r.uuid + '-' + p.uuid"
               class="matrix-cell"
             >
               <input
                 type="checkbox"
-                :checked="r.permissions.includes(pid)"
-                @change="e => toggleRolePermission(r, pid, e.target.checked)"
+                :checked="p.uuid in (r.permissions || {})"
+                @change="e => toggleRolePermission(r, p.uuid, e.target.checked)"
               />
             </div>
             <div class="matrix-cell add-role-cell" />
@@ -70,88 +363,94 @@ function toggleRolePermission(role, pid, checked) {
       </div>
       <p class="matrix-hint muted">Toggle which permissions each role grants.</p>
     </div>
-    <div class="roles-grid">
+    <div class="roles-grid" ref="rolesGridRef">
       <div
-        v-for="r in sortedRoles"
+        v-for="(r, roleIndex) in sortedRoles"
         :key="r.uuid"
         class="role-column"
-        @dragover="$emit('onRoleDragOver', $event)"
-        @drop="e => $emit('onRoleDrop', e, selectedOrg, r)"
       >
-        <div class="role-header">
+        <div class="role-header" @keydown="e => handleRoleHeaderKeydown(e, roleIndex)">
           <strong class="role-name" :title="r.uuid">
             <span>{{ r.display_name }}</span>
             <button @click="$emit('updateRole', r)" class="icon-btn" aria-label="Edit role" title="Edit role">✏️</button>
+            <button v-if="roleUserCount(r.uuid) === 0" @click="$emit('deleteRole', r)" class="icon-btn delete-icon" aria-label="Delete role" title="Delete role">❌</button>
           </strong>
           <div class="role-actions">
             <button @click="$emit('createUserInRole', selectedOrg, r)" class="plus-btn" aria-label="Add user" title="Add user">➕</button>
           </div>
         </div>
-        <template v-if="r.users.length > 0">
-          <ul class="user-list">
-            <li
-              v-for="u in r.users.slice().sort((a, b) => {
-                const nameA = a.display_name.toLowerCase()
-                const nameB = b.display_name.toLowerCase()
-                if (nameA !== nameB) {
-                  return nameA.localeCompare(nameB)
-                }
-                return a.uuid.localeCompare(b.uuid)
-              })"
-              :key="u.uuid"
-              class="user-chip"
-              draggable="true"
-              @dragstart="e => $emit('onUserDragStart', e, u, selectedOrg.uuid)"
-              @click="$emit('openUser', u)"
-              :title="u.uuid"
-            >
-              <span class="name">{{ u.display_name }}</span>
-              <span class="meta">{{ u.last_seen ? new Date(u.last_seen).toLocaleDateString() : '—' }}</span>
-            </li>
-          </ul>
-        </template>
-        <div v-else class="empty-role">
-          <p class="empty-text muted">No members</p>
-          <button @click="$emit('deleteRole', r)" class="icon-btn delete-icon" aria-label="Delete empty role" title="Delete role">❌</button>
+        <div class="user-list-wrapper">
+          <draggable
+            :list="roleUsers(r.uuid)"
+            group="users"
+            item-key="uuid"
+            tag="ul"
+            class="user-list"
+            @change="evt => onUserChange(evt, r.uuid)"
+            @keydown="handleUserListKeydown"
+          >
+            <template #item="{ element: u }">
+              <li
+                class="user-chip"
+                tabindex="0"
+                @click="$emit('openUser', u)"
+                @keydown.enter="$emit('openUser', u)"
+                :title="u.uuid"
+              >
+                <ProfilePicture
+                  class="user-chip-picture"
+                  :src="u.avatar_url"
+                  :title="u.display_name"
+                  width="3.25rem"
+                  height="100%"
+                  radius="0"
+                  fallback-size="1.3rem"
+                />
+                <span class="user-chip-body">
+                  <span class="name">{{ u.display_name }}</span>
+                  <span class="meta">{{ u.last_seen ? new Date(u.last_seen).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '—' }}</span>
+                </span>
+              </li>
+            </template>
+          </draggable>
+          <div v-if="roleUserCount(r.uuid) === 0" class="empty-role">
+            <p class="empty-text muted">No members</p>
+          </div>
         </div>
       </div>
     </div>
+    <p v-if="sortedRoles.length >= 2" class="roles-hint muted">Members can be drag&dropped to different roles.</p>
 </template>
 
 <style scoped>
 .card.surface { padding: var(--space-lg); }
-.org-title { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); }
-.org-name { font-size: 1.5rem; font-weight: 600; color: var(--color-heading); }
-.icon-btn { background: none; border: none; color: var(--color-text-muted); padding: 0.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
-.icon-btn:hover { color: var(--color-heading); background: var(--color-surface-muted); }
-.matrix-wrapper { margin: var(--space-md) 0; padding: var(--space-lg); }
-.matrix-scroll { overflow-x: auto; }
-.matrix-hint { font-size: 0.8rem; color: var(--color-text-muted); }
-.perm-matrix-grid { display: inline-grid; gap: 0.25rem; align-items: stretch; }
-.perm-matrix-grid > * { padding: 0.35rem 0.45rem; font-size: 0.75rem; }
-.perm-matrix-grid .grid-head { color: var(--color-text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
-.perm-matrix-grid .perm-head { display: flex; align-items: flex-end; justify-content: flex-start; padding: 0.35rem 0.45rem; font-size: 0.75rem; }
+.org-title { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-size: 1.65rem; }
+.org-name { font-weight: 600; color: var(--color-heading); }
 .perm-matrix-grid .role-head { display: flex; align-items: flex-end; justify-content: center; }
 .perm-matrix-grid .role-head span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.65rem; }
 .perm-matrix-grid .add-role-head { cursor: pointer; }
-.perm-name { font-weight: 600; color: var(--color-heading); padding: 0.35rem 0.45rem; font-size: 0.75rem; }
-.roles-grid { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); }
-.role-column { flex: 1; min-width: 200px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
+.roles-grid { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--space-lg); justify-content: flex-start; align-items: stretch; }
+.role-column { flex: 0 0 17em; border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; }
 .role-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
 .role-name { display: flex; align-items: center; gap: var(--space-xs); font-size: 1.1rem; color: var(--color-heading); }
 .role-actions { display: flex; gap: var(--space-xs); }
-.plus-btn { background: var(--color-accent-soft); color: var(--color-accent); border: none; border-radius: var(--radius-sm); padding: 0.25rem 0.45rem; font-size: 1.1rem; cursor: pointer; }
+.plus-btn { background: none; color: var(--color-accent); border: none; border-radius: var(--radius-sm); padding: 0.25rem 0.45rem; font-size: 1.1rem; cursor: pointer; }
 .plus-btn:hover { background: rgba(37, 99, 235, 0.18); }
-.user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
-.user-chip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.45rem 0.6rem; display: flex; justify-content: space-between; gap: var(--space-sm); cursor: grab; }
-.user-chip .meta { font-size: 0.7rem; color: var(--color-text-muted); }
-.empty-role { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
+.user-list-wrapper { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 5.5rem; }
+.user-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
+.user-chip { background: var(--color-accent-strong); color: var(--color-accent-contrast); border: none; border-radius: var(--radius-md); padding: 0; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: stretch; gap: 0; cursor: grab; overflow: hidden; min-height: 3.25rem; }
+.user-chip:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
+.user-chip-picture { align-self: stretch; }
+.user-chip-body { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.45rem 0.6rem; }
+.user-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.user-chip .meta { font-size: 0.7rem; opacity: 0.85; }
+.user-chip.sortable-ghost { opacity: 0.5; }
+.user-chip.sortable-chosen { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
+.empty-role { position: absolute; inset: 0; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; pointer-events: none; }
+.user-list:has(.sortable-ghost) + .empty-role { display: none; }
 .empty-text { margin: 0; }
-.delete-icon { color: var(--color-danger); }
-.delete-icon:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }
-.muted { color: var(--color-text-muted); }
 
 @media (max-width: 720px) {
   .roles-grid { flex-direction: column; }
 }
-</style>
+</style>

frontend/src/admin/AdminOverview.vue

@@ -1,58 +1,306 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { getDirection, navigateButtonRow, focusPreferred, focusAtIndex } from '@/utils/keynav'
+import { formatDate } from '@/utils/helpers'
 
 const props = defineProps({
   info: Object,
   orgs: Array,
   permissions: Array,
-  permissionSummary: Object
+  oidcClients: Array,
+  permissionSummary: Object,
+  navigationDisabled: { type: Boolean, default: false }
 })
 
-const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay'])
+const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay', 'createOidcClient', 'openOidcClient', 'deleteOidcClient', 'openServerConfig', 'navigateOut'])
+
+// Template refs for navigation
+const orgActionsRef = ref(null)
+const orgTableRef = ref(null)
+const permMatrixRef = ref(null)
+const permActionsRef = ref(null)
+const permTableRef = ref(null)
 
 const sortedOrgs = computed(() => [...props.orgs].sort((a,b)=> {
-  const nameCompare = a.display_name.localeCompare(b.display_name)
+  const nameCompare = a.org.display_name.localeCompare(b.org.display_name)
   return nameCompare !== 0 ? nameCompare : a.uuid.localeCompare(b.uuid)
 }))
-const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.id.localeCompare(b.id)))
 
-function permissionDisplayName(id) {
-  return props.permissions.find(p => p.id === id)?.display_name || id
+// Map OIDC client UUIDs to display names for permission domain column
+const oidcClientNames = computed(() => {
+  const map = {}
+  for (const c of props.oidcClients || []) map[c.uuid] = c.name
+  return map
+})
+function domainDisplay(domain) {
+  if (!domain) return '—'
+  return oidcClientNames.value[domain] || domain
 }
 
+// Map OIDC client UUIDs to their group permissions (sorted by scope)
+const clientGroups = computed(() => {
+  const map = {}
+  for (const p of props.permissions || []) {
+    if (p.domain) {
+      if (!map[p.domain]) map[p.domain] = []
+      map[p.domain].push(p)
+    }
+  }
+  // Sort each group array by scope
+  for (const key in map) {
+    map[key].sort((a, b) => a.scope.localeCompare(b.scope))
+  }
+  return map
+})
+
+const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.scope.localeCompare(b.scope)))
+
+// Derive admin status from permissions (info contains ctx from validate response)
+const isMasterAdmin = computed(() => props.info?.ctx.permissions.includes('auth:admin'))
+const isOrgAdmin = computed(() => props.info?.ctx.permissions.includes('auth:org:admin'))
+
 function getRoleNames(org) {
-  return org.roles
+  // org.roles is dict[UUID, Role]
+  return Object.values(org.roles)
     .slice()
     .sort((a, b) => a.display_name.localeCompare(b.display_name))
     .map(r => r.display_name)
     .join(', ')
 }
+
+function orgUserCount(org) {
+  return Object.keys(org.users).length
+}
+
+// Table navigation for both org and permissions tables
+function handleTableKeydown(event, tableType) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const target = event.target
+  const row = target.closest('tr')
+  if (!row) return
+
+  const tbody = row.closest('tbody')
+  if (!tbody) return
+
+  const rows = Array.from(tbody.querySelectorAll('tr'))
+  const currentIndex = rows.indexOf(row)
+  if (currentIndex === -1) return
+
+  // Handle left/right navigation within the row
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    const focusables = Array.from(row.querySelectorAll('a, button:not([disabled])'))
+    const currentFocusIndex = focusables.indexOf(target)
+    if (currentFocusIndex === -1) return
+
+    if (direction === 'left' && currentFocusIndex > 0) {
+      focusables[currentFocusIndex - 1].focus()
+    } else if (direction === 'right' && currentFocusIndex < focusables.length - 1) {
+      focusables[currentFocusIndex + 1].focus()
+    }
+    return
+  }
+
+  // Handle up/down navigation between rows
+  let newIndex = currentIndex
+  if (direction === 'up' && currentIndex > 0) {
+    newIndex = currentIndex - 1
+  } else if (direction === 'down' && currentIndex < rows.length - 1) {
+    newIndex = currentIndex + 1
+  } else if (direction === 'up' && currentIndex === 0) {
+    // At top of table, navigate to actions above
+    event.preventDefault()
+    if (tableType === 'org') {
+      focusPreferred(orgActionsRef.value, { itemSelector: 'button' })
+    } else if (tableType === 'perm') {
+      focusPreferred(permActionsRef.value, { itemSelector: 'button' })
+    }
+    return
+  } else if (direction === 'down' && currentIndex === rows.length - 1) {
+    // At bottom of org table, navigate to permissions section
+    event.preventDefault()
+    if (tableType === 'org' && isMasterAdmin.value) {
+      // Navigate to permissions matrix or actions
+      if (permMatrixRef.value) {
+        const firstCheckbox = permMatrixRef.value.querySelector('input[type="checkbox"]')
+        if (firstCheckbox) firstCheckbox.focus()
+        else focusPreferred(permActionsRef.value, { itemSelector: 'button' })
+      }
+    }
+    return
+  }
+
+  if (newIndex !== currentIndex) {
+    event.preventDefault()
+    const newRow = rows[newIndex]
+    const focusable = newRow.querySelector('a, button:not([disabled])')
+    if (focusable) focusable.focus()
+  }
+}
+
+// Handle org actions button keynav
+function handleOrgActionsKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(orgActionsRef.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    emit('navigateOut', 'up')
+  } else if (direction === 'down') {
+    // Move to org table
+    const firstFocusable = orgTableRef.value?.querySelector('tbody tr a, tbody tr button:not([disabled])')
+    if (firstFocusable) firstFocusable.focus()
+  }
+}
+
+// Handle permission matrix grid navigation
+function handleMatrixKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  const target = event.target
+  if (target.tagName !== 'INPUT') return
+
+  event.preventDefault()
+
+  const checkboxes = Array.from(permMatrixRef.value.querySelectorAll('input[type="checkbox"]'))
+  const currentIndex = checkboxes.indexOf(target)
+  if (currentIndex === -1) return
+
+  // Calculate grid dimensions
+  const cols = sortedOrgs.value.length
+  const rows = sortedPermissions.value.length
+
+  if (cols === 0 || rows === 0) return
+
+  const currentRow = Math.floor(currentIndex / cols)
+  const currentCol = currentIndex % cols
+
+  let newIndex = currentIndex
+  if (direction === 'left') {
+    if (currentCol > 0) {
+      // Move left within the same row
+      newIndex = currentIndex - 1
+    }
+    // At leftmost column, do nothing (no wrap)
+  } else if (direction === 'right') {
+    if (currentCol < cols - 1) {
+      // Move right within the same row
+      newIndex = currentIndex + 1
+    }
+    // At rightmost column, do nothing (no wrap)
+  } else if (direction === 'up') {
+    if (currentRow > 0) {
+      // Move up within the same column
+      newIndex = currentIndex - cols
+    } else {
+      // At top row, navigate up to org table
+      const lastRow = orgTableRef.value?.querySelector('tbody tr:last-child')
+      const focusable = lastRow?.querySelector('a, button:not([disabled])')
+      if (focusable) focusable.focus()
+      return
+    }
+  } else if (direction === 'down') {
+    if (currentRow < rows - 1) {
+      // Move down within the same column
+      newIndex = currentIndex + cols
+    } else {
+      // At bottom row, navigate down to permission actions
+      focusPreferred(permActionsRef.value, { itemSelector: 'button' })
+      return
+    }
+  }
+
+  if (newIndex !== currentIndex && checkboxes[newIndex]) {
+    checkboxes[newIndex].focus()
+  }
+}
+
+// Handle permission actions button keynav
+function handlePermActionsKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(permActionsRef.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    // Move to first column of last row in matrix
+    const checkboxes = permMatrixRef.value?.querySelectorAll('input[type="checkbox"]')
+    if (checkboxes?.length) {
+      const cols = sortedOrgs.value.length
+      const rows = sortedPermissions.value.length
+      // First checkbox of last row = (rows - 1) * cols
+      const lastRowFirstIndex = (rows - 1) * cols
+      if (checkboxes[lastRowFirstIndex]) {
+        checkboxes[lastRowFirstIndex].focus()
+      } else {
+        checkboxes[0].focus()
+      }
+    } else {
+      // No matrix, go to org table
+      const lastRow = orgTableRef.value?.querySelector('tbody tr:last-child')
+      const focusable = lastRow?.querySelector('a, button:not([disabled])')
+      if (focusable) focusable.focus()
+    }
+  } else if (direction === 'down') {
+    // Move to permissions table
+    const firstFocusable = permTableRef.value?.querySelector('tbody tr button:not([disabled])')
+    if (firstFocusable) firstFocusable.focus()
+  }
+}
+
+// Focus helper for external navigation
+function focusFirstElement() {
+  if (isMasterAdmin.value) {
+    focusPreferred(orgActionsRef.value, { itemSelector: 'button' })
+  } else {
+    const firstFocusable = orgTableRef.value?.querySelector('tbody tr a, tbody tr button:not([disabled])')
+    if (firstFocusable) firstFocusable.focus()
+  }
+}
+
+defineExpose({ focusFirstElement })
 </script>
 
 <template>
-  <div class="permissions-section">
-    <h2>{{ info.is_global_admin ? 'Organizations' : 'Your Organizations' }}</h2>
-    <div class="actions">
-      <button v-if="info.is_global_admin" @click="$emit('createOrg')">+ Create Org</button>
+  <div class="permissions-section" ref="orgSection">
+    <h2>{{ isMasterAdmin ? 'Organizations' : 'Your Organizations' }}</h2>
+    <div class="actions" ref="orgActionsRef" @keydown="handleOrgActionsKeydown">
+      <button v-if="isMasterAdmin" @click="$emit('createOrg')">+ Create Org</button>
     </div>
-    <table class="org-table">
+    <table class="org-table" ref="orgTableRef" @keydown="e => handleTableKeydown(e, 'org')">
       <thead>
         <tr>
           <th>Name</th>
           <th>Roles</th>
           <th>Members</th>
-          <th v-if="info.is_global_admin">Actions</th>
+          <th v-if="isMasterAdmin">Actions</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="o in sortedOrgs" :key="o.uuid">
           <td>
-            <a href="#org/{{o.uuid}}" @click.prevent="$emit('openOrg', o)">{{ o.display_name }}</a>
-            <button v-if="info.is_global_admin || info.is_org_admin" @click="$emit('updateOrg', o)" class="icon-btn edit-org-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
+            <a href="#org/{{o.uuid}}" @click.prevent="$emit('openOrg', o)">{{ o.org.display_name }}</a>
+            <button v-if="isMasterAdmin || isOrgAdmin" @click="$emit('updateOrg', o)" class="icon-btn edit-org-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
           </td>
           <td class="role-names">{{ getRoleNames(o) }}</td>
-          <td class="center">{{ o.roles.reduce((acc,r)=>acc + r.users.length,0) }}</td>
-          <td v-if="info.is_global_admin" class="center">
+          <td class="center">{{ orgUserCount(o) }}</td>
+          <td v-if="isMasterAdmin" class="center">
             <button @click="$emit('deleteOrg', o)" class="icon-btn delete-icon" aria-label="Delete organization" title="Delete organization">❌</button>
           </td>
         </tr>
@@ -60,9 +308,9 @@ function getRoleNames(org) {
     </table>
   </div>
 
-  <div v-if="info.is_global_admin" class="permissions-section">
+  <div v-if="isMasterAdmin" class="permissions-section">
     <h2>Permissions</h2>
-    <div class="matrix-wrapper">
+    <div class="matrix-wrapper" ref="permMatrixRef" @keydown="handleMatrixKeydown">
       <div class="matrix-scroll">
         <div
           class="perm-matrix-grid"
@@ -73,24 +321,24 @@ function getRoleNames(org) {
             v-for="o in sortedOrgs"
             :key="'head-' + o.uuid"
             class="grid-head org-head"
-            :title="o.display_name"
+            :title="o.org.display_name"
           >
-            <span>{{ o.display_name }}</span>
+            <span>{{ o.org.display_name }}</span>
           </div>
 
-          <template v-for="p in sortedPermissions" :key="p.id">
-            <div class="perm-name" :title="p.id">
+          <template v-for="p in sortedPermissions" :key="p.uuid">
+            <div class="perm-name" :title="p.scope">
               <span class="display-text">{{ p.display_name }}</span>
             </div>
             <div
               v-for="o in sortedOrgs"
-              :key="o.uuid + '-' + p.id"
+              :key="o.uuid + '-' + p.uuid"
               class="matrix-cell"
             >
               <input
                 type="checkbox"
-                :checked="o.permissions.includes(p.id)"
-                @change="e => $emit('toggleOrgPermission', o, p.id, e.target.checked)"
+                :checked="p.uuid in o.permissions"
+                @change="e => $emit('toggleOrgPermission', o, p.uuid, e.target.checked)"
               />
             </div>
           </template>
@@ -98,29 +346,31 @@ function getRoleNames(org) {
       </div>
       <p class="matrix-hint muted">Toggle which permissions each organization can grant to its members.</p>
     </div>
-    <div class="actions">
-      <button v-if="info.is_global_admin" @click="$emit('openDialog', 'perm-create', { display_name: '', id: '' })">+ Create Permission</button>
+    <div class="actions" ref="permActionsRef" @keydown="handlePermActionsKeydown">
+      <button v-if="isMasterAdmin" @click="$emit('openDialog', 'perm-create', { display_name: '', scope: '', domain: '' })">+ Create Permission</button>
     </div>
-    <table class="org-table">
+    <table class="org-table" ref="permTableRef" @keydown="e => handleTableKeydown(e, 'perm')">
         <thead>
           <tr>
             <th scope="col">Permission</th>
+            <th scope="col">Domain</th>
             <th scope="col" class="center">Members</th>
             <th scope="col" class="center">Actions</th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="p in sortedPermissions" :key="p.id">
+          <tr v-for="p in sortedPermissions" :key="p.uuid">
             <td class="perm-name-cell">
               <div class="perm-title">
                 <span class="display-text">{{ p.display_name }}</span>
-                <button @click="$emit('renamePermissionDisplay', p)" class="icon-btn edit-display-btn" aria-label="Edit display name" title="Edit display name">✏️</button>
+                <button @click="$emit('renamePermissionDisplay', p)" class="icon-btn edit-display-btn" aria-label="Edit permission" title="Edit permission">✏️</button>
               </div>
               <div class="perm-id-info">
-                <span class="id-text">{{ p.id }}</span>
+                <span class="id-text">{{ p.scope }}</span>
               </div>
             </td>
-            <td class="perm-members center">{{ permissionSummary[p.id]?.userCount || 0 }}</td>
+            <td class="perm-domain">{{ domainDisplay(p.domain) }}</td>
+            <td class="perm-members center">{{ permissionSummary[p.uuid]?.userCount || 0 }}</td>
             <td class="perm-actions center">
               <button @click="$emit('deletePermission', p)" class="icon-btn delete-icon" aria-label="Delete permission" title="Delete permission">❌</button>
             </td>
@@ -128,38 +378,88 @@ function getRoleNames(org) {
         </tbody>
       </table>
   </div>
+
+  <div v-if="isMasterAdmin" class="oidc-clients-section">
+    <div class="section-header">
+      <h2>OAuth2 / OpenID Connect</h2>
+      <p class="section-description">
+        Allow external websites and applications to securely authenticate users through this system.
+        The clients are remote sites or applications that we allow to use Paskia for Single Sign-On.
+      </p>
+    </div>
+    <div ref="oidcActionsRef">
+      <button @click="$emit('createOidcClient')">+ Add Site</button>
+    </div>
+    <table class="org-table" ref="oidcTableRef">
+      <thead>
+        <tr>
+          <th scope="col">Client</th>
+          <th scope="col">Groups</th>
+          <th scope="col" class="center">Sessions</th>
+          <th scope="col" class="center">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!oidcClients || oidcClients.length === 0">
+          <td colspan="4" class="center muted">No OIDC clients configured</td>
+        </tr>
+        <tr v-for="client in oidcClients" :key="client.uuid">
+          <td class="perm-name-cell">
+            <div class="perm-title">
+              <a :href="'#oidc:' + client.uuid" @click.prevent="$emit('openOidcClient', client)">{{ client.name }}</a>
+            </div>
+            <div class="perm-id-info">
+              <span class="id-text">{{ client.uuid }}</span>
+            </div>
+          </td>
+          <td class="client-groups">
+            <span v-if="clientGroups[client.uuid]?.length">{{ clientGroups[client.uuid].map(g => g.scope).join(' ') }}</span>
+            <span v-else class="muted">—</span>
+          </td>
+          <td class="center">{{ client.active_sessions || 0 }}</td>
+          <td class="center">
+            <button @click="$emit('deleteOidcClient', client)" class="icon-btn delete-icon" aria-label="Delete OIDC client" title="Delete OIDC client">❌</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div v-if="isMasterAdmin" class="server-options-section">
+    <div class="section-header">
+      <h2>Server</h2>
+      <p class="section-description">
+        Configure core server settings such as the display name, authentication host, and allowed origins.
+      </p>
+    </div>
+    <button @click="$emit('openServerConfig')">⚙ Server Options</button>
+  </div>
 </template>
 
 <style scoped>
 .permissions-section { margin-bottom: var(--space-xl); }
 .permissions-section h2 { margin-bottom: var(--space-md); }
-.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
-.actions button { width: auto; }
 .org-table a { text-decoration: none; color: var(--color-link); }
 .org-table a:hover { text-decoration: underline; }
 .org-table .center { width: 6rem; min-width: 6rem; }
 .org-table .role-names { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .perm-name-cell { display: flex; flex-direction: column; gap: 0.3rem; }
 .perm-title { font-weight: 600; color: var(--color-heading); }
-.perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); }
-.icon-btn { background: none; border: none; color: var(--color-text-muted); padding: 0.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
-.icon-btn:hover { color: var(--color-heading); background: var(--color-surface-muted); }
-.delete-icon { color: var(--color-danger); }
-.delete-icon:hover { background: var(--color-danger-bg); color: var(--color-danger-text); }
-.matrix-wrapper { margin: var(--space-md) 0; padding: var(--space-lg); }
-.matrix-scroll { overflow-x: auto; }
-.matrix-hint { font-size: 0.8rem; color: var(--color-text-muted); }
-.perm-matrix-grid { display: inline-grid; gap: 0.25rem; align-items: stretch; }
-.perm-matrix-grid > * { padding: 0.35rem 0.45rem; font-size: 0.75rem; }
-.perm-matrix-grid .grid-head { color: var(--color-text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
-.perm-matrix-grid .perm-head { display: flex; align-items: flex-end; justify-content: flex-start; padding: 0.35rem 0.45rem; font-size: 0.75rem; }
+.perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+.perm-domain { color: var(--color-text-muted); font-size: 0.9rem; }
 .perm-matrix-grid .org-head { display: flex; align-items: flex-end; justify-content: center; }
 .perm-matrix-grid .org-head span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.65rem; }
-.perm-name { font-weight: 600; color: var(--color-heading); padding: 0.35rem 0.45rem; font-size: 0.75rem; }
 .display-text { margin-right: var(--space-xs); }
 .edit-display-btn { padding: 0.1rem 0.2rem; font-size: 0.8rem; }
 .edit-org-btn { padding: 0.1rem 0.2rem; font-size: 0.8rem; margin-left: var(--space-xs); }
 .perm-actions { text-align: center; }
-.center { text-align: center; }
-.muted { color: var(--color-text-muted); }
-</style>
+
+/* OIDC Clients Section */
+.oidc-clients-section { margin-bottom: var(--space-xl); margin-top: var(--space-2xl); }
+.oidc-clients-section .section-header { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-md); }
+.client-groups { font-size: 0.85rem; color: var(--color-text-muted); max-width: 200px; font-family: var(--font-mono, monospace); }
+
+/* Server Options Section */
+.server-options-section { margin-top: var(--space-2xl); }
+.server-options-section .section-header { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-md); }
+</style>

frontend/src/admin/AdminUserDetail.vue

@@ -1,61 +1,98 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import CredentialList from '@/components/CredentialList.vue'
+import ProfilePictureEditorModal from '@/components/ProfilePictureEditorModal.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
 import SessionList from '@/components/SessionList.vue'
 import { useAuthStore } from '@/stores/auth'
-import { apiJson } from '@/utils/api'
+import { apiJson } from 'paskia'
+import { getDirection, navigateButtonRow, focusPreferred, focusAtIndex } from '@/utils/keynav'
 
 const props = defineProps({
   selectedUser: Object,
   userDetail: Object,
   selectedOrg: Object,
   loading: Boolean,
-  showRegModal: Boolean
+  showRegModal: Boolean,
+  navigationDisabled: { type: Boolean, default: false }
 })
 
-const emit = defineEmits(['generateUserRegistrationLink', 'goOverview', 'openOrg', 'onUserNameSaved', 'closeRegModal', 'editUserName', 'refreshUserDetail'])
+const emit = defineEmits(['generateUserRegistrationLink', 'openOrg', 'closeRegModal', 'editUserName', 'refreshUserDetail', 'navigateOut', 'deleteUser'])
 
 const authStore = useAuthStore()
 const terminatingSessions = ref({})
 const hoveredCredentialUuid = ref(null)
 const hoveredSession = ref(null)
+const showPictureDialog = ref(false)
+const avatarRenderVersion = ref(0)
+
+// Convert credentials dict to array with uuid attached as 'credential'
+const credentials = computed(() =>
+  Object.entries(props.userDetail?.credentials || {}).map(([uuid, c]) => ({ ...c, credential: uuid }))
+)
+
+// Template refs for navigation
+const userInfoRef = ref(null)
+const regActionsRef = ref(null)
+const credentialListRef = ref(null)
+const sessionListRef = ref(null)
+const backButtonRef = ref(null)
+
+// Check if any modal/dialog is open (blocks arrow key navigation)
+const hasActiveModal = computed(() => props.showRegModal)
 
 function onLinkCopied() {
-  authStore.showMessage('Link copied to clipboard!')
+  authStore.showMessage(`📋 Link copied! Send it to ${props.selectedUser.display_name}.`)
+  emit('closeRegModal')
 }
 
 function handleEditName() {
   emit('editUserName', props.selectedUser)
 }
 
+function openPictureDialog() {
+  if (!props.userDetail || props.userDetail.error) return
+  showPictureDialog.value = true
+}
+
+function closePictureDialog() {
+  showPictureDialog.value = false
+}
+
+function handlePictureUpdated() {
+  avatarRenderVersion.value += 1
+  emit('refreshUserDetail')
+}
+
 async function handleDelete(credential) {
   try {
-    const data = await apiJson(`/auth/api/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/credentials/${credential.credential_uuid}`, { method: 'DELETE' })
+    const data = await apiJson(`/auth/api/admin/users/${props.selectedUser.uuid}/credentials/${credential.credential}`, { method: 'DELETE' })
     if (data.status === 'ok') {
-      emit('onUserNameSaved') // Reuse to refresh user detail
+      emit('refreshUserDetail')
+      authStore.showMessage('Passkey removed', 'success', 2500)
     } else {
-      console.error('Failed to delete credential', data)
+      authStore.showMessage(data.detail || 'Failed to remove passkey', 'error')
     }
   } catch (err) {
+    authStore.showMessage(err.message || 'Failed to remove passkey', 'error')
     console.error('Delete credential error', err)
   }
 }
 
 async function handleTerminateSession(session) {
-  const sessionId = session?.id
-  if (!sessionId) return
-  terminatingSessions.value = { ...terminatingSessions.value, [sessionId]: true }
+  const sessionKey = session?.key
+  if (!sessionKey) return
+  terminatingSessions.value = { ...terminatingSessions.value, [sessionKey]: true }
   try {
-    const data = await apiJson(`/auth/api/admin/orgs/${props.selectedUser.org_uuid}/users/${props.selectedUser.uuid}/sessions/${sessionId}`, { method: 'DELETE' })
+    const data = await apiJson(`/auth/api/admin/users/${props.selectedUser.uuid}/sessions/${sessionKey}`, { method: 'DELETE' })
     if (data.status === 'ok') {
       if (data.current_session_terminated) {
         sessionStorage.clear()
         location.reload()
         return
       }
-      emit('refreshUserDetail') // Refresh without showing rename message
+      emit('refreshUserDetail')
       authStore.showMessage('Session terminated', 'success', 2500)
     } else {
       authStore.showMessage(data.detail || 'Failed to terminate session', 'error')
@@ -65,90 +102,210 @@ async function handleTerminateSession(session) {
     authStore.showMessage(err.message || 'Failed to terminate session', 'error')
   } finally {
     const next = { ...terminatingSessions.value }
-    delete next[sessionId]
+    delete next[sessionKey]
     terminatingSessions.value = next
   }
 }
 
+async function handleDeleteUser() {
+  emit('deleteUser')
+}
+
+// Handle user info section keynav
+function handleUserInfoKeydown(event) {
+  if (hasActiveModal.value || props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(userInfoRef.value, event.target, direction, { itemSelector: '.user-picture-btn, .mini-btn' })
+  } else if (direction === 'up') {
+    emit('navigateOut', 'up')
+  } else if (direction === 'down') {
+    // Move to registration actions
+    focusPreferred(regActionsRef.value, { itemSelector: 'button' })
+  }
+}
+
+// Handle registration actions keynav
+function handleRegActionsKeydown(event) {
+  if (hasActiveModal.value || props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(regActionsRef.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    // Move to user info edit button
+    focusPreferred(userInfoRef.value, { itemSelector: '.user-picture-btn, .mini-btn' })
+  } else if (direction === 'down') {
+    // Move to credential list
+    credentialListRef.value?.$el?.focus()
+  }
+}
+
+// Handle credential list navigate out
+function handleCredentialNavigateOut(direction) {
+  if (hasActiveModal.value || props.navigationDisabled) return
+
+  if (direction === 'up') {
+    focusPreferred(regActionsRef.value, { itemSelector: 'button' })
+  } else if (direction === 'down') {
+    // Move to session list
+    focusAtIndex(sessionListRef.value?.$el, 0, { itemSelector: '.session-group' })
+  }
+}
+
+// Handle session list navigate out
+function handleSessionNavigateOut(direction) {
+  if (hasActiveModal.value || props.navigationDisabled) return
+
+  if (direction === 'up') {
+    // Move to credential list
+    credentialListRef.value?.$el?.focus()
+  } else if (direction === 'down') {
+    // Move to back button
+    const backBtn = backButtonRef.value?.querySelector('button')
+    if (backBtn) backBtn.focus()
+  }
+}
+
+// Handle back button keynav
+function handleBackButtonKeydown(event) {
+  if (hasActiveModal.value || props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'up') {
+    // Move to session list
+    focusAtIndex(sessionListRef.value?.$el, -1, { itemSelector: '.session-group' })
+  }
+}
+
+// Focus helper for external navigation
+function focusFirstElement() {
+  focusPreferred(userInfoRef.value, { itemSelector: '.user-picture-btn, .mini-btn' })
+}
+
+defineExpose({ focusFirstElement })
+
+const currentPictureEndpoint = computed(() => {
+  if (!props.selectedUser?.uuid) return null
+  return `/auth/api/user/${props.selectedUser.uuid}/profile.webp`
+})
+
+const adminPictureTitle = computed(() => {
+  const username = props.userDetail?.user?.preferred_username || props.selectedUser?.preferred_username
+  const displayName = props.userDetail?.user?.display_name || props.selectedUser?.display_name
+  const label = username || displayName || 'User'
+  return `Profile Picture for ${label}`
+})
 </script>
 
 <template>
   <div class="user-detail">
-    <UserBasicInfo
-      v-if="userDetail && !userDetail.error"
-      :name="userDetail.display_name || selectedUser.display_name"
-      :visits="userDetail.visits"
-      :created-at="userDetail.created_at"
-      :last-seen="userDetail.last_seen"
-      :loading="loading"
-      :org-display-name="userDetail.org.display_name"
-      :role-name="userDetail.role"
-      :update-endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/display-name`"
-      @saved="$emit('onUserNameSaved')"
-      @edit-name="handleEditName"
-    />
-    <div v-else-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
+    <div ref="userInfoRef" @keydown="handleUserInfoKeydown">
+      <UserBasicInfo
+        v-if="userDetail && !userDetail.error"
+        :name="userDetail.user.display_name || selectedUser.display_name"
+        :avatar-url="userDetail.user.avatar_url"
+        :avatar-render-version="avatarRenderVersion"
+        avatar-clickable
+        :visits="userDetail.user.visits"
+        :created-at="userDetail.user.created_at"
+        :last-seen="userDetail.user.last_seen"
+        :email="userDetail.user.email"
+        :telephone="userDetail.user.telephone"
+        :loading="loading"
+        :org-display-name="userDetail.org.display_name"
+        :role-name="userDetail.role.display_name"
+        :update-endpoint="`/auth/api/admin/users/${selectedUser.uuid}/info`"
+        @avatar-click="openPictureDialog"
+        @edit="handleEditName"
+      >
+        <div class="admin-actions">
+          <button
+            class="btn-primary"
+            @click="$emit('generateUserRegistrationLink', selectedUser)"
+            :disabled="loading"
+            title="Generate a one-time link for this user"
+          >{{ userDetail?.credentials && Object.keys(userDetail.credentials).length > 0 ? 'Recovery Link' : 'Registration Link' }}</button>
+          <button
+            class="btn-danger"
+            @click="handleDeleteUser"
+            :disabled="loading"
+            title="Delete this user"
+          >Delete User</button>
+        </div>
+      </UserBasicInfo>
+    </div>
+    <div v-if="userDetail?.error" class="error small">{{ userDetail.error }}</div>
     <template v-if="userDetail && !userDetail.error">
-      <div class="registration-actions">
-        <button
-          class="btn-secondary reg-token-btn"
-          @click="$emit('generateUserRegistrationLink', selectedUser)"
-          :disabled="loading"
-        >Generate Registration Token</button>
-        <p class="matrix-hint muted">
-          Generate a one-time registration link so this user can register or add another passkey.
-          Copy the link from the dialog and send it to the user, or have the user scan the QR code on their device.
-        </p>
-      </div>
       <section class="section-block" data-section="registered-passkeys">
         <div class="section-header">
           <h2>Registered Passkeys</h2>
         </div>
         <div class="section-body">
           <CredentialList
-            :credentials="userDetail.credentials"
+            ref="credentialListRef"
+            :credentials="credentials"
             :aaguid-info="userDetail.aaguid_info"
             :allow-delete="true"
             :hovered-credential-uuid="hoveredCredentialUuid"
-            :hovered-session-credential-uuid="hoveredSession?.credential_uuid"
+            :hovered-session-credential-uuid="hoveredSession?.credential"
+            :navigation-disabled="hasActiveModal"
             @delete="handleDelete"
             @credential-hover="hoveredCredentialUuid = $event"
+            @navigate-out="handleCredentialNavigateOut"
           />
         </div>
       </section>
       <SessionList
-        :sessions="userDetail.sessions || []"
+        ref="sessionListRef"
+        :sessions="userDetail.sessions || {}"
         :terminating-sessions="terminatingSessions"
         :hovered-credential-uuid="hoveredCredentialUuid"
+        :navigation-disabled="hasActiveModal"
         :empty-message="'This user has no active sessions.'"
         :section-description="'View and manage the active sessions for this user.'"
         @terminate="handleTerminateSession"
         @session-hover="hoveredSession = $event"
+        @navigate-out="handleSessionNavigateOut"
       />
     </template>
-    <div class="actions ancillary-actions">
+    <div class="actions ancillary-actions" ref="backButtonRef" @keydown="handleBackButtonKeydown">
       <button v-if="selectedOrg" @click="$emit('openOrg', selectedOrg)" class="icon-btn" title="Back to Org">↩️</button>
     </div>
     <RegistrationLinkModal
       v-if="showRegModal"
-      :endpoint="`/auth/api/admin/orgs/${selectedUser.org_uuid}/users/${selectedUser.uuid}/create-link`"
-      :user-name="userDetail?.display_name || selectedUser.display_name"
+      :endpoint="`/auth/api/admin/users/${selectedUser.uuid}/create-link`"
+      :user-name="userDetail?.user?.display_name || selectedUser.display_name"
       @close="$emit('closeRegModal')"
       @copied="onLinkCopied"
     />
+    <ProfilePictureEditorModal
+      v-if="showPictureDialog && currentPictureEndpoint"
+      :endpoint="currentPictureEndpoint"
+      :picture-url="userDetail?.user?.avatar_url"
+      :render-version="avatarRenderVersion"
+      :title="adminPictureTitle"
+      @close="closePictureDialog"
+      @updated="handlePictureUpdated"
+    />
   </div>
 </template>
 
 <style scoped>
 .user-detail { display: flex; flex-direction: column; gap: var(--space-lg); }
-.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
+.admin-actions { display: flex; gap: 0.5rem; }
 .ancillary-actions { margin-top: -0.5rem; }
-.reg-token-btn { align-self: flex-start; }
-.registration-actions { display: flex; flex-direction: column; gap: 0.5rem; }
-.icon-btn { background: none; border: none; color: var(--color-text-muted); padding: 0.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
-.icon-btn:hover { color: var(--color-heading); background: var(--color-surface-muted); }
-.matrix-hint { font-size: 0.8rem; color: var(--color-text-muted); }
-.error { color: var(--color-danger-text); }
-.small { font-size: 0.9rem; }
-.muted { color: var(--color-text-muted); }
 </style>

frontend/src/assets/profile-generic.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="340" height="340">
+<path fill="#DDD" d="m169,.5a169,169 0 1,0 2,0zm0,86a76,76 0 1
+1-2,0zM57,287q27-35 67-35h92q40,0 67,35a164,164 0 0,1-226,0"/>
+</svg>

frontend/src/assets/style.css

@@ -1,68 +1,90 @@
 
+@property --hue {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 0.72turn;
+}
+
 :root {
   --font-sans: "Inter", "Inter var", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
   --font-mono: "DM Mono", "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  --color-canvas: #f5f6f8;
-  --color-surface: #ffffff;
-  --color-surface-subtle: #f1f3f7;
-  --color-border: #d0d5dd;
-  --color-border-strong: #9aa2af;
-  --color-heading: #101828;
-  --color-text: #1f2933;
-  --color-text-muted: #52616b;
-  --color-link: #2563eb;
-  --color-link-hover: #1d4ed8;
-  --color-accent: #2563eb;
-  --color-accent-strong: #1e3faa;
-  --color-accent-contrast: #ffffff;
-  --color-success-text: #0f5132;
-  --color-success-bg: #d1fadf;
-  --color-error-text: #b42318;
-  --color-error-bg: #ffe3e3;
-  --color-info-text: #0f609b;
-  --color-info-bg: #d6ecff;
-  --color-danger: #dc2626;
-  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
-  --radius-none: 0;
+  --color-canvas: white;
+  --color-surface: #def;
+  --color-surface-subtle: #bcf;
+  --color-surface-hover: oklab(0.97 -0.01 -0.02);
+  --color-dialog: oklab(0.96 -0.01 -0.03);
+  --color-border: oklab(0.82 -0.02 -0.06);
+  --color-border-strong: oklab(0.55 -0.05 -0.14);
+  --color-heading: oklab(0.22 -0.03 -0.09);
+  --color-text: oklab(0.2 -0.02 -0.05);
+  --color-text-muted: oklab(0.42 -0.02 -0.06);
+  --color-link: oklab(0.5 -0.06 -0.17);
+  --color-link-hover: oklab(0.45 -0.06 -0.19);
+  --color-accent: oklab(0.55 -0.06 -0.19);
+  --color-accent-strong: #46f;
+  --color-accent-contrast: white;
+  --color-secondary: oklab(0.55 -0.02 -0.05);
+  --color-secondary-strong: oklab(0.45 -0.02 -0.05);
+  --color-success-text: oklab(0.4 -0.12 0.09);
+  --color-success-bg: oklab(0.95 -0.02 0.02);
+  --color-error-text: oklab(0.45 0.18 0.09);
+  --color-error-bg: oklab(0.95 0.03 0.01);
+  --color-info-text: oklab(0.45 -0.05 -0.14);
+  --color-info-bg: oklab(0.95 -0.01 -0.02);
+  --color-danger: oklab(0.55 0.20 0.09);
+  --color-primary: oklab(0.55 -0.06 -0.19);
+  --color-error: oklab(0.45 0.18 0.09);
+  --color-success: oklab(0.4 -0.12 0.09);
+  --color-bg: oklab(0.94 -0.01 -0.03);
+  --color-accent-soft: oklab(0.92 -0.03 -0.08);
+  --shadow-soft: 0 0 .2rem black;
+  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.15);
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 10px;
-  --space-xxs: 0.25rem;
   --space-xs: 0.5rem;
   --space-sm: 0.75rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2.25rem;
-  --space-xxl: 3.5rem;
-  --layout-max-width: 1400px;
+  --space-3xl: 5rem;
   --layout-padding: clamp(1.5rem, 3vw + 1rem, 3.25rem);
   --transition-base: 160ms ease;
+  --focus-ring: 0 0 0 2px var(--color-accent);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-canvas: #0f172a;
-    --color-surface: #141b2f;
-    --color-surface-subtle: #1b243b;
-    --color-border: #25304a;
-    --color-border-strong: #3d4d6b;
-    --color-heading: #f8fafc;
-    --color-text: #e2e8f0;
-    --color-text-muted: #94a3b8;
-    --color-link: #60a5fa;
-    --color-link-hover: #93c5fd;
-    --color-accent: #60a5fa;
-    --color-accent-strong: #3b82f6;
-    --color-accent-contrast: #0b1120;
-    --color-success-text: #34d399;
-    --color-success-bg: #1a4d2e;
-    --color-error-text: #fca5a5;
-    --color-error-bg: #4a1f1f;
-    --color-info-text: #bae6fd;
-    --color-info-bg: #1e3a5f;
-    --color-danger: #f87171;
-    --shadow-soft: 0 0 0 #000000;
-  }
+:root.dark {
+  --color-canvas: oklab(0.17 -0.02 -0.05);
+  --color-surface: oklab(0.22 -0.02 -0.05);
+  --color-surface-subtle: oklab(0.25 -0.02 -0.05);
+  --color-surface-hover: oklab(0.28 -0.02 -0.05);
+  --color-dialog: oklab(0.22 -0.02 -0.05);
+  --color-border: oklab(0.3 -0.02 -0.05);
+  --color-border-strong: oklab(0.4 -0.02 -0.05);
+  --color-heading: white;
+  --color-text: oklab(0.9 0.00 -0.01);
+  --color-text-muted: oklab(0.7 -0.01 -0.02);
+  --color-link: oklab(0.7 -0.05 -0.14);
+  --color-link-hover: oklab(0.8 -0.04 -0.11);
+  --color-accent: oklab(0.7 -0.05 -0.14);
+  --color-accent-strong: oklab(0.6 -0.06 -0.17);
+  --color-accent-contrast: oklab(0.12 -0.01 -0.03);
+  --color-secondary: oklab(0.6 -0.02 -0.05);
+  --color-secondary-strong: oklab(0.5 -0.02 -0.05);
+  --color-success-text: oklab(0.75 -0.12 0.09);
+  --color-success-bg: oklab(0.3 -0.07 0.05);
+  --color-error-text: oklab(0.8 0.11 0.05);
+  --color-error-bg: oklab(0.3 0.07 0.03);
+  --color-info-text: oklab(0.8 -0.03 -0.10);
+  --color-info-bg: oklab(0.3 -0.02 -0.05);
+  --color-danger: oklab(0.7 0.16 0.08);
+  --color-primary: oklab(0.7 -0.05 -0.14);
+  --color-error: oklab(0.8 0.11 0.05);
+  --color-success: oklab(0.75 -0.12 0.09);
+  --color-bg: oklab(0.18 -0.01 -0.03);
+  --color-accent-soft: oklab(0.25 -0.03 -0.08);
+  --shadow-soft: 0 0 0 black;
+  --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.4);
 }
 
 *,
@@ -72,11 +94,14 @@
 }
 
 html {
+  overflow: clip;
   height: 100%;
   background: var(--color-canvas);
 }
 
 body {
+  overflow: auto;
+  scrollbar-gutter: stable;
   height: 100%;
   margin: 0;
   font-family: var(--font-sans);
@@ -84,6 +109,10 @@ body {
   color: var(--color-text);
   line-height: 1.55;
   -webkit-font-smoothing: antialiased;
+  text-align: justify;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
 }
 
 body,
@@ -108,13 +137,6 @@ a:visited {
 a:hover,
 a:focus-visible {
   color: var(--color-link-hover);
-  text-decoration: underline;
-}
-
-a:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
 }
 
 .app-shell {
@@ -131,6 +153,7 @@ a:focus-visible {
 }
 
 .view-root {
+  position: relative;
   flex: 1;
   width: 100%;
   display: flex;
@@ -139,7 +162,6 @@ a:focus-visible {
   padding: var(--layout-padding);
   box-sizing: border-box;
   margin: 0 auto;
-  width: min(100%, var(--layout-max-width));
 }
 
 .view-root--wide {
@@ -150,6 +172,25 @@ a:focus-visible {
   max-width: 540px;
 }
 
+.view-root--profile .view-header-wrapper {
+  width: 100%;
+  max-width: calc(1200px - 2 * var(--layout-padding));
+  margin: 0 auto;
+  position: relative;
+}
+
+.view-root--profile .theme-toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.section-block--constrained {
+  width: 100%;
+  max-width: calc(1200px - 2 * var(--layout-padding));
+  margin: 0 auto;
+}
+
 .view-header {
   display: flex;
   flex-direction: column;
@@ -187,11 +228,21 @@ a:focus-visible {
   gap: 1rem;
 }
 
+.section-description {
+  margin: 0;
+  color: var(--color-text-muted);
+}
+
 .button-row {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 0.75rem;
   justify-content: flex-start;
+  width: 100%;
+}
+
+.button-row button {
+  min-width: 0;
 }
 
 .surface {
@@ -214,18 +265,13 @@ button {
   border: 1px solid transparent;
   padding: 0.65rem 1.1rem;
   cursor: pointer;
-  transition: all var(--transition-base);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.4rem;
   background: var(--color-surface);
   color: var(--color-text);
-}
-
-button:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
+  transition: box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
 }
 
 button:disabled {
@@ -233,42 +279,53 @@ button:disabled {
   filter: opacity(0.6);
 }
 
+output[title="Click to copy"] {
+  cursor: pointer;
+}
+
 .btn-primary {
-  background: var(--color-accent);
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-accent);
   color: var(--color-accent-contrast);
   border-color: var(--color-accent);
+}
+
+.btn-primary:hover:not(:disabled),
+.btn-primary:focus-visible {
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-accent-strong);
+  border-color: var(--color-accent-strong);
   box-shadow: var(--shadow-soft);
 }
 
-.btn-primary:hover:not(:disabled) {
-  background: var(--color-accent-strong);
-  border-color: var(--color-accent-strong);
-}
-
 .btn-secondary {
-  background: transparent;
-  color: var(--color-text);
-  border-color: var(--color-border);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  border-color: var(--color-border-strong);
-  background: var(--color-surface-subtle);
-}
-
-.btn-danger {
-  background: var(--color-danger);
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-secondary);
   color: var(--color-accent-contrast);
   border-color: transparent;
 }
 
-.btn-danger:hover:not(:disabled) {
-  filter: brightness(0.92);
+.btn-secondary:hover:not(:disabled),
+.btn-secondary:focus-visible {
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-secondary-strong);
+  box-shadow: var(--shadow-soft);
 }
 
+.btn-danger {
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-danger);
+  color: var(--color-accent-contrast);
+  border-color: transparent;
+}
+
+.btn-danger:hover:not(:disabled),
+.btn-danger:focus-visible {
+  background: linear-gradient(to bottom, oklab(1 0 0 / 0.15), transparent 60%) var(--color-danger);
+  filter: brightness(0.92);
+  box-shadow: var(--shadow-soft);
+}
+
+input:not([type]),
 input[type="text"],
 input[type="search"],
 input[type="email"],
+input[type="tel"],
 textarea,
 select {
   font: inherit;
@@ -281,12 +338,16 @@ select {
   transition: border-color var(--transition-base), box-shadow var(--transition-base);
 }
 
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 3px #c7d2fe;
+input:not([type]):focus,
+input[type="text"]:focus,
+input[type="search"]:focus,
+input[type="email"]:focus,
+input[type="tel"]:focus,
+textarea:focus,
+select:focus {
   outline: none;
+  border-color: var(--color-accent);
+  box-shadow: var(--focus-ring);
 }
 
 label {
@@ -329,10 +390,118 @@ th {
   text-align: left;
 }
 
+/* Permission matrix styles */
+.matrix-wrapper {
+  margin: var(--space-md) 0;
+  padding: var(--space-lg);
+}
+
+.matrix-scroll {
+  overflow-x: auto;
+}
+
+.matrix-hint {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+}
+
+.perm-matrix-grid {
+  display: inline-grid;
+  gap: 0.25rem;
+  align-items: stretch;
+}
+
+.perm-matrix-grid > * {
+  padding: 0.35rem 0.45rem;
+  font-size: 0.75rem;
+}
+
+.perm-matrix-grid .grid-head {
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+}
+
+.perm-matrix-grid .perm-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: 0.35rem 0.45rem;
+  font-size: 0.75rem;
+}
+
+.perm-matrix-grid .rotated-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.perm-matrix-grid .rotated-head span {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-size: 0.65rem;
+}
+
+.perm-name {
+  font-weight: 600;
+  color: var(--color-heading);
+  padding: 0.35rem 0.45rem;
+  font-size: 0.75rem;
+}
+
 .center {
   text-align: center;
 }
 
+/* Utility classes */
+.muted {
+  color: var(--color-text-muted);
+}
+
+.error {
+  color: var(--color-danger-text);
+}
+
+.small {
+  font-size: 0.9rem;
+}
+
+.icon-btn {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  padding: 0.2rem;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.icon-btn:hover {
+  color: var(--color-heading);
+  background: var(--color-surface-subtle);
+}
+
+.delete-icon {
+  color: var(--color-danger);
+}
+
+.delete-icon:hover {
+  background: var(--color-error-bg);
+  color: var(--color-error-text);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  align-items: center;
+}
+
+.button-row--center {
+  justify-content: center;
+}
+
 .badge {
   display: inline-flex;
   align-items: center;
@@ -348,13 +517,20 @@ th {
 .global-status {
   position: fixed;
   top: 1.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1200;
-  min-width: min(520px, calc(100vw - 2rem));
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 2000;
+  width: fit-content;
+  min-width: min(520px, calc(100% - 2rem));
+  max-width: calc(100% - 2rem);
   display: none;
 }
 
+.global-status.show {
+  display: block;
+}
+
 .global-status .status {
   display: flex;
   align-items: center;
@@ -388,10 +564,11 @@ th {
 
 .dialog-overlay {
   position: fixed;
-  inset: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
   z-index: 1100;
   display: flex;
   align-items: center;
@@ -401,7 +578,7 @@ th {
 
 .device-dialog,
 .modal {
-  background: var(--color-surface);
+  background: var(--color-dialog);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   width: min(520px, 100%);
@@ -423,8 +600,7 @@ th {
 
 .qr-code {
   padding: 1rem;
-  background: #fff;
-  box-shadow: var(--shadow-soft);
+  background: white;
 }
 
 .link-container,
@@ -437,7 +613,7 @@ th {
   color: var(--color-text);
 }
 
-:root { --card-width: 22rem; }
+:root { --card-width: 16rem; }
 
 .record-list,
 .credential-list,
@@ -447,9 +623,10 @@ th {
   grid-auto-flow: row;
   grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
   justify-content: start;
-  gap: 1rem 1.25rem;
+  gap: 0.5rem;
   align-items: stretch;
   margin: 0 auto;
+  outline: none;
 }
 
 @media (max-width: 720px) {
@@ -461,9 +638,7 @@ th {
 .session-item {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem;
-  border: 1px solid var(--color-border);
+  padding: 0.5rem;
   border-radius: var(--radius-md);
   background: var(--color-surface);
   height: 100%;
@@ -482,17 +657,31 @@ th {
 
 .record-item.is-current,
 .credential-item.current-session,
+.session-item.is-current {
+  border-color: var(--color-accent);
+  background-color: var(--color-surface-subtle);
+}
+
 .credential-item.is-hovered,
-.session-item.is-current,
-.session-item.is-hovered { border-color: var(--color-accent); }
+.session-item.is-hovered {
+  border-color: var(--color-accent);
+  background-color: var(--color-surface-subtle);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
+  transform: translateY(-1px);
+}
 
 .credential-item.is-linked-session,
 .session-item.is-linked-credential { border-color: var(--color-accent); background-color: var(--color-surface-subtle); }
 
+.credential-item:focus,
+.session-item:focus {
+  outline: 1px solid var(-webkit-focus-ring-color);
+}
+
 .item-top {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  height: 2.5rem;
 }
 
 .item-icon {
@@ -500,9 +689,6 @@ th {
   height: 40px;
   display: grid;
   place-items: center;
-  background: var(--color-surface-subtle, transparent);
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border);
   flex-shrink: 0;
 }
 
@@ -510,18 +696,22 @@ th {
   border-radius: var(--radius-sm);
 }
 
+.icon { flex: 0 0 auto; font-size: 1.5em; width: 40px; }
+
 .item-title {
   flex: 1;
   margin: 0;
   font-size: 1rem;
   font-weight: 600;
   color: var(--color-heading);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .item-actions {
   flex-shrink: 0;
   display: flex;
-  gap: 0.5rem;
   align-items: center;
 }
 
@@ -529,55 +719,77 @@ th {
 .item-actions .badge + .badge { margin-left: 0.25rem; }
 
 .item-details {
-  margin-left: calc(40px + 1rem);
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.credential-dates {
-  display: grid;
-  grid-auto-flow: row;
-  grid-template-columns: 7rem 1fr;
-  gap: 0.35rem 0.5rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  align-items: center;
+  margin-left: 40px;
 }
 
+.credential-dates,
 .session-dates {
   display: grid;
   grid-auto-flow: row;
-  grid-template-columns: 7rem 1fr;
-  gap: 0.35rem 0.5rem;
+  grid-template-columns: 8em 1fr;
   font-size: 0.75rem;
-  color: var(--color-text-muted);
   align-items: center;
 }
 
 .date-label {
   font-weight: 500;
-  color: inherit;
+  color: var(--color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .date-value {
   color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .btn-card-delete { background: transparent; border: none; color: var(--color-danger); padding: 0.35rem 0.5rem; font-size: 1.05rem; line-height: 1; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
-.btn-card-delete:hover:not(:disabled) { background: #fee; }
+.btn-card-delete:hover:not(:disabled) { filter: brightness(0.85); }
 .btn-card-delete:disabled { filter: opacity(0.4); cursor: not-allowed; }
 
 
 .session-emoji {
   font-size: 1.2rem;
 }
+.session-group {
+  position: relative;
+}
+.session-group:focus-visible {
+  outline: 1px solid var(-webkit-focus-ring-color);
+}
+.session-group-host {
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0.5rem 0;
+}
+.session-group-icon {
+  margin-left: -1.5rem;
+}
+.session-group-host a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+.session-group:focus-visible .session-group-host,
+.session-group:focus-visible .session-group-host a {
+  color: var(--color-heading);
+}
+.btn-card-delete {
+  display: none;
+}
+.session-item:focus .btn-card-delete {
+  display: block;
+}
 
 .badge {
   padding: 0.2rem 0.5rem;
   border-radius: var(--radius-sm);
   font-size: 0.8rem;
   font-weight: 500;
+  white-space: nowrap;
 }
 
 .badge-current {
@@ -610,28 +822,15 @@ th {
 }
 
 .user-info {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: 1.1rem 1.25rem;
   display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.75rem 1.25rem;
 }
 
-.user-info h3 {
-  margin: 0;
-  grid-column: span 2;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1.15rem;
-  font-weight: 600;
-}
-
-.user-info span {
-  text-align: left;
-  color: var(--color-text);
+.user-details {
+  display: grid;
+  grid-template-columns: 7em 1fr;
+  gap: 0 0.5rem;
+  padding-left: 40px;
+  font-size: 0.75rem;
 }
 
 .toggle-link {
@@ -653,25 +852,13 @@ th {
     gap: 1.75rem;
   }
 
-  .credential-dates {
-    grid-auto-flow: row;
-    grid-template-columns: auto auto;
-  }
-
   .global-status {
     top: 1rem;
   }
 }
 
-/* Mobile portrait (touch) or very narrow screens: stack buttons */
+/* Mobile portrait (touch) or very narrow screens */
 @media (max-width: 500px) and (orientation: portrait) and (pointer: coarse), (max-width: 350px) {
-  button {
-    width: 100%;
-  }
-
-  .button-row {
-    flex-direction: column;
-  }
 }
 
 .dialog-backdrop {
@@ -681,8 +868,8 @@ th {
   width: 100vw;
   height: 100vh;
   background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
+  backdrop-filter: blur(.2rem) brightness(0.7);
+  -webkit-backdrop-filter: blur(.2rem) brightness(0.7);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -700,7 +887,7 @@ th {
   width: 100%;
   max-width: 480px;
   padding: 2rem;
-  background: var(--color-surface);
+  background: var(--color-dialog);
   border-radius: var(--radius-lg);
   box-shadow: 0 20px 60px #1e293b;
   border: 1px solid var(--color-border);
@@ -720,21 +907,51 @@ th {
   }
 }
 
-/* Auth iframe overlay styles */
-body:has(#auth-iframe) {
+.slot-machine {
+  padding: 0.875rem 1rem;
+  background: var(--color-surface-hover);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
   overflow: hidden;
 }
 
-#auth-iframe {
-  border: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9999;
-  color-scheme: auto;
-  background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
+.slot-reel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+  height: 1.8em;
+  position: relative;
+}
+
+/* Spinner utilities */
+.spinner {
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.spinner--sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.spinner--md {
+  width: 40px;
+  height: 40px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }

frontend/src/components/AccessDenied.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="message-container">
     <div class="message-content">
-      <h2>🔒 Access Denied</h2>
+      <h2>{{ icon }} {{ title }}</h2>
+      <p v-if="message" class="error-detail">{{ message }}</p>
       <div class="button-row">
         <button class="btn-secondary" @click="goBack">Back</button>
-        <button class="btn-primary" @click="$emit('reload')">Reload Page</button>
+        <button class="btn-primary" @click="reload">Reload Page</button>
       </div>
     </div>
   </div>
@@ -13,7 +14,15 @@
 <script setup>
 import { goBack } from '@/utils/helpers'
 
-defineEmits(['reload'])
+const props = defineProps({
+  title: { type: String, default: 'Access Denied' },
+  icon: { type: String, default: '🔒' },
+  message: { type: String, default: null },
+})
+
+function reload() {
+  window.location.reload()
+}
 </script>
 
 <style scoped>
@@ -32,10 +41,15 @@ defineEmits(['reload'])
 }
 
 .message-content h2 {
-  margin: 0 0 1.5rem;
+  margin: 0 0 1rem;
   color: var(--color-heading);
 }
 
+.message-content .error-detail {
+  margin: 0 0 1.5rem;
+  color: var(--color-text-muted);
+}
+
 .message-content .button-row {
   display: flex;
   gap: 0.75rem;

frontend/src/components/Breadcrumbs.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, onMounted, watch } from 'vue'
+import { getDirection, navigateButtonRow } from '@/utils/keynav'
 
 // Props:
 // entries: Array<{ label:string, href:string }>
@@ -11,17 +12,78 @@ const props = defineProps({
   homeHref: { type: String, default: '/' }
 })
 
+const navRef = ref(null)
+
 const crumbs = computed(() => {
-  const base = props.showHome ? [{ label: '🏠', href: props.homeHref }] : []
-  return [...base, ...props.entries]
+  if (props.showHome && props.entries.length > 0 && props.entries[0].href === props.homeHref) {
+    // Combine home and first entry if they have the same href
+    const combined = { label: '🏠 ' + props.entries[0].label, href: props.homeHref }
+    return [combined, ...props.entries.slice(1)]
+  } else {
+    const base = props.showHome ? [{ label: '🏠', href: props.homeHref }] : []
+    return [...base, ...props.entries]
+  }
 })
+
+// Find the index of the crumb matching current location
+const currentIndex = computed(() => {
+  const currentHref = window.location.hash || window.location.pathname
+  for (let i = crumbs.value.length - 1; i >= 0; i--) {
+    const href = crumbs.value[i].href
+    if (href === currentHref || (href && currentHref.startsWith(href))) {
+      return i
+    }
+  }
+  return crumbs.value.length - 1 // Default to last crumb
+})
+
+function handleFocusIn(event) {
+  // When the nav receives focus, focus the current page's crumb
+  if (event.target === navRef.value) {
+    const links = navRef.value.querySelectorAll('a')
+    const targetIndex = Math.min(currentIndex.value, links.length - 1)
+    if (links[targetIndex]) {
+      links[targetIndex].focus()
+    }
+  }
+}
+
+function handleKeydown(event) {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    navigateButtonRow(navRef.value, event.target, direction, { itemSelector: 'a' })
+  }
+  // Up/down are handled by parent component
+}
+
+// Expose method to focus the current crumb from parent
+function focusCurrent() {
+  const links = navRef.value?.querySelectorAll('a')
+  if (links?.length) {
+    const targetIndex = Math.min(currentIndex.value, links.length - 1)
+    links[targetIndex]?.focus()
+  }
+}
+
+defineExpose({ focusCurrent })
 </script>
 
 <template>
-  <nav class="breadcrumbs" aria-label="Breadcrumb" v-if="crumbs.length">
+  <nav
+    ref="navRef"
+    class="breadcrumbs"
+    aria-label="Breadcrumb"
+    v-if="crumbs.length > 1"
+    tabindex="0"
+    @focusin="handleFocusIn"
+    @keydown="handleKeydown"
+  >
     <ol>
       <li v-for="(c, idx) in crumbs" :key="idx">
-        <a :href="c.href">{{ c.label }}</a>
+        <a :href="c.href" tabindex="-1">{{ c.label }}</a>
         <span v-if="idx < crumbs.length - 1" class="sep"> — </span>
       </li>
     </ol>
@@ -33,6 +95,5 @@ const crumbs = computed(() => {
 .breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
 .breadcrumbs li { display: inline-flex; align-items: center; gap: .25rem; font-size: .9rem; }
 .breadcrumbs a { text-decoration: none; color: var(--color-link); padding: 0 .25rem; border-radius:4px; transition: color 0.2s ease, background 0.2s ease; }
-.breadcrumbs a:hover, .breadcrumbs a:focus-visible { text-decoration: underline; color: var(--color-link-hover); outline: none; }
 .breadcrumbs .sep { color: var(--color-text-muted); margin: 0; }
 </style>

frontend/src/components/CredentialList.vue

@@ -1,19 +1,22 @@
 <template>
-  <div class="credential-list">
+  <div class="credential-list" tabindex="0" @focusin="handleListFocus" @keydown="handleListKeydown">
     <div v-if="loading"><p>Loading credentials...</p></div>
     <div v-else-if="!credentials?.length"><p>No passkeys found.</p></div>
     <template v-else>
       <div
         v-for="credential in credentials"
-        :key="credential.credential_uuid"
+        :key="credential.credential"
         :class="['credential-item', {
           'current-session': credential.is_current_session && !hoveredCredentialUuid && !hoveredSessionCredentialUuid,
-          'is-hovered': hoveredCredentialUuid === credential.credential_uuid,
-          'is-linked-session': hoveredSessionCredentialUuid === credential.credential_uuid
+          'is-hovered': hoveredCredentialUuid === credential.credential,
+          'is-linked-session': hoveredSessionCredentialUuid === credential.credential
         }]"
-        tabindex="0"
-        @focusin="handleCredentialFocus(credential.credential_uuid)"
+        tabindex="-1"
+        @mousedown.prevent
+        @click.capture="handleCardClick"
+        @focusin="handleCredentialFocus(credential.credential)"
         @focusout="handleCredentialBlur($event)"
+        @keydown="handleItemKeydown($event, credential)"
       >
         <div class="item-top">
           <div class="item-icon">
@@ -30,15 +33,16 @@
           <h4 class="item-title">{{ getCredentialAuthName(credential) }}</h4>
           <div class="item-actions">
             <span v-if="credential.is_current_session && !hoveredCredentialUuid && !hoveredSessionCredentialUuid" class="badge badge-current">Current</span>
-            <span v-else-if="hoveredCredentialUuid === credential.credential_uuid" class="badge badge-current">Selected</span>
-            <span v-else-if="hoveredSessionCredentialUuid === credential.credential_uuid" class="badge badge-current">Linked</span>
+            <span v-else-if="hoveredCredentialUuid === credential.credential" class="badge badge-current">Selected</span>
+            <span v-else-if="hoveredSessionCredentialUuid === credential.credential" class="badge badge-current">Linked</span>
             <button
               v-if="allowDelete"
               @click="$emit('delete', credential)"
               class="btn-card-delete"
               :disabled="credential.is_current_session"
-              :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey'"
-            >🗑️</button>
+              :title="credential.is_current_session ? 'Cannot delete current session credential' : 'Delete passkey and terminate any linked sessions.'"
+              tabindex="-1"
+            >❌</button>
           </div>
         </div>
         <div class="item-details">
@@ -57,8 +61,8 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
 import { formatDate } from '@/utils/helpers'
+import { navigateGrid, handleEscape, handleDeleteKey, getDirection } from '@/utils/keynav'
 
 const props = defineProps({
   credentials: { type: Array, default: () => [] },
@@ -67,9 +71,10 @@ const props = defineProps({
   allowDelete: { type: Boolean, default: false },
   hoveredCredentialUuid: { type: String, default: null },
   hoveredSessionCredentialUuid: { type: String, default: null },
+  navigationDisabled: { type: Boolean, default: false },
 })
 
-const emit = defineEmits(['delete', 'credentialHover'])
+const emit = defineEmits(['delete', 'credentialHover', 'navigate-out'])
 
 const handleCredentialFocus = (uuid) => {
   emit('credentialHover', uuid)
@@ -82,6 +87,58 @@ const handleCredentialBlur = (event) => {
   }
 }
 
+const handleCardClick = (event) => {
+  if (!event.currentTarget.matches(':focus')) {
+    event.currentTarget.focus()
+    event.stopPropagation()
+  }
+}
+
+const handleDelete = (event, credential) => {
+  handleDeleteKey(event, () => {
+    if (props.allowDelete && !credential.is_current_session) emit('delete', credential)
+  })
+}
+
+const handleListFocus = (event) => {
+  if (props.navigationDisabled) return
+
+  const list = event.currentTarget
+  // If focus came to the list container itself (not a child), focus first item
+  if (event.target === list) {
+    const firstItem = list.querySelector('.credential-item')
+    if (firstItem) {
+      firstItem.focus()
+    }
+  }
+}
+
+const handleListKeydown = (event) => {
+  if (props.navigationDisabled) return
+
+  // Escape emits navigate-out
+  handleEscape(event, (dir) => emit('navigate-out', dir))
+}
+
+const handleItemKeydown = (event, credential) => {
+  // Handle delete (always allowed even with modal)
+  handleDelete(event, credential)
+  if (event.defaultPrevented) return
+
+  if (props.navigationDisabled) return
+
+  // Arrow key navigation
+  const direction = getDirection(event)
+  if (direction) {
+    event.preventDefault()
+    const list = event.currentTarget.closest('.credential-list')
+    const result = navigateGrid(list, event.currentTarget, direction, { itemSelector: '.credential-item' })
+    if (result === 'boundary') {
+      emit('navigate-out', direction)
+    }
+  }
+}
+
 const getCredentialAuthName = (credential) => {
   const info = props.aaguidInfo?.[credential.aaguid]
   return info ? info.name : 'Unknown Authenticator'
@@ -91,7 +148,16 @@ const getCredentialAuthIcon = (credential) => {
   const info = props.aaguidInfo?.[credential.aaguid]
   if (!info) return null
   const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-  const iconKey = isDarkMode ? 'icon_dark' : 'icon_light'
-  return info[iconKey] || null
+  // Fall back to icon if icon_dark is not available
+  return (isDarkMode && info.icon_dark) || info.icon || null
 }
 </script>
+
+<style>
+.btn-card-delete {
+  display: none;
+}
+.credential-item:focus .btn-card-delete {
+  display: block;
+}
+</style>

frontend/src/components/DeviceLinkView.vue

@@ -1,67 +0,0 @@
-<template>
-  <section class="view-root view-root--narrow view-device-link">
-    <header class="view-header">
-      <h1>📱 Add Another Device</h1>
-      <p class="view-lede">Generate a one-time link to set up passkeys on a new device.</p>
-    </header>
-    <div class="button-row" style="margin-top:1rem;">
-      <button @click="showModal = true" class="btn-primary">Generate Registration Link</button>
-      <button @click="authStore.currentView = 'profile'" class="btn-secondary">Back to Profile</button>
-    </div>
-    <RegistrationLinkModal
-      v-if="showModal"
-      endpoint="/auth/api/user/create-link"
-      :user-name="userName"
-      @close="showModal = false"
-      @copied="onCopied"
-    />
-  </section>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { useAuthStore } from '@/stores/auth'
-import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
-
-const authStore = useAuthStore()
-const userName = ref(null)
-const showModal = ref(false)
-
-const onCopied = () => {
-  authStore.showMessage('Link copied to clipboard!', 'success', 2500)
-}
-
-onMounted(async () => {
-  // Extract optional admin-provided query parameters (?user=Name&emoji=😀)
-  const params = new URLSearchParams(location.search)
-  const qUser = params.get('user')
-  if (qUser) userName.value = qUser.trim()
-})
-
-</script>
-
-<style scoped>
-.view-lede {
-  margin: 0;
-  color: var(--color-text-muted);
-}
-
-.qr-link {
-  text-decoration: none;
-  color: var(--color-text);
-}
-
-.button-row {
-  justify-content: flex-start;
-}
-
-@media (max-width: 720px) {
-  .button-row {
-    flex-direction: column;
-  }
-
-  .button-row button {
-    width: 100%;
-  }
-}
-</style>

frontend/src/components/HostProfileView.vue

@@ -1,18 +1,21 @@
 <template>
-  <section class="view-root host-view" data-view="host-profile">
+  <section class="view-root view-root--wide host-view" data-view="host-profile">
     <header class="view-header">
       <h1>{{ headingTitle }}</h1>
       <p class="view-lede">{{ subheading }}</p>
     </header>
 
-    <section class="section-block">
+    <section class="section-block" ref="userInfoSection">
       <div class="section-body">
         <UserBasicInfo
-          v-if="user"
-          :name="user.user_name"
-          :visits="user.visits || 0"
-          :created-at="user.created_at"
-          :last-seen="user.last_seen"
+          v-if="ctx"
+          :name="ctx.user.display_name"
+          :avatar-url="authStore.userInfo.user.avatar_url"
+          :visits="authStore.userInfo.user.visits"
+          :created-at="authStore.userInfo.user.created_at"
+          :last-seen="authStore.userInfo.user.last_seen"
+          :email="ctx.user.email"
+          :telephone="ctx.user.telephone"
           :org-display-name="orgDisplayName"
           :role-name="roleDisplayName"
           :can-edit="false"
@@ -25,7 +28,7 @@
 
     <section class="section-block">
       <div class="section-body host-actions">
-        <div class="button-row">
+        <div class="button-row" ref="buttonRow" @keydown="handleButtonRowKeydown">
           <button
             type="button"
             class="btn-secondary"
@@ -58,10 +61,11 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import { useAuthStore } from '@/stores/auth'
 import { goBack } from '@/utils/helpers'
+import { getDirection, navigateButtonRow } from '@/utils/keynav'
 
 defineProps({
   initializing: {
@@ -73,9 +77,13 @@ defineProps({
 const authStore = useAuthStore()
 const currentHost = window.location.host
 
-const user = computed(() => authStore.userInfo?.user || null)
-const orgDisplayName = computed(() => authStore.userInfo?.org?.display_name || '')
-const roleDisplayName = computed(() => authStore.userInfo?.role?.display_name || '')
+// Template refs for navigation
+const userInfoSection = ref(null)
+const buttonRow = ref(null)
+
+const ctx = computed(() => authStore.userInfo || null)
+const orgDisplayName = computed(() => ctx.value?.org?.display_name ?? '')
+const roleDisplayName = computed(() => ctx.value?.role?.display_name ?? '')
 
 const headingTitle = computed(() => {
   const service = authStore.settings?.rp_name
@@ -105,17 +113,18 @@ const goToAuthSite = () => {
 const logout = async () => {
   await authStore.logout()
 }
-</script>
 
-<style scoped>
-.host-view { padding: 3rem 1.5rem 4rem; }
-.host-actions { display: flex; flex-direction: column; gap: 0.75rem; }
-.host-actions .button-row { gap: 0.75rem; flex-wrap: wrap; }
-.host-actions .button-row button { flex: 0 0 auto; }
-.note { margin: 0; color: var(--color-text-muted); }
-.empty-state { margin: 0; color: var(--color-text-muted); }
-@media (max-width: 600px) {
-  .host-actions .button-row { flex-direction: column; }
-  .host-actions .button-row button { width: 100%; }
+// Keyboard navigation for button row
+const handleButtonRowKeydown = (event) => {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(buttonRow.value, event.target, direction, { itemSelector: 'button' })
+  }
+  // Up does nothing (no elements above to navigate to)
+  // Down does nothing (no elements below to navigate to)
 }
-</style>
+</script>

frontend/src/components/LoadingView.vue

@@ -27,17 +27,12 @@ defineProps({
 .loading-spinner {
   width: 40px;
   height: 40px;
-  border: 4px solid var(--color-border);
-  border-top: 4px solid var(--color-primary);
+  border: 3px solid var(--color-border);
+  border-top-color: var(--color-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
 
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
 .loading-container p {
   color: var(--color-text-muted);
   margin: 0;

frontend/src/components/Modal.vue

@@ -1,33 +1,158 @@
 <template>
-  <div class="modal-overlay" @keydown.esc="$emit('close')" tabindex="-1">
-    <div class="modal" role="dialog" aria-modal="true">
+  <div class="dialog-overlay" @click="$emit('close')">
+    <div ref="dialog" :class="['modal-panel', panelClass]" @keydown="handleDialogKeydown" @click.stop>
       <slot />
     </div>
   </div>
 </template>
 
 <script setup>
-defineEmits(['close'])
+import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { navigateButtonRow, getDirection, focusPreferred, focusDialogDefault } from '@/utils/keynav'
+import { holdGlobalBackdrop, releaseGlobalBackdrop } from 'paskia'
+
+const props = defineProps({
+  // Optional: provide a fallback element to focus if original element is gone
+  focusFallback: { type: [HTMLElement, Object], default: null },
+  // Optional: index to help find next sibling when item is deleted
+  focusIndex: { type: Number, default: -1 },
+  // Optional: selector for finding siblings when restoring focus
+  focusSiblingSelector: { type: String, default: '' },
+  // Optional: extra class name(s) for the modal panel
+  panelClass: { type: [String, Array, Object], default: '' }
+})
+
+const emit = defineEmits(['close'])
+
+// Dialog element reference
+const dialog = ref(null)
+
+// Store the element that had focus before modal opened
+const previouslyFocusedElement = ref(null)
+
+/**
+ * Try to restore focus to the original element, or find a suitable fallback.
+ * Called on unmount to restore focus when modal closes.
+ */
+const restoreFocus = () => {
+  const prev = previouslyFocusedElement.value
+  if (!prev) return
+
+  // Check if the original element still exists in DOM and is focusable
+  if (document.body.contains(prev) && !prev.disabled) {
+    prev.focus()
+    return
+  }
+
+  // Original element is gone (deleted) - try to find a sibling
+  if (props.focusSiblingSelector && props.focusIndex >= 0) {
+    // Find container that has items matching the selector
+    const containers = [
+      props.focusFallback?.$el || props.focusFallback,
+      prev.closest('[data-nav-group]'),
+      prev.parentElement?.closest('section'),
+      document.querySelector('.view-root')
+    ].filter(Boolean)
+
+    for (const container of containers) {
+      if (!container) continue
+      const siblings = container.querySelectorAll(props.focusSiblingSelector)
+      if (siblings.length > 0) {
+        // Try to focus the next item, or the previous if we were at the end
+        const targetIndex = Math.min(props.focusIndex, siblings.length - 1)
+        const target = siblings[targetIndex]
+        if (target && !target.disabled) {
+          target.focus()
+          return
+        }
+      }
+    }
+  }
+
+  // Fall back to the provided fallback element
+  const fallback = props.focusFallback?.$el || props.focusFallback
+  if (fallback && document.body.contains(fallback)) {
+    const focusable = fallback.querySelector?.('button:not([disabled]), a, [tabindex="0"]') || fallback
+    if (focusable?.focus) {
+      focusable.focus()
+      return
+    }
+  }
+}
+
+const handleDialogKeydown = (event) => {
+  // ESC to close (previously handled by <dialog> natively)
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('close')
+    return
+  }
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  // Check if we're in a modal-actions row
+  const target = event.target
+  const actionsRow = target.closest('.modal-actions')
+
+  if (actionsRow && (direction === 'left' || direction === 'right')) {
+    event.preventDefault()
+    navigateButtonRow(actionsRow, target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up' && actionsRow) {
+    // From actions, try to go back to last input or focusable element in form
+    event.preventDefault()
+    const form = actionsRow.closest('form') || actionsRow.closest('.modal-form')
+    const inputs = form?.querySelectorAll('input, textarea, select, button:not(.modal-actions button)')
+    if (inputs && inputs.length > 0) {
+      inputs[inputs.length - 1].focus()
+    }
+  } else if (direction === 'down' && !actionsRow) {
+    // From an input, try to go to modal-actions
+    const form = target.closest('form') || target.closest('.modal-form')
+    if (form) {
+      event.preventDefault()
+      const actions = form.querySelector('.modal-actions')
+      if (actions) {
+        focusPreferred(actions, { primarySelector: '.btn-primary', itemSelector: 'button' })
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  // Save currently focused element before modal takes focus
+  previouslyFocusedElement.value = document.activeElement
+
+  holdGlobalBackdrop()
+
+  // Focus the most appropriate element
+  nextTick(() => {
+    if (dialog.value) {
+      // Autofocus the most appropriate element:
+      // - For form dialogs (rename, edit): focus first input and select text
+      // - For other dialogs: focus primary button (or fallback)
+      // Mark primary button for keyboard navigation
+      const primaryBtn = dialog.value.querySelector('.modal-actions .btn-primary')
+      if (primaryBtn) {
+        primaryBtn.setAttribute('data-nav-primary', '')
+      }
+      // Focus the most appropriate element
+      focusDialogDefault(dialog.value)
+    }
+  })
+})
+
+onUnmounted(() => {
+  releaseGlobalBackdrop()
+  // Restore focus when modal closes
+  restoreFocus()
+})
 </script>
 
 <style scoped>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal {
-  background: var(--color-surface);
+.modal-panel {
+  background: var(--color-dialog);
+  color: var(--color-text);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-xl);
@@ -38,53 +163,34 @@ defineEmits(['close'])
   overflow-y: auto;
 }
 
-.modal :deep(.modal-title),
-.modal :deep(h3) {
+.modal-panel :deep(.modal-title),
+.modal-panel :deep(h3) {
   margin: 0 0 var(--space-md);
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--color-heading);
 }
 
-.modal :deep(form) {
+.modal-panel :deep(form) {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
 }
 
-.modal :deep(.modal-form) {
+.modal-panel :deep(.modal-form) {
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
 }
 
-.modal :deep(.modal-form label) {
+.modal-panel :deep(.modal-form label) {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
   font-weight: 500;
 }
 
-.modal :deep(.modal-form input),
-.modal :deep(.modal-form textarea) {
-  padding: var(--space-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
-  font-size: 1rem;
-  line-height: 1.4;
-  min-height: 2.5rem;
-}
-
-.modal :deep(.modal-form input:focus),
-.modal :deep(.modal-form textarea:focus) {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px #c7d2fe;
-}
-
-.modal :deep(.modal-actions) {
+.modal-panel :deep(.modal-actions) {
   display: flex;
   justify-content: flex-end;
   gap: var(--space-sm);

frontend/src/components/NameEditForm.vue

@@ -12,7 +12,7 @@
       />
     </label>
     <div v-if="error" class="error small">{{ error }}</div>
-    <div class="modal-actions">
+    <div class="modal-actions" @keydown="handleActionsKeydown">
       <button
         type="button"
         class="btn-secondary"
@@ -25,6 +25,7 @@
         type="submit"
         class="btn-primary"
         :disabled="busy"
+        data-nav-primary
       >
         {{ submitText }}
       </button>
@@ -33,7 +34,8 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
+import { getDirection } from '@/utils/keynav'
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
@@ -60,16 +62,15 @@ const localValue = computed({
 
 const resolvedInputId = computed(() => props.inputId || generatedId)
 
-onMounted(() => {
-  if (!props.autoFocus) return
-  nextTick(() => {
-    if (props.autoSelect) {
-      inputRef.value?.select()
-    } else {
-      inputRef.value?.focus()
-    }
-  })
-})
+const handleActionsKeydown = (event) => {
+  const direction = getDirection(event)
+  if (direction === 'up') {
+    event.preventDefault()
+    inputRef.value?.focus()
+    return
+  }
+  // Left/right navigation is handled globally by keynav
+}
 
 function handleCancel() {
   emit('cancel')
@@ -83,12 +84,4 @@ function handleCancel() {
   flex-direction: column;
   gap: var(--space-md);
 }
-
-.error {
-  color: var(--color-danger-text);
-}
-
-.small {
-  font-size: 0.9rem;
-}
 </style>

frontend/src/components/ProfilePicture.vue

@@ -0,0 +1,126 @@
+<template>
+  <component
+    :is="rootTag"
+    v-bind="rootAttrs"
+    class="profile-picture"
+    :class="{ 'profile-picture-btn': clickable }"
+    :style="pictureStyle"
+    @click="handleClick"
+  >
+    <img
+      v-if="showPicture"
+      :key="`${src || 'none'}:${renderVersion}`"
+      :src="src"
+      alt=""
+      class="profile-picture-image"
+      @error="handleError"
+    />
+    <img
+      v-else
+      :src="profileGeneric"
+      alt=""
+      class="profile-picture-fallback"
+    />
+  </component>
+</template>
+
+<script setup>
+import profileGeneric from '@/assets/profile-generic.svg'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  src: { type: String, default: null },
+  clickable: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  title: { type: String, default: '' },
+  renderVersion: { type: [Number, String], default: 0 },
+  width: { type: String, default: '3rem' },
+  height: { type: String, default: '3rem' },
+  radius: { type: String, default: '0.9rem' },
+  fit: { type: String, default: 'cover' },
+  filter: { type: String, default: 'none' },
+  fallbackSize: { type: String, default: '2em' }
+})
+
+const emit = defineEmits(['click'])
+const pictureAvailable = ref(true)
+
+const rootTag = computed(() => (props.clickable ? 'button' : 'div'))
+const showPicture = computed(() => !!props.src && pictureAvailable.value)
+const pictureStyle = computed(() => ({
+  '--profile-picture-width': props.width,
+  '--profile-picture-height': props.height,
+  '--profile-picture-radius': props.radius,
+  '--profile-picture-fit': props.fit,
+  '--profile-picture-filter': props.filter,
+  '--profile-picture-fallback-size': props.fallbackSize
+}))
+const rootAttrs = computed(() => {
+  if (!props.clickable) return { title: props.title || undefined }
+  return {
+    type: 'button',
+    disabled: props.loading,
+    title: props.title || undefined
+  }
+})
+
+watch(() => props.src, () => {
+  pictureAvailable.value = true
+})
+
+const handleError = () => {
+  pictureAvailable.value = false
+}
+
+const handleClick = () => {
+  if (!props.clickable || props.loading) return
+  emit('click')
+}
+</script>
+
+<style scoped>
+.profile-picture {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--profile-picture-width);
+  height: var(--profile-picture-height);
+  font-size: var(--profile-picture-fallback-size);
+  line-height: 1;
+  overflow: hidden;
+  border-radius: var(--profile-picture-radius);
+  background: transparent;
+  flex-shrink: 0;
+}
+
+.profile-picture-btn {
+  padding: 0;
+  border: 0;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  cursor: pointer;
+}
+
+.profile-picture-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: inset 0 0 0 1px var(--color-accent);
+}
+
+.profile-picture-btn:disabled {
+  cursor: progress;
+}
+
+.profile-picture-image {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--profile-picture-fit);
+  display: block;
+  filter: var(--profile-picture-filter);
+}
+
+.profile-picture-fallback {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+</style>

frontend/src/components/ProfilePictureEditorModal.vue

@@ -0,0 +1,489 @@
+<template>
+  <Modal panel-class="modal-panel--avatar" @close="closeEditor">
+    <h3>{{ title }}</h3>
+    <input
+      ref="pictureInput"
+      type="file"
+      accept="image/*"
+      class="profile-picture-editor-input"
+      :disabled="saving"
+      @change="handlePictureSelected"
+    />
+    <div ref="picturePreview" class="profile-picture-editor-preview" :style="previewStyle">
+      <img
+        v-if="editorImageUrl && displayMetrics"
+        :src="editorImageUrl"
+        alt=""
+        class="profile-picture-editor-image"
+        :style="editorImageStyle"
+      />
+      <img
+        v-if="editorImageUrl && displayMetrics"
+        :src="editorImageUrl"
+        alt=""
+        class="profile-picture-editor-image profile-picture-editor-image--overlay"
+        :style="editorOverlayStyle"
+      />
+      <div
+        v-if="editorImageUrl && displayMetrics"
+        class="profile-picture-editor-crop"
+        :style="cropBoxStyle"
+        @pointerdown="startMove"
+      >
+        <div class="profile-picture-editor-guides" aria-hidden="true">
+          <div class="profile-picture-editor-guide profile-picture-editor-guide--circle"></div>
+          <div class="profile-picture-editor-guide profile-picture-editor-guide--eyes"></div>
+          <div class="profile-picture-editor-guide profile-picture-editor-guide--cheek-left"></div>
+          <div class="profile-picture-editor-guide profile-picture-editor-guide--cheek-right"></div>
+        </div>
+        <button
+          type="button"
+          class="profile-picture-editor-handle profile-picture-editor-handle--nw"
+          @pointerdown.stop="startResize($event, 'nw')"
+        ></button>
+        <button
+          type="button"
+          class="profile-picture-editor-handle profile-picture-editor-handle--ne"
+          @pointerdown.stop="startResize($event, 'ne')"
+        ></button>
+        <button
+          type="button"
+          class="profile-picture-editor-handle profile-picture-editor-handle--sw"
+          @pointerdown.stop="startResize($event, 'sw')"
+        ></button>
+        <button
+          type="button"
+          class="profile-picture-editor-handle profile-picture-editor-handle--se"
+          @pointerdown.stop="startResize($event, 'se')"
+        ></button>
+      </div>
+      <ProfilePicture
+        v-else
+        class="profile-picture-editor-trigger"
+        :src="pictureUrl"
+        :render-version="renderVersion"
+        clickable
+        :loading="saving"
+        title="Choose profile picture"
+        width="100%"
+        height="100%"
+        radius="0"
+        fit="contain"
+        fallback-size="5rem"
+        @click="triggerPictureSelect"
+      />
+    </div>
+    <div v-if="errorMessage" class="error small">{{ errorMessage }}</div>
+    <div class="modal-actions">
+      <button type="button" class="btn-secondary" :disabled="saving" @click="closeEditor">Back</button>
+      <button
+        v-if="!editorImageUrl && pictureUrl"
+        type="button"
+        class="btn-danger"
+        :disabled="saving"
+        @click="removePicture"
+      >Delete</button>
+      <button
+        v-if="editorImageUrl"
+        type="button"
+        class="btn-primary"
+        :disabled="saving"
+        @click="savePicture"
+      >Save</button>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { apiJson } from 'paskia'
+import { useAuthStore } from '@/stores/auth'
+import Modal from '@/components/Modal.vue'
+import ProfilePicture from '@/components/ProfilePicture.vue'
+
+const AVATAR_UPLOAD_SIZE = 720
+const MIN_CROP_SIZE = 36
+
+const props = defineProps({
+  endpoint: { type: String, required: true },
+  pictureUrl: { type: String, default: null },
+  renderVersion: { type: [Number, String], default: 0 },
+  title: { type: String, default: 'Profile Picture' }
+})
+
+const emit = defineEmits(['close', 'updated'])
+const authStore = useAuthStore()
+
+const pictureInput = ref(null)
+const picturePreview = ref(null)
+const editorImage = ref(null)
+const editorImageUrl = ref('')
+const previewObjectUrl = ref(null)
+const saving = ref(false)
+const errorMessage = ref('')
+const cropRect = reactive({ x: 0, y: 0, size: 0 })
+const previewRect = reactive({ width: 0, height: 0 })
+const viewportSize = reactive({ width: 0, height: 0 })
+let dragState = null
+let previewObserver = null
+
+onMounted(async () => {
+  viewportSize.width = window.innerWidth
+  viewportSize.height = window.innerHeight
+  window.addEventListener('pointermove', handlePointerMove)
+  window.addEventListener('pointerup', endPointerInteraction)
+  window.addEventListener('resize', syncPreviewRect)
+  await nextTick()
+  syncPreviewRect()
+  if (picturePreview.value && typeof ResizeObserver !== 'undefined') {
+    previewObserver = new ResizeObserver(() => syncPreviewRect())
+    previewObserver.observe(picturePreview.value)
+  }
+})
+
+onUnmounted(() => {
+  window.removeEventListener('pointermove', handlePointerMove)
+  window.removeEventListener('pointerup', endPointerInteraction)
+  window.removeEventListener('resize', syncPreviewRect)
+  previewObserver?.disconnect()
+  clearPreviewObjectUrl()
+})
+
+watch(editorImage, async (image) => {
+  if (!image) return
+  await nextTick()
+  syncPreviewRect()
+  initializeCrop()
+})
+
+const clearPreviewObjectUrl = () => {
+  if (!previewObjectUrl.value) return
+  URL.revokeObjectURL(previewObjectUrl.value)
+  previewObjectUrl.value = null
+}
+
+const resetEditor = () => {
+  clearPreviewObjectUrl()
+  editorImage.value = null
+  editorImageUrl.value = ''
+  cropRect.x = 0
+  cropRect.y = 0
+  cropRect.size = 0
+  errorMessage.value = ''
+  if (pictureInput.value) pictureInput.value.value = ''
+}
+
+const syncPreviewRect = () => {
+  viewportSize.width = window.innerWidth
+  viewportSize.height = window.innerHeight
+  const element = picturePreview.value
+  if (!element) return
+  previewRect.width = element.clientWidth
+  previewRect.height = element.clientHeight
+}
+
+const previewStyle = computed(() => {
+  const image = editorImage.value
+  if (!image) {
+    const size = Math.min(viewportSize.width * 0.72, viewportSize.height * 0.42, 352)
+    return {
+      width: `${Math.max(160, Math.round(size))}px`,
+      height: `${Math.max(160, Math.round(size))}px`
+    }
+  }
+
+  const maxWidth = Math.min(viewportSize.width * 0.88, 928)
+  const maxHeight = Math.min(viewportSize.height * 0.62, 620)
+  const scale = Math.min(maxWidth / image.naturalWidth, maxHeight / image.naturalHeight)
+
+  return {
+    width: `${Math.max(1, Math.round(image.naturalWidth * scale))}px`,
+    height: `${Math.max(1, Math.round(image.naturalHeight * scale))}px`
+  }
+})
+
+const displayMetrics = computed(() => {
+  const image = editorImage.value
+  if (!image || !previewRect.width || !previewRect.height) return null
+  const scale = Math.min(previewRect.width / image.naturalWidth, previewRect.height / image.naturalHeight)
+  const width = image.naturalWidth * scale
+  const height = image.naturalHeight * scale
+  return {
+    x: (previewRect.width - width) / 2,
+    y: (previewRect.height - height) / 2,
+    width,
+    height
+  }
+})
+
+const editorImageStyle = computed(() => {
+  const metrics = displayMetrics.value
+  if (!metrics) return null
+  return {
+    width: `${metrics.width}px`,
+    height: `${metrics.height}px`,
+    left: `${metrics.x}px`,
+    top: `${metrics.y}px`
+  }
+})
+
+const editorOverlayStyle = computed(() => {
+  const metrics = displayMetrics.value
+  if (!metrics || !cropRect.size) return editorImageStyle.value
+
+  const left = cropRect.x
+  const top = cropRect.y
+  const right = cropRect.x + cropRect.size
+  const bottom = cropRect.y + cropRect.size
+
+  return {
+    ...editorImageStyle.value,
+    clipPath: `polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, ${left}px ${top}px, ${left}px ${bottom}px, ${right}px ${bottom}px, ${right}px ${top}px, ${left}px ${top}px)`
+  }
+})
+
+const cropBoxStyle = computed(() => {
+  const metrics = displayMetrics.value
+  if (!metrics || !cropRect.size) return null
+  return {
+    left: `${metrics.x + cropRect.x}px`,
+    top: `${metrics.y + cropRect.y}px`,
+    width: `${cropRect.size}px`,
+    height: `${cropRect.size}px`
+  }
+})
+
+const initializeCrop = () => {
+  const metrics = displayMetrics.value
+  if (!metrics) return
+  const size = Math.min(metrics.width, metrics.height)
+  cropRect.size = size
+  cropRect.x = (metrics.width - size) / 2
+  cropRect.y = (metrics.height - size) / 2
+}
+
+const triggerPictureSelect = () => {
+  pictureInput.value?.click()
+}
+
+const handlePictureSelected = async (event) => {
+  const nextFile = event.target.files?.[0] || null
+  resetEditor()
+  if (!nextFile) return
+
+  previewObjectUrl.value = URL.createObjectURL(nextFile)
+  editorImageUrl.value = previewObjectUrl.value
+  const image = new Image()
+  image.decoding = 'async'
+  image.src = editorImageUrl.value
+  try {
+    await image.decode()
+    editorImage.value = image
+  } catch {
+    errorMessage.value = 'Failed to load image'
+    resetEditor()
+  }
+}
+
+const startMove = (event) => {
+  if (!displayMetrics.value || saving.value) return
+  event.preventDefault()
+  dragState = {
+    mode: 'move',
+    startX: event.clientX,
+    startY: event.clientY,
+    initialX: cropRect.x,
+    initialY: cropRect.y,
+    initialSize: cropRect.size
+  }
+}
+
+const startResize = (event, handle) => {
+  if (!displayMetrics.value || saving.value) return
+  event.preventDefault()
+  dragState = {
+    mode: 'resize',
+    handle,
+    startX: event.clientX,
+    startY: event.clientY,
+    initialX: cropRect.x,
+    initialY: cropRect.y,
+    initialSize: cropRect.size
+  }
+}
+
+const handlePointerMove = (event) => {
+  if (!dragState) return
+  const metrics = displayMetrics.value
+  if (!metrics) return
+
+  const dx = event.clientX - dragState.startX
+  const dy = event.clientY - dragState.startY
+
+  if (dragState.mode === 'move') {
+    cropRect.x = Math.max(0, Math.min(metrics.width - dragState.initialSize, dragState.initialX + dx))
+    cropRect.y = Math.max(0, Math.min(metrics.height - dragState.initialSize, dragState.initialY + dy))
+    return
+  }
+
+  const directionMap = {
+    nw: { deltaX: -1, deltaY: -1 },
+    ne: { deltaX: 1, deltaY: -1 },
+    sw: { deltaX: -1, deltaY: 1 },
+    se: { deltaX: 1, deltaY: 1 }
+  }
+  const direction = directionMap[dragState.handle]
+  if (!direction) return
+
+  const delta = Math.max(dx * direction.deltaX, dy * direction.deltaY)
+  const nextSize = Math.max(
+    MIN_CROP_SIZE,
+    Math.min(getResizeLimit(metrics, dragState), dragState.initialSize + delta)
+  )
+
+  applyResize(dragState, nextSize)
+}
+
+const endPointerInteraction = () => {
+  dragState = null
+}
+
+const getResizeLimit = (metrics, state) => {
+  const { initialX, initialY, initialSize, handle } = state
+
+  if (handle === 'nw') return Math.min(initialX + initialSize, initialY + initialSize)
+  if (handle === 'ne') return Math.min(metrics.width - initialX, initialY + initialSize)
+  if (handle === 'sw') return Math.min(initialX + initialSize, metrics.height - initialY)
+  return Math.min(metrics.width - initialX, metrics.height - initialY)
+}
+
+const applyResize = (state, size) => {
+  const { initialX, initialY, initialSize, handle } = state
+
+  if (handle === 'nw') {
+    cropRect.x = initialX + initialSize - size
+    cropRect.y = initialY + initialSize - size
+    cropRect.size = size
+    return
+  }
+
+  if (handle === 'ne') {
+    cropRect.x = initialX
+    cropRect.y = initialY + initialSize - size
+    cropRect.size = size
+    return
+  }
+
+  if (handle === 'sw') {
+    cropRect.x = initialX + initialSize - size
+    cropRect.y = initialY
+    cropRect.size = size
+    return
+  }
+
+  cropRect.x = initialX
+  cropRect.y = initialY
+  cropRect.size = size
+}
+
+const renderPictureBlob = async () => {
+  const image = editorImage.value
+  if (!image) throw new Error('No image selected')
+  const metrics = displayMetrics.value
+  if (!metrics || !cropRect.size) throw new Error('Crop selection unavailable')
+
+  const canvas = document.createElement('canvas')
+  canvas.width = AVATAR_UPLOAD_SIZE
+  canvas.height = AVATAR_UPLOAD_SIZE
+  const context = canvas.getContext('2d')
+  if (!context) throw new Error('Canvas unavailable')
+
+  const sourceScale = image.naturalWidth / metrics.width
+  const sourceX = cropRect.x * sourceScale
+  const sourceY = cropRect.y * sourceScale
+  const sourceSize = cropRect.size * sourceScale
+  context.drawImage(image, sourceX, sourceY, sourceSize, sourceSize, 0, 0, AVATAR_UPLOAD_SIZE, AVATAR_UPLOAD_SIZE)
+
+  return await new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new Error('Failed to export cropped picture'))
+        return
+      }
+      resolve(blob)
+    }, 'image/webp', 0.9)
+  })
+}
+
+const reloadPictureFromCache = async () => {
+  const response = await fetch(props.endpoint, {
+    method: 'GET',
+    credentials: 'same-origin',
+    cache: 'reload'
+  })
+  if (!response.ok) throw new Error('Failed to refresh profile picture')
+}
+
+const savePicture = async () => {
+  try {
+    saving.value = true
+    errorMessage.value = ''
+    const blob = await renderPictureBlob()
+    const formData = new FormData()
+    formData.append('file', blob, 'profile.webp')
+    await apiJson(props.endpoint, { method: 'PUT', body: formData })
+    await reloadPictureFromCache()
+    authStore.showMessage('Profile picture updated.', 'success', 3000)
+    emit('updated')
+    closeEditor()
+  } catch (error) {
+    errorMessage.value = error.message || 'Failed to update profile picture'
+  } finally {
+    saving.value = false
+  }
+}
+
+const removePicture = async () => {
+  try {
+    saving.value = true
+    errorMessage.value = ''
+    await apiJson(props.endpoint, { method: 'DELETE' })
+    authStore.showMessage('Profile picture removed.', 'success', 3000)
+    emit('updated')
+    closeEditor()
+  } catch (error) {
+    errorMessage.value = error.message || 'Failed to remove profile picture'
+  } finally {
+    saving.value = false
+  }
+}
+
+const closeEditor = () => {
+  resetEditor()
+  emit('close')
+}
+</script>
+
+<style scoped>
+.profile-picture-editor-input { display: none; }
+.profile-picture-editor-preview { position: relative; display: flex; justify-content: center; align-items: center; width: auto; max-width: min(58rem, 88vw); min-height: 0; margin: 0 auto; overflow: visible; }
+.profile-picture-editor-trigger { min-width: 0; }
+.profile-picture-editor-image { position: absolute; user-select: none; pointer-events: none; object-fit: contain; }
+.profile-picture-editor-image--overlay { filter: grayscale(0.45) saturate(0.7) brightness(0.68); }
+.profile-picture-editor-crop { position: absolute; border: 2px solid white; cursor: move; touch-action: none; }
+.profile-picture-editor-guides { position: absolute; inset: 0; pointer-events: none; }
+.profile-picture-editor-guide { position: absolute; border-color: rgba(255, 255, 255, 0.52); }
+.profile-picture-editor-guide--circle { inset: 0; border: 1.5px solid rgba(255, 255, 255, 0.62); border-radius: 999px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
+.profile-picture-editor-guide--eyes { left: 18%; right: 18%; top: 38%; border-top: 1.5px solid rgba(255, 255, 255, 0.56); }
+.profile-picture-editor-guide--cheek-left { top: 24%; bottom: 18%; left: 24%; border-left: 1.5px solid rgba(255, 255, 255, 0.48); }
+.profile-picture-editor-guide--cheek-right { top: 24%; bottom: 18%; right: 24%; border-right: 1.5px solid rgba(255, 255, 255, 0.48); }
+.profile-picture-editor-handle { position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 999px; border: 2px solid white; background: var(--color-accent); padding: 0; }
+.profile-picture-editor-handle--nw { left: -0.55rem; top: -0.55rem; cursor: nwse-resize; }
+.profile-picture-editor-handle--ne { right: -0.55rem; top: -0.55rem; cursor: nesw-resize; }
+.profile-picture-editor-handle--sw { left: -0.55rem; bottom: -0.55rem; cursor: nesw-resize; }
+.profile-picture-editor-handle--se { right: -0.55rem; bottom: -0.55rem; cursor: nwse-resize; }
+:deep(.modal-panel--avatar) { width: fit-content; max-width: min(58rem, 94vw); }
+@media (max-width: 720px) {
+  .profile-picture-editor-preview { max-width: 100%; }
+}
+</style>

frontend/src/components/ProfileView.vue

@@ -1,104 +1,154 @@
 <template>
-  <section class="view-root" data-view="profile">
-    <header class="view-header">
-      <h1>User Profile</h1>
-      <Breadcrumbs :entries="breadcrumbEntries" />
-      <p class="view-lede">Account dashboard for managing credentials and authenticating with other devices.</p>
-    </header>
+  <section class="view-root view-root--profile" data-view="profile">
+    <div class="view-header-wrapper">
+      <div class="theme-toggle">
+        <ThemeSelector />
+      </div>
+      <header class="view-header">
+        <Breadcrumbs ref="breadcrumbs" :entries="breadcrumbEntries" @keydown="handleBreadcrumbKeydown" />
+        <p class="view-lede">Account dashboard to manage your profile and authentications.</p>
+      </header>
+    </div>
 
-    <section class="section-block">
+    <section class="section-block section-block--constrained" ref="userInfoSection">
       <UserBasicInfo
         v-if="authStore.userInfo?.user"
-        :name="authStore.userInfo.user.user_name"
-        :visits="authStore.userInfo.user.visits || 0"
+        ref="userBasicInfo"
+        :name="authStore.userInfo.user.display_name"
+        :avatar-url="authStore.userInfo.user.avatar_url"
+        :avatar-render-version="avatarRenderVersion"
+        avatar-clickable
+        :email="authStore.userInfo.user.email"
+        :preferred_username="authStore.userInfo.user.preferred_username"
+        :telephone="authStore.userInfo.user.telephone"
+        :visits="authStore.userInfo.user.visits"
         :created-at="authStore.userInfo.user.created_at"
         :last-seen="authStore.userInfo.user.last_seen"
         :loading="authStore.isLoading"
-        update-endpoint="/auth/api/user/display-name"
+        :org-display-name="authStore.userInfo.org.display_name"
+        :role-name="authStore.userInfo.role.display_name"
+        update-endpoint="/auth/api/user/info"
         @saved="authStore.loadUserInfo()"
-        @edit-name="openNameDialog"
+        @avatar-click="openAvatarDialog"
+        @edit="openEditDialog"
+        @keydown="handleUserInfoKeydown"
       >
         <div class="remote-auth-inline">
-          <label v-if="!showDeviceInfo" class="remote-auth-label">Code words from remote device:</label>
-          <RemoteAuth
+          <label v-if="!showDeviceInfo" class="remote-auth-label">Code words:</label>
+          <RemoteAuthPermit
             ref="pairingEntry"
             title=""
             description=""
-            placeholder="word word word"
             @completed="handlePairingCompleted"
             @error="handlePairingError"
             @device-info-visible="showDeviceInfo = $event"
           />
         </div>
+        <p class="remote-auth-description">Login from another device</p>
       </UserBasicInfo>
     </section>
 
-    <section class="section-block">
+    <section :class="['section-block', { 'section-block--constrained': !useWideLayout }]">
       <div class="section-header">
         <h2>Your Passkeys</h2>
-        <p class="section-description">Keep at least one trusted passkey so you can always sign in.</p>
+        <p class="section-description">Ideally have at least two passkeys in case you lose one. More than one user can be registered on the same device, giving you a choice at login. <a href="https://bitwarden.com/pricing/" target="_blank" rel="noopener noreferrer">Bitwarden</a> can sync one passkey to all your devices. Other secure options include <b>local passkeys</b>, as well as hardware keys such as <a href="https://www.yubico.com" target="_blank" rel="noopener noreferrer">YubiKey</a>. Cloud sync via Google, Microsoft or iCloud is discouraged.</p>
       </div>
       <div class="section-body">
         <CredentialList
-          :credentials="authStore.userInfo?.credentials || []"
-          :aaguid-info="authStore.userInfo?.aaguid_info || {}"
+          ref="credentialList"
+          :credentials="credentials"
+          :aaguid-info="authStore.userInfo.aaguid_info"
           :loading="authStore.isLoading"
           :hovered-credential-uuid="hoveredCredentialUuid"
-          :hovered-session-credential-uuid="hoveredSession?.credential_uuid"
+          :hovered-session-credential-uuid="hoveredSession?.credential"
+          :navigation-disabled="hasActiveModal"
           allow-delete
           @delete="handleDelete"
           @credential-hover="hoveredCredentialUuid = $event"
+          @navigate-out="handleCredentialNavigateOut"
         />
-        <div class="button-row">
-          <button @click="addNewCredential" class="btn-primary">Add New Passkey</button>
-          <button @click="showRegLink = true" class="btn-secondary">Add Another Device</button>
+        <div class="button-row" ref="credentialButtons">
+          <button @click="addNewCredential" class="btn-primary" @keydown="handleCredentialButtonKeydown">Register New</button>
+          <button @click="showRegLink = true" class="btn-secondary" @keydown="handleCredentialButtonKeydown">Another Device</button>
         </div>
       </div>
     </section>
 
     <SessionList
+      ref="sessionList"
       :sessions="sessions"
       :terminating-sessions="terminatingSessions"
       :hovered-credential-uuid="hoveredCredentialUuid"
+      :navigation-disabled="hasActiveModal"
+      :section-class="useWideLayout ? '' : 'section-block--constrained'"
       @terminate="terminateSession"
       @session-hover="hoveredSession = $event"
-      section-description="Review where you're signed in and end any sessions you no longer recognize."
+      @navigate-out="handleSessionNavigateOut"
+      section-description="You are currently signed in to the following sessions. If you don't recognize something, consider deleting not only the session but the associated passkey you suspect is compromised, as only this terminates all linked sessions and prevents logging in again."
     />
 
-    <Modal v-if="showNameDialog" @close="showNameDialog = false">
-      <h3>Edit Display Name</h3>
-      <form @submit.prevent="saveName" class="modal-form">
-        <NameEditForm
-          label="Display Name"
-          v-model="newName"
-          :busy="saving"
-          @cancel="showNameDialog = false"
-        />
-      </form>
-    </Modal>
-
-    <section class="section-block">
-      <div class="button-row logout-row" :class="{ single: !hasMultipleSessions }">
+    <section :class="['section-block', { 'section-block--constrained': !useWideLayout }]">
+      <div class="button-row" ref="logoutButtons">
         <button
           type="button"
           class="btn-secondary"
           @click="goBack"
+          @keydown="handleLogoutButtonKeydown"
         >
           Back
         </button>
-        <button v-if="!hasMultipleSessions" @click="logoutEverywhere" class="btn-danger logout-button" :disabled="authStore.isLoading">Logout</button>
+        <button v-if="!hasMultipleSessions" @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
         <template v-else>
-          <button @click="logout" class="btn-danger logout-button" :disabled="authStore.isLoading">Logout</button>
-          <button @click="logoutEverywhere" class="btn-danger logout-button" :disabled="authStore.isLoading">All</button>
+          <button @click="logout" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">Logout</button>
+          <button @click="logoutEverywhere" class="btn-danger" :disabled="authStore.isLoading" @keydown="handleLogoutButtonKeydown">All</button>
         </template>
       </div>
-      <p class="logout-note" v-if="!hasMultipleSessions"><strong>Logout</strong> from {{ currentSessionHost }}.</p>
-      <p class="logout-note" v-else><strong>Logout</strong> this session on {{ currentSessionHost }}, or <strong>All</strong> sessions across all sites and devices for {{ rpName }}. You'll need to log in again with your passkey afterwards.</p>
+      <div class="logout-footer">
+        <p class="logout-note" v-if="!hasMultipleSessions"><strong>Logout</strong> from {{ currentSessionHost }}.</p>
+        <p class="logout-note" v-else><strong>Logout</strong> this session on {{ currentSessionHost }}, or <strong>All</strong> sessions across all sites and devices for {{ rpName }}.</p>
+        <a class="paskia-version" href="https://git.zi.fi/leovasanko/paskia" target="_blank" rel="noopener noreferrer">Paskia {{ paskiaVersion }}</a>
+      </div>
     </section>
+
+    <Modal v-if="showEditDialog" @close="showEditDialog = false">
+      <h3>Edit Profile</h3>
+      <form @submit.prevent="saveProfile" class="modal-form">
+        <div class="profile-edit-form">
+          <label for="edit-display-name">Display Name
+            <input id="edit-display-name" type="text" v-model="editName" :disabled="saving" required />
+          </label>
+          <label for="edit-email">Email
+            <input id="edit-email" type="email" v-model="editEmail" :disabled="saving" />
+          </label>
+          <label for="edit-username">Preferred Username
+            <input id="edit-username" type="text" v-model="editUsername" :disabled="saving" placeholder="username" />
+          </label>
+          <label for="edit-telephone">Telephone
+            <input id="edit-telephone" type="tel" v-model="editTelephone" :disabled="saving" />
+          </label>
+          <div v-if="editError" class="error small">{{ editError }}</div>
+          <div class="modal-actions">
+            <button type="button" class="btn-secondary" @click="showEditDialog = false" :disabled="saving">Cancel</button>
+            <button type="submit" class="btn-primary" :disabled="saving" data-nav-primary>Save</button>
+          </div>
+        </div>
+      </form>
+    </Modal>
+
+    <ProfilePictureEditorModal
+      v-if="showAvatarDialog && currentAvatarEndpoint"
+      :endpoint="currentAvatarEndpoint"
+      :picture-url="authStore.userInfo?.user?.avatar_url"
+      :render-version="avatarRenderVersion"
+      @close="closeAvatarDialog"
+      @updated="handleProfilePictureUpdated"
+    />
+
     <RegistrationLinkModal
       v-if="showRegLink"
       endpoint="/auth/api/user/create-link"
       @close="showRegLink = false"
+      @copied="onLinkCopied"
     />
   </section>
 </template>
@@ -107,36 +157,84 @@
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import CredentialList from '@/components/CredentialList.vue'
+import ProfilePictureEditorModal from '@/components/ProfilePictureEditorModal.vue'
+import ThemeSelector from '@/components/ThemeSelector.vue'
 import UserBasicInfo from '@/components/UserBasicInfo.vue'
 import Modal from '@/components/Modal.vue'
-import NameEditForm from '@/components/NameEditForm.vue'
 import SessionList from '@/components/SessionList.vue'
 import RegistrationLinkModal from '@/components/RegistrationLinkModal.vue'
-import RemoteAuth from '@/components/RemoteAuthPermit.vue'
+import RemoteAuthPermit from '@/components/RemoteAuthPermit.vue'
 import { useAuthStore } from '@/stores/auth'
 import { adminUiPath, makeUiHref } from '@/utils/settings'
 import passkey from '@/utils/passkey'
 import { goBack } from '@/utils/helpers'
-import { apiJson } from '@/utils/api'
+import { apiJson } from 'paskia'
+import { navigateButtonRow, focusPreferred, focusAtIndex, getDirection } from '@/utils/keynav'
 
 const authStore = useAuthStore()
 const updateInterval = ref(null)
-const showNameDialog = ref(false)
+const showEditDialog = ref(false)
+const showAvatarDialog = ref(false)
 const showRegLink = ref(false)
-const newName = ref('')
+const editName = ref('')
+const editEmail = ref('')
+const editUsername = ref('')
+const editTelephone = ref('')
+const avatarRenderVersion = ref(0)
 const saving = ref(false)
+const editError = ref('')
 const hoveredCredentialUuid = ref(null)
 const hoveredSession = ref(null)
 const showDeviceInfo = ref(false)
 const pairingEntry = ref(null)
+const credentialList = ref(null)
+const credentialButtons = ref(null)
+const sessionList = ref(null)
+const logoutButtons = ref(null)
+const breadcrumbs = ref(null)
+const userInfoSection = ref(null)
 
-watch(showNameDialog, (newVal) => { if (newVal) newName.value = authStore.userInfo?.user?.user_name || '' })
+// Check if any modal/dialog is open (blocks arrow key navigation)
+const hasActiveModal = computed(() => showEditDialog.value || showAvatarDialog.value || showRegLink.value)
+
+watch(showEditDialog, (open) => {
+  if (!open) {
+    return
+  }
+  const user = authStore.userInfo.user
+  editName.value = user.display_name ?? ''
+  editEmail.value = user.email ?? ''
+  editUsername.value = user.preferred_username ?? ''
+  editTelephone.value = user.telephone ?? ''
+  editError.value = ''
+})
 
 onMounted(() => {
   updateInterval.value = setInterval(() => { if (authStore.userInfo) authStore.userInfo = { ...authStore.userInfo } }, 60000)
 })
 
-onUnmounted(() => { if (updateInterval.value) clearInterval(updateInterval.value) })
+onUnmounted(() => {
+  if (updateInterval.value) clearInterval(updateInterval.value)
+})
+
+const currentAvatarEndpoint = computed(() => {
+  const userUuid = authStore.userInfo?.user?.uuid
+  if (!userUuid) return null
+  return `/auth/api/user/${userUuid}/profile.webp`
+})
+
+const openAvatarDialog = () => {
+  showAvatarDialog.value = true
+}
+
+const closeAvatarDialog = () => {
+  showAvatarDialog.value = false
+}
+
+const handleProfilePictureUpdated = async () => {
+  await authStore.loadUserInfo()
+  avatarRenderVersion.value += 1
+}
 
 const addNewCredential = async () => {
   try {
@@ -164,68 +262,212 @@ const handlePairingError = (message) => {
   }
 }
 
+const onLinkCopied = () => {
+  authStore.showMessage('📋 Link copied! Send it to your other device.')
+  showRegLink.value = false
+}
+
+// Helper to focus preferred button in a row (primary first, or first button)
+const focusPreferredButton = (container) => {
+  focusPreferred(container, { primarySelector: '.btn-primary', itemSelector: 'button' })
+}
+
+// Navigation between components
+const handleBreadcrumbKeydown = (event) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  // Left/right handled internally by Breadcrumbs component
+  if (direction === 'down') {
+    event.preventDefault()
+    // Move to user info section - always focus edit button first
+    focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.user-picture-btn, .mini-btn, .pairing-input' })
+  }
+  // ArrowUp at the top does nothing
+}
+
+const handleUserInfoKeydown = (event) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+  const itemSelector = '.user-picture-btn, .mini-btn, .pairing-input'
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(userInfoSection.value, event.target, direction, { itemSelector })
+  } else if (direction === 'up') {
+    // Move to breadcrumbs - focus current page crumb
+    breadcrumbs.value?.focusCurrent?.()
+  } else if (direction === 'down') {
+    // Move to credential list
+    credentialList.value?.$el?.focus()
+  }
+}
+
+const handleCredentialNavigateOut = (direction) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  if (direction === 'down' || direction === 'right') {
+    // Focus preferred button in credential section
+    focusPreferredButton(credentialButtons.value)
+  } else if (direction === 'up' || direction === 'left') {
+    // Focus user info section - always focus edit button first
+    focusPreferred(userInfoSection.value, { primarySelector: '.mini-btn', itemSelector: '.user-picture-btn, .mini-btn, .pairing-input' })
+  }
+}
+
+const handleCredentialButtonKeydown = (event) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(credentialButtons.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    // Move back to credential list
+    focusAtIndex(credentialList.value?.$el, 0, { itemSelector: '.credential-item' })
+  } else if (direction === 'down') {
+    // Move to session list
+    focusAtIndex(sessionList.value?.$el, 0, { itemSelector: '.session-group' })
+  }
+}
+
+const handleSessionNavigateOut = (direction) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  if (direction === 'up') {
+    // Focus preferred button in credential section
+    focusPreferredButton(credentialButtons.value)
+  } else if (direction === 'down') {
+    // Focus preferred button in logout section
+    focusPreferredButton(logoutButtons.value)
+  }
+}
+
+const handleLogoutButtonKeydown = (event) => {
+  if (hasActiveModal.value) return  // Block navigation when modal is open
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(logoutButtons.value, event.target, direction, { itemSelector: 'button' })
+  } else if (direction === 'up') {
+    // Move back to session list - focus last group
+    focusAtIndex(sessionList.value?.$el, -1, { itemSelector: '.session-group' })
+  }
+  // ArrowDown at the bottom does nothing
+}
+
 const handleDelete = async (credential) => {
-  const credentialId = credential?.credential_uuid
+  const credentialId = credential?.credential
   if (!credentialId) return
-  if (!confirm('Are you sure you want to delete this passkey?')) return
   try {
     await authStore.deleteCredential(credentialId)
-    authStore.showMessage('Passkey deleted successfully!', 'success', 3000)
+    authStore.showMessage('Passkey deleted! You should also remove it from your password manager or device.', 'success', 3000)
   } catch (error) { authStore.showMessage(`Failed to delete passkey: ${error.message}`, 'error') }
 }
 
 const rpName = computed(() => authStore.settings?.rp_name || 'this service')
-const sessions = computed(() => authStore.userInfo?.sessions || [])
+const paskiaVersion = computed(() => authStore.settings?.version || '')
+const sessions = computed(() => authStore.userInfo.sessions)
 const currentSessionHost = computed(() => {
-  const currentSession = sessions.value.find(session => session.is_current)
+  const currentSession = Object.values(sessions.value).find(session => session.is_current)
   return currentSession?.host || 'this host'
 })
 const terminatingSessions = ref({})
 
 const terminateSession = async (session) => {
-  const sessionId = session?.id
-  if (!sessionId) return
-  terminatingSessions.value = { ...terminatingSessions.value, [sessionId]: true }
-  try { await authStore.terminateSession(sessionId) }
+  const sessionKey = session?.key
+  if (!sessionKey) return
+  terminatingSessions.value = { ...terminatingSessions.value, [sessionKey]: true }
+  try { await authStore.terminateSession(sessionKey) }
   catch (error) { authStore.showMessage(error.message || 'Failed to terminate session', 'error', 5000) }
   finally {
     const next = { ...terminatingSessions.value }
-    delete next[sessionId]
+    delete next[sessionKey]
     terminatingSessions.value = next
   }
 }
 
 const logoutEverywhere = async () => { await authStore.logoutEverywhere() }
 const logout = async () => { await authStore.logout() }
-const openNameDialog = () => { newName.value = authStore.userInfo?.user?.user_name || ''; showNameDialog.value = true }
-const isAdmin = computed(() => !!(authStore.userInfo?.is_global_admin || authStore.userInfo?.is_org_admin))
-const hasMultipleSessions = computed(() => sessions.value.length > 1)
-const breadcrumbEntries = computed(() => { const entries = [{ label: 'Auth', href: makeUiHref() }]; if (isAdmin.value) entries.push({ label: 'Admin', href: adminUiPath() }); return entries })
+const openEditDialog = () => { showEditDialog.value = true }
+const isAdmin = computed(() => {
+  const perms = Object.values(authStore.userInfo.permissions).map(p => p.scope)
+  return perms.includes('auth:admin') || perms.includes('auth:org:admin')
+})
+const hasMultipleSessions = computed(() => Object.keys(sessions.value).length > 1)
+const credentials = computed(() =>
+  Object.entries(authStore.userInfo.credentials).map(([uuid, c]) => ({ ...c, credential: uuid }))
+)
+const useWideLayout = computed(() => {
+  // Check if any single site has more than 8 sessions
+  const groups = {}
+  for (const session of Object.values(sessions.value)) {
+    const host = session.host || ''
+    if (!groups[host]) groups[host] = []
+    groups[host].push(session)
+  }
+  const hasLargeSessionGroup = Object.values(groups).some(group => group.length > 8)
 
-const saveName = async () => {
-  const name = newName.value.trim()
-  if (!name) { authStore.showMessage('Name cannot be empty', 'error'); return }
+  // Check if passkeys exceed 8
+  const hasManyCredentials = credentials.value.length > 8
+
+  return hasLargeSessionGroup || hasManyCredentials
+})
+const breadcrumbEntries = computed(() => { const entries = [{ label: 'My Profile', href: makeUiHref() }]; if (isAdmin.value) entries.push({ label: 'Admin', href: adminUiPath() }); return entries })
+
+const saveProfile = async () => {
+  const name = editName.value.trim()
+  if (!name) { editError.value = 'Name cannot be empty'; return }
+  const user = authStore.userInfo.user
+  const emailVal = editEmail.value.trim() || null
+  const usernameVal = editUsername.value.trim() || null
+  const telephoneVal = editTelephone.value.trim() || null
   try {
+    editError.value = ''
     saving.value = true
-    await apiJson('/auth/api/user/display-name', { method: 'PUT', body: { display_name: name } })
-    showNameDialog.value = false
-    await authStore.loadUserInfo()
-    authStore.showMessage('Name updated successfully!', 'success', 3000)
-  } catch (e) { authStore.showMessage(e.message || 'Failed to update name', 'error') }
-  finally { saving.value = false }
+    let changed = false
+    const body = {}
+    if (name !== user.display_name) body.display_name = name
+    if (emailVal !== (user.email || null)) body.email = emailVal
+    if (usernameVal !== (user.preferred_username || null)) body.preferred_username = usernameVal
+    if (telephoneVal !== (user.telephone || null)) body.telephone = telephoneVal
+    if (Object.keys(body).length) {
+      await apiJson('/auth/api/user/info', { method: 'PATCH', body })
+      changed = true
+    }
+    if (changed) {
+      await authStore.loadUserInfo()
+      authStore.showMessage('Profile updated!', 'success', 3000)
+    }
+    showEditDialog.value = false
+  } catch (e) {
+    editError.value = e.message || 'Failed to update profile'
+  } finally { saving.value = false }
 }
 </script>
 
 <style scoped>
-.view-lede { margin: 0; color: var(--color-text-muted); font-size: 1rem; }
 .section-header { display: flex; flex-direction: column; gap: 0.4rem; }
-.section-description { margin: 0; color: var(--color-text-muted); }
 .empty-state { margin: 0; color: var(--color-text-muted); text-align: center; padding: 1rem 0; }
-.logout-button { align-self: flex-start; }
-.logout-row { gap: 1rem; }
-.logout-row.single { justify-content: flex-start; }
-.logout-note { margin: 0.75rem 0 0; color: var(--color-text-muted); font-size: 0.875rem; }
+.logout-note { margin: 0; color: var(--color-text-muted); }
+.logout-footer { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.75rem; }
+.paskia-version { color: var(--color-text-muted); text-decoration: none; white-space: nowrap; font-weight: 700; }
+.paskia-version:hover { color: var(--color-link-hover); }
 .remote-auth-inline { display: flex; flex-direction: column; gap: 0.5rem; }
 .remote-auth-label { display: block; margin: 0; font-size: 0.875rem; color: var(--color-text-muted); font-weight: 500; }
-@media (max-width: 720px) { .logout-button { width: 100%; } }
+.remote-auth-description { font-size: 0.75rem; color: var(--color-text-muted); }
+.theme-toggle { position: absolute; top: var(--layout-padding); right: var(--layout-padding); }
+.profile-edit-form { display: flex; flex-direction: column; gap: var(--space-md); }
 </style>

frontend/src/components/QRCodeDisplay.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="qr-display">
     <div class="qr-section">
-      <a :href="url" @click.prevent="copyLink" class="qr-link" title="Click to copy link">
+      <a :href="url" @click.prevent="copyLink" class="qr-link" title="Click to copy link" tabindex="0" @keydown.enter.prevent="copyLink">
         <canvas ref="qrCanvas" class="qr-code"></canvas>
         <div v-if="showLink && url" class="link-text">{{ displayUrl }}</div>
       </a>
     </div>
 
-    <div v-if="showCopyToast" class="copy-toast">
-      ✓ Link copied to clipboard
-    </div>
   </div>
 </template>
 
@@ -25,9 +22,6 @@ const props = defineProps({
 const emit = defineEmits(['copied'])
 
 const qrCanvas = ref(null)
-const showCopyToast = ref(false)
-
-let copyToastTimer = null
 
 const displayUrl = computed(() => {
   if (!props.url) return ''
@@ -65,13 +59,7 @@ async function copyLink() {
   if (!props.url) return
   try {
     await navigator.clipboard.writeText(props.url)
-    showCopyToast.value = true
     emit('copied')
-
-    if (copyToastTimer) clearTimeout(copyToastTimer)
-    copyToastTimer = setTimeout(() => {
-      showCopyToast.value = false
-    }, 2000)
   } catch (err) {
     console.error('Failed to copy link:', err)
   }
@@ -139,23 +127,4 @@ watch(qrCanvas, () => {
 .qr-link:hover .link-text {
   color: var(--color-text);
 }
-
-.copy-toast {
-  position: absolute;
-  top: -2rem;
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--color-success);
-  color: white;
-  padding: 0.5rem 1rem;
-  border-radius: var(--radius-sm);
-  font-size: 0.875rem;
-  z-index: 10;
-  animation: fadeInOut 2s ease-in-out;
-}
-
-@keyframes fadeInOut {
-  0%, 100% { opacity: 0; }
-  10%, 90% { opacity: 1; }
-}
 </style>

frontend/src/components/RegistrationLinkModal.vue

@@ -1,56 +1,46 @@
 <template>
-  <div class="dialog-overlay" @keydown.esc.prevent="$emit('close')">
-    <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
+  <div v-if="linkUrl" class="dialog-overlay" @click="$emit('close')">
+    <div ref="dialog" class="modal-panel" @keydown="handleDialogKeydown" @click.stop>
+      <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
       <div class="reg-header-row">
         <h2 id="regTitle" class="reg-title">
-          📱 <span v-if="userName">Registration for {{ userName }}</span><span v-else>Add Another Device</span>
+          📱 <span v-if="userName">{{ tokenType === 'account recovery' ? 'Recovery' : 'Registration' }} for {{ userName }}</span><span v-else>Add Another Device</span>
         </h2>
-        <button class="icon-btn" @click="$emit('close')" aria-label="Close">❌</button>
+        <button class="icon-btn" @click="$emit('close')" aria-label="Close" tabindex="-1">✕</button>
       </div>
 
       <div class="device-link-section">
-        <!-- Loading state -->
-        <div v-if="loading" class="loading-state">
-          <div class="spinner-small"></div>
-          <span>Generating registration link...</span>
-        </div>
+        <p class="reg-help">
+          {{ helpText }}
+        </p>
 
-        <!-- Error state -->
-        <div v-else-if="error" class="error-state">
-          <p class="error-message">{{ error }}</p>
-          <button class="btn-secondary" @click="generateLink">Retry</button>
-        </div>
+        <QRCodeDisplay
+          :url="linkUrl"
+          :show-link="true"
+          @copied="onCopied"
+          @keydown="handleQRKeydown"
+        />
 
-        <!-- Success state with QR code and link -->
-        <template v-else-if="linkUrl">
-          <p class="reg-help">
-            Scan this QR code on the new device, or copy the link and open it there.
-          </p>
-
-          <QRCodeDisplay
-            :url="linkUrl"
-            :show-link="true"
-            @copied="onCopied"
-          />
-
-          <p class="expiry-note" v-if="expiresAt">
-            This link expires {{ formatDate(expiresAt).toLowerCase() }}.
-          </p>
-        </template>
+        <p class="expiry-note" v-if="expiresAt">
+          This link expires {{ formatDate(expiresAt).toLowerCase() }}.
+        </p>
       </div>
 
-      <div class="reg-actions">
+      <div class="reg-actions" ref="actionsRow" @keydown="handleActionsKeydown">
         <button class="btn-secondary" @click="$emit('close')">Close</button>
       </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
-import { apiJson } from '@/utils/api'
+import { apiJson, AuthCancelledError, holdGlobalBackdrop, releaseGlobalBackdrop } from 'paskia'
 import { formatDate } from '@/utils/helpers'
+import { getDirection } from '@/utils/keynav'
+import { useAuthStore } from '@/stores/auth'
 
 const props = defineProps({
   endpoint: { type: String, required: true },
@@ -59,29 +49,51 @@ const props = defineProps({
 
 const emit = defineEmits(['close', 'copied'])
 
-const loading = ref(true)
-const error = ref(null)
+const authStore = useAuthStore()
+const dialog = ref(null)
 const linkUrl = ref(null)
 const expiresAt = ref(null)
+const tokenType = ref(null)
+const actionsRow = ref(null)
+// Store the element that had focus before modal opened
+const previouslyFocusedElement = ref(null)
+
+// Determine if this is an admin action for another user
+const isAdminAction = computed(() => !!props.userName)
+
+// Compute the help text based on token type and context
+const helpText = computed(() => {
+  if (!isAdminAction.value) {
+    // User adding their own device
+    return 'Scan this QR code on the new device, or copy the link and open it there.'
+  }
+  // Admin action for another user
+  return `Send this link to ${props.userName}, or have them scan the QR code.`
+})
 
 async function generateLink() {
-  loading.value = true
-  error.value = null
-  linkUrl.value = null
-  expiresAt.value = null
-
   try {
     const data = await apiJson(props.endpoint, { method: 'POST' })
     if (data.url) {
       linkUrl.value = data.url
       expiresAt.value = data.expires ? new Date(data.expires) : null
+      tokenType.value = data.token_type || null
+
+      holdGlobalBackdrop()
+
+      // Focus primary button (or first button if no primary) after content renders
+      await nextTick()
+      const actions = actionsRow.value
+      const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
+      target?.focus()
     } else {
-      error.value = data.detail || 'Failed to generate link'
+      emit('close')
     }
-  } catch (err) {
-    error.value = err.message || 'Failed to generate link'
-  } finally {
-    loading.value = false
+  } catch (e) {
+    if (!(e instanceof AuthCancelledError)) {
+      authStore.showMessage(e.message || 'Failed to generate link', 'error')
+    }
+    emit('close')
   }
 }
 
@@ -89,9 +101,65 @@ function onCopied() {
   emit('copied')
 }
 
+const handleDialogKeydown = (event) => {
+  // ESC to close
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('close')
+    return
+  }
+  // Handle other key navigation
+  const direction = getDirection(event)
+  if (!direction) return
+
+  if (direction === 'down' || direction === 'up') {
+    // Let the individual handlers manage navigation
+    return
+  }
+}
+
+const handleQRKeydown = (event) => {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  // Navigation constrained within modal: QR link <-> Close button
+  if (direction === 'down' || direction === 'up') {
+    // Toggle between QR link and close button
+    actionsRow.value?.querySelector('button')?.focus()
+  }
+  // Left/right do nothing on QR code
+}
+
+const handleActionsKeydown = (event) => {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  // Navigation constrained within modal: Close button <-> QR link
+  if (direction === 'up' || direction === 'down') {
+    // Toggle between close button and QR link
+    document.querySelector('.qr-link')?.focus()
+  }
+  // Left/right do nothing (only one button)
+}
+
 onMounted(() => {
+  // Save currently focused element before modal takes focus
+  previouslyFocusedElement.value = document.activeElement
   generateLink()
 })
+
+onUnmounted(() => {
+  if (linkUrl.value) releaseGlobalBackdrop()
+  // Restore focus when modal closes
+  const prev = previouslyFocusedElement.value
+  if (prev && document.body.contains(prev) && !prev.disabled) {
+    prev.focus()
+  }
+})
 </script>
 
 <style scoped>
@@ -102,8 +170,5 @@ onMounted(() => {
 .device-dialog { background: var(--color-surface); padding: 1.25rem 1.25rem 1rem; border-radius: var(--radius-md); max-width: 480px; width: 100%; box-shadow: 0 6px 28px rgba(0,0,0,.25); }
 .reg-help { margin: .5rem 0 .75rem; font-size: .85rem; line-height: 1.4; text-align: center; color: var(--color-text-muted); }
 .reg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
-.loading-state { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 2rem 0; color: var(--color-text-muted); }
-.error-state { text-align: center; padding: 1rem 0; }
-.error-message { color: var(--color-danger-text); margin-bottom: 1rem; }
 .expiry-note { font-size: .75rem; color: var(--color-text-muted); text-align: center; margin-top: .75rem; }
 </style>

frontend/src/components/RemoteAuthPermit.vue

@@ -3,11 +3,14 @@
     <form @submit.prevent="submitCode" class="pairing-form">
       <!-- Code input (shown when device info not yet received) -->
       <div v-if="!deviceInfo" class="input-row">
-        <div class="input-wrapper" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError, 'focused': isFocused }">
+        <div class="input-wrapper" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError, 'focused': isFocused, 'has-selection': hasSelection }">
           <!-- Visual slot-machine display overlay -->
           <div class="slot-machine" :class="{ 'has-error': serverError, 'is-complete': deviceInfo && !serverError }" aria-hidden="true">
             <div v-for="(word, index) in displayWords" :key="index" class="slot-reel" :class="{ 'invalid-word': word.invalid, 'empty': !word.text && !word.typedPrefix }">
               <div class="slot-word">
+                <span v-if="word.selectionStartChar >= 0 && word.selectionEndChar > word.selectionStartChar"
+                      class="selection-overlay"
+                      :style="{ '--sel-start': word.selectionStartChar, '--sel-end': word.selectionEndChar, '--word-len': word.wordLen }"></span>
                 <template v-if="word.typedPrefix">
                   <span class="typed-prefix">{{ word.typedPrefix }}</span><span class="hint-suffix">{{ word.hintSuffix }}</span>
                   <span v-if="word.hasCursor" class="cursor-overlay" :style="{ '--cursor-pos': word.cursorCharIndex, '--word-len': word.wordLen }"></span>
@@ -50,17 +53,16 @@
       <!-- Device info display (shown when 3 words match a request) -->
       <div v-else-if="deviceInfo" class="device-info">
         <p class="device-permit-text">Permit {{ deviceInfo.action === 'register' ? 'registration' : 'login' }} to <strong>{{ deviceInfo.host }}</strong></p>
-        <p class="device-meta">{{ deviceInfo.user_agent_pretty }}</p>
+        <p class="device-meta">{{ deviceInfo.user_agent_pretty || '—' }}</p>
 
-        <p v-if="error" class="error-message" style="margin-top: 0.5rem;">{{ error }}</p>
+        <p v-if="error" class="error-message">{{ error }}</p>
 
-        <div class="button-row" style="margin-top: 0.75rem; display: flex; gap: 0.5rem;">
+        <div class="button-row device-actions">
           <button
             type="button"
             class="btn-secondary"
             :disabled="loading"
             @click="deny"
-            style="flex: 1;"
           >
             Deny
           </button>
@@ -69,14 +71,11 @@
             type="submit"
             :disabled="loading"
             class="btn-primary"
-            style="flex: 1;"
           >
             {{ loading ? 'Authenticating…' : 'Authorize' }}
           </button>
         </div>
       </div>
-
-      <p v-if="error && !deviceInfo" class="error-message">{{ error }}</p>
     </form>
   </div>
 </template>
@@ -85,7 +84,7 @@
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { startAuthentication } from '@simplewebauthn/browser'
 import aWebSocket from '@/utils/awaitable-websocket'
-import { dec as b64dec, enc as b64enc } from '@/utils/base64url'
+import { b64dec, b64enc } from '@/utils/base64url'
 import { getSettings } from '@/utils/settings'
 import { getUniqueMatch, isValidWord, isValidPrefix } from '@/utils/wordlist'
 import { solvePoW } from '@/utils/pow'
@@ -95,7 +94,7 @@ const props = defineProps({
   title: { type: String, default: 'Help Another Device Sign In' },
   description: { type: String, default: 'Enter the code shown on the device that needs to sign in.' },
   placeholder: { type: String, default: 'Enter three words' },
-  action: { type: String, default: 'login' } // 'login' or 'register'
+  action: { type: String, default: 'login' }, // 'login' or 'register'
 })
 
 const emit = defineEmits(['completed', 'error', 'cancelled', 'back', 'register', 'deviceInfoVisible'])
@@ -126,7 +125,11 @@ watch(deviceInfo, (newVal) => {
 const hasInvalidWord = ref(false)
 const serverError = ref(false)
 const cursorPos = ref(0)
+const selectionStart = ref(0)
+const selectionEnd = ref(0)
 const isFocused = ref(false)
+const isDeleting = ref(false)
+let previousCursorPos = 0
 let wsConnecting = false
 let currentChallenge = null
 let currentWork = null
@@ -166,9 +169,42 @@ function getWords(input) {
   return input.trim().split(/[.\s]+/).filter(w => w.length > 0)
 }
 
+// Get words for display, splitting concatenated valid words (e.g., "alienfood" -> ["alien", "food"])
+function getDisplayWords(input) {
+  const rawWords = getWords(input)
+  const result = []
+
+  for (const rawWord of rawWords) {
+    // Try to split this raw word into valid words
+    let remaining = rawWord.toLowerCase()
+    while (remaining.length > 0 && result.length < 3) {
+      let foundWord = null
+      // Try to find the longest valid word from the start
+      for (let len = Math.min(remaining.length, 6); len >= 3; len--) {
+        const candidate = remaining.slice(0, len)
+        if (isValidWord(candidate)) {
+          foundWord = candidate
+          break
+        }
+      }
+      if (foundWord) {
+        result.push(foundWord)
+        remaining = remaining.slice(foundWord.length)
+      } else {
+        // No valid word found, keep the remaining as partial word
+        result.push(remaining)
+        break
+      }
+    }
+    if (result.length >= 3) break
+  }
+
+  return result
+}
+
 function countCompleteWords(input) {
   const endsWithSeparator = /[.\s]$/.test(input)
-  const words = getWords(input)
+  const words = getDisplayWords(input)
   return endsWithSeparator ? words.length : Math.max(0, words.length - 1)
 }
 
@@ -199,7 +235,7 @@ const coloredSegments = computed(() => {
 })
 
 function checkWordsValidity(input) { return analyzeWords(input).valid }
-function allWordsValid(input) { return getWords(input).length > 0 && getWords(input).every(w => isValidWord(w)) }
+function allWordsValid(input) { return getDisplayWords(input).length > 0 && getDisplayWords(input).every(w => isValidWord(w)) }
 
 // Get the current partial word being typed (not yet a complete word)
 function getCurrentPartialWord(input) {
@@ -211,61 +247,127 @@ function getCurrentPartialWord(input) {
 
 // Calculate cursor position in the normalized display (wordIndex, charIndex within word)
 // Returns { wordIndex: number, charIndex: number } where charIndex is position within the word text
+// This handles concatenated words like "alienfood" being displayed as "alien" + "food"
 function calcDisplayCursor(input, rawCursorPos) {
   if (!input || rawCursorPos === 0) {
     return { wordIndex: 0, charIndex: 0 }
   }
 
-  // Parse input to find word boundaries
   const beforeCursor = input.slice(0, rawCursorPos)
-  const wordMatches = [...beforeCursor.matchAll(/[a-zA-Z]+/g)]
-
-  // Check if cursor is in whitespace after words
   const endsWithSeparator = /[.\s]$/.test(beforeCursor)
 
-  if (wordMatches.length === 0) {
-    // No words before cursor, cursor is at start of first word
+  // Get display words for the text before cursor
+  const displayWordsBefore = getDisplayWords(beforeCursor)
+
+  if (displayWordsBefore.length === 0) {
     return { wordIndex: 0, charIndex: 0 }
   }
 
-  const lastMatch = wordMatches[wordMatches.length - 1]
-  const lastMatchEnd = lastMatch.index + lastMatch[0].length
-
-  if (endsWithSeparator || rawCursorPos > lastMatchEnd) {
-    // Cursor is after the last word (in whitespace), so it's at start of next word
-    return { wordIndex: Math.min(wordMatches.length, 2), charIndex: 0 }
+  if (endsWithSeparator) {
+    // Cursor is in whitespace after words, so it's at start of next word
+    return { wordIndex: Math.min(displayWordsBefore.length, 2), charIndex: 0 }
   }
 
-  // Cursor is within the last word
-  const charIndex = rawCursorPos - lastMatch.index
-  return { wordIndex: wordMatches.length - 1, charIndex: charIndex }
+  // Cursor is within/after the last display word
+  const lastDisplayWord = displayWordsBefore[displayWordsBefore.length - 1]
+  const wordIndex = displayWordsBefore.length - 1
+
+  // Find where in the original input this display word ends
+  // by getting the full display words and comparing
+  const fullDisplayWords = getDisplayWords(input)
+
+  // Calculate char position within the word
+  // The last display word from beforeCursor might be partial
+  const charIndex = lastDisplayWord.length
+
+  // If this word is a complete valid word and it's not the 3rd word (index 2),
+  // show cursor at start of next slot - but only when typing forward, not when deleting
+  if (wordIndex < 2 && !isDeleting.value) {
+    if (isValidWord(lastDisplayWord)) {
+      return { wordIndex: wordIndex + 1, charIndex: 0 }
+    }
+  }
+
+  return { wordIndex: Math.min(wordIndex, 2), charIndex: charIndex }
+}
+
+// Calculate display cursor without the "advance to next word" logic (for selection bounds)
+function calcDisplayCursorRaw(input, rawCursorPos) {
+  if (!input || rawCursorPos === 0) {
+    return { wordIndex: 0, charIndex: 0 }
+  }
+
+  const beforeCursor = input.slice(0, rawCursorPos)
+  const endsWithSeparator = /[.\s]$/.test(beforeCursor)
+  const displayWordsBefore = getDisplayWords(beforeCursor)
+
+  if (displayWordsBefore.length === 0) {
+    return { wordIndex: 0, charIndex: 0 }
+  }
+
+  if (endsWithSeparator) {
+    return { wordIndex: Math.min(displayWordsBefore.length, 2), charIndex: 0 }
+  }
+
+  const lastDisplayWord = displayWordsBefore[displayWordsBefore.length - 1]
+  const wordIndex = displayWordsBefore.length - 1
+  return { wordIndex: Math.min(wordIndex, 2), charIndex: lastDisplayWord.length }
 }
 
 // Compute display words for slot-machine overlay (always 3 slots)
 const displayWords = computed(() => {
-  const words = getWords(code.value)
+  const words = getDisplayWords(code.value)
   const result = []
 
-  // Get analysis for validation
-  const { segments } = analyzeWords(code.value)
-  const wordSegments = segments.filter(s => s.isWord)
-
   // Get current partial word and autocomplete hint
   const partialWord = getCurrentPartialWord(code.value)
   const hint = autocompleteHint.value
   const endsWithSeparator = /[.\s]$/.test(code.value)
 
+  // Calculate selection bounds (raw positions without advance logic)
+  const hasSelectionNow = selectionStart.value !== selectionEnd.value
+  const selStart = calcDisplayCursorRaw(code.value, Math.min(selectionStart.value, selectionEnd.value))
+  const selEnd = calcDisplayCursorRaw(code.value, Math.max(selectionStart.value, selectionEnd.value))
+
   // Calculate where cursor should be displayed
-  const cursor = calcDisplayCursor(code.value, cursorPos.value)
+  // Use raw position when there's a selection (cursor shows at active end without advance)
+  // Use advance logic only when typing without selection
+  const cursor = hasSelectionNow
+    ? calcDisplayCursorRaw(code.value, cursorPos.value)
+    : calcDisplayCursor(code.value, cursorPos.value)
 
   // Always show exactly 3 slots
   for (let i = 0; i < 3; i++) {
     const isCursorSlot = cursor.wordIndex === i
 
+    // Calculate selection range for this word
+    let selectionStartChar = -1
+    let selectionEndChar = -1
+    if (hasSelectionNow) {
+      if (i > selStart.wordIndex && i < selEnd.wordIndex) {
+        // Entire word is selected
+        selectionStartChar = 0
+        selectionEndChar = words[i]?.length ?? 0
+      } else if (i === selStart.wordIndex && i === selEnd.wordIndex) {
+        // Selection starts and ends in this word
+        selectionStartChar = selStart.charIndex
+        selectionEndChar = selEnd.charIndex
+      } else if (i === selStart.wordIndex) {
+        // Selection starts in this word
+        selectionStartChar = selStart.charIndex
+        selectionEndChar = words[i]?.length ?? 0
+      } else if (i === selEnd.wordIndex) {
+        // Selection ends in this word
+        selectionStartChar = 0
+        selectionEndChar = selEnd.charIndex
+      }
+    }
+
     if (i < words.length) {
       const word = words[i].toLowerCase()
-      const isInvalid = wordSegments[i]?.invalid || false
       const isLastWord = i === words.length - 1
+      // Validate: last word without separator can be a prefix, others must be complete words
+      const isInvalid = (isLastWord && !endsWithSeparator) ? !isValidPrefix(word) : !isValidWord(word)
 
       if (isLastWord && !endsWithSeparator && hint && partialWord) {
         // Show typed prefix + hint suffix in the same slot
@@ -278,7 +380,9 @@ const displayWords = computed(() => {
           invalid: isInvalid,
           hasCursor: isCursorSlot,
           cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
-          wordLen: totalLen
+          wordLen: totalLen,
+          selectionStartChar,
+          selectionEndChar
         })
       } else {
         // Complete word - show cursor at appropriate position
@@ -287,7 +391,9 @@ const displayWords = computed(() => {
           invalid: isInvalid,
           hasCursor: isCursorSlot,
           cursorCharIndex: isCursorSlot ? cursor.charIndex : -1,
-          wordLen: word.length
+          wordLen: word.length,
+          selectionStartChar,
+          selectionEndChar
         })
       }
     } else {
@@ -297,7 +403,9 @@ const displayWords = computed(() => {
         invalid: false,
         hasCursor: isCursorSlot,
         cursorCharIndex: 0,
-        wordLen: 0
+        wordLen: 0,
+        selectionStartChar,
+        selectionEndChar
       })
     }
   }
@@ -305,13 +413,17 @@ const displayWords = computed(() => {
   return result
 })
 
+const hasSelection = computed(() => selectionStart.value !== selectionEnd.value)
+
 const hasThreeValidWords = computed(() => {
-  const words = getWords(code.value)
+  const words = getDisplayWords(code.value)
   return words.length === 3 && words.every(w => isValidWord(w))
 })
 
 function normalizeCode(input) {
-  return input.trim().toLowerCase().split(/[.\s]+/).filter(w => w).join('.')
+  // Use display words to handle concatenated words like "alienfood" -> "alien.food"
+  const words = getDisplayWords(input)
+  return words.join('.')
 }
 
 function startPowSolving() {
@@ -346,7 +458,7 @@ async function ensureConnection() {
   wsConnecting = true
   try {
     const authHost = settings.value?.auth_host
-    const wsPath = '/auth/ws/remote-auth/pair'
+    const wsPath = '/auth/ws/remote-auth/permit'
     const wsUrl = authHost && location.host !== authHost ? `//${authHost}${wsPath}` : wsPath
     ws = await aWebSocket(wsUrl)
     const msg = await ws.receive_json()
@@ -365,7 +477,7 @@ async function ensureConnection() {
 // Defer cursor position update to after browser processes the key
 function deferUpdateCursor(event) {
   // Handle Tab/Space for autocomplete immediately
-  if (event.key === 'Tab' || event.key === ' ') {
+  if (event.key === 'Tab' || event.key === ' ' || event.key === 'Escape') {
     handleKeydown(event)
     return
   }
@@ -373,9 +485,22 @@ function deferUpdateCursor(event) {
   setTimeout(updateCursorPos, 0)
 }
 
-// Update cursor position from input
 function updateCursorPos() {
-  cursorPos.value = inputRef.value?.selectionStart ?? code.value.length
+  const input = inputRef.value
+  const start = input?.selectionStart ?? code.value.length
+  const end = input?.selectionEnd ?? start
+
+  // Track direction based on which end moved
+  // If selection exists, cursor is at the end being moved (selectionDirection)
+  const direction = input?.selectionDirection ?? 'none'
+  const activeCursor = direction === 'backward' ? start : end
+
+  isDeleting.value = activeCursor < previousCursorPos
+  previousCursorPos = activeCursor
+  cursorPos.value = activeCursor
+  selectionEnd.value = end
+  // Store start separately - cursorPos is the active end, we need both for selection
+  selectionStart.value = start
 }
 
 function updateAutocomplete() {
@@ -396,7 +521,7 @@ function applyAutocomplete() {
   const { word, start, end } = getWordAtCursor(code.value, cursorPos.value)
   if (!word) return false
   const before = code.value.slice(0, start)
-  const wordsBefore = getWords(before).length
+  const wordsBefore = getDisplayWords(before).length
   const isThirdWord = wordsBefore === 2
   const suffix = isThirdWord ? '' : ' '
   const after = code.value.slice(end)
@@ -410,83 +535,33 @@ function applyAutocomplete() {
   return true
 }
 
-// Try to split concatenated words (e.g., "alienalien" -> "alien alien")
-function trySplitWords(input) {
-  // Only process if there's a continuous string of letters at the end
-  const match = input.match(/^(.*?)([a-zA-Z]+)$/)
-  if (!match) return input
-
-  const prefix = match[1]  // Everything before the letter sequence
-  const letters = match[2].toLowerCase()
-
-  // Try to find valid word boundaries in the letter sequence
-  const foundWords = []
-  let remaining = letters
-
-  while (remaining.length > 0) {
-    let foundWord = null
-
-    // Try to find the longest valid word from the start
-    for (let len = Math.min(remaining.length, 6); len >= 3; len--) {
-      const candidate = remaining.slice(0, len)
-      if (isValidWord(candidate)) {
-        foundWord = candidate
-        break
-      }
-    }
-
-    if (foundWord) {
-      foundWords.push(foundWord)
-      remaining = remaining.slice(foundWord.length)
-
-      // Stop after 3 words
-      if (foundWords.length >= 3) {
-        remaining = ''
-        break
-      }
-    } else {
-      // No valid word found, keep the remaining as-is
-      foundWords.push(remaining)
-      break
-    }
-  }
-
-  // Only return split version if we found at least one complete word
-  // and there's a clear boundary (more than one segment, or the segment is a complete word)
-  if (foundWords.length > 1 || (foundWords.length === 1 && isValidWord(foundWords[0]) && remaining === '')) {
-    return prefix + foundWords.join(' ')
-  }
-
-  return input
-}
-
 function handleInput() {
-  // Immediately update cursor position
   cursorPos.value = inputRef.value?.selectionStart ?? code.value.length
 
-  // First, try to auto-split concatenated words
-  const splitCode = trySplitWords(code.value)
-  if (splitCode !== code.value) {
-    code.value = splitCode
-    nextTick(() => {
-      const newLen = splitCode.length
-      inputRef.value?.setSelectionRange(newLen, newLen)
-      cursorPos.value = newLen
-    })
-  }
-
-  const words = getWords(code.value)
-  if (words.length >= 3) {
-    const normalized = words.slice(0, 3).join(' ')
-    if (code.value !== normalized) {
-      const cursorWasAtEnd = cursorPos.value >= code.value.length
-      code.value = normalized
-      if (cursorWasAtEnd) {
-        nextTick(() => {
-          inputRef.value?.setSelectionRange(normalized.length, normalized.length)
-          cursorPos.value = normalized.length
-        })
-      }
+  // Mobile fallback for autocomplete: if cursor is right after "prefix " (partial word + space),
+  // replace the partial with the completed word. On desktop, keydown intercepts space before input,
+  // but mobile soft keyboards often insert the space before we can catch it.
+  const cursor = cursorPos.value
+  const beforeCursor = code.value.slice(0, cursor)
+  // Check if cursor is right after a space that follows a word
+  const spaceMatch = beforeCursor.match(/([a-zA-Z]+) $/)
+  if (spaceMatch) {
+    const partialWord = spaceMatch[1].toLowerCase()
+    const match = getUniqueMatch(partialWord)
+    // Only autocomplete if it's not already a complete word and we have a unique match
+    if (match && match !== partialWord && !isValidWord(partialWord)) {
+      const wordStartPos = cursor - spaceMatch[0].length
+      const beforeWord = code.value.slice(0, wordStartPos)
+      const afterSpace = code.value.slice(cursor)
+      const wordsBefore = getDisplayWords(beforeWord).length
+      const isThirdWord = wordsBefore === 2
+      const suffix = isThirdWord ? '' : ' '
+      code.value = beforeWord + match + suffix + afterSpace
+      const newPos = wordStartPos + match.length + suffix.length
+      nextTick(() => {
+        inputRef.value?.setSelectionRange(newPos, newPos)
+        cursorPos.value = newPos
+      })
     }
   }
 
@@ -496,7 +571,7 @@ function handleInput() {
   error.value = null
   serverError.value = false
   hasInvalidWord.value = !checkWordsValidity(code.value)
-  const currentWords = getWords(code.value)
+  const currentWords = getDisplayWords(code.value)
   if (currentWords.length >= 1 && !ws && !wsConnecting) ensureConnection()
   if (currentWords.length === 3) {
     if (!allWordsValid(code.value)) return
@@ -527,14 +602,13 @@ async function lookupDeviceInfo() {
     const res = await ws.receive_json()
     updateChallenge(res.pow)
     if (typeof res.status === 'number' && res.status >= 400) {
-      error.value = res.detail || 'Request failed'
+      showMessage(res.detail || 'Request failed', 'error')
       serverError.value = true
       deviceInfo.value = null
       lastLookedUpCode = null
       return
     }
     if (res.status === 'found' && res.host) {
-      code.value = currentCode.replace(/\./g, ' ')
       deviceInfo.value = {
         host: res.host,
         user_agent_pretty: res.user_agent_pretty,
@@ -544,14 +618,14 @@ async function lookupDeviceInfo() {
       lastLookedUpCode = currentCode
       nextTick(() => { submitBtnRef.value?.focus() })
     } else {
-      error.value = 'Unexpected response from server'
+      showMessage('Unexpected response from server', 'error')
       serverError.value = true
       deviceInfo.value = null
       lastLookedUpCode = null
     }
   } catch (err) {
     console.error('Lookup error:', err)
-    error.value = err.message || 'Lookup failed'
+    showMessage(err.message || 'Lookup failed', 'error')
     serverError.value = true
     deviceInfo.value = null
     lastLookedUpCode = null
@@ -563,6 +637,12 @@ async function lookupDeviceInfo() {
 }
 
 function handleKeydown(event) {
+  if (event.key === 'Escape') {
+    code.value = ''
+    handleInput()
+    event.preventDefault()
+    return
+  }
   if (event.key === 'Tab') {
     if (autocompleteHint.value) {
       const applied = applyAutocomplete()
@@ -654,7 +734,6 @@ function reset() {
 
 onMounted(async () => {
   await fetchSettings()
-  inputRef.value?.focus()
   // Initialize cursor position
   nextTick(() => {
     cursorPos.value = inputRef.value?.selectionStart ?? 0
@@ -692,52 +771,29 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
 .input-wrapper {
   position: relative;
   display: flex;
-  width: 280px;
   max-width: 100%;
 }
 
-/* Slot machine visual display (matches RemoteAuthInline) */
+/* Slot machine visual display (matches RemoteAuthRequest) */
 .slot-machine {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  padding: 0.875rem 1rem;
-  background: var(--color-surface-hover, rgba(0, 0, 0, 0.03));
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm, 6px);
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-  display: flex;
   gap: 0;
-  align-items: center;
-  user-select: none;
-  pointer-events: none;
-  white-space: nowrap;
-  overflow: hidden;
   box-sizing: border-box;
   z-index: 1;
+  pointer-events: none;
 }
 
-.slot-machine.has-error {
-  border-color: var(--color-error, #ef4444);
+.input-wrapper.focused.has-error .slot-machine {
   background: var(--color-error-bg, rgba(239, 68, 68, 0.05));
 }
 
-.slot-machine.is-complete {
-  border-color: var(--color-success, #10b981);
-}
-
 .slot-reel {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   flex: 1 1 33.333%;
-  min-width: 0;
-  height: 1.8em;
   overflow: visible;
-  position: relative;
-  border-radius: 3px;
 }
 
 .slot-reel:not(:last-child) {
@@ -745,7 +801,6 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
 }
 
 .slot-word {
-  font-size: 1.25rem;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-align: center;
@@ -781,16 +836,27 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
 
 .input-wrapper.focused .cursor-overlay {
   opacity: 1;
-  animation: cursorBlink 1s ease-in-out infinite;
+  animation: cursorBlink 250ms alternate infinite;
+}
+
+.input-wrapper.focused.has-selection .cursor-overlay {
+  animation: none;
+}
+
+.selection-overlay {
+  position: absolute;
+  height: 1.2em;
+  background: var(--color-primary, #3b82f6);
+  opacity: 0.3;
+  pointer-events: none;
+  /* Position based on character indices - calculate from center of slot */
+  left: calc(50% + (var(--sel-start) - var(--word-len, 0) / 2) * 0.65em);
+  width: calc((var(--sel-end) - var(--sel-start)) * 0.65em);
 }
 
 @keyframes cursorBlink {
-  0%, 49% {
-    opacity: 1;
-  }
-  50%, 100% {
-    opacity: 0;
-  }
+  0%, 50% { opacity: 1; }
+  80%, 100% { opacity: 0; }
 }
 
 .slot-reel.invalid-word .slot-word {
@@ -814,23 +880,13 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
   flex: 1;
   width: 100%;
   height: 100%;
-  padding: 0.875rem 1rem;
-  font-size: 1rem;
-  font-family: inherit;
-  border: 1px solid transparent;
   border-radius: var(--radius-sm, 6px);
-  background: transparent;
-  color: transparent;
-  caret-color: transparent;
-  outline: none;
-  box-sizing: border-box;
   position: relative;
   z-index: 0;
 }
 
 .pairing-input.hidden-input {
-  color: transparent;
-  caret-color: transparent;
+  opacity: 0;
 }
 
 .pairing-input:disabled {
@@ -862,10 +918,6 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
   animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 .device-info {
   display: flex;
   flex-direction: column;
@@ -886,9 +938,18 @@ defineExpose({ reset, deny, code, handleInput, loading, error })
 }
 
 .error-message {
-  margin: 0;
+  margin: 0.5rem 0 0;
   font-size: 0.875rem;
   color: var(--color-error, #ef4444);
-  margin-bottom: 1rem;
+}
+
+.device-actions {
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.device-actions button {
+  flex: 1;
 }
 </style>

frontend/src/components/RemoteAuthRequest.vue

@@ -8,7 +8,7 @@
     <!-- Error state -->
     <div v-else-if="error" class="error-section">
       <p class="error-message">{{ error }}</p>
-      <button class="btn-primary" @click="retry" style="margin-top: 0.75rem;">Try Again</button>
+      <button class="btn-primary" @click="retry">Try Again</button>
     </div>
 
     <!-- Connecting phase -->
@@ -56,7 +56,7 @@
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 import aWebSocket from '@/utils/awaitable-websocket'
-import { dec as b64dec, enc as b64enc } from '@/utils/base64url'
+import { b64dec, b64enc } from '@/utils/base64url'
 import { getSettings } from '@/utils/settings'
 import { solvePoW } from '@/utils/pow'
 import { words } from '@/utils/wordlist'
@@ -163,6 +163,9 @@ async function startRemoteAuth() {
 
     // PoW challenge
     const powChallenge = await ws.receive_json()
+    if (powChallenge.status) {
+      throw new Error(powChallenge.detail || `Failed to connect: ${powChallenge.status}`)
+    }
     if (powChallenge.pow) {
       const challenge = b64dec(powChallenge.pow.challenge)
       const nonces = await solvePoW(challenge, powChallenge.pow.work)
@@ -196,7 +199,7 @@ async function startRemoteAuth() {
       } else if (msg.status === 'authenticated') {
         // Success
         completed.value = true
-        emit('authenticated', { session_token: msg.session_token })
+        emit('authenticated', { exchange_code: msg.exchange_code })
         break
       } else if (msg.status === 'denied') {
         // Explicitly denied by the authenticating device
@@ -293,10 +296,6 @@ defineExpose({ retry, cancel })
   animation: spin 0.8s linear infinite;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 .auth-display {
   display: flex;
   flex-direction: column;
@@ -360,16 +359,8 @@ defineExpose({ retry, cancel })
 }
 
 .slot-reel {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  min-width: 0;
-  height: 1.8em;
   overflow: hidden;
-  position: relative;
   background: var(--color-surface, rgba(255, 255, 255, 0.5));
-  border-radius: 3px;
 }
 
 .slot-machine:not(.stopped) .slot-reel:nth-child(1) {
@@ -507,6 +498,10 @@ defineExpose({ retry, cancel })
   color: var(--color-error, #ef4444);
 }
 
+.error-section button {
+  margin-top: 0.75rem;
+}
+
 /* Responsive adjustments */
 @media (max-width: 640px) {
   .auth-content {

frontend/src/components/RestrictedAuth.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-shell">
-    <div v-if="status.show" class="global-status" style="display: block;">
+    <div v-if="status.show" class="global-status show">
       <div :class="['status', status.type]">
         {{ status.message }}
       </div>
@@ -18,7 +18,7 @@
           <div class="section-body center">
             <!-- Local passkey authentication view -->
             <div v-if="authView === 'local'" class="auth-view">
-              <div class="button-row center">
+              <div class="button-row button-row--center" ref="buttonRow">
                 <slot name="actions"
                   :loading="loading"
                   :can-authenticate="canAuthenticate"
@@ -39,7 +39,7 @@
 
             <!-- Remote authentication view (request new remote auth) -->
             <div v-else-if="authView === 'remote'" class="auth-view">
-              <RemoteAuthInline
+              <RemoteAuthRequest
                 :active="authView === 'remote'"
                 @authenticated="handleRemoteAuthenticated"
                 @register="handleRemoteRegistration"
@@ -55,17 +55,23 @@
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
 import passkey from '@/utils/passkey'
 import { getSettings, uiBasePath } from '@/utils/settings'
-import { fetchJson, getUserFriendlyErrorMessage } from '@/utils/api'
-import RemoteAuthInline from '@/components/RemoteAuthRequest.vue'
+import { fetchJson, getUserFriendlyErrorMessage, settings as paskiaSettings } from 'paskia'
+import RemoteAuthRequest from '@/components/RemoteAuthRequest.vue'
+import { focusDialogButton } from '@/utils/keynav'
+import { updateThemeFromSession } from '@/utils/theme'
 
 const props = defineProps({
   mode: {
     type: String,
     default: 'login',
-    validator: (value) => ['login', 'reauth', 'forbidden'].includes(value)
+    validator: (value) => ['login', 'reauth', 'forbidden', 'oidc'].includes(value)
+  },
+  oidcQueryString: {
+    type: String,
+    default: null
   }
 })
 
@@ -75,12 +81,13 @@ const status = reactive({ show: false, message: '', type: 'info' })
 const initializing = ref(true)
 const loading = ref(false)
 const settings = ref(null)
-const userInfo = ref(null)
+const session = ref(null)
 const currentView = ref('initial') // 'initial', 'login', 'forbidden'
 const authView = ref('local') // 'local' or 'remote'
+const buttonRow = ref(null)
 let statusTimer = null
 
-const isAuthenticated = computed(() => !!userInfo.value?.authenticated)
+const isAuthenticated = computed(() => !!session.value)
 
 const canAuthenticate = computed(() => {
   if (initializing.value) return false
@@ -113,7 +120,7 @@ const headerMessage = computed(() => {
   return 'Please sign in with your passkey.'
 })
 
-const userDisplayName = computed(() => userInfo.value?.user?.user_name || 'User')
+const userDisplayName = computed(() => session.value?.ctx.user.display_name || 'User')
 
 function showMessage(message, type = 'info', duration = 3000) {
   status.show = true
@@ -138,22 +145,22 @@ async function fetchSettings() {
   }
 }
 
-async function fetchUserInfo() {
+async function validateSession() {
   try {
-    userInfo.value = await fetchJson('/auth/api/user-info', { method: 'POST' })
+    session.value = await fetchJson('/auth/api/validate', { method: 'POST', timeout: paskiaSettings.auth_ms })
+    updateThemeFromSession(session.value?.ctx)
     if (isAuthenticated.value && props.mode !== 'reauth') {
       currentView.value = 'forbidden'
-      emit('forbidden', userInfo.value)
+      emit('forbidden', session.value)
     } else {
       currentView.value = 'login'
     }
   } catch (error) {
-    console.error('Failed to load user info', error)
+    session.value = null
+    currentView.value = 'login'
     if (error.status !== 401 && error.status !== 403) {
       showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
     }
-    userInfo.value = null
-    currentView.value = 'login'
   }
 }
 
@@ -162,7 +169,7 @@ async function authenticateUser() {
   loading.value = true
   showMessage('Starting authentication…', 'info')
   let result
-  try { result = await passkey.authenticate() } catch (error) {
+  try { result = await passkey.authenticate(props.oidcQueryString) } catch (error) {
     loading.value = false
     const message = error?.message || 'Passkey authentication cancelled'
     const cancelled = message === 'Passkey authentication cancelled'
@@ -170,7 +177,13 @@ async function authenticateUser() {
     emit('auth-error', { message, cancelled })
     return
   }
-  try { await setSessionCookie(result) } catch (error) {
+  // OIDC flow: no session cookie, just emit the redirect_url
+  if (result.redirect_url) {
+    loading.value = false
+    emit('authenticated', result)
+    return
+  }
+  try { await exchangeCode(result) } catch (error) {
     loading.value = false
     const message = error?.message || 'Failed to establish session'
     showMessage(message, 'error', 4000)
@@ -185,8 +198,8 @@ async function logoutUser() {
   if (loading.value) return
   loading.value = true
   try {
-    await fetchJson('/auth/api/logout', { method: 'POST' })
-    userInfo.value = null
+    await fetchJson('/auth/api/logout', { method: 'POST', timeout: paskiaSettings.auth_ms })
+    session.value = null
     currentView.value = 'login'
     showMessage('Logged out. You can sign in with a different account.', 'info', 3000)
   } catch (error) {
@@ -201,13 +214,13 @@ function openProfile() {
   if (profileWindow) profileWindow.focus()
 }
 
-async function setSessionCookie(result) {
-  if (!result?.session_token) {
-    console.error('setSessionCookie called with missing session_token:', result)
-    throw new Error('Authentication response missing session_token')
+async function exchangeCode(result) {
+  if (!result?.exchange_code) {
+    console.error('exchangeCode called with missing exchange_code:', result)
+    throw new Error('Authentication response missing exchange_code')
   }
   return await fetchJson('/auth/api/set-session', {
-    method: 'POST', headers: { Authorization: `Bearer ${result.session_token}` }
+    method: 'POST', headers: { 'Authorization': `Bearer ${result.exchange_code}` }, timeout: paskiaSettings.auth_ms
   })
 }
 
@@ -222,7 +235,7 @@ function switchToLocal() {
 async function handleRemoteAuthenticated(result) {
   showMessage('Authenticated from another device!', 'success', 2000)
   try {
-    await setSessionCookie(result)
+    await exchangeCode(result)
   } catch (error) {
     const message = error?.message || 'Failed to establish session'
     showMessage(message, 'error', 4000)
@@ -255,9 +268,21 @@ function handleHeaderLinkClick(event) {
   }
 }
 
+// Autofocus primary button when the view becomes ready
+watch(initializing, (newVal) => {
+  if (!newVal) {
+    nextTick(() => focusDialogButton(buttonRow.value))
+  }
+})
+
 onMounted(async () => {
   await fetchSettings()
-  await fetchUserInfo()
+  // OIDC mode doesn't depend on session state - skip validation
+  if (props.mode !== 'oidc') {
+    await validateSession()
+  } else {
+    currentView.value = 'login'
+  }
   initializing.value = false
 
   // Add click handler for inline links
@@ -271,12 +296,11 @@ onUnmounted(() => {
 defineExpose({
   showMessage,
   isAuthenticated,
-  userInfo
+  session
 })
 </script>
 
 <style scoped>
-.button-row.center { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
 .user-line { margin: 0.5rem 0 0; font-weight: 500; color: var(--color-text); }
 main.view-root { min-height: 100vh; align-items: center; justify-content: center; padding: 2rem 1rem; }
 .surface.surface--tight {

frontend/src/components/SessionList.vue

@@ -1,49 +1,55 @@
 <template>
-  <section class="section-block" data-component="session-list-section">
+  <section :class="['section-block', sectionClass]" data-component="session-list-section">
     <div class="section-header">
       <h2>Active Sessions</h2>
       <p class="section-description">{{ sectionDescription }}</p>
     </div>
     <div class="section-body">
-      <div :class="['session-list']">
-        <template v-if="Array.isArray(sessions) && sessions.length">
-          <div v-for="(group, host) in groupedSessions" :key="host" class="session-group">
-            <h3 :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
-              <template v-if="host"><a :href="hostUrl(host)">🌐 {{ host }}</a></template>
-              <template v-else>🌐 Unbound host</template>
-            </h3>
-            <div class="session-group-sessions">
+      <div>
+        <template v-if="sessionsArray.length">
+          <div v-for="(group, key) in groupedSessions" :key="key" class="session-group" tabindex="0" @keydown="handleGroupKeydown($event, key)">
+            <span :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
+              <span class="session-group-icon">{{ group.isOIDC ? '🪪' : '🌐' }}</span>
+              <template v-if="group.isOIDC">{{ group.displayName }}</template>
+              <a v-else-if="key" :href="hostUrl(key)" tabindex="-1" target="_blank" rel="noopener noreferrer">{{ key }}</a>
+              <template v-else>Unbound host</template>
+            </span>
+            <div class="session-list">
               <div
                 v-for="session in group.sessions"
-                :key="session.id"
+                :key="session.key"
                 :class="['session-item', {
                   'is-current': session.is_current && !hoveredIp && !hoveredCredentialUuid,
-                  'is-hovered': hoveredSession?.id === session.id,
-                  'is-linked-credential': hoveredCredentialUuid === session.credential_uuid
+                  'is-hovered': hoveredSession?.key === session.key,
+                  'is-linked-credential': hoveredCredentialUuid === session.credential
                 }]"
-                tabindex="0"
+                tabindex="-1"
+                @mousedown.prevent
+                @click.capture="handleCardClick"
                 @focusin="handleSessionFocus(session)"
                 @focusout="handleSessionBlur($event)"
+                @keydown="handleItemKeydown($event, session)"
               >
                 <div class="item-top">
-                  <h4 class="item-title">{{ session.user_agent }}</h4>
+                  <h4 class="item-title">{{ session.user_agent || '—' }}</h4>
                   <div class="item-actions">
                     <span v-if="session.is_current && !hoveredIp && !hoveredCredentialUuid" class="badge badge-current">Current</span>
-                    <span v-else-if="hoveredSession?.id === session.id" class="badge badge-current">Selected</span>
-                    <span v-else-if="hoveredCredentialUuid === session.credential_uuid" class="badge badge-current">Linked</span>
-                    <span v-else-if="!hoveredCredentialUuid && isSameNetwork(session.ip)" class="badge">Same IP</span>
+                    <span v-else-if="hoveredSession?.key === session.key" class="badge badge-current">Selected</span>
+                    <span v-else-if="hoveredCredentialUuid === session.credential" class="badge badge-current">Linked</span>
+                    <span v-else-if="!hoveredCredentialUuid && isSameHost(session.ip)" class="badge">Same IP</span>
                     <button
                       @click="$emit('terminate', session)"
                       class="btn-card-delete"
-                      :disabled="isTerminating(session.id)"
-                      :title="isTerminating(session.id) ? 'Terminating...' : 'Terminate session'"
-                    >🗑️</button>
+                      :disabled="isTerminating(session.key)"
+                      :title="isTerminating(session.key) ? 'Terminating...' : 'Terminate session'"
+                      tabindex="-1"
+                    >❌</button>
                   </div>
                 </div>
                 <div class="item-details">
                   <div class="session-dates">
                     <span class="date-label">{{ formatDate(session.last_renewed) }}</span>
-                    <span class="date-value">{{ session.ip }}</span>
+                    <span class="date-value" @click="copyIp(session.ip)" title="Click to copy full IP">{{ displayIp(session.ip) }}</span>
                   </div>
                 </div>
               </div>
@@ -59,16 +65,23 @@
 <script setup>
 import { computed, ref } from 'vue'
 import { formatDate } from '@/utils/helpers'
+import { useAuthStore } from '@/stores/auth'
+import { hostIP } from '@/utils/helpers'
+import { navigateGrid, handleDeleteKey, handleEscape, getDirection } from '@/utils/keynav'
 
 const props = defineProps({
-  sessions: { type: Array, default: () => [] },
+  sessions: { type: Object, default: () => ({}) },
   emptyMessage: { type: String, default: 'You currently have no other active sessions.' },
   sectionDescription: { type: String, default: "Review where you're signed in and end any sessions you no longer recognize." },
   terminatingSessions: { type: Object, default: () => ({}) },
   hoveredCredentialUuid: { type: String, default: null },
+  navigationDisabled: { type: Boolean, default: false },
+  sectionClass: { type: String, default: '' },
 })
 
-const emit = defineEmits(['terminate', 'sessionHover'])
+const emit = defineEmits(['terminate', 'sessionHover', 'navigate-out'])
+
+const authStore = useAuthStore()
 
 const hoveredIp = ref(null)
 const hoveredSession = ref(null)
@@ -88,7 +101,95 @@ const handleSessionBlur = (event) => {
   }
 }
 
-const isTerminating = (sessionId) => !!props.terminatingSessions[sessionId]
+const handleCardClick = (event) => {
+  if (!event.currentTarget.matches(':focus')) {
+    event.currentTarget.focus()
+    event.stopPropagation()
+  }
+}
+
+const isTerminating = (sessionKey) => !!props.terminatingSessions[sessionKey]
+
+const handleGroupKeydown = (event, host) => {
+  const group = event.currentTarget
+  const sessionList = group.querySelector('.session-list')
+  const items = sessionList?.querySelectorAll('.session-item')
+  const allGroups = Array.from(document.querySelectorAll('.session-group'))
+  const groupIndex = allGroups.indexOf(group)
+
+  // Enter on group header opens link (always allowed)
+  if (event.key === 'Enter' && event.target === group) {
+    if (host) group.querySelector('a')?.click()
+    return
+  }
+
+  if (props.navigationDisabled) return
+
+  // Arrow keys to enter the grid from the group
+  const direction = getDirection(event)
+  if (['down', 'right'].includes(direction) && event.target === group) {
+    event.preventDefault()
+    items?.[0]?.focus()
+    return
+  }
+
+  // Up/Left from group navigates to previous group or out
+  if (['up', 'left'].includes(direction) && event.target === group) {
+    event.preventDefault()
+    if (groupIndex > 0) {
+      allGroups[groupIndex - 1].focus()
+    } else {
+      emit('navigate-out', 'up')
+    }
+    return
+  }
+
+  // Escape emits navigate-out
+  handleEscape(event, (dir) => emit('navigate-out', dir))
+}
+
+const handleItemKeydown = (event, session) => {
+  // Handle delete (always allowed even with modal)
+  handleDeleteKey(event, () => {
+    if (!isTerminating(session.key)) emit('terminate', session)
+  })
+  if (event.defaultPrevented) return
+
+  if (props.navigationDisabled) return
+
+  // Arrow key navigation
+  const direction = getDirection(event)
+  if (direction) {
+    event.preventDefault()
+    const group = event.currentTarget.closest('.session-group')
+    const sessionListEl = group.querySelector('.session-list')
+    const result = navigateGrid(sessionListEl, event.currentTarget, direction, { itemSelector: '.session-item' })
+
+    // Custom boundary handling for session list
+    if (result === 'boundary') {
+      if (direction === 'left' || direction === 'up') {
+        // At left/top edge, focus group
+        group?.focus()
+      } else if (direction === 'down' || direction === 'right') {
+        // Try to navigate to next group or emit navigate-out
+        const allGroups = Array.from(document.querySelectorAll('.session-group'))
+        const groupIndex = allGroups.indexOf(group)
+
+        if (groupIndex < allGroups.length - 1) {
+          allGroups[groupIndex + 1].focus()
+        } else {
+          emit('navigate-out', 'down')
+        }
+      }
+    }
+  }
+
+  // Escape focuses the group
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    event.currentTarget.closest('.session-group')?.focus()
+  }
+}
 
 const hostUrl = (host) => {
   // Assume http if there's a port number, https otherwise
@@ -96,111 +197,48 @@ const hostUrl = (host) => {
   return `${protocol}://${host}`
 }
 
-// Extract /64 prefix for IPv6, or return full IP for IPv4
-const getNetworkPrefix = ip => {
-  if (!ip) return null
-
-  // IPv4?
-  if (!ip.includes(':')) return ip
-
-  // Normalize IPv6 using URL
-  // Wrap in brackets so URL accepts it
-  const norm = new URL(`http://[${ip}]/`).hostname
-
-  // norm is now fully expanded, e.g. "2001:0db8:0000:0000:0000:0000:0000:0001"
-  const parts = norm.split(':')
-  return parts.slice(0, 4).join(':')
+const copyIp = async (ip) => {
+  if (!ip) return
+  try {
+    await navigator.clipboard.writeText(ip)
+    authStore.showMessage('Full IP copied to clipboard!', 'success', 2000)
+  } catch (err) {
+    console.error('Failed to copy IP:', err)
+    authStore.showMessage('Failed to copy IP', 'error', 3000)
+  }
 }
 
-const currentNetworkPrefix = computed(() => {
-  // Use hovered IP if available, otherwise fall back to current session
-  if (hoveredIp.value) return getNetworkPrefix(hoveredIp.value)
-  const current = props.sessions.find(s => s.is_current)
-  return current ? getNetworkPrefix(current.ip) : null
+const displayIp = ip => hostIP(ip) ?? ip
+
+// Convert sessions dict to array with key attached
+const sessionsArray = computed(() =>
+  Object.entries(props.sessions || {}).map(([key, session]) => ({ ...session, key }))
+)
+
+const currentHostIP = computed(() => {
+  if (hoveredIp.value) return hostIP(hoveredIp.value)
+  const current = sessionsArray.value.find(s => s.is_current)
+  return current ? hostIP(current.ip) : null
 })
 
-const isSameNetwork = (ip) => {
-  if (!currentNetworkPrefix.value || !ip) return false
-  return getNetworkPrefix(ip) === currentNetworkPrefix.value
-}
+const isSameHost = ip => currentHostIP.value && hostIP(ip) === currentHostIP.value
 
 const groupedSessions = computed(() => {
   const groups = {}
-  for (const session of props.sessions) {
-    const host = session.host || ''
-    if (!groups[host]) {
-      groups[host] = { sessions: [], isCurrentSite: false }
-    }
-    groups[host].sessions.push(session)
-    if (session.is_current_host) {
-      groups[host].isCurrentSite = true
+  for (const session of sessionsArray.value) {
+    const groupKey = session.client || session.host || ''
+    if (!groups[groupKey]) {
+      groups[groupKey] = { sessions: [], isCurrentSite: false, isOIDC: !!session.client, displayName: session.client_name || groupKey }
     }
+    groups[groupKey].sessions.push(session)
+    if (session.is_current_host) groups[groupKey].isCurrentSite = true
   }
-  // Sort sessions within each group by last_renewed descending
-  for (const host in groups) {
-    groups[host].sessions.sort((a, b) => new Date(b.last_renewed) - new Date(a.last_renewed))
-  }
-  // Sort groups by host name (natural sort)
+  for (const groupKey in groups) groups[groupKey].sessions.sort((a, b) => new Date(b.last_renewed) - new Date(a.last_renewed))
   const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' })
-  const sortedHosts = Object.keys(groups).sort(collator.compare)
-  const sortedGroups = {}
-  for (const host of sortedHosts) {
-    sortedGroups[host] = groups[host]
-  }
-  return sortedGroups
+  const sorted = Object.entries(groups).sort(([, a], [, b]) => {
+    if (a.isOIDC !== b.isOIDC) return a.isOIDC ? 1 : -1
+    return collator.compare(a.displayName, b.displayName) || collator.compare(a.sessions[0]?.client || '', b.sessions[0]?.client || '')
+  })
+  return Object.fromEntries(sorted)
 })
 </script>
-
-<style>
-.session-meta-info {
-  grid-column: span 2;
-}
-[data-component="session-list-section"] .session-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5em;
-}
-.session-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-}
-.session-group-host {
-  font-size: 1em;
-  font-weight: 600;
-  margin: 0;
-}
-.session-group-host a {
-  color: inherit;
-  text-decoration: none;
-}
-.session-group-host a:hover {
-  text-decoration: underline;
-}
-.session-group-host.is-current-site {
-  color: var(--color-accent);
-}
-.session-group-sessions {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
-  gap: 0.5em;
-  align-items: start;
-}
-.session-group-sessions .session-item {
-  width: auto;
-  height: auto;
-  padding: 0.75rem;
-  gap: 0.5rem;
-}
-.session-group-sessions .session-item .item-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.session-group-sessions .session-item .item-details {
-  margin-left: 0;
-}
-.session-group-sessions .session-item .session-dates {
-  grid-template-columns: auto 1fr;
-}
-</style>

frontend/src/components/StatusMessage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="authStore.status.show" class="global-status" style="display: block;">
+  <div v-if="authStore.status.show" class="global-status show">
     <div :class="['status', authStore.status.type]">
       {{ authStore.status.message }}
     </div>

frontend/src/components/ThemeSelector.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="theme-selector" @click.stop>
+    <button v-for="t in themes" :key="t.value" class="theme-icon" :class="{ hidden: isHidden(t.value) }"
+      :style="{ top: getPos(t.value).y + 'px', left: getPos(t.value).x + 'px' }" :title="t.title"
+      @click="handleClick(t.value)">{{ t.icon }}</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { apiJson } from 'paskia'
+import { updateThemeFromSession, getCachedTheme } from '@/utils/theme'
+
+const open = ref(false), closing = ref(false), closingValue = ref(null), selected = ref(getCachedTheme())
+const themes = [{ value: '', icon: '🌓', title: 'Auto' }, { value: 'light', icon: '☀️', title: 'Light' }, { value: 'dark', icon: '🌙', title: 'Dark' }]
+const center = { x: 16, y: 16 }
+const expanded = { '': { x: 16, y: 0 }, light: { x: 0, y: 28 }, dark: { x: 32, y: 28 } }
+
+const getPos = v => closing.value ? (v === closingValue.value ? center : expanded[v]) : open.value ? expanded[v] : (v === selected.value ? center : expanded[v])
+const isHidden = v => closing.value ? v !== closingValue.value : !open.value && v !== selected.value
+
+function close(v) {
+  closingValue.value = v
+  closing.value = true
+  setTimeout(() => { open.value = closing.value = false; closingValue.value = null }, 200)
+}
+
+function handleClick(v) {
+  if (!open.value) { open.value = true; return }
+  close(v)
+  setTimeout(() => {
+    selected.value = v
+    updateThemeFromSession({ user: { theme: v } }, true)
+    apiJson('/auth/api/user/theme', { method: 'PATCH', body: { theme: v } }).catch(() => {})
+  }, 200)
+}
+
+function onOutside(e) { if (open.value && !closing.value && !e.target.closest('.theme-selector')) close(selected.value) }
+onMounted(() => document.addEventListener('click', onOutside))
+onUnmounted(() => document.removeEventListener('click', onOutside))
+</script>
+
+<style scoped>
+.theme-selector { position: relative; width: 2rem; height: 2rem; }
+.theme-icon { position: absolute; transform: translate(-50%, -50%); background: none; border: none; font-size: 1.25rem; cursor: pointer; padding: 0.25rem; transition: top 0.2s, left 0.2s, opacity 0.15s; }
+.theme-icon:hover, .theme-icon:focus-visible { transform: translate(-50%, -50%) scale(1.15); }
+.theme-icon.hidden { opacity: 0; pointer-events: none; }
+</style>

frontend/src/components/UserBasicInfo.vue

@@ -1,22 +1,50 @@
 <template>
   <div v-if="userLoaded" class="user-info" :class="{ 'has-extra': $slots.default }">
-    <h3 class="user-name-heading">
-      <span class="icon">👤</span>
-      <span class="user-name-row">
-        <span class="display-name" :title="name">{{ name }}</span>
-        <button v-if="canEdit && updateEndpoint" class="mini-btn" @click="emit('editName')" title="Edit name">✏️</button>
-      </span>
-    </h3>
-    <div v-if="orgDisplayName || roleName" class="org-role-sub">
-      <div class="org-line" v-if="orgDisplayName">{{ orgDisplayName }}</div>
-      <div class="role-line" v-if="roleName">{{ roleName }}</div>
+    <div class="user-info-content">
+      <ProfilePicture
+        :src="avatarUrl"
+        :render-version="avatarRenderVersion"
+        :clickable="avatarClickable"
+        :loading="loading"
+        :title="avatarClickable ? 'Change profile picture' : ''"
+        width="5.25rem"
+        height="5.25rem"
+        radius="var(--radius-sm)"
+        fallback-size="2.8em"
+        class="user-picture"
+        :class="avatarClickable ? 'user-picture-btn' : ''"
+        @click="emit('avatar-click')"
+      />
+      <h3 class="user-name-heading">
+        <span class="user-name-row">
+          <span class="display-name" :title="name">{{ name }}</span>
+          <button v-if="canEdit && updateEndpoint" class="mini-btn" @click="emit('edit')" title="Edit profile">✏️</button>
+        </span>
+      </h3>
+      <div v-if="orgDisplayName || roleName" class="org-role-sub">
+        <div class="org-line" v-if="orgDisplayName">{{ orgDisplayName }}</div>
+        <div class="role-line" v-if="roleName">{{ roleName }}</div>
+      </div>
+      <div class="info-fields-block">
+        <div v-if="preferred_username" class="contact-item">🆔 {{ preferred_username }}</div>
+        <a v-if="email" :href="`mailto:${email}`" class="contact-link">✉️ {{ email }}</a>
+        <a v-if="telephone" :href="`tel:${telephone}`" class="contact-link">📞 {{ telephone }}</a>
+      </div>
+      <div class="info-line">
+        <span v-if="visits">
+          <span class="info-date">{{ formatDate(createdAt) }}</span>
+          <span class="info-punct"> – </span>
+          <span class="info-date">{{ formatDate(lastSeen) }}</span>
+          <span class="info-punct"> ×</span>
+          <span class="info-count">{{ visits }}</span>
+        </span>
+        <span v-else>
+          <span class="info-label">Created </span>
+          <span class="info-date">{{ formatDate(createdAt) }}</span>
+          <span class="info-punct"> — Never signed in</span>
+        </span>
+      </div>
     </div>
-    <span class="info-label"><strong>Visits:</strong></span>
-    <span class="info-value">{{ visits || 0 }}</span>
-    <span class="info-label"><strong>Registered:</strong></span>
-    <span class="info-value">{{ formatDate(createdAt) }}</span>
-    <span class="info-label"><strong>Last seen:</strong></span>
-    <span class="info-value">{{ formatDate(lastSeen) }}</span>
     <div v-if="$slots.default" class="user-info-extra">
       <slot></slot>
     </div>
@@ -24,84 +52,87 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
-import { useAuthStore } from '@/stores/auth'
+import { computed } from 'vue'
+import ProfilePicture from '@/components/ProfilePicture.vue'
 import { formatDate } from '@/utils/helpers'
 
 const props = defineProps({
   name: { type: String, required: true },
+  avatarUrl: { type: String, default: null },
+  avatarRenderVersion: { type: [Number, String], default: 0 },
+  email: { type: String, default: null },
+  preferred_username: { type: String, default: null },
+  telephone: { type: String, default: null },
   visits: { type: [Number, String], default: 0 },
   createdAt: { type: [String, Number, Date], default: null },
   lastSeen: { type: [String, Number, Date], default: null },
   updateEndpoint: { type: String, default: null },
   canEdit: { type: Boolean, default: true },
+  avatarClickable: { type: Boolean, default: false },
   loading: { type: Boolean, default: false },
   orgDisplayName: { type: String, default: '' },
   roleName: { type: String, default: '' }
 })
 
-const emit = defineEmits(['saved', 'editName'])
-const authStore = useAuthStore()
-
+const emit = defineEmits(['saved', 'edit', 'avatar-click'])
 const userLoaded = computed(() => !!props.name)
 </script>
 
 <style scoped>
 .user-info.has-extra {
-  grid-template-columns: auto 1fr;
+  grid-template-columns: minmax(0, 1fr) 14rem;
   grid-template-areas:
-    "heading heading"
-    "org org"
-    "label1 value1"
-    "label2 value2"
-    "label3 value3"
-    "extra extra";
+    "content extra";
+  gap: 1.5rem;
 }
 
 .user-info:not(.has-extra) {
-  grid-template-columns: auto 1fr;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-areas:
-    "heading heading"
-    "org org"
-    "label1 value1"
-    "label2 value2"
-    "label3 value3";
+    "content";
 }
 
-@media (min-width: 769px) {
+@media (max-width: 720px) {
   .user-info.has-extra {
-    grid-template-columns: auto 1fr 2fr;
+    grid-template-columns: 1fr;
     grid-template-areas:
-      "heading heading extra"
-      "org org extra"
-      "label1 value1 extra"
-      "label2 value2 extra"
-      "label3 value3 extra";
+      "content"
+      "extra";
   }
 }
 
-.user-name-heading { grid-area: heading; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.25rem 0; }
-.org-role-sub { grid-area: org; display:flex; flex-direction:column; margin: -0.15rem 0 0.25rem; }
-.org-line { font-size: .7rem; font-weight:600; line-height:1.1; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
-.role-line { font-size:.65rem; color: var(--color-text-muted); line-height:1.1; }
-.info-label:nth-of-type(1) { grid-area: label1; }
-.info-value:nth-of-type(2) { grid-area: value1; }
-.info-label:nth-of-type(3) { grid-area: label2; }
-.info-value:nth-of-type(4) { grid-area: value2; }
-.info-label:nth-of-type(5) { grid-area: label3; }
-.info-value:nth-of-type(6) { grid-area: value3; }
-.user-info-extra { grid-area: extra; padding-left: 2rem; border-left: 1px solid var(--color-border); }
-.user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
-.user-name-row.editing { flex: 1 1 auto; }
-.icon { flex: 0 0 auto; }
-.display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.name-input { width: auto; flex: 1 1 140px; min-width: 120px; padding: 6px 8px; font-size: 0.9em; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
-.user-name-heading .name-input { width: auto; }
-.name-input:focus { outline: none; border-color: var(--color-accent); box-shadow: var(--focus-ring); }
-.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; background: var(--color-surface-muted); border: 1px solid var(--color-border-strong); border-radius: 6px; cursor: pointer; transition: background 0.2s, transform 0.15s, color 0.2s ease; color: var(--color-text); }
+.user-info-content {
+  grid-area: content;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
+  grid-template-areas:
+    "picture heading fields"
+    "picture org fields"
+    "picture info info";
+  gap: 0 1rem;
+  min-width: 0;
+}
+
+:deep(.user-picture) { grid-area: picture; align-self: stretch; }
+.user-name-heading { grid-area: heading; display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 0.25rem 0; min-width: 0; }
+.org-role-sub { grid-area: org; display: flex; flex-direction: column; min-width: 0; }
+.org-line { font-size: .7rem; font-weight: 600; line-height: 1.1; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.role-line { font-size: .65rem; color: var(--color-text-muted); line-height: 1.1; }
+.info-fields-block { grid-area: fields; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
+.contact-item { display: block; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.contact-link { color: var(--color-text); text-decoration: none; display: block; transition: transform 0.1s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.contact-link:hover { transform: scale(1.01); }
+.info-line { grid-area: info; line-height: 1.4; font-size: 0.9em; }
+.info-date { color: var(--color-text) !important; }
+.info-label { color: var(--color-text) !important; }
+.info-punct { color: var(--color-text-muted) !important; }
+.info-count { color: var(--color-text-muted) !important; }
+.user-info-extra { grid-area: extra; padding-left: 1rem; border-left: 1px solid var(--color-border); flex-shrink: 0; }
+.user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; min-width: 0; }
+.display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.mini-btn { width: auto; padding: 4px 6px; margin: 0; font-size: 0.75em; line-height: 1; cursor: pointer; background: transparent; }
 .mini-btn:hover:not(:disabled) { background: var(--color-accent-soft); color: var(--color-accent); }
 .mini-btn:active:not(:disabled) { transform: translateY(1px); }
 .mini-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-@media (max-width: 768px) { .user-info-extra { padding-left: 0; padding-top: 1rem; border-left: none; border-top: 1px solid var(--color-border); } }
-@media (max-width: 480px) { .user-name-heading { flex-direction: column; align-items: flex-start; } .user-name-row.editing { width: 100%; } .display-name { max-width: 100%; } }
+@media (max-width: 720px) { .user-info-extra { padding-left: 0; padding-top: 1rem; margin-top: 1rem; border-left: none; border-top: 1px solid var(--color-border); } }
 </style>

frontend/src/stores/auth.js

@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia'
 import { register, authenticate } from '@/utils/passkey'
 import { getSettings } from '@/utils/settings'
-import { apiJson } from '@/utils/api'
+import { apiJson, settings as paskiaSettings } from 'paskia'
+import { updateThemeFromSession } from '@/utils/theme'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
     // Auth State
     userInfo: null, // Contains the full user info response: {user, credentials, aaguid_info}
+    ctx: null, // Session context from validate
     isLoading: false,
 
     // Settings
@@ -26,16 +28,18 @@ export const useAuthStore = defineStore('auth', {
     setLoading(flag) {
       this.isLoading = !!flag
     },
-    showMessage(message, type = 'info', duration = 3000) {
+    showMessage(message, type = 'info', duration = null) {
+      // Default duration: 5 seconds for errors, 3 seconds for others
+      const effectiveDuration = duration ?? (type === 'error' ? 5000 : 3000)
       this.status = {
         message,
         type,
         show: true
       }
-      if (duration > 0) {
+      if (effectiveDuration > 0) {
         setTimeout(() => {
           this.status.show = false
-        }, duration)
+        }, effectiveDuration)
       }
     },
     async setSessionCookie(result) {
@@ -46,6 +50,7 @@ export const useAuthStore = defineStore('auth', {
       return await apiJson('/auth/api/set-session', {
         method: 'POST',
         headers: {'Authorization': `Bearer ${result.session_token}`},
+        timeout: paskiaSettings.auth_ms,
       })
     },
     async register() {
@@ -83,7 +88,8 @@ export const useAuthStore = defineStore('auth', {
     },
     async loadUserInfo() {
       try {
-        this.userInfo = await apiJson('/auth/api/user-info', { method: 'POST' })
+        this.userInfo = await apiJson('/auth/api/user-info', { method: 'GET', timeout: paskiaSettings.auth_ms })
+        updateThemeFromSession(this.userInfo)
         console.log('User info loaded:', this.userInfo)
       } catch (error) {
         // Suppress toast for 401/403 errors - the auth iframe will handle these
@@ -99,9 +105,9 @@ export const useAuthStore = defineStore('auth', {
       await apiJson(`/auth/api/user/credential/${uuid}`, { method: 'DELETE' })
       await this.loadUserInfo()
     },
-    async terminateSession(sessionId) {
+    async terminateSession(sessionKey) {
       try {
-        const payload = await apiJson(`/auth/api/user/session/${sessionId}`, { method: 'DELETE' })
+        const payload = await apiJson(`/auth/api/user/session/${sessionKey}`, { method: 'DELETE' })
         if (payload?.current_session_terminated) {
           sessionStorage.clear()
           location.reload()
@@ -116,7 +122,7 @@ export const useAuthStore = defineStore('auth', {
     },
     async logout() {
       try {
-        await apiJson('/auth/api/logout', {method: 'POST'})
+        await apiJson('/auth/api/logout', {method: 'POST', timeout: paskiaSettings.auth_ms})
         sessionStorage.clear()
         location.reload()
       } catch (error) {
@@ -129,7 +135,7 @@ export const useAuthStore = defineStore('auth', {
     },
     async logoutEverywhere() {
       try {
-        await apiJson('/auth/api/user/logout-all', {method: 'POST'})
+        await apiJson('/auth/api/user/logout-all', {method: 'POST', timeout: paskiaSettings.auth_ms})
         sessionStorage.clear()
         location.reload()
       } catch (error) {

frontend/src/utils/api.js

@@ -1,378 +0,0 @@
-/**
- * API fetch wrapper that handles authentication errors with iframe-based re-authentication.
- *
- * When a 401 or 403 response is received with an `auth` object containing `iframe` URL,
- * this wrapper shows an authentication iframe and retries the original request after
- * successful authentication.
- */
-
-/** Default timeout for API requests in milliseconds */
-const DEFAULT_TIMEOUT_MS = 1000
-
-/**
- * Custom error class for API errors with full response context.
- */
-export class ApiError extends Error {
-  constructor(url, response, data) {
-    super(data?.detail || `Request failed: ${response.status}`)
-    this.name = 'ApiError'
-    this.url = url
-    this.status = response.status
-    this.statusText = response.statusText
-    this.data = data
-  }
-}
-
-/**
- * Custom error class for network/timeout errors.
- */
-export class NetworkError extends Error {
-  constructor(message, originalError = null) {
-    super(message)
-    this.name = 'NetworkError'
-    this.originalError = originalError
-  }
-}
-
-/**
- * Error thrown when user cancels authentication.
- */
-export class AuthCancelledError extends Error {
-  constructor() {
-    super('Authentication cancelled')
-    this.name = 'AuthCancelledError'
-  }
-}
-
-let authIframe = null
-let authPromise = null
-let authResolve = null
-let authReject = null
-
-// Cache for auth iframe URL by mode
-const authIframeUrlCache = {}
-
-/**
- * Get the auth iframe URL for a given mode.
- * Fetches from /auth/api/forward which returns URL in the auth.iframe field.
- * Results are cached per mode.
- * @param {string} mode - The auth mode ('login', 'reauth', 'forbidden')
- * @returns {Promise<string>} - The URL for the iframe
- */
-export async function getAuthIframeUrl(mode = 'login') {
-  if (authIframeUrlCache[mode]) {
-    return authIframeUrlCache[mode]
-  }
-
-  // Fetch from forward endpoint - it returns URL in auth.iframe on 401/403
-  const response = await fetch('/auth/api/forward', { credentials: 'include' })
-  if (response.status === 401 || response.status === 403) {
-    const data = await response.json()
-    if (data.auth?.iframe) {
-      // The iframe field now contains a URL with hash fragment
-      // If mode differs, update the hash param
-      let url = data.auth.iframe
-      if (mode !== data.auth.mode) {
-        url = url.replace(/mode=[^&]*/, `mode=${mode}`)
-      }
-      authIframeUrlCache[mode] = url
-      return url
-    }
-  }
-  throw new Error('Unable to fetch auth iframe URL')
-}
-
-/**
- * Check if an auth iframe is already open (from any source).
- * @returns {boolean}
- */
-export function isAuthIframeOpen() {
-  return !!document.getElementById('auth-iframe')
-}
-
-/**
- * Show the authentication iframe and return a promise that resolves on success.
- * If an auth iframe is already open (from any source), hooks into its completion.
- * @param {string} iframeUrl - The URL for the iframe src
- * @returns {Promise<void>}
- * @throws {AuthCancelledError} - If authentication is cancelled by user
- */
-export function showAuthIframe(iframeUrl) {
-  // If we already have a promise (from us), return it
-  if (authPromise) return authPromise
-
-  // If there's already an iframe in the DOM (from App.vue or elsewhere),
-  // create a promise that hooks into the message handler
-  if (document.getElementById('auth-iframe')) {
-    authPromise = new Promise((resolve, reject) => {
-      authResolve = resolve
-      authReject = reject
-    })
-    return authPromise
-  }
-
-  authPromise = new Promise((resolve, reject) => {
-    authResolve = resolve
-    authReject = reject
-  })
-
-  // Remove existing iframe if any
-  hideAuthIframe()
-
-  // Create new iframe for authentication using src URL
-  authIframe = document.createElement('iframe')
-  authIframe.id = 'auth-iframe'
-  authIframe.title = 'Authentication'
-  authIframe.allow = 'publickey-credentials-get; publickey-credentials-create'
-  authIframe.src = iframeUrl
-  document.body.appendChild(authIframe)
-
-  return authPromise
-}
-
-function hideAuthIframe() {
-  if (authIframe) {
-    authIframe.remove()
-    authIframe = null
-  }
-}
-
-function handleAuthMessage(event) {
-  const data = event.data
-  if (!data?.type) return
-
-  switch (data.type) {
-    case 'auth-success':
-      hideAuthIframe()
-      if (authResolve) {
-        authResolve()
-        authPromise = null
-        authResolve = null
-        authReject = null
-      }
-      break
-
-    case 'auth-back':
-    case 'auth-close-request':
-      hideAuthIframe()
-      if (authReject) {
-        authReject(new AuthCancelledError())
-        authPromise = null
-        authResolve = null
-        authReject = null
-      }
-      break
-
-    case 'auth-error':
-      // Keep iframe open for retry, but if cancelled, treat as back
-      if (data.cancelled && authReject) {
-        hideAuthIframe()
-        authReject(new AuthCancelledError())
-        authPromise = null
-        authResolve = null
-        authReject = null
-      }
-      break
-  }
-}
-
-// Install global message listener
-if (typeof window !== 'undefined') {
-  window.addEventListener('message', handleAuthMessage)
-}
-
-/**
- * Fetch wrapper that handles auth errors with iframe-based re-authentication.
- * Loops until successful or user cancels authentication.
- *
- * @param {string|URL} url - The URL to fetch
- * @param {RequestInit} [options] - Fetch options
- * @param {number} [options.timeout] - Timeout in ms (default: 10000, use 0 to disable)
- * @returns {Promise<Response>} - The fetch response
- * @throws {AuthCancelledError} - If authentication is cancelled by user
- * @throws {NetworkError} - If network error or timeout occurs
- */
-export async function apiFetch(url, options = {}) {
-  const { timeout = DEFAULT_TIMEOUT_MS, ...fetchOptions } = options
-
-  // Ensure credentials are included for cookie-based auth
-  fetchOptions.credentials = fetchOptions.credentials || 'include'
-
-  while (true) {
-    let response
-    try {
-      response = await fetch(url, {...fetchOptions, signal: timeout && AbortSignal.timeout(timeout)})
-    } catch (error) {
-      // Handle network errors and timeouts
-      if (error.name === 'TimeoutError') {
-        throw new NetworkError('Request timed out', error)
-      }
-      if (error.name === 'AbortError') {
-        // Re-throw abort errors as-is (user-initiated cancellation)
-        throw error
-      }
-      if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
-        throw new NetworkError('Unable to connect to server', error)
-      }
-      throw new NetworkError(error.message || 'Network error', error)
-    }
-
-    // Check for auth errors (401/403)
-    if (response.status === 401 || response.status === 403) {
-      // Try to parse the response to get the iframe URL
-      let authInfo = null
-      try {
-        const data = await response.clone().json()
-        authInfo = data.auth
-      } catch {
-        // If we can't parse JSON, no iframe available
-      }
-
-      // Authenticate via iframe (only in top-level window)
-      if (authInfo?.iframe && window === window.top) {
-        // Show auth iframe (or wait for existing one) and retry on success
-        // showAuthIframe returns existing promise if iframe is already open
-        await showAuthIframe(authInfo.iframe)
-        continue  // Retry the original request
-      }
-    }
-
-    return response
-  }
-}
-
-/**
- * Convenience method for JSON API calls.
- * Automatically sets Accept and Content-Type headers.
- * Returns parsed JSON directly if response is ok, throws ApiError otherwise.
- *
- * @param {string|URL} url - The URL to fetch
- * @param {RequestInit} [options] - Fetch options
- * @returns {Promise<any>} - Parsed JSON response
- * @throws {ApiError} - If response is not ok
- * @throws {NetworkError} - If network error or timeout occurs
- * @throws {AuthCancelledError} - If authentication is cancelled by user
- */
-export async function apiJson(url, options = {}) {
-  const fetchOptions = { ...options }
-
-  // Set default headers, allowing caller overrides
-  fetchOptions.headers = {
-    'Accept': 'application/json',
-    ...fetchOptions.headers,
-  }
-
-  // Set Content-Type for requests with JSON body
-  if (fetchOptions.body && typeof fetchOptions.body === 'object' && !(fetchOptions.body instanceof FormData)) {
-    fetchOptions.headers = {
-      'Content-Type': 'application/json',
-      ...fetchOptions.headers,
-    }
-    fetchOptions.body = JSON.stringify(fetchOptions.body)
-  }
-
-  const response = await apiFetch(url, fetchOptions)
-  const data = await response.json()
-
-  if (!response.ok) {
-    throw new ApiError(url, response, data)
-  }
-
-  return data
-}
-
-/**
- * Simple JSON fetch without auto-auth iframe handling.
- * Use this in contexts where showing an auth iframe would be inappropriate
- * (e.g., inside the auth iframe itself).
- *
- * @param {string|URL} url - The URL to fetch
- * @param {RequestInit} [options] - Fetch options
- * @returns {Promise<any>} - Parsed JSON response
- * @throws {ApiError} - If response is not ok
- */
-export async function fetchJson(url, options = {}) {
-  const fetchOptions = {
-    credentials: 'include',
-    ...options,
-    headers: {
-      'Accept': 'application/json',
-      ...options.headers,
-    },
-  }
-
-  const response = await fetch(url, fetchOptions)
-  const data = await response.json()
-
-  if (!response.ok) {
-    throw new ApiError(url, response, data)
-  }
-
-  return data
-}
-
-/**
- * Convert an error to a user-friendly message.
- * @param {Error} error - The error to convert
- * @returns {string} - User-friendly error message
- */
-export function getUserFriendlyErrorMessage(error) {
-  if (error instanceof NetworkError) {
-    return error.message
-  }
-  if (error instanceof ApiError) {
-    return error.message
-  }
-  if (error.name === 'TimeoutError') {
-    return 'Request timed out'
-  }
-  if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
-    return 'Unable to connect to server'
-  }
-  return error.message || 'An error occurred'
-}
-
-/**
- * Check if an error should show a toast to the user.
- * @param {Error} error - The error to check
- * @returns {boolean} - Whether to show a toast
- */
-export function shouldShowErrorToast(error) {
-  // Don't show toast for user cancellations
-  if (error instanceof AuthCancelledError) return false
-  if (error.name === 'AbortError') return false
-  // Don't show toast for 401/403 errors - the auth iframe will handle these
-  if (error instanceof ApiError && (error.status === 401 || error.status === 403)) return false
-  return true
-}
-
-/**
- * Create an API caller with error handling (toast + console.error).
- * Wraps apiJson calls with consistent error handling for apps.
- *
- * @param {Function} showMessage - Function to show toast messages: (message, type, duration) => void
- * @returns {Function} - Wrapped apiJson that handles errors
- */
-export function createApiCaller(showMessage) {
-  /**
-   * @param {string|URL} url - The URL to fetch
-   * @param {RequestInit} [options] - Fetch options
-   * @returns {Promise<any>} - Parsed JSON response, or undefined on error
-   */
-  return async function apiCall(url, options = {}) {
-    try {
-      return await apiJson(url, options)
-    } catch (error) {
-      if (!shouldShowErrorToast(error)) {
-        throw error
-      }
-      // Log full error details
-      console.error(`API error for ${url}:`, error instanceof ApiError ? { status: error.status, statusText: error.statusText, data: error.data } : error)
-      // Show user-friendly toast
-      showMessage(getUserFriendlyErrorMessage(error), 'error', 4000)
-      throw error
-    }
-  }
-}
-
-export default apiFetch

frontend/src/utils/base64url.js

@@ -13,7 +13,7 @@
  * @param {string} str - Base64url encoded string
  * @returns {Uint8Array} - Decoded bytes
  */
-export function dec(str) {
+export function b64dec(str) {
   // Convert URL-safe characters to standard base64
   const base64 = str.replace(/-/g, '+').replace(/_/g, '/')
   // Add padding if needed
@@ -26,7 +26,7 @@ export function dec(str) {
  * @param {Uint8Array} bytes - Bytes to encode
  * @returns {string} - Base64url encoded string (no padding)
  */
-export function enc(bytes) {
+export function b64enc(bytes) {
   const base64 = btoa(String.fromCharCode(...bytes))
   // Convert to URL-safe and remove padding
   return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')

frontend/src/utils/helpers.js

@@ -26,3 +26,18 @@ export function getCookie(name) {
 }
 
 export const goBack = () => history.back() || window.close()
+
+// IPv4 unchanged, IPv6 returns /64 network prefix in compact form
+export const hostIP = ip => {
+  try {
+    if (!ip || !ip.includes(':')) return ip
+    const strip = s => s.replace(/^\[|\]$/g, '')
+    const norm = strip(new URL(`http://[${ip}]/`).hostname)
+    const [l, r] = norm.split('::').map(s => s ? s.split(':') : [])
+    const full = r ? [...l, ...Array(8 - l.length - r.length).fill('0'), ...r] : l
+    return strip(new URL(`http://[${full.slice(0, 4).join(':')}::]/`).hostname).replace(/::$/, '')
+  } catch (e) {
+    console.error('hostIP processing failed for:', ip, e)
+    return ip
+  }
+}

frontend/src/utils/keynav.js

@@ -0,0 +1,479 @@
+/**
+ * Keyboard Navigation Module
+ *
+ * Provides reusable arrow key navigation for button groups and grids.
+ *
+ * Concepts:
+ * - Group: A container with focusable elements (buttons, links, items)
+ * - Button row: Left/right arrows navigate between buttons, up/down navigate to adjacent groups
+ * - Grid: A responsive grid of items; arrows follow the visual grid layout
+ *
+ * Data attributes for customization:
+ * - data-nav-group: Marks a navigation group container
+ * - data-nav-primary: Marks the preferred element to focus when entering a group
+ * - data-nav-items: CSS selector for focusable items within the group (default: 'button, a, [tabindex="0"], [tabindex="-1"]:not([disabled])')
+ *
+ * Automatic navigation:
+ * - Buttons/links inside .button-row or .modal-actions get automatic left/right arrow navigation
+ * - No need for explicit @keydown handlers on elements
+ * - Call initKeyboardNavigation() once at app startup to enable global navigation
+ */
+
+// Direction mapping from key events
+const DIRECTION_MAP = {
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+  ArrowUp: 'up',
+  ArrowDown: 'down'
+}
+
+// Input types that use left/right arrows for internal cursor movement
+const TEXT_INPUT_TYPES = new Set([
+  'text', 'email', 'password', 'search', 'tel', 'url', 'number'
+])
+
+/**
+ * Get the direction from a keyboard event.
+ * For text inputs with content, left/right arrows return null to preserve cursor movement.
+ * @param {KeyboardEvent} event
+ * @returns {string|null} 'left', 'right', 'up', 'down', or null
+ */
+export const getDirection = (event) => {
+  const direction = DIRECTION_MAP[event.key]
+  if (!direction) return null
+
+  // For text inputs, preserve left/right for cursor movement when there's content
+  const target = event.target
+  const isTextInput = (target.tagName === 'INPUT' && TEXT_INPUT_TYPES.has(target.type)) || target.tagName === 'TEXTAREA'
+  if (isTextInput && (direction === 'left' || direction === 'right')) {
+    // Only allow navigation when input is empty
+    if (target.value !== '') return null
+  }
+
+  return direction
+}
+
+/**
+ * Get focusable elements within a container
+ * @param {HTMLElement} container
+ * @param {string} selector - CSS selector for items (optional)
+ * @returns {HTMLElement[]}
+ */
+export const getFocusableItems = (container, selector = null) => {
+  if (!container) return []
+  const sel = selector || container.dataset?.navItems || 'button:not([disabled]), a, [tabindex="0"], [tabindex="-1"]:not([disabled])'
+  return Array.from(container.querySelectorAll(sel))
+}
+
+/**
+ * Get grid layout information for a container
+ * @param {HTMLElement} container
+ * @param {string} itemSelector - CSS selector for grid items
+ * @returns {{ items: HTMLElement[], cols: number } | null}
+ */
+export const getGridInfo = (container, itemSelector) => {
+  const items = getFocusableItems(container, itemSelector)
+  if (items.length === 0) return null
+
+  // Calculate columns by checking which items share the same top position
+  const firstTop = items[0].getBoundingClientRect().top
+  let cols = 0
+  for (const item of items) {
+    if (Math.abs(item.getBoundingClientRect().top - firstTop) < 5) cols++
+    else break
+  }
+  return { items, cols: Math.max(1, cols) }
+}
+
+/**
+ * Navigate within a horizontal button row
+ * @param {HTMLElement} container - The container element
+ * @param {HTMLElement} current - Currently focused element
+ * @param {string} direction - 'left', 'right', 'up', or 'down'
+ * @param {Object} options
+ * @param {string} options.itemSelector - CSS selector for buttons
+ * @returns {'moved'|'boundary'|'none'} Result of navigation
+ */
+export const navigateButtonRow = (container, current, direction, options = {}) => {
+  const items = getFocusableItems(container, options.itemSelector)
+  if (items.length === 0) return 'none'
+
+  const currentIndex = items.indexOf(current)
+  if (currentIndex === -1) return 'none'
+
+  if (direction === 'left') {
+    if (currentIndex > 0) {
+      items[currentIndex - 1].focus()
+      return 'moved'
+    }
+    return 'boundary'
+  }
+
+  if (direction === 'right') {
+    if (currentIndex < items.length - 1) {
+      items[currentIndex + 1].focus()
+      return 'moved'
+    }
+    return 'boundary'
+  }
+
+  // Up/down are always boundaries for button rows
+  return 'boundary'
+}
+
+/**
+ * Navigate within a responsive grid
+ * @param {HTMLElement} container - The grid container
+ * @param {HTMLElement} current - Currently focused element
+ * @param {string} direction - 'left', 'right', 'up', or 'down'
+ * @param {Object} options
+ * @param {string} options.itemSelector - CSS selector for grid items
+ * @returns {'moved'|'boundary'|'none'} Result of navigation
+ */
+export const navigateGrid = (container, current, direction, options = {}) => {
+  const grid = getGridInfo(container, options.itemSelector)
+  if (!grid) return 'none'
+
+  const { items, cols } = grid
+  const currentIndex = items.indexOf(current)
+  if (currentIndex === -1) return 'none'
+
+  const row = Math.floor(currentIndex / cols)
+  const col = currentIndex % cols
+  let newIndex = currentIndex
+
+  switch (direction) {
+    case 'left':
+      if (col === 0) return 'boundary'
+      newIndex = currentIndex - 1
+      break
+    case 'right':
+      if (currentIndex >= items.length - 1) return 'boundary'
+      newIndex = currentIndex + 1
+      break
+    case 'up':
+      if (row === 0) return 'boundary'
+      newIndex = currentIndex - cols
+      break
+    case 'down':
+      if (currentIndex + cols >= items.length) return 'boundary'
+      newIndex = currentIndex + cols
+      break
+    default:
+      return 'none'
+  }
+
+  if (newIndex !== currentIndex) {
+    items[newIndex].focus()
+    return 'moved'
+  }
+  return 'none'
+}
+
+/**
+ * Focus the preferred element in a group (primary or first focusable)
+ * @param {HTMLElement} container
+ * @param {Object} options
+ * @param {string} options.primarySelector - CSS selector for primary element
+ * @param {string} options.itemSelector - CSS selector for items
+ * @returns {HTMLElement|null} The focused element, or null if none found
+ */
+export const focusPreferred = (container, options = {}) => {
+  if (!container) return null
+
+  // First try data-nav-primary
+  const primary = container.querySelector('[data-nav-primary]') ||
+                  (options.primarySelector && container.querySelector(options.primarySelector))
+  if (primary) {
+    primary.focus()
+    return primary
+  }
+
+  // Fall back to first focusable
+  const items = getFocusableItems(container, options.itemSelector)
+  if (items.length > 0) {
+    items[0].focus()
+    return items[0]
+  }
+
+  return null
+}
+
+/**
+ * Focus a specific item by index in a group
+ * @param {HTMLElement} container
+ * @param {number} index - Index of item to focus (negative counts from end)
+ * @param {Object} options
+ * @param {string} options.itemSelector - CSS selector for items
+ * @returns {HTMLElement|null} The focused element, or null if not found
+ */
+export const focusAtIndex = (container, index, options = {}) => {
+  if (!container) return null
+
+  const items = getFocusableItems(container, options.itemSelector)
+  if (items.length === 0) return null
+
+  // Support negative indices
+  const resolvedIndex = index < 0 ? items.length + index : index
+  if (resolvedIndex >= 0 && resolvedIndex < items.length) {
+    items[resolvedIndex].focus()
+    return items[resolvedIndex]
+  }
+
+  return null
+}
+
+/**
+ * Create a keydown handler for button row navigation
+ * @param {Object} options
+ * @param {() => HTMLElement} options.getContainer - Function returning the container element
+ * @param {string} options.itemSelector - CSS selector for buttons
+ * @param {(direction: string) => void} options.onBoundary - Called when navigation hits a boundary
+ * @param {() => boolean} options.isDisabled - Function returning whether navigation is disabled
+ * @returns {(event: KeyboardEvent) => void}
+ */
+export const createButtonRowHandler = (options) => {
+  const { getContainer, itemSelector, onBoundary, isDisabled } = options
+
+  return (event) => {
+    if (isDisabled?.()) return
+
+    const direction = getDirection(event)
+    if (!direction) return
+
+    event.preventDefault()
+    const container = getContainer()
+
+    if (direction === 'up' || direction === 'down') {
+      // Vertical navigation always exits button rows
+      onBoundary?.(direction)
+      return
+    }
+
+    const result = navigateButtonRow(container, event.target, direction, { itemSelector })
+    if (result === 'boundary') {
+      onBoundary?.(direction)
+    }
+  }
+}
+
+/**
+ * Create a keydown handler for grid navigation
+ * @param {Object} options
+ * @param {() => HTMLElement} options.getContainer - Function returning the container element
+ * @param {string} options.itemSelector - CSS selector for grid items
+ * @param {(direction: string) => void} options.onBoundary - Called when navigation hits a boundary
+ * @param {() => boolean} options.isDisabled - Function returning whether navigation is disabled
+ * @returns {(event: KeyboardEvent) => void}
+ */
+export const createGridHandler = (options) => {
+  const { getContainer, itemSelector, onBoundary, isDisabled } = options
+
+  return (event) => {
+    if (isDisabled?.()) return
+
+    const direction = getDirection(event)
+    if (!direction) return
+
+    event.preventDefault()
+    const container = getContainer()
+    const result = navigateGrid(container, event.target, direction, { itemSelector })
+
+    if (result === 'boundary') {
+      onBoundary?.(direction)
+    }
+  }
+}
+
+/**
+ * Handle escape key to navigate out of a component
+ * @param {KeyboardEvent} event
+ * @param {(direction: string) => void} onNavigateOut - Callback with direction
+ * @param {() => boolean} isDisabled - Function returning whether navigation is disabled
+ */
+export const handleEscape = (event, onNavigateOut, isDisabled) => {
+  if (isDisabled?.()) return false
+  if (event.key !== 'Escape') return false
+
+  event.preventDefault()
+  onNavigateOut?.('up')
+  return true
+}
+
+/**
+ * Handle delete/backspace key for item deletion
+ * @param {KeyboardEvent} event
+ * @param {() => void} onDelete - Callback to perform deletion
+ * @returns {boolean} Whether the key was handled
+ */
+export const handleDeleteKey = (event, onDelete) => {
+  const isMac = navigator.userAgent.includes('Mac OS')
+  if (event.key === 'Delete' || (isMac && event.key === 'Backspace')) {
+    event.preventDefault()
+    onDelete?.()
+    return true
+  }
+  return false
+}
+
+/**
+ * Focus the most appropriate button in a dialog/modal.
+ * Priority: .btn-primary > .btn-secondary > any button
+ * @param {HTMLElement} container - The dialog/modal container element
+ * @returns {HTMLElement|null} The focused element, or null if none found
+ */
+export const focusDialogButton = (container) => {
+  if (!container) return null
+
+  // Priority order for button selection
+  const selectors = [
+    '.btn-primary:not([disabled])',
+    '.btn-secondary:not([disabled])',
+    'button:not([disabled])'
+  ]
+
+  for (const selector of selectors) {
+    const btn = container.querySelector(selector)
+    if (btn) {
+      btn.focus()
+      return btn
+    }
+  }
+
+  return null
+}
+
+/**
+ * Focus the most appropriate element in a dialog/modal.
+ * For dialogs with input fields (rename/edit forms): focuses first input and selects text
+ * For other dialogs: focuses primary button (or fallback)
+ * @param {HTMLElement} container - The dialog/modal container element
+ * @returns {HTMLElement|null} The focused element, or null if none found
+ */
+export const focusDialogDefault = (container) => {
+  if (!container) return null
+
+  // Check for input fields first (form dialogs like rename)
+  const input = container.querySelector('input:not([disabled]):not([type="hidden"]), textarea:not([disabled])')
+  if (input) {
+    input.focus()
+    // Select text for better UX in rename dialogs
+    if (typeof input.select === 'function') {
+      input.select()
+    }
+    return input
+  }
+
+  // Fall back to button focus for non-form dialogs
+  return focusDialogButton(container)
+}
+
+/**
+ * Standard keydown handler for button rows with left/right navigation.
+ * Can be used directly on buttons or on a container with event delegation.
+ * Automatically finds the .button-row or .modal-actions container.
+ * @param {KeyboardEvent} event - The keydown event
+ * @param {Object} options
+ * @param {(direction: string) => void} options.onBoundary - Called when navigation hits a boundary (up/down or edge)
+ */
+export const handleButtonKeydown = (event, options = {}) => {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  // Find the button row container
+  const target = event.target
+  if (target.tagName !== 'BUTTON' && target.tagName !== 'A') return
+
+  const container = target.closest('.button-row, .modal-actions')
+  if (!container) return
+
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    const result = navigateButtonRow(container, target, direction, { itemSelector: 'button, a' })
+    if (result === 'boundary') {
+      options.onBoundary?.(direction)
+    }
+  } else if (direction === 'up' || direction === 'down') {
+    // Vertical navigation exits button rows
+    options.onBoundary?.(direction)
+  }
+}
+
+/**
+ * Install keyboard navigation on a container element.
+ * Handles arrow key navigation for buttons within .button-row or .modal-actions.
+ * Uses event delegation so no need to add handlers to individual buttons.
+ * @param {HTMLElement} container - The container element to enable navigation on
+ * @param {Object} options
+ * @param {(direction: string) => void} options.onBoundary - Called when navigation hits a boundary
+ * @returns {() => void} Cleanup function to remove the event listener
+ */
+export const installKeyboardNav = (container, options = {}) => {
+  if (!container) return () => {}
+
+  const handler = (event) => handleButtonKeydown(event, options)
+  container.addEventListener('keydown', handler)
+
+  return () => container.removeEventListener('keydown', handler)
+}
+
+// ============================================================================
+// Global Automatic Keyboard Navigation
+// ============================================================================
+
+/**
+ * Selector for containers that should have automatic button row navigation
+ */
+const BUTTON_ROW_SELECTOR = '.button-row, .modal-actions, .actions, .role-actions, .ancillary-actions'
+
+/**
+ * Global keydown handler for automatic button row navigation.
+ * Handles arrow key navigation for buttons/links within .button-row or .modal-actions containers.
+ * @param {KeyboardEvent} event
+ */
+const globalKeydownHandler = (event) => {
+  const direction = getDirection(event)
+  if (!direction) return
+
+  // Only handle buttons and links
+  const target = event.target
+  if (target.tagName !== 'BUTTON' && target.tagName !== 'A') return
+
+  // Find the button row container
+  const container = target.closest(BUTTON_ROW_SELECTOR)
+  if (!container) return
+
+  if (direction === 'left' || direction === 'right') {
+    event.preventDefault()
+    navigateButtonRow(container, target, direction, { itemSelector: 'button:not([disabled]), a' })
+  }
+  // Note: up/down navigation is intentionally not handled globally
+  // Components can add their own handlers for vertical navigation between groups
+}
+
+let globalNavInitialized = false
+
+/**
+ * Initialize global keyboard navigation.
+ * Call this once at app startup to enable automatic arrow key navigation
+ * for buttons within .button-row and .modal-actions containers.
+ * Safe to call multiple times (only initializes once).
+ */
+export const initKeyboardNavigation = () => {
+  if (globalNavInitialized) return
+  if (typeof document === 'undefined') return // SSR safety
+
+  document.addEventListener('keydown', globalKeydownHandler)
+  globalNavInitialized = true
+}
+
+/**
+ * Cleanup global keyboard navigation (useful for testing).
+ */
+export const destroyKeyboardNavigation = () => {
+  if (!globalNavInitialized) return
+  if (typeof document === 'undefined') return
+
+  document.removeEventListener('keydown', globalKeydownHandler)
+  globalNavInitialized = false
+}

frontend/src/utils/passkey.js

@@ -1,7 +1,7 @@
 import { startRegistration, startAuthentication } from '@simplewebauthn/browser'
 import aWebSocket from '@/utils/awaitable-websocket'
 import { getSettings } from '@/utils/settings'
-import { showAuthIframe } from '@/utils/api'
+import { showAuthIframe } from 'paskia'
 
 // Generic path normalizer: if an auth_host is configured and differs from current
 // host, return absolute URL (scheme derived by aWebSocket). Otherwise, keep as-is.
@@ -54,24 +54,23 @@ export async function register(resetToken = null, displayName = null, onstartreg
   }
 }
 
-export async function authenticate() {
-  const ws = await aWebSocket(await makeUrl('/auth/ws/authenticate'))
+export async function authenticate(queryString = null) {
+  // Build URL, optionally appending raw query string (e.g. for OIDC params)
+  let url = await makeUrl('/auth/ws/authenticate')
+  if (queryString) {
+    url += queryString.startsWith('?') ? queryString : `?${queryString}`
+  }
+  const ws = await aWebSocket(url)
   try {
-    const res = await ws.receive_json()
-    console.log('Authentication options:', res)
-    // status field present means error
-    if (res.status) {
-      throw new Error(res.detail || `Authentication failed: ${res.status}`)
-    }
+    let res = await ws.receive_json()
+    if (res.status >= 400) throw new Error(res.detail || `Authentication failed: ${res.status}`)
 
     const authResponse = await startAuthentication(res)
     ws.send_json(authResponse)
 
-    const result = await ws.receive_json()
-    if (result.status) {
-      throw new Error(result.detail || `Authentication failed: ${result.status}`)
-    }
-    return result
+    res = await ws.receive_json()
+    if (res.status >= 400) throw new Error(res.detail || `Authentication failed: ${res.status}`)
+    return res
   } catch (error) {
     console.error('Authentication error:', error)
     throw Error(error.name === "NotAllowedError" ? 'Passkey authentication cancelled' : error.message)

frontend/src/utils/theme.js

@@ -0,0 +1,46 @@
+// Theme override utilities - shared across apps
+// User preference or URL hash can force light/dark mode
+
+const TRANSITION_ID = 'theme-transition'
+const STORAGE_KEY = 'paskia-theme'
+
+/** Apply theme by setting class on documentElement */
+export function applyTheme(theme, element = document.documentElement, animate = false) {
+  // Add temporary transition for smooth theme change
+  if (animate) {
+    let transitionStyle = document.getElementById(TRANSITION_ID)
+    if (!transitionStyle) {
+      transitionStyle = document.createElement('style')
+      transitionStyle.id = TRANSITION_ID
+      transitionStyle.textContent = '*, *::before, *::after { transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s !important; }'
+      document.head.appendChild(transitionStyle)
+    }
+    setTimeout(() => document.getElementById(TRANSITION_ID)?.remove(), 350)
+  }
+  // If no explicit theme, check system preference
+  const isDark = theme === 'dark' || (theme !== 'light' && matchMedia('(prefers-color-scheme:dark)').matches)
+  element.classList.toggle('dark', isDark)
+}
+
+/** Get theme from localStorage cache */
+export function getCachedTheme() {
+  return localStorage.getItem(STORAGE_KEY) || ''
+}
+
+/** Cache theme in localStorage */
+export function setCachedTheme(theme) {
+  if (theme) localStorage.setItem(STORAGE_KEY, theme)
+  else localStorage.removeItem(STORAGE_KEY)
+}
+
+/** Initialize theme from user preference (with localStorage cache for fast load) */
+export function initThemeFromCache() {
+  applyTheme(getCachedTheme())
+}
+
+/** Update theme from session context (call after login/session load) */
+export function updateThemeFromSession(ctx, animate = false) {
+  const theme = ctx?.user?.theme || ''
+  setCachedTheme(theme)
+  applyTheme(theme, document.documentElement, animate)
+}

frontend/vite-plugin-fastapi.js

@@ -0,0 +1,36 @@
+/**
+ * FastAPI-Vue Vite Plugin
+ * auto-upgrade@fastapi-vue-setup -- remove this if you edit the plugin
+ *
+ * Configures Vite for FastAPI backend integration:
+ * - Proxies /api/* requests to the FastAPI backend
+ * - Builds to the Python module's frontend-build directory
+ *
+ * Options:
+ *   paths - Array of paths to proxy (default: ["/api"])
+ */
+
+export default function fastapiVue({ paths = ["/api"] } = {}) {
+  const backendUrl = process.env.PASKIA_BACKEND_URL || "http://localhost:4402"
+
+  // Build proxy configuration for each path
+  const proxy = {}
+  for (const path of paths) {
+    proxy[path] = {
+      target: backendUrl,
+      changeOrigin: false,
+      ws: true,
+    }
+  }
+
+  return {
+    name: "vite-plugin-fastapi-paskia",
+    config: () => ({
+      server: { proxy },
+      build: {
+        outDir: "../paskia/frontend-build",
+        emptyOutDir: true,
+      },
+    }),
+  }
+}

frontend/vite.config.js

@@ -4,18 +4,73 @@ import { resolve } from 'node:path'
 import vue from '@vitejs/plugin-vue'
 import { existsSync, renameSync, mkdirSync } from 'node:fs'
 import sirv from 'sirv'
+import fastapiVue from './vite-plugin-fastapi.js'
+
+// Auth host mode: when set, clients accessing the auth host get /auth/ at / and /auth/admin/ at /admin/
+const authHost = process.env.PASKIA_AUTH_HOST
 
 export default defineConfig(({ command }) => ({
   appType: 'mpa',
   publicDir: 'public',
   plugins: [
+    fastapiVue({ paths: [
+      "/auth/api",
+      "/auth/ws",
+      "/.well-known/openid-configuration",
+      // Passphrase links: /auth/word1.word2.word3.word4.word5
+      "^/auth/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$",
+      // Passphrase links: /word1.word2.word3.word4.word5
+      "^/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$",
+    ] }),
     vue(),
+    // Auth host routing: rewrite paths when accessing dedicated auth host
+    // Must run before serve-examples to handle / correctly
+    authHost && {
+      name: 'auth-host-routing',
+      configureServer(server) {
+        server.middlewares.use((req, _res, next) => {
+          const host = req.headers.host?.split(':')[0]
+          // Check if request is coming to the auth host
+          if (host === authHost) {
+            // Only rewrite specific paths that should map to /auth/*
+            // Rewrite / and /index.html to /auth/
+            if (req.url === '/' || req.url === '/index.html') {
+              req.url = '/auth/'
+            }
+            // Rewrite /admin/* to /auth/admin/*
+            else if (req.url.startsWith('/admin/') || req.url === '/admin') {
+              req.url = '/auth' + req.url
+            }
+            // Everything else (Vite paths, passphrase links, etc.) passes through unchanged
+          }
+          next()
+        })
+      }
+    },
+    {
+      name: 'restricted-endpoints-rewrite',
+      configureServer(server) {
+        server.middlewares.use((req, _res, next) => {
+          // Rewrite /auth/restricted/iframe and /auth/restricted/oidc to /auth/restricted/
+          if (req.url === '/auth/restricted/iframe' || req.url === '/auth/restricted/oidc') {
+            req.url = '/auth/restricted/'
+          }
+          next()
+        })
+      }
+    },
     {
       name: 'serve-examples',
       configureServer(server) {
         const examplesDir = resolve(__dirname, '../examples')
         const serve = sirv(examplesDir, { dev: true })
         server.middlewares.use((req, _res, next) => {
+          // Skip redirect to examples on auth host (handled by auth-host-routing)
+          const host = req.headers.host?.split(':')[0]
+          if (authHost && host === authHost) {
+            next()
+            return
+          }
           if (req.url === '/' || req.url === '/index.html') req.url = '/examples/'
           next()
         })
@@ -46,9 +101,11 @@ export default defineConfig(({ command }) => ({
         }
       }
     }
-  ],
+  ].filter(Boolean),
   resolve: {
-    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    }
   },
   base: '/',
   server: {
@@ -56,24 +113,6 @@ export default defineConfig(({ command }) => ({
     allowedHosts: true,
     fs: {
       allow: ['..']
-    },
-    proxy: {
-      // Only proxy these two specific backend API paths
-      '/auth/api': {
-        target: 'http://localhost:4402'
-      },
-      '/auth/ws': {
-        target: 'http://localhost:4402',
-        ws: true
-      },
-      // Passphrase links: /auth/word1.word2.word3.word4.word5
-      '^/auth/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$': {
-        target: 'http://localhost:4402'
-      },
-      // Passphrase links: /word1.word2.word3.word4.word5
-      '^/[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+\\.[a-z]+$': {
-        target: 'http://localhost:4402'
-      }
     }
   },
   build: {

oidc.md

@@ -0,0 +1,92 @@
+# OIDC Provider Implementation
+
+OpenID Connect 1.0 provider enabling third-party apps to authenticate users via passkey. Also supports native cookie-based authentication.
+
+## Data Models
+
+**User** — Added: `email`, `preferred_username`
+
+**Session** — Added: `client_uuid` (None = native, set = OIDC)
+- `key: bytes` — hashed DB key, never stored raw
+- `secret` → `hash_secret("session", secret)` → DB lookup
+- OIDC `sid` → `base64url.encode(hash_secret("oidc", session.key))`
+
+**OIDClient** — `uuid, client_secret_hash, name, redirect_uris`
+
+## Auth Codes (In-Memory Only)
+
+60-second lifetime, auto-cleaned:
+
+```python
+from paskia.authcode import AuthCode, OIDC, codes
+
+class AuthCode(msgspec.Struct):
+    session_key: str       # Session DB key
+    created: datetime
+    oidc: OIDC | None      # Only for OIDC mode
+
+class OIDC(msgspec.Struct):
+    redirect_uri, scope, nonce, code_challenge, code_challenge_method: str
+```
+
+Usage: `code = authcode.store(AuthCode(...))` → later `codes.pop(code, None)`
+
+## Authorization Flows
+
+### OIDC (Authorization Code)
+
+1. `GET /auth/restricted/oidc?client_id=UUID&redirect_uri=...&scope=openid&nonce=...&code_challenge=...`
+2. Frontend → WebSocket: `/auth/ws/authenticate?client_id=...&redirect_uri=...&...`
+3. Validate client/redirect_uri, authenticate via passkey
+4. `db.oidc_login()` → `(secret, session_key)`
+5. Create `AuthCode(session_key, oidc=OIDC(...))` → code
+6. Return: `{"redirect_url": "{redirect_uri}?code={code}&state={state}"}`
+7. Client exchanges code at `/auth/oidc/token` with `code_verifier` (PKCE S256)
+
+**Token:** `access_token, id_token, refresh_token={secret}, expires_in=3600`
+
+**ID token:** `sub, sid (base64url), name, preferred_username, email, groups`
+
+### Native (Cookie)
+
+1. WebSocket: `/auth/ws/authenticate` (no OIDC params)
+2. Authenticate via passkey
+3. `db.login()` → secret
+4. Create `AuthCode(session_key=secret, oidc=None)` → exchange_code
+5. Return: `{"user": "UUID", "exchange_code": "..."}`
+6. `POST /auth/api/exchange` with code → sets cookie
+
+## Refresh & Logout
+
+**Refresh:** `POST /auth/oidc/token` with `grant_type=refresh_token&refresh_token={secret}&client_id=...&client_secret=...`
+- Looks up session, validates client match
+- Extends expiry +24h (sliding window)
+- Returns new tokens with same `sid`
+
+**Back-channel logout:** `POST /auth/oidc/backchannel-logout` with `logout_token={jwt}`
+- Verify signature, extract `sid` or `sub`
+- Delete matched sessions
+- Return 200 OK
+
+Discovery: `backchannel_logout_supported: true`
+
+## Endpoints
+
+- `GET /.well-known/openid-configuration` — Discovery
+- `GET /auth/oidc/keys` — Keys (EdDSA)
+- `POST /auth/oidc/token` — Exchange/refresh
+- `GET /auth/oidc/userinfo` — User (bearer token, includes `picture` when `profile` scope is granted and avatar exists)
+- `POST /auth/oidc/backchannel-logout` — Logout
+- `POST /auth/api/exchange` — Native auth code → cookie
+
+## Claims
+
+- `profile` scope may include `name`, `preferred_username`, and `picture`
+- `email` scope may include `email`
+- `groups` is emitted from client-scoped permissions
+
+## Files
+
+**Created:** [paskia/authcode.py](paskia/authcode.py), [paskia/util/crypto.py](paskia/util/crypto.py), [paskia/fastapi/oid.py](paskia/fastapi/oid.py)
+
+**Modified:** [paskia/db/structs.py](paskia/db/structs.py), [paskia/db/operations.py](paskia/db/operations.py), [paskia/fastapi/ws.py](paskia/fastapi/ws.py), [paskia/fastapi/api.py](paskia/fastapi/api.py), [paskia/globals.py](paskia/globals.py), [paskia/fastapi/mainapp.py](paskia/fastapi/mainapp.py)

paskia-js/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

paskia-js/README.md

@@ -0,0 +1,155 @@
+# Paskia
+
+![Screenshot](https://git.zi.fi/leovasanko/paskia/raw/main/docs/screenshots/forbidden-light.webp)
+
+JavaScript utilities for [Paskia authentication system](https://git.zi.fi/leovasanko/paskia) integration into web apps.
+
+## Installation
+
+### NPM
+
+No framework dependencies. Works with any framework (Vue, React, Svelte, etc.) or vanilla JS. Typescript typing included.
+
+```sh
+npm install paskia
+```
+
+```js
+import { ... } from 'paskia'
+```
+
+### Plain JavaScript
+
+Fetch the module directly from a CDN, or [download](https://cdn.jsdelivr.net/npm/paskia@latest/dist/paskia.js) first and host yourself. No Node needed.
+
+```html
+<script type="module">
+  import { ... } from 'https://cdn.jsdelivr.net/npm/paskia@latest/dist/paskia.js'
+</script>
+```
+
+## Features
+
+### Session Validation
+
+Refresh session and track its validity with automatic polling. Pauses on lack of user activity to avoid useless traffic and to allow session expiry even when the page is left open but idle. This monitors that the same account stays logged in but doesn't do any permission checks.
+
+```js
+import { SessionValidator } from 'paskia'
+
+const validator = new SessionValidator(
+  () => currentUser?.uuid,  // getter for current user ID that we track
+  (error) => handleSessionLost(error)  // callback when session is lost
+)
+
+validator.start()  // call at your app startup/login
+validator.stop()   // stop the system (optional)
+```
+
+### API Fetch Utilities
+
+Enhanced fetch functions with automatic error handling and authentication retry:
+
+```js
+import { apiJson, apiFetch } from 'paskia'
+
+// JSON API calls with automatic auth handling
+const data = await apiJson('/api/endpoint', { method: 'POST', body: { key: 'value' } })
+
+// Raw fetch with auth handling
+const response = await apiFetch('/api/endpoint')
+```
+
+When a 401/403 response includes an auth iframe URL, the request automatically pauses, displays the authentication UI, and retries upon success. In case this is not needed, use standard `fetch` or our `fetchJson`.
+
+The JSON variants set headers automatically, with body and response in JSON.
+
+### Timeout Settings
+
+Paskia exports a mutable settings object for defaults used by fetch/auth/session validation timers. Default values shown below.
+
+```js
+import { settings } from 'paskia'
+
+// General fetch timeout used by apiFetch/apiJson/fetchJson when no timeout is passed
+settings.fetch_ms = 10000
+
+// Fetch timeout used by SessionValidator (/auth/api/validate is fast)
+settings.auth_ms = 1000
+
+// SessionValidator polling and idle timers
+settings.poll_ms = 60000
+settings.idle_ms = 300000
+```
+
+You can still override timeout per request:
+
+```js
+await apiJson('/api/upload', { method: 'POST', body: data, timeout: 30000 })
+```
+
+### Authentication Overlay
+
+Normally you use apiJson/apiFetch and they handle this automatically. If you need to wire it yourself, on a 401/403 response that includes `auth.iframe`, call `showAuthIframe(...)` and then retry the original request.
+
+The backend returns 401/403 responses with the correct URL for proper user feedback. Alternatively you may use `/auth/restricted/iframe#mode=login`, `mode=reauth` or `mode=forbidden` to trigger the UX flow you need.
+
+```js
+import { showAuthIframe, AuthCancelledError } from 'paskia'
+
+const response = await fetch('/api/protected')
+if (response.status === 401 || response.status === 403) {
+  const data = await response.json()
+  if (data.auth?.iframe) {
+    await showAuthIframe(data.auth.iframe)  // Raises AuthCancelledError if the user cancels
+  }
+}
+```
+
+This resolves after the user authenticates (possibly with another account than previously), and you should usually retry the original API request. Note that successful authentication doesn't guarantee that the user still has rights to what originally failed.
+
+### Shared Blur Backdrop
+
+The authentication dialog displays with a blur backdrop (z-index 1099). The auth iframe uses z-index 9999. Your app dialogs should use z-index 1100–9998 to appear above the backdrop but below authentication.
+
+The backdrop is also reusable/refcounted, so you can keep consistent visuals for your own dialogs:
+
+```js
+import { holdGlobalBackdrop, releaseGlobalBackdrop } from 'paskia'
+
+holdGlobalBackdrop()
+try {
+  await your.own.dialog()
+} finally {
+  releaseGlobalBackdrop()
+}
+```
+
+The backdrop only disappears after all holders have released it.
+
+## Error Handling
+
+### AuthCancelledError (apiFetch, apiJson, showAuthIframe)
+
+If the user clicks Back in the authentication dialog, refusing to authenticate, `AuthCancelledError` is risen (as a response to postMessage from the iframe). The dialog closes as expected and it is up to the app how to continue from there.
+
+- Do nothing if the app can continue despite the failed operation (no UI notification needed)
+- Display a simple Access Denied page with suggestion/button to reload the page to try again
+
+Do not retry automatically.
+
+### UI feedback
+
+A set of small utilities are available for determining whether the user needs a notification and to format the error message.
+
+```js
+import { getUserFriendlyErrorMessage, shouldShowErrorToast } from 'paskia'
+
+try {
+  await apiJson('/api/action')
+} catch (e) {
+  if (shouldShowErrorToast(e)) {
+    your.message.display(getUserFriendlyErrorMessage(e))
+  }
+}
+```

paskia-js/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "paskia",
+  "version": "1.4.0",
+  "description": "Paskia authentication utilities for JavaScript",
+  "author": "Leo Vasanko",
+  "license": "Unlicense",
+  "homepage": "https://git.zi.fi/LeoVasanko/paskia",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LeoVasanko/paskia",
+    "directory": "paskia-js"
+  },
+  "type": "module",
+  "main": "./dist/paskia.js",
+  "types": "./dist/paskia.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/paskia.d.ts",
+      "import": "./dist/paskia.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "keywords": [
+    "auth",
+    "authentication",
+    "paskia",
+    "passkey",
+    "webauthn"
+  ]
+}

paskia-js/src/fetch.ts

@@ -0,0 +1,145 @@
+import { showAuthIframe, AuthCancelledError } from './overlay'
+import settings from './settings'
+
+export { AuthCancelledError }
+
+export interface ApiFetchOptions extends RequestInit {
+  timeout?: number
+}
+
+export interface FetchJsonOptions extends Omit<RequestInit, 'body'> {
+  timeout?: number
+  body?: BodyInit | Record<string, unknown> | null
+}
+
+export class ApiError extends Error {
+  readonly url: string
+  readonly status: number
+  readonly statusText: string
+  readonly data: unknown
+
+  constructor(url: string, response: Response, data: unknown) {
+    super((data as { detail?: string })?.detail || `Request failed: ${response.status}`)
+    this.name = 'ApiError'
+    this.url = url
+    this.status = response.status
+    this.statusText = response.statusText
+    this.data = data
+  }
+}
+
+export class NetworkError extends Error {
+  readonly originalError: Error | null
+
+  constructor(message: string, originalError: Error | null = null) {
+    super(message)
+    this.name = 'NetworkError'
+    this.originalError = originalError
+  }
+}
+
+export async function apiFetch(url: string, options: ApiFetchOptions = {}): Promise<Response> {
+  const { timeout = settings.fetch_ms, ...fetchOptions } = options
+  fetchOptions.credentials = fetchOptions.credentials || 'include'
+
+  while (true) {
+    let response: Response
+    try {
+      response = await fetch(url, {...fetchOptions, signal: timeout ? AbortSignal.timeout(timeout) : undefined})
+    } catch (error) {
+      const err = error as Error
+      if (err.name === 'TimeoutError') {
+        throw new NetworkError('Request timed out', err)
+      }
+      if (err.name === 'AbortError') {
+        throw error
+      }
+      if (err.name === 'TypeError' && err.message === 'Failed to fetch') {
+        throw new NetworkError('Unable to connect to server', err)
+      }
+      throw new NetworkError(err.message || 'Network error', err)
+    }
+
+    if (response.status === 401 || response.status === 403) {
+      let data: { auth?: { iframe?: string } } | null = null
+      try {
+        data = await response.clone().json()
+      } catch {}
+      if (data?.auth?.iframe && window === window.top) {
+        await showAuthIframe(data.auth.iframe)
+        continue  // Retry the original request after successful auth
+      }
+    }
+
+    return response
+  }
+}
+
+type FetchFn = (url: string, options?: RequestInit) => Promise<Response>
+
+export async function apiJson<T = unknown>(url: string, options: FetchJsonOptions = {}): Promise<T> {
+  return fetchJson<T>(url, options, apiFetch)
+}
+
+export async function fetchJson<T = unknown>(url: string, options: FetchJsonOptions = {}, fetchFn: FetchFn = fetch): Promise<T> {
+  const headers: Record<string, string> = {
+    'Accept': 'application/json',
+    ...(options.headers as Record<string, string>),
+  }
+
+  let body: BodyInit | undefined
+  if (options.body && typeof options.body === 'object' && !(options.body instanceof FormData)) {
+    headers['Content-Type'] = 'application/json'
+    body = JSON.stringify(options.body)
+  } else {
+    body = options.body as BodyInit
+  }
+
+  const opt: RequestInit = { ...options, headers, body }
+
+  const response = await fetchFn(url, opt)
+  const data = await response.json() as T
+
+  if (!response.ok) {
+    throw new ApiError(url, response, data)
+  }
+
+  return data
+}
+
+export function getUserFriendlyErrorMessage(error: Error): string {
+  if (error instanceof NetworkError) return error.message
+  if (error instanceof ApiError) return error.message
+  if (error.name === 'TimeoutError') return 'Request timed out'
+  if (error.name === 'TypeError' && error.message === 'Failed to fetch') {
+    return 'Unable to connect to server'
+  }
+  return error.message || 'An error occurred'
+}
+
+export function shouldShowErrorToast(error: Error): boolean {
+  if (error instanceof AuthCancelledError) return false
+  if (error.name === 'AbortError') return false
+  if (error instanceof ApiError && (error.status === 401 || error.status === 403)) return false
+  return true
+}
+
+type ShowMessageFn = (message: string, type: string, duration: number) => void
+
+export function createApiCaller(showMessage: ShowMessageFn) {
+  return async function apiCall<T = unknown>(url: string, options: FetchJsonOptions = {}): Promise<T> {
+    try {
+      return await apiJson<T>(url, options)
+    } catch (error) {
+      if (!shouldShowErrorToast(error as Error)) {
+        throw error
+      }
+      const err = error as Error
+      console.error(`API error for ${url}:`, err instanceof ApiError ? { status: err.status, statusText: err.statusText, data: err.data } : err)
+      showMessage(getUserFriendlyErrorMessage(err), 'error', 4000)
+      throw error
+    }
+  }
+}
+
+export default apiFetch

paskia-js/src/index.ts

@@ -0,0 +1,25 @@
+export {
+  ApiError,
+  NetworkError,
+  AuthCancelledError,
+  apiFetch,
+  apiJson,
+  fetchJson,
+  getUserFriendlyErrorMessage,
+  shouldShowErrorToast,
+  createApiCaller,
+} from './fetch'
+
+export type { ApiFetchOptions, FetchJsonOptions } from './fetch'
+
+export { default as settings } from './settings'
+
+export {
+  holdGlobalBackdrop,
+  releaseGlobalBackdrop,
+  isAuthIframeOpen,
+  hideAuthIframe,
+  showAuthIframe,
+} from './overlay'
+
+export { SessionValidator } from './validate'

paskia-js/src/overlay.ts

@@ -0,0 +1,167 @@
+const AUTH_IFRAME_ID = 'paskia-iframe'
+const STYLES_ID = 'paskia-dialog'
+const STYLES_TEXT = `\
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 1099;
+  background: transparent;
+  backdrop-filter: blur(0) brightness(1);
+  -webkit-backdrop-filter: blur(0) brightness(1);
+  pointer-events: none;
+  visibility: hidden;
+  transition: all 0.2s ease-out;
+}
+body.paskia-backdrop::before {
+  backdrop-filter: blur(.2rem) brightness(0.7);
+  -webkit-backdrop-filter: blur(.2rem) brightness(0.7);
+  visibility: visible;
+}
+body.paskia-backdrop {
+  overflow: auto;
+}
+#${AUTH_IFRAME_ID} {
+  border: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  color-scheme: auto;
+  background: transparent;
+}
+`
+
+let authIframe: HTMLIFrameElement | null = null
+let authPromise: Promise<void> | null = null
+let authResolve: (() => void) | null = null
+let authReject: ((error: Error) => void) | null = null
+let messageListenerInstalled = false
+let backdropHolders = 0
+
+function injectStyles(): void {
+  if (document.getElementById(STYLES_ID)) return
+  const style = document.createElement('style')
+  style.id = STYLES_ID
+  style.textContent = STYLES_TEXT
+  document.head.insertBefore(style, document.head.firstChild)
+}
+
+export class AuthCancelledError extends Error {
+  constructor() {
+    super('Authentication cancelled')
+    this.name = 'AuthCancelledError'
+  }
+}
+
+export function holdGlobalBackdrop(): void {
+  injectStyles()
+  backdropHolders++
+  document.body.classList.add('paskia-backdrop')
+}
+
+export function releaseGlobalBackdrop(): void {
+  backdropHolders = Math.max(0, backdropHolders - 1)
+  if (backdropHolders === 0) {
+    document.body.classList.remove('paskia-backdrop')
+  }
+}
+
+export function isAuthIframeOpen(): boolean {
+  return !!document.getElementById(AUTH_IFRAME_ID)
+}
+
+export function hideAuthIframe(): void {
+  if (authIframe) {
+    authIframe.remove()
+    authIframe = null
+    releaseGlobalBackdrop()
+  }
+}
+
+function handleAuthMessage(event: MessageEvent): void {
+  const data = event.data as { type?: string }
+  if (!data?.type) return
+
+  switch (data.type) {
+    case 'auth-success':
+      hideAuthIframe()
+      if (authResolve) {
+        authResolve()
+        authPromise = null
+        authResolve = null
+        authReject = null
+      }
+      break
+
+    case 'auth-back':
+      hideAuthIframe()
+      if (authReject) {
+        authReject(new AuthCancelledError())
+        authPromise = null
+        authResolve = null
+        authReject = null
+      }
+      break
+  }
+}
+
+function ensureMessageListener(): void {
+  if (messageListenerInstalled) return
+  if (typeof window !== 'undefined') {
+    window.addEventListener('message', handleAuthMessage)
+    messageListenerInstalled = true
+  }
+}
+
+export function showAuthIframe(iframeUrl: string, title = 'Authentication'): Promise<void> {
+  injectStyles()
+  ensureMessageListener()
+
+  if (authPromise) return authPromise
+
+  if (document.getElementById(AUTH_IFRAME_ID)) {
+    authPromise = new Promise((resolve, reject) => {
+      authResolve = resolve
+      authReject = reject
+    })
+    return authPromise
+  }
+
+  authPromise = new Promise((resolve, reject) => {
+    authResolve = resolve
+    authReject = reject
+  })
+
+  hideAuthIframe()
+  holdGlobalBackdrop()
+
+  authIframe = document.createElement('iframe')
+  authIframe.id = AUTH_IFRAME_ID
+  authIframe.title = title
+  authIframe.src = iframeUrl
+  document.body.appendChild(authIframe)
+
+  return authPromise
+}
+
+export function createAuthIframe(iframeUrl: string, title = 'Authentication'): HTMLIFrameElement {
+  injectStyles()
+  const existing = document.getElementById(AUTH_IFRAME_ID)
+  if (existing) existing.remove()
+
+  const iframe = document.createElement('iframe')
+  iframe.id = AUTH_IFRAME_ID
+  iframe.title = title
+  iframe.src = iframeUrl
+  document.body.appendChild(iframe)
+
+  return iframe
+}
+
+export function removeAuthIframe(): void {
+  const iframe = document.getElementById(AUTH_IFRAME_ID)
+  if (iframe) iframe.remove()
+}

paskia-js/src/settings.ts

@@ -0,0 +1,6 @@
+export default {
+  fetch_ms: 10000,
+  auth_ms: 1000,
+  poll_ms: 60000,
+  idle_ms: 300000,
+}

paskia-js/src/validate.ts

@@ -0,0 +1,64 @@
+import { apiJson } from './fetch'
+import settings from './settings'
+
+export class SessionValidator {
+  private userUuidGetter: () => string | undefined
+  private onSessionLost: (error: Error) => void
+  private pollTimer: ReturnType<typeof setInterval> | null = null
+  private idleTimer: ReturnType<typeof setTimeout> | null = null
+  private active = false
+
+  constructor(userUuidGetter: () => string | undefined, onSessionLost: (error: Error) => void) {
+    this.userUuidGetter = userUuidGetter
+    this.onSessionLost = onSessionLost
+    this.resetIdleTimer = this.resetIdleTimer.bind(this)
+  }
+
+  resetIdleTimer(): void {
+    if (this.idleTimer) clearTimeout(this.idleTimer)
+    if (!this.active) this.startPolling()
+    this.idleTimer = setTimeout(() => this.stopPolling(), settings.idle_ms)
+  }
+
+  async validate(): Promise<void> {
+    try {
+      const data = await apiJson<{ ctx?: { user?: { uuid?: string } } }>('/auth/api/validate', { method: 'POST', timeout: settings.auth_ms })
+      const newUuid = data.ctx?.user?.uuid
+      if (newUuid !== this.userUuidGetter()) {
+        window.location.reload()
+      }
+    } catch (error) {
+      if ((error as Error).name !== 'NetworkError') {
+        this.stopPolling()
+        this.onSessionLost(error as Error)
+      }
+    }
+  }
+
+  startPolling(): void {
+    if (this.active) return
+    this.active = true
+    this.pollTimer = setInterval(() => this.validate(), settings.poll_ms)
+  }
+
+  stopPolling(): void {
+    this.active = false
+    if (this.pollTimer) {
+      clearInterval(this.pollTimer)
+      this.pollTimer = null
+    }
+  }
+
+  start(): void {
+    window.addEventListener('pointermove', this.resetIdleTimer)
+    window.addEventListener('pointerdown', this.resetIdleTimer)
+    this.resetIdleTimer()
+  }
+
+  stop(): void {
+    window.removeEventListener('pointermove', this.resetIdleTimer)
+    window.removeEventListener('pointerdown', this.resetIdleTimer)
+    if (this.idleTimer) clearTimeout(this.idleTimer)
+    this.stopPolling()
+  }
+}

paskia-js/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "lib": ["ES2020", "DOM"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}

paskia-js/vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import dts from 'vite-plugin-dts'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
+export default defineConfig({
+  plugins: [dts({ rollupTypes: true })],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      fileName: 'paskia',
+      formats: ['es'],
+    },
+  },
+})

paskia/__main__.py

@@ -0,0 +1,181 @@
+import argparse
+import asyncio
+import logging
+import os
+import sys
+from pathlib import Path
+
+import msgspec
+from fastapi_vue import server
+from fastapi_vue.hostutil import parse_endpoints
+from kanta import Kanta
+
+from paskia._version import __version__
+from paskia.db.paths import db_file_path
+from paskia.db.structs import DB, Config
+from paskia.util import startupbox
+from paskia.util.constants import DEFAULT_PORT, DEVMODE
+from paskia.util.hostutil import (
+    normalize_auth_host_and_origins,
+    normalize_origin,
+    validate_auth_host,
+)
+from paskia.util.runtime import RuntimeConfig
+
+EPILOG = """\
+Example:
+  paskia --rp-id example.com --rp-name "Example Corporation" --auth-host auth.example.com
+"""
+
+
+def add_common_options(p: argparse.ArgumentParser) -> None:
+    p.add_argument(
+        "--rp-id", default="localhost", help="Relying Party ID (default: localhost)"
+    )
+    p.add_argument("--rp-name", help="Relying Party name (default: same as rp-id)")
+    p.add_argument(
+        "--origin",
+        action="append",
+        dest="origins",
+        metavar="URL",
+        help="Allowed origin URL(s). May be specified multiple times. If any are specified, only those origins are permitted for WebSocket authentication.",
+    )
+    p.add_argument(
+        "--auth-host",
+        help=("Dedicated authentication site (optionally with scheme/port)"),
+    )
+    p.add_argument(
+        "--save",
+        action="store_true",
+        help="Save the CLI options to database for future runs.",
+    )
+
+
+def _load_stored_config(db_path: Path, *, rp_id: str) -> Config:
+    """Load the stored Config from disk using Kanta in read-only mode.
+
+    This must not depend on PASKIA_CONFIG or the global lifecycle Kanta.
+    If the database file does not exist, a default config is returned.
+    """
+    if not db_path.exists():
+        return Config(rp_id=rp_id)
+
+    kanta = Kanta(
+        str(db_path),
+        DB(config=Config(rp_id=rp_id)),
+        migrations="paskia.db.migrations",
+    )
+    kanta.ctx.rp_id = rp_id
+
+    async def _read() -> Config:
+        await kanta.open(readonly=True)
+        try:
+            return kanta.data.config
+        finally:
+            await kanta.close()
+
+    try:
+        return asyncio.run(_read())
+    except Exception as e:
+        logging.exception("Failed to load database")
+        raise SystemExit(f"{e}") from e
+
+
+def main():
+    # Configure logging to remove the "ERROR:root:" prefix
+    logging.basicConfig(level=logging.INFO, format="%(message)s", force=True)
+
+    parser = argparse.ArgumentParser(
+        prog="paskia",
+        description="Paskia authentication server",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog=EPILOG,
+    )
+
+    parser.add_argument(
+        "-l",
+        "--listen",
+        action="append",
+        metavar="LISTEN",
+        help=(
+            "Endpoint to listen on (default: localhost:4401). "
+            "Forms: host:port  port  :port  [ipv6]:port  unix:path  /path.sock"
+        ),
+    )
+    add_common_options(parser)
+
+    args = parser.parse_args()
+
+    # Load stored config using a local read-only Kanta instance.
+    # This happens before PASKIA_CONFIG is set, so we must not import
+    # modules that initialize the global database lifecycle.
+    db_path = db_file_path(rp_id=args.rp_id, create_root=True)
+    try:
+        config = _load_stored_config(db_path, rp_id=args.rp_id)
+    except SystemExit as e:
+        print(f"🛑 Paskia {__version__} could not load")
+        sys.exit(str(e))
+
+    # Override stored config with CLI args, or clear with empty string
+    if args.rp_name is not None:
+        config.rp_name = args.rp_name or None
+    if args.auth_host is not None:
+        config.auth_host = args.auth_host or None
+    if args.origins is not None:
+        config.origins = None if args.origins == [""] else args.origins
+    if args.listen is not None:
+        config.listen = None if args.listen == [""] else args.listen
+
+    # Process and normalize auth_host and origins
+    try:
+        validate_auth_host(config.auth_host, config.rp_id) if config.auth_host else None
+    except ValueError as e:
+        raise SystemExit(str(e))
+    if config.origins:
+        config.origins = [normalize_origin(o) for o in config.origins]
+    config.auth_host, config.origins = normalize_auth_host_and_origins(
+        config.auth_host, config.origins
+    )
+
+    # Parse first endpoint for site_url fallback
+    ep = next(iter(parse_endpoints(config.listen, DEFAULT_PORT)), {})
+    port = ep.get("port")
+
+    # Compute site_url and site_path
+    # Priority: auth_host > origins[0] > PASKIA_VITE_URL > http://localhost:port > https://rp_id
+    site_path = "/auth/"
+    if config.auth_host:
+        site_url, site_path = config.auth_host, "/"
+    elif config.origins:
+        site_url = config.origins[0]
+    elif vite_url := os.environ.get("PASKIA_VITE_URL"):
+        site_url = vite_url.rstrip("/")  # Devserver
+    elif config.rp_id == "localhost" and port:
+        site_url = f"http://localhost:{port}"  # Backend directly if we can
+    else:
+        site_url = f"https://{config.rp_id}"  # Assume external reverse proxy
+
+    # Build runtime configuration for the server
+    runtime = RuntimeConfig(
+        config=config,
+        site_url=site_url,
+        site_path=site_path,
+        save=args.save,
+    )
+    startupbox.print_startup_config(runtime)
+    os.environ["PASKIA_CONFIG"] = msgspec.json.encode(runtime).decode()
+
+    # Run the server (spawns processes in dev mode)
+    dev = {"reload": True, "reload_dirs": ["paskia"]} if DEVMODE else {}
+    server.run(
+        "paskia.fastapi.mainapp:app",
+        listen=config.listen,
+        default_port=DEFAULT_PORT,
+        log_level="warning",
+        access_log=False,
+        **dev,
+    )
+
+
+if __name__ == "__main__":
+    main()

paskia/aaguid/__init__.py

@@ -10,6 +10,7 @@ This module provides functionality to:
 import json
 from collections.abc import Iterable
 from importlib.resources import files
+from uuid import UUID
 
 __ALL__ = ["AAGUID", "filter"]
 
@@ -18,15 +19,27 @@ AAGUID_FILE = files("paskia") / "aaguid" / "combined_aaguid.json"
 AAGUID: dict[str, dict] = json.loads(AAGUID_FILE.read_text(encoding="utf-8"))
 
 
-def filter(aaguids: Iterable[str]) -> dict[str, dict]:
+def filter(aaguids: Iterable[UUID]) -> dict[str, dict]:
     """
     Get AAGUID information only for the provided set of AAGUIDs.
 
     Args:
-        aaguids: Set of AAGUID strings that the user has credentials for
+        aaguids: Iterable of AAGUIDs (UUIDs) that the user has credentials for
 
     Returns:
-        Dictionary mapping AAGUID to authenticator information for only
+        Dictionary mapping AAGUID string to authenticator information for only
         the AAGUIDs that the user has and that we have data for
     """
-    return {aaguid: AAGUID[aaguid] for aaguid in aaguids if aaguid in AAGUID}
+    result = {}
+    for a in aaguids:
+        s = str(a)
+        if s in AAGUID:
+            info = AAGUID[s].copy()
+            # Rename icon_light to icon
+            if "icon_light" in info:
+                info["icon"] = info.pop("icon_light")
+            # If icons are the same, set dark to None to save space
+            if info.get("icon") == info.get("icon_dark"):
+                info["icon_dark"] = None
+            result[s] = info
+    return result

paskia/authcode.py

@@ -0,0 +1,113 @@
+"""
+Authorization code management for OIDC and cookie exchange flows.
+
+Codes are short-lived (60 seconds) and stored in-memory only.
+Two separate stores maintain full isolation between OIDC and cookie flows.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import logging
+import secrets
+from datetime import UTC, datetime, timedelta
+
+import msgspec
+
+_logger = logging.getLogger(__name__)
+
+# Auth codes expire after this duration
+AUTH_CODE_LIFETIME = timedelta(seconds=60)
+
+
+class OIDCCode(msgspec.Struct):
+    """An OIDC authorization code pending token exchange.
+
+    PKCE uses S256 only when provided (verified at token exchange).
+    """
+
+    session_key: str
+    created: datetime
+    redirect_uri: str
+    scope: str
+    nonce: str | None = None
+    code_challenge: str | None = None
+
+
+class CookieCode(msgspec.Struct):
+    """A cookie exchange code for setting session cookie after WebSocket auth."""
+
+    session_key: str
+    created: datetime
+
+
+# Separate stores for each code type
+oidc_codes: dict[str, OIDCCode] = {}
+cookie_codes: dict[str, CookieCode] = {}
+
+# Background cleanup task
+_cleanup_task: asyncio.Task | None = None
+
+
+async def start():
+    """Start the cleanup background task."""
+    global _cleanup_task
+    if _cleanup_task is None:
+        _cleanup_task = asyncio.create_task(_cleanup_loop())
+
+
+async def stop():
+    """Stop the cleanup background task."""
+    global _cleanup_task
+    if _cleanup_task:
+        _cleanup_task.cancel()
+        try:
+            await _cleanup_task
+        except asyncio.CancelledError:
+            pass
+        _cleanup_task = None
+
+
+async def _cleanup_loop():
+    while True:
+        try:
+            await asyncio.sleep(30)  # Check every 30 seconds
+            _cleanup_expired()
+        except asyncio.CancelledError:
+            break
+        except Exception:
+            _logger.exception("Error in auth code cleanup loop")
+
+
+def _cleanup_expired():
+    oldest = datetime.now(UTC) - AUTH_CODE_LIFETIME
+    for code, auth_code in list(oidc_codes.items()):
+        if auth_code.created < oldest:
+            del oidc_codes[code]
+    for code, auth_code in list(cookie_codes.items()):
+        if auth_code.created < oldest:
+            del cookie_codes[code]
+
+
+def store_oidc(code: OIDCCode) -> str:
+    """Store an OIDC authorization code and return the code string."""
+    token = secrets.token_urlsafe(12)
+    oidc_codes[token] = code
+    return token
+
+
+def consume_oidc(token: str) -> OIDCCode | None:
+    """Consume an OIDC code, returning it if valid. Atomic removal."""
+    return oidc_codes.pop(token, None)
+
+
+def store_cookie(code: CookieCode) -> str:
+    """Store a cookie exchange code and return the code string."""
+    token = secrets.token_urlsafe(12)
+    cookie_codes[token] = code
+    return token
+
+
+def consume_cookie(token: str) -> CookieCode | None:
+    """Consume a cookie exchange code, returning it if valid. Atomic removal."""
+    return cookie_codes.pop(token, None)